/* ─────────────────────────────────────────────────────────────────────
   Plexus home: the approved v6 design (layout + motion), Daiske palette.
   Tokens come from base.css (--ground, --ink, --accent ...); the local ones below
   map the prototype palette onto them. Everything is scoped to .home so
   tech.html / protocol.html (plexus.css) are untouched.
   Pinned scenes only exist under html.pinon (JS on, no reduced motion, > 820px);
   otherwise every scene is a normal, fully readable stacked block.
   ───────────────────────────────────────────────────────────────────── */
.home {
  --serif: var(--display);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --txt: #EEF0F3; --dim: rgba(238,240,243,.62);
  --bg: #12151A; --bg2: #1C2027; --bg3: #0E1115; --bg-net: #0B0E12; --bg-hero: #0E1115;
  --gold: #9DBDE6; --ember: #C3D7F0; --terra: #7FA6D6; --teal: #AEBBCB; --teal-ink: #E3E8EE;
  --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.18); --card: rgba(255,255,255,.035); --glass: rgba(18,21,26,.55);
  --btn-line: rgba(255,255,255,.28); --btn-hover-ink: #10151C;
  --rgb-gold: 157,189,230; --rgb-ember: 195,215,240; --rgb-teal: 174,187,203; --rgb-dot: 255,255,255;
  --vs-a: #232A34; --vs-b: #AEBBCB; --vs-ink: #DDE2E9;
  --a-dim: rgba(255,255,255,.34); --a-faint: rgba(255,255,255,.2); --a-text: #EEF0F3; --a-hot-text: #C3D7F0;
  --a-gold: #9DBDE6; --a-gold2: rgba(157,189,230,.33); --a-ember: #C3D7F0; --a-ember2: rgba(195,215,240,.33);
  --a-teal: #AEBBCB; --a-teal2: rgba(174,187,203,.33); --a-bg: #0B0E12;
  --uc-bg: transparent; --uc-ink: #EEF0F3; --uc-acc: #9DBDE6; --uc-panel: #171C24; --uc-line: rgba(255,255,255,.12);
  --uc-chip: rgba(255,255,255,.05); --uc-hover: rgba(255,255,255,.06); --uc-paper: #171C24; --uc-shadow: rgba(0,0,0,.5);
  background: var(--bg); color: var(--txt);
}
:root[data-theme="light"] .home {
  --txt: #14181F; --dim: rgba(20,24,31,.66);
  --bg: #F2F3F5; --bg2: #E6E8EC; --bg3: #FFFFFF; --bg-net: #E6E8EC; --bg-hero: #F2F3F5;
  --gold: #2C5C9A; --ember: #224A7E; --terra: #2C5C9A; --teal: #2E3A48; --teal-ink: #2E3A48;
  --line: rgba(20,24,31,.12); --line2: rgba(20,24,31,.22); --card: rgba(255,255,255,.7); --glass: rgba(255,255,255,.72);
  --btn-line: rgba(44,92,154,.6); --btn-hover-ink: #FFFFFF;
  --rgb-gold: 44,92,154; --rgb-ember: 34,74,126; --rgb-teal: 46,58,72; --rgb-dot: 70,80,95;
  --vs-a: #DDE5EC; --vs-b: #2E3A48; --vs-ink: #1E2A36;
  --a-dim: rgba(20,24,31,.42); --a-faint: rgba(20,24,31,.2); --a-text: #14181F; --a-hot-text: #224A7E;
  --a-gold: #2C5C9A; --a-gold2: rgba(44,92,154,.35); --a-ember: #224A7E; --a-ember2: rgba(34,74,126,.35);
  --a-teal: #2E3A48; --a-teal2: rgba(46,58,72,.35); --a-bg: #E6E8EC;
  --uc-bg: #E6E8EC; --uc-panel: #FFFFFF; --uc-ink: #14181F; --uc-acc: #2C5C9A; --uc-line: rgba(20,24,31,.13);
  --uc-chip: #FFFFFF; --uc-hover: rgba(20,24,31,.04); --uc-paper: #FFFFFF; --uc-shadow: rgba(20,30,60,.14);
}
.home main { display: block; overflow-x: clip; }
.home .serif, .home main h1, .home main h2, .home main h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.025em; }
.home main h4 { font-family: var(--body); }
.home main .eyebrow { display: block; font: 600 12px/1.3 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; }
.home main .eyebrow::before { display: none; }
.home main .big { font-size: clamp(38px, 6.6vw, 104px); line-height: 1.02; margin: 0; text-wrap: wrap; }
.home main .big .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.home main .big .w > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease); }
.home main .big.in .w > span { transform: none; }
.home main .lead { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: var(--txt); opacity: .85; max-width: 38em; margin: 22px 0 0; }
.home main a { color: inherit; }
.home main .btn {
  display: inline-flex; margin-top: 26px; min-height: 48px; padding: 16px 34px; border: 1px solid var(--btn-line); border-radius: 99px;
  color: var(--txt); background: transparent; font: 600 12px/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, color .3s, border-color .3s; box-shadow: none;
}
.home main .btn.primary { border-color: var(--gold); background: transparent; color: var(--txt); }
.home main .btn:hover, .home main .btn.primary:hover { background: var(--gold); border-color: var(--gold); color: var(--btn-hover-ink); }
.home main .btn .arrow { display: inline-block; }
.home main section { position: relative; }
.home .anchor { position: absolute; top: 0; right: 0; width: 1px; height: 1px; pointer-events: none; }

/* ═══ 1 · hero ═══════════════════════════════════════════════════════ */
.hero { min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); overflow: hidden; background: var(--bg-hero); display: flex; align-items: center; }
.hero #hcv { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; pointer-events: none; }
.o1 { width: 46vw; height: 46vw; right: -12vw; top: -14vw; background: var(--terra); animation: o1 22s ease-in-out infinite alternate; }
.o2 { width: 40vw; height: 40vw; left: -10vw; top: 10vh; background: var(--gold); opacity: .28; animation: o2 26s ease-in-out infinite alternate; }
.o3 { width: 34vw; height: 34vw; right: 30vw; bottom: -22vw; background: var(--teal); opacity: .22; animation: o3 30s ease-in-out infinite alternate; }
:root[data-theme="light"] .home .orb { opacity: .22; }
:root[data-theme="light"] .home .o2 { opacity: .16; }
:root[data-theme="light"] .home .o3 { opacity: .14; }
@keyframes o1 { to { transform: translate(-14vw, 10vh) scale(1.2); } }
@keyframes o2 { to { transform: translate(12vw, 14vh) scale(.85); } }
@keyframes o3 { to { transform: translate(14vw, -10vh) scale(1.25); } }
.hgrid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(-90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 40% 50%, #000 20%, transparent 75%); }
.hwrap { position: relative; z-index: 3; padding: 10vh 6vw 12vh; max-width: min(860px, 92vw); }
.hero h1 { font-size: clamp(36px, 5.4vw, 88px); line-height: 1.03; letter-spacing: -.015em; margin: 0 0 6px; color: var(--txt); text-wrap: wrap; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.hero h1 .w > span { display: inline-block; transform: translateY(112%); animation: up 1.1s var(--ease) forwards; }
@keyframes up { to { transform: none; } }
.hwrap .eb { animation: fade 1s .2s both; }
.hwrap .lead { animation: fade 1.2s 1.3s both; }
.hbtns { display: flex; gap: 14px; flex-wrap: wrap; animation: fade 1.2s 1.6s both; }
.hbtns .btn.ghost { border-color: var(--btn-line); }
.hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 22px 0 28px; font-size: 13px; color: var(--dim); animation: fade 1.2s 1.8s both; }
.hero-meta .status { display: inline-flex; align-items: center; gap: .45rem; color: var(--teal); font-weight: 600; }
.hero-meta .status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#hsv { position: absolute; left: 5vw; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; z-index: 3; display: grid; gap: 10px; width: min(380px, 30vw); }
#hsv li { display: flex; gap: 14px; align-items: baseline; padding: 14px 18px; border: 1px solid var(--line2); border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateX(-40px); animation: fade2 .9s var(--ease) forwards; transition: border-color .3s, transform .3s; }
#hsv li:hover { border-color: var(--gold); transform: translateX(6px); }
@keyframes fade2 { to { opacity: 1; transform: none; } }
#hsv b { font-weight: 400; font-size: 12px; letter-spacing: .2em; color: var(--gold); }
#hsv span { font-size: clamp(14px, 1.25vw, 18px); }
#hsv em { margin-right: auto; font-style: normal; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--teal); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.scrollcue { position: absolute; bottom: 3.5vh; right: 6vw; z-index: 3; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--txt); opacity: .7; text-decoration: none; }
.scrollcue:hover { text-decoration: none; opacity: 1; }
.scrollcue i { display: block; width: 1px; height: 34px; margin: 8px 4px 0 0; background: linear-gradient(var(--gold), transparent); animation: drip 1.8s infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 980px) {
  .hero { display: block; }
  #hsv { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0 6vw 12vh; }
  .hwrap { padding-top: 8vh; padding-bottom: 5vh; }
}

/* short laptop screens (1366x768, 1536x730): keep the whole hero, chips included, inside the first screen */
@media (min-width: 1281px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(36px, 4.4vw, 76px); }
  .hwrap { padding-top: 7vh; padding-bottom: 6vh; }
  .hero-meta { margin: 16px 0 18px; }
}

