:root{
  /* LineXa brand, sampled from assets/logo.png: navy lettering, blue-to-orange flame */
  --navy:#1A2B53; --blue:#1F7AC0; --blue-deep:#155A9A; --orange:#E8701A;
  --bg:#F7F5F0; --surface:#FFFFFF; --surface-2:#F1F5FA;
  --border:#DCE3EC; --border-2:#C3CEDC;
  --accent:var(--blue); --accent-glow:rgba(31,122,192,.12); --accent-2:var(--orange);
  --success:#00A882; --warning:#D4820A; --danger:#D63250;
  --text:var(--navy); --text-muted:#56627A; --text-dim:#8A94A8;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --ui:'Inter', system-ui, sans-serif;
  --display:'Montserrat', 'Inter', system-ui, sans-serif;
  --r:14px; --r-sm:10px;
  --webapp:#3A6BDB; --api:#7B6EF7; --database:#00D2A8; --cache:#F7A54F; --cron:#4FC9F7; --firewall:#F97316;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--border-2) 1px, transparent 1px);
  background-size:26px 26px; opacity:.55;
}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px}
h1,h2,h3{text-wrap:balance; margin:0}
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.lede{font-size:17px; line-height:1.65; color:var(--text-muted); max-width:640px}
.mono{font-family:var(--mono)}
section{padding-top:88px; padding-bottom:0}
/* The last section keeps its bottom space so it doesn't sit on the footer border */
section:last-of-type{padding-bottom:88px}
@media (max-width:720px){ section{padding-top:56px} section:last-of-type{padding-bottom:56px} .wrap{padding-inline:18px} }

/* ---------- nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(247,245,240,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:28px; padding-block:14px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-weight:700; font-size:14px; flex-shrink:0; text-decoration:none}
.brand-mark{
  width:26px; height:26px; border-radius:7px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{width:14px; height:14px}
.nav-links{display:flex; gap:22px; flex:1}
.nav-links a{
  font-size:13px; font-weight:500; color:var(--text-muted); text-decoration:none;
  transition:color .15s; padding-block:4px; border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--accent); font-weight:700; border-bottom-color:var(--accent)}
.btn{
  font-family:var(--ui); font-size:13px; font-weight:600; cursor:pointer;
  border-radius:var(--r-sm); padding:9px 18px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(31,122,192,.28)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(31,122,192,.4)}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:820px){ .nav-links{display:none} }

/* ---------- hero (home) ---------- */
.hero{padding-top:76px; padding-bottom:40px}
.hero h1{
  font-size:clamp(34px, 6vw, 62px); line-height:1.06; font-weight:800;
  letter-spacing:-.03em; margin-bottom:22px;
}
.hero h1 .accent{color:var(--accent)}
.hero h1 .accent2{color:var(--accent-2)}
.hero .lede{font-size:18px; margin-bottom:32px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:64px}
.btn-lg{padding:13px 24px; font-size:14px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; margin-bottom:64px}
.hero-grid h1{font-size:clamp(34px, 4.6vw, 56px)}
.hero-grid .hero-ctas{margin-bottom:0}
.hero-art svg{display:block; width:100%; height:auto}
.art-lbl{font-family:var(--mono); font-size:11px; font-weight:600; fill:var(--text-muted)}
.art-ok{fill:var(--success)}
.art-sm{font-size:9.5px}
.wire{stroke:var(--accent); stroke-width:1.6; stroke-dasharray:5 5; animation:wire-flow 1s linear infinite}
.wire-ok{stroke:var(--success)}
.live-dot{animation:blink 1.6s step-end infinite}
@keyframes wire-flow{ to{ stroke-dashoffset:-10 } }
@media (prefers-reduced-motion: reduce){ .wire, .live-dot{animation:none} }
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-art{max-width:460px; width:100%; margin-inline:auto} }

/* ---------- reveal-on-load (hero headline) ---------- */
.reveal{
  display:block; opacity:0; transform:translateY(16px);
  animation:reveal-up .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--d, 0s);
}
@keyframes reveal-up{ to{ opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion: reduce){ .reveal{ animation:none; opacity:1; transform:none } }

/* ---------- rotating word ---------- */
.rotator{display:inline-block; font-weight:800}
.rotator.rotate-out{animation:rotate-out .26s ease forwards}
.rotator.rotate-in{animation:rotate-in .34s cubic-bezier(.2,.8,.2,1)}
@keyframes rotate-out{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes rotate-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion: reduce){ .rotator.rotate-out, .rotator.rotate-in{ animation:none } }

/* ---------- typewriter (hero headline) ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* The invisible sizer holds the longest phrase so the headline never reflows while typing */
.typer-wrap{display:inline-grid}
.typer-sizer, .typer-line{grid-area:1 / 1}
.typer-sizer{visibility:hidden}
.typer-caret{display:inline-block; width:.07em; height:.9em; margin-left:.06em; background:currentColor; vertical-align:-.08em; animation:blink 1s step-end infinite}
@media (prefers-reduced-motion: reduce){ .typer-caret{animation:none} }

/* ---------- rotator section (home) ---------- */
.rotator-section{padding-top:64px}
.rotator-section .eyebrow{display:block; margin-bottom:14px}
.rotator-section h2{
  font-size:clamp(28px,5vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.15;
  margin-bottom:16px;
}
.rotator-section h2 .rotator{min-width:1ch}
.rotator-section p{font-size:15px; color:var(--text-muted); max-width:480px; margin:0 0 22px; line-height:1.6}
.rot-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.blocks-art{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.batile{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:16px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.batile.on{border-color:var(--c); transform:translateY(-4px); box-shadow:0 12px 26px -14px var(--c)}
@media (max-width:880px){ .rot-grid{grid-template-columns:1fr; gap:36px} }
@media (max-width:480px){ .blocks-art{grid-template-columns:repeat(2,1fr)} }

/* ---------- feature sections: copy + illustration (home) ---------- */
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.feature-copy h2{font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; margin-top:10px; margin-bottom:14px}
.feature-copy > p{font-size:15px; color:var(--text-muted); line-height:1.65; margin:0 0 18px}
.feature-copy .build-list{margin-bottom:24px}
@media (max-width:880px){
  .feature-grid{grid-template-columns:1fr; gap:36px}
  .feature-flip .feature-copy{order:-1}
}

.bp-art{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 20px 50px -24px rgba(30,50,120,.25); overflow:hidden;
}
.bp-head{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border)}
.bp-icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  background:var(--accent-glow); border:1px solid var(--accent); color:var(--accent);
}
.bp-icon svg{width:17px; height:17px}
.bp-head b{display:block; font-family:var(--mono); font-size:14px}
.bp-head small{display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px}
.bp-body{padding:18px 20px 20px}
.bp-label{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin:0 0 8px}
.bp-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px}
.bp-chips span{
  font-size:12px; font-weight:600; padding:6px 11px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  transition:background .25s, border-color .25s, color .25s;
}
.bp-chips span.on{background:var(--accent-glow); border-color:var(--accent); color:var(--accent)}
.bp-out{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px; border-radius:var(--r-sm); background:var(--surface-2); border:1px dashed var(--border-2)}
.bp-nodes{display:flex; flex-wrap:wrap; gap:6px; min-height:28px}
.bp-node{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:700;
  padding:5px 9px; border-radius:6px; background:var(--surface); border:1.5px solid var(--c);
  animation:bp-pop .35s cubic-bezier(.2,.9,.3,1.3) backwards; animation-delay:var(--d, 0s);
}
.bp-node::before{content:''; width:8px; height:8px; border-radius:2px; background:var(--c)}
@keyframes bp-pop{ from{ opacity:0; transform:scale(.6) } }
.bp-cost{font-family:var(--mono); font-size:13px; font-weight:700}
@media (prefers-reduced-motion: reduce){ .bp-node{animation:none} }

.upm-art .json-panel{box-shadow:0 20px 50px -24px rgba(30,50,120,.25)}
.upm-art .json-body{font-size:11px}
.upm-art .json-body > div{white-space:nowrap; border-radius:4px; padding-inline:4px; margin-inline:-4px; transition:background .25s}
.upm-line.on{background:var(--accent-glow)}
.upm-outs{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.upm-chip{
  display:flex; align-items:center; gap:7px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border); font-family:var(--mono); font-size:11px;
  transition:border-color .25s, box-shadow .25s;
}
.upm-chip.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow)}
.upm-dot{width:8px; height:8px; border-radius:2px; flex-shrink:0}
.upm-name{font-weight:700}
.upm-arrow{color:var(--text-dim)}
.upm-svc{color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:480px){ .upm-outs{grid-template-columns:1fr} }

