/* ============================================================
   DMS TechLabs — homepage
   Theme derived from the logo: graphite + white, one red accent.

   The mark is a monoline construction — 22-unit strokes, butt caps,
   miter joins, a solid full-width rule, and a single red square for
   the M's dot. The page keeps that grammar (neutral only, square
   markers, hairlines, near-zero radius) but layers modern depth on
   top: grain, red bloom, multi-rate parallax, kinetic type and
   scroll-driven motion.
   ============================================================ */

@property --a { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- Tokens ---------- */
:root{
  /* surfaces — true neutral graphite, no blue cast */
  --bg:        #0c0d0e;
  --bg-2:      #101113;
  --bg-3:      #141517;
  --surface:   rgba(255,255,255,.022);
  --surface-2: rgba(255,255,255,.05);
  --glass:     rgba(255,255,255,.045);
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.18);
  --line-3:    rgba(255,255,255,.32);

  --text:      #f4f5f6;
  --text-2:    #a2a6ac;
  --muted:     #6b7076;

  /* brand */
  --ink:       #343a40;    /* logo mark on light backgrounds */
  --dot:       #ff3b30;    /* logo accent — the M's dot, and nothing else */
  --accent:    var(--dot); /* site accent — marks "live / now", never decoration */
  --accent-rgb: 255,59,48;

  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;
  --r-xl: 4px;

  --shell: 1220px;
  --nav-h: 84px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* wide tracking, lifted straight off the TECHLABS lockup */
  --track: .26em;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* Anchor jumps land just below the stuck nav (70px). The section's own
   top padding supplies the breathing room, so this only clears the bar —
   adding more here double-counts and drops you far above the heading. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:78px; overflow-x:clip; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.05; letter-spacing:-.025em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26282b; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#34373b; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:400;
  background:var(--accent); color:#fff; padding:10px 18px;
  font-size:14px; font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

/* ---------- Ambient layers ---------- */
.bg-grid,.bg-stars,.bg-aurora{ position:fixed; inset:0; pointer-events:none; z-index:0; }

/* two-level technical grid, drifting slowly against the scroll */
.bg-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:130px 130px, 130px 130px, 26px 26px, 26px 26px;
  background-position:0 calc(var(--gy, 0px) * -1);
  mask-image:radial-gradient(ellipse 120% 74% at 50% 0%, #000 5%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 120% 74% at 50% 0%, #000 5%, transparent 80%);
}

/* gutter hairline, offset from the content column */
.bg-stars{
  border-left:1px solid rgba(255,255,255,.05);
  width:0;
  margin-left:min(88%, calc(50% + var(--shell) / 2 - 40px));
}

/* red bloom — the only chroma in the room. Tracks the pointer and
   the scroll so the page never feels like a flat sheet. */
.bg-aurora{
  background:
    radial-gradient(620px 620px at var(--bx,72%) var(--by,8%), rgba(var(--accent-rgb),.17), transparent 62%),
    radial-gradient(1000px 760px at 12% 88%, rgba(var(--accent-rgb),.055), transparent 66%),
    radial-gradient(900px 520px at 80% 40%, rgba(255,255,255,.035), transparent 70%);
  transition:background-position .3s linear;
}

/* film grain, over everything, never in the way */
.grain{
  position:fixed; inset:-60%; z-index:300; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}       20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}   60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}    100%{transform:translate(0,0)}
}

.cursor-glow{
  position:fixed; z-index:1; width:520px; height:520px;
  translate:-50% -50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.09), rgba(255,255,255,.03) 40%, transparent 66%);
  transition:opacity .5s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .cursor-glow.on{ opacity:1; } }

.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:rgba(255,255,255,.06);
}
.scroll-rail span{
  display:block; height:100%; width:0%; background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.7);
}

/* ---------- Shared bits ---------- */
.hl{ color:var(--accent); }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-2);
}
.eyebrow .dot{
  width:8px; height:8px; flex:none;
  background:var(--accent);              /* square. never a circle. */
  box-shadow:0 0 12px rgba(var(--accent-rgb),.9);
}
.eyebrow::after{ content:""; height:1px; flex:1; max-width:80px; background:var(--line-2); }

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
  will-change:transform;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), box-shadow .3s var(--ease),
             transform .35s var(--ease-out);
}
.btn > *{ position:relative; z-index:1; }
.btn span{ transition:transform .3s var(--ease-out); }
.btn:hover span{ transform:translateX(4px); }
.btn--lg{ padding:17px 32px; font-size:15px; }

.btn--primary{ background:var(--text); color:var(--bg); border-color:var(--text); }
/* red wipes in from the left rather than just swapping */
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.btn--primary:hover{ color:#fff; border-color:var(--accent); box-shadow:0 10px 40px -12px rgba(var(--accent-rgb),.8); }
.btn--primary:hover::before{ transform:scaleX(1); }

.btn--ghost{ color:var(--text); border-color:var(--line-2); background:var(--glass); backdrop-filter:blur(10px); }
.btn--ghost:hover{ border-color:var(--line-3); background:var(--surface-2); }

/* section heading, preceded by the logo's solid rule */
.sec-head{ max-width:720px; margin-bottom:clamp(34px,4.2vw,54px); }
.sec-head .eyebrow{ margin-bottom:26px; }
.sec-title{
  position:relative;
  font-size:clamp(32px,4.6vw,56px);
  margin:0 0 22px;
  padding-top:26px;
}
.sec-title::before{
  content:""; position:absolute; top:0; left:0;
  width:64px; height:4px;                /* echoes the 376×22 bar over the mark */
  background:var(--text);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out) .1s;
}
.reveal.in .sec-title::before,
.sec-head.in .sec-title::before{ transform:scaleX(1); }
.sec-lede{ color:var(--text-2); font-size:clamp(15.5px,1.5vw,17.5px); max-width:620px; }

/* Two adjacent sections stack their padding, so this value is doubled
   in the gap you actually see: ~192px on desktop, ~112px on a phone. */
.section{ position:relative; z-index:2; padding:clamp(56px,6.5vw,96px) 0; }
.section--alt{ background:rgba(255,255,255,.016); border-block:1px solid var(--line); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d,0) * 80ms);
}

/* kinetic line reveal — each line wipes up from its own mask */
.ln{ display:block; overflow:hidden; }
.ln > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  animation:lineUp 1s var(--ease-out) forwards;
  animation-delay:calc(.15s + var(--i,0) * .11s);
}
@keyframes lineUp{ to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .ln > i{ transform:none; }
  .sec-title::before{ transform:scaleX(1); }
  .bp__trace{ stroke-dashoffset:0 !important; }
  .grain{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), height .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:70px;
  background:rgba(12,13,14,.72);
  backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,44px); }

/* Logo lockup — DMS mark, hairline rule, second word as live text.
   Everything is sized from --brand-h, so there is one number to change.
   The mark takes currentColor; --dot is the only colour it does not. */
.brand{
  --brand-h: 36px;
  display:inline-flex; align-items:center; gap:calc(var(--brand-h) * .36);
  color:var(--text);
}
.brand__mark{
  height:var(--brand-h); width:auto; flex:none; display:block;
  transition:transform .5s var(--ease-out), height .3s var(--ease);
}
.nav.stuck .brand{ --brand-h:30px; }
.brand:hover .brand__mark{ transform:translateY(-2px); }
.brand__rule{
  width:2px; height:calc(var(--brand-h) * .86); flex:none;
  background:currentColor; opacity:.28;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text b{
  font-family:var(--display); font-weight:500;
  font-size:calc(var(--brand-h) * .40);
  text-transform:uppercase;
  letter-spacing:var(--track);
  margin-right:calc(var(--track) * -1);   /* cancel the trailing letter-space */
}
.brand__text i{ font-style:normal; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.nav.stuck .brand__text i{ display:none; }

.nav__links{
  display:flex; gap:2px; padding:4px;
  border:1px solid transparent; border-radius:var(--r-lg);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.stuck .nav__links{ background:var(--surface); border-color:var(--line); }
.nav__links a{
  position:relative; padding:8px 15px;
  font-size:13.5px; color:var(--text-2);
  transition:color .25s var(--ease);
}
/* hover/active marker is a red square, matching the M's dot */
.nav__links a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:5px; height:5px; margin-left:-2.5px;
  background:var(--accent);
  opacity:0; transform:translateY(3px);
  transition:opacity .25s var(--ease), transform .25s var(--ease-out);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ opacity:1; transform:none; }
.nav__links a.is-active{ color:var(--text); }

.nav__actions{ display:flex; align-items:center; gap:10px; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:var(--r-sm); flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--glass); backdrop-filter:blur(10px); }
.burger span{ display:block; width:17px; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:109;
  display:flex; flex-direction:column; padding:12px clamp(20px,5vw,40px) 28px;
  background:rgba(12,13,14,.94); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  animation:drop .25s var(--ease-out);
}
.mobile-menu[hidden]{ display:none; }
@keyframes drop{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
.mobile-menu a{
  display:flex; align-items:center; gap:14px;
  padding:16px 2px; font-family:var(--display); font-size:19px;
  border-bottom:1px solid var(--line); color:var(--text-2);
}
.mobile-menu a::before{
  content:""; width:6px; height:6px; background:var(--line-3); flex:none;
  transition:background .25s var(--ease);
}
.mobile-menu a:hover{ color:var(--text); }
.mobile-menu a:hover::before{ background:var(--accent); }
.mobile-menu__cta{ margin-top:16px; border-bottom:0 !important; color:var(--accent) !important; }
.mobile-menu__cta::before{ background:var(--accent) !important; }

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 70px) 0 90px;
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:3; will-change:transform, opacity; }

/* Blueprint of the mark: ghosted solid, hairline trace that draws
   itself, dimensions called out, red dot landing last.
   Moves on both scroll and pointer, at its own rate. */
.blueprint{
  position:absolute; top:50%; right:-6%;
  width:min(760px,60vw); z-index:1; pointer-events:none;
  translate:0 -50%;
  will-change:transform;
}
.blueprint svg{ width:100%; height:auto; overflow:visible; }

.bp__ghost{ fill:none; stroke:rgba(255,255,255,.055); stroke-width:22; }
.bp__bar{ fill:rgba(255,255,255,.055); }

