:root{--ink:#19343d;--muted:#4f646c;--paper:#f8f7f3;--purple:#5944c5;--purple-dark:#4632a8;--purple-soft:#c9c1f2;--lavender:#e8eafb;--lavender-deep:#dde0f7;--peach:#f7d9c4;--line:#e2e0d8;--navy:#17344b;--nuah-paper:#f8f6f1;--nuah-yellow:#f6c844}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--purple-soft) var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.55 'DM Sans',sans-serif}
::selection{background:var(--purple-soft);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
img{max-width:100%}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-weight:700;font-size:14px}
.skip:focus{top:16px}
.wrap{width:min(1200px,calc(100% - 64px));margin:auto}

/* Header */
.nav{height:92px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{font:800 24px/1 Manrope,sans-serif;letter-spacing:-1.5px;white-space:nowrap}
.logo span{color:var(--purple)}
.navlinks{display:flex;gap:34px;align-items:center;font-size:14px;font-weight:700}
.navlinks a{white-space:nowrap}
.navlinks a:not(.button){color:#3d555e}
.navlinks a:not(.button):hover{color:var(--purple)}
.navlinks .lang{border:1px solid #d6d9ef;border-radius:99px;padding:6px 11px;font-size:12px;letter-spacing:.06em}
.navlinks .lang:hover{border-color:var(--purple-soft)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:15px 23px;border-radius:999px;background:var(--purple);color:#fff;font-size:14px;font-weight:800;transition:transform .22s ease,background .22s ease;white-space:nowrap}
.button:hover{transform:translateY(-3px);background:var(--purple-dark)}
.text-link{font-weight:700;font-size:14px;color:var(--purple);border-bottom:1px solid var(--purple-soft);padding:8px 0}
.text-link:hover{border-color:var(--purple)}

/* Hero */
.hero{overflow:hidden;border-radius:34px;background:var(--lavender);min-height:660px;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:64px clamp(25px,5.8vw,70px)}
.hero-copy{position:relative;z-index:2}
.hello{display:inline-flex;align-items:center;gap:9px;color:var(--purple-dark);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hello:before{content:'';width:8px;height:8px;background:var(--purple);border-radius:50%}
.hero h1,.section-head,h3,.close h2{font-family:Manrope,sans-serif;letter-spacing:-.055em;text-wrap:balance}
.hero h1{font-size:clamp(48px,5.5vw,76px);line-height:1.04;margin:19px 0 23px;font-weight:800;max-width:600px}
.hero h1 .accent{color:var(--purple)}
.hero-copy>p{font-size:18px;line-height:1.65;max-width:460px;color:var(--muted);margin:0 0 29px}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-copy>.hint{font-size:13px;color:var(--muted);margin:16px 0 0}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.mascot-frame{position:relative;width:min(70%,330px);height:440px;border-radius:180px 180px 36px 36px;background:#e7e8e5;overflow:hidden;box-shadow:0 22px 55px #19343d1f;transform:rotate(3deg);animation:mascot-sway 7s ease-in-out infinite}
.hero:not(.in-view) .mascot-frame,.hero:not(.in-view) .f1,.hero:not(.in-view) .f2{animation-play-state:paused}
@keyframes mascot-sway{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.mascot-frame img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center top}
.float-card{position:absolute;background:white;border:1px solid #eceaf6;border-radius:18px;box-shadow:0 14px 40px #19343d14;padding:14px 17px;font-size:12px;font-weight:700;line-height:1.35}
.float-card small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:3px}
.f1{left:0;top:25%;transform:rotate(-5deg);animation:float1 6s ease-in-out infinite}
.f2{right:0;bottom:25%;transform:rotate(5deg);animation:float2 7s ease-in-out infinite}
.f3{right:8%;top:8%;transform:rotate(7deg);background:var(--peach);border-color:var(--peach);box-shadow:none}
.visual-caption{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.dot-grid{position:absolute;inset:10% 0;background-image:radial-gradient(#b4b9e6 1px,transparent 1px);background-size:17px 17px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);opacity:.6}
@keyframes float1{50%{transform:translateY(-9px) rotate(-3deg)}}
@keyframes float2{50%{transform:translateY(9px) rotate(3deg)}}

/* Intro + services */
.intro{padding:110px 0 85px;text-align:center}
.intro .section-head{max-width:850px;margin:0 auto 18px}
.section-head{font-size:clamp(38px,4vw,60px);line-height:1.12;margin:0;font-weight:800}
.intro p,.section-copy{max-width:590px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.7}
.explore{padding-bottom:100px}
.choicebar{display:flex;gap:8px;justify-content:center;margin:0 auto 30px;flex-wrap:wrap}
html:not(.js) .choicebar{display:none}
.choicebar button{border:1px solid #d6d9ef;border-radius:99px;background:#fff;padding:11px 19px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.choicebar button:hover{border-color:var(--purple-soft)}
.choicebar button[aria-selected=true]{background:var(--purple);color:#fff;border-color:var(--purple)}
.feature{background:var(--lavender);border-radius:28px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:490px}
.feature+.feature{margin-top:24px}
.js .feature:not(.is-on){display:none}
.js .feature.is-on{animation:panel-in .45s cubic-bezier(.16,1,.3,1)}
@keyframes panel-in{from{opacity:.4;transform:translateY(6px)}}
.feature-copy{padding:70px 13%;align-self:center}
.feature-copy .label,.method .label{font-size:12px;color:#5a8750;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.feature-copy .label,.method .label{color:var(--purple-dark)}
.feature-copy h3{font-size:clamp(34px,3.5vw,48px);line-height:1.13;margin:18px 0}
.feature-copy p{color:var(--muted);line-height:1.7;max-width:410px}
.feature-copy p strong{color:var(--ink)}
.feature-copy p a{color:var(--purple);font-weight:700;text-decoration:underline;text-decoration-color:var(--purple-soft);text-underline-offset:4px}
.feature-copy p a:hover{text-decoration-color:var(--purple)}
.feature-copy ul{padding:0;margin:25px 0 30px;list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.feature-copy li{font-size:12px;font-weight:700;color:var(--ink);background:#fff;padding:7px 12px;border-radius:50px}
.feature-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.feature-scene{min-height:460px;position:relative;display:grid;place-items:center;background:var(--lavender-deep);overflow:hidden}
.scene-card{width:min(68%,300px);background:white;border-radius:26px;padding:20px;box-shadow:0 25px 70px #19343d1f;transform:rotate(-5deg);position:relative;z-index:2;transition:transform .3s}
.feature-scene:hover .scene-card,.feature-scene:hover .portrait{transform:rotate(-1deg) translateY(-5px)}
.scene-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eceaf6;padding-bottom:13px;font-size:11px;font-weight:800}
.dots{letter-spacing:2px;color:var(--purple)}
.scene-content{padding:25px 3px 8px}
.scene-content .icon{width:50px;height:50px;border-radius:16px;background:var(--peach);display:grid;place-items:center;margin-bottom:22px;color:var(--ink);font-size:25px}
.scene-content strong{font:800 24px/1.15 Manrope;letter-spacing:-.05em}
.scene-content p{font-size:13px;color:var(--muted);line-height:1.5}
.scene-bars{display:flex;gap:5px;margin-top:23px}
.scene-bars span{height:6px;flex:1;border-radius:10px;background:#e8e7f1}
.scene-bars span:first-child{background:var(--purple)}
.bubble{position:absolute;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 12px 30px #19343d14;font-size:12px;font-weight:800;z-index:3}
.bubble.a{top:16%;right:10%;transform:rotate(8deg)}
.bubble.b{bottom:14%;left:9%;transform:rotate(-7deg)}

/* CTO panel: Daniel's portrait card */
.portrait{margin:0;width:min(66%,290px);background:#fff;border-radius:26px;padding:12px 12px 18px;box-shadow:0 25px 70px #19343d1f;transform:rotate(-4deg);position:relative;z-index:2;transition:transform .3s}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;background:#2b2520}
.portrait figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 6px 0}
.portrait strong{font:800 20px/1.1 Manrope,sans-serif;letter-spacing:-.04em}
.portrait span{font-size:11px;font-weight:800;color:var(--purple-dark);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* AI first */
.ai{background:var(--ink);color:#eef3f4;border-radius:32px;padding:90px clamp(26px,7vw,84px);margin-bottom:110px;display:grid;grid-template-columns:1fr 1.15fr;gap:8%;align-items:center}
.ai .section-head{color:#fff;max-width:480px}
.ai .accent{color:var(--peach)}
.ai p{color:#c3d0d4;font-size:17px;line-height:1.7;margin:20px 0 30px;max-width:470px}
.ai-list{list-style:none;margin:0;padding:0;border-top:1px solid #33505a}
.ai-list li{padding:24px 0;border-bottom:1px solid #33505a}
.ai-list strong{font:800 20px/1.2 Manrope,sans-serif;letter-spacing:-.035em;color:#fff}
.ai-list p{font-size:15px;line-height:1.65;margin:6px 0 0;color:#b4c3c8}

/* What we've built */
.built{padding:20px 0 120px}
.built-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:45px}
.built-head p{max-width:420px;color:var(--muted);margin:0}
.nuah{background:var(--navy);color:var(--nuah-paper);border-radius:32px;display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;min-height:560px;position:relative}
.nuah-copy{padding:72px 11% 72px;align-self:center;position:relative;z-index:2}
.nuah-brand{display:flex;align-items:center;gap:14px;font:800 22px/1 Manrope,sans-serif;letter-spacing:-.03em}
.nuah-brand img{width:56px;height:56px;border-radius:15px;box-shadow:0 10px 24px #0a1c2a55}
.nuah h3{font-size:clamp(32px,3.3vw,46px);line-height:1.1;margin:26px 0 16px;color:#fff}
.nuah-copy>p{color:#c9d6de;line-height:1.7;max-width:440px;margin:0}
.nuah-tags{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-wrap:wrap;gap:9px}
.nuah-tags li{font-size:12px;font-weight:700;color:#dbe7ee;border:1px solid #3b5a72;padding:7px 12px;border-radius:50px}
.nuah-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nuah .button{background:var(--nuah-yellow);color:var(--navy)}
.nuah .button:hover{background:#ffd75e}
.nuah-status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#dbe7ee}
.nuah-status:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--nuah-yellow)}
.nuah-phones{position:relative;min-height:520px}
.nuah-phones:before{content:'';position:absolute;width:520px;height:520px;right:-120px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,#2a5b80 0,#17344b 68%)}
.nuah-phones img{position:absolute;width:min(42%,212px);height:auto;aspect-ratio:420/913;border-radius:30px;border:6px solid #0d2233;background:#0d2233;box-shadow:0 30px 60px #04111c66;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nuah-phones .p1{left:6%;top:16%;transform:rotate(-8deg)}
.nuah-phones .p2{left:31%;top:7%;z-index:2}
.nuah-phones .p3{left:56%;top:18%;transform:rotate(8deg)}
.nuah:hover .p1{transform:rotate(-10deg) translate(-8px,4px)}
.nuah:hover .p3{transform:rotate(10deg) translate(8px,4px)}
.nuah:hover .p2{transform:translateY(-8px)}

.trail{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:8%;margin-top:110px}
.trail-intro{position:sticky;top:32px;align-self:start}
.trail-intro img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin-bottom:22px}
.trail-intro h3{font-size:clamp(30px,3vw,42px);line-height:1.1;margin:0 0 16px}
.trail-intro p{color:var(--muted);line-height:1.7;margin:0 0 24px}
.trail-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.trail-list>li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:28px;padding:30px 0;border-bottom:1px solid var(--line)}
.trail-co strong{display:block;font:800 24px/1.15 Manrope,sans-serif;letter-spacing:-.045em}
.trail-co span{display:block;font-size:13px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.trail-role{font:700 15px/1.4 'DM Sans',sans-serif;margin:0 0 6px}
.trail-list p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.trail-list .trail-role{color:var(--ink)}
.trail-proof{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.trail-proof li{font-size:12px;font-weight:800;color:var(--purple-dark);background:var(--lavender);padding:7px 12px;border-radius:50px}
.trail-foot{margin:30px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.trail-foot strong{color:var(--ink)}

/* Method + values */
.method{background:#fff;border-radius:32px;padding:95px clamp(27px,7vw,84px);display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.method .section-head{max-width:470px}
.method p{color:var(--muted);font-size:17px;line-height:1.7}
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}
.step b{color:var(--purple);font-size:13px}
.step strong{font-family:Manrope;font-size:17px}
.step p{font-size:14px;margin:5px 0 0;line-height:1.5}
.different{padding:120px 0}
.different-top{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:45px}
.different-top p{max-width:400px;color:var(--muted)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value{border-top:2px solid #d6d9ef;padding:24px 0}
.value .symbol{font-size:24px;display:block;margin-bottom:30px;color:var(--purple)}
.value h3{font-size:23px;letter-spacing:-.03em;margin:0 0 10px}
.value p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}

/* Close + footer */
.close{background:var(--lavender);border-radius:32px;padding:80px clamp(28px,8vw,96px);display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.close h2{font-size:clamp(42px,5vw,72px);line-height:1.08;margin:0;max-width:650px}
.close p{color:var(--muted);max-width:450px}
.close-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0;padding-bottom:16px}
.footer{margin-top:24px;margin-bottom:24px;background:var(--ink);color:var(--paper);border-radius:32px;padding:56px clamp(28px,8vw,96px) 44px;display:flex;justify-content:space-between;gap:35px;align-items:flex-end}
.footer .logo span{color:var(--purple-soft)}
.footer p{font-size:13px;color:#b4c3c8}
.footer-links{display:flex;gap:25px;font-size:13px;font-weight:700;flex-wrap:wrap}
.footer-links a:hover{color:var(--purple-soft)}

/* 404 */
.lost{min-height:calc(100vh - 92px);display:grid;place-items:center;text-align:center;padding:40px 0 80px}
.lost img{width:180px;height:auto;border-radius:90px 90px 24px 24px;background:#e7e8e5;transform:rotate(3deg)}
.lost h1{font:800 clamp(40px,6vw,64px)/1.05 Manrope,sans-serif;letter-spacing:-.055em;margin:28px 0 14px}
.lost p{color:var(--muted);margin:0 auto 28px;max-width:420px}
.lost .hero-actions{justify-content:center}

@media(max-width:1100px){.navlinks{gap:20px}}
@media(max-width:960px){.navlinks a:not(.button):not(.lang){display:none}}
@media(max-width:980px){
  .trail{grid-template-columns:1fr;gap:40px;margin-top:80px}
  .trail-intro{position:static}
  .nuah{grid-template-columns:1fr}
  .nuah-copy{padding:56px 32px 8px}
  .nuah-phones{min-height:440px}
  .nuah-phones:before{right:auto;left:50%;transform:translate(-50%,-50%);width:440px;height:440px}
  .nuah-phones img{width:min(30%,190px)}
  .nuah-phones .p1{left:12%}.nuah-phones .p2{left:35%}.nuah-phones .p3{left:58%}
}
@media(max-width:800px){
  .wrap{width:calc(100% - 32px)}
  .nav{height:76px;gap:16px}
  .navlinks{gap:12px}
  .navlinks a:not(.button):not(.lang){display:none}
  .navlinks .button{padding:12px 16px}
  .hero{grid-template-columns:1fr;padding:50px 25px 18px;min-height:0;border-radius:24px}
  .hero h1{font-size:clamp(42px,10vw,62px)}
  .hero-copy>p{font-size:16px}
  .hero-visual{min-height:440px}
  .mascot-frame{height:340px;width:240px}
  .f1{left:0;top:28%}.f2{right:0;bottom:26%}.f3{right:0}
  .float-card{font-size:11px;padding:11px}
  .intro{padding:80px 0 50px}
  .feature{grid-template-columns:1fr}
  .feature-copy{padding:45px 28px}
  .feature-scene{min-height:380px}
  .built{padding:0 0 80px}
  .ai{grid-template-columns:1fr;gap:30px;padding:56px 26px;border-radius:24px;margin-bottom:80px}
  .built-head,.different-top{display:block}
  .built-head p{margin-top:18px}
  .nuah{border-radius:24px}
  .nuah-copy{padding:44px 26px 0}
  .nuah-phones{min-height:360px}
  .nuah-phones img{width:34%;border-radius:22px;border-width:4px}
  .nuah-phones .p1{left:2%;top:18%}.nuah-phones .p2{left:33%;top:9%}.nuah-phones .p3{left:64%;top:20%}
  .trail-list>li{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .method{padding:60px 27px;grid-template-columns:1fr;gap:25px}
  .different{padding:80px 0}
  .values{grid-template-columns:1fr;gap:4px}
  .value .symbol{margin-bottom:14px}
  .close{padding:55px 28px;display:block}
  .close-actions{margin-top:12px;align-items:flex-start;padding-bottom:0}
  .footer{align-items:start;flex-direction:column;padding:44px 28px 36px;border-radius:24px}
}
@media(max-width:480px){
  .logo{font-size:21px;letter-spacing:-1.2px}
  .navlinks{gap:10px}
  .navlinks .button{padding:11px 14px}
  .navlinks .button span{display:none}
  .feature-scene .bubble.a{top:7%;right:5%}
  .feature-scene{min-height:420px}
  .feature-scene .bubble.b{bottom:7%;left:5%}
  .choicebar{flex-wrap:nowrap;gap:6px}
  .choicebar button{padding:10px 13px;font-size:13px}
  .portrait{width:58%}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}