/* ---------- environments illustration (getting started) ---------- */
.env-art{display:flex; flex-direction:column; gap:0}
.env-lane{
  background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:12px 14px;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.env-lane.on{border-color:var(--c); box-shadow:0 14px 30px -18px var(--c); transform:translateX(6px)}
.env-lane-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.env-tag{
  position:relative; overflow:hidden; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  color:var(--c); border:1px solid var(--c); border-radius:99px; padding:3px 10px;
}
.env-tag::before{content:''; position:absolute; inset:0; background:var(--c); opacity:.1}
.env-proj{font-family:var(--mono); font-size:10.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.env-lane-body{display:flex; align-items:center; justify-content:space-between; gap:10px}
.env-key{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--text-muted); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.env-key svg{width:14px; height:14px; flex-shrink:0; color:var(--c)}
.env-nodes{display:flex; gap:5px; flex-shrink:0}
.env-nodes i{width:14px; height:14px; border-radius:4px; background:var(--n)}
.env-nodes .env-fw{border-radius:50% 50% 45% 45%}
.env-wall{
  display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 0;
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
  background:repeating-linear-gradient(90deg, transparent 0 8px, var(--border) 8px 9px) center / 100% 1px no-repeat;
}
.env-wall svg{width:13px; height:13px; padding:0 0; background:var(--bg); box-shadow:0 0 0 4px var(--bg)}
.env-guard{
  display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border-radius:var(--r-sm);
  font-size:12px; font-weight:600; color:var(--firewall); background:var(--surface); border:1px dashed var(--firewall);
}
.env-guard svg{width:15px; height:15px; flex-shrink:0}
@media (prefers-reduced-motion: reduce){ .env-lane{transition:none} .env-lane.on{transform:none} }
.env-list li b{color:var(--c)}
.feature-copy .safety-row{margin-top:4px}

/* ---------- company page ---------- */
.mission-art{display:flex; flex-direction:column; align-items:center; gap:14px}
.mess{
  position:relative; width:100%; height:190px; border-radius:14px;
  background:var(--surface); border:1px dashed var(--border-2); overflow:hidden;
}
.mess-tile{
  position:absolute; transform:rotate(var(--r)); font-family:var(--mono); font-size:11.5px; font-weight:600;
  color:var(--c); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:5px 9px;
  white-space:nowrap; animation:mess-drift 5s ease-in-out infinite alternate;
}
.mess-tile:nth-child(even){animation-duration:6.5s; animation-direction:alternate-reverse}
@keyframes mess-drift{ to{ transform:rotate(calc(var(--r) * -1)) translateY(-6px) } }
.mission-arrow{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff}
.mission-arrow svg{width:18px; height:18px}
.calm{
  width:100%; display:flex; align-items:center; justify-content:center; padding:26px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); box-shadow:0 20px 50px -26px rgba(30,50,120,.3);
}
.calm-node{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:700;
  padding:6px 10px; border-radius:7px; background:var(--surface); border:1.5px solid var(--c);
}
.calm-node::before{content:''; width:8px; height:8px; border-radius:2px; background:var(--c)}
.calm-wire{width:28px; height:2px; background:repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px); animation:dash 1s linear infinite}
@media (max-width:480px){ .calm-node{font-size:9.5px; padding:5px 7px} .calm-wire{width:12px} }

.eu-art svg{display:block; width:100%; max-width:360px; height:auto; margin:0 auto}
.eu-stars{transform-origin:160px 160px; animation:eu-spin 60s linear infinite}
@keyframes eu-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .mess-tile, .eu-stars, .calm-wire{animation:none} }

.tm-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:980px){ .tm-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .tm-grid{grid-template-columns:1fr} }
.tm-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.tm-card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 18px 40px -24px rgba(30,50,120,.35)}
/* Photo sits over a silhouette; if the image file is missing it removes itself and the silhouette shows */
.tm-photo{position:relative; aspect-ratio:1; background:linear-gradient(135deg, var(--accent-glow), rgba(232,112,26,.14))}
.tm-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.tm-fallback{position:absolute; left:50%; bottom:0; width:62%; transform:translateX(-50%); fill:var(--border-2)}
.tm-body{padding:16px 18px 18px}
.tm-body h3{font-size:16px; font-weight:700}
.tm-role{display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:4px 0 10px}
.tm-body p{font-size:13px; color:var(--text-muted); line-height:1.55; margin:0}

/* ---------- support page ---------- */
.sup-art{background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 22px 50px -26px rgba(30,50,120,.3)}
.sup-head{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--border)}
.sup-avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-family:var(--mono); font-size:12px; font-weight:700; flex-shrink:0}
.sup-head b{display:block; font-size:14px}
.sup-head small{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted)}
.sup-live{width:7px; height:7px; border-radius:50%; background:var(--success); animation:blink 1.6s step-end infinite}
.sup-badge{margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent); border:1.5px solid var(--accent); border-radius:99px; padding:4px 10px}
.sup-body{display:flex; flex-direction:column; gap:10px; padding:18px 16px 20px; background:var(--surface-2); min-height:250px}
.sup-msg{
  max-width:82%; font-size:13px; line-height:1.5; padding:10px 13px; border-radius:12px 12px 12px 4px;
  background:var(--surface); border:1px solid var(--border);
  animation:sup-in .4s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:var(--d, 0s);
}
.sup-msg.me{align-self:flex-end; background:var(--accent); border-color:var(--accent); color:#fff; border-radius:12px 12px 4px 12px}
.sup-typing{display:flex; gap:4px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--border); align-self:flex-start; animation:sup-in .4s backwards; animation-delay:var(--d, 0s)}
.sup-typing i{width:6px; height:6px; border-radius:50%; background:var(--text-dim); animation:sup-dot 1.2s ease-in-out infinite}
.sup-typing i:nth-child(2){animation-delay:.15s}
.sup-typing i:nth-child(3){animation-delay:.3s}
@keyframes sup-in{ from{ opacity:0; transform:translateY(8px) } }
@keyframes sup-dot{ 0%,60%,100%{ transform:none; opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .sup-msg, .sup-typing, .sup-typing i, .sup-live{animation:none} }

.ct-form{
  display:flex; flex-direction:column; gap:14px; padding:24px; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 22px 50px -26px rgba(30,50,120,.3);
}
.ct-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .ct-row{grid-template-columns:1fr} }
.ct-form label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim)}
.ct-form input, .ct-form select, .ct-form textarea{
  font-family:var(--ui); font-size:14px; color:var(--text); text-transform:none; letter-spacing:0; font-weight:400;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; resize:vertical;
  transition:border-color .15s, box-shadow .15s;
}
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow)}
.ct-form .btn{align-self:flex-start}
.ct-hint{font-size:11.5px; color:var(--text-dim)}
.feature-copy .build-list a{color:var(--accent); text-decoration:none}

.paris-art svg{display:block; width:100%; max-width:420px; height:auto; margin:0 auto}
.paris-pin{animation:pin-bob 2.4s ease-in-out infinite}
@keyframes pin-bob{ 50%{ transform:translateY(-6px) } }
.paris-seine{stroke-dasharray:12 8; animation:seine 3s linear infinite}
@keyframes seine{ to{ stroke-dashoffset:-40 } }
@media (prefers-reduced-motion: reduce){ .paris-pin, .paris-seine{animation:none} }

/* ---------- feature bullet list (home) ---------- */
.build-list{list-style:none; margin:0; padding:0}
.build-list li{display:grid; grid-template-columns:1fr auto; gap:2px 16px; padding-block:12px; border-top:1px solid var(--border)}
.build-list b{font-size:14.5px}
.build-list span{grid-column:1; font-size:13px; color:var(--text-muted)}
.build-list em{grid-column:2; grid-row:1 / span 2; align-self:center; font-style:normal; font-family:var(--mono); font-size:12px; font-weight:700}

/* ---------- page hero (sub-pages) ---------- */
.page-hero{padding-top:56px; padding-bottom:8px}
.page-hero h1{font-size:clamp(28px,5vw,44px); font-weight:800; letter-spacing:-.02em; margin-top:12px; margin-bottom:14px}
.page-hero p{font-size:16px; color:var(--text-muted); line-height:1.65; max-width:620px}
.crumb{font-family:var(--mono); font-size:11px; color:var(--text-dim)}
.crumb a{color:var(--text-dim); text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* mini canvas mockup */
.canvas-mock{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:36px 28px; box-shadow:0 20px 60px -20px rgba(30,50,120,.22);
  overflow:hidden;
}
.canvas-mock::before{
  content:''; position:absolute; inset:0; opacity:.7;
  background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:20px 20px;
}
.flow{position:relative; display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; min-height:190px}
.fnode{
  position:relative; z-index:2; width:150px; background:var(--surface);
  border:1.5px solid var(--border-2); border-radius:9px; padding:10px 12px;
  box-shadow:0 6px 18px -8px rgba(20,30,70,.18); flex-shrink:0;
}
.fnode .fh{display:flex; align-items:center; gap:7px; margin-bottom:7px}
.fnode .fdot{width:18px; height:18px; border-radius:5px; flex-shrink:0}
.fnode .fname{font-family:var(--mono); font-size:11px; font-weight:700}
.fnode .fmeta{font-family:var(--mono); font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em}
.fnode .fval{font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-top:1px}
.flink{
  width:46px; height:2px; background:repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px);
  flex-shrink:0; animation:dash 1s linear infinite;
}
@keyframes dash{ to{ background-position:-17px 0 } }
@media (max-width:720px){ .flink{width:2px; height:30px; background:repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 11px)} .flow{flex-direction:column} }
@media (prefers-reduced-motion: reduce){ .flink{animation:none} }

