/* spark agency site, v3 "Apple-like" theme (2026-11-03). Sits on top of the shared template (demo.css).
   Light, quiet, lots of white space, one interactive colour (blue). Palette and type: brand/identity.md. */
:root{
  --white:#FFFFFF; --snow:#F5F5F7; --graphite:#1D1D1F; --gray:#6E6E73; --hair:#D2D2D7;
  --blue:#0071E3; --blue-hover:#0077ED; --link:#0066CC;
  --cyan:#4FE3D2; --violet:#8B7CFF; --grad:linear-gradient(100deg,#2BB7A9,#7A63F0);
  --font-head:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --bg:var(--white); --surface:var(--white); --surface-2:var(--snow); --text:var(--graphite); --muted:var(--gray); --line:var(--hair);
  --brand:var(--blue); --brand-ink:#fff; --accent:var(--blue); --radius:22px; --radius-sm:12px;
  --head-weight:700; --head-tracking:-.028em;
  --shadow-soft:0 2px 6px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);
}
body{background:var(--white);color:var(--graphite);font-size:17px;letter-spacing:-.011em;line-height:1.47}
h1,h2,h3{color:var(--graphite)}
.lead,.muted{color:var(--gray)}
a{color:inherit}

.section{padding:110px 0;background:var(--white)}
.section--tint,.section--ink{background:var(--snow)}
@media (max-width:700px){.section{padding:72px 0}}

.eyebrow{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--gray);margin-bottom:.6rem}
.tag{font-size:.75rem;font-weight:600;letter-spacing:0;text-transform:none;background:var(--snow);color:var(--gray);padding:.3em .75em}

/* Header: thin, translucent, like apple.com */
.site-header{background:rgba(255,255,255,.8);border-bottom:1px solid rgba(0,0,0,.08);backdrop-filter:saturate(1.8) blur(20px)}
.site-header .wrap{height:56px}
.brand img{height:28px;width:auto}
.nav a{color:rgba(29,29,31,.8);font-weight:400;font-size:.85rem}
.nav a:hover{color:var(--graphite)}
.lang{background:transparent;border:1px solid var(--hair);color:var(--graphite);font-weight:500;font-size:.75rem}
.site-header .btn{padding:.45em 1em;font-size:.8rem}
@media (max-width:900px){.nav{inset:56px 0 auto 0;background:rgba(255,255,255,.97)}}

/* Buttons: blue pills and text links */
.btn{border-radius:980px;font-weight:500;font-size:1rem;letter-spacing:-.01em;padding:.75em 1.4em;transition:background .2s,transform .15s}
.btn:hover{transform:none;box-shadow:none}
.btn--primary{background:var(--blue);border:0;color:#fff}
.btn--primary:hover{background:var(--blue-hover)}
.btn--ghost,.btn--outline-light{background:transparent;border:1px solid var(--link);color:var(--link)}
.btn--ghost:hover,.btn--outline-light:hover{background:rgba(0,113,227,.06)}

/* ===== Hero ===== */
.p-hero{background:var(--white);padding:84px 0 0;overflow:hidden}
.hero-head{text-align:center;max-width:980px}
.hero-head .eyebrow{display:block}
.p-hero h1{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:700;letter-spacing:-.045em;line-height:1.04;margin:0 auto .35em;max-width:14ch}
.p-hero .lead{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;color:var(--gray);max-width:30em;margin:0 auto;font-weight:400}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center;max-width:1040px;padding-top:56px;padding-bottom:96px}
.try{background:var(--snow);border-radius:28px;padding:28px;max-width:none;margin:0;box-shadow:none;border:0}
.try-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
.try label{display:block;font-size:.8rem;font-weight:500;color:var(--gray);margin:0 0 6px 4px;letter-spacing:0;text-transform:none}
.try input,.try select{width:100%;font:400 1.05rem var(--font-body);padding:.8em 1em;border:1px solid var(--hair);border-radius:12px;background:#fff;color:var(--graphite)}
.try input::placeholder{color:#86868B}
.try input:focus,.try select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.try .btn{width:100%}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;color:var(--gray);font-size:.88rem;justify-content:flex-start}
.hero-meta strong{color:var(--graphite);font-weight:600}
.hero-device{display:flex;flex-direction:column;align-items:center;gap:16px}
.phone{position:relative;width:330px;max-width:100%;aspect-ratio:390/844;border-radius:52px;background:#1D1D1F;padding:12px;
  box-shadow:0 0 0 1.5px #3a3a3c inset,0 50px 100px -20px rgba(0,0,0,.25),0 30px 60px -30px rgba(0,0,0,.3)}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:26px;border-radius:14px;background:#000;z-index:2}
.phone-screen{--sb:34px;position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff}
.phone-screen::before{content:"9:41";position:absolute;top:0;left:0;right:0;height:var(--sb);background:#fff;color:#000;font:600 12px/var(--sb) var(--font-body);padding-left:26px;z-index:1}
.phone-screen iframe,.laptop-screen iframe{position:absolute;left:0;border:0;transform:scale(var(--s,1));transform-origin:0 0;background:#fff;transition:opacity .3s}
.phone-screen iframe{top:var(--sb);width:390px;height:844px}
.phone.loading .phone-screen,.loading>iframe{opacity:.4}
.device-note{font-size:.8rem;color:var(--gray);display:flex;align-items:center;gap:8px;margin:0}
.live-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#30D158}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#30D158;animation:pulse 2s infinite}
@keyframes pulse{to{transform:scale(2.6);opacity:0}}
@media (max-width:900px){
  .p-hero{padding-top:48px}
  .hero-grid{grid-template-columns:1fr;gap:48px;padding-top:36px;padding-bottom:64px}
  .phone{width:min(290px,78vw)}
}

/* Section heads: big, centred, quiet */
.section-head{max-width:820px;margin:0 auto 56px;text-align:center}
.section-head .lead{margin-left:auto;margin-right:auto}
.section-head h2{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.07}
.section-head .lead{font-size:1.2rem}

/* Timeline: clean, numbered by day */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.timeline li{background:var(--snow);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column}
.timeline li.go{background:var(--graphite);color:#fff}
.timeline li.go h3{color:#fff}
.timeline li.go p{color:#A1A1A6}
.timeline .day{font-size:.85rem;font-weight:600;color:var(--gray);margin-bottom:10px}
.timeline li.go .day{color:#A1A1A6}
.timeline h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.4em}
.timeline p{color:var(--gray);font-size:.97rem;margin:0 0 18px}
.timeline .cost{margin-top:auto;font-size:2rem;font-weight:700;letter-spacing:-.04em}
.timeline li:nth-child(-n+2) .cost{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:900px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.timeline{grid-template-columns:1fr}}

/* ===== Portfolio showcase ===== */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 auto 36px;justify-content:center;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;display:flex;align-items:center;gap:8px;background:#fff;color:var(--graphite);border:1px solid transparent;border-radius:980px;padding:6px 16px 6px 6px;font:500 .9rem var(--font-body);cursor:pointer;transition:background .2s,border-color .2s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tabs button img{width:40px;height:28px;object-fit:cover;object-position:top;border-radius:980px}
.tabs button:hover{border-color:var(--hair)}
.tabs button[aria-selected=true]{background:var(--graphite);color:#fff}
.tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:900px){.tabs{justify-content:flex-start}}
.showcase{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center}
.devices{position:relative;padding-bottom:44px}
.laptop{background:#1D1D1F;border-radius:18px;padding:12px 12px 14px;box-shadow:0 50px 100px -30px rgba(0,0,0,.3)}
.laptop-bar{display:flex;align-items:center;gap:6px;padding:0 4px 10px}
.laptop-bar i{width:9px;height:9px;border-radius:50%;background:#48484A}
.laptop-bar .url{margin:0 auto;background:#2C2C2E;color:#A1A1A6;border-radius:6px;padding:3px 40px;font-size:.72rem}
.laptop-screen{position:relative;aspect-ratio:1280/800;overflow:hidden;border-radius:6px;background:#fff}
.laptop-screen iframe{top:0;width:1280px;height:800px}
.devices .phone--sm{position:absolute;right:-18px;bottom:0;width:26%;min-width:120px;border-radius:32px;padding:7px}
.devices .phone--sm::before{top:12px;width:38%;height:12px}
.devices .phone--sm .phone-screen{--sb:20px;border-radius:26px}
.devices .phone--sm .phone-screen::before{font-size:8px;padding-left:16px}
.panel h3{font-size:2rem;font-weight:700;letter-spacing:-.035em;margin:.5em 0 .35em}
.problem{color:var(--graphite);font-size:1.05rem}
.panel .checks li{color:var(--gray)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.chips>span{background:#fff;border-radius:980px;padding:.35em .85em;font-size:.8rem;color:var(--gray)}
.chips b{color:var(--graphite);font-weight:600}
.speed{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:80px;text-align:center}
.speed>div{background:#fff;border-radius:var(--radius);padding:36px 26px}
.speed b{display:block;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;letter-spacing:-.05em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.speed span{color:var(--gray);font-size:.95rem}
@media (max-width:980px){.showcase{grid-template-columns:1fr}.devices{max-width:760px;margin:0 auto}}
@media (max-width:640px){
  .laptop{display:none}
  .devices{padding:0;display:flex;justify-content:center}
  .devices .phone--sm{position:relative;right:auto;width:min(290px,78vw)}
  .speed{grid-template-columns:1fr}
}

/* Checks: Apple-style blue ticks */
.checks li::before{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/11px no-repeat}

/* ===== Pricing ===== */
.offer{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:stretch}
@media (max-width:900px){.offer{grid-template-columns:1fr}}
.plan{background:var(--snow);border:0;border-radius:var(--radius);padding:40px;display:flex;flex-direction:column}
.plan--main{background:var(--graphite);color:#F5F5F7}
.plan--main h3{color:#fff}
.plan--main .muted,.plan--main .checks li{color:#A1A1A6}
.plan .amount{font-size:3.6rem;font-weight:700;letter-spacing:-.05em;line-height:1;margin:.2em 0}
.plan--main .amount{color:#fff}
.plan .amount small{font-size:1rem;font-weight:500;letter-spacing:-.01em;color:var(--gray)}
.plan--main .amount small{color:#A1A1A6}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan-side{display:grid;gap:20px}
.deadline{display:inline-block;align-self:flex-start;background:rgba(255,255,255,.12);color:#fff;font-size:.8rem;font-weight:600;border-radius:980px;padding:.35em .9em}
.not{font-size:.88rem;color:var(--gray);margin-top:20px;text-align:center}
.band,.band--glow{background:var(--snow);color:var(--graphite);border:0;border-radius:28px;padding:56px}
.band h2{color:var(--graphite);font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.035em}
.band p{color:var(--gray);opacity:1}
@media (max-width:760px){.band,.band--glow{padding:32px 24px}}

/* Compare */
.compare-wrap{overflow-x:auto;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-soft)}
.compare{width:100%;border-collapse:collapse;font-size:.95rem}
.compare th,.compare td{padding:16px 18px;border-bottom:1px solid #EDEDF0;text-align:center;color:var(--gray)}
.compare th:first-child,.compare td:first-child{text-align:left;color:var(--graphite)}
.compare thead th{font-size:.8rem;font-weight:600;color:var(--gray)}
.compare tr:last-child td{border-bottom:0}
.compare .us{background:rgba(0,113,227,.05);color:var(--link);font-weight:600}

/* Founders */
.founders{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.quote-big{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;line-height:1.3;letter-spacing:-.03em;margin:0 0 20px;color:var(--graphite)}
.sign{font-size:.95rem;font-weight:500;color:var(--gray);display:flex;align-items:center;gap:10px}
.sign::before{content:"";width:24px;height:1.5px;background:var(--hair)}
.team{display:grid;grid-template-columns:1fr;gap:12px}
.person{background:var(--snow);border:0;border-radius:var(--radius);display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;padding:20px 24px}
.person h3{margin:0;font-size:1.1rem}
.person p{color:var(--gray);margin:0}
.avatar{grid-row:span 2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:600;background:#fff;color:var(--graphite);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.avatar--ai{background:var(--graphite);color:#fff;font-size:1rem}
@media (max-width:860px){.founders{grid-template-columns:1fr}}

/* FAQ */
.faq{margin:0 auto}
.faq h2{text-align:center;font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.04em;margin-bottom:.8em}
.faq details{border-bottom:1px solid var(--hair);padding:22px 0}
.faq summary{color:var(--graphite);font-weight:600;font-size:1.1rem}
.faq summary::after{color:var(--blue);font-weight:300}
.faq details p{color:var(--gray)}

/* Forms */
.form label{color:var(--graphite);font-weight:500;font-size:.85rem}
.form input,.form select,.form textarea{background:#fff;border:1px solid var(--hair);border-radius:12px;color:var(--graphite)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.form .note{color:var(--gray)}
.form .note a,#contact .checks a,.doc a{color:var(--link)}
.form-ok{background:rgba(0,113,227,.06);border:1px solid rgba(0,113,227,.3);color:var(--graphite);border-radius:12px}
.send-row{display:flex;flex-wrap:wrap;gap:10px}
#lead-form.sent .form-ok{display:block}
#lead-form.sent>*:not(.form-ok){display:revert}
#lead-form.sent .send-row{opacity:.6}

/* Footer: small grey type, like apple.com */
.site-footer{background:var(--snow);border-top:0;color:var(--gray);font-size:.8rem;padding:48px 0 90px}
.site-footer h2,.site-footer h4{color:var(--graphite);font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none}
.site-footer a:hover{color:var(--graphite);text-decoration:underline}
.site-footer .legal{border-top:1px solid var(--hair);color:var(--gray)}

/* Privacy page */
.doc{max-width:720px}

/* Gentle scroll reveal */
.js .reveal{transform:translateY(24px)}

@media (prefers-reduced-motion:reduce){.live-dot::after{animation:none}}

/* ===== v3.1: futuristic accents on the light theme (Apple product-page style) ===== */
/* Soft aurora behind the hero phone */
.hero-device{position:relative;isolation:isolate}
.hero-device::before{content:"";position:absolute;inset:-8% -75% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(43,183,169,.42),transparent) 18% 28%/62% 58% no-repeat,
             radial-gradient(closest-side,rgba(122,99,240,.40),transparent) 82% 68%/62% 58% no-repeat;
  filter:blur(24px);animation:aurora 14s ease-in-out infinite alternate}
@keyframes aurora{to{transform:rotate(10deg) scale(1.06)}}
/* Frosted-glass form panel */
.try{background:rgba(245,245,247,.72);backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 50px -20px rgba(0,0,0,.12)}
/* Gradient hairline under the header */
.site-header{border-bottom:0}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(43,183,169,.5),rgba(122,99,240,.5),transparent)}
/* Featured dark card + Launch Pack get a living gradient edge */
.plan--main{position:relative;overflow:hidden}
.timeline li.go{background-image:radial-gradient(120% 70% at 50% 120%,rgba(122,99,240,.38),transparent 70%)}
.plan--main::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;
  background:radial-gradient(closest-side,rgba(122,99,240,.35),transparent 70%);pointer-events:none}
/* Showcase: laptop eases in as it scrolls into view (pure CSS, modern browsers only) */
@supports (animation-timeline:view()){
  .laptop{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes rise{from{transform:perspective(1400px) rotateX(14deg) scale(.92)}to{transform:none}}
}
/* Big numbers glow softly */
.speed>div{position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.speed>div::before{content:"";position:absolute;inset:-40% -40% auto;height:80%;background:radial-gradient(closest-side,rgba(43,183,169,.14),transparent 70%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero-device::before{animation:none}.laptop{animation:none!important}}

/* ===================================================================================
   v4 motion layer (2026-11-04). Everything that moves is gated on html.motion, which an
   inline script in <head> sets only when the visitor hasn't asked for reduced motion.
   Without it (or without JS) the page is fully visible and static.
   =================================================================================== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-back:cubic-bezier(.34,1.56,.64,1)}

/* Scroll progress: thin brand-gradient bar on the header */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none;z-index:1}

/* Generic reveals (site.js adds .rv / .rv-h and toggles .in) */
.motion .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.motion .rv.in{opacity:1;transform:none}
.motion .rv-h{clip-path:inset(0 0 100% 0);transform:translateY(.35em);transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.motion .rv-h.in{clip-path:inset(-20% -5% -25% -5%);transform:none}

/* Hero entrance on load */
@keyframes rise-clip{from{clip-path:inset(0 0 100% 0);transform:translateY(.3em)}to{clip-path:inset(-20% -5% -25% -5%);transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.motion .p-hero .eyebrow{animation:fade-up .8s var(--ease) both}
.motion .p-hero h1{animation:rise-clip 1.1s var(--ease) .08s both}
.motion .p-hero .lead{animation:fade-up .9s var(--ease) .35s both}
.motion .hero-grid>div:first-child{animation:fade-up 1s var(--ease) .5s both}
.motion .hero-device{animation:fade-up 1.1s var(--ease) .65s both}
.motion .hero-meta>span{animation:fade-up .7s var(--ease) both}
.motion .hero-meta>span:nth-child(1){animation-delay:.8s}.motion .hero-meta>span:nth-child(2){animation-delay:.9s}.motion .hero-meta>span:nth-child(3){animation-delay:1s}
/* Phone: floats gently and tilts toward the mouse */
@keyframes float{50%{translate:0 -10px}}
.motion #hero-phone{animation:float 6s ease-in-out infinite;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}

/* Buttons: lift, light sweep, press, magnetic pull (site.js sets --tx/--ty) */
.btn{position:relative;overflow:hidden;isolation:isolate}
.motion .btn{transition:background .2s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.motion .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.motion .btn:hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px))}
.motion .btn:hover::after{transform:translateX(130%)}
.motion .btn:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.96);transition-duration:.1s}
.motion .btn--primary:hover{box-shadow:0 12px 28px -10px rgba(0,113,227,.65)}
.motion .btn--ghost::after,.motion .btn--outline-light::after{background:linear-gradient(110deg,transparent 30%,rgba(0,113,227,.12) 50%,transparent 70%)}

/* Cards: lift + a soft light that follows the mouse (site.js sets --mx/--my) */
.motion .spot{transition:opacity .6s ease,transform .45s var(--ease),box-shadow .45s var(--ease)}
.motion .spot:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(0,0,0,.22)}
.motion .spot:hover{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(79,227,210,.16),rgba(139,124,255,.10) 35%,transparent 65%)}
.motion .timeline li.go.spot:hover,.motion .plan--main.spot:hover{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(79,227,210,.22),rgba(139,124,255,.16) 35%,transparent 65%)}
.motion .plan.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px))}
.motion .plan.tilt:hover{--ly:-6px}

/* ===== "How it works": a progress line lights the 4 steps in order ===== */
.journey{position:relative}
.js .journey{padding-top:54px}
.track{display:none}
.js .track{display:block;position:absolute;left:0;top:0;width:0;height:2px;background:var(--hair);border-radius:2px}
.track-fill{position:absolute;inset:0;background:var(--grad);border-radius:inherit;transform-origin:0 0;transform:scaleX(var(--p,1))}
.track.vert .track-fill{transform:scaleY(var(--p,1))}
.timeline li{position:relative}
.node{display:none}
.js .node{display:block;position:absolute;left:26px;top:-34px;width:14px;height:14px;margin:-7px 0 0 0;border-radius:50%;background:#fff;border:2px solid var(--hair);transition:background .4s,border-color .4s,transform .4s var(--ease-back);z-index:1}
.timeline li.reached .node{background:#2BB7A9;border-color:#fff;box-shadow:0 0 0 2px #2BB7A9;transform:scale(1.15)}
.timeline li.go.reached .node{background:#7A63F0;box-shadow:0 0 0 2px #7A63F0}
.timeline li.now .node::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #2BB7A9;animation:ping 1.6s var(--ease) infinite}
@keyframes ping{to{transform:scale(2.6);opacity:0}}
.motion .timeline li{transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .45s var(--ease)}
.motion .timeline li:not(.reached){opacity:.38;transform:translateY(14px) scale(.97)}
.motion .timeline li.reached .cost{animation:pop .6s var(--ease-back) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.paid{text-align:center;margin:30px 0 0;color:var(--gray);font-size:.95rem}
.paid b{display:inline-block;color:var(--graphite);font-size:1.15rem;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:left}
.paid b.bump{animation:pop .5s var(--ease-back)}
/* Arrival: a burst goes off at "Φτάσαμε!" */
.burst{position:absolute;left:7px;top:7px;width:0;height:0;pointer-events:none}
.burst i{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:2px;background:var(--c);animation:burst 1s var(--ease) forwards}
@keyframes burst{from{transform:rotate(var(--a)) translateX(0) scale(1)}to{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}}
.timeline li.go.reached h3{transition:text-shadow .6s}
.journey.arrived li.go h3{text-shadow:0 0 22px rgba(139,124,255,.7)}
@media (max-width:900px){
  .timeline{grid-template-columns:1fr!important}
  .js .journey{padding-top:0;padding-left:40px}
  .js .node{left:-33px;top:38px}
}

/* ===== "Building" overlay: shown in the phone/laptop while a site loads ===== */
.build{position:absolute;left:0;right:0;bottom:0;top:var(--sb,0px);z-index:2;display:flex;flex-direction:column;gap:5%;padding:7% 7% 0;
  background-color:#F7F9FC;background-image:linear-gradient(rgba(0,113,227,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,113,227,.07) 1px,transparent 1px);background-size:22px 22px;
  opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s;pointer-events:none;overflow:hidden}
.building>.build{opacity:1;visibility:visible;transition:opacity .15s}
.building>iframe{opacity:0!important}
.build>*{flex:none;border-radius:10px;background:#fff;border:1.5px dashed rgba(0,113,227,.45)}
.b-nav{height:7%;display:flex;align-items:center;gap:8%;padding:0 6%}
.b-nav i{height:28%;flex:1;border-radius:4px;background:#E3E8F0}.b-nav i:first-child{flex:2;background:#C9D3E3}
.b-hero{height:30%;background:linear-gradient(135deg,#DDEBFF,#E9E4FF)!important}
.b-line{height:4%;border-radius:6px!important;background:#E3E8F0!important;border:0!important}.b-line.w1{width:85%}.b-line.w2{width:55%}
.b-btn{height:6%;width:42%;border-radius:999px!important;background:#0071E3!important;border:0!important}
.b-cards{height:18%;display:flex;gap:6%;background:transparent!important;border:0!important}.b-cards i{flex:1;border-radius:10px;background:#fff;border:1.5px dashed rgba(0,113,227,.45)}
.b-label{position:absolute;left:0;right:0;bottom:9%;margin:0;border:0!important;background:none!important;text-align:center;font:600 13px/1.3 var(--font-body);color:var(--graphite);padding:0 8%}
.b-label b{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:15px}
.b-bar{position:absolute;left:12%;right:12%;bottom:5%;height:4px;border:0!important;background:#E3E8F0!important;overflow:hidden}
.b-bar i{position:absolute;inset:0;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.laptop-screen .b-label{font-size:18px}.laptop-screen .b-label b{font-size:22px}
.phone--sm .b-label{font-size:8px}.phone--sm .b-label b{font-size:10px}
@keyframes brick{0%{transform:translateY(-140%) rotate(-3deg);opacity:0}60%{transform:translateY(6%) rotate(.5deg);opacity:1}100%{transform:none}}
@keyframes bar{to{transform:scaleX(1)}}
.building>.build>:nth-child(-n+6){animation:brick .55s var(--ease) both}
.building>.build>:nth-child(1){animation-delay:.05s}.building>.build>:nth-child(2){animation-delay:.2s}.building>.build>:nth-child(3){animation-delay:.35s}
.building>.build>:nth-child(4){animation-delay:.47s}.building>.build>:nth-child(5){animation-delay:.6s}.building>.build>:nth-child(6){animation-delay:.72s}
.building>.build .b-bar i{animation:bar 1.1s var(--ease) forwards}
.building>.build .b-label{animation:fade-up .5s var(--ease) .2s both}
.motion .phone.loading .phone-screen,.motion .loading>iframe{opacity:1}

/* ===== Portfolio ===== */
.motion .tabs button img{transition:transform .4s var(--ease)}
.motion .tabs button:hover img{transform:scale(1.15) rotate(-2deg)}
.motion .tabs button{transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.motion .tabs button:hover{transform:translateY(-2px)}
.motion .panel:not([hidden])>*{animation:fade-up .6s var(--ease) both}
.motion .panel:not([hidden])>:nth-child(2){animation-delay:.06s}.motion .panel:not([hidden])>:nth-child(3){animation-delay:.12s}
.motion .panel:not([hidden])>:nth-child(4){animation-delay:.18s}.motion .panel:not([hidden])>:nth-child(5){animation-delay:.24s}.motion .panel:not([hidden])>:nth-child(6){animation-delay:.3s}
.laptop-bar .url::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:#A1A1A6;opacity:0}
.laptop-bar .url.typing::after{opacity:1;animation:blink .6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
[data-count]{font-variant-numeric:tabular-nums}

/* ===== Compare table: rows slide in, spark ticks pop ===== */
.motion .compare tbody tr{opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.motion .compare.in tbody tr{opacity:1;transform:none}
.motion .compare tbody tr:nth-child(2){transition-delay:.1s}.motion .compare tbody tr:nth-child(3){transition-delay:.2s}.motion .compare tbody tr:nth-child(4){transition-delay:.3s}.motion .compare tbody tr:nth-child(5){transition-delay:.4s}
.motion .compare.in td.us{animation:pop .6s var(--ease-back) both}
.motion .compare.in tr:nth-child(1) td.us{animation-delay:.5s}.motion .compare.in tr:nth-child(2) td.us{animation-delay:.6s}.motion .compare.in tr:nth-child(3) td.us{animation-delay:.7s}.motion .compare.in tr:nth-child(4) td.us{animation-delay:.8s}.motion .compare.in tr:nth-child(5) td.us{animation-delay:.9s}
.compare tbody tr{transition:background .2s}
.compare tbody tr:hover{background:#FAFAFC}

/* ===== Founders ===== */
.motion .person:hover .avatar{animation:wave .7s var(--ease-back)}
@keyframes wave{30%{transform:rotate(-12deg) scale(1.08)}60%{transform:rotate(8deg)}}
.avatar--ai{position:relative;isolation:isolate}
.avatar--ai::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;background:conic-gradient(from var(--ang,0deg),#4FE3D2,#8B7CFF,#4FE3D2)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.motion .avatar--ai::before{animation:spin 6s linear infinite}
@keyframes spin{to{--ang:360deg}}

/* ===== FAQ: smooth open, + turns into × ===== */
.faq summary::after,.faq details[open] summary::after{content:"+";transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--blue)}
.motion .faq details{interpolate-size:allow-keywords}
.motion .faq details::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
.motion .faq details[open]::details-content{height:auto}

/* ===== Contact ===== */
.motion #lead-form.sent .form-ok{animation:fade-up .6s var(--ease-back)}
.motion .form input,.motion .form textarea{transition:border-color .2s,box-shadow .3s,transform .3s var(--ease)}
.motion .form input:focus,.motion .form textarea:focus{transform:translateY(-1px)}


@media (prefers-reduced-motion:reduce){.build{display:none!important}}