:root {
  --bg:#fff;
  --ink:#0b0b0b;
  --muted:#6f6f6b;
  --line:#e8e8e4;
  --soft:#f5f5f1;
  --soft-2:#eeeeea;
  --green:#1fa45b;
  --max:1260px;
  --radius:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}

.noise{
  position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}
.cursor-orb{
  position:fixed; width:260px; height:260px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(0,0,0,.045), rgba(0,0,0,0) 70%);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .25s ease;
}
body.pointer-active .cursor-orb{opacity:1}

.shell{width:min(calc(100% - 44px), var(--max)); margin:0 auto}
.topbar{
  height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  border-bottom:1px solid var(--line); position:relative; z-index:20;
}
.brand{display:inline-flex; width:172px; height:48px; overflow:hidden; align-items:center}
.brand img{width:100%; height:100%; object-fit:contain; object-position:left center}
.nav{display:flex; gap:28px; justify-content:center}
.nav a{font-size:13px; color:#575753; text-decoration:none; font-weight:600; transition:color .2s ease}
.nav a:hover{color:#000}
.mini-cta{justify-self:end; min-height:40px; padding:0 15px; display:inline-flex; align-items:center; gap:9px; border:1px solid #d9d9d4; border-radius:999px; text-decoration:none; font-size:12px; font-weight:700; transition:background .2s, transform .2s}
.mini-cta:hover{background:#f4f4f1; transform:translateY(-1px)}
.mini-dot,.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(31,164,91,.11)}

.hero{min-height:760px; padding:104px 0 96px; display:grid; grid-template-columns:.92fr 1.08fr; gap:70px; align-items:center; border-bottom:1px solid var(--line)}
.kicker,.tiny-label{font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:800; color:#7c7c76}
.kicker{display:flex; align-items:center; gap:10px}
.hero h1{margin:24px 0 24px; max-width:670px; font-size:clamp(58px,6.8vw,105px); line-height:.91; letter-spacing:-.07em; font-weight:650}
.underlined{position:relative; display:inline-block}
.underlined:after{content:""; position:absolute; left:2%; right:2%; bottom:-9px; height:6px; border-radius:999px; background:#0b0b0b; transform:scaleX(.12); transform-origin:left; animation:underlineGrow 1.1s .35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes underlineGrow{to{transform:scaleX(1)}}
.hero-copy>p{margin:0; max-width:620px; font-size:20px; line-height:1.56; color:#51514e}
.hero-actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:34px}
.btn{min-height:50px; padding:0 19px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:16px; text-decoration:none; font-size:13px; font-weight:750; border:1px solid var(--ink); transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#252525}
.btn-ghost{border-color:#d9d9d4; background:#fff}
.btn-ghost:hover{background:#f5f5f1}
.micro-copy{margin-top:22px; color:#999991; font-size:11px; letter-spacing:.04em}
.micro-copy strong{color:#41413f}

.flow-lab{border:1px solid #ddddda; border-radius:28px; overflow:hidden; background:#fafaf8; min-height:500px; box-shadow:0 24px 65px rgba(0,0,0,.055); transform-style:preserve-3d; transition:transform .22s ease}
.lab-top{height:84px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e4e4df; background:#fff}
.lab-top>div{display:flex; flex-direction:column; gap:7px}
.lab-top strong{font-size:15px}
.lab-toggle{border:1px solid #dadad5; background:#fff; border-radius:10px; height:40px; padding:0 13px; cursor:pointer; font-size:12px; font-weight:750; display:flex; gap:8px; align-items:center}
.lab-toggle:hover{background:#f3f3ef}
.play-icon{font-size:9px}
.flow-canvas{height:354px; position:relative; overflow:hidden; background:linear-gradient(180deg,#f7f7f4,#efefeb)}
.grid-lines{position:absolute; inset:0; opacity:.42; background-image:linear-gradient(#dcdcd7 1px,transparent 1px),linear-gradient(90deg,#dcdcd7 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent)}
.flow-node{position:absolute; z-index:3; width:180px; min-height:112px; padding:16px; border:1px solid #d2d2cd; border-radius:16px; background:rgba(255,255,255,.93); box-shadow:0 13px 30px rgba(0,0,0,.06); display:flex; flex-direction:column}
.flow-node span{font-size:10px; color:#989891; margin-bottom:22px}
.flow-node b{font-size:14px; letter-spacing:-.02em}
.flow-node small{font-size:10px; color:#888881; margin-top:5px}
.node-a{left:5%; top:116px}
.node-b{left:50%; top:58px; transform:translateX(-50%)}
.node-c{right:5%; top:145px}
.flow-route{position:absolute; height:1px; background:#aaa9a3; z-index:2; transform-origin:left; overflow:visible}
.route-a{left:34%; top:172px; width:19%; transform:rotate(-18deg)}
.route-b{left:60%; top:154px; width:20%; transform:rotate(20deg)}
.flow-route:after{content:""; position:absolute; right:-2px; top:-3px; width:7px; height:7px; border-top:1px solid #7b7b75; border-right:1px solid #7b7b75; transform:rotate(45deg)}
.flow-route i{position:absolute; width:9px; height:9px; top:-4px; left:-8px; border-radius:50%; background:#111; box-shadow:0 0 0 4px rgba(0,0,0,.07); opacity:0}
.flow-lab.running .route-a i{animation:routeA 1.7s ease-in-out forwards}
.flow-lab.running .route-b i{animation:routeB 1.7s .85s ease-in-out forwards}
@keyframes routeA{0%{left:-8px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes routeB{0%{left:-8px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.flow-chip{position:absolute; z-index:4; padding:7px 10px; border-radius:999px; border:1px solid #d7d7d2; background:#fff; font-size:10px; font-weight:650; color:#77776f; transition:all .55s cubic-bezier(.2,.8,.2,1)}
.chip-1{left:8%;top:54px}.chip-2{left:28%;bottom:34px}.chip-3{right:28%;top:30px}.chip-done{right:8%;bottom:42px;opacity:.2;transform:scale(.9)}
.flow-lab.running .chip-1{transform:translate(70px,120px) scale(.7);opacity:0}
.flow-lab.running .chip-2{transform:translate(105px,-30px) scale(.7);opacity:0}
.flow-lab.running .chip-3{transform:translate(80px,80px) scale(.7);opacity:0}
.flow-lab.running .chip-done{opacity:1;transform:scale(1.06);border-color:#b9dfc8;color:#15733f;background:#f5fff9;transition-delay:1.8s}
.flow-lab.running .node-b{animation:nodePulse .65s .75s ease}
.flow-lab.running .node-c{animation:nodePulse .65s 1.75s ease}
@keyframes nodePulse{50%{transform:translateX(-50%) scale(1.04)}}
.flow-lab.running .node-c{animation-name:nodePulseRight}
@keyframes nodePulseRight{50%{transform:scale(1.04)}}
.lab-footer{height:62px; padding:0 24px; display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:13px; background:#fff; border-top:1px solid #e2e2de; text-transform:uppercase; letter-spacing:.12em; font-size:9px; font-weight:800; color:#94948d}
.lab-footer i{height:1px;background:#e0e0dc}

.section{padding:106px 0;border-bottom:1px solid var(--line)}
.section-intro{display:grid; grid-template-columns:240px 1fr; align-items:end; gap:30px; margin-bottom:46px}
.section-intro h2,.section-heading h2{margin:0; font-size:clamp(44px,5vw,74px); line-height:.96; letter-spacing:-.055em; font-weight:650}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.principle{min-height:300px;padding:26px;border-radius:22px;background:#f6f6f3;border:1px solid transparent;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.principle:after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.075),transparent 70%);right:-40px;bottom:-50px;transform:scale(.7);opacity:0;transition:.35s ease}
.principle:hover{transform:translateY(-5px);border-color:#dadad5;background:#f2f2ee}
.principle:hover:after{opacity:1;transform:scale(1)}
.index{font-size:11px;color:#94948d}
.principle h3{margin:126px 0 12px;font-size:27px;letter-spacing:-.04em}
.principle p{margin:0;color:#686862;line-height:1.62;font-size:14px;max-width:330px}

.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
.project-counter{display:flex;align-items:baseline;gap:9px;color:#8c8c85;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.project-counter strong{font-size:38px;letter-spacing:-.06em;color:#111;font-weight:600}
.carvia-card{min-height:590px;display:grid;grid-template-columns:.76fr 1.24fr;border-radius:30px;overflow:hidden;text-decoration:none;background:#0d0d0d;color:#fff;position:relative}
.carvia-info{padding:46px;display:flex;flex-direction:column;position:relative;z-index:3}
.carvia-top{display:flex;justify-content:space-between;align-items:center}
.product-pill{font-size:12px;font-weight:850;letter-spacing:.15em}
.live-pill{font-size:9px;letter-spacing:.12em;font-weight:850;padding:7px 10px;border:1px solid #323232;border-radius:999px;display:flex;align-items:center;gap:7px;background:#161616}
.live-pill i{width:6px;height:6px;border-radius:50%;background:#40d77f;box-shadow:0 0 0 4px rgba(64,215,127,.09)}
.carvia-info h3{margin:auto 0 18px;font-size:clamp(48px,5.6vw,80px);line-height:.91;letter-spacing:-.06em;font-weight:620}
.carvia-info p{margin:0;max-width:470px;color:#aaa;line-height:1.6;font-size:15px}
.feature-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:27px}
.feature-row span{padding:7px 10px;border:1px solid #2f2f2f;border-radius:999px;color:#cacaca;font-size:10px;font-weight:700}
.visit-link{margin-top:32px;font-size:12px;font-weight:800;display:flex;gap:9px;align-items:center}
.car-stage{position:relative;min-height:590px;overflow:hidden;background:radial-gradient(circle at 66% 23%,#333 0,#181818 23%,#0d0d0d 59%)}
.car-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0d0d 0%,transparent 19%,transparent 100%);pointer-events:none}
.car-skyline{position:absolute;left:8%;right:0;top:29%;height:1px;background:linear-gradient(90deg,transparent,#444,transparent)}
.speed-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#858585,transparent);opacity:.25;transform:skewX(-30deg);animation:speed 2.4s linear infinite}
.speed-1{width:190px;top:29%;right:8%}.speed-2{width:150px;top:38%;right:18%;animation-delay:.7s}.speed-3{width:220px;top:49%;right:3%;animation-delay:1.25s}
@keyframes speed{0%{transform:translateX(80px) skewX(-30deg);opacity:0}25%{opacity:.25}100%{transform:translateX(-260px) skewX(-30deg);opacity:0}}
.car-svg{position:absolute;width:88%;max-width:760px;right:-2%;bottom:74px;z-index:2;overflow:visible;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.carvia-card:hover .car-svg{transform:translateX(-16px) translateY(-3px)}
.car-shadow{fill:#000;opacity:.38}
.car-body{fill:#f4f4f0;stroke:#f4f4f0;stroke-width:2}
.car-window{fill:#181818;stroke:#363636;stroke-width:2}
.car-detail{fill:none;stroke:#a6a6a2;stroke-width:2;opacity:.55}
.wheel-outer{fill:#0a0a0a;stroke:#bdbdb8;stroke-width:5}.wheel-inner{fill:#c7c7c2;stroke:#272727;stroke-width:8}
.headlight{fill:#fff;filter:drop-shadow(0 0 7px rgba(255,255,255,.85))}
.road{position:absolute;left:0;right:0;bottom:0;height:115px;background:linear-gradient(#151515,#080808);border-top:1px solid #2b2b2b}
.road-line{position:absolute;left:0;right:0;top:48%;height:2px;background:repeating-linear-gradient(90deg,transparent 0 55px,#555 55px 100px,transparent 100px 145px);animation:roadMove .8s linear infinite}
@keyframes roadMove{to{background-position:-145px 0}}
.metric-card{position:absolute;z-index:4;background:rgba(255,255,255,.94);color:#111;border:1px solid #d9d9d3;border-radius:13px;padding:12px 14px;box-shadow:0 14px 32px rgba(0,0,0,.19);backdrop-filter:blur(8px);transition:transform .35s ease}
.metric-card span{display:block;color:#888880;font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:5px}.metric-card strong{font-size:12px}
.metric-price{top:17%;left:20%;animation:float1 4s ease-in-out infinite}.metric-alert{top:31%;right:8%;animation:float2 4.8s ease-in-out infinite}.metric-studio{bottom:29%;left:9%;animation:float3 5.2s ease-in-out infinite}
@keyframes float1{50%{transform:translateY(-8px)}}@keyframes float2{50%{transform:translateY(9px)}}@keyframes float3{50%{transform:translateY(-7px)}}
.carvia-card:hover .metric-card{box-shadow:0 17px 38px rgba(0,0,0,.28)}

.manifesto{overflow:hidden;padding:0;border-bottom:1px solid var(--line)}
.manifesto-track{height:138px;display:flex;align-items:center;gap:30px;white-space:nowrap;width:max-content;animation:marquee 22s linear infinite;font-size:42px;font-weight:800;letter-spacing:-.04em;color:#d2d2ce}
.manifesto-track i{font-style:normal;color:#111}
@keyframes marquee{to{transform:translateX(-50%)}}
.manifesto-copy{padding:94px 0 104px;display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:start;border-top:1px solid var(--line)}
.manifesto-copy p{margin:0;max-width:820px;font-size:clamp(42px,5.5vw,78px);line-height:.98;letter-spacing:-.055em;font-weight:620}

.contact{border-bottom:0}
.contact-panel{border-radius:30px;background:#0d0d0d;color:#fff;padding:54px;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;position:relative;overflow:hidden}
.contact-panel:before{content:"";position:absolute;width:520px;height:520px;border:1px solid #2b2b2b;border-radius:50%;right:-210px;top:-250px;box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012)}
.light{color:#8b8b85}
.contact-main{position:relative;z-index:2}
.contact-main h2{margin:18px 0 23px;font-size:clamp(48px,5.5vw,78px);line-height:.95;letter-spacing:-.06em;font-weight:620}
.contact-main p{margin:0;max-width:670px;color:#aaa;line-height:1.65;font-size:15px}
.contact-side{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.contact-button{width:100%;min-height:74px;border:0;border-radius:16px;background:#fff;color:#0d0d0d;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s}
.contact-button:hover{background:#eeeeea}
.email-link{margin-top:16px;color:#fff;font-size:16px;font-weight:800;text-underline-offset:5px;word-break:break-all}
.bot-note{margin:14px 0 0;color:#6d6d69;font-size:10px;line-height:1.55;max-width:300px}

.footer{height:96px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#898983;font-size:11px}
.footer-mark{letter-spacing:.02em}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:54px;min-height:0;padding-top:80px}
  .hero h1{max-width:790px}
  .flow-lab{max-width:760px}
  .section-intro,.manifesto-copy{grid-template-columns:180px 1fr}
  .principle-grid{grid-template-columns:1fr}
  .principle{min-height:220px}
  .principle h3{margin-top:72px}
  .carvia-card{grid-template-columns:1fr;min-height:0}
  .carvia-info{min-height:500px}
  .car-stage{min-height:500px}
  .contact-panel{grid-template-columns:1fr;gap:44px}
  .contact-side{max-width:500px}
}

@media (max-width:720px){
  .shell{width:min(calc(100% - 26px), var(--max))}
  .topbar{height:78px;grid-template-columns:1fr auto}
  .brand{width:145px;height:40px}
  .nav{display:none}
  .mini-cta{font-size:11px}
  .hero{padding:72px 0 72px}
  .hero h1{font-size:clamp(52px,15vw,79px)}
  .hero-copy>p{font-size:17px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .flow-lab{min-height:460px}
  .flow-canvas{height:330px}
  .flow-node{width:146px;min-height:104px;padding:13px}
  .node-a{left:4%;top:130px}.node-b{left:50%;top:40px}.node-c{right:4%;top:162px}
  .route-a{left:34%;top:175px;width:18%}.route-b{left:61%;top:147px;width:17%}
  .chip-1{left:3%;top:42px}.chip-2{left:24%;bottom:22px}.chip-3{right:22%;top:20px}.chip-done{right:5%;bottom:23px}
  .section{padding:78px 0}
  .section-intro,.manifesto-copy{grid-template-columns:1fr;gap:22px}
  .section-heading{align-items:flex-start;flex-direction:column}
  .carvia-info{padding:28px;min-height:500px}
  .carvia-info h3{font-size:clamp(48px,14vw,74px)}
  .car-stage{min-height:410px}
  .car-svg{width:112%;right:-14%;bottom:52px}
  .metric-card{padding:9px 10px}
  .metric-price{left:5%;top:13%}.metric-alert{right:4%;top:29%}.metric-studio{left:7%;bottom:29%}
  .manifesto-track{height:112px;font-size:32px;gap:23px}
  .contact-panel{padding:30px}
  .contact-main h2{font-size:clamp(46px,13vw,70px)}
  .footer{height:84px}
}

@media (max-width:470px){
  .mini-cta{padding:0 11px}.mini-dot{display:none}
  .flow-node{width:132px}
  .flow-node small{font-size:9px}
  .node-a{left:2%}.node-c{right:2%}
  .flow-chip{font-size:9px;padding:6px 8px}
  .lab-footer{padding:0 14px;gap:8px}
  .feature-row{gap:5px}.feature-row span{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .cursor-orb{display:none}
}