/* animated canvas demo (replaces .flow when motion is allowed) */
.cm-stage{position:relative; height:260px}
.cm-wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.cm-wire{fill:none; stroke:var(--accent); stroke-width:2; transition:opacity .3s}
.cm-wire.flow{stroke-dasharray:6 5; animation:cm-flow .8s linear infinite}
.cm-wire.out{opacity:0}
@keyframes cm-flow{ to{ stroke-dashoffset:-11 } }
.cm-node{
  position:absolute; width:150px; transform:translate(-50%,-50%) scale(.6); opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .25s, border-color .2s, box-shadow .2s;
}
.cm-node.in{transform:translate(-50%,-50%) scale(1); opacity:1}
.cm-node.sel{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow), 0 6px 18px -8px rgba(20,30,70,.18)}
.cm-node.out{transform:translate(-50%,-50%) scale(.5); opacity:0}
.cm-del{
  position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%;
  background:var(--danger); color:#fff; border:2px solid var(--surface); font-size:12px; line-height:1;
  display:grid; place-items:center; opacity:0; transform:scale(.4); transition:opacity .2s, transform .2s;
}
.cm-node.sel .cm-del{opacity:1; transform:scale(1)}
.cm-del.press{transform:scale(.75)}
.cm-cursor{
  position:absolute; left:0; top:0; z-index:5; width:18px; height:18px; pointer-events:none;
  transition:transform .75s cubic-bezier(.45,0,.2,1);
}
.cm-cursor svg{display:block; width:18px; height:18px; filter:drop-shadow(0 2px 3px rgba(20,30,70,.3))}
.cm-cursor::after{
  content:''; position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
}
.cm-cursor.click::after{animation:cm-click .45s ease-out}
@keyframes cm-click{ from{ opacity:1; transform:scale(.4) } to{ opacity:0; transform:scale(1.8) } }
.cm-toast{
  position:absolute; left:50%; bottom:0; z-index:6; transform:translate(-50%,8px); opacity:0;
  font-family:var(--mono); font-size:11px; font-weight:600; white-space:nowrap;
  background:var(--text); color:#fff; padding:6px 13px; border-radius:99px;
  transition:opacity .25s, transform .25s;
}
.cm-toast.show{opacity:1; transform:translate(-50%,0)}
@media (max-width:720px){
  .canvas-mock:has(.cm-stage){padding:24px 12px}
  .cm-node{width:92px; padding:7px 8px}
  .cm-node .fdot{width:12px; height:12px}
  .cm-node .fname{font-size:9.5px}
  .cm-node .fval{display:none}
}

/* ---------- section headers ---------- */
.shead{max-width:620px; margin-bottom:44px}
.shead h2{font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; margin-top:10px; margin-bottom:14px}
.shead p{font-size:15px; color:var(--text-muted); line-height:1.65}

