:root{
  --bg:#0d1019;
  --bg-2:#f0f2f7;
  --panel:#ffffff;
  --line:#e0e4ef;
  --cream:#0d1019;
  --muted:#4a5270;
  --muted-2:#8891aa;
  --amber:#4a5cd8;
  --amber-deep:#3644b0;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--bg);background:#ffffff;-webkit-font-smoothing:antialiased;line-height:1.55;padding-top:80px;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px;}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;color:var(--amber);}

.ph{position:relative;background:
    repeating-linear-gradient(135deg,#20284a 0 2px,transparent 2px 12px),
    #161b2e;overflow:hidden;}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.75;}

/* nav */
header.bar{position:fixed;top:0;left:0;right:0;z-index:60;background:#ffffff;border-bottom:1px solid #e8eaf0;transition:box-shadow .25s;}
header.bar.scrolled{box-shadow:0 2px 12px rgba(0,0,0,0.08);}
header.bar.scrolled .wrap{height:56px;}
.bar .wrap{display:flex;align-items:center;height:80px;gap:34px;transition:height .25s;}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{height:38px;width:auto;display:block;}
footer .logo img{height:48px;filter:none;}
nav.main{display:flex;gap:30px;margin-left:14px;}
nav.main a{font-size:14px;font-weight:500;color:#4a5270;transition:color .15s;}
nav.main a:hover{color:var(--bg);}
.spacer{flex:1;}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:13px 24px;border-radius:6px;cursor:pointer;transition:.25s;border:1px solid transparent;}
header.bar.scrolled .btn-amber{padding:9px 18px;font-size:13px;}
.btn-amber{background:var(--amber);color:#ffffff;}
.btn-amber:hover{background:var(--amber-deep);}
.btn-out{border-color:#c8cdd8;color:var(--bg);}
.btn-out:hover{border-color:var(--amber);color:var(--amber);}
.arrow{transition:transform .18s;}
.btn:hover .arrow{transform:translateX(3px);}

/* hero split */
.hero{
  background:#ffffff;
  display:flex;align-items:center;position:relative;
  background-image:radial-gradient(circle,#9aa3c8 1.5px,transparent 1.5px);
  background-size:24px 24px;
}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#ffffff 45%,transparent 100%);pointer-events:none;}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;width:100%;position:relative;}
.hero .hero-content{}
.hero .kicker{margin-bottom:24px;display:flex;align-items:center;gap:12px;}
.hero .kicker::before{content:"";width:40px;height:2px;background:var(--amber);}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(46px,6.5vw,100px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase;color:var(--bg);}
.hero h1 .thin{display:block;font-weight:500;color:var(--amber);}
.hero p.lead{font-size:17px;color:#4a5270;max-width:440px;line-height:1.7;margin-top:28px;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}
.hero .trust{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;}
.hero .trust-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;}
.hero .trust-item::before{content:"✓";width:20px;height:20px;background:var(--amber);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.hero .hero-img{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* Image frame + float */
.hero-img__frame{position:relative;width:100%;}
.hero-img__frame img{width:100%;height:auto;display:block;object-fit:contain;animation:imgFloat 7s ease-in-out infinite;}

@keyframes imgFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* Floating chips */
.hero-chip{
  position:absolute;
  display:flex;align-items:center;gap:12px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 16px;
  box-shadow:0 8px 28px rgba(0,0,0,0.10);
  white-space:nowrap;
}
.hero-chip--tl{top:12%;left:-60px;animation:chipEntryLeft .7s ease both, chipFloat1 6s ease-in-out infinite;animation-delay:.8s, .8s;}
.hero-chip--br{bottom:16%;right:-60px;animation:chipEntryRight .7s ease both, chipFloat2 6s ease-in-out 1s infinite;animation-delay:.95s, .95s;}

@keyframes chipEntryLeft{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
@keyframes chipEntryRight{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
@keyframes chipFloat1{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes chipFloat2{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

.hero-chip__icon{font-size:16px;line-height:1;color:var(--amber);}
.hero-chip__val{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--bg);line-height:1.2;}
.hero-chip__label{font-size:11px;color:var(--muted);margin-top:2px;}

/* Animated underline on headline accent */
.hero h1 .thin{position:relative;display:inline-block;}
.hero h1 .thin::after{
  content:"";
  position:absolute;
  left:0;bottom:-4px;
  height:3px;width:100%;
  background:var(--amber);
  border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  animation:underlineIn .6s ease both;
  animation-delay:.9s;
}
@keyframes underlineIn{to{transform:scaleX(1);}}

/* Parallax drift on dot bg */
.hero{background-attachment:fixed;}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero .hero-img{margin-top:20px;}
  .hero .hero-img::before{inset:-4% -6%;}
  .hero-img__frame img{max-width:480px;margin:0 auto;}
  .hero-chip--tl{left:-8px;}
  .hero-chip--br{right:-8px;}
  .hero{background-attachment:scroll;}
}

section{padding:7em 0;}
h2.sec{font-family:var(--disp);font-weight:700;font-size:clamp(36px,5.2vw,76px);line-height:.94;letter-spacing:-.03em;text-transform:uppercase;}
.lead-2{font-size:18px;color:var(--muted);line-height:1.7;}

/* ticker */
.ticker{background:var(--amber);color:#ffffff;overflow:hidden;border-top:1px solid var(--amber-deep);border-bottom:1px solid var(--amber-deep);}
.ticker .track{display:flex;gap:0;white-space:nowrap;animation:scroll 28s linear infinite;}
.ticker span{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:-.01em;padding:18px 28px;display:inline-flex;align-items:center;gap:28px;}
.ticker span::after{content:"✶";color:#ffffff66;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* about */
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.about .ph{aspect-ratio:4/5;border-radius:10px;}
.about .kicker{margin-bottom:22px;}
.about p.lead-2{margin-top:26px;max-width:480px;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:40px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.stats .s{background:var(--bg-2);padding:26px 28px;}
.stats .s .n{font-family:var(--disp);font-weight:700;font-size:42px;color:var(--amber);line-height:1;}
.stats .s .l{font-size:13px;color:var(--muted);margin-top:8px;}

/* range big cards */
.range{background:var(--bg-2);}
.range .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px;}
.range .head p{color:var(--muted);max-width:380px;font-size:16px;}
.grid-models{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.mcard{position:relative;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid var(--line);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;transition:.2s;}
.mcard:hover{transform:translateY(-4px);border-color:#3a456e;}
.mcard .ph{position:absolute;inset:0;}
.mcard .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(13,16,25,0.88) 100%);}
.mcard .body{position:relative;padding:30px;}
.mcard .code{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#c5caff;}
.mcard h3{font-family:var(--disp);font-weight:700;font-size:30px;text-transform:uppercase;letter-spacing:-.02em;margin-top:8px;color:#ffffff;}
.mcard .meta{font-size:13px;color:rgba(255,255,255,0.6);margin-top:8px;}
.mcard.wide{grid-column:span 2;min-height:200px;}
.mcard-custom-bg{background:var(--amber) !important;}

/* canvases */
.canvases .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.canvases .ph{min-height:460px;border-radius:12px;overflow:hidden;}
.canvases .txt{display:flex;flex-direction:column;justify-content:center;}
.canvases .new{display:inline-flex;align-items:center;gap:8px;color:#ffffff;background:var(--amber);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;padding:6px 12px;border-radius:100px;width:max-content;margin-bottom:24px;}
.canvases p{color:var(--muted);font-size:17px;margin-top:18px;max-width:400px;line-height:1.7;}

/* cta full */
.cta{position:relative;text-align:center;overflow:hidden;}
.cta .wrap{position:relative;}
.cta h2{margin:0 auto;color:var(--bg);}
.cta h2 .amber{color:var(--amber);}
.cta p{margin:24px auto 0;max-width:46ch;font-size:18px;color:var(--muted);}
.calls{display:flex;gap:16px;justify-content:center;margin-top:44px;flex-wrap:wrap;}
.call-card{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:24px 32px;min-width:260px;transition:.18s;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.call-card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 6px 20px rgba(74,92,216,0.12);}
.call-card .who{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.call-card .num{font-family:var(--disp);font-weight:700;font-size:28px;margin-top:8px;color:var(--bg);}
.call-card:hover .num{color:var(--amber);}

footer{background:var(--bg-2);color:var(--muted);padding:70px 0 36px;border-top:1px solid var(--line);}
footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--line);}
footer .logo{margin-bottom:18px;}
footer p.blurb{font-size:14px;max-width:320px;line-height:1.6;}
footer h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);margin-bottom:16px;}
footer ul{list-style:none;display:grid;gap:11px;}
footer ul a{font-size:14px;color:var(--muted);}
footer ul a:hover{color:var(--amber);}
footer .bot{display:flex;justify-content:space-between;padding-top:24px;font-size:12px;letter-spacing:.04em;flex-wrap:wrap;gap:10px;}


@media(max-width:960px){
  .about .wrap,.canvases .wrap,.grid-models,footer .top{grid-template-columns:1fr;}
  .mcard.wide{grid-column:span 1;}
  .canvases .ph{min-height:300px;}
  nav.main{display:none;}
  header.bar{position:relative;}
  body{padding-top:0;}
}
@media(max-width:560px){.wrap{padding:0 22px;}section{padding:84px 0;}.stats{grid-template-columns:1fr;}}

/* ── Animations ─────────────────────────────────────────── */

/* Hero entrance */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

.hero .kicker{animation:heroFadeUp .6s ease both;animation-delay:.1s;}
.hero h1{animation:heroFadeUp .7s ease both;animation-delay:.22s;}
.hero p.lead{animation:heroFadeUp .7s ease both;animation-delay:.36s;}
.hero .cta{animation:heroFadeUp .7s ease both;animation-delay:.48s;}
.hero .hero-img{animation:heroFadeIn .9s ease both;animation-delay:.3s;}
.hero .trust{animation:heroFadeUp .6s ease both;animation-delay:.1s;}

/* Scroll-reveal base */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal.from-left{transform:translateX(-36px);}
.reveal.from-right{transform:translateX(36px);}
.reveal.visible{
  opacity:1;
  transform:translate(0,0);
}

/* Stagger helpers (JS sets --i on each child) */
.stagger-child{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:calc(var(--i, 0) * 100ms);
}
.stagger-child.visible{opacity:1;transform:translateY(0);}

/* mcard scale-up on reveal */
.mcard{transition:transform .2s, border-color .2s, opacity .6s ease, box-shadow .2s;}