:root{
  --ink:#0a0a0b; --ink-2:#141416; --ivory:#ffffff; --tint:#f4f5f8; --line:#e5e7ec;
  --accent:#2b50ff; --accent-2:#7d96ff; --text:#1b1c20; --muted:#5f6470;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --radius:18px; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--ivory);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.8rem,7vw,5.6rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3{font-size:1.35rem;letter-spacing:-.01em}
em{font-style:italic;color:var(--accent)}
p{margin:0}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .3s,box-shadow .3s,border-color .3s;font-family:inherit}
.btn--sm{padding:10px 20px;font-size:.88rem}
.btn--block{width:100%}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(43,80,255,.7)}
.btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-2)}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent;color:#fff}
.nav.scrolled{background:rgba(10,10,11,.82);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.08)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.45rem;letter-spacing:-.01em}
.logo svg{color:var(--accent)}
.nav__links{display:flex;align-items:center;gap:34px;font-size:.92rem}
.nav__links a:not(.btn){opacity:.8;transition:opacity .2s}
.nav__links a:not(.btn):hover{opacity:1}
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:transform .3s,top .3s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;background:var(--ink);color:#fff;padding:190px 0 90px;overflow:hidden}
.hero{min-height:100vh;display:flex;align-items:center}
.hero__bg{position:absolute;inset:-8% 0;will-change:transform;background:var(--ink)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.88) 0%,rgba(10,10,11,.55) 55%,rgba(10,10,11,.2) 100%)}
.hero__inner{width:min(1180px,100% - 48px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{transform:translateY(-2px);background:#26262a}
.about .btn{margin-top:30px}
.about p+p{margin-top:16px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;border-top:3px solid var(--accent)}
.value h3{margin-bottom:8px;font-size:1.2rem}
.value p{font-size:.93rem}
.section__head .lede{margin-top:18px}
.section--dark .lede{color:rgba(255,255,255,.65)}
.grid{display:grid;gap:24px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.card--dark{background:var(--ink-2);border-color:rgba(255,255,255,.1)}
.card--dark p{color:rgba(255,255,255,.62)}
.card--dark:hover{border-color:var(--accent)}
.card{display:flex;flex-direction:column}
.list{list-style:none;padding:0;margin:20px 0;display:grid;gap:8px;font-size:.92rem;font-weight:500}
.list li{padding-left:22px;position:relative}
.list li::before{content:"✦";position:absolute;left:0;color:var(--accent);font-size:.7rem;top:3px}
.more{margin-top:auto;padding-top:8px;color:var(--ink);font-weight:600;font-size:.9rem;transition:color .2s}
.more:hover{color:var(--accent)}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;display:flex;flex-direction:column;position:relative}
.plan .price{font-family:var(--serif);font-size:2.8rem;line-height:1.1;margin:14px 0 24px;letter-spacing:-.02em}
.plan .price small{display:block;font-family:var(--sans);font-size:.82rem;color:var(--muted);letter-spacing:0;margin-top:4px}
.checks{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px;flex:1;font-size:.95rem}
.checks li{padding-left:28px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.plan--featured{background:var(--ink);color:#fff;border-color:var(--accent);translate:0 -12px;box-shadow:0 30px 60px -30px rgba(10,10,11,.6)}
.plan--featured .price small{color:rgba(255,255,255,.6)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.contact h2 em{color:var(--accent)}
.page-hero{background:radial-gradient(700px 360px at 85% 0%,rgba(43,80,255,.25),transparent 70%),var(--ink);color:#fff;padding:170px 0 80px}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4.2rem);margin-bottom:20px}
.page-hero .lede{color:rgba(255,255,255,.68)}
.form--page{max-width:640px;margin-inline:auto;box-shadow:0 30px 60px -36px rgba(10,10,11,.35);border:1px solid var(--line)}
.nav__links [aria-current="page"]:not(.btn){opacity:1;color:var(--accent-2)}
@media (max-width:760px){.page-hero{padding:130px 0 56px}}
@media (max-width:1100px){.grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.grid.three{grid-template-columns:1fr}.plan--featured.reveal.in{translate:none}.values{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.grid.four,.values{grid-template-columns:1fr}.hero__bg img{object-position:65% bottom}}
.hero__inner{position:relative}
.hero h1{margin-bottom:28px;max-width:14ch}
.hero .lede{color:rgba(255,255,255,.68);margin-bottom:40px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:84px}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding-top:36px;border-top:1px solid rgba(255,255,255,.12);max-width:760px}
.hero__stats dt{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--accent-2)}
.hero__stats dd{margin:4px 0 0;font-size:.88rem;color:rgba(255,255,255,.6)}

/* Marquee */
.marquee{background:var(--ink-2);color:rgba(255,255,255,.55);overflow:hidden;border-top:1px solid rgba(255,255,255,.08);padding:22px 0}
.marquee__track{display:flex;gap:56px;width:max-content;animation:scroll 38s linear infinite;font-family:var(--serif);font-size:1.4rem;font-style:italic;white-space:nowrap;padding-right:56px}
.marquee__track span::after{content:"✦";color:var(--accent);margin-left:56px;font-style:normal;font-size:.8rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:120px 0}
.section--dark{background:var(--ink);color:#fff}
.section--tint{background:var(--tint)}
.section__head{max-width:760px;margin-bottom:64px}

/* Services */
.grid.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(10,10,11,.25);border-color:var(--accent)}
.card__num{font-family:var(--serif);color:var(--accent);font-size:1rem}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:.97rem}

/* Work */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--ink-2);border:1px solid rgba(255,255,255,.08);transition:transform .4s var(--ease),border-color .4s}
.case:hover{transform:translateY(-6px);border-color:var(--accent)}
.case__art{aspect-ratio:4/3;position:relative;overflow:hidden}
.case__art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.35),transparent 55%);transition:transform .8s var(--ease)}
.case:hover .case__art::after{transform:scale(1.25)}
.case--a .case__art{background:linear-gradient(135deg,#c9a45c,#6b4a1a)}
.case--b .case__art{background:linear-gradient(135deg,#3f6b57,#10241c)}
.case--c .case__art{background:linear-gradient(135deg,#8a4b3a,#2a1410)}
.case__body{padding:28px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.case p{color:rgba(255,255,255,.62);font-size:.95rem}
.case strong{margin-top:auto;padding-top:14px;font-weight:600;color:var(--accent-2);font-size:.95rem}
.note{margin-top:28px;font-size:.8rem;color:rgba(255,255,255,.4)}

/* Process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.steps li{border-top:1px solid var(--line);padding-top:28px}
.steps span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--accent-2);font-family:var(--serif);margin-bottom:22px}
.steps h3{margin-bottom:10px}
.steps p{color:var(--muted);font-size:.96rem}

/* About */
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
.about h2{margin-bottom:24px}
.about p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.ticks li{padding-left:30px;position:relative;font-weight:500}
.ticks li::before{content:"✦";position:absolute;left:0;color:var(--accent)}
.quote{margin:0;background:var(--ink);color:#fff;border-radius:var(--radius);padding:48px 40px;position:relative}
.quote::before{content:"“";position:absolute;top:8px;left:28px;font-family:var(--serif);font-size:6rem;color:var(--accent);line-height:1}
.quote blockquote{margin:36px 0 28px;font-family:var(--serif);font-size:1.4rem;line-height:1.4}
.quote figcaption{display:flex;flex-direction:column;font-size:.9rem;color:rgba(255,255,255,.6)}
.quote figcaption strong{color:var(--accent-2)}

/* Contact */
.cta{background:radial-gradient(700px 400px at 90% 0%,rgba(43,80,255,.2),transparent 70%),var(--ink)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.cta h2{margin-bottom:22px}
.cta .lede{color:rgba(255,255,255,.65);margin-bottom:36px}
.contact__details{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.contact__details li{display:flex;gap:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.contact__details span{width:70px;color:var(--accent);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding-top:3px}
.contact__details a:hover{color:var(--accent-2)}
.form{background:#fff;color:var(--text);padding:38px;border-radius:var(--radius);display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:.85rem;font-weight:600}
.field input,.field select,.field textarea{font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--ivory);color:var(--text);transition:border-color .2s,box-shadow .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,80,255,.25)}
.field.invalid input,.field.invalid textarea{border-color:#b3392f}
.form__status{font-size:.9rem;min-height:1.3em;text-align:center}
.form__status.ok{color:#2f6b3f}.form__status.err{color:#b3392f}

/* Footer */
.footer{background:var(--ink);color:rgba(255,255,255,.6);padding:40px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem}
.footer__inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.footer .logo{color:#fff;font-size:1.25rem}
.footer nav{display:flex;gap:26px}
.footer nav a:hover{color:var(--accent-2)}

/* Reveal */
.reveal{opacity:0;translate:0 30px;transition:opacity .9s var(--ease),translate .9s var(--ease),scale .9s var(--ease),transform .4s var(--ease),box-shadow .4s,border-color .4s,background .4s}
.reveal[data-reveal="left"]{translate:-44px 0}
.reveal[data-reveal="right"]{translate:44px 0}
.reveal[data-reveal="scale"]{translate:none;scale:.92}
.reveal.in{opacity:1;translate:none;scale:1}

/* Responsive */
@media (max-width:980px){
  .grid.services,.work{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about,.contact{grid-template-columns:1fr;gap:48px}
}
@media (max-width:760px){
  .section{padding:84px 0}
  .container{width:min(1180px,100% - 32px)}
  .burger{display:block}
  .nav__links{position:fixed;inset:72px 0 auto 0;background:rgba(10,10,11,.97);flex-direction:column;align-items:flex-start;gap:0;padding:12px 16px 28px;transform:translateY(-120%);transition:transform .4s var(--ease);visibility:hidden}
  .nav__links.open{transform:none;visibility:visible}
  .nav__links a:not(.btn){padding:14px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.05rem}
  .nav__cta{margin-top:20px}
  .hero{padding:140px 0 64px}
  .hero__stats{grid-template-columns:1fr 1fr 1fr;gap:12px}
  .grid.services,.work,.steps{grid-template-columns:1fr}
  .form{padding:26px}
  .quote{padding:44px 26px 32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .reveal{opacity:1;translate:none;scale:1;transition:none}
  .hero__bg,.hero__inner{transform:none!important}
}

/* ===== Motion, icons, section cuts ===== */

@keyframes pagein{from{opacity:0}to{opacity:1}}

.plan--featured.reveal.in{translate:0 -12px}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:0 50%}
.nav{transition:background .3s,backdrop-filter .3s,border-color .3s,transform .45s var(--ease)}
.nav.hide{transform:translateY(-100%)}

/* Icons */
.icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:var(--accent);margin-bottom:24px;
  background:linear-gradient(135deg,rgba(43,80,255,.2),rgba(43,80,255,.04));border:1px solid rgba(43,80,255,.4);
  transition:transform .5s var(--ease),background .4s,color .4s,box-shadow .4s}
.icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.card__top .icon{margin:0}
.spot:hover .icon{background:var(--accent);color:#fff;transform:translateY(-3px) rotate(-6deg);box-shadow:0 12px 26px -10px rgba(43,80,255,.8)}

/* Cursor spotlight on cards */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(43,80,255,.16),transparent 62%)}
.spot:hover::after{opacity:1}

/* Diagonal section cuts */
.section{position:relative}
.cut::before{content:"";position:absolute;left:0;right:0;top:-1px;height:72px;background:var(--prev,var(--ink));clip-path:polygon(0 0,100% 0,0 100%)}
.cut--r::before{clip-path:polygon(0 0,100% 0,100% 100%)}
.cut{padding-top:150px}

/* Eyebrow line draws in */
.eyebrow::before{width:0;transition:width .9s var(--ease) .2s}
.eyebrow.in::before{width:28px}
.page-hero .eyebrow::before,.hero .eyebrow::before{width:28px}

/* Hero extras */
.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sp{position:absolute;color:var(--accent-2);opacity:.0;animation:twinkle 5s ease-in-out infinite}
.sp1{width:22px;right:14%;top:24%}
.sp2{width:12px;right:28%;top:46%;animation-delay:1.6s}
.sp3{width:16px;right:8%;top:62%;animation-delay:3s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}
.hero__inner{will-change:transform}
.scrollcue{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;display:block}
.scrollcue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--accent-2);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.hero h1 em{background:linear-gradient(100deg,var(--accent-2) 20%,#dbe4ff 50%,var(--accent-2) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* Marquee refinements */
.marquee{background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));color:var(--ink);border:0;padding:18px 0}
.marquee__track{font-style:normal;font-weight:500;font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);animation-duration:30s}
.marquee__track span::after{color:var(--ink)}

/* Featured plan glow */
.plan--featured{animation:glow 3.5s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 30px 60px -30px rgba(10,10,11,.6),0 0 0 0 rgba(43,80,255,0)}50%{box-shadow:0 30px 60px -30px rgba(10,10,11,.6),0 0 38px 2px rgba(43,80,255,.35)}}
.plan:not(.plan--featured):hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(10,10,11,.25);border-color:var(--accent)}
.plan{transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.cta-row{display:flex;justify-content:center;margin-top:56px}

/* Contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.aside{display:grid;gap:18px}
.point{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.point .icon{margin:0;flex:none}
.point h3{font-size:1.2rem;margin-bottom:6px}
.point p{color:var(--muted);font-size:.95rem}
.contact-grid .form--page{max-width:none;margin:0}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr;gap:36px}}
@media (max-width:760px){.cut{padding-top:120px}.cut::before{height:44px}.scrollcue{display:none}.sp{display:none}}
/* ===== Services / Drives / Team ===== */
.grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.grid.two{grid-template-columns:1fr}}

.band{background:linear-gradient(110deg,#1d3ae0,var(--accent) 55%,#4a6bff);color:#fff;padding:72px 0}
.band__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{font-size:clamp(1.6rem,3.2vw,2.5rem);max-width:22ch}
.band h2 em{color:#d6e0ff;font-style:italic}

.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}

.founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:72px;align-items:start}
.founder__photo{position:sticky;top:110px}
.frame{position:relative;border-radius:var(--radius);overflow:visible}
.frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1.5px solid var(--accent);border-radius:var(--radius);z-index:0;transition:transform .6s var(--ease)}
.founder__photo:hover .frame::before{transform:translate(6px,6px)}
.frame img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);box-shadow:0 40px 70px -40px rgba(10,10,11,.7)}
.chip{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;box-shadow:0 20px 40px -20px rgba(10,10,11,.35);animation:bob 6s ease-in-out infinite}
.chip strong{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--ink);font-weight:500}
.chip span{font-size:.78rem;color:var(--muted);margin-top:4px}
.chip--a{left:-22px;top:12%}
.chip--b{right:-14px;bottom:10%;animation-delay:2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.founder__text h2{margin-bottom:28px}
.founder__text p{color:var(--muted);margin-top:18px}
.pull{margin:0;padding:6px 0 6px 26px;border-left:3px solid var(--accent);font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.4;color:var(--ink)}
.founder__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-width:980px){
  .founder{grid-template-columns:1fr;gap:56px}
  .founder__photo{position:static;max-width:420px;margin-inline:auto;width:100%}
  .chip--a{left:-8px}.chip--b{right:-8px}
}
@media (max-width:760px){.band{padding:56px 0}.founder__actions .btn{width:100%}}

/* ===== Logo image ===== */
.logo__img{display:block;height:30px;width:auto}
.footer .logo__img{height:26px}

/* ===== Theme polish (white / black / blue) ===== */
.section--dark .eyebrow,.page-hero .eyebrow,.hero .eyebrow,.cta .eyebrow{color:var(--accent-2)}
.section--dark em,.page-hero em,.hero em{color:var(--accent-2)}
.section--dark .tag{color:var(--accent-2)}
.card--dark .icon,.plan--featured .icon{color:var(--accent-2);border-color:rgba(125,150,255,.45)}
.card--dark:hover .icon,.plan--featured:hover .icon{color:#fff}
.btn--ghost:hover{color:#fff;border-color:var(--accent-2)}
.card{box-shadow:0 1px 2px rgba(10,10,11,.04)}
.nav__links a:not(.btn):hover{color:var(--accent-2)}
.more:hover{color:var(--accent)}
.ticks li::before,.list li::before{color:var(--accent)}

/* ===== 3D phone showcase ===== */
.showcase__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px;align-items:center}
.showcase .lede{margin-top:18px}
.scenes{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:6px}
.scenes button{all:unset;box-sizing:border-box;width:100%;display:flex;gap:18px;align-items:center;padding:14px 18px;border-radius:14px;cursor:pointer;border:1px solid transparent;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.scenes button:hover{background:var(--tint)}
.scenes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scenes button span{font-family:var(--serif);color:#9aa0ad;transition:color .3s;min-width:26px}
.scenes strong{display:block;font-weight:600;font-size:1rem;color:var(--ink)}
.scenes small{display:block;color:var(--muted);font-size:.88rem;line-height:1.4;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .4s,margin .4s}
.scenes button.on{background:var(--tint);border-color:var(--line);transform:translateX(6px)}
.scenes button.on span{color:var(--accent)}
.scenes button.on small{max-height:3.5em;opacity:1;margin-top:3px}

.stage{position:relative;perspective:1500px;display:flex;flex-direction:column;align-items:center;padding:30px 0 10px;
  background:radial-gradient(closest-side,rgba(43,80,255,.14),transparent 72%)}
.float{animation:phoneFloat 7s ease-in-out infinite}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.phone{--rx:0deg;--ry:-18deg;position:relative;width:270px;height:560px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.phone__layers{position:absolute;inset:0;transform-style:preserve-3d}
.phone__layers i{position:absolute;inset:0;border-radius:46px;background:linear-gradient(160deg,#3a3d46,#101114 55%,#2a2c33);border:1px solid #4a4e59}
.phone__front{position:absolute;inset:0;transform:translateZ(14px);border-radius:46px;background:#050506;padding:9px;box-shadow:inset 0 0 0 2px #2d3038;transform-style:preserve-3d}
.notch{position:absolute;z-index:6;top:16px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#050506}
.screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#fff;color:var(--text);font-size:11px;line-height:1.35}
.glare{position:absolute;inset:9px;border-radius:38px;pointer-events:none;z-index:7;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%)}
.stage__shadow{width:200px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,10,11,.38),transparent);margin-top:34px;filter:blur(4px);animation:shadowPulse 7s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}}
.stage__note{margin-top:14px;font-size:.78rem;color:var(--muted)}

.bars{position:absolute;z-index:5;top:50px;left:16px;right:16px;display:flex;gap:4px}
.bar{flex:1;height:3px;border-radius:2px;background:rgba(120,126,145,.3);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent)}
.bar.done i{width:100%}
.bar.active i{animation:fillBar var(--dur,4.2s) linear forwards}
@keyframes fillBar{to{width:100%}}

.scene{position:absolute;inset:0;padding:68px 16px 16px;opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transition:opacity .5s,transform .6s var(--ease),visibility 0s .5s}
.scene.active{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .6s var(--ease)}
.cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.l1,.l2,.l3{display:block;height:7px;border-radius:4px;background:#e3e6ee;margin-top:7px}
.l1{width:55%;height:9px;background:#cfd4e0}.l2{width:92%}.l3{width:70%}

/* s0 / s5: dark brand scenes */
.s0,.s5{background:radial-gradient(circle at 50% 30%,#1c2f7a,#05060a 70%);color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.s0 .bars,.s5 .bars{display:none}
.s0__orb{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(125,150,255,.55),transparent 65%);filter:blur(10px)}
.scene.active .s0__orb{animation:orb 3s ease-in-out infinite}
@keyframes orb{50%{transform:scale(1.2);opacity:.7}}
.s0__star{position:relative;width:44px;color:var(--accent-2)}
.scene.active .s0__star{animation:spinIn 1.4s var(--ease) both}
@keyframes spinIn{from{transform:rotate(-120deg) scale(.2);opacity:0}}
.s0 h4,.s5 h4{position:relative;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.05;margin:0}
.s0 p{position:relative;color:rgba(255,255,255,.7);font-size:11.5px}
.scene.active h4,.scene.active.s0 p{animation:rise .9s var(--ease) .3s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.s5 ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.s5 li{padding-left:20px;position:relative;color:rgba(255,255,255,.85);font-size:11.5px}
.s5 li::before{content:"✓";position:absolute;left:0;color:var(--accent-2);font-weight:700}
.scene.active.s5 li{animation:rise .7s var(--ease) both}
.scene.active.s5 li:nth-child(1){animation-delay:.6s}.scene.active.s5 li:nth-child(2){animation-delay:.85s}.scene.active.s5 li:nth-child(3){animation-delay:1.1s}
.btn-mini,.cta-mini{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:8px 16px;font-weight:600;font-size:11px}
.scene.active .btn-mini{animation:pulse 1.6s ease-in-out 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(125,150,255,.7)}60%{box-shadow:0 0 0 12px rgba(125,150,255,0)}}

/* s1: SEO */
.sbar{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:20px;background:#f1f3f7;border:1px solid var(--line)}
.sbar svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;flex:none}
.typing{display:inline-block;overflow:hidden;white-space:nowrap;width:0;font-size:11px}
.scene.active .typing{animation:typing 1.6s steps(21) .35s forwards}
@keyframes typing{to{width:21ch}}
.results{display:grid;gap:12px;margin-top:20px}
.res{position:relative;height:72px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.res .l1{margin-top:0}
.ours{border-color:var(--accent);background:#eef1ff}
.ours b{display:block;color:var(--accent);font-size:12px}
.rank{position:absolute;right:10px;top:10px;background:var(--accent);color:#fff;border-radius:6px;padding:2px 7px;font-weight:700;font-size:10px}
.scene.active .ra,.scene.active .rb{animation:down 1s var(--ease) 2.2s forwards}
.scene.active .ours{animation:up 1s var(--ease) 2.2s forwards}
@keyframes down{to{transform:translateY(84px)}}
@keyframes up{to{transform:translateY(-168px);box-shadow:0 14px 28px -12px rgba(43,80,255,.55)}}

/* s2: Ads */
.adg{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff}
.adg small{color:var(--muted);font-size:9.5px}.adg b{display:block;color:#1a3ec8;font-size:13px;margin:3px 0}
.scene.active .adg{animation:rise .8s var(--ease) .2s both}
.ads{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.scene.active .ads{animation:rise .8s var(--ease) .5s both}
.ads__img{height:128px;background:linear-gradient(135deg,#0a0a0b,#1c2f7a 60%,#2b50ff);display:grid;place-items:center;color:#fff}
.ads__img svg{width:42px}
.ads__row{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ads__row .l2{width:46%;margin:0}
.pill{position:absolute;left:16px;right:16px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-weight:600;box-shadow:0 12px 24px -14px rgba(10,10,11,.4);opacity:0;transform:translateY(12px)}
.pill i{width:8px;height:8px;border-radius:50%;background:#19b36b}
.p1{top:350px}.p2{top:392px}.p3{top:434px}
.scene.active .pill{animation:pop .6s var(--ease) both}
.scene.active .p1{animation-delay:1.2s}.scene.active .p2{animation-delay:1.9s}.scene.active .p3{animation-delay:2.6s}
@keyframes pop{to{opacity:1;transform:none}}

/* s3: Social */
.prof{display:flex;align-items:center;gap:9px}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2b50ff,#0a0a0b)}
.prof b{display:block;font-size:11.5px}.prof small{color:var(--muted);font-size:9.5px}
.post{margin-top:12px;height:200px;border-radius:14px;background:linear-gradient(140deg,#16288a,#0a0a0b);display:grid;place-items:center;color:var(--accent-2)}
.post svg{width:58px}
.scene.active .post svg{animation:spinIn 1.2s var(--ease) both}
.acts{display:flex;gap:12px;margin-top:12px}
.acts svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.scene.active .acts svg:first-child{animation:beat 1.1s ease-in-out 1s 2}
@keyframes beat{40%{transform:scale(1.35);fill:#ef4466;stroke:#ef4466}}
.spark{width:100%;height:60px;margin-top:14px}
.spark path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300}
.scene.active .spark path{animation:draw 2s ease .8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.heart{position:absolute;left:60%;top:290px;color:#ef4466;font-size:16px;opacity:0}
.h2{left:70%}.h3{left:52%}
.scene.active .heart{animation:floatUp 2.4s ease-out infinite}
.scene.active .h1{animation-delay:1.1s}.scene.active .h2{animation-delay:1.8s}.scene.active .h3{animation-delay:2.5s}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1.3)}}

/* s4: Data & Email */
.chart{height:200px;display:flex;align-items:flex-end;gap:10px;padding:14px 12px 0;border-radius:14px;background:#f6f7fb;border:1px solid var(--line)}
.chart span{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--accent),#7d96ff);transform:scaleY(0);transform-origin:bottom}
.scene.active .chart span{animation:grow .9s var(--ease) both}
.scene.active .chart span:nth-child(2){animation-delay:.12s}.scene.active .chart span:nth-child(3){animation-delay:.24s}.scene.active .chart span:nth-child(4){animation-delay:.36s}.scene.active .chart span:nth-child(5){animation-delay:.48s}.scene.active .chart span:nth-child(6){animation-delay:.6s}
@keyframes grow{to{transform:scaleY(1)}}
.mail{display:flex;gap:11px;align-items:center;margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;box-shadow:0 14px 28px -18px rgba(10,10,11,.45)}
.mail svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--accent);fill:none;stroke:#fff;stroke-width:1.8;flex:none}
.mail b{display:block;font-size:11.5px}.mail small{color:var(--muted);font-size:9.5px}
.scene.active .mail{animation:rise .8s var(--ease) 1.4s both}

@media (max-width:980px){
  .showcase__inner{grid-template-columns:1fr;gap:40px}
  .stage{order:-1}
}
@media (max-width:760px){.scenes button.on{transform:none}}
@media (prefers-reduced-motion:reduce){.float,.stage__shadow{animation:none!important}.scene,.scene.active{transition:none}}

/* ===== White navigation bar ===== */
.nav,.nav.scrolled{background:rgba(255,255,255,.96);color:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav.scrolled{box-shadow:0 8px 28px -22px rgba(10,10,11,.5)}
.nav__links a:not(.btn){opacity:.78;font-weight:500}
.nav__links a:not(.btn):hover,.nav__links [aria-current="page"]:not(.btn){opacity:1;color:var(--accent)}
.burger span{background:var(--ink)}
.hero{padding-top:200px}
.footer .logo__img{background:#fff;padding:6px 12px;border-radius:8px;height:40px}
@media (max-width:760px){
  .nav__links{background:#fff;border-bottom:1px solid var(--line)}
  .nav__links a:not(.btn){border-bottom-color:var(--line)}
}

/* ===== Taller navigation bar / larger logo ===== */
.nav__inner{height:96px}
.nav .logo__img{height:68px;width:auto;max-width:300px;object-fit:contain}
.nav__links{gap:38px;font-size:.98rem}
.hero{padding-top:230px}
.page-hero{padding-top:200px}
@media (max-width:760px){
  .nav__inner{height:78px}
  .nav .logo__img{height:54px;max-width:220px}
  .nav__links{inset:78px 0 auto 0}
  .hero{padding-top:150px}
  .page-hero{padding-top:140px}
}

/* ===== WhatsApp CTA + contact details ===== */
.btn--wa{background:#25d366;color:#07240f;border-color:#25d366}
.btn--wa:hover{background:#1fbd5a;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(37,211,102,.8)}
.btn--wa svg{width:17px;height:17px;fill:currentColor}
.nav__links{gap:22px}
.nav__wa{margin-left:6px}
.details{background:var(--ink);color:#fff;border-radius:var(--radius);padding:34px 30px}
.details h2{font-size:1.9rem;margin-bottom:22px}
.details ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.details li{display:flex;gap:16px;align-items:flex-start}
.details .icon{width:44px;height:44px;margin:0;flex:none;border-radius:12px;color:var(--accent-2);border-color:rgba(125,150,255,.45)}
.details .icon svg{width:21px;height:21px}
.details .icon--wa{color:#25d366;border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.1)}
.details small{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px}
.details a,.details li span:not(.icon){color:#fff;font-size:.98rem;overflow-wrap:anywhere}
.details a:hover{color:var(--accent-2)}
@media (max-width:760px){.nav__wa{margin:14px 0 0}.nav__cta{margin-top:10px}}

/* Brand scene logo tile */
.s0__logo{position:relative;width:196px;padding:16px 18px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 24px 50px -18px rgba(125,150,255,.6)}
.s0__logo img{display:block;width:100%;height:auto;max-height:110px;object-fit:contain}
.scene.active .s0__logo{animation:logoIn 1.2s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:scale(.6) rotate(-6deg)}}

/* Section background picture */
.section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.section__shade{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,10,11,.86),rgba(10,10,11,.72) 50%,rgba(10,10,11,.88))}
#why>.container{position:relative;z-index:1}
#why .card--dark{background:rgba(20,20,22,.72);backdrop-filter:blur(8px)}
#why::before{z-index:2}

/* ===== Logo loader ===== */
.loader{position:fixed;inset:0;z-index:300;background:#fff;display:grid;place-items:center;transition:transform 1s cubic-bezier(.77,0,.18,1),opacity .4s ease}
.loader.done{transform:translateY(-100%);pointer-events:none}
.loader.fade{opacity:0;transform:none}
.loader__inner{display:grid;justify-items:center;gap:26px;transition:opacity .4s,transform .6s var(--ease)}
.loader.done .loader__inner{opacity:0;transform:translateY(-24px) scale(.96)}
.loader__inner img{width:min(300px,62vw);height:auto;max-height:160px;object-fit:contain;animation:logoPulse 1.8s ease-in-out infinite}
@keyframes logoPulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
.loader__bar{display:block;width:min(200px,50vw);height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:40%;border-radius:2px;background:var(--accent);animation:load 1.2s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ===== Lenis smooth scroll ===== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html{scroll-behavior:auto}

/* ===== Page banner pictures ===== */
.page-hero{position:relative;overflow:hidden}
.page-hero>.container{position:relative;z-index:2}
.page-hero__bg{position:absolute;left:0;right:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:center;z-index:0;will-change:transform}
.page-hero__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,11,.82) 0%,rgba(10,10,11,.5) 50%,rgba(10,10,11,.12) 100%)}
.section__bg[data-parallax]{top:-10%;height:120%;will-change:transform}
#why{overflow:hidden}
@media (max-width:760px){.page-hero__shade{background:rgba(10,10,11,.62)}}

/* ===== Footer credit ===== */
.footer__dev{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.82rem;color:rgba(255,255,255,.5)}
.footer__dev strong{color:#fff;font-weight:600;letter-spacing:.02em}

/* ===== Responsive hardening ===== */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
.stage{touch-action:pan-y}
.frame img{object-position:center top}
@media (hover:none){.hov{display:none}}
@media (max-width:1100px){.nav__links{gap:18px;font-size:.92rem}.nav .logo__img{height:60px}}
@media (max-width:980px){
  .nav__inner{height:84px}
  .nav .logo__img{height:56px}
  .burger{display:block}
  .nav__links{position:fixed;inset:84px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 26px;transform:translateY(-120%);transition:transform .45s var(--ease);visibility:hidden;max-height:calc(100vh - 84px);overflow:auto}
  .nav__links.open{transform:none;visibility:visible}
  .nav__links a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:1.05rem;opacity:1}
  .nav__links .btn{margin-top:12px;justify-content:center;padding:14px 20px}
  .nav__wa{margin-left:0}
  .hero{padding-top:170px}
  .chip--a{top:auto;bottom:-20px;left:10px}
  .chip--b{bottom:-20px;right:10px}
  .founder{padding-bottom:20px}
}
@media (max-width:760px){
  .nav__inner{height:72px}
  .nav .logo__img{height:46px;max-width:190px}
  .nav__links{inset:72px 0 auto 0;max-height:calc(100vh - 72px)}
  .hero{min-height:auto;padding:130px 0 80px}
  .hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero__shade{background:linear-gradient(180deg,rgba(10,10,11,.78),rgba(10,10,11,.66))}
  .hero__actions{margin-bottom:56px}
  .hero__actions .btn{width:100%}
  .page-hero{padding:120px 0 52px}
  .float{zoom:.9}
  .stage{padding-top:10px}
  .band__inner{flex-direction:column;align-items:flex-start}
  .band .btn{width:100%}
  .details{padding:26px 20px}
  .point{padding:20px}
  .plan{padding:30px 24px}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .footer nav{flex-wrap:wrap;gap:12px 22px}
}
@media (max-width:400px){
  .container{width:calc(100% - 28px)}
  .nav .logo__img{height:40px;max-width:160px}
  .float{zoom:.8}
  .form{padding:22px 18px}
  .hero__stats{gap:8px}
}
@media (max-width:980px){.frame::before{inset:12px -6px -12px 6px}}

/* ===== Home icon in navigation ===== */
.nav__home{display:inline-flex;align-items:center;gap:8px;opacity:1!important}
.nav__home svg{width:40px;height:40px;padding:9px;border-radius:50%;border:1px solid var(--line);fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:background .3s,border-color .3s,stroke .3s,transform .3s var(--ease)}
.nav__home:hover svg,.nav__home[aria-current="page"] svg{background:var(--accent);border-color:var(--accent);stroke:#fff;transform:translateY(-2px)}
.nav__home span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:980px){
  .nav__home{padding:15px 0!important}
  .nav__home span{position:static;width:auto;height:auto;clip:auto;font-size:1.05rem}
  .nav__home svg{width:34px;height:34px;padding:7px}
}