/* ---------- tech strip (marquee of tool cards) ---------- */
.strip{
  overflow:hidden; padding-block:26px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Two identical sets side by side: shifting by -50% lands exactly on the copy, so the loop is seamless */
.strip-track{display:flex; width:max-content; animation:marquee 42s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-set{display:flex; gap:14px; padding-right:14px}
@keyframes marquee{ to{ transform:translateX(-50%) } }
.tcard{
  display:flex; align-items:center; gap:11px; flex-shrink:0;
  padding:11px 18px 11px 11px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 4px 14px -8px rgba(20,30,70,.18);
}
.tlogo{
  position:relative; width:38px; height:38px; border-radius:9px; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
}
.tlogo::before{content:''; position:absolute; inset:0; background:currentColor; opacity:.1}
.tlogo svg{position:relative; width:20px; height:20px}
.tname{display:block; font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap}
.tcap{display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .strip{-webkit-mask-image:none; mask-image:none}
  .strip-track{animation:none; width:auto; justify-content:center}
  .strip-set{flex-wrap:wrap; justify-content:center; padding-right:0}
  .strip-set[aria-hidden]{display:none}
}

/* ---------- steps timeline (how it works) ---------- */
/* Mobile first: rail on the left, card then visual stacked beside it.
   From 900px the rail moves to the centre and steps alternate sides. */
.timeline{list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:28px}
.timeline::before, .timeline::after{content:''; position:absolute; left:21px; top:22px; bottom:22px; width:2px; border-radius:2px}
.timeline::before{background:var(--border)}
/* --progress is driven by scroll so the rail fills as steps come into view */
.timeline::after{background:linear-gradient(180deg, var(--accent), var(--accent-2)); transform-origin:top; transform:scaleY(var(--progress, 1)); transition:transform .6s ease}
.tstep{position:relative; display:grid; grid-template-columns:44px 1fr; column-gap:22px; row-gap:12px; align-items:center}
.tstep-marker{
  grid-column:1; grid-row:1; align-self:start; position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:700;
  background:var(--surface); border:2px solid var(--border-2); color:var(--text-muted);
  transition:background .35s, border-color .35s, color .35s, box-shadow .35s;
}
.tstep.seen .tstep-marker{background:var(--c); border-color:var(--c); color:#fff; box-shadow:0 0 0 6px var(--bg)}
.tstep-card{
  grid-column:2; grid-row:1; position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 24px;
  box-shadow:0 10px 30px -22px rgba(20,30,70,.35);
  transition:border-color .2s, box-shadow .2s;
}
.tstep-card:hover{border-color:var(--c); box-shadow:0 16px 36px -22px rgba(20,30,70,.4)}
.tstep-visual{grid-column:2; grid-row:2}
.tstep-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.tstep-ico{position:relative; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--c); overflow:hidden; flex-shrink:0}
.tstep-ico::before{content:''; position:absolute; inset:0; background:currentColor; opacity:.12}
.tstep-ico svg{position:relative; width:17px; height:17px}
.tstep h3{font-size:18px; font-weight:700; margin-bottom:6px}
.tstep p{font-size:14px; color:var(--text-muted); line-height:1.6; margin:0}
.step-tag{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--c, var(--text-dim))}
@media (max-width:520px){
  .tstep{grid-template-columns:34px 1fr; column-gap:14px}
  .tstep-marker{width:34px; height:34px; font-size:11px}
  .timeline::before, .timeline::after{left:16px}
}

@media (min-width:900px){
  .timeline{gap:40px}
  .timeline::before, .timeline::after{left:calc(50% - 1px); top:40px; bottom:40px}
  .tstep{grid-template-columns:1fr 56px 1fr; column-gap:32px}
  .tstep-marker{grid-column:2; align-self:center; justify-self:center; width:52px; height:52px; font-size:13px}
  .tstep-card, .tstep-visual{grid-row:1}
  .tstep:nth-child(odd) .tstep-card{grid-column:1}
  .tstep:nth-child(odd) .tstep-visual{grid-column:3}
  .tstep:nth-child(even) .tstep-card{grid-column:3}
  .tstep:nth-child(even) .tstep-visual{grid-column:1}
  /* Small pointer from each card toward the centre rail */
  .tstep-card::after{
    content:''; position:absolute; top:50%; width:12px; height:12px; background:var(--surface);
    border:1px solid var(--border); transform:translateY(-50%) rotate(45deg); transition:border-color .2s;
  }
  .tstep:nth-child(odd) .tstep-card::after{right:-7px; border-left:0; border-bottom:0}
  .tstep:nth-child(even) .tstep-card::after{left:-7px; border-right:0; border-top:0}
  .tstep-card:hover::after{border-color:var(--c)}
  .tstep-visual{min-height:130px}
}

/* scroll reveal: card and visual slide in from their own side */
.timeline.js .tstep-card, .timeline.js .tstep-visual{opacity:0; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s}
.timeline.js .tstep-card{transform:translateY(18px)}
.timeline.js .tstep-visual{transform:translateY(18px); transition-delay:.12s}
@media (min-width:900px){
  .timeline.js .tstep:nth-child(odd) .tstep-card, .timeline.js .tstep:nth-child(even) .tstep-visual{transform:translateX(-32px)}
  .timeline.js .tstep:nth-child(even) .tstep-card, .timeline.js .tstep:nth-child(odd) .tstep-visual{transform:translateX(32px)}
}
.timeline.js .tstep.seen .tstep-card, .timeline.js .tstep.seen .tstep-visual{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .timeline.js .tstep-card, .timeline.js .tstep-visual{opacity:1; transform:none; transition:none}
  .tstep-marker, .timeline::after{transition:none}
}

/* per-step mini visuals */
.tstep-visual{
  position:relative; min-height:96px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:14px; overflow:hidden;
}
.tstep-visual::before{
  content:''; position:absolute; inset:0; opacity:.6;
  background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:14px 14px;
}
.tstep-visual > *{position:relative}
.sv-flow{display:flex; flex-direction:column; align-items:center}
.sv-node{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; font-weight:700;
  padding:4px 9px; border-radius:6px; background:var(--surface); border:1.5px solid var(--c);
}
.sv-node::before{content:''; width:7px; height:7px; border-radius:2px; background:var(--c)}
.sv-wire{width:2px; height:10px; background:repeating-linear-gradient(180deg, var(--accent) 0 3px, transparent 3px 6px)}
.sv-fields{display:flex; flex-direction:column; gap:7px; width:100%}
.sv-field{display:flex; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:6px; background:var(--surface); border:1px solid var(--border); font-size:11px}
.sv-field span{color:var(--text-dim); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em}
.sv-field b{font-family:var(--mono); font-size:11px}
.sv-term{
  width:100%; padding:10px 12px; border-radius:8px; background:#131A32;
  font-family:var(--mono); font-size:11px; line-height:1.8; color:#C9D3F5;
}
.sv-files{display:flex; align-items:center; gap:10px}
.sv-stack{display:flex; flex-direction:column; gap:6px}
.sv-file{font-family:var(--mono); font-size:10.5px; font-weight:700; padding:5px 9px; border-radius:6px; background:var(--surface); border:1px solid var(--border-2)}
.sv-arrow{font-family:var(--mono); color:var(--text-dim)}

/* ---------- terminal + json ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch}
@media (max-width:880px){ .split{grid-template-columns:1fr} }
.term{
  background:#0B1020; border-radius:14px; overflow:hidden; box-shadow:0 24px 60px -24px rgba(10,20,60,.35);
  display:flex; flex-direction:column;
}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:#131A32; border-bottom:1px solid #232B4A}
.term-dot{width:10px; height:10px; border-radius:50%}
.term-title{font-family:var(--mono); font-size:11px; color:#8B96C4; margin-left:8px}
.term-body{padding:18px 18px 22px; font-family:var(--mono); font-size:12.5px; line-height:1.85; overflow-x:auto}
.tl{white-space:pre}
.t-dim{color:#5B698F}
.t-ok{color:#4ADE9E}
.t-info{color:#8FB4FF}
.t-accent{color:#B9A6FF}
.cursor{display:inline-block; width:7px; height:14px; background:#8FB4FF; vertical-align:middle; animation:blink 1s step-end infinite}
@keyframes blink{ 50%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .cursor{animation:none} }

.json-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 20px 50px -24px rgba(30,50,120,.2); display:flex; flex-direction:column;
}
.json-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--border)}
.json-bar .fname{font-family:var(--mono); font-size:11px; color:var(--text-muted); font-weight:600}
.json-body{padding:16px 18px; font-family:var(--mono); font-size:11.5px; line-height:1.7; overflow-x:auto; color:var(--text-muted)}
.json-body .k{color:var(--accent)}
.json-body .s{color:var(--success)}
.json-body .n{color:var(--warning)}
.json-body .p{color:var(--text-dim)}

/* ---------- blocks grid ---------- */
/* ---------- component explorer (building blocks) ---------- */
.cx{padding-top:40px}
.cx-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.cx:not(.js) .cx-tabs{display:none}
.cx-tab{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border); border-radius:99px; padding:7px 14px 7px 8px;
  transition:border-color .2s, color .2s, background .2s;
}
.cx-tab:hover{border-color:var(--c); color:var(--text)}
.cx-tab.on{border-color:var(--c); color:var(--text)}
.cx-tico{position:relative; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:var(--c)}
.cx-tico::before{content:''; position:absolute; inset:0; border-radius:50%; background:currentColor; opacity:.14}
.cx-tico svg{position:relative; width:13px; height:13px}
/* The active tab's progress bar doubles as the rotation timer: its animationend advances to the next tab */
.cx-tab.on::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--c); transform-origin:left; animation:cx-timer 5.5s linear forwards}
.cx:hover .cx-tab.on::after, .cx:focus-within .cx-tab.on::after{animation-play-state:paused}
@keyframes cx-timer{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion: reduce){ .cx-tab.on::after{animation:none; transform:none} }

.cx-stage{display:flex; flex-direction:column; gap:48px}
.cx-item{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:56px; align-items:center}
.cx.js .cx-item{display:none}
.cx.js .cx-item.on{display:grid}
@media (max-width:880px){ .cx-item, .cx.js .cx-item.on{grid-template-columns:1fr; gap:32px} }

.cx-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 22px 50px -26px rgba(30,50,120,.3);
}
.cx-phead{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border)}
.cx-pico{position:relative; width:28px; height:28px; border-radius:6px; display:grid; place-items:center; color:var(--c); flex-shrink:0}
.cx-pico::before{content:''; position:absolute; inset:0; border-radius:6px; background:currentColor; opacity:.12}
.cx-pico svg{position:relative; width:15px; height:15px}
.cx-phead b{display:block; font-size:14px}
.cx-phead small{display:block; font-family:var(--mono); font-size:10px; color:var(--text-dim)}
.cx-pbody{padding:16px; display:flex; flex-direction:column; gap:14px}
.cx-field{display:flex; flex-direction:column; gap:6px}
.cx-label{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim)}
.cx-row{display:flex; gap:6px}
.cx-row > *{flex:1; min-width:0}
.cx-sub{display:flex; flex-direction:column; gap:4px}
.cx-sub small{font-family:var(--mono); font-size:9px; color:var(--text-dim)}
.cx-input{
  display:block; font-family:var(--mono); font-size:11.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 10px;
}
.cx-select{position:relative; padding-right:24px}
.cx-select::after{content:''; position:absolute; right:10px; top:50%; width:5px; height:5px; border-right:1.5px solid var(--text-dim); border-bottom:1.5px solid var(--text-dim); transform:translateY(-70%) rotate(45deg)}
.cx-opt{text-align:center; font-family:var(--mono); font-size:11px; font-weight:600; padding:6px 0; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted)}
.cx-opt.on{border-color:var(--c); color:var(--c); background:var(--surface)}
.cx-note{display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:var(--r-sm); background:var(--accent-glow); border:1px solid var(--border)}
.cx-note b{font-family:var(--mono); font-size:11px; color:var(--accent)}
.cx-note span{font-size:11.5px; color:var(--text-muted); line-height:1.5}
.cx-note.ok b{color:var(--success)}
.cx-note.warn b{color:var(--firewall)}
.cx-note code, .cx-auto code{font-family:var(--mono); font-size:.92em}
.cx-pfoot{padding:8px 16px; border-top:1px solid var(--border); font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c)}

/* Fields fill in one after another each time a component becomes active */
.cx.js .cx-item.on .cx-panel{animation:cx-panel .45s cubic-bezier(.2,.8,.2,1)}
.cx.js .cx-item.on .cx-field{animation:cx-field .4s ease backwards}
.cx.js .cx-item.on .cx-field:nth-child(2){animation-delay:.08s}
.cx.js .cx-item.on .cx-field:nth-child(3){animation-delay:.16s}
.cx.js .cx-item.on .cx-field:nth-child(4){animation-delay:.24s}
.cx.js .cx-item.on .cx-field:nth-child(5){animation-delay:.32s}
.cx.js .cx-item.on .cx-field:nth-child(6){animation-delay:.4s}
.cx.js .cx-item.on .cx-copy{animation:cx-copy .5s cubic-bezier(.2,.8,.2,1)}
@keyframes cx-panel{ from{ opacity:0; transform:translateX(-24px) } }
@keyframes cx-field{ from{ opacity:0; transform:translateY(6px) } }
@keyframes cx-copy{ from{ opacity:0; transform:translateX(24px) } }
@media (prefers-reduced-motion: reduce){ .cx.js .cx-item.on .cx-panel, .cx.js .cx-item.on .cx-field, .cx.js .cx-item.on .cx-copy{animation:none} }

.cx-copy h2{font-size:clamp(30px,5vw,46px); font-weight:800; letter-spacing:-.02em; color:color-mix(in srgb, var(--c) 78%, var(--text)); margin:8px 0 6px}
.cx-meta{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:14px}
.cx-meta b{color:var(--text)}
.cx-copy > p{font-size:15px; color:var(--text-muted); line-height:1.65; margin:0 0 22px; max-width:520px}
.cx-lists{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:520px){ .cx-lists{grid-template-columns:1fr} }
.cx-lists h4{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin:0 0 10px}
.cx-lists ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.cx-lists li{position:relative; padding-left:18px; font-size:13.5px; line-height:1.5}
.cx-lists li::before{content:''; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:2px; border:1.5px solid var(--c)}
.cx-auto li::before{background:var(--success); border-color:var(--success)}

/* ---------- modes ---------- */

/* ---------- envs ---------- */

.safety-row{display:flex; flex-wrap:wrap; gap:10px}
.safety-item{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:99px; padding:7px 14px;
}
.safety-item svg{width:13px; height:13px; color:var(--success); flex-shrink:0}

/* ---------- tech stack page ---------- */
.stackcat{margin-bottom:36px}
.stackcat h3{font-size:14px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.stackcat h3 .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.stackitems{display:flex; flex-wrap:wrap; gap:10px}
.stackitem{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:10px 16px; display:flex; flex-direction:column; gap:2px; min-width:140px;
}
.stackitem .siname{font-size:13px; font-weight:600}
.stackitem .sirole{font-family:var(--mono); font-size:10.5px; color:var(--text-dim)}

/* ---------- faq ---------- */
.faq-item{border-top:1px solid var(--border)}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:20px; cursor:pointer; background:none; border:none; width:100%; text-align:left;
  font-family:var(--ui); font-size:15.5px; font-weight:600; color:var(--text);
}
.faq-q .plus{
  font-family:var(--mono); font-size:16px; color:var(--accent); flex-shrink:0; transition:transform .2s;
  width:20px; text-align:center;
}
.faq-item[open] .faq-q .plus{transform:rotate(45deg)}
.faq-a{padding-bottom:20px; font-size:14px; color:var(--text-muted); line-height:1.7; max-width:680px}
details.faq-item summary{list-style:none}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-cat{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin:32px 0 4px}
.faq-cat:first-child{margin-top:0}

/* ---------- cta ---------- */
.cta-box{
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 55%, var(--orange) 125%);
  border-radius:20px; padding:56px 40px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.cta-box::before{
  content:''; position:absolute; inset:0; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size:22px 22px;
}
.cta-box h2{position:relative; font-size:clamp(24px,4vw,34px); font-weight:800; margin-bottom:12px; letter-spacing:-.02em}
.cta-box p{position:relative; font-size:15px; opacity:.88; max-width:520px; margin:0 auto 28px}
.cta-box .hero-ctas{position:relative; justify-content:center; margin-bottom:0}
.cta-box .btn-ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.22); border-color:#fff}
.cta-box .btn-primary{background:#fff; color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.15)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border); padding-block:36px}
.fgrid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.fnote{font-family:var(--mono); font-size:11px; color:var(--text-dim)}
.flinks{display:flex; gap:18px; flex-wrap:wrap}
.flinks a{font-size:12px; color:var(--text-muted); text-decoration:none}
.flinks a:hover{color:var(--accent)}

/* ---------- company home: product grid ---------- */
.products{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px}
.product-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:26px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:14px;
  color:inherit; text-decoration:none; transition:border-color .2s, transform .2s, box-shadow .2s;
}
a.product-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 30px -14px rgba(31,122,192,.45)}
.product-name{font-size:19px; font-weight:800; letter-spacing:-.01em}
.product-card p{font-size:14.5px; line-height:1.6; color:var(--text-muted)}
.product-link{margin-top:auto; font-size:13.5px; font-weight:600; color:var(--accent)}
.product-soon{border-style:dashed; background:transparent}

/* ---------- LineXa brand layer ---------- */
h1, h2, h3, .brand, .product-name, .cta-box h2 { font-family:var(--display) }
.eyebrow{font-family:var(--display); font-weight:700; color:var(--orange)}
.brand{font-weight:800; font-size:17px; letter-spacing:-.01em; color:var(--navy)}
.brand-name{white-space:nowrap; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--navy)}
footer .brand-name{font-size:16px}
.brand .x{color:var(--orange)}
.brand small{font-family:var(--ui); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-left:2px}
.brand-logo{width:32px; height:32px; object-fit:contain; flex-shrink:0}
footer .brand-logo{width:24px; height:24px}
/* Pill buttons echo the logo's rounded loops. */
.btn{border-radius:999px}
.btn-primary{background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%)}
.btn-accent{background:var(--orange); color:#fff; box-shadow:0 4px 14px rgba(232,112,26,.3)}
.btn-accent:hover{box-shadow:0 6px 20px rgba(232,112,26,.42)}
.tagline{font-family:var(--display); font-weight:600; font-size:clamp(17px, 2.2vw, 21px); color:var(--navy)}
.tagline .warm{color:var(--orange)}

/* company home */
.brand-hero{padding-top:72px; padding-bottom:24px}
.brand-hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center}
.brand-hero h1{font-size:clamp(34px, 5.4vw, 58px); line-height:1.08; font-weight:800; letter-spacing:-.02em; margin:14px 0 18px}
.brand-hero h1 .x{color:var(--orange)}
.brand-hero .lede{margin-top:14px}
.brand-hero .hero-ctas{margin-bottom:0}
footer .fnote{font-family:var(--display); font-weight:600; color:var(--text-muted)}
.brand-hero-art{position:relative; aspect-ratio:1; max-width:380px; justify-self:center; width:100%}
.brand-hero-art::before{
  content:''; position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(31,122,192,.18), transparent 60%),
             radial-gradient(circle at 70% 70%, rgba(232,112,26,.18), transparent 60%);
}
.brand-hero-art img{position:relative; width:100%; height:100%; object-fit:contain; padding:24%}
.pillars{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.pillars span{
  font-family:var(--display); font-weight:600; font-size:13px; color:var(--navy);
  padding:7px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border);
}
.services{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.service{
  padding:24px 22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  position:relative; overflow:hidden;
}
.service::before{content:''; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--blue), var(--orange))}
.service-ico{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--accent-glow); color:var(--blue); margin-bottom:14px}
.service:nth-child(even) .service-ico{background:rgba(232,112,26,.12); color:var(--orange)}
.service h3{font-size:17px; font-weight:700; margin-bottom:8px}
.service p{font-size:14px; line-height:1.6; color:var(--text-muted); margin:0}
@media (max-width:980px){ .services{grid-template-columns:1fr 1fr} }
@media (max-width:820px){ .brand-hero-grid{grid-template-columns:1fr} .brand-hero-art{max-width:240px} }
@media (max-width:520px){ .services{grid-template-columns:1fr} }

/* ---------- company home v3 ---------- */
.nav-links{justify-content:center}
.brand-logo-lg{width:44px; height:44px}
.hero-typer{font-family:var(--display); font-weight:800; font-size:clamp(26px, 3.6vw, 38px); color:var(--blue); letter-spacing:-.01em; margin-top:-4px}
.illo-loop{stroke-dasharray:10 8; animation:wire-flow 1.2s linear infinite}
.shead-center{margin-inline:auto; text-align:center}

.tech-strips{padding-top:36px}
.tmono{position:relative; font-family:var(--display); font-weight:800; font-size:13px; color:currentColor; letter-spacing:-.02em}

/* scroll-in animation for [data-slide] (site.js adds .in) */
.js [data-slide]{opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.js [data-slide].in{opacity:1; transform:none}

/* animated gradient border + live badge, shared by product cards */
@property --pang{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes pcard-spin{ to{ --pang:360deg } }
.pcard-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--success); background:rgba(0,168,130,.1); border-radius:999px; padding:4px 10px}
.pcard-badge i{width:7px; height:7px; border-radius:50%; background:var(--success); animation:blink 1.6s step-end infinite}
.pcard-lede{font-size:16px; line-height:1.65; color:var(--text-muted)}
.pnode{animation:pnode-float 4s ease-in-out infinite; animation-delay:calc(var(--i) * -1s)}
@keyframes pnode-float{ 50%{ transform:translateY(-4px) } }

/* services: S-curve timeline, content and phase pill alternate sides */
.stl{position:relative; max-width:1040px; margin:0 auto}
.stl-curve{position:absolute; left:50%; top:0; width:160px; height:100%; margin-left:-80px; overflow:visible}
.stl-curve path{stroke-dasharray:1; stroke-dashoffset:0}
.stl-row{display:grid; grid-template-columns:1fr 160px 1fr; height:170px; align-items:center}
.stl-side{display:flex; align-items:center; height:100%}
.stl-a{justify-content:flex-end}
.stl-b{justify-content:flex-start}
.stl-content{display:flex; align-items:center; gap:16px; max-width:380px}
.stl-left .stl-content{text-align:right; flex-direction:row-reverse}
.stl-content h3{font-size:20px; font-weight:800; color:var(--c); margin-bottom:6px}
.stl-content p{font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0}
.stl-ico{flex-shrink:0; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:var(--c); background:var(--surface); border:1px solid var(--border); box-shadow:0 10px 24px -18px rgba(26,43,83,.5)}
.stl-link{flex:1; min-width:28px; max-width:90px; height:2px; background:var(--c); opacity:.7}
.stl-left .stl-link{margin-left:16px; transform-origin:right}
.stl-right .stl-link{margin-right:16px; transform-origin:left}
.stl-pill{font-family:var(--display); font-weight:700; font-size:15px; color:#fff; background:var(--c); padding:9px 20px; border-radius:10px; box-shadow:0 10px 24px -14px var(--c); white-space:nowrap}
.stl-left .stl-pill{margin-left:34px}
.stl-right .stl-pill{margin-right:34px}
.stl-mid{position:relative; height:100%}
.stl-dot{position:absolute; top:50%; left:var(--x); width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:#fff; border:5px solid var(--c); z-index:1}
/* arm joins the dot to the edge of the middle column on the content side */
.stl-arm{position:absolute; top:50%; height:2px; margin-top:-1px; background:var(--c); opacity:.7}
.stl-left .stl-arm{left:0; width:var(--x); transform-origin:right}
.stl-right .stl-arm{left:var(--x); right:0; transform-origin:left}

.js .stl[data-slide]{opacity:1; transform:none}
/* The curve takes 1.6s; row n's dot is reached at about (n + .5) / 4 of it. */
.stl-row{--t:calc(var(--row) * .4s + .15s)}
.js .stl .stl-curve path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s linear}
.js .stl .stl-dot{transform:scale(0); transition:transform .4s cubic-bezier(.3,1.6,.5,1) var(--t)}
.js .stl .stl-arm, .js .stl .stl-link{transform:scaleX(0); transition:transform .35s ease calc(var(--t) + .2s)}
.js .stl .stl-content{opacity:0; transition:opacity .5s ease calc(var(--t) + .4s), transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--t) + .4s)}
.js .stl .stl-left .stl-content{transform:translateX(-36px)}
.js .stl .stl-right .stl-content{transform:translateX(36px)}
.js .stl .stl-pill{opacity:0; transform:scale(.85); transition:opacity .4s ease calc(var(--t) + .35s), transform .4s cubic-bezier(.3,1.5,.5,1) calc(var(--t) + .35s)}
.js .stl.in .stl-curve path{stroke-dashoffset:0}
.js .stl.in .stl-dot, .js .stl.in .stl-pill, .js .stl.in .stl-content{opacity:1; transform:none}
.js .stl.in .stl-arm, .js .stl.in .stl-link{transform:scaleX(1)}
@media (max-width:820px){
  .stl-curve{display:none}
  .stl::before{content:''; position:absolute; left:10px; top:0; bottom:0; width:4px; border-radius:4px; background:linear-gradient(var(--blue), var(--orange))}
  .stl-row{display:flex; flex-direction:column; align-items:flex-start; gap:10px; height:auto; position:relative; padding:18px 0 18px 42px}
  .stl-mid{position:absolute; left:0; top:0; bottom:0; width:24px}
  .stl-dot{left:12px}
  .stl-arm, .stl-link{display:none}
  .stl-side{display:block; height:auto; width:100%}
  .stl-left .stl-content, .stl-right .stl-content{flex-direction:row; text-align:left; max-width:none}
  .stl-pill{display:inline-block; margin:0 !important; font-size:13px; padding:6px 14px}
  .stl-left .stl-b{order:-1}
  .js .stl .stl-left .stl-content, .js .stl .stl-right .stl-content{transform:translateY(20px)}
}

/* products: bento grid, live product large, upcoming ones as teasers */
.bento{display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px; align-items:stretch}
.bento-main{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:24px; border-radius:22px; background:var(--surface); isolation:isolate;
  box-shadow:0 24px 60px -34px rgba(26,43,83,.45); transition:transform .3s;
}
.bento-main:hover{transform:translateY(-4px)}
.bento-main::before{
  content:''; position:absolute; inset:0; padding:2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--pang), var(--blue), var(--orange), var(--blue-deep), var(--blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:pcard-spin 6s linear infinite;
}
.bento-top{display:flex; align-items:center; gap:12px}
.bento-top .product-name{font-size:20px}
.bento-main .pcard-lede{font-size:14.5px; line-height:1.55}
.bento-main .pcard-lede{margin:0}
.bento-art{background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:12px; display:flex; justify-content:center}
.bento-art svg{display:block; width:auto; max-width:100%; height:190px}
.bento-tags{display:flex; gap:8px; flex-wrap:wrap}
.bento-tags span{font-size:12.5px; font-weight:600; color:var(--blue); background:var(--accent-glow); padding:5px 12px; border-radius:999px}
.bento-lab{
  position:relative; overflow:hidden; padding:24px; border-radius:22px;
  background:linear-gradient(160deg, rgba(31,122,192,.06), rgba(232,112,26,.06)); border:1px dashed var(--border-2);
  transition:transform .3s, border-color .3s;
}
.bento-lab:hover{transform:translateY(-3px); border-color:var(--orange)}
.bento-lab h3{font-size:18px; font-weight:800; margin:14px 0 6px}
.bento-lab p{font-size:14px; line-height:1.55; color:var(--text-muted); margin:0}
.lab-status{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--orange); background:rgba(232,112,26,.1); padding:4px 11px; border-radius:999px}
.lab-status i{width:7px; height:7px; border-radius:50%; background:currentColor; animation:blink 1.6s step-end infinite}
.lab-status-later{color:var(--blue); background:var(--accent-glow)}
.lab-ghost{display:grid; gap:8px; margin-top:18px}
.lab-ghost span{height:10px; border-radius:6px; background:linear-gradient(90deg, var(--border) 25%, var(--surface) 50%, var(--border) 75%); background-size:200% 100%; animation:lab-shimmer 1.8s linear infinite}
.lab-ghost span:nth-child(2){width:80%}
.lab-ghost span:nth-child(3){width:55%}
@keyframes lab-shimmer{ to{ background-position:-200% 0 } }
.bento-notify{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 24px; border-radius:18px; text-decoration:none; color:#fff;
  background:linear-gradient(120deg, var(--navy), var(--blue-deep) 60%, var(--orange) 140%);
  transition:transform .3s, box-shadow .3s;
}
.bento-notify:hover{transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(26,43,83,.7)}
.bento-notify-cta{font-weight:700; background:#fff; color:var(--navy); padding:8px 16px; border-radius:999px; font-size:13.5px}
.js .bento [data-slide]{transform:translateY(34px); transition-delay:var(--d, 0s)}
.js .bento [data-slide].in{transform:none}
@media (max-width:1000px){ .bento{grid-template-columns:1fr 1fr} .bento-main{grid-column:1 / -1} }
@media (max-width:640px){ .bento{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
  .js .stl .stl-curve path, .js .stl .stl-row *{transition:none !important; transform:none !important; opacity:1 !important; stroke-dashoffset:0 !important}
  .bento-main::before, .lab-ghost span, .lab-status i{animation:none}
}

/* They trust us */
.clients{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px}
.client{
  display:flex; align-items:center; justify-content:center; gap:10px; height:86px; padding:0 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  color:var(--text-dim); filter:grayscale(1); opacity:.8;
  font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.01em;
  transition:filter .3s, opacity .3s, color .3s, transform .3s, box-shadow .3s, border-color .3s;
  animation:client-in .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * .08s);
}
.client svg{width:28px; height:28px; flex-shrink:0}
.client:hover{filter:none; opacity:1; color:var(--c); border-color:var(--c); transform:translateY(-3px); box-shadow:0 14px 30px -20px var(--c)}
@keyframes client-in{ from{ opacity:0; transform:translateY(14px) } }

@media (prefers-reduced-motion: reduce){
  .js [data-slide]{opacity:1; transform:none; transition:none}
  .illo-loop, .pcard::before, .pnode, .pcard-badge i, .client{animation:none}
}