.bp__trace{
  fill:none; stroke:rgba(255,255,255,.42); stroke-width:1;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:draw 2.2s var(--ease-out) forwards;
}
.bp__trace:nth-of-type(2){ animation-delay:.14s; }
.bp__trace:nth-of-type(3){ animation-delay:.28s; }
.bp__trace:nth-of-type(4){ animation-delay:.42s; }
.bp__trace:nth-of-type(5){ animation-delay:.56s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.bp__dim{ stroke:rgba(255,255,255,.15); stroke-width:1; fill:none; }
.bp__label{
  font-family:var(--mono); font-size:8px; letter-spacing:.16em;
  fill:rgba(255,255,255,.28); text-transform:uppercase;
}

.bp__dot{
  fill:var(--accent);
  filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.9));
  transform-box:fill-box; transform-origin:center;
  animation:dotIn .5s var(--ease-out) 1.5s backwards, dotPulse 3.4s ease-in-out 2s infinite;
}
@keyframes dotIn{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes dotPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.72 } }

/* floating glass spec chips — depth in front of the mark */
.floaters{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.floater{
  position:absolute;
  display:flex; align-items:center; gap:9px;
  padding:9px 14px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--glass); backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px #000;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2);
  will-change:transform;
  opacity:0;
  animation:floatIn .9s var(--ease-out) forwards;
}
.floater i{ width:6px; height:6px; flex:none; background:var(--accent); font-style:normal; }
.floater b{ color:var(--text); font-weight:500; }
.floater--a{ top:20%;  right:34%; animation-delay:1.7s; }
.floater--b{ top:47%;  right:6%;  animation-delay:1.9s; }
.floater--c{ top:73%;  right:28%; animation-delay:2.1s; }
@keyframes floatIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }

.hero__title{
  font-size:clamp(42px,7vw,86px);
  letter-spacing:-.035em; font-weight:500;
  margin:28px 0 26px;
  max-width:15ch;
}
.hero__lede{
  color:var(--text-2);
  font-size:clamp(16px,1.6vw,18.5px);
  max-width:54ch;
  margin-bottom:38px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(52px,7vw,78px); }

/* stat strip — hairline separated, mono labels, glass backing */
.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  backdrop-filter:blur(6px);
}
.hero__stats li{
  position:relative;
  padding:24px 24px 20px;
  display:flex; flex-direction:column; gap:8px;
  border-left:1px solid var(--line);
  transition:background .3s var(--ease);
}
.hero__stats li:hover{ background:rgba(255,255,255,.03); }
.hero__stats li:first-child{ border-left:0; padding-left:0; }
/* red tick over the first stat only — the dot placed once, with intent */
.hero__stats li:first-child::before{
  content:""; position:absolute; top:-1px; left:0; width:40px; height:3px;
  background:var(--accent);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.8);
}
.hero__stats b{
  font-family:var(--display); font-size:clamp(28px,3.2vw,40px); font-weight:500;
  letter-spacing:-.03em; color:var(--text); line-height:1;
}
.hero__stats span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); line-height:1.5;
}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; translate:-50% 0;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:var(--track); text-transform:uppercase; color:var(--muted);
  z-index:3;
}
.hero__scroll span{
  width:1px; height:34px; background:linear-gradient(var(--line-3),transparent);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- Marquee (two rows, opposite directions) ---------- */
.marquee{
  position:relative; z-index:2;
  border-block:1px solid var(--line);
  padding:14px 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee + .marquee{ border-top:0; }
.marquee__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:slide 42s linear infinite;
}
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:52s; }
.marquee--rev span{ color:var(--muted); }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); white-space:nowrap;
  transition:color .25s var(--ease);
}
.marquee span:hover{ color:var(--accent); }
/* the ◆ glyphs become red squares without touching the markup */
.marquee i{
  display:block; width:5px; height:5px; flex:none;
  font-size:0; line-height:0; overflow:hidden;
  background:var(--accent);
}
.marquee--rev i{ background:var(--line-3); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Products ---------- */
.products{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; perspective:1400px; }
.pcard{
  position:relative; overflow:hidden;
  grid-column:span 2;
  display:flex; flex-direction:column;
  padding:28px 28px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .3s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease-out);
}
.pcard--wide{ grid-column:span 3; }
.pcard:hover{
  border-color:var(--line-2);
  box-shadow:0 30px 70px -34px #000, 0 0 50px -30px rgba(var(--accent-rgb),.5);
}
/* corner register mark, like a crop mark on artwork */
.pcard::after{
  content:""; position:absolute; top:0; right:0;
  width:14px; height:14px; background:var(--accent);
  clip-path:polygon(100% 0, 0 0, 100% 100%);
  opacity:0; transition:opacity .3s var(--ease);
}
.pcard:hover::after{ opacity:1; }

.pcard__glow{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), rgba(var(--accent-rgb),.11), rgba(255,255,255,.03) 34%, transparent 62%);
}
.pcard:hover .pcard__glow{ opacity:1; }

.pcard__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.pcard__icon{
  width:46px; height:46px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  background:var(--glass);
  color:var(--text);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease-out), box-shadow .3s var(--ease);
}
.pcard__icon svg{ width:22px; height:22px; }
.pcard:hover .pcard__icon{
  border-color:var(--accent); color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 0 28px -10px rgba(var(--accent-rgb),.9);
}

.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--glass);
  color:var(--text-2);
}
.chip::before{ content:""; width:6px; height:6px; flex:none; }
/* red means live. nothing else earns it. */
.chip--live{ color:var(--text); border-color:var(--line-2); }
.chip--live::before{ background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.9); }
.chip--beta::before{ background:var(--line-3); }
.chip--soon{ color:var(--muted); border-style:dashed; }
.chip--soon::before{ border:1px solid var(--line-3); }

.pcard h3{ font-size:clamp(23px,2.3vw,28px); margin-bottom:8px; }
.pcard__kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.pcard__body{ color:var(--text-2); font-size:14.5px; margin-bottom:22px; flex:1; }
.pcard__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.pcard__tags li{
  font-size:12px; color:var(--text-2);
  padding:4px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.pcard:hover .pcard__tags li{ border-color:var(--line-2); }
.pcard__link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; color:var(--text);
  transition:color .25s var(--ease);
}
.pcard__link span{ transition:transform .3s var(--ease-out); }
.pcard__link:hover{ color:var(--accent); }
.pcard__link:hover span{ transform:translateX(5px); }
/* the not-yet-shipped card reads quieter */
.pcard--muted{ background:transparent; border-style:dashed; }

/* ---------- Capabilities — sticky header, scrolling grid ---------- */
.caps-wrap{ display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.caps-wrap .sec-head{
  position:sticky; top:calc(var(--nav-h) + 44px);
  margin-bottom:0;
}
/* Hairlines are drawn as cell borders, not as a light grid background —
   a background would show through any cell that is still faded in. */
.caps{
  display:grid; grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);
  background:var(--bg);
}
.cap{
  position:relative; overflow:hidden;
  background:var(--bg);
  padding:32px 28px 30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.cap:nth-child(2n){ border-right:0; }
.cap:nth-last-child(-n+2){ border-bottom:0; }
/* red wash sweeps up from the base on hover */
.cap::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, rgba(var(--accent-rgb),.13), transparent 55%);
  opacity:0; transition:opacity .4s var(--ease);
}
.cap:hover{ background:var(--bg-3); }
.cap:hover::before{ opacity:1; }
.cap > *{ position:relative; z-index:1; }
.cap__no{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--muted); display:flex; align-items:center; gap:10px;
  margin-bottom:22px;
  transition:color .3s var(--ease);
}
.cap__no::after{ content:""; height:1px; flex:1; background:var(--line); }
.cap:hover .cap__no{ color:var(--accent); }
.cap h3{ font-size:19px; margin-bottom:12px; }
.cap p{ color:var(--text-2); font-size:14px; margin-bottom:20px; }
.cap ul{ display:flex; flex-wrap:wrap; gap:6px; }
.cap ul li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:4px 9px; border:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.cap:hover ul li{ color:var(--text-2); border-color:var(--line-2); }

/* ---------- Pipeline ---------- */
.pipe{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pipe__col{ display:flex; flex-direction:column; gap:10px; }
.pipe__head{
  display:flex; align-items:center; gap:10px;
  padding:0 2px 14px;
  border-bottom:1px solid var(--line-2);
  margin-bottom:4px;
  position:sticky; top:calc(var(--nav-h) + 12px);
  background:var(--bg); z-index:2;
}
.pipe__head h3{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; flex:1; color:var(--text);
}
.pipe__head b{ font-family:var(--mono); font-size:11px; color:var(--muted); }
/* square pips — red only for what is actually live */
.pip{ width:8px; height:8px; flex:none; }
.pip--live{ background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.9); }
.pip--beta{ background:var(--text); }
.pip--soon{ background:var(--line-3); }
.pip--idea{ border:1px solid var(--line-3); }

.pipe__item{
  position:relative; overflow:hidden;
  padding:16px 16px 14px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.pipe__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent);
  transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease-out);
}
.pipe__item:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 20px 44px -26px #000; }
.pipe__item:hover::before{ transform:scaleY(1); }
.pipe__item h4{ font-size:15px; margin-bottom:6px; }
.pipe__item p{ font-size:13px; color:var(--text-2); margin-bottom:12px; }
.pipe__item span{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* ---------- Process — cards pin and stack as you scroll ---------- */
.steps{ display:flex; flex-direction:column; gap:0; }
.step{
  position:sticky;
  top:calc(var(--nav-h) + 40px);
  overflow:hidden;
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,52px); align-items:start;
  padding:clamp(30px,4vw,46px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:rgba(16,17,19,.86);
  backdrop-filter:blur(18px);
  box-shadow:0 -20px 60px -40px #000;
  margin-bottom:18px;
}
.step:nth-child(1){ top:calc(var(--nav-h) + 40px); }
.step:nth-child(2){ top:calc(var(--nav-h) + 58px); }
.step:nth-child(3){ top:calc(var(--nav-h) + 76px); }
.step:nth-child(4){ top:calc(var(--nav-h) + 94px); }
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 60%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.step.in::before{ transform:scaleX(1); }
.step__n{
  font-family:var(--mono); font-size:clamp(28px,4vw,46px); font-weight:500;
  letter-spacing:-.02em; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--line-3);
  display:block;
  transition:-webkit-text-stroke-color .35s var(--ease), color .35s var(--ease);
}
.step:hover .step__n{ -webkit-text-stroke-color:var(--accent); }
.step h3{ font-size:clamp(21px,2.4vw,28px); margin-bottom:12px; }
.step p{ font-size:15px; color:var(--text-2); margin-bottom:0; max-width:56ch; }
.step em{
  font-family:var(--mono); font-style:normal; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
  padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
}

/* ---------- Group ---------- */
.group{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,72px); align-items:center; }
.group__list{ display:flex; flex-direction:column; margin:34px 0; border-top:1px solid var(--line); }
.group__list li{
  position:relative;
  display:flex; flex-direction:column; gap:4px;
  padding:18px 0 18px 22px;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease-out);
}
.group__list li::before{
  content:""; position:absolute; left:0; top:25px;
  width:7px; height:7px; background:var(--line-3);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.group__list li:hover{ padding-left:30px; }
.group__list li:hover::before{ background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.9); }
.group__list b{ font-family:var(--display); font-size:16px; font-weight:500; }
.group__list span{ font-size:13.5px; color:var(--text-2); }

.group__panel{ position:relative; will-change:transform; }
.group__panel::before{
  content:""; position:absolute; inset:-12%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 66%);
  filter:blur(40px); z-index:0;
}
.term{
  position:relative; z-index:1;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:rgba(13,14,16,.9); backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -46px #000;
  overflow:hidden;
}
.term__bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
/* squares, not traffic lights */
.term__bar i{ width:8px; height:8px; background:var(--line-3); }
.term__bar i:first-child{ background:var(--accent); }
.term__bar span{ margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.term__body{
  margin:0; padding:20px 20px 24px;
  font-family:var(--mono); font-size:12px; line-height:1.85;
  color:var(--text-2); overflow-x:auto;
}
.c-ok{ color:var(--text); }
.c-warn{ color:var(--accent); }
.c-mut{ color:var(--muted); }
.c-idle{ color:#4c5257; }
.caret{ color:var(--accent); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* ---------- CTA ---------- */
.cta{ position:relative; z-index:2; padding:clamp(56px,6.5vw,96px) 0; }
.cta__inner{
  position:relative;
  text-align:center;
  padding:clamp(52px,7vw,88px) clamp(24px,5vw,60px);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(var(--accent-rgb),.14), transparent 66%),
    rgba(16,17,19,.8);
  backdrop-filter:blur(14px);
  overflow:hidden;
}
/* the logo's solid bar, run full width across the top */
.cta__inner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--accent); z-index:2;
  box-shadow:0 0 24px rgba(var(--accent-rgb),.9);
}
/* a red highlight sweeping the border, slowly */
.cta__inner::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--a), transparent 0 62%, rgba(var(--accent-rgb),.9) 78%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ to{ --a:360deg; } }
.cta__inner > *{ position:relative; z-index:2; }
.cta__inner .eyebrow{ justify-content:center; }
.cta__inner .eyebrow::after{ display:none; }
.cta h2{ font-size:clamp(32px,5vw,60px); margin:24px 0 22px; }
.cta__lede{ color:var(--text-2); max-width:54ch; margin-inline:auto; font-size:clamp(15.5px,1.5vw,17.5px); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:36px 0 22px; }
.cta__note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- Journal: cards, index and article ---------- */
.sec-head--row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  max-width:none;
}
.sec-head--row .sec-title{ margin-bottom:0; }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.posts--index{ grid-template-columns:repeat(3,1fr); }

.post-card{
  display:flex; flex-direction:column;
  padding:22px 22px 20px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.post-card:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:0 24px 56px -30px #000; }
.post-card__img{
  margin:-22px -22px 20px; aspect-ratio:16/9; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--bg-3);
}
.post-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.post-card:hover .post-card__img img{ transform:scale(1.04); }
.post-card__meta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.post-card h3{ font-size:19px; margin-bottom:10px; }
.post-card p{ color:var(--text-2); font-size:14px; flex:1; margin-bottom:18px; }
.post-card__more{ font-size:13px; font-weight:600; color:var(--text); display:inline-flex; gap:8px; }
.post-card:hover .post-card__more{ color:var(--accent); }

.page{ position:relative; z-index:2; padding:calc(var(--nav-h) + 44px) 0 clamp(60px,7vw,96px); }
.page__head{ margin-bottom:clamp(32px,4vw,52px); }
.state{ color:var(--muted); font-family:var(--mono); font-size:13px; padding:40px 0; }
.state a{ color:var(--accent); }

.article{ max-width:760px; }
.article__back{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:34px;
}
.article__back:hover{ color:var(--accent); }
.article .eyebrow{ margin-bottom:20px; }
.article__title{ font-size:clamp(32px,5vw,52px); letter-spacing:-.03em; margin-bottom:20px; }
.article__lede{ color:var(--text-2); font-size:clamp(16px,1.7vw,19px); margin-bottom:24px; }
.article__by{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding-bottom:28px; margin-bottom:34px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.article__by em{ font-style:normal; padding:4px 10px; border:1px solid var(--line); }
.article__cover{ margin-bottom:38px; border:1px solid var(--line); overflow:hidden; }
.article__foot{ margin-top:48px; }

.prose{ font-size:16.5px; line-height:1.78; color:var(--text-2); }
.prose h1,.prose h2,.prose h3,.prose h4{ color:var(--text); margin:38px 0 14px; }
.prose h1{ font-size:30px; } .prose h2{ font-size:25px; }
.prose h3{ font-size:20px; } .prose h4{ font-size:17px; }
.prose p{ margin:0 0 20px; }
.prose ul,.prose ol{ margin:0 0 20px; padding-left:24px; }
.prose ul{ list-style:square; } .prose ol{ list-style:decimal; }
.prose li{ margin-bottom:9px; }
.prose li::marker{ color:var(--accent); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--text); font-weight:600; }
.prose code{ font-family:var(--mono); font-size:14px; background:var(--bg-3); border:1px solid var(--line); padding:2px 6px; }
.prose pre{
  background:var(--bg-2); border:1px solid var(--line); border-left:2px solid var(--accent);
  padding:20px; overflow-x:auto; margin:0 0 22px;
}
.prose pre code{ background:none; border:0; padding:0; font-size:13px; line-height:1.7; }
.prose blockquote{
  border-left:2px solid var(--accent); padding-left:22px; margin:0 0 22px;
  color:var(--text); font-size:18px;
}
.prose img{ width:100%; border:1px solid var(--line); margin:0 0 22px; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:38px 0; }

@media (max-width:1080px){ .posts,.posts--index{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){
  .posts,.posts--index{ grid-template-columns:1fr; }
  .sec-head--row{ flex-direction:column; align-items:flex-start; gap:22px; }
}


/* ---------- Product filter chips ---------- */
.pfilters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 22px;
}
.fchip{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.fchip b{ font-weight:500; color:var(--muted); }
.fchip:hover{ color:var(--text-2); border-color:var(--line-2); }
.fchip.is-on{ color:var(--text); border-color:var(--line-2); background:var(--surface-2); }
.fchip.is-on b{ color:var(--accent); }

/* Filtered-out cards collapse out of the grid rather than leaving holes. */
.pcard.is-hidden{ display:none; }

/* the card's action is a button now, so undo the UA button styling */
button.pcard__link{
  background:none; border:0; padding:0;
  font-family:inherit; text-align:left; cursor:pointer;
}

/* ---------- Product detail sheet ---------- */
.sheet{
  position:fixed; inset:0; z-index:200;
  display:flex; justify-content:flex-end;
}
.sheet[hidden]{ display:none; }
.sheet__scrim{
  position:absolute; inset:0;
  background:rgba(4,5,6,.72); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease);
}
.sheet.is-open .sheet__scrim{ opacity:1; }

.sheet__panel{
  position:relative;
  width:min(680px,100%); height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-2);
  border-left:1px solid var(--line-2);
  border-top:3px solid var(--accent);
  box-shadow:-40px 0 100px -40px #000;
  transform:translateX(24px); opacity:0;
  transition:transform .34s var(--ease-out), opacity .34s var(--ease);
}
.sheet.is-open .sheet__panel{ transform:none; opacity:1; }
/* A flex column: the bar stays put, only the body scrolls. Sticky +
   float would have worked until the content was short. */
.sheet__bar{
  flex:none; display:flex; justify-content:flex-end;
  padding:14px; border-bottom:1px solid var(--line);
}

.sheet__close{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg-3); color:var(--text-2);
  font-size:17px; line-height:1;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.sheet__close:hover{ color:var(--accent); border-color:var(--accent); }

.sheet__body{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(26px,4vw,44px);
}

.sheet__head{ display:flex; gap:20px; align-items:flex-start; margin-bottom:26px; }
.sheet__icon{
  width:56px; height:56px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--glass); color:var(--accent);
}
.sheet__icon svg{ width:26px; height:26px; }
.sheet__head .chip{ margin-bottom:12px; }
.sheet__head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:6px; }
.sheet__kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.sheet__lede{ color:var(--text-2); font-size:16px; line-height:1.75; margin-bottom:28px; }

.sheet__metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.sheet__metrics li{
  padding:16px 16px 16px 0;
  border-left:1px solid var(--line); padding-left:16px;
  display:flex; flex-direction:column; gap:5px;
}
.sheet__metrics li:first-child{ border-left:0; padding-left:0; }
.sheet__metrics b{ font-family:var(--display); font-size:19px; font-weight:500; color:var(--text); }
.sheet__metrics span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

.sheet__block{ margin-bottom:30px; }
.sheet__block h3{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.sheet__list{ display:flex; flex-direction:column; gap:11px; }
.sheet__list li{
  position:relative; padding-left:20px;
  color:var(--text-2); font-size:14.5px; line-height:1.6;
}
.sheet__list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; background:var(--accent);
}
.sheet__chips{ display:flex; flex-wrap:wrap; gap:7px; }
.sheet__chips li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-2); padding:5px 11px; border:1px solid var(--line);
}
.sheet__text{ color:var(--text-2); font-size:14.5px; }
.sheet__cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }

.sheet__foot{
  display:flex; flex-wrap:wrap; gap:10px;
  padding-top:26px; border-top:1px solid var(--line);
}

@media (max-width:680px){
  .sheet__panel{ width:100%; border-left:0; }
  .sheet__cols{ grid-template-columns:1fr; gap:0; }
  .sheet__head{ gap:14px; }
  .sheet__foot .btn{ width:100%; justify-content:center; }
}


/* ============================================================
   App band
   Full bleed on purpose. Every other section lives inside a
   1220px shell; this one breaks out, which is the whole point —
   the page needs one moment that opens up instead of sitting in
   the same column.
   ============================================================ */
.appband{
  position:relative; z-index:2;
  padding:clamp(80px,9vw,132px) 0;
  overflow:hidden;
  border-block:1px solid var(--line);
  background:
    radial-gradient(1200px 700px at 84% 12%, rgba(var(--accent-rgb),.20), transparent 66%),
    linear-gradient(180deg, #0e0f11, #131417 55%, #0e0f11);
}
.appband__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(ellipse 90% 80% at 70% 20%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 70% 20%, #000, transparent 75%);
}
.appband__bloom{
  position:absolute; top:-25%; right:-10%; width:60%; aspect-ratio:1;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.28), transparent 62%);
  filter:blur(60px);
}

.appband__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,90px); align-items:center;
}

.appband__title{
  font-size:clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-.03em;
  margin:24px 0 22px;
}
.appband__lede{ color:var(--text-2); font-size:clamp(15.5px,1.5vw,17.5px); max-width:52ch; }

.appband__ticks{ display:flex; flex-direction:column; gap:13px; margin:30px 0 36px; }
.appband__ticks li{
  position:relative; padding-left:24px;
  font-size:15px; color:var(--text-2);
}
.appband__ticks li::before{
  content:""; position:absolute; left:0; top:8px;
  width:8px; height:8px; background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.8);
}

.badges{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{
  display:inline-flex; align-items:center; gap:12px;
  padding:11px 20px 11px 17px; border-radius:6px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .3s var(--ease-out);
}
.badge:hover{ border-color:var(--line-3); background:rgba(255,255,255,.09); transform:translateY(-2px); }
.badge__logo{ width:26px; height:26px; flex:none; }
.badge__text{ display:flex; flex-direction:column; line-height:1.15; }
.badge__text small{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.badge__text b{ font-family:var(--display); font-size:16.5px; font-weight:500; letter-spacing:-.01em; }
.appband__note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-top:22px;
}

/* ---------- the phones ---------- */
.phones{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(440px,46vw,620px);
  perspective:1600px;
}
.phone{
  --w: clamp(190px, 17vw, 244px);
  position:absolute;
  width:var(--w); aspect-ratio:9/19.5;
  border-radius:calc(var(--w) * .13);
  background:#050506;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6);
  overflow:hidden;
  transition:transform .6s var(--ease-out);
}
.phone__screen{
  position:absolute; inset:5px;
  border-radius:calc(var(--w) * .11);
  background:#0e0f12;
  overflow:hidden;
}
.phone--left  { transform:translateX(-62%) translateY(6%)  rotate(-9deg) scale(.9);  z-index:1; }
.phone--right { transform:translateX(62%)  translateY(10%) rotate(9deg)  scale(.88); z-index:1; }
.phone--main  { transform:translateY(-4%); z-index:3; --w:clamp(206px,18.5vw,268px); }
.phones:hover .phone--left { transform:translateX(-70%) translateY(4%)  rotate(-11deg) scale(.92); }
.phones:hover .phone--right{ transform:translateX(70%)  translateY(8%)  rotate(11deg)  scale(.9); }
.phones:hover .phone--main { transform:translateY(-7%); }

/* ---------- the mock UI inside ---------- */
.ui{
  height:100%; display:flex; flex-direction:column;
  padding:9px 11px 11px; gap:9px;
  font-family:var(--font); font-size:8px; color:var(--text);
}
.ui__bar{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:7px; color:var(--muted); padding:2px 2px 0; }
.ui__bar i{ width:16px; height:5px; border:1px solid var(--line-3); border-radius:1px; }
.ui__head{ display:flex; align-items:baseline; justify-content:space-between; padding-top:3px; }
.ui__head b{ font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:-.02em; }
.ui__head span{ font-family:var(--mono); font-size:6.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }

.ui__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ui__tiles div{ padding:8px; border:1px solid var(--line); border-radius:3px;
  background:rgba(255,255,255,.03); display:flex; flex-direction:column; gap:2px; }
.ui__tiles b{ font-family:var(--display); font-size:12px; font-weight:500; }
.ui__tiles span{ font-family:var(--mono); font-size:6px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }

.ui__rows{ display:flex; flex-direction:column; gap:5px; }
.ui__row{ display:flex; align-items:center; gap:7px;
  padding:7px 8px; border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.02); }
.ui__row i{ width:5px; height:5px; flex:none; border:1px solid var(--line-3); }
.ui__row i.ok{ background:var(--accent); border-color:var(--accent); }
.ui__row b{ flex:1; font-weight:500; font-size:8px; }
.ui__row span{ font-family:var(--mono); font-size:6.5px; color:var(--muted); }

.ui__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  font-family:var(--mono); font-size:6px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); text-align:center; }
.ui__cal{ flex:1; display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr; gap:4px; }
.ev{ border-radius:3px; padding:5px 5px 4px; font-size:7px; font-weight:500;
  display:flex; flex-direction:column; gap:1px; border:1px solid; }
.ev em{ font-style:normal; font-family:var(--mono); font-size:5.5px; opacity:.7; }
.ev--1{ grid-column:1; grid-row:1/3; background:rgba(var(--accent-rgb),.18); border-color:rgba(var(--accent-rgb),.5); color:#ffb3ad; }
.ev--2{ grid-column:2; grid-row:1;   background:rgba(255,255,255,.07); border-color:var(--line-2); }
.ev--3{ grid-column:3; grid-row:1/4; background:rgba(255,255,255,.05); border-color:var(--line-2); }
.ev--4{ grid-column:2; grid-row:2;   background:rgba(255,255,255,.07); border-color:var(--line-2); }
.ev--5{ grid-column:1/3; grid-row:3; background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.35); color:#ffb3ad; }
.ui__cta{ text-align:center; padding:8px; border-radius:3px;
  background:var(--text); color:var(--bg); font-weight:600; font-size:8px; }

.ui__lines{ display:flex; flex-direction:column; gap:6px; flex:1; padding-top:2px; }
.ui__lines div{ display:flex; justify-content:space-between; align-items:center;
  font-size:7.5px; color:var(--text-2); }
.ui__lines b{ color:var(--text); font-weight:500; }
.ui__lines .tax{ font-family:var(--mono); font-size:6.5px; color:var(--muted); }
.ui__lines .tax b{ color:var(--muted); font-weight:400; }
.ui__total{ display:flex; justify-content:space-between; align-items:baseline;
  padding-top:8px; border-top:1px solid var(--line-2); }
.ui__total span{ font-family:var(--mono); font-size:6.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.ui__total b{ font-family:var(--display); font-size:15px; font-weight:500; }
.ui__pay{ text-align:center; padding:8px; border-radius:3px;
  background:var(--accent); color:#fff; font-weight:600; font-size:8px; }

@media (max-width:1080px){
  .appband__inner{ grid-template-columns:1fr; gap:clamp(48px,7vw,72px); }
  .phones{ min-height:clamp(400px,58vw,520px); order:2; }
  .phone{ --w:clamp(180px,24vw,220px); }
  .phone--main{ --w:clamp(196px,26vw,240px); }
}
@media (max-width:680px){
  .appband{ padding:clamp(64px,10vw,88px) 0; }
  .phone{ --w:150px; }
  .phone--main{ --w:166px; }
  .phone--left { transform:translateX(-52%) translateY(6%) rotate(-9deg) scale(.9); }
  .phone--right{ transform:translateX(52%)  translateY(9%) rotate(9deg)  scale(.88); }
  .phones{ min-height:380px; }
  .badges{ flex-direction:column; }
  .badge{ justify-content:center; }
}

/* ---------- Footer ---------- */
.footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding-top:clamp(52px,6vw,72px); }
.footer__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px);
  padding-bottom:clamp(40px,5vw,56px);
}
.footer__brand p{ color:var(--muted); font-size:13.5px; max-width:34ch; margin-top:20px; }
.footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__col h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); margin-bottom:8px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.footer__col a{ font-size:14px; color:var(--muted); transition:color .25s var(--ease), transform .25s var(--ease-out); width:fit-content; }
.footer__col a:hover{ color:var(--text); transform:translateX(3px); }
.footer__bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-block:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.footer__legal{ display:flex; gap:22px; }
.footer__legal a:hover{ color:var(--text); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .blueprint{ width:min(560px,68vw); right:-14%; opacity:.55; }
  .floater--a{ right:12%; } .floater--c{ right:6%; }
  .products{ grid-template-columns:repeat(4,1fr); }
  .pcard, .pcard--wide{ grid-column:span 2; }
  .caps-wrap{ grid-template-columns:1fr; }
  .caps-wrap .sec-head{ position:static; margin-bottom:40px; }
  .pipe{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .brand{ --brand-h:32px; }
}
@media (max-width:900px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .group{ grid-template-columns:1fr; }
  .blueprint{ top:14%; right:-32%; width:min(520px,96vw); opacity:.3; }
  .floaters{ display:none; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
  .hero__stats li:nth-child(3){ border-left:0; padding-left:0; }
  .step{ grid-template-columns:auto 1fr; }
  .step em{ grid-column:2; justify-self:start; margin-top:16px; }
}
@media (max-width:680px){
  .brand{ --brand-h:28px; }
  .brand__text i{ display:none; }
  .nav__actions .btn--primary{ display:none; }

  .products{ grid-template-columns:1fr; }
  .pcard, .pcard--wide{ grid-column:span 1; }
  .caps{ grid-template-columns:1fr; }
  .cap{ border-right:0; border-bottom:1px solid var(--line); }
  .cap:last-child{ border-bottom:0; }
  .pipe{ grid-template-columns:1fr; }
  .pipe__head{ position:static; }
  /* stacking cards need room to breathe on a short screen */
  .step{ position:static; grid-template-columns:1fr; gap:14px; }
  .step em{ grid-column:1; margin-top:0; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 40px) 0 56px; }
  .hero__stats{ grid-template-columns:1fr 1fr; }
  .hero__stats li{ padding:20px 16px; }
  .hero__stats li:nth-child(3){ border-left:0; padding-left:16px; }
  .btn--lg{ width:100%; justify-content:center; }
  .hero__cta{ flex-direction:column; }
  .cta__actions .btn{ width:100%; justify-content:center; }
}