/* ═══ section glow: the hero's soft lit blobs, carried into every other section ═══
   Three big radial blobs per section on a ::before that sits behind the content (z-index -1 inside an
   isolated section). Static gradients drifted by a composited transform, so no repaint while scrolling. */
.home {
  --glow-blue: 79,127,191; --glow-violet: 124,111,224; --glow-teal: 63,168,184; --glow-rose: 176,100,170;
  --glow-a: .34;
}
:root[data-theme="light"] .home { --glow-a: .22; }
:root[data-theme="light"] .home { --glow-violet: 110,92,214; --glow-teal: 40,150,170; --glow-rose: 200,100,160; }
#services, #work, #use-cases, #mesh, #agent-profiles, #how, #skills, #faq, #contact, .home footer { position: relative; isolation: isolate; }
#services::before, #work::before, #use-cases::before, #mesh::before, #agent-profiles::before, #how::before, #skills::before, #faq::before, #contact::before, .home footer::before {
  content: ""; position: absolute; inset: 0 3%; z-index: -1; pointer-events: none; will-change: transform;
  background-repeat: repeat-y; background-size: 62vw 135vh, 52vw 105vh, 46vw 165vh; background-position: 100% 0, 0% 40vh, 48% 90vh;
  background-image:
    radial-gradient(closest-side, rgba(var(--ga), var(--glow-a)), transparent),
    radial-gradient(closest-side, rgba(var(--gb), calc(var(--glow-a) * .85)), transparent),
    radial-gradient(closest-side, rgba(var(--gc), calc(var(--glow-a) * .7)), transparent);
  animation: glowDrift 26s ease-in-out infinite alternate;
}
@keyframes glowDrift { from { transform: translate3d(2.5%, 0, 0); } to { transform: translate3d(-2.5%, 0, 0); } }
#services   { --ga: var(--glow-blue);   --gb: var(--glow-teal);   --gc: var(--glow-violet); }
#work       { --ga: var(--glow-violet); --gb: var(--glow-blue);   --gc: var(--glow-rose); }
#use-cases  { --ga: var(--glow-blue);   --gb: var(--glow-teal);   --gc: var(--glow-violet); }
#mesh       { --ga: var(--glow-violet); --gb: var(--glow-blue);   --gc: var(--glow-teal); }
#agent-profiles { --ga: var(--glow-teal); --gb: var(--glow-blue); --gc: var(--glow-rose); }
#how        { --ga: var(--glow-blue);   --gb: var(--glow-violet); --gc: var(--glow-teal); }
#skills     { --ga: var(--glow-blue);   --gb: var(--glow-teal);   --gc: var(--glow-violet); }
#faq        { --ga: var(--glow-violet); --gb: var(--glow-rose);   --gc: var(--glow-blue); }
#contact    { --ga: var(--glow-blue);   --gb: var(--glow-violet); --gc: var(--glow-rose); }
.home footer { --ga: var(--glow-blue);  --gb: var(--glow-violet); --gc: var(--glow-teal); }
#contact::before { --glow-a: .5; }
#contact { --glow-a: .5; }
.home footer { --glow-a: .26; }
:root[data-theme="light"] #contact { --glow-a: .34; }
@media (prefers-reduced-motion: reduce) { #services::before, #work::before, #use-cases::before, #mesh::before, #agent-profiles::before, #how::before, #skills::before, #faq::before, #contact::before, .home footer::before { animation: none; } }
@media (max-width: 820px) {
  #services::before, #work::before, #use-cases::before, #mesh::before, #agent-profiles::before, #how::before, #skills::before, #faq::before, #contact::before, .home footer::before { background-size: 120vw 90vh, 100vw 80vh, 90vw 110vh; animation: none; }
}

/* ═══ shared pinned-scene scaffold ═══════════════════════════════════ */
.pinon .scn .pinbox { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; }
.pinon .svc .track { height: 620vh; }
.pinon .vsf .track { height: 470vh; }
.pinon .net .track { height: 760vh; }

/* ═══ 2 · what we build (pinned) ═════════════════════════════════════ */
.svc { background: linear-gradient(var(--bg), var(--bg2)); }
.svc .pinbox { display: grid; grid-template-columns: minmax(300px, .85fr) 1.15fr; gap: 5vw; padding: 3vh 6vw 3vh; align-items: center; }
.pinon .svc .lead { font-size: clamp(14px, 1.2vw, 17px); margin-top: 14px; }
.pinon .svc .eyebrow { margin-bottom: 12px; }
.svc .intro { max-width: 30em; }
.home .svc h2.big { font-size: clamp(40px, 5.4vw, 84px); }
.svcnav { position: relative; margin-top: 2.4vh; padding-right: 26px; }
.svcnav::before { content: ""; position: absolute; right: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
#rail { position: absolute; right: 5px; top: 6px; width: 2px; height: 0; background: linear-gradient(var(--gold), var(--terra)); box-shadow: 0 0 12px var(--ember); transition: height .5s var(--ease); }
#svclist { list-style: none; margin: 0; padding: 0; }
#svclist li { position: relative; padding: 6px 0; font-size: clamp(15px, 1.4vw, 20px); opacity: .38; transition: .5s; display: flex; gap: 14px; align-items: baseline; }
#svclist li::before { content: ""; position: absolute; right: -26px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); transform: translateY(-50%); transition: .5s; }
#svclist li.on { opacity: 1; }
#svclist li.on::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 14px var(--ember); }
#svclist b { font-weight: 400; font-size: .7em; color: var(--gold); letter-spacing: .2em; }
.flag { display: inline-block; font: 600 10px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--teal); color: var(--teal); background: transparent; border-radius: 99px; font-style: normal; margin: 0; }
#panels { position: relative; }
.pn { display: flex; flex-direction: column; justify-content: center; }
.pn .art { width: min(520px, 100%); height: auto; margin-bottom: 2.2vh; flex: none; overflow: visible; }
.pn .num { font-size: clamp(46px, 5vw, 76px); font-weight: 200; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(var(--rgb-gold), .4); margin-bottom: .4vh; }
.pn h3 { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.05; margin: 0 0 18px; }
.pn p { font-size: clamp(14px, 1.25vw, 18px); line-height: 1.5; opacity: .88; max-width: 34em; margin: 0; }
.pn ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.pn li { padding-right: 26px; position: relative; font-size: clamp(14px, 1.25vw, 18px); }
.pn li::before { content: ""; position: absolute; right: 0; top: .62em; width: 14px; height: 1px; background: var(--ember); }
.pn .visit { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--teal); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; align-items: center; }
.chips em { opacity: .6; font-style: normal; }
.chips span, .chips a, .chips li { padding: 7px 14px; border: 1px solid var(--line2); border-radius: 99px; text-decoration: none; }
.chips a:hover { border-color: var(--gold); color: var(--gold); }
.art .flow { animation: dash 1.4s linear infinite; } @keyframes dash { to { stroke-dashoffset: -36; } }
.art .spin { transform-origin: 257px 62px; animation: spin 14s linear infinite; } @keyframes spin { to { transform: rotate(-360deg); } }
.art .hot { animation: hotp 2s ease-in-out infinite; } @keyframes hotp { 50% { filter: drop-shadow(0 0 8px var(--ember)); } }
.art .blink { animation: blink 1.6s steps(2) infinite; } .art .b2 { animation-delay: .5s; } .art .b3 { animation-delay: 1s; } @keyframes blink { 50% { opacity: .15; } }
.art .chipA { animation: chip 3s ease-in-out infinite; } .art .chipB { animation: chip 3s .5s ease-in-out infinite; } .art .chipC { animation: chip 3s 1s ease-in-out infinite; } @keyframes chip { 50% { transform: translateX(-8px); } }
.art .pulseA { offset-path: path("M80 65L190 28L300 65L410 40"); animation: mv 3s linear infinite; }
.art .pulseB { offset-path: path("M300 65L190 100L80 65"); animation: mv 3.4s linear infinite reverse; } @keyframes mv { from { offset-distance: 0; } to { offset-distance: 100%; } }
.art .bar1, .art .bar2, .art .bar3 { transform-box: fill-box; transform-origin: bottom; animation: bar 2.6s ease-in-out infinite; } .art .bar2 { animation-delay: .3s; } .art .bar3 { animation-delay: .6s; } @keyframes bar { 50% { transform: scaleY(.6); } }
.art text { font-family: var(--body); }
.pinon .svc #panels { height: min(70vh, 600px); }
.pinon .svc .pn { position: absolute; inset: 0; opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .8s var(--ease); pointer-events: none; }
.pinon .svc .pn.on { opacity: 1; transform: none; pointer-events: auto; }
html:not(.pinon) .svc .pinbox { display: block; padding: clamp(48px, 8vw, 96px) 6vw; }
html:not(.pinon) .svcnav { display: none; }
html:not(.pinon) #panels { display: grid; gap: clamp(40px, 6vw, 72px); margin-top: clamp(32px, 5vw, 56px); max-width: 760px; }
html:not(.pinon) .pn { padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }

/* ═══ 3 · our work: VS Film pinned feature + card grid ═══════════════ */
.work { background: linear-gradient(var(--bg2), var(--bg3)); padding: clamp(64px, 12vh, 140px) 0 8vh; }
.whead { padding: 0 6vw; max-width: none; margin: 0; }
.home .whead h2.big { font-size: clamp(40px, 5.4vw, 84px); }
.vsf { margin-top: 6vh; }
.vpin { display: grid; grid-template-columns: minmax(300px, .8fr) 1.5fr; gap: 3vw; align-items: center; padding: 5vh 5vw 4vh; }
.vbg { position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 45%, var(--vs-a) 0%, var(--bg3) 62%); z-index: 0; }
.vtxt, .vdev { position: relative; z-index: 2; min-width: 0; }
#vtitle { font-size: clamp(70px, 10vw, 170px); line-height: .9; letter-spacing: -.02em; margin: 6px 0 18px; background: linear-gradient(-90deg, var(--txt), var(--vs-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vlead { font-size: clamp(17px, 1.8vw, 26px); line-height: 1.35; opacity: .92; max-width: 20em; margin: 0; }
.vfacts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; padding: 0; }
.vfacts li { padding: 8px 14px; border: 1px solid rgba(174,187,203,.35); border-radius: 99px; font-size: 13px; color: var(--vs-ink); }
.vprog { margin-top: 30px; height: 2px; width: min(260px, 100%); background: var(--line); border-radius: 2px; overflow: hidden; }
.vprog i { display: block; height: 100%; width: 0; background: linear-gradient(-90deg, var(--vs-b), var(--gold)); }
.vdev { perspective: 1600px; }
.vframe { position: relative; border-radius: 18px; overflow: hidden; background: #11161C; border: 1px solid var(--line2); box-shadow: 0 50px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(174,187,203,.13); transform-style: preserve-3d; will-change: transform; }
:root[data-theme="light"] .home .vframe { box-shadow: 0 40px 90px rgba(20,24,31,.28), 0 0 0 1px rgba(46,58,72,.2); }
.vframe .bar { display: flex; gap: 7px; align-items: center; padding: 12px 16px; background: #0B130E; border-bottom: 1px solid rgba(255,255,255,.08); color: #F2F4F7; }
.vframe .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.vframe .bar span { margin-right: 12px; font-size: 12px; opacity: .55; }
.vscreen { height: min(66vh, 580px); overflow: hidden; position: relative; }
.vscreen img { width: 100%; height: auto; display: block; will-change: transform; }
.vglow { position: absolute; inset: 8% -4% -8% 4%; background: radial-gradient(ellipse, rgba(174,187,203,.2), transparent 65%); filter: blur(40px); z-index: -1; pointer-events: none; }
html:not(.pinon) .vpin { grid-template-columns: 1fr; gap: 28px; padding: clamp(32px, 6vw, 64px) 6vw; }
html:not(.pinon) .vscreen { height: min(54vw, 460px); }
html:not(.pinon) #vtitle { font-size: clamp(64px, 14vw, 130px); }
html:not(.pinon) .vprog { display: none; }
.wsub { padding: 6vh 6vw 0; }
.wsub .eyebrow { margin: 0; }
#wgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 3vh 6vw 4vh; }
.wg { position: relative; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), border-color .3s, box-shadow .4s; min-width: 0; }
.js .wg.rev { opacity: 0; transform: translateY(40px); }
.js .wg.rev.in { opacity: 1; transform: none; }
.js .wg.rev.in:hover { transform: translateY(-8px); transition-delay: 0s; border-color: var(--gold); box-shadow: 0 26px 60px rgba(0,0,0,.45); }
.wg .sh { aspect-ratio: 1100/688; overflow: hidden; background: var(--bg3); }
.wg .sh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.wg:hover .sh img { transform: scale(1.08); }
.wg .mt { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.wg small { font: 600 10px/1.3 var(--body); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.wg h3 { font-size: clamp(22px, 1.9vw, 30px); margin: 6px 0 2px; }
.wg .ty { opacity: .6; font-size: 13px; margin: 0 0 8px; flex: none; }
.wg p { font-size: 14px; line-height: 1.45; opacity: .85; flex: 1; margin: 0; }
.wg .ty { flex: none; }
.wg a { margin-top: 12px; font: 600 12px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); align-self: flex-start; padding-bottom: 2px; }
.wg a:hover { color: var(--gold); }
/* our work: project detail dialog (VS Film style: text left, desktop + iPhone right) */
.wg[data-p] { cursor: pointer; }
.wg .mt { gap: 0; }
.wg .wmore { align-self: flex-start; margin-top: 12px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line2); background: transparent; color: inherit; font: 600 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; min-height: 40px; }
.wg .wmore:hover, .wg .wmore:focus-visible { border-color: var(--gold); color: var(--gold); }
.wg .mt a { align-self: flex-start; }
dialog.pj { width: min(1180px, 94vw); max-width: none; max-height: 92vh; padding: 0; border: 1px solid var(--line2); border-radius: 28px; color: var(--ink, inherit); background: var(--bg3); overflow: hidden; box-shadow: 0 60px 140px rgba(0,0,0,.6); }
dialog.pj::backdrop { background: rgba(8,10,14,.72); backdrop-filter: blur(6px); }
.pj .pjin { display: grid; grid-template-columns: minmax(260px, .8fr) 1.5fr; gap: 3vw; align-items: center; padding: 5vh 4vw; max-height: 92vh; overflow: auto; background: radial-gradient(ellipse at 75% 45%, var(--vs-a) 0%, var(--bg3) 62%); }
.pj .pjx { position: absolute; top: 14px; left: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg3); color: inherit; font-size: 20px; cursor: pointer; }
.pj .pjt h3 { font-size: clamp(30px, 4vw, 56px); margin: 6px 0 10px; }
.pj .pjt p.vlead { margin: 0; }
.pj .pjt .btn { margin-top: 22px; display: inline-block; }
.pj .pjdev { position: relative; display: flex; align-items: flex-end; gap: 0; min-width: 0; }
.pj .pjd { flex: 1; min-width: 0; border-radius: 16px; overflow: hidden; background: #11161C; border: 1px solid var(--line2); box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.pj .pjd .bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: #0B130E; color: #F2F4F7; }
.pj .pjd .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.pj .pjd .bar span { margin-right: 10px; font-size: 12px; opacity: .55; }
.pj .pjs { position: relative; overflow: hidden; aspect-ratio: 1200 / 760; }
.pj .pjs img { width: 100%; height: auto; display: block; will-change: transform; animation: pjscroll var(--t, 36s) ease-in-out infinite alternate; }
.pj .pjp { position: relative; flex: none; width: clamp(120px, 20%, 190px); margin-right: -6%; margin-bottom: -2%; padding: 7px; border-radius: 32px; background: #0B0E12; border: 2px solid #3A424D; box-shadow: 0 30px 70px rgba(0,0,0,.55); z-index: 2; }
.pj .pjp::before { content: ""; position: absolute; top: 12px; right: 50%; width: 34%; height: 9px; transform: translateX(50%); border-radius: 9px; background: #0B0E12; z-index: 3; }
.pj .pjps { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 390 / 800; background: #000; }
.pj .pjps img { width: 100%; height: auto; display: block; will-change: transform; animation: pjscroll var(--t2, 40s) ease-in-out infinite alternate; }
@keyframes pjscroll { from { transform: translateY(0); } to { transform: translateY(var(--dist, 0px)); } }
body.pjopen { overflow: hidden; }
@media (max-width: 820px) {
  dialog.pj { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .pj .pjin { grid-template-columns: 1fr; padding: 64px 5vw 32px; max-height: 100dvh; }
  .pj .pjp { width: clamp(110px, 34%, 150px); }
}
@media (prefers-reduced-motion: reduce) { .pj .pjs img, .pj .pjps img { animation: none !important; } }
@media (max-width: 1100px) { #wgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { #wgrid { grid-template-columns: 1fr; } }

/* ═══ 4 · use cases (cream) ══════════════════════════════════════════ */
.uc { padding: clamp(56px, 12vh, 140px) 6vw; background: var(--uc-bg); color: var(--uc-ink); }
.uc .eyebrow { color: var(--uc-acc); }
.home main .uc .lead { color: var(--uc-ink); opacity: .78; }
.home main .uc .eyebrow { color: var(--uc-acc); }
.uc .big { color: var(--uc-ink); }
.uwrap { display: grid; grid-template-columns: minmax(220px, .7fr) 1.6fr; gap: 4vw; margin-top: 8vh; align-items: start; }
#utabs { display: grid; gap: 6px; position: sticky; top: calc(var(--hh) + 24px); }
#utabs button { display: flex; gap: 14px; align-items: center; text-align: right; padding: 16px 20px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--uc-ink); font: 400 clamp(15px, 1.3vw, 19px)/1.25 var(--body); cursor: pointer; opacity: 1; transition: .35s; }
#utabs button b { font-weight: 600; font-size: 11px; letter-spacing: .2em; color: var(--uc-acc); }
#utabs button:hover { opacity: 1; background: var(--uc-hover); }
#utabs button[aria-selected="true"] { opacity: 1; border-color: var(--uc-acc); background: linear-gradient(-90deg, rgba(44,92,154,.1), transparent); }
#utabs button:focus-visible { outline: 2px solid var(--uc-acc); outline-offset: 2px; }
#upanel { position: relative; padding: 42px 44px; border: 1px solid var(--uc-line); border-radius: 24px; background: var(--uc-panel); box-shadow: 0 24px 70px var(--uc-shadow); overflow: hidden; min-height: 440px; }
.up { opacity: 0; visibility: hidden; position: absolute; inset: 42px 44px; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ease), visibility 0s .5s; }
.up.on { opacity: 1; visibility: visible; position: relative; inset: auto; transform: none; transition: opacity .5s, transform .7s var(--ease); }
.up .ut { display: block; font: 600 11px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--uc-acc); }
.up h3 { font-size: clamp(30px, 3.6vw, 56px); margin: 10px 0 26px; line-height: 1.05; color: var(--uc-ink); }
.up .chal { font: 500 clamp(19px, 1.9vw, 28px)/1.3 var(--serif); padding-right: 18px; border-right: 2px solid var(--uc-acc); margin: 0 0 34px; color: var(--uc-ink); opacity: .92; }
.up .chal b { display: block; margin-bottom: 6px; font: 600 11px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; font-style: normal; color: var(--uc-acc); }
.flowc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; }
.cp { display: block; font: 600 10px/1 var(--body); letter-spacing: .25em; text-transform: uppercase; color: var(--uc-acc); opacity: .75; margin-bottom: 10px; }
.arrowc { text-align: center; }
.arrowc .cp { margin-bottom: 14px; }
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jobs li { padding: 14px 18px; border: 1px solid var(--uc-line); border-radius: 12px; background: var(--uc-chip); color: var(--uc-ink); font-size: clamp(14px, 1.2vw, 17px); opacity: 0; transform: translateX(18px); }
.up.on .jobs li { animation: slidein .7s var(--ease) forwards; }
.up.on .jobs li:nth-child(1) { animation-delay: .25s; } .up.on .jobs li:nth-child(2) { animation-delay: .4s; } .up.on .jobs li:nth-child(3) { animation-delay: .55s; }
@keyframes slidein { to { opacity: 1; transform: none; } }
.uarr { display: inline-block; width: 70px; height: 2px; background: linear-gradient(-90deg, #9DBDE6, #7FA6D6); position: relative; transform-origin: right; transform: scaleX(0); }
.up.on .uarr { animation: grow 1s .7s var(--ease) forwards; }
@keyframes grow { to { transform: scaleX(1); } }
.uarr::after { content: ""; position: absolute; left: -1px; top: -4px; border-right: 9px solid #7FA6D6; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.res { padding: 24px 26px; border-radius: 16px; background: linear-gradient(-135deg, #4F7FBF, #2C5C9A); color: #fff; opacity: 0; transform: scale(.92); }
.up.on .res { animation: pop .8s 1.2s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
.res small { font: 600 11px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #E6EEFA; }
.res b { display: block; font-size: clamp(24px, 2.6vw, 38px); margin-top: 8px; line-height: 1.1; }
.up .sign { margin: 26px 0 0; font-size: 14px; color: var(--uc-ink); opacity: .7; }
.ucta, .tcta { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 7vh; padding: 30px 36px; border: 1px solid var(--line2); border-radius: 20px; background: var(--card); }
.ucta b, .tcta b { font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; }
.ucta span, .tcta span { opacity: .75; }
.ucta .btn, .tcta .btn { margin-top: 0; }
.uc .ucta { background: #1E232B; color: #F2F4F7; border-color: rgba(255,255,255,.14); }
.uc .ucta .btn { color: #F2F4F7; border-color: #9DBDE6; }
.uc .ucta .btn:hover { color: #10151C; }
html:not(.js) #utabs, html.rm #utabs { display: none; }
html:not(.js) .uwrap, html.rm .uwrap { grid-template-columns: 1fr; }
html:not(.js) #upanel, html.rm #upanel { padding: 0; border: 0; box-shadow: none; background: transparent; min-height: 0; display: grid; gap: 22px; overflow: visible; }
html:not(.js) .up, html.rm .up { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; padding: 32px; border: 1px solid var(--uc-line); border-radius: 24px; background: var(--uc-panel); }
html:not(.js) .jobs li, html:not(.js) .res, html:not(.js) .uarr, html.rm .jobs li, html.rm .res, html.rm .uarr { opacity: 1; transform: none; animation: none; }
@media (max-width: 980px) {
  .uwrap { grid-template-columns: 1fr; margin-top: 5vh; }
  #utabs { position: static; display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 4px; }
  #utabs button { white-space: nowrap; flex: none; }
  #upanel { padding: 26px 22px; } .up { inset: 26px 22px; }
  .flowc { grid-template-columns: 1fr; } .arrowc .cp { display: none; }
  .uarr { width: 2px; height: 34px; transform: scaleY(0); transform-origin: top; margin-right: 20px; }
  .up.on .uarr { animation-name: growy; } @keyframes growy { to { transform: scaleY(1); } }
  .uarr::after { left: -4px; top: auto; bottom: -2px; border-top: 9px solid #7FA6D6; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 0; }
  html:not(.js) .uarr, html.rm .uarr { transform: none; }
}

/* ═══ 5 · agents network (pinned story) ══════════════════════════════ */
.net { background: var(--bg-net); }
.net .pinbox { color: var(--txt); }
.nviz { position: absolute; inset: 0; }
#netc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#nhead { position: absolute; right: 6vw; top: 8vh; z-index: 3; max-width: 560px; pointer-events: none; }
#nhead .nh { font: 600 12px/1.3 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--teal); margin: 0 0 20px; }
#nhead .nlead { font-size: clamp(20px, 2.1vw, 32px); line-height: 1.2; margin: 0; }
#ncap { position: absolute; right: 6vw; top: 56%; transform: translateY(-50%); width: min(440px, 88vw); height: 330px; z-index: 3; list-style: none; margin: 0; padding: 0; pointer-events: none; }
#ncap .st { position: absolute; right: 0; top: 0; width: 100%; opacity: 0; transform: translateY(24px); transition: opacity .45s, transform .6s var(--ease), visibility 0s .45s; visibility: hidden; }
#ncap .st.on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .45s .15s, transform .6s .15s var(--ease), visibility 0s; }
#ncap .eyebrow { color: var(--teal); font-size: 12px; margin-bottom: 20px; }
#ncap h3 { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05; margin: 0 0 16px; }
#ncap p { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.55; color: var(--txt); opacity: .8; margin: 0; }
#ncap p.eyebrow { opacity: 1; color: var(--teal); }
#ncap .verdict { font-weight: 600; color: var(--ember); }
#ncap .chips li { border-color: rgba(var(--rgb-teal), .45); color: var(--teal-ink); }
.ntag { position: absolute; transform: translate(50%, 26px); text-align: center; pointer-events: none; white-space: nowrap; }
.ntag b { display: block; font: 600 13px/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--txt); text-shadow: 0 0 10px var(--bg-net); }
.ntag span { font-size: 12px; color: var(--teal); }
#nstep { position: absolute; left: 6vw; bottom: 5vh; margin: 0; font-size: 12px; letter-spacing: .3em; color: var(--teal); z-index: 3; }
.meshmore { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 6vw clamp(36px, 6vw, 72px); background: var(--bg-net); }
.meshmore .btn { margin-top: 0; }
html:not(.pinon) .net .pinbox { padding: clamp(48px, 8vw, 96px) 6vw 0; }
html:not(.pinon) #nhead { position: static; max-width: none; }
html:not(.pinon) .nviz { position: relative; inset: auto; height: clamp(380px, 76vw, 500px); margin: 28px 0 22px; }
html:not(.pinon) #ncap { position: static; transform: none; width: auto; height: auto; display: grid; gap: 28px; margin: 20px 0 0; max-width: 720px; pointer-events: auto; }
html:not(.pinon) #ncap .st { position: static; opacity: 1; transform: none; visibility: visible; padding-top: 22px; border-top: 1px solid var(--line); }
html:not(.pinon) #nstep { display: none; }
html:not(.js) .nviz { display: none; }
html:not(.pinon) .ntag b { font-size: 11px; letter-spacing: .12em; }
html:not(.pinon) .meshmore { padding-top: 28px; }

/* ═══ 6 · our agents ═════════════════════════════════════════════════ */
.team { padding: clamp(56px, 12vh, 140px) 6vw; background: linear-gradient(var(--bg3), var(--bg-net)); }
:root[data-theme="light"] .home .team { background: linear-gradient(var(--bg3), var(--bg2)); }
#tcards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 8vh; }
#tcards > .tc { grid-column: span 2; }
#tcards > .tc:nth-of-type(5) { grid-column: 2 / span 2; }
#tcards > .tc:nth-of-type(6) { grid-column: 4 / span 2; }
.tc { --c: var(--gold); position: relative; padding: 30px 28px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); overflow: hidden; transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), border-color .3s; will-change: transform; min-width: 0; }
:root[data-theme="light"] .home .tc { --c: var(--cl) !important; }
.js .tc.rev { opacity: 0; transform: translateY(50px); }
.js .tc.rev.in { opacity: 1; transform: none; }
.tc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), var(--c), transparent 55%); opacity: 0; transition: .4s; pointer-events: none; }
.tc:hover { border-color: var(--c); } .tc:hover::before { opacity: .18; }
.tc > * { position: relative; }
#tcards > .tc.tlead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; padding: 38px 44px; }
.tc.tlead .tct { display: block; }
.tc.tlead .lh { display: flex; gap: 26px; align-items: center; margin-bottom: 8px; }
.tc.tlead .lh .pf { margin-bottom: 0; flex: none; }
.tc.tlead .lt { min-width: 0; }
.tc.tlead .lt h3 { margin: 4px 0 10px; }
.tc.tlead .soulbox { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03); }
:root[data-theme="light"] .home .tc.tlead .soulbox { background: rgba(255,255,255,.6); }
.tc.tlead .soulbox p:not(.soul-note) { margin: 0 0 .7em; line-height: 1.6; font-size: 15px; opacity: .9; }
.tc.tlead .soulbox p:last-child { margin-bottom: 0; }
.tc.tlead .lh4 { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; opacity: .6; margin: 22px 0 10px; font-weight: 600; }
.tc.tlead .tk { margin-top: 0; }
.tc.tlead .tcb { margin-top: 0; align-self: stretch; }
.tc.tlead .jb { grid-template-columns: 1fr; gap: 10px; }
.tc.tlead .jb li, .tc.tlead .tk li { padding: 13px 16px; }
.pf { position: relative; width: 96px; height: 96px; margin-bottom: 18px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--c), transparent 40%, var(--c) 70%, transparent); animation: ring 7s linear infinite; }
@keyframes ring { to { transform: rotate(-360deg); } }
.pf img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #111; animation: ring 7s linear infinite reverse; box-shadow: 0 0 0 3px var(--bg-net); }
:root[data-theme="light"] .home .pf img { box-shadow: 0 0 0 3px var(--bg3); }
.tc.tlead .pf { width: 150px; height: 150px; }
.tc:hover .pf { filter: drop-shadow(0 0 18px var(--c)); }
.tc small { display: block; font: 600 11px/1.4 var(--body); letter-spacing: .25em; text-transform: uppercase; color: var(--c); }
.tc h3 { font-size: clamp(32px, 3.2vw, 52px); margin: 6px 0 12px; line-height: 1.05; }
.tc.tlead h3 { font-size: clamp(44px, 5vw, 78px); }
.tc .ar-name { font-size: .6em; opacity: .7; margin-inline-start: .3em; }
.tc blockquote.mt { margin: 6px 0 4px; padding: 0 14px 0 0; border-right: 2px solid var(--c); font-style: normal; opacity: .8; line-height: 1.5; font-size: 15px; }
.tc .motto-ar { display: block; margin-top: 6px; font-style: normal; }
.tk { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tk li, .jb li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; line-height: 1.35; background: rgba(255,255,255,.03); transition: .3s; }
:root[data-theme="light"] .home .tk li, :root[data-theme="light"] .home .jb li { background: rgba(255,255,255,.6); }
.jb li:hover, .tk li:hover { border-color: var(--c); transform: translateX(-4px); }
.jb li em { display: block; font-style: normal; opacity: .6; font-size: 13px; margin-top: 2px; }
.tcb h4 { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; opacity: .6; margin: 22px 0 10px; font-weight: 600; }
.tc.tlead .tcb h4 { margin-top: 0; }
.jb { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc .chip, .tc .cred, .tc .limit { margin: 14px 0 0; font-size: 13px; opacity: .72; }
.tc .cred svg { width: 16px; height: 16px; vertical-align: -3px; margin-left: 6px; color: var(--c); }
.tc .soulbox { margin-top: 16px; font-size: 14px; }
.tc .soul-note { margin: 0 0 8px; font: 600 11px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.tc .ar { column-count: 1; line-height: 1.75; font-size: 13.6px; opacity: .88; max-height: 190px; overflow-y: auto; padding: 0 4px 16px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); overscroll-behavior: contain; }
.tc .ar:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.tc .ar p { margin: 0 0 .7em; break-inside: avoid; }
.agentpic { margin: 8vh auto 0; max-width: 760px; }
.agentpic img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); }
.js .agentpic.rev { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.js .agentpic.rev.in { opacity: 1; transform: none; }
.agentpic figcaption { margin-top: .7rem; font-size: 13px; color: var(--dim); text-align: center; }
.tcta { margin-top: 5vh; }
@media (max-width: 980px) {
  #tcards { grid-template-columns: 1fr; margin-top: 5vh; }
  #tcards > .tc, #tcards > .tc:nth-of-type(5), #tcards > .tc:nth-of-type(6), #tcards > .tc.tlead { grid-column: auto; }
  #tcards > .tc.tlead { grid-template-columns: 1fr; gap: 0; }
  .tc.tlead .tcb h4 { margin-top: 22px; }
  .tc.tlead .jb { grid-template-columns: 1fr; }
  .tc.tlead .lh { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ═══ 7 · how we work ════════════════════════════════════════════════ */
.how { padding: clamp(56px, 12vh, 140px) 6vw; background: var(--bg-net); }
:root[data-theme="light"] .home .how { background: var(--bg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 8vh 0 0; padding: 0; list-style: none; position: relative; }
.steps::before { content: ""; position: absolute; right: 0; left: 0; top: 36px; height: 1px; background: var(--line2); }
.steps .fill { position: absolute; right: 0; top: 36px; height: 1px; width: 0; background: linear-gradient(-90deg, var(--gold), var(--terra)); box-shadow: 0 0 10px var(--ember); transition: width 2.2s cubic-bezier(.3, .7, .2, 1); }
.steps.in .fill { width: 100%; }
.stp { padding-top: 64px; position: relative; }
.js .stp { opacity: 0; transform: translateY(30px); transition: .9s var(--ease); }
.js .steps.in .stp { opacity: 1; transform: none; }
.stp:nth-of-type(1) { transition-delay: .2s; } .stp:nth-of-type(2) { transition-delay: .6s; } .stp:nth-of-type(3) { transition-delay: 1s; } .stp:nth-of-type(4) { transition-delay: 1.4s; }
.stp .n { position: absolute; top: 0; right: 0; width: 72px; height: 72px; border-radius: 50%; background: var(--bg-net); border: 1px solid var(--gold); display: grid; place-items: center; font: 400 20px var(--body); color: var(--gold); }
:root[data-theme="light"] .home .stp .n { background: var(--bg); }
.stp h3 { font-size: clamp(28px, 2.8vw, 42px); margin: 0 0 10px; }
.stp p { opacity: .85; line-height: 1.5; font-size: 16px; margin: 0; }
.how .note { margin: 7vh 0 0; font-size: 15px; opacity: .7; letter-spacing: .04em; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } .steps::before, .steps .fill { display: none; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ═══ skills (kept from the live site, calm) ═════════════════════════ */
.skills { padding: clamp(56px, 10vh, 120px) 6vw; background: var(--bg2); }
.home .skills h2.big { font-size: clamp(32px, 4.4vw, 64px); }
.skills .lead.strong { opacity: 1; font-weight: 600; }
.ledger { list-style: none; margin: 6vh 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.ledger li { display: grid; grid-template-columns: 3rem 1fr; gap: 2px 12px; padding: 16px 0; border-top: 1px solid var(--line2); }
.ledger .n { grid-row: span 2; font-size: 12px; letter-spacing: .2em; color: var(--gold); padding-top: .25em; }
.ledger b { font: 600 clamp(20px, 1.8vw, 26px)/1.2 var(--serif); }
.ledger i { font-style: normal; opacity: .72; font-size: 15px; line-height: 1.45; }
.ledger i a { color: var(--gold); }
.pc.own { margin-top: 5vh; max-width: 30rem; padding: 22px 26px; border: 1px dashed var(--line2); border-radius: 18px; }
.pc.own h3 { margin: 0 0 6px; font-size: 26px; }
.pc.own p { margin: 0; opacity: .75; }
.pc.own .by { margin-top: 8px; font: 600 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: 1; }
.capnote { margin: 3vh 0 0; font-size: 14px; opacity: .65; }
@media (max-width: 820px) { .ledger { grid-template-columns: 1fr; } }

/* ═══ faq ═════════════════════════════════════════════════════════════ */
.faq-sec { padding: clamp(40px, 8vh, 96px) 6vw; background: var(--bg2); }
:root[data-theme="light"] .home .faq-sec { background: var(--bg); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.faq-grid .head { position: sticky; top: calc(var(--hh) + 32px); margin: 0; }
.home .faq-grid h2.big { font-size: clamp(36px, 4.4vw, 64px); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 20px; margin-bottom: 12px; padding: 0 22px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; padding: 14px 0; font: 400 1.25rem var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(var(--txt), var(--txt)) center / 12px 2px no-repeat, linear-gradient(var(--txt), var(--txt)) center / 2px 12px no-repeat, var(--line); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--gold); }
.faq details > div { padding: 0 0 1.3rem 3rem; animation: faqIn .35s ease both; }
.faq details p { margin: 0; opacity: .8; font-size: 1.06rem; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .head { position: static; } }

/* ═══ 9 · closing ════════════════════════════════════════════════════ */
.final { text-align: center; padding: clamp(72px, 16vh, 200px) 6vw; background: radial-gradient(ellipse at 50% 100%, #1B2A40, var(--bg) 70%); }
:root[data-theme="light"] .home .final { background: radial-gradient(ellipse at 50% 100%, rgba(44,92,154,.16), var(--bg) 70%); }
.home .final .big { max-width: 13em; margin: 0 auto; }
.home .final .lead { margin: 22px auto 0; }
.final .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.final .fine { margin: 28px 0 0; font-size: 15px; opacity: .8; }
.final .fine a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.home header.site { box-shadow: 0 1px 0 var(--wire); }
.home footer { background: var(--sunk); border-top: 0; }

/* ═══ reduced motion: calm, nothing hidden, nothing moves ════════════ */
@media (prefers-reduced-motion: reduce) {
  .home .orb, .scrollcue i, .pf, .pf img, .art, .art * { animation: none !important; }
  .hero h1 .w > span, .hwrap .eb, .hwrap .lead, .hbtns, .hero-meta, #hsv li { animation: none !important; opacity: 1; transform: none; }
  .home main .big .w > span { transform: none; transition: none; }
  .js .wg.rev, .js .tc.rev, .js .stp { opacity: 1 !important; transform: none !important; transition: none; }
  .steps .fill { width: 100%; transition: none; }
  .home .vframe { transform: none !important; }
  #rail { transition: none; }
}
@media (max-width: 820px) {
  .home .svc h2.big, .home .whead h2.big { font-size: clamp(36px, 11vw, 56px); }
  .tc { padding: 24px 20px; } .tc.tlead { padding: 28px 22px; }
  .ucta, .tcta { padding: 22px; }
}

/* ═══ 4b · use-case diagrams: one bespoke animated SVG per industry ═══
   Drawn on the cream panel in BOTH themes, so colours are fixed brand values
   (gold / teal / crimson / ink) and never blue. Animations only run on the
   active panel (.up.on) so they restart on every tab switch, and never under
   reduced motion (the full static diagram is shown instead). */
@media (min-width: 981px) { .flowc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .8fr); gap: 22px; } }
.arrowc .dg { display: block; width: 100%; height: auto; max-height: 230px; margin: 0 auto; overflow: visible; }
.dg { --g: #9DBDE6; --t: #8FA7C4; --c: #2C5C9A; --k: var(--uc-ink); --p: var(--uc-paper); --dg-teal-d: #8FA7C4; }
.dg .s { stroke: var(--k); fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.dg .s.p { fill: var(--p); } .dg .s.g { fill: var(--g); } .dg .s.t { fill: var(--t); } .dg .s.c { fill: var(--c); } .dg .s.i { fill: var(--k); }
.dg .s.tc { stroke: var(--t); stroke-width: 2.2px; } .dg .s.cc { stroke: var(--c); stroke-width: 2px; }
.dg .n { stroke: none; } .dg .n.g { fill: var(--g); } .dg .n.t { fill: var(--t); } .dg .n.c { fill: var(--c); } .dg .n.i { fill: var(--k); } .dg .n.p { fill: var(--p); }
.dg * { transform-box: fill-box; transform-origin: 50% 50%; }
.dg .dr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dg .stp { transform-origin: 50% 100%; }

.up.on .dg .in    { animation: dgIn 6s var(--d, 0s) infinite backwards; }
.up.on .dg .fill  { animation: dgIn 6s var(--d, 0s) infinite backwards; }
.up.on .dg .fly   { animation: dgFly 6s var(--d, 0s) infinite backwards; }
.up.on .dg .gr    { animation: dgGr 6s var(--d, 0s) infinite backwards; transform-origin: 50% 100%; }
.up.on .dg .dr    { animation: dgDr 6s var(--d, 0s) infinite backwards; }
.up.on .dg .bl    { animation: dgBl var(--u, 2.4s) var(--d, 0s) ease-in-out infinite; }
.up.on .dg .pu    { animation: dgPu var(--u, 2s) var(--d, 0s) ease-in-out infinite; }
.up.on .dg .rot   { animation: dgRot var(--u, 6s) linear infinite; }
.up.on .dg .rock  { animation: dgRock 4s ease-in-out infinite; }
.up.on .dg .sway  { animation: dgRock 2.6s ease-in-out infinite; }
.up.on .dg .bob   { animation: dgBob var(--u, 3s) var(--d, 0s) ease-in-out infinite; }
.up.on .dg .drop  { animation: dgDrop 4.8s var(--d, 0s) infinite backwards; }
.up.on .dg .scan  { animation: dgScan var(--u, 3.6s) ease-in-out infinite; }
.up.on .dg .stp   { animation: dgStamp 4s 1.5s infinite backwards; }
.up.on .dg .climb { animation: dgClimb 8s ease-in-out infinite; }
.up.on .dg .ringp { animation: dgRing 6s infinite; }
.dg .ringp { stroke-dashoffset: .22; transform-box: view-box; transform-origin: 214px 44px; }
@keyframes dgIn   { 0% { opacity: 0; transform: translateY(8px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dgFly  { 0% { opacity: 0; transform: translateX(calc(-1*(var(--x, 30px) * -1))); } 14%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(var(--x, 30px)); } }
@keyframes dgGr   { 0% { transform: scaleY(0); } 16%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes dgDr   { 0% { stroke-dashoffset: 1; } 18%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes dgBl   { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dgPu   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes dgRot  { to { transform: rotate(-360deg); } }
@keyframes dgRock { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
@keyframes dgBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes dgDrop { 0% { opacity: 0; transform: translateY(-26px); } 10% { opacity: 1; } 16% { transform: translateY(0); } 22% { transform: translateY(-5px); } 28%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dgScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(118px); } }
@keyframes dgStamp { 0%, 30% { transform: translateY(-14px); } 40% { transform: translateY(2px) scaleY(.9); } 55%, 100% { transform: translateY(-14px); } }
@keyframes dgClimb { 0% { transform: translate(0, 0); } 8% { transform: translate(0, 0); } 18% { transform: translate(-34px, -16px); } 28% { transform: translate(-34px, -16px); } 38% { transform: translate(-68px, -32px); } 48% { transform: translate(-68px, -32px); } 58% { transform: translate(-102px, -48px); } 68% { transform: translate(-102px, -48px); } 78%, 92% { transform: translate(-136px, -64px); } 100% { transform: translate(0, 0); } }
@keyframes dgRing { 0% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: .22; } 100% { stroke-dashoffset: 1; } }
html.rm .dg *, html:not(.js) .dg * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .dg * { animation: none !important; } }
@media (max-width: 980px) {
  .arrowc .dg { max-width: 380px; margin: 4px auto; max-height: none; }
  .arrowc { text-align: center; }
}

#utabs button:not([aria-selected="true"]) { color: color-mix(in srgb, var(--uc-ink) 82%, var(--uc-bg)); }
#utabs button b { color: var(--uc-acc); }
.uc .cp { color: var(--uc-acc); }
:root[data-theme="light"] #utabs button b, :root[data-theme="light"] .uc .cp { color: #224A7E; }

/* light theme: links and the dimmed network labels meet AA */
:root[data-theme="light"] .home main a:not(.btn):not([class]) { color: #224A7E; }
:root[data-theme="light"] .home .ntag span { color: #2E3A48; }
:root[data-theme="light"] .home .ntag b { color: #14181F; }
:root[data-theme="light"] .home .ntag span { font-weight: 500; }

/* ═══ hero visual: a looping showcase of what the agents do (chat, reminder, specialist, board, tickets, teamwork) ═══ */
.hero #hcv, .hgrid { display: none; }
.hv { position: absolute; left: 4vw; top: 50%; transform: translateY(-50%); width: min(580px, 38vw); z-index: 2; pointer-events: none; }
.hv-in { position: relative; width: 580px; height: 590px; transform-origin: 100% 0; color: #EEF2F7; }
.hv-in * { box-sizing: border-box; }
.hv .av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(255,255,255,.25); }
.hv-lab { position: absolute; top: 0; right: 50%; transform: translateX(50%); display: flex; gap: 10px; align-items: center; padding: 9px 18px; border-radius: 99px; background: rgba(24,30,38,.88); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; white-space: nowrap; z-index: 9; transition: opacity .35s, transform .35s; }
.hv-lab b { width: 22px; height: 22px; border-radius: 50%; background: #9DBDE6; color: #0B0E12; font-size: 12px; display: grid; place-items: center; }
.hv-lab.sw { opacity: 0; transform: translateX(50%) translateY(-6px); }
.hv-dots { position: absolute; top: 42px; right: 0; left: 0; display: flex; gap: 8px; justify-content: center; z-index: 9; }
.hv-dots i { display: block; width: 34px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.hv-dots i.on::after { content: ""; position: absolute; inset: 0; background: #9DBDE6; transform-origin: right; animation: hvfill var(--dur, 8s) linear forwards; }
.hv-dots i.done { background: #9DBDE6; }
.hv-stg { position: absolute; right: 0; left: 0; top: 62px; bottom: 0; }
.hv-sc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(-60px) scale(.96); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.hv-sc.on { opacity: 1; transform: none; }
.hv-sc.off { opacity: 0; transform: translateX(60px) scale(.96); }
@keyframes hvfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hvin { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hvspin { to { transform: rotate(-360deg); } }
@keyframes hvring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-18deg); } 30% { transform: rotate(16deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } }
@keyframes hvdot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* phone chat */
.hv-ph { position: relative; width: 270px; height: 480px; border-radius: 46px; background: #0B0E12; border: 2px solid #3A424D; padding: 10px; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.hv-ph::before { content: ""; position: absolute; top: 16px; right: 50%; width: 90px; height: 22px; transform: translateX(50%); border-radius: 20px; background: #000; z-index: 6; }
.hv-scr { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: linear-gradient(#141A22,#0E1319); display: flex; flex-direction: column; }
.hv-hd { display: flex; gap: 10px; align-items: center; padding: 50px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hv-hd b { font-size: 14px; display: block; }
.hv-hd small { font-size: 11px; opacity: .6; }
.hv-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; overflow: hidden; }
.hv-m { max-width: 84%; padding: 9px 12px; border-radius: 16px; font-size: 13px; line-height: 1.35; animation: hvin .35s ease both; }
.hv-m.u { align-self: flex-end; background: #2C5C9A; border-bottom-left-radius: 5px; }
.hv-m.a { align-self: flex-start; background: #222B36; border-bottom-right-radius: 5px; }
.hv-m.t { align-self: flex-start; background: #222B36; display: flex; gap: 4px; padding: 12px 14px; }
.hv-m.t i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: hvdot 1s infinite; }
.hv-m.t i:nth-child(2) { animation-delay: .15s; }
.hv-m.t i:nth-child(3) { animation-delay: .3s; }
.hv-field { margin: 8px 12px 14px; padding: 10px 14px; border-radius: 99px; background: #1B232D; font-size: 12px; opacity: .7; }
.hv-ban { position: absolute; right: 10px; left: 10px; top: -120px; padding: 12px 14px; border-radius: 20px; background: rgba(40,48,60,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.5); z-index: 7; transition: top .6s cubic-bezier(.2,.8,.2,1); font-size: 12.5px; line-height: 1.35; }
.hv-ban.on { top: 44px; }
.hv-ban .r { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; font-size: 11px; opacity: .75; }
.hv-ban .r span { display: inline-block; animation: hvring 1.2s ease-in-out 3; }
.hv-ban .bt { display: flex; gap: 8px; margin-top: 9px; }
.hv-ban .bt b { flex: 1; text-align: center; padding: 7px; border-radius: 10px; background: #2A333F; font-size: 12px; transition: .2s; }
.hv-ban .bt b.hit { background: #9DBDE6; color: #0B0E12; }
.hv-chips { position: absolute; left: calc(100% + 6px); top: 0; bottom: 0; width: 230px; z-index: 8; }
.hv-chip { position: absolute; left: 0; padding: 9px 13px; border-radius: 12px; background: rgba(30,38,48,.94); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; display: flex; gap: 9px; align-items: center; box-shadow: 0 12px 30px -14px rgba(0,0,0,.6); animation: hvin .4s ease both; white-space: nowrap; }
.hv-chip i, .hv-st.ok i { width: 17px; height: 17px; border-radius: 50%; background: rgba(157,189,230,.25); position: relative; flex: none; display: inline-block; }
.hv-chip i::after, .hv-st.ok i::after { content: ""; position: absolute; right: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid #9DBDE6; border-width: 0 0 2px 2px; transform: rotate(-40deg); }
/* cards: board, tickets, group */
.hv-card { width: 460px; border-radius: 26px; background: rgba(18,23,30,.86); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 90px rgba(0,0,0,.5); overflow: hidden; display: flex; flex-direction: column; }
.hv-th { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; font-weight: 600; }
.hv-th em { margin-right: auto; font-style: normal; font-size: 11px; opacity: .65; font-weight: 400; }
.hv-board { height: 396px; }
.hv-board .hv-th em { display: flex; gap: 6px; align-items: center; }
.hv-board .hv-th em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7FD4A0; box-shadow: 0 0 10px #7FD4A0; }
.hv-rows { flex: 1; display: flex; flex-direction: column; padding: 10px 14px; gap: 8px; overflow: hidden; }
.hv-row { display: flex; gap: 12px; align-items: center; padding: 10px 13px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); animation: hvin .45s ease both; }
.hv-row .tx { flex: 1; min-width: 0; }
.hv-row b { display: block; font-size: 13px; }
.hv-row small { font-size: 11.5px; opacity: .65; }
.hv-st { font-size: 11.5px; display: flex; gap: 7px; align-items: center; white-space: nowrap; opacity: .9; }
.hv-st.wrk::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #9DBDE6; animation: hvspin .8s linear infinite; }
.hv-st.due { color: #F2C879; }
.hv-st.due span { display: inline-block; animation: hvring 1.2s ease-in-out infinite; }
.hv-tix { width: 560px; height: 400px; }
.hv-cols { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 12px; }
.hv-col { background: rgba(255,255,255,.035); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hv-col h5 { margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 600; }
.hv-col > div { display: flex; flex-direction: column; gap: 8px; }
.hv-tk { position: relative; padding: 10px 11px; border-radius: 12px; background: #222B36; border: 1px solid rgba(255,255,255,.07); font-size: 12.5px; line-height: 1.3; animation: hvin .45s ease both; transition: opacity .5s, transform .5s; }
.hv-tk small { display: flex; gap: 7px; align-items: center; margin-top: 7px; font-size: 10.5px; opacity: .7; }
.hv-tk small img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.hv-tk.go { opacity: 0; transform: translateX(-26px); }
.hv-tk.fin { background: #1D2B2B; border-color: rgba(127,212,160,.35); }
.hv-tk.fin::after { content: "\2713"; position: absolute; top: 8px; left: 10px; color: #7FD4A0; font-weight: 700; }
.hv-grp { height: 480px; }
.hv-stack { display: flex; }
.hv-stack img { width: 24px; height: 24px; border-radius: 50%; margin-right: -6px; border: 2px solid #12171E; object-fit: cover; }
.hv-stack img:first-child { margin-right: 0; }
.hv-gm { display: flex; gap: 10px; align-items: flex-end; animation: hvin .4s ease both; }
.hv-gm .bb { padding: 9px 13px; border-radius: 16px; border-bottom-right-radius: 5px; background: #222B36; font-size: 13px; line-height: 1.38; max-width: 330px; }
.hv-gm .bb small { display: block; font-size: 10.5px; opacity: .6; margin-bottom: 2px; letter-spacing: .04em; }
.hv-gm.me { flex-direction: row-reverse; }
.hv-gm.me .bb { background: #2C5C9A; border-radius: 16px; border-bottom-left-radius: 5px; }
.hv-sys { align-self: center; padding: 7px 14px; border-radius: 99px; background: rgba(242,200,121,.14); color: #F2C879; font-size: 12px; animation: hvin .4s ease both; }
.hv-sys span { display: inline-block; animation: hvring 1.2s ease-in-out 3; }
.hv-ok { display: inline-block; margin-top: 8px; padding: 7px 16px; border-radius: 99px; background: #9DBDE6; color: #0B0E12; font-weight: 600; font-size: 12px; transition: .2s; }
.hv-ok.hit { transform: scale(.92); background: #fff; }
@media (prefers-reduced-motion: reduce) { .hv *, .hv *::before, .hv *::after { animation: none !important; transition: none !important; } }
/* services list becomes a chip row under the buttons */
.hero #hsv { position: static; transform: none; width: auto; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero #hsv li { padding: 8px 14px; border-radius: 99px; gap: 9px; align-items: center; }
.hero #hsv li:hover { transform: none; }
.hero #hsv span { font-size: 13.5px; }
.hero #hsv b { font-size: 10px; }
.hero #hsv em { margin-right: 4px; font-size: 9px; padding: 1px 7px; }
@media (max-width: 1280px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
  .hwrap { order: 1; max-width: 92vw; }
  .hv { order: 2; position: relative; left: auto; top: auto; transform: none; width: min(580px, 88vw); margin: 0 auto 10vh; flex: none; }
  .hwrap { padding-bottom: 4vh; }
  .hwrap .hero-meta { margin-bottom: 8px; }
}

/* ═══ use cases: pinned like "What we build"; scroll steps through the 8 industries ═══ */
.pinon .uc { padding-top: 0; }
.pinon .uc .track { height: 880vh; }
.pinon .uc .pinbox { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 2vh 0; }
.pinon .uc .head .eyebrow { margin-bottom: 8px; }
.pinon .uc .big { font-size: clamp(28px, 3.4vw, 52px); margin: 0; }
.pinon .uc .head .lead { margin-top: 10px; font-size: clamp(13px, 1.1vw, 16px); }
.pinon .uc .uwrap { margin-top: 2.5vh; }
.pinon .uc #utabs { position: static; gap: 4px; }
.pinon .uc #utabs button { padding: 12px 18px; }
.pinon .uc .up h3 { margin: 8px 0 16px; font-size: clamp(26px, 3vw, 46px); }
.pinon .uc .up .chal { margin-bottom: 20px; }
.pinon .uc .ucta { margin-top: 0; }
.pinon .uc .uc-hint { display: none; }
@media (max-height: 860px) {
  .pinon .uc .pinbox { padding: 0; }
  .pinon .uc .head .eyebrow { display: none; }
  .pinon .uc .big { font-size: clamp(24px, 2.6vw, 38px); }
  .pinon .uc .head .lead { margin-top: 6px; font-size: 13px; line-height: 1.4; }
  .pinon .uc .uwrap { margin-top: 1.6vh; gap: 3vw; }
  .pinon .uc #utabs button { padding: 8px 16px; font-size: 15px; }
  .pinon .uc #upanel { padding: 24px 30px; min-height: 0; }
  .pinon .uc .up { inset: 24px 30px; }
  .pinon .uc .up h3 { margin: 6px 0 10px; font-size: clamp(22px, 2.4vw, 34px); }
  .pinon .uc .up .chal { margin-bottom: 12px; font-size: clamp(16px, 1.5vw, 21px); }
  .pinon .uc .jobs { gap: 6px; }
  .pinon .uc .jobs li { padding: 9px 14px; font-size: 14px; }
  .pinon .uc .res { padding: 16px 18px; }
  .pinon .uc .res b { font-size: clamp(20px, 2vw, 28px); }
  .pinon .uc .up .sign { margin-top: 12px; font-size: 13px; }
  .pinon .uc .flowc { gap: 16px; }
}
@media (max-height: 700px) { .pinon .uc .up .sign { display: none; } .pinon .uc .head .lead { display: none; } }

/* navbar: the same soft lit colour as the sections, not a flat bar. Translucent so the page glow shows through the blur. */
.home header.site {
  background:
    radial-gradient(40% 220% at 8% 0%, rgba(var(--glow-blue), .30), transparent 70%),
    radial-gradient(34% 220% at 52% 0%, rgba(var(--glow-violet), .22), transparent 70%),
    radial-gradient(32% 220% at 96% 0%, rgba(var(--glow-teal), .24), transparent 70%),
    var(--hdr-bg);
}
:root[data-theme="light"] .home header.site {
  background:
    radial-gradient(40% 220% at 8% 0%, rgba(var(--glow-blue), .22), transparent 70%),
    radial-gradient(34% 220% at 52% 0%, rgba(var(--glow-violet), .16), transparent 70%),
    radial-gradient(32% 220% at 96% 0%, rgba(var(--glow-teal), .18), transparent 70%),
    var(--hdr-bg);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .home header.site { background-color: var(--hdr-solid); } }

/* Ja3far skills (English) */
.tc .skills3 { margin-top: 16px; }
.tc .skills3 summary { list-style: none; cursor: pointer; display: block; }
.tc .skills3 summary::-webkit-details-marker { display: none; }
.tc .skills3 summary .soul-note { display: block; margin: 0 0 8px; }
.tc .skills3 .sch { display: flex; flex-wrap: wrap; gap: 6px; }
.tc .skills3 .sch span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; opacity: .9; }
.tc .skills3 summary em { display: block; margin-top: 8px; font-style: normal; font-size: 12px; color: var(--c); text-decoration: underline; text-underline-offset: 3px; }
.tc .skills3[open] summary em { display: none; }
.tc .skills3 summary:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 8px; }
#tcards > .tc.tlead { align-self: start; }
.tc .skills3 .sg { margin-top: 10px; }
.tc .skills3 b { display: block; font-size: 13px; margin-bottom: 4px; color: var(--c); }
.tc .skills3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tc .skills3 li { font-size: 13px; line-height: 1.4; opacity: .85; padding-right: 12px; position: relative; }
.tc .skills3 li::before { content: ""; position: absolute; right: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--c); }


/* ── Arabic typography (appended after rtlcss): joined letters must not be tracked or upper-cased ── */
html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input { font-family: "Readex Pro", "Figtree", ui-sans-serif, system-ui, sans-serif; }
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: 0 !important; text-transform: none !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.3; }
html[dir="rtl"] .hero h1 { line-height: 1.25; font-size: clamp(32px, 4.4vw, 72px); }
html[dir="rtl"] .hero h1 .w { padding-bottom: .22em; }
html[dir="rtl"] .big { line-height: 1.25; }
html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.75; }
html[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] #nstep { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .lang { font-size: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }