/* styles.css */
:root{
  --page-bg:#050814;
  --page-fg:#f7f7ff;
  --muted:#a8b0c8;

  --brand:#5f8cff;
  --brand-2:#3de2c5;

  --container:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: radial-gradient(circle at top left,#171f39 0,#050814 52%,#02030a 100%);
  color:var(--page-fg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.shell{
  max-width:var(--container);
  margin:0 auto;
  padding:1.2rem 1.4rem 4rem;
}

/* ===== Reveal: no-delay ===== */
.reveal-frame,.reveal-content{opacity:1;transform:none;transition:none}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(18px);
  background:linear-gradient(to bottom, rgba(5,8,20,.92), rgba(5,8,20,.82), transparent);
}
.site-header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0.7rem 1.4rem 0.85rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.site-logo{
  font-weight:650;
  letter-spacing:.03em;
  font-size:1.1rem;
}
.site-logo span{color:var(--brand-2)}

/* Mobile toggle */
.nav-toggle{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:34px;
  height:28px;
  justify-content:center;
  align-items:flex-end;
  background:transparent;
  border:none;
  cursor:pointer;
}
.nav-toggle-line{
  height:2px;
  width:100%;
  border-radius:99px;
  background:rgba(200,210,240,.9);
  transition:transform .2s ease, opacity .2s ease, width .2s ease;
}
.nav-toggle.is-active .nav-toggle-line:first-child{transform:translateY(3px) rotate(38deg)}
.nav-toggle.is-active .nav-toggle-line:last-child{transform:translateY(-3px) rotate(-38deg)}

/* Mobile dropdown */
.nav-links{
  position:absolute;
  top:100%;
  right:1.6rem;
  margin-top:.5rem;
  background:rgba(5,8,20,.96);
  border-radius:16px;
  border:1px solid rgba(120,145,220,.5);
  padding:.7rem .9rem;
  display:none;
  flex-direction:column;
  gap:.35rem;
  min-width:180px;
  box-shadow:0 16px 40px rgba(0,0,0,.85);
  font-size:.92rem;
  color:var(--muted);
  align-items:flex-start;
}
.nav-links.is-open{display:flex}
.nav-links a{padding:.35rem .2rem}
.nav-links a:hover{color:var(--page-fg)}

/* NAV CTA — FIX: αέρας δεξιά/αριστερά + να μην κολλάει */
/* NAV CTA — ΠΕΡΙΣΣΟΤΕΡΟΣ ΑΕΡΑΣ ΣΤΑ ΠΛΑΓΙΑ */
/* NAV CTA — περισσότερο κενό ΜΕΣΑ στο πλαίσιο */
/* NAV CTA — EXTRA WIDE / PREMIUM */
/* NAV CTA — μεγαλώνει ΜΟΝΟ το πλαίσιο (όχι αποστάσεις) */
/* NAV CTA — λίγο πιο άνετο πλαίσιο (ΟΧΙ υπερβολή) */
/* NAV CTA — αρχικό μέγεθος + λίγα px padding δεξιά/αριστερά */
.btn-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* ⬇️ ΑΥΤΟ ΕΙΝΑΙ ΤΟ ΚΛΕΙΔΙ */
  padding: 0.75rem 1.55rem;  /* + ~6px δεξιά & αριστερά σε σχέση με πριν */

  border-radius:999px;
  background:linear-gradient(135deg,#6aa8ff,#7ae7cf);
  color:#020309;
  font-weight:600;
  font-size:.93rem;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 12px 35px rgba(42,151,255,.55);

  white-space:nowrap;
}



/* ===================== HERO ===================== */
.hero{
  padding-top:1.6rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.hero-eyebrow{
  font-size:.88rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-2);
  margin-bottom:.5rem;
}
.hero-title{
  font-size:clamp(2rem,7vw,2.4rem);
  line-height:1.12;
  margin-bottom:.8rem;
  max-width:26rem;
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(135deg,#3de2c5,#7b5cff);
  -webkit-background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:1rem;
  color:var(--muted);
  max-width:34rem;
  margin-bottom:1.4rem;
}
.hero-meta{
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .7rem;
  margin-bottom:1.6rem;
}
.hero-meta span::after{content:"•";margin-left:.6rem;opacity:.35}
.hero-meta span:last-child::after{content:none}

.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:stretch;
  flex-direction:column;
  margin-bottom:.8rem;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.3rem;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#6aa8ff,#7ae7cf);
  color:#020309;
  font-weight:600;
  font-size:.98rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 16px 40px rgba(33,143,255,.65);
  cursor:pointer;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(160,176,210,.5);
  background:rgba(10,16,33,.85);
  color:var(--page-fg);
  font-weight:500;
  font-size:.95rem;
  cursor:pointer;
}
.hero-cta-row .btn-primary,
.hero-cta-row .btn-outline{width:100%}

/* tags */
.hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.hero-tag{
  font-size:.86rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(9,17,42,.9);
  border:1px solid rgba(86,110,172,.7);
  color:var(--muted);
}

/* ===== HERO 3D PHONE ===== */
.hero-visual{display:flex;justify-content:center;perspective:1400px}
.hero-phone.hero-panel{
  position:relative;
  width:100%;
  max-width:280px;
  padding:6px;
  border-radius:32px;
  background:radial-gradient(circle at top left,#27355a 0,#050814 70%);
  box-shadow:0 26px 80px rgba(0,0,0,.95),0 0 0 1px rgba(150,180,255,.4);
  transform-origin:center center;
  transform:rotateX(18deg) rotateY(-30deg) rotateZ(-6deg) translateY(4px);
  animation:heroFloat 18s ease-in-out infinite;
}
.hero-phone.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(180,205,255,.25);
  pointer-events:none;
}
.hero-phone.hero-panel::after{
  content:"";
  position:absolute;
  left:15%;
  right:15%;
  bottom:-24px;
  height:48px;
  background:radial-gradient(circle at center, rgba(64,150,255,.9), transparent 70%);
  filter:blur(12px);
  opacity:.9;
  pointer-events:none;
}
.hero-phone-screen{
  position:relative;
  width:100%;
  border-radius:26px;
  padding:1.3rem 1.4rem 1.4rem;
  background:radial-gradient(circle at top,#111827 0,#020617 65%,#01030a 100%);
  display:flex;
  flex-direction:column;
  gap:.9rem;
  overflow:hidden;
}
.hero-phone-screen::before{
  content:"";
  position:absolute;
  top:.85rem;
  left:50%;
  transform:translateX(-50%);
  width:36%;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(148,163,255,.6),rgba(56,189,248,.4));
  opacity:.8;
}
.hero-phone-header{margin-top:.55rem}
.hero-phone-eyebrow{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(209,213,255,.78);
  margin-bottom:.35rem;
}
.hero-phone-title{font-size:1.15rem;line-height:1.2}
.hero-phone-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.25rem}
.hero-phone-card{
  border-radius:18px;
  padding:.7rem .9rem;
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(15,23,52,.9));
  box-shadow:0 10px 30px rgba(0,0,0,.7);
  border:1px solid rgba(99,102,241,.45);
}
.hero-phone-card h3{font-size:.9rem;margin-bottom:.12rem}
.hero-phone-card p{font-size:.8rem;color:var(--muted)}

.hero-phone-orb{
  position:absolute;
  width:60px;height:60px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 20%,rgba(56,189,248,.9),rgba(37,99,235,.1));
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#e5f0ff;
  box-shadow:0 18px 45px rgba(0,0,0,.9);
  backdrop-filter:blur(8px);
}
.hero-phone-orb span{transform:translateY(1px)}
.hero-phone-orb--search{left:-40px;bottom:34px}
.hero-phone-orb--check{
  right:-34px;top:60px;
  background:radial-gradient(circle at 30% 20%,rgba(94,234,212,.95),rgba(59,130,246,.15));
}

@keyframes heroFloat{
  0%{transform:rotateX(18deg) rotateY(-30deg) rotateZ(-6deg) translateY(4px)}
  50%{transform:rotateX(12deg) rotateY(30deg) rotateZ(-3deg) translateY(0)}
  100%{transform:rotateX(18deg) rotateY(-30deg) rotateZ(-6deg) translateY(4px)}
}

/* ===================== SECTIONS ===================== */
.section{
  margin-top:2.4rem;
  padding:1.8rem 1.6rem 2rem;
  border-radius:24px;
  background: radial-gradient(circle at top left, #0c1224 0, #050814 55%, #02030a 100%);
  border:1px solid rgba(120,145,220,.35);
}
.section h2{
  font-size:1.55rem;
  margin-bottom:.6rem;
  background:linear-gradient(135deg,#3de2c5,#7b5cff);
  -webkit-background-clip:text;
  color:transparent;
}
.section-lead{
  color:var(--muted);
  font-size:.98rem;
  margin-bottom:1.6rem;
  max-width:42rem;
}

/* ===================== PORTFOLIO (STATIC MOCKS) ===================== */
.pf-grid{
  margin-top:1.6rem;
  display:grid;
  gap:1.6rem;
  grid-template-columns:1fr;
}

/* whole card clickable */
.pf-link{display:block}

/* card */
.pf-item{
  background:radial-gradient(circle at top, #121a32 0%, #050814 70%);
  border-radius:22px;
  border:1px solid rgba(130,150,220,.45);
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.65);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pf-item:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(0,0,0,.85);
  border-color:rgba(160,190,255,.65);
}

/* preview area */
.pf-preview{
  position:relative;
  width:100%;
  height:320px;
  overflow:hidden;
  border-radius:18px; /* ✅ ΜΟΝΗ ΑΛΛΑΓΗ: πιο στρογγυλεμένες γωνίες */
  border-bottom:1px solid rgba(150,170,240,.25);
  background:
    radial-gradient(circle at 20% 0%, rgba(95,140,255,.14), transparent 48%),
    linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0) 55%),
    #020309;
}

/* image: show whole, premium fit */
.pf-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;       /* ✅ whole image visible */
  padding:14px;             /* ✅ frame */
  border-radius:16px;       /* ✅ ΝΕΟ: πιο κυκλικές γωνίες στην ίδια την εικόνα */
  transform:scale(1);
  transition:transform .22s ease;
  filter:saturate(1.02) contrast(1.02);
}
.pf-item:hover .pf-preview img{transform:scale(1.02)}

/* overlay pill */
.pf-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:14px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.pf-item:hover .pf-overlay{opacity:1;transform:translateY(0)}

.pf-overlay-pill{
  padding:.62rem .9rem;
  border-radius:999px;
  background:rgba(5,8,20,.72);
  border:1px solid rgba(120,145,220,.6);
  color:var(--page-fg);
  font-size:.9rem;
  font-weight:650;
  letter-spacing:.01em;
  backdrop-filter: blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}

/* info */
.pf-info{padding:1.1rem 1.2rem 1.25rem}
.pf-info h3{
  font-size:1.05rem;
  margin-bottom:.35rem;
  background:linear-gradient(135deg,#3de2c5,#7b5cff);
  -webkit-background-clip:text;
  color:transparent;
}
.pf-info p{color:var(--muted);font-size:.9rem;line-height:1.45}

/* ===================== COMPARE ===================== */
.section-compare{margin-top:3.2rem}
.compare-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
.compare-card{
  background: radial-gradient(circle at top, #111a33 0, #050814 70%);
  border-radius:20px;
  border:1px solid rgba(140,165,230,.65);
  box-shadow:0 20px 45px rgba(0,0,0,.8);
  padding:1.1rem 1.1rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.compare-card--wrong{border-color:rgba(255,79,123,.65)}
.compare-card--right{border-color:rgba(61,226,197,.65)}
.compare-header{display:flex;flex-direction:column;gap:.35rem}
.compare-label{
  display:inline-flex;
  align-items:center;
  padding:.25rem .7rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.compare-label--wrong{
  background:rgba(255,79,123,.15);
  color:#ff9ab8;
  border:1px solid rgba(255,79,123,.7);
}
.compare-label--right{
  background:rgba(61,226,197,.15);
  color:#87f2d8;
  border:1px solid rgba(61,226,197,.7);
}
.compare-note{font-size:.86rem;color:var(--muted)}
.compare-image-wrap{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(140,165,230,.4);
  background:#020309;
}
.compare-image-wrap img{display:block;width:100%;height:auto}

/* ===================== ABOUT ===================== */
.about-grid{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
  align-items:center;
  justify-items:flex-start;
}
.about-photo{
  position:relative;
  width:130px;height:130px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
}
.about-photo-ring{
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:conic-gradient(from 180deg, #3de2c5, #7b5cff, #3de2c5);
  opacity:.85;
  filter:blur(.4px);
}
.about-photo img{
  position:relative;
  width:100%;height:100%;
  border-radius:inherit;
  object-fit:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.9);
}
.about-card{
  background: radial-gradient(circle at top, #111a33 0, #050814 70%);
  border-radius:20px;
  border:1px solid rgba(140,165,230,.55);
  box-shadow:0 16px 40px rgba(0,0,0,.75);
  padding:1.3rem 1.2rem;
  font-size:.93rem;
}
.about-card p{margin-bottom:.7rem}
.about-card ul{
  color:var(--muted);
  font-size:.9rem;
  display:grid;
  gap:.25rem;
}

/* ===================== SERVICES / PROCESS ===================== */
.cards{
  display:grid;
  gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.card,.step{
  background: radial-gradient(circle at top, #111a33 0, #050814 70%);
  border-radius:20px;
  border:1px solid rgba(140,165,230,.55);
  box-shadow:0 16px 40px rgba(0,0,0,.75);
  padding:1.3rem 1.2rem;
  font-size:.93rem;
  transition:transform .18s ease-out, box-shadow .18s ease-out;
}
.card:hover,.step:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(0,0,0,.85);
}
.card h3{margin-bottom:.4rem;font-size:1rem}
.card p{color:var(--muted);font-size:.9rem}

.process-steps{display:grid;gap:1rem;margin-top:.4rem}
.step-toggle{
  all:unset;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  cursor:pointer;
}
.step-title-text{font-weight:600;font-size:.96rem}
.step-body{
  color:var(--muted);
  font-size:.9rem;
  margin-top:.35rem;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .22s ease, opacity .18s ease, margin-top .18s ease;
}
.step.step--open .step-body{max-height:200px;opacity:1;margin-top:.45rem}
.step-arrow{
  width:22px;height:22px;
  border-radius:999px;
  border:1px solid rgba(140,165,230,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--muted);
  flex-shrink:0;
  margin-left:.75rem;
  transform:rotate(0deg);
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.step-arrow::before{content:"⌄"}
.step.step--open .step-arrow{
  background:rgba(99,153,255,.24);
  color:var(--page-fg);
  border-color:rgba(130,170,255,.9);
  transform:rotate(180deg);
}

/* ===================== FOOTER ===================== */
footer{
  border-top:1px solid rgba(120,135,180,.4);
  margin-top:3.5rem;
  padding:1.5rem 0 2.5rem;
  font-size:.86rem;
  color:var(--muted);
  text-align:center;
}

/* ===================== SCROLL TOP ===================== */
.scroll-top{
  position:fixed;
  right:1.2rem;
  bottom:3rem;
  width:44px;height:44px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#6aa8ff,#7ae7cf);
  color:#020309;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 40px rgba(33,143,255,.7);
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:60;
}
.scroll-top.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ===================== RESPONSIVE ===================== */
@media (min-width:520px){
  .pf-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width:900px){
  .pf-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width:768px){
  .shell{padding-inline:1.6rem}
  .site-header-inner{padding-inline:1.6rem}

  .nav-toggle{display:none}
  .nav-links{
    position:static;
    display:flex;
    flex-direction:row;
    gap:1.4rem;
    align-items:center;
    background:transparent;
    border:none;
    box-shadow:none;
    margin-top:0;
    padding:0 .4rem 0 0;
    min-width:auto;
    font-size:.95rem;
    color:var(--muted);
  }
  .nav-links a{padding:0}
  .nav-links a:hover{color:var(--page-fg)}

  .hero{
    padding-top:2.6rem;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    grid-template-rows:auto auto;
    gap:2.2rem 2.8rem;
    align-items:center;
  }
  .hero-copy{grid-column:1;grid-row:1}
  .hero-visual{grid-column:2;grid-row:1 / span 2;margin-top:0;justify-content:flex-end}
  .hero-tags-row{grid-column:1;grid-row:2;align-self:flex-start}
  .hero-title{font-size:clamp(2.1rem,3vw,2.7rem);max-width:none}
  .hero-sub{font-size:1.02rem}
  .hero-cta-row{flex-direction:row;align-items:center}
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-outline{width:auto}

  .hero-phone.hero-panel{max-width:330px}
  .hero-phone-screen{padding-bottom:2.4rem}

  .compare-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .about-grid{grid-template-columns:auto minmax(0,1fr);justify-items:stretch}
}
/* FORCE NAV CTA PADDING (τελικό override) */
.site-header .nav-links a.btn-nav{
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-width: unset !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}