:root {
  --bg:#0a0a0a;          /* ground */
  --surface:#101010;     /* raised */
  --surface2:#161616;    /* raised, hovered */
  --fg:#f4f1eb;
  --muted:#8f8a83;
  --faint:#5c5854;
  --accent:#ff5b2e;
  --accent-soft:rgba(255,91,46,.12);
  --line:#1f1f1f;        /* hairline, quieter than the old #2a2a2a */
  --line2:#2b2b2b;       /* hairline, hovered */
  --up:#3ecf8e;
  --down:#f05252;
  --ease:cubic-bezier(.22,1,.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html.lenis { height:auto; }
body {
  background:var(--bg); color:var(--fg);
  font-family:Inter, sans-serif; font-weight:400;
  overflow-x:hidden; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
em { font-style:normal; color:var(--accent); }
h1,h2,h3,.logo,.big-link { font-family:Syne, sans-serif; letter-spacing:-.02em; }
.mono { font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; }
::selection { background:var(--accent); color:#0a0a0a; }

/* Film grain. Kills the flat-gradient look that makes dark pages feel cheap. */
body::after {
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reading progress */
.progress { position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--accent); z-index:95; }

.loader { position:fixed; inset:0; background:var(--accent); z-index:100; display:flex; align-items:flex-end; justify-content:space-between; padding:4vw; color:#0a0a0a; }
.loader-count { font:800 18vw/0.8 Syne; letter-spacing:-.04em; }
.loader-word { font:700 2rem Syne; }

.cursor { position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background:var(--fg); mix-blend-mode:difference; pointer-events:none; z-index:90; transform:translate(-50%,-50%); transition:width .35s var(--ease), height .35s var(--ease); }
.cursor.big { width:64px; height:64px; }
@media (hover:none) { .cursor { display:none; } }

.nav { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:1.4rem 4vw; z-index:50; mix-blend-mode:difference; }
.logo { font-size:1.55rem; font-weight:800; display:inline-flex; align-items:center; gap:.55rem; }
.logo img { height:.82em; width:auto; }
.logo span { color:var(--accent); }
.nav nav { display:flex; gap:2.2rem; font-size:.92rem; }
.roll { position:relative; display:inline-block; overflow:hidden; line-height:1.2; transition:color .4s; }
.roll::after { content:attr(data-text); position:absolute; left:0; top:100%; transition:transform .45s var(--ease); }
.roll:hover::after { transform:translateY(-100%); }
.pill { border:1px solid currentColor; padding:.65rem 1.3rem; border-radius:99px; font-size:.88rem; display:inline-block; transition:background .35s var(--ease), color .35s var(--ease); }

/* ---------- hero ---------- */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:7rem 4vw 3rem; }
/* One soft ember behind the headline. Enough depth to stop the page reading as a flat rectangle. */
.hero::before {
  content:""; position:absolute; left:-10%; top:8%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(255,91,46,.13), transparent 62%);
  filter:blur(30px); pointer-events:none; z-index:-1;
}
.hero > * { position:relative; }
.eyebrow { color:var(--muted); letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; margin-bottom:2rem; font-weight:500; }
.eyebrow .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--up); margin-right:.65rem; vertical-align:middle; box-shadow:0 0 0 3px rgba(62,207,142,.16); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 3px rgba(62,207,142,.16); } 50% { box-shadow:0 0 0 7px rgba(62,207,142,0); } }
.hero-title { font-size:clamp(2.4rem,7vw,7.5rem); line-height:.94; font-weight:800; letter-spacing:-.035em; }
.line { display:block; overflow:hidden; padding-bottom:.06em; }
.line > span { display:inline-block; }
.hero-foot { display:flex; justify-content:space-between; align-items:flex-end; margin-top:3.5rem; gap:2rem; }
.hero-foot p { max-width:430px; color:var(--muted); line-height:1.7; font-size:1rem; font-weight:300; }
.hero-cta { display:flex; gap:1.4rem; align-items:center; margin-top:2rem; flex-wrap:wrap; }
.btn-solid { background:var(--fg); color:var(--bg); border-radius:99px; padding:.9rem 1.7rem; font-weight:500; display:inline-block; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s; }
.btn-solid:hover { background:var(--accent); color:#0a0a0a; transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(255,91,46,.55); }
.circle-btn { width:104px; height:104px; border-radius:50%; border:1px solid var(--line2); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; transition:border-color .35s, background .35s; }
.circle-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
.circle-btn small { font-size:.62rem; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:.2rem; }

/* ---------- marquee ---------- */
.marquee { border-block:1px solid var(--line); padding:1.5rem 0; overflow:hidden; background:var(--surface);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee-track { display:flex; width:max-content; animation:scroll 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track .grp { display:flex; white-space:nowrap; }
.tick { font:700 clamp(1.1rem,2.1vw,1.8rem) Syne; padding-right:2.6rem; display:inline-flex; align-items:baseline; gap:.65rem; letter-spacing:-.01em; }
.tick i { font-style:normal; font-size:.62em; font-family:"JetBrains Mono", monospace; color:var(--faint); font-weight:400; transition:color .4s; }
.tick i.u { color:var(--up); }
.tick i.d { color:var(--down); }
@keyframes scroll { to { transform:translateX(-50%); } }

/* ---------- sections ---------- */
section { padding:9rem 4vw; }
.marquee { padding:1.5rem 0; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:1.6rem; margin-bottom:3.5rem; }
.section-head h2 { font-size:clamp(1.9rem,4.4vw,3.6rem); font-weight:700; }
.section-head span { color:var(--faint); font-family:"JetBrains Mono", monospace; font-size:.8rem; }

/* Markets — live quotes in the slot the template used for case studies. */
.mk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.mk { position:relative; background:var(--surface); padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; transition:background .35s var(--ease); }
.mk::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease); }
.mk:hover { background:var(--surface2); }
.mk:hover::before { transform:scaleX(1); }
.mk-top { display:flex; justify-content:space-between; align-items:baseline; }
.mk-sym { font:700 1.1rem Syne; letter-spacing:-.01em; }
.mk-kind { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.mk-price { font-family:"JetBrains Mono", monospace; font-size:1.45rem; font-weight:500; transition:color .3s; }
.mk-price.u { color:var(--up); }
.mk-price.d { color:var(--down); }
.mk-name { font-size:.78rem; color:var(--muted); font-weight:300; }
.mk-more { margin-top:2.2rem; color:var(--muted); font-size:.92rem; font-weight:300; line-height:1.7; max-width:620px; }
.mk-more a { color:var(--fg); }

.service-list { list-style:none; }
.service-list li { display:grid; grid-template-columns:90px 1fr 1fr; gap:2.5rem; align-items:center; padding:2.6rem 0; border-bottom:1px solid var(--line); transition:padding .45s var(--ease), background .45s; }
.service-list li:hover { padding-left:1.6rem; background:linear-gradient(90deg,var(--accent-soft),transparent 45%); }
.service-list li:hover h3 { color:var(--accent); }
.service-list > li > span { color:var(--faint); font-family:"JetBrains Mono", monospace; font-size:.85rem; }
.service-list h3 { font-size:clamp(1.5rem,3.2vw,2.7rem); font-weight:700; transition:color .35s; }
.service-list p { color:var(--muted); line-height:1.75; font-weight:300; }

.about-text { font:600 clamp(1.5rem,3.3vw,3rem)/1.3 Syne; max-width:1080px; letter-spacing:-.02em; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:6rem; }
.stats > div { background:var(--bg); padding:2.5rem 1.5rem; }
.stats strong { font:800 clamp(2.6rem,6vw,5rem) Syne; display:block; letter-spacing:-.03em; }
.stats strong::after { content:attr(data-suffix); color:var(--accent); }
.stats span { color:var(--muted); font-size:.85rem; letter-spacing:.04em; }

/* The card */
.card-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.card-copy h2 { font-size:clamp(1.9rem,4.4vw,3.4rem); margin-bottom:1.4rem; font-weight:700; }
.card-copy p { color:var(--muted); line-height:1.8; max-width:460px; font-weight:300; }
.tiers { list-style:none; margin-top:2.6rem; }
.tiers li { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--line); font-size:.92rem; transition:padding .35s var(--ease); }
.tiers li:hover { padding-left:.6rem; }
.tiers li span:first-child { color:var(--accent); font-family:"JetBrains Mono", monospace; font-size:.8rem; }
.tiers li span:last-child { color:var(--muted); font-family:"JetBrains Mono", monospace; }
.plastic { aspect-ratio:1.586/1; border-radius:22px; background:linear-gradient(145deg,#1a1a1a,#0c0c0c 65%); border:1px solid var(--line2); padding:2.2rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease); }
.plastic::before { content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 28% 18%, rgba(255,91,46,.4), transparent 52%); }
.plastic::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%); }
.plastic > * { position:relative; z-index:1; }
.plastic .tier { font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.plastic .pan { font-family:"JetBrains Mono", monospace; font-size:clamp(.95rem,1.8vw,1.35rem); letter-spacing:.12em; }
.plastic .row { display:flex; gap:2.6rem; font-size:.62rem; color:var(--faint); letter-spacing:.16em; text-transform:uppercase; }
.plastic .row b { display:block; color:var(--fg); font-family:"JetBrains Mono", monospace; font-size:.9rem; font-weight:400; margin-top:.3rem; letter-spacing:.02em; text-transform:none; }

.contact { text-align:center; padding-block:13rem; position:relative; }
.contact::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60vw; height:40vw; background:radial-gradient(ellipse, rgba(255,91,46,.09), transparent 65%); filter:blur(40px); pointer-events:none; }
.contact > * { position:relative; }
.big-link { font-size:clamp(2.1rem,8vw,8rem); font-weight:800; letter-spacing:-.04em; display:inline-block; transition:color .35s; line-height:1.05; }
.big-link span { display:inline-block; transition:transform .45s var(--ease); }
.big-link:hover { color:var(--accent); }
.big-link:hover span { transform:translateX(1.6rem) rotate(-45deg); }
.contact .note { color:var(--faint); font-size:.82rem; margin-top:2.4rem; font-weight:300; }

.footer { display:flex; justify-content:space-between; align-items:center; padding:2.2rem 4vw; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; gap:1rem; flex-wrap:wrap; font-weight:300; }
.footer div { display:flex; gap:1.8rem; align-items:center; }
.footer a { transition:color .3s; }
.footer a:hover { color:var(--accent); }

@media (max-width:1000px) {
  .mk-grid { grid-template-columns:repeat(2,1fr); }
  .card-wrap { grid-template-columns:1fr; gap:3rem; }
  section { padding:6rem 4vw; }
}
@media (max-width:760px) {
  .nav nav { display:none; }
  .service-list li { grid-template-columns:44px 1fr; gap:1.2rem; }
  .service-list p { grid-column:2; }
  .stats { grid-template-columns:1fr; }
  .footer { flex-direction:column; align-items:flex-start; }
  .hero-foot { flex-direction:column; align-items:flex-start; }
  section { padding:5rem 4vw; }
  .contact { padding-block:7rem; }
}