/* ==========================================================================
   LCS Smartworkz LLP – website styles
   Colours, fonts and spacing are set once here (the :root block) – change a
   colour there and it changes on every page.
   ========================================================================== */

:root {
  --ink: #e2e8f0;          /* main text (light, the site is dark) */
  --ink-2: #cbd5e1;        /* secondary text */
  --mut: #94a3b8;          /* muted text */
  --line: rgba(129, 140, 248, .24); /* borders */
  --bg: #070d1f;
  --bg-2: rgba(255, 255, 255, .025); /* "alt" section tint */
  --navy: #070d1f;         /* dark sections */
  --navy-2: #0e1733;
  --brand: #4f46e5;        /* indigo */
  --brand-2: #06b6d4;      /* cyan */
  --accent: #8b5cf6;       /* violet */
  --grad: linear-gradient(120deg, #4f46e5 0%, #8b5cf6 45%, #06b6d4 100%);
  --radius: 16px;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .75);
  --wrap: 1180px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Sora", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 720px; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: .98rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none !important; font-family: inherit; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 12px 28px -12px rgba(79, 70, 229, .7); }
.btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.btn-outline { border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: rgba(79, 70, 229, .06); }

/* ---------- header / navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 13, 31, .86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; text-decoration: none !important; }
.logo img { width: 32px; height: 32px; }
.logo small { display: block; font-family: var(--font); font-weight: 600; font-size: .66rem; letter-spacing: .2em; color: #a5b4fc; text-transform: uppercase; }
.menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu a { color: #cbd5e1; font-weight: 600; font-size: .88rem; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.menu a:hover, .menu a.active { color: #fff; background: rgba(255, 255, 255, .08); }
.menu .btn { margin-left: 8px; padding: 10px 18px; color: #fff; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; }
@media (max-width: 880px) {
  .menu-toggle { display: block; }
  .menu { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--navy); padding: 12px 22px 22px; gap: 4px; display: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .menu.open { display: flex; }
  .menu .btn { margin: 8px 0 0; justify-content: center; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 15% -10%, rgba(79, 70, 229, .45), transparent 60%), radial-gradient(800px 500px at 100% 20%, rgba(6, 182, 212, .28), transparent 60%), var(--navy); color: #e2e8f0; padding: 96px 0 90px; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000 30%, transparent); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .lead { color: #cbd5e1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 24px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags span { font-size: .82rem; color: #c7d2fe; border: 1px solid rgba(165, 180, 252, .3); border-radius: 999px; padding: 5px 12px; }
.hero-shot { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 8px rgba(255, 255, 255, .03); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
.page-hero { padding: 76px 0 64px; }
.page-hero .lead { margin-top: 10px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero-shot { transform: none; } }

/* ---------- sections ---------- */
section { padding: 88px 0; }
.alt { background: var(--bg-2); }
.dark { background: var(--navy); color: #cbd5e1; }
.dark h2, .dark h3 { color: #fff; }
.section-head { margin-bottom: 44px; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } section { padding: 64px 0; } }

/* cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-4px); border-color: #c7d2fe; }
.card p { color: var(--ink-2); font-size: .98rem; margin: 0; }
.icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 18px; box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .8); }
.icon svg { width: 26px; height: 26px; }
.card ul { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); font-size: .95rem; }
.card li { margin: 4px 0; }
.dark .card { background: var(--navy-2); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.dark .card p, .dark .card li { color: #a7b4cc; }

/* feature split (text + screenshot) */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.split.rev { grid-template-columns: 1.15fr 1fr; }
.split.rev .split-text { order: 2; }
.shot { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .5); }
.checks { list-style: none; padding: 0; margin: 18px 0 0; }
.checks li { position: relative; padding-left: 32px; margin: 10px 0; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.dark .checks li { color: #a7b4cc; }
@media (max-width: 960px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev .split-text { order: 0; } }

/* steps */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 58px; }
.step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step p { color: var(--ink-2); }

/* industries / pills */
.pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pill { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; font-weight: 600; color: var(--ink-2); }

/* call to action band */
.cta-band { background: var(--grad); color: #fff; border-radius: 26px; padding: 54px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: 0 30px 70px -30px rgba(79, 70, 229, .8); }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; opacity: .92; }
.cta-band .btn { background: #fff; color: var(--brand); }

/* gallery (product screenshots) */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: .92rem; color: var(--mut); margin-top: 10px; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* contact */
.form { display: grid; gap: 16px; }
.form label { font-weight: 600; font-size: .92rem; display: grid; gap: 6px; }
.form input, .form textarea, .form select { font: inherit; font-size: 1rem; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.form textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .88rem; color: var(--mut); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon { width: 44px; height: 44px; margin: 0; flex: none; }
.contact-list .icon svg { width: 22px; height: 22px; }
.contact-list b { display: block; }

/* prose pages (privacy) */
.prose { max-width: 780px; }
.prose h2 { font-size: 1.4rem; margin-top: 1.8em; }

/* footer */
.site-footer { background: var(--navy); color: #94a3b8; padding: 64px 0 28px; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: #cbd5e1; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* reveal-on-scroll (assets/js/main.js adds .in) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ==========================================================================
   High-tech look: 3D hero scene, glowing schematics, 3D screenshots, callouts
   ========================================================================== */
.hero-3d { position: relative; min-height: 460px; }
#hero3d { position: absolute; inset: -40px -60px; }
#hero3d canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-3d .float-chip { position: absolute; z-index: 2; background: rgba(14, 23, 51, .78); border: 1px solid rgba(165, 180, 252, .35); backdrop-filter: blur(8px); color: #e2e8f0; font-size: .85rem; font-weight: 600; padding: 9px 14px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(6, 182, 212, .5); animation: floaty 6s ease-in-out infinite; }
.hero-3d .float-chip b { color: #67e8f9; }
.hero-3d .c1 { top: 8%; left: 2%; } .hero-3d .c2 { top: 44%; right: -2%; animation-delay: -2s; } .hero-3d .c3 { bottom: 6%; left: 14%; animation-delay: -4s; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
@media (max-width: 960px) { .hero-3d { min-height: 340px; } #hero3d { inset: -10px; } }

/* dark "blueprint" section with grid lines */
.blueprint { position: relative; background: radial-gradient(700px 400px at 80% 0%, rgba(79, 70, 229, .3), transparent 60%), var(--navy); color: #cbd5e1; overflow: hidden; }
.blueprint::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(103, 232, 249, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.blueprint > .wrap { position: relative; }
.blueprint h2, .blueprint h3 { color: #fff; }
.blueprint .lead { color: #a7b4cc; }
.blueprint .eyebrow { color: #67e8f9; }

/* animated architecture schematic (inline SVG) */
.schematic { width: 100%; height: auto; display: block; }
.schematic .box { fill: rgba(14, 23, 51, .9); stroke: rgba(129, 140, 248, .55); stroke-width: 1.4; }
.schematic .box.core { fill: rgba(49, 46, 129, .55); stroke: #22d3ee; stroke-width: 2; filter: url(#glow); }
.schematic .col-title { fill: #67e8f9; font: 700 13px var(--font); letter-spacing: .18em; }
.schematic .t { fill: #e2e8f0; font: 600 14px var(--font); }
.schematic .s { fill: #94a3b8; font: 500 11.5px var(--font); }
.schematic .flow { fill: none; stroke: url(#flowg); stroke-width: 2.4; stroke-dasharray: 7 9; animation: flow 1.6s linear infinite; }
.schematic .flow.slow { animation-duration: 2.6s; }
.schematic .dot { fill: #22d3ee; filter: url(#glow); }
.schematic .ico { fill: none; stroke: #a5b4fc; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .schematic .flow { animation: none; } }
.schematic-wrap { border: 1px solid rgba(129, 140, 248, .25); border-radius: 20px; padding: 18px; background: rgba(7, 13, 31, .55); box-shadow: inset 0 0 60px rgba(79, 70, 229, .15); overflow-x: auto; }
.schematic-wrap svg { min-width: 760px; }

/* 3D framed screenshots */
.frame3d { position: relative; border-radius: 18px; transition: transform .25s ease; transform-style: preserve-3d; will-change: transform; }
.frame3d img { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(99, 102, 241, .2), 0 0 60px -10px rgba(99, 102, 241, .45); }
.frame3d::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, transparent 35%); pointer-events: none; }
.tilt-l { transform: perspective(1400px) rotateY(9deg) rotateX(3deg); }
.tilt-r { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); }
.stack3d { position: relative; padding: 20px 0 60px; }
.stack3d .back { position: absolute; width: 62%; right: 0; top: 0; opacity: .9; transform: perspective(1400px) rotateY(-18deg) translateZ(-120px); }
.stack3d .front { position: relative; width: 78%; margin-top: 90px; transform: perspective(1400px) rotateY(-10deg) rotateX(4deg); }
@media (max-width: 760px) { .stack3d .back { display: none; } .stack3d .front { width: 100%; margin: 0; } }

/* numbered highlight callouts on a screenshot */
.annotated { position: relative; }
.hotspot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 15px var(--font-head); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(34, 211, 238, .25), 0 8px 20px rgba(0, 0, 0, .5); z-index: 2; }
.hotspot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #22d3ee; animation: ping 2.2s ease-out infinite; }
@keyframes ping { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.hl-box { position: absolute; border: 2px solid #22d3ee; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(7, 13, 31, 0), 0 0 22px rgba(34, 211, 238, .55); pointer-events: none; }
.legend { list-style: none; counter-reset: lg; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.legend li { counter-increment: lg; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.legend li::before { content: counter(lg); width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 14px var(--font-head); display: grid; place-items: center; }
.legend b { display: block; color: inherit; }
.legend span { color: var(--mut); font-size: .95rem; }
.blueprint .legend span, .dark .legend span { color: #a7b4cc; }
.legend.cols { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* 3D glass icon tiles */
.icon3d { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; position: relative; background: linear-gradient(145deg, #6366f1, #4338ca 60%, #312e81); box-shadow: 0 14px 0 -6px #1e1b4b, 0 22px 30px -12px rgba(67, 56, 202, .8), inset 0 2px 0 rgba(255, 255, 255, .35); transform: perspective(300px) rotateX(14deg); transition: transform .25s; }
.icon3d.cyan { background: linear-gradient(145deg, #22d3ee, #0891b2 60%, #155e75); box-shadow: 0 14px 0 -6px #083344, 0 22px 30px -12px rgba(8, 145, 178, .8), inset 0 2px 0 rgba(255, 255, 255, .35); }
.icon3d.violet { background: linear-gradient(145deg, #a78bfa, #7c3aed 60%, #4c1d95); box-shadow: 0 14px 0 -6px #2e1065, 0 22px 30px -12px rgba(124, 58, 237, .8), inset 0 2px 0 rgba(255, 255, 255, .35); }
.icon3d svg { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.card:hover .icon3d { transform: perspective(300px) rotateX(0deg) translateY(-3px); }

/* glowing stat strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat { border: 1px solid rgba(129, 140, 248, .3); border-radius: 18px; padding: 22px; background: rgba(14, 23, 51, .6); }
.stat b { display: block; font: 800 1.9rem var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: #a7b4cc; font-size: .92rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* circuit lines decoration behind cards */
.circuit { position: relative; }
.circuit::before { content: ""; position: absolute; inset: 0; background: url("../img/circuit.svg") center/cover no-repeat; opacity: .5; pointer-events: none; }
.circuit > .wrap { position: relative; }

/* the first screen shows at once (no fade-in), so visitors and search engines see the headline immediately */
.hero .reveal { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   Work One page
   ========================================================================== */
.wo-hub { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: stretch; }
#wo3d { position: relative; min-height: 520px; border-radius: 22px; border: 1px solid rgba(129, 140, 248, .25); background: radial-gradient(500px 360px at 50% 50%, rgba(79, 70, 229, .28), transparent 70%); overflow: hidden; cursor: grab; }
#wo3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#wo3d .hint { position: absolute; left: 16px; bottom: 14px; font-size: .82rem; color: #94a3b8; z-index: 1; pointer-events: none; }
.wo-panel { border: 1px solid rgba(129, 140, 248, .3); border-radius: 22px; padding: 26px; background: rgba(14, 23, 51, .7); display: flex; flex-direction: column; gap: 10px; }
.wo-panel h3 { margin: 0; }
#wo-info { min-height: 150px; }
#wo-info p { color: #cbd5e1; margin: 12px 0 0; }
.wo-badge { display: inline-block; font-weight: 800; font-size: 1.15rem; color: #fff; border: 2px solid; border-radius: 999px; padding: 6px 16px; }
.wo-links { font-size: .9rem; color: #94a3b8 !important; }
.wo-links b { color: #67e8f9; }
.wo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.wo-chips button { font: inherit; font-size: .82rem; color: #c7d2fe; background: rgba(99, 102, 241, .12); border: 1px solid rgba(129, 140, 248, .3); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.wo-chips button:hover { background: rgba(99, 102, 241, .3); color: #fff; }
@media (max-width: 960px) { .wo-hub { grid-template-columns: 1fr; } #wo3d { min-height: 420px; } }

/* AI fraud watch diagram */
.fw { display: grid; grid-template-columns: 1fr 120px 1.1fr; gap: 0; align-items: center; margin-top: 26px; }
.fw + .fw { margin-top: 46px; }
.fw-docs { display: grid; gap: 14px; }
.doc { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 14px 56px; box-shadow: var(--shadow); font-size: .92rem; transform: perspective(900px) rotateY(8deg); }
.doc::before { content: attr(data-ico); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #eef2ff; font-size: 1rem; }
.doc b { display: block; font-size: .98rem; }
.doc span { color: var(--mut); }
.doc mark { background: #fef3c7; color: #92400e; padding: 0 4px; border-radius: 4px; }
.fw-ai { position: relative; height: 100%; min-height: 150px; display: grid; place-items: center; }
.fw-ai::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: repeating-linear-gradient(90deg, #6366f1 0 10px, transparent 10px 18px); background-size: 36px 3px; animation: dash 1s linear infinite; }
@keyframes dash { to { background-position: 36px 0; } }
.fw-eye { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: radial-gradient(circle at 35% 30%, #a5b4fc, #4f46e5 55%, #1e1b4b); box-shadow: 0 0 0 8px rgba(99, 102, 241, .18), 0 0 40px rgba(34, 211, 238, .6); }
.fw-eye::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed rgba(34, 211, 238, .7); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fw-ai small { position: absolute; bottom: -6px; font-size: .78rem; font-weight: 700; color: var(--brand); letter-spacing: .08em; text-transform: uppercase; }
.flag { position: relative; border-radius: 16px; padding: 18px 20px 18px 66px; background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 2px solid #fb7185; box-shadow: 0 0 0 6px rgba(251, 113, 133, .14), 0 20px 40px -20px rgba(225, 29, 72, .6); animation: flagpulse 2.4s ease-in-out infinite; }
.flag::before { content: "🚩"; position: absolute; left: 18px; top: 16px; font-size: 1.8rem; }
.flag b { display: block; color: #9f1239; font-size: 1.05rem; }
.flag p { margin: 6px 0 10px; color: #4c0519; font-size: .94rem; }
.flag .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.flag .acts span { font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #fda4af; color: #9f1239; }
@keyframes flagpulse { 50% { box-shadow: 0 0 0 12px rgba(251, 113, 133, .06), 0 20px 40px -20px rgba(225, 29, 72, .6); } }
@media (max-width: 860px) { .fw { grid-template-columns: 1fr; } .fw-ai { min-height: 110px; } .fw-ai::before { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: repeating-linear-gradient(180deg, #6366f1 0 10px, transparent 10px 18px); } .doc { transform: none; } }

/* AI watch list */
.watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 34px; }
.watch div { border: 1px dashed #c7d2fe; border-radius: 14px; padding: 14px 16px; background: #fff; font-size: .93rem; color: var(--ink-2); }
.watch b { display: block; color: var(--ink); }

/* employee scorecard */
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.emp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.emp-tabs button { font: inherit; font-weight: 700; font-size: .9rem; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(129, 140, 248, .4); background: transparent; color: #c7d2fe; cursor: pointer; }
.emp-tabs button.on { background: var(--grad); color: #fff; border-color: transparent; }
#wo-radar { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; overflow: visible; }
#wo-radar .rg { fill: none; stroke: rgba(148, 163, 184, .25); }
#wo-radar .ra { stroke: rgba(148, 163, 184, .25); }
#wo-radar .rl { fill: #cbd5e1; font: 600 12px var(--font); }
#wo-radar .rs { fill: rgba(34, 211, 238, .25); stroke: #22d3ee; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .6)); }
#wo-radar .rd { fill: #fff; stroke: #6366f1; stroke-width: 2.5; }
.score-card { border: 1px solid rgba(129, 140, 248, .3); border-radius: 22px; padding: 26px; background: rgba(14, 23, 51, .7); }
.score-top { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.ring { --p: 80; width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#22d3ee calc(var(--p) * 1%), rgba(148, 163, 184, .2) 0); transition: background .6s; position: relative; }
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--navy-2); }
.ring b { position: relative; font: 800 2.2rem var(--font-head); color: #fff; }
#wo-band { font: 800 1.25rem var(--font-head); color: #fff; display: block; }
#wo-reco { display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 700; color: #052e16; background: #6ee7b7; border-radius: 999px; padding: 3px 12px; }
#wo-who { color: #94a3b8; font-size: .9rem; display: block; margin-top: 4px; }
.wo-bar { display: grid; grid-template-columns: 170px 1fr 36px; gap: 10px; align-items: center; font-size: .88rem; color: #cbd5e1; margin: 7px 0; }
.wo-bar small { color: #64748b; }
.wo-bar i { height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .2); overflow: hidden; display: block; }
.wo-bar i b { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .6s; }
.wo-bar em { font-style: normal; font-weight: 800; color: #fff; text-align: right; }
@media (max-width: 860px) { .score-grid { grid-template-columns: 1fr; } .wo-bar { grid-template-columns: 130px 1fr 32px; } }

/* portal mock-up (built in HTML – illustration) */
.mock { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: #0b1226; display: grid; grid-template-columns: 170px 1fr; min-height: 380px; font-size: .8rem; color: #cbd5e1; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 60px -10px rgba(99, 102, 241, .45); }
.mock-side { background: #070d1f; padding: 14px 10px; display: grid; align-content: start; gap: 3px; }
.mock-side b { color: #fff; font: 800 1rem var(--font-head); margin: 0 6px 10px; }
.mock-side span { padding: 6px 8px; border-radius: 8px; }
.mock-side span.on { background: rgba(99, 102, 241, .3); color: #fff; }
.mock-main { padding: 16px; display: grid; gap: 12px; align-content: start; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-kpis div { background: #111b36; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 10px; }
.mock-kpis b { display: block; font: 800 1.3rem var(--font-head); color: #fff; }
.mock-kpis .warn b { color: #fb7185; }
.mock-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.mock-box { background: #111b36; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 10px; }
.mock-box h5 { margin: 0 0 8px; font-size: .78rem; color: #94a3b8; letter-spacing: .08em; text-transform: uppercase; }
.mock-flag { display: flex; gap: 8px; align-items: flex-start; padding: 7px; border-radius: 8px; background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .4); margin-bottom: 6px; color: #fecdd3; }
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.mock-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--grad); }
.mock-tag { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; color: #64748b; }
@media (max-width: 640px) { .mock { grid-template-columns: 1fr; } .mock-side { display: none; } .mock-kpis { grid-template-columns: repeat(2, 1fr); } .mock-row { grid-template-columns: 1fr; } }

/* solution cards (Solutions overview) */
.sol { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 34px; border-radius: 26px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.sol + .sol { margin-top: 30px; }
.sol h2 { font-size: 1.9rem; }
@media (max-width: 900px) { .sol { grid-template-columns: 1fr; padding: 24px; } }

/* ==========================================================================
   Home page – compact text, moving schematics (index.html: <body class="home">)
   ========================================================================== */
.home { font-size: 14.5px; line-height: 1.58; }
.home h1 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); }
.home h2 { font-size: clamp(1.18rem, 1.8vw, 1.5rem); }
.home h3 { font-size: .95rem; }
.home .lead { font-size: .93rem; }
.home section { padding: 40px 0; }
.home .hero { padding: 26px 0 24px; }
.home .hero-grid { gap: 30px; }
.home .hero-cta { margin: 16px 0 12px; }
.home .btn { padding: 8px 18px; font-size: .86rem; }
.home .hero-3d { min-height: 300px; }
.home .float-chip { font-size: .76rem; padding: 6px 11px; }
.home .hero-tags span { font-size: .72rem; padding: 3px 9px; }
.home .section-head, .home-head { margin-bottom: 18px; max-width: 760px; }
.home .eyebrow { font-size: .7rem; margin-bottom: 6px; }
.home-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.home-head p { color: #a7b4cc; margin: 0; }
.home .checks li { margin: 6px 0; }
.home .split { gap: 40px; }
.home .mock { min-height: 260px; }
@media (max-width: 640px) { .home section { padding: 40px 0; } .home .hero-3d { min-height: 250px; } .home .hero-cta .btn { padding: 9px 16px; } }

/* hero figures with a moving light line */
.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.kpi-strip div { position: relative; overflow: hidden; border: 1px solid rgba(129, 140, 248, .3); border-radius: 12px; padding: 8px 14px; background: rgba(14, 23, 51, .6); }
.kpi-strip b { display: block; font: 800 1.12rem var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-strip span { font-size: .76rem; color: #a7b4cc; }
.kpi-strip div::after { content: ""; position: absolute; left: -40%; bottom: 0; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, transparent); animation: sweep 3s linear infinite; }
.kpi-strip div:nth-child(2)::after { animation-delay: -.75s; }
.kpi-strip div:nth-child(3)::after { animation-delay: -1.5s; }
.kpi-strip div:nth-child(4)::after { animation-delay: -2.25s; }
@keyframes sweep { to { left: 100%; } }
@media (max-width: 760px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* digitalisation pipeline (two drawings: wide for desktop, tall for phones) */
.pipe-wrap { border: 1px solid rgba(129, 140, 248, .25); border-radius: 20px; padding: 18px; background: rgba(7, 13, 31, .55); box-shadow: inset 0 0 60px rgba(79, 70, 229, .15); }
.pipe { width: 100%; height: auto; display: block; overflow: visible; }
.pipe-tall { display: none; max-width: 360px; margin: 0 auto; }
@media (max-width: 700px) { .pipe-wide { display: none; } .pipe-tall { display: block; } .pipe-wrap { padding: 12px 8px; } }
.pipe .box { fill: rgba(14, 23, 51, .92); stroke: rgba(129, 140, 248, .55); stroke-width: 1.4; }
.pipe .box.hot { stroke: #22d3ee; }
.pipe .row { fill: rgba(49, 46, 129, .45); stroke: rgba(103, 232, 249, .3); }
.pipe .t { fill: #e2e8f0; font: 600 14px var(--font); }
.pipe .t.sm { font-size: 12.5px; }
.pipe .s { fill: #94a3b8; font: 500 11.5px var(--font); }
.pipe .s.sm { font-size: 10.5px; }
.pipe .s2 { fill: #c7d2fe; font: 600 12px var(--font); }
.pipe .ct { fill: #67e8f9; font: 700 12px var(--font); letter-spacing: .16em; }
.pipe .wire { fill: none; stroke: url(#pgA); stroke-width: 2.2; stroke-dasharray: 6 8; animation: flow 1.4s linear infinite; }
.pipe .wire.b { stroke: url(#pgB); }
.pipe .pk { fill: #22d3ee; filter: url(#pglowA); }
.pipe .pk.b { filter: url(#pglowB); }
.pipe .pk.v { fill: #c4b5fd; }
.pipe .ring { fill: none; stroke: rgba(103, 232, 249, .45); stroke-width: 1.5; stroke-dasharray: 4 7; }
.pipe .ring.rev { stroke: rgba(167, 139, 250, .6); stroke-dasharray: 18 10; }
.pipe .nd { fill: #22d3ee; }
.pipe .core { fill: rgba(49, 46, 129, .75); stroke: #22d3ee; stroke-width: 2; filter: url(#pglowA); }
.pipe .core.b { filter: url(#pglowB); }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
.spin.rev { animation-direction: reverse; animation-duration: 10s; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.pipe-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pipe-steps div { border-left: 2px solid #22d3ee; padding: 2px 0 2px 12px; font-size: .86rem; color: #a7b4cc; }
.pipe-steps b { display: block; color: #fff; font-size: .92rem; }
@media (max-width: 760px) { .pipe-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "What we build" tiles, each with a small moving drawing */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { display: block; border: 1px solid rgba(129, 140, 248, .25); border-radius: 18px; padding: 14px 16px 16px; background: linear-gradient(160deg, rgba(30, 27, 75, .55), rgba(14, 23, 51, .85)); color: #a7b4cc; text-decoration: none !important; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-3px); border-color: #22d3ee; box-shadow: 0 0 30px -8px rgba(34, 211, 238, .5); }
.tile h3 { color: #fff; margin: 12px 0 4px; }
.tile p { margin: 0; font-size: .86rem; }
.viz { height: 118px; border-radius: 12px; background: rgba(7, 13, 31, .65); border: 1px solid rgba(129, 140, 248, .18); overflow: hidden; position: relative; }
.viz svg { width: 100%; height: 100%; display: block; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento { gap: 10px; } .tile { padding: 10px 10px 12px; border-radius: 14px; } .viz { height: 76px; } .tile h3 { font-size: .9rem; margin-top: 8px; } .tile p { font-size: .78rem; line-height: 1.45; } .cube { zoom: .72; } }
.vz-frame { fill: rgba(14, 23, 51, .9); stroke: rgba(129, 140, 248, .35); }
.vz-dim { fill: rgba(148, 163, 184, .3); }
.vz-t { fill: #e2e8f0; font: 700 11px var(--font); }
.vz-t.sm { font-size: 10px; }
.vz-bar { fill: #6366f1; transform-box: fill-box; transform-origin: bottom; animation: bar 2.4s ease-in-out infinite alternate; }
.vz-bar.c { fill: #22d3ee; }
@keyframes bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.vz-track { fill: none; stroke: rgba(148, 163, 184, .2); stroke-width: 8; }
.vz-donut { fill: none; stroke: #22d3ee; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 151; animation: donut 3s ease-in-out infinite alternate; }
@keyframes donut { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 30; } }
.vz-edge path { stroke: rgba(129, 140, 248, .3); stroke-width: 1; }
.vz-n { fill: #6366f1; stroke: #a5b4fc; stroke-width: 1.5; }
.vz-n.c { fill: #0891b2; stroke: #67e8f9; }
.vz-n.out { fill: #7c3aed; stroke: #c4b5fd; }
.vz-p { fill: #67e8f9; filter: drop-shadow(0 0 4px #22d3ee); }
.vz-flow path { stroke: #6366f1; stroke-width: 2; stroke-dasharray: 5 6; animation: flow 1.2s linear infinite reverse; }
.vz-dev { fill: rgba(14, 23, 51, .95); stroke: #a5b4fc; stroke-width: 1.4; }
.vz-hub { fill: #312e81; stroke: #22d3ee; stroke-width: 2; filter: drop-shadow(0 0 6px #22d3ee); }
.vz-ring { fill: none; stroke: rgba(103, 232, 249, .6); stroke-dasharray: 6 6; }
.vz-wire { fill: none; stroke: rgba(129, 140, 248, .5); stroke-width: 2; stroke-dasharray: 4 5; }
.vz-chip { stroke-width: 1.5; }
.vz-chip.warn { fill: rgba(251, 113, 133, .18); stroke: #fb7185; }
.vz-chip.ok { fill: rgba(52, 211, 153, .15); stroke: #34d399; }
.vz-phone { fill: #0b1226; stroke: #a5b4fc; stroke-width: 2; }
.vz-msg { fill: #6366f1; animation: msg 2.4s ease-in-out infinite; }
.vz-msg.c { fill: #22d3ee; }
@keyframes msg { 0%, 15% { opacity: 0; } 30%, 85% { opacity: 1; } 100% { opacity: 0; } }
.vz-ping { fill: none; stroke: #22d3ee; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2.2s ease-out infinite; }
.vz-code { fill: #6366f1; transform-box: fill-box; transform-origin: left; animation: type 3.2s ease-in-out infinite; }
.vz-code.c { fill: #22d3ee; }
@keyframes type { 0% { transform: scaleX(0); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.vz-cursor { fill: #e2e8f0; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* 3D cube for the digital-twin tile (pure CSS) */
.viz-cube { display: grid; place-items: center; perspective: 520px; }
.cube { width: 54px; height: 54px; position: relative; transform-style: preserve-3d; animation: cube 10s linear infinite; }
.cube i { position: absolute; inset: 0; border: 1.5px solid #22d3ee; background: rgba(34, 211, 238, .08); box-shadow: inset 0 0 14px rgba(34, 211, 238, .35); }
.cube i:nth-child(1) { transform: translateZ(27px); }
.cube i:nth-child(2) { transform: rotateY(90deg) translateZ(27px); }
.cube i:nth-child(3) { transform: rotateY(180deg) translateZ(27px); }
.cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(27px); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(27px); border-color: #a78bfa; }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(27px); border-color: #a78bfa; }
.cube b { position: absolute; inset: 17px; border-radius: 50%; background: #67e8f9; box-shadow: 0 0 18px 6px rgba(34, 211, 238, .6); }
@keyframes cube { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.cube-floor { position: absolute; left: -20%; right: -20%; bottom: -30px; height: 90px; background-image: linear-gradient(rgba(103, 232, 249, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .25) 1px, transparent 1px); background-size: 22px 22px; transform: rotateX(70deg); mask-image: linear-gradient(to top, #000, transparent); }

/* Work One mock-up with an AI scanning beam */
.mock.scan { position: relative; }
.mock.scan::before { content: ""; position: absolute; left: 0; right: 0; top: -70px; height: 70px; background: linear-gradient(transparent, rgba(34, 211, 238, .22), transparent); border-bottom: 1px solid rgba(34, 211, 238, .6); animation: scan 3.4s linear infinite; pointer-events: none; z-index: 2; }
@keyframes scan { to { top: 100%; } }

/* approach: line with a travelling light, steps, industries */
.track { position: relative; height: 2px; margin: 0 0 18px; background: linear-gradient(90deg, rgba(79, 70, 229, .35), rgba(6, 182, 212, .35)); }
.track span { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 14px #22d3ee; animation: track 5s ease-in-out infinite alternate; }
@keyframes track { to { left: calc(100% - 12px); } }
.home .step { padding-top: 40px; }
.home .step::before { font-size: 1.6rem; }
.home .step h3 { margin-bottom: 4px; }
.home .step p { font-size: .9rem; margin: 0; }
.home .pills { gap: 8px; margin-top: 28px; align-items: center; }
.home .pills b { color: var(--mut); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }
.home .pill { padding: 6px 14px; font-size: .84rem; }
.home .cta-sec { padding-top: 0; }
.home .cta-band { padding: 30px 36px; }
@media (max-width: 640px) { .home .cta-band { padding: 26px 22px; } }

@media (prefers-reduced-motion: reduce) { .home *, .home *::before, .home *::after { animation: none !important; } }

/* example AI alerts ticker (home hero) */
.ticker { display: flex; align-items: center; gap: 12px; margin-top: 10px; border: 1px solid rgba(129, 140, 248, .25); border-radius: 999px; padding: 6px 6px 6px 14px; background: rgba(7, 13, 31, .6); }
.ticker-tag { flex: none; font-size: .68rem; font-weight: 700; color: #34d399; letter-spacing: .08em; text-transform: uppercase; }
.ticker-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-move { display: flex; width: max-content; animation: tick 45s linear infinite; }
.ticker-move > div { display: flex; }
.ticker-move span { white-space: nowrap; font-size: .78rem; color: #cbd5e1; padding-right: 30px; }
.ticker:hover .ticker-move { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (max-width: 560px) { .ticker-tag { display: none; } .ticker { padding-left: 6px; } }

/* interactive 3D layers (assets/js/home.js) */
.stack-hub { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
#stack3d { position: relative; min-height: 430px; border-radius: 18px; border: 1px solid rgba(129, 140, 248, .25); background: radial-gradient(500px 340px at 50% 55%, rgba(79, 70, 229, .25), transparent 70%); overflow: hidden; cursor: grab; touch-action: pan-y; }
#stack3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#stack3d .hint { position: absolute; left: 14px; bottom: 12px; font-size: .75rem; color: #94a3b8; z-index: 1; pointer-events: none; }
.stack-panel { border: 1px solid rgba(129, 140, 248, .3); border-radius: 18px; padding: 16px; background: rgba(14, 23, 51, .7); display: flex; flex-direction: column; gap: 12px; }
.stack-btns { display: grid; gap: 6px; }
.stack-btns button { font: inherit; font-size: .84rem; font-weight: 700; text-align: left; color: #c7d2fe; background: rgba(99, 102, 241, .1); border: 1px solid rgba(129, 140, 248, .3); border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: background .2s; }
.stack-btns button:hover { background: rgba(99, 102, 241, .25); }
.stack-btns button.on { background: var(--grad); color: #fff; border-color: transparent; }
#stack-info { min-height: 100px; font-size: .86rem; }
#stack-info p { margin: 4px 0 0; color: #cbd5e1; }
.stack-note { margin: auto 0 0; font-size: .78rem; color: #94a3b8; }
@media (max-width: 860px) { .stack-hub { grid-template-columns: 1fr; } #stack3d { min-height: 330px; } .stack-btns { grid-template-columns: 1fr 1fr; } #stack-info { min-height: 0; } }

/* AI story + before / after */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { border: 1px solid rgba(129, 140, 248, .28); border-radius: 18px; padding: 16px; background: linear-gradient(160deg, rgba(30, 27, 75, .5), rgba(14, 23, 51, .85)); }
.panel h3 { color: #fff; margin: 0 0 10px; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.story { width: 100%; height: auto; display: block; border-radius: 12px; background: rgba(7, 13, 31, .65); border: 1px solid rgba(129, 140, 248, .18); }
.st-c { fill: #67e8f9; font: 700 9.5px var(--font); letter-spacing: .14em; }
.st-t { fill: #fff; font: 700 12px var(--font); }
.st-t.sm { font-size: 11px; }
.st-s { fill: #94a3b8; font: 500 10px var(--font); }
.st-ok { fill: #34d399; font: 700 10px var(--font); }
.st-bad { fill: #fb7185; font: 800 13px var(--font); }
.st-card { fill: #111b36; stroke: rgba(129, 140, 248, .6); stroke-width: 1.3; }
.st-red { fill: rgba(251, 113, 133, .12); stroke: #fb7185; stroke-width: 2; opacity: 0; animation: stRed 7s infinite; }
.st-scan-box { fill: rgba(49, 46, 129, .25); stroke: #a78bfa; stroke-width: 1.5; stroke-dasharray: 6 5; }
.st-line { fill: #22d3ee; opacity: 0; animation: stScan 7s infinite; }
.st-link { fill: none; stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 5 5; opacity: 0; animation: stLink 7s infinite; }
.st-move { animation: stMove 7s ease-in-out infinite; }
.st-alert { fill: rgba(251, 113, 133, .1); stroke: #fb7185; stroke-width: 1.6; }
.st-result { opacity: 0; animation: stRes 7s infinite; }
@keyframes stMove { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 30%, 92% { transform: translate(166px, -58px); opacity: 1; } 100% { transform: translate(166px, -58px); opacity: 0; } }
@keyframes stScan { 0%, 30% { opacity: 0; transform: translateY(0); } 32% { opacity: 1; } 50% { opacity: 1; transform: translateY(84px); } 52%, 100% { opacity: 0; transform: translateY(84px); } }
@keyframes stLink { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stRed { 0%, 52% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stRes { 0%, 56% { opacity: 0; transform: translateX(10px); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .78rem; color: #a7b4cc; }
.story-steps b { display: block; color: #fff; font-size: .8rem; }
@media (max-width: 480px) { .story-steps { grid-template-columns: 1fr; gap: 6px; } }
.ba-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ba-top h3 { margin: 0; }
.ba-tabs { display: flex; background: rgba(7, 13, 31, .7); border: 1px solid rgba(129, 140, 248, .3); border-radius: 999px; padding: 3px; }
.ba-tabs button { font: inherit; font-size: .8rem; font-weight: 700; color: #c7d2fe; background: none; border: 0; border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.ba-tabs button.on { background: linear-gradient(120deg, #059669, #06b6d4); color: #fff; }
.ba-tabs button[data-ba="before"].on { background: linear-gradient(120deg, #e11d48, #f97316); }
.ba-body { display: grid; }
.ba-pane { grid-area: 1 / 1; display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; transition: opacity .5s, transform .5s, visibility .5s; }
.ba[data-state="before"] .ba-after, .ba[data-state="after"] .ba-before { opacity: 0; visibility: hidden; transform: translateY(8px); }
.ba-pane svg { width: 100%; height: auto; }
.ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .85rem; }
.ba-list li { position: relative; padding-left: 22px; color: #cbd5e1; }
.ba-list li::before { position: absolute; left: 0; font-weight: 800; }
.ba-before li::before { content: "✕"; color: #fb7185; }
.ba-after li::before { content: "✓"; color: #34d399; }
.ba-shake { transform-box: fill-box; transform-origin: center; animation: shake 2.6s ease-in-out infinite; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.ba-hand { transform-origin: 94px 26px; animation: spin 1.5s linear infinite; }
@media (max-width: 480px) { .ba-pane { grid-template-columns: 76px 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .st-result, .st-red, .st-link { opacity: 1; } .st-move { transform: translate(166px, -58px); } }

/* ==========================================================================
   Work One module pages (workone-*.html, made by tools/make-module-pages.py)
   --mc = the module's colour
   ========================================================================== */
.crumbs { font-size: .78rem; color: #94a3b8; margin-bottom: 10px; }
.crumbs a { color: #c7d2fe; }
.crumbs span { color: #fff; }
.mod-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mod-facts div { border: 1px solid rgba(129, 140, 248, .3); border-radius: 12px; padding: 7px 10px; background: rgba(14, 23, 51, .6); }
.mod-facts b { display: block; font: 800 1.1rem var(--font-head); color: var(--mc, #22d3ee); }
.mod-facts span { font-size: .72rem; color: #a7b4cc; }
@media (max-width: 520px) { .mod-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#mod3d { position: absolute; inset: -20px; }
#mod3d canvas { width: 100% !important; height: 100% !important; display: block; }

/* 3D process flow chart */
.flow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.flow-head .home-head { margin: 0; }
.flow-ctrl { display: flex; gap: 6px; flex-wrap: wrap; }
.flow-ctrl button { font: inherit; font-size: .78rem; font-weight: 700; color: #c7d2fe; background: rgba(99, 102, 241, .12); border: 1px solid rgba(129, 140, 248, .35); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.flow-ctrl button.on { background: var(--grad); color: #fff; border-color: transparent; }
.flow3d { perspective: 1700px; padding: 26px 18px 34px; border: 1px solid rgba(129, 140, 248, .25); border-radius: 20px; background: radial-gradient(600px 300px at 50% 40%, rgba(79, 70, 229, .22), transparent 70%), rgba(7, 13, 31, .55); overflow: hidden; }
.flow-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flow3d.js .flow-stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 26deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 40%; transition: transform .6s ease; }
.flow3d.js.flat .flow-stage { --rx: 0deg; --ry: 0deg !important; }
.flow3d.js .flow-nodes { display: block; position: absolute; inset: 0; transform-style: preserve-3d; }
.flow3d.js .fnode { position: absolute; transition: transform .35s, box-shadow .35s, border-color .35s, opacity .35s; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fw-line { fill: none; stroke: rgba(129, 140, 248, .35); stroke-width: 3; }
.fw-flow { fill: none; stroke: var(--mc, #22d3ee); stroke-width: 2.5; stroke-dasharray: 8 10; animation: flow 1.2s linear infinite; }
.fw-dot { fill: #fff; filter: drop-shadow(0 0 6px var(--mc, #22d3ee)) drop-shadow(0 0 2px #fff); }
.fnode { background: linear-gradient(160deg, #141f42, #0b1226); border: 1.5px solid rgba(129, 140, 248, .45); border-radius: 14px; padding: 10px 12px; color: #cbd5e1; cursor: pointer; transform: translateZ(18px); box-shadow: 0 10px 0 -4px #0a0f24, 0 18px 26px -12px rgba(0, 0, 0, .8); outline: none; }
.fnode:hover, .fnode:focus-visible { border-color: #fff; }
.fnode .fk { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 3px; }
.fnode b { display: block; color: #fff; font-size: .9rem; line-height: 1.25; }
.fnode small { display: block; font-size: .72rem; color: var(--mc, #67e8f9); margin-top: 2px; }
.fnode p { display: none; }
.fbranch { display: block; font-style: normal; font-size: .7rem; color: #fda4af; margin-top: 5px; line-height: 1.3; }
.fnode.k-start, .fnode.k-end { border-radius: 26px; border-color: #34d399; }
.fnode.k-start .fk, .fnode.k-end .fk { color: #6ee7b7; }
.fnode.k-ai { border-color: #a78bfa; background: linear-gradient(160deg, #2e1065, #1e1b4b); box-shadow: 0 10px 0 -4px #1a0b3d, 0 0 26px -6px rgba(167, 139, 250, .7); }
.fnode.k-ai .fk { color: #c4b5fd; }
.fnode.k-decision { border-color: #fbbf24; border-style: dashed; }
.fnode.k-decision .fk { color: #fcd34d; }
.fnode.done { opacity: .78; }
.flow3d.js .fnode.on { transform: translateZ(46px) scale(1.04); border-color: #fff; box-shadow: 0 14px 0 -4px #0a0f24, 0 0 0 3px var(--mc, #22d3ee), 0 0 40px -4px var(--mc, #22d3ee); opacity: 1; }
.flow3d:not(.js) .fnode p { display: block; font-size: .8rem; margin: 4px 0 0; }
.flow-info { margin-top: 14px; border: 1px solid rgba(129, 140, 248, .3); border-left: 3px solid var(--mc, #22d3ee); border-radius: 14px; padding: 12px 16px; background: rgba(14, 23, 51, .75); display: grid; grid-template-columns: auto auto 1fr; column-gap: 12px; align-items: baseline; min-height: 92px; }
.flow-info .fi-n { font-size: .72rem; color: #94a3b8; font-weight: 700; }
.flow-info .fi-k { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mc, #67e8f9); }
.flow-info b { color: #fff; font-size: 1rem; }
.flow-info small, .flow-info p, .flow-info em { grid-column: 1 / -1; }
.flow-info small { color: var(--mc, #67e8f9); font-size: .78rem; }
.flow-info p { margin: 4px 0 0; color: #cbd5e1; font-size: .88rem; }
.flow-info em { font-style: normal; color: #fda4af; font-size: .82rem; margin-top: 4px; }
.flow-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .74rem; color: #94a3b8; }
.flow-key .k-ai { color: #c4b5fd; } .flow-key .k-decision { color: #fcd34d; } .flow-key .k-start, .flow-key .k-end { color: #6ee7b7; }
@media (max-width: 600px) { .flow3d { padding: 16px 10px 22px; } .flow3d.js .flow-stage { --rx: 14deg; } .flow-info { grid-template-columns: auto 1fr; } .flow-info b { grid-column: 1 / -1; } }

/* AI watch cards + linked modules */
.aiw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aiw { border: 1px solid rgba(167, 139, 250, .3); border-radius: 16px; padding: 14px; background: linear-gradient(160deg, rgba(46, 16, 101, .45), rgba(14, 23, 51, .85)); font-size: .82rem; color: #a7b4cc; }
.aiw .icon3d { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 12px; }
.aiw .icon3d svg { width: 22px; height: 22px; }
.aiw b { display: block; color: #fff; font-size: .9rem; margin-bottom: 2px; }
@media (max-width: 900px) { .aiw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .aiw-grid { grid-template-columns: 1fr; } }
.mod-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.mod-links > b { color: #94a3b8; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
.mchip { font-size: .8rem; font-weight: 600; color: #e2e8f0; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 999px; padding: 5px 12px; text-decoration: none !important; transition: background .2s; }
.mchip:hover { background: color-mix(in srgb, var(--c) 32%, transparent); }

/* previous / next module */
.mod-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.mod-nav a { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; text-decoration: none !important; color: var(--ink); background: #fff; box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.mod-nav a:hover { transform: translateY(-2px); border-color: #c7d2fe; }
.mod-nav a:last-child { text-align: right; }
.mod-nav a.mid { text-align: center; }
.mod-nav small { display: block; color: var(--mut); font-size: .74rem; }
.mod-nav b { font-size: .92rem; }
.home .mod-nav-sec { padding: 28px 0; }
@media (max-width: 600px) { .mod-nav { grid-template-columns: 1fr 1fr; } .mod-nav a.mid { grid-column: 1 / -1; order: 3; } }

/* 12-module list (products.html and workone.html) */
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mcard { position: relative; display: flex; flex-direction: column; gap: 3px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 16px; padding: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, #0e1733), #0b1226); color: #a7b4cc; text-decoration: none !important; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.mcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .08) 45%, transparent 60%); transform: translateX(-100%); transition: transform .8s; pointer-events: none; }
.mcard:hover { border-color: var(--c); box-shadow: 0 0 30px -8px var(--c); }
.mcard:hover::before { transform: translateX(100%); }
.mcard-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: color-mix(in srgb, var(--c) 25%, #0b1226); border: 1px solid var(--c); box-shadow: 0 8px 0 -3px #050a18, 0 0 18px -4px var(--c); transform: perspective(300px) rotateX(14deg); margin-bottom: 6px; }
.mcard b { color: #fff; font-size: .95rem; }
.mcard-t { font-size: .78rem; line-height: 1.4; }
.mcard-flow { font-size: .72rem; color: var(--c); font-weight: 700; margin-top: 4px; }
.mcard-go { font-size: .75rem; color: #fff; font-weight: 700; margin-top: auto; padding-top: 6px; }
@media (max-width: 960px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mcard { padding: 10px; } .mcard-t { display: none; } }
@media (prefers-reduced-motion: reduce) { .fw-flow { animation: none; } }

/* Work One: three floating live screens in 3D */
.scr-stage { perspective: 1400px; }
.scr-rig { position: relative; height: 250px; transform-style: preserve-3d; transition: transform .25s; }
.scr { position: absolute; top: 30px; width: 34%; border: 1px solid rgba(129, 140, 248, .45); border-radius: 16px; padding: 12px 14px; background: linear-gradient(160deg, rgba(30, 27, 75, .92), rgba(11, 18, 38, .96)); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(99, 102, 241, .6); color: #cbd5e1; font-size: .78rem; animation: floaty 6s ease-in-out infinite; }
.scr h5 { margin: 0 0 8px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.scr.s1 { left: 0; transform: rotateY(26deg) translateZ(-40px); }
.scr.s2 { left: 33%; top: 10px; transform: translateZ(60px); border-color: #22d3ee; animation-delay: -2s; }
.scr.s3 { right: 0; transform: rotateY(-26deg) translateZ(-40px); animation-delay: -4s; }
.scr-floor { position: absolute; left: 5%; right: 5%; bottom: -10px; height: 120px; background-image: linear-gradient(rgba(103, 232, 249, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .2) 1px, transparent 1px); background-size: 26px 26px; transform: rotateX(78deg); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }
.q-win { height: 120px; overflow: hidden; }
.q-list { animation: queue 8s ease-in-out infinite; }
.q-row { height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.q-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-row b { flex: none; font-size: .66rem; border-radius: 999px; padding: 2px 8px; }
.q-row .ok { background: rgba(52, 211, 153, .18); color: #6ee7b7; }
.q-row .ai { background: rgba(167, 139, 250, .22); color: #c4b5fd; }
.q-row .wait { background: rgba(251, 191, 36, .16); color: #fcd34d; }
@keyframes queue { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-30px); } 50%, 68% { transform: translateY(-60px); } 75%, 93% { transform: translateY(-90px); } 100% { transform: translateY(-120px); } }
.scr small { display: block; margin-top: 8px; color: #94a3b8; }
.scr small b { color: #67e8f9; }
.scr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.scr-kpis div { background: #111b36; border-radius: 8px; padding: 6px 8px; font-size: .68rem; }
.scr-kpis b { display: block; font: 800 1.05rem var(--font-head); color: #fff; }
.scr svg { width: 100%; height: auto; display: block; }
.scr-line { fill: none; stroke: #22d3ee; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; animation: draw 4s ease-in-out infinite; filter: drop-shadow(0 0 4px #22d3ee); }
@keyframes draw { 0% { stroke-dashoffset: 200; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } }
.feed p { margin: 0 0 7px; display: flex; gap: 8px; align-items: flex-start; opacity: 0; animation: feed 8s infinite; }
.feed p:nth-child(2) { animation-delay: 1.2s; } .feed p:nth-child(3) { animation-delay: 2.4s; } .feed p:nth-child(4) { animation-delay: 3.6s; }
@keyframes feed { 0% { opacity: 0; transform: translateX(-8px); } 8%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@media (max-width: 860px) {
  .scr-rig { height: auto; display: grid; gap: 12px; }
  .scr, .scr.s1, .scr.s2, .scr.s3 { position: relative; inset: auto; width: auto; left: auto; right: auto; top: auto; transform: rotateX(8deg); }
  .scr-floor { display: none; }
}
@media (prefers-reduced-motion: reduce) { .feed p { opacity: 1; } }
.wo-go { margin-top: 12px; align-self: flex-start; padding: 8px 16px; font-size: .84rem; }
/* moving bars on the portal mock-up (home) */
.mock.scan .mock-bars i { transform-origin: bottom; animation: barH 2.6s ease-in-out infinite alternate; }
.mock.scan .mock-bars i:nth-child(2) { animation-delay: -.6s; } .mock.scan .mock-bars i:nth-child(3) { animation-delay: -1.2s; } .mock.scan .mock-bars i:nth-child(4) { animation-delay: -1.8s; } .mock.scan .mock-bars i:nth-child(5) { animation-delay: -2.2s; }
@keyframes barH { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.home #hub .section-head { margin-bottom: 18px; }
@media (max-width: 560px) { #wo3d { min-height: 300px; } }

/* ==========================================================================
   Home "control room": everything on one screen (index.html)
   left = headline · centre = live tabs · right = portal + module details
   ========================================================================== */
.home section.console { padding: 12px max(16px, calc((100vw - 1480px) / 2)) 10px; }
.console { position: relative; height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 600px; max-height: 1240px; display: grid; grid-template-columns: minmax(250px, 22%) minmax(0, 1fr) minmax(270px, 25%); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; overflow: hidden; color: #e2e8f0; background: radial-gradient(900px 500px at 10% -10%, rgba(79, 70, 229, .4), transparent 60%), radial-gradient(800px 500px at 100% 20%, rgba(6, 182, 212, .22), transparent 60%), var(--navy); }
.console::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.con-bg { position: absolute; left: -10%; top: -10%; width: 55%; height: 120%; opacity: .45; pointer-events: none; }
.con-bg #hero3d { position: absolute; inset: 0; }
.con-left, .con-mid, .con-right, .con-ticker { position: relative; z-index: 1; min-height: 0; }
.con-left { display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 4px 2px; }
.con-left .eyebrow { margin: 0; }
.con-left h1 { color: #fff; font-size: clamp(1.25rem, 1.9vw, 1.9rem); margin: 0; }
.con-left .lead { color: #cbd5e1; font-size: .82rem; margin: 0; }
.con-left .hero-cta { margin: 0; gap: 8px; }
.con-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.con-kpis div { position: relative; overflow: hidden; border: 1px solid rgba(129, 140, 248, .3); border-radius: 12px; padding: 7px 10px; background: rgba(14, 23, 51, .65); }
.con-kpis b { display: block; font: 800 1.05rem var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.con-kpis span { font-size: .7rem; color: #a7b4cc; }
.con-kpis div::after { content: ""; position: absolute; left: -40%; bottom: 0; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, transparent); animation: sweep 3s linear infinite; }
.con-kpis div:nth-child(2)::after { animation-delay: -.75s; } .con-kpis div:nth-child(3)::after { animation-delay: -1.5s; } .con-kpis div:nth-child(4)::after { animation-delay: -2.25s; }
.con-sol { border: 1px solid rgba(52, 211, 153, .35); border-radius: 14px; padding: 10px 12px; background: rgba(6, 78, 59, .18); font-size: .78rem; color: #a7b4cc; }
.con-sol .eyebrow { color: #6ee7b7; font-size: .62rem; }
.con-sol p { margin: 2px 0 6px; }
.con-sol a { color: #6ee7b7; font-weight: 700; }

/* centre: tabs + panes */
.con-mid { display: flex; flex-direction: column; border: 1px solid rgba(129, 140, 248, .3); border-radius: 18px; background: rgba(7, 13, 31, .7); overflow: hidden; box-shadow: 0 0 60px -20px rgba(79, 70, 229, .6); }
.con-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px; border-bottom: 1px solid rgba(129, 140, 248, .2); background: rgba(14, 23, 51, .7); }
.con-tabs button { position: relative; overflow: hidden; white-space: nowrap; font: inherit; font-size: .73rem; font-weight: 700; color: #c7d2fe; background: rgba(99, 102, 241, .08); border: 1px solid rgba(129, 140, 248, .25); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.con-tabs button:hover { background: rgba(99, 102, 241, .22); }
.con-tabs button.on { background: var(--grad); color: #fff; border-color: transparent; }
.con-tabs.auto button.on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #fff; transform-origin: left; animation: tabprog var(--tab-ms, 9s) linear forwards; }
@keyframes tabprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.con-panes { position: relative; flex: 1; min-height: 0; }
.pane { position: absolute; inset: 0; padding: 10px 12px 12px; display: none; flex-direction: column; gap: 10px; overflow: hidden; }
.pane.on { display: flex; animation: paneIn .45s ease; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.pane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pane-head b { color: #fff; font: 700 .98rem var(--font-head); }
.pane-head span { font-size: .72rem; color: #94a3b8; }
.console #wo3d { flex: 1; min-height: 0; border: 0; border-radius: 12px; }
.console #wo3d .hint { display: none; }
.console .stack-hub { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; }
.console #stack3d { min-height: 0; height: 100%; }
.console .stack-panel { padding: 10px; gap: 8px; }
.console .stack-btns button { font-size: .74rem; padding: 6px 9px; }
.console #stack-info { font-size: .76rem; min-height: 0; }
.console .stack-note { font-size: .7rem; }
.console .pipe-wrap { padding: 10px; flex: none; }
.console .pipe-steps { margin-top: 0; }
.console .pipe-steps div { font-size: .76rem; }
.console .duo { flex: 1; min-height: 0; gap: 10px; }
.console .panel { padding: 12px; overflow: hidden; }
.console .panel h3 { font-size: .9rem; }
.console .story-steps { font-size: .7rem; }
.console .ba-list { font-size: .78rem; gap: 5px; }
.console .bento { flex: 1; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.console .tile { display: flex; flex-direction: column; padding: 10px 12px; min-height: 0; }
.console .viz { flex: 1; min-height: 60px; height: auto; }
.console .tile h3 { font-size: .86rem; margin: 8px 0 2px; }
.console .tile p { font-size: .74rem; }
.console .steps { gap: 10px; }
.console .step { padding-top: 34px; }
.console .step::before { font-size: 1.4rem; }
.console .step h3 { color: #fff; font-size: .9rem; }
.console .step p { color: #a7b4cc; font-size: .78rem; }
.console .pills { justify-content: flex-start; margin: 0; }
.console .pill { background: rgba(14, 23, 51, .8); border-color: rgba(129, 140, 248, .3); color: #c7d2fe; font-size: .74rem; padding: 4px 11px; }
.console .cta-band { padding: 16px 20px; border-radius: 16px; margin-top: auto; }
.console .cta-band h2 { font-size: 1.05rem; }
.console .cta-band p { font-size: .8rem; }

/* right: portal + module details */
.con-right { display: flex; flex-direction: column; gap: 10px; }
.con-right .frame3d { flex: none; }
.console .mock { grid-template-columns: 1fr; min-height: 0; font-size: .68rem; }
.console .mock-side { display: none; }
.console .mock-main { padding: 10px; gap: 8px; }
.console .mock-kpis div { padding: 6px; }
.console .mock-kpis b { font-size: 1rem; }
.console .mock-row { grid-template-columns: 1.4fr 1fr; gap: 8px; }
.console .mock-box { padding: 8px; }
.console .mock-flag { padding: 5px; margin-bottom: 4px; }
.console .mock-bars { height: 70px; }
.console .wo-panel { flex: 1; min-height: 0; padding: 12px; gap: 6px; border-radius: 16px; overflow: hidden; }
.console .wo-panel h3 { font-size: .78rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; }
.console #wo-info { flex: none; min-height: 0; font-size: .78rem; }
.console .wo-links { display: none; }
.console #wo-info p { margin: 6px 0 0; }
.console .wo-badge { font-size: .9rem; padding: 3px 12px; }
.console .wo-go { margin-top: 8px; padding: 6px 12px; font-size: .76rem; }
.console .wo-chips { gap: 4px; }
.console .wo-chips button { font-size: .68rem; padding: 3px 8px; }
.con-ticker { grid-column: 1 / -1; }
.con-ticker .ticker { margin: 0; }

/* shorter screens: trim the extras so it still fits */
@media (max-height: 820px) and (min-width: 1081px) {
  .con-sol, .console .story-steps, .console .stack-note, .console .pipe-steps { display: none; }
  .console .mock-bars { height: 50px; }
  .con-left .lead { font-size: .78rem; }
  .console .wo-chips { display: none; }
}
/* tablets and phones: one column, the page scrolls */
@media (max-width: 1080px) {
  .console { height: auto; max-height: none; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .con-bg { width: 100%; height: 420px; }
  .con-panes { flex: none; }
  .pane { position: relative; inset: auto; overflow: visible; }
  .console #wo3d { flex: none; height: 360px; }
  .console .stack-hub { grid-template-columns: 1fr; }
  .console #stack3d { height: 320px; }
  .console .bento { grid-template-rows: none; }
  .console .viz { flex: none; height: 90px; }
  .con-right { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 700px) {
  .con-right { grid-template-columns: 1fr; }
  .console .duo { grid-template-columns: 1fr; }
  .console .viz { height: 76px; }
  .console #wo3d { height: 300px; }
  .con-tabs button { font-size: .72rem; padding: 5px 9px; }
}

/* Work One control room panes (workone.html) */
.console .crumbs { margin: 0; font-size: .72rem; }
.console .scr-stage { flex: 1; min-height: 0; display: grid; align-items: center; }
.console .scr-rig { height: 240px; }
.console .fw { flex: 1; min-height: 0; margin: 0; grid-template-columns: 1fr 90px 1.05fr; }
.console .fw + .fw { margin-top: 0; }
.console .doc { padding: 9px 12px 9px 48px; font-size: .78rem; }
.console .doc::before { left: 10px; top: 10px; width: 26px; height: 26px; }
.console .doc b { font-size: .82rem; }
.console .fw-docs { gap: 8px; }
.console .fw-ai { min-height: 0; }
.console .flag { font-size: .78rem; padding: 12px 14px; }
.console .flag b { font-size: .88rem; }
.console .flag p { margin: 4px 0 6px; }
.console .schematic-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px; overflow: hidden; }
.console .schematic-wrap svg { min-width: 0; max-height: 100%; }
.console .score-grid { flex: 1; min-height: 0; gap: 16px; grid-template-columns: .9fr 1.1fr; }
.console #wo-radar { max-width: 300px; max-height: 100%; }
.console .score-card { padding: 14px; }
.console .ring { width: 84px; height: 84px; }
.console .ring b { font-size: 1.6rem; }
.console .wo-bar { grid-template-columns: 140px 1fr 30px; font-size: .76rem; margin: 4px 0; }
.console .emp-tabs button { font-size: .76rem; padding: 5px 12px; }
.console .mgrid { flex: 1; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
.console .mcard { padding: 8px 10px; gap: 1px; min-height: 0; overflow: hidden; }
.console .mcard-ico { width: 30px; height: 30px; font-size: .95rem; border-radius: 9px; margin-bottom: 3px; }
.console .mcard b { font-size: .82rem; }
.console .mcard-t { display: none; }
.console .mcard-flow { font-size: .66rem; }
.console .mcard-go { font-size: .68rem; padding-top: 2px; }
@media (max-height: 760px) and (min-width: 1081px) { .console .fw-ai small, .console .flag .acts { display: none; } .console .scr-rig { height: 210px; } }
@media (max-width: 1080px) {
  .console .fw { grid-template-columns: 1fr; }
  .console .score-grid { grid-template-columns: 1fr; }
  .console .mgrid { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .console .scr-rig { height: auto; }
  .console .schematic-wrap { overflow-x: auto; }
  .console .schematic-wrap svg { min-width: 640px; }
}
@media (max-width: 700px) { .console .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .console .mcard-t { display: none; } }
.console .mcard.reveal { opacity: 1; transform: none; }
.console .score-grid > div:first-child { padding: 0 46px; }
.console .doc { color: var(--ink); }
.console .doc b { color: var(--ink); }

/* moving key-features strips (workone.html) */
.con-feats { grid-column: 1 / -1; position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(167, 139, 250, .3); border-radius: 999px; padding: 4px 6px 4px 14px; background: rgba(30, 27, 75, .55); }
.con-feats .ticker-tag { color: #c4b5fd; }
.kf-move { display: flex; width: max-content; animation: tick 50s linear infinite; }
.kf-move > div { display: flex; }
.con-feats:hover .kf-move, .kf-row:hover .kf-move { animation-play-state: paused; }
.kf { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 3px 11px 3px 4px; border: 1px solid rgba(129, 140, 248, .35); border-radius: 999px; background: rgba(14, 23, 51, .8); white-space: nowrap; font-size: .74rem; color: #e2e8f0; }
.kf i { font-style: normal; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(99, 102, 241, .3); font-size: .72rem; }
.kf b { font-weight: 600; }
.home .kf-sec { padding: 34px 0; overflow: hidden; }
.kf-rows { display: grid; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kf-row { overflow: hidden; }
.kf-row .kf-move { animation-duration: 42s; }
.kf-row.rev .kf-move { animation-direction: reverse; }
.kf-card { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; padding: 10px 16px 10px 10px; border: 1px solid rgba(129, 140, 248, .35); border-radius: 14px; background: linear-gradient(160deg, rgba(30, 27, 75, .7), rgba(14, 23, 51, .9)); white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.kf-card:hover { border-color: #22d3ee; box-shadow: 0 0 22px -6px #22d3ee; }
.kf-card i { font-style: normal; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-size: 1.05rem; background: linear-gradient(145deg, #6366f1, #312e81); box-shadow: 0 6px 0 -2px #1e1b4b, inset 0 1px 0 rgba(255, 255, 255, .3); transform: perspective(200px) rotateX(12deg); }
.kf-card b { display: block; color: #fff; font-size: .86rem; }
.kf-card small { color: #a7b4cc; font-size: .74rem; }
@media (max-width: 560px) { .con-feats .ticker-tag { display: none; } .con-feats { padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .kf-move { animation: none; } .con-feats .ticker-track, .kf-row { overflow-x: auto; } }

/* Home first screen: hero + digitalisation diagram fit one screen (index.html) */
.home .hero.hero-fit { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); display: flex; flex-direction: column; justify-content: center; padding: 14px 0 12px; }
.hero-fit .hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; align-items: center; }
.hero-fit h1 { font-size: clamp(1.4rem, 2.3vw, 2.1rem); }
.hero-fit .lead { font-size: .88rem; }
.hero-right { position: relative; }
.hero-right .hero-bg { position: absolute; inset: -30px -20px; min-height: 0; opacity: .55; pointer-events: none; }
.hero-right .hero-bg .float-chip { opacity: .95; }
.hero-right .hero-bg .c1 { top: -6px; left: 4%; } .hero-right .hero-bg .c2 { top: 30%; right: -10px; } .hero-right .hero-bg .c3 { bottom: -10px; left: 30%; }
.hero-pipe { position: relative; z-index: 1; }
.hero-pipe .eyebrow { font-size: .64rem; margin-bottom: 6px; }
.hero-pipe .pipe-wrap { padding: 10px; background: rgba(7, 13, 31, .7); backdrop-filter: blur(2px); }
.hero-pipe .pipe-steps { margin-top: 8px; gap: 8px; }
.hero-pipe .pipe-steps div { font-size: .72rem; padding-left: 9px; line-height: 1.4; }
.hero-pipe .pipe-steps b { font-size: .78rem; }
.hero-fit .kpi-strip { margin-top: 14px; }
@media (max-height: 760px) and (min-width: 961px) { .hero-fit .hero-tags, .hero-pipe .pipe-steps div { font-size: .68rem; } .hero-fit .lead { font-size: .82rem; } .hero-fit .kpi-strip div { padding: 6px 12px; } }
@media (max-width: 960px) { .home .hero.hero-fit { min-height: 0; } .hero-fit .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-right .hero-bg { position: relative; inset: auto; height: 240px; opacity: 1; } }

/* ==========================================================================
   Moving background on every page: soft glows drift, a grid slides, and the
   colours blend between dark themes as you scroll (assets/js/main.js adds
   the .bg-fx layer and sets --fx-base / --fx-1 / --fx-2 / --fx-3)
   ========================================================================== */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--fx-base, #070d1f); --fx-1: #4f46e5; --fx-2: #06b6d4; --fx-3: #8b5cf6; }
.bg-fx i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .32; animation: fxdrift 30s ease-in-out infinite alternate; will-change: transform; }
.bg-fx i:nth-child(1) { left: -22vmax; top: -26vmax; background: radial-gradient(circle, var(--fx-1), transparent 62%); }
.bg-fx i:nth-child(2) { right: -26vmax; top: 18vh; background: radial-gradient(circle, var(--fx-2), transparent 62%); animation-duration: 37s; animation-delay: -12s; }
.bg-fx i:nth-child(3) { left: 18vw; bottom: -34vmax; background: radial-gradient(circle, var(--fx-3), transparent 62%); animation-duration: 44s; animation-delay: -22s; }
.bg-fx b { position: absolute; inset: -60px; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 56px 56px; animation: fxgrid 26s linear infinite; }
@keyframes fxdrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9vw, 7vh) scale(1.15); } 100% { transform: translate(-7vw, 12vh) scale(.92); } }
@keyframes fxgrid { to { transform: translate(56px, 56px); } }
@media (prefers-reduced-motion: reduce) { .bg-fx i, .bg-fx b { animation: none; } }

/* sections let the moving background show through */
body { background: #070d1f; }
.hero, .blueprint, .console { background-color: transparent; }
.dark { background: rgba(3, 6, 18, .38); }
.alt { background: rgba(255, 255, 255, .025); }
.site-footer { background: rgba(3, 6, 15, .78); backdrop-filter: blur(6px); }
a { color: #a5b4fc; }

/* former white parts, now dark glass */
.card { background: linear-gradient(160deg, rgba(30, 27, 75, .5), rgba(14, 23, 51, .8)); border-color: rgba(129, 140, 248, .25); }
.card:hover { border-color: #22d3ee; }
.sol { background: linear-gradient(160deg, rgba(30, 27, 75, .5), rgba(14, 23, 51, .82)); }
.pill { background: rgba(14, 23, 51, .75); color: #c7d2fe; }
.watch div { background: rgba(14, 23, 51, .75); border-color: rgba(129, 140, 248, .4); }
.mod-nav a { background: rgba(14, 23, 51, .8); }
.mod-nav a:hover { border-color: #22d3ee; }
.form input, .form textarea, .form select { background: rgba(7, 13, 31, .65); color: #e2e8f0; border-color: rgba(129, 140, 248, .3); }
.form select option { background: #0b1226; }
.form input::placeholder, .form textarea::placeholder { color: #64748b; }
.fw-ai small { color: #a5b4fc; }
/* the example bills stay white "paper", with dark text */
.doc, .console .doc, .doc b, .console .doc b { color: #0f172a; }
.doc span { color: #64748b; }
.doc::before { background: #eef2ff; }

/* ---------- Plant One page (plantone.html) – chemical plant operations ---------- */
#plant3d { position: relative; border-radius: 12px; background: radial-gradient(600px 300px at 50% 60%, rgba(249, 115, 22, .16), transparent 70%); overflow: hidden; cursor: grab; }
#plant3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#plant3d .hint { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; color: #94a3b8; z-index: 1; pointer-events: none; }
.console #plant3d { flex: 1; min-height: 0; }
.wo-chips button.on { background: var(--grad); color: #fff; border-color: transparent; }
.pl-ai { color: #fdba74; }
.console #pl-info { flex: none; font-size: .78rem; }
.console #pl-info p { margin: 6px 0 0; }

/* tank stock */
.tank-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.tanks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.tank { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; color: #94a3b8; text-align: center; }
.tank-body { position: relative; width: 100%; max-width: 64px; flex: 1; min-height: 110px; border: 2px solid color-mix(in srgb, var(--c) 70%, transparent); border-radius: 30px / 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); overflow: hidden; box-shadow: 0 0 22px -8px var(--c); }
.tank .liq { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lv) * 1%); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 55%, #000)); transition: height 1.2s ease; }
.tank .liq::before { content: ""; position: absolute; left: -50%; top: -6px; width: 200%; height: 12px; border-radius: 45%; background: color-mix(in srgb, var(--c) 85%, #fff); animation: wave 3s linear infinite; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(25%); } }
.tank .reo { position: absolute; left: 0; right: 0; border-top: 2px dashed #fb7185; z-index: 1; }
.tank b { color: #fff; font-size: .74rem; margin-top: 4px; }
.tank em { font-style: normal; font-weight: 800; color: var(--c); font-size: .8rem; }
.tank.low .tank-body { border-color: #fb7185; animation: lowblink 1s ease-in-out infinite alternate; }
.tank.low em { color: #fb7185; }
@keyframes lowblink { to { box-shadow: 0 0 26px -2px #fb7185; } }
.stock-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stock-alert { font-size: .74rem; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .1); color: #bbf7d0; }
.stock-alert.bad { border-color: rgba(251, 113, 133, .5); background: rgba(251, 113, 133, .12); color: #fecdd3; }
.stock-tbl { width: 100%; border-collapse: collapse; font-size: .72rem; }
.stock-tbl th { text-align: left; color: #94a3b8; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.stock-tbl td { padding: 5px 6px; border-bottom: 1px solid rgba(129, 140, 248, .1); color: #e2e8f0; }
.stock-tbl i { font-style: normal; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.stock-tbl .ok { color: #4ade80; background: rgba(74, 222, 128, .12); }
.stock-tbl .warn { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.stock-tbl .bad { color: #fb7185; background: rgba(251, 113, 133, .14); }

/* production plan */
.gantt { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; font-size: .68rem; }
.g-head, .g-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; }
.g-head div { display: grid; grid-template-columns: repeat(6, 1fr); color: #94a3b8; }
.g-head i { font-style: normal; border-left: 1px solid rgba(129, 140, 248, .2); padding-left: 4px; }
.g-row { flex: 1; min-height: 26px; }
.g-row > span { color: #c7d2fe; font-weight: 700; }
.g-row > div { position: relative; height: 100%; min-height: 26px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(129, 140, 248, .07) 0 calc(100% / 6 - 1px), rgba(129, 140, 248, .2) calc(100% / 6 - 1px) calc(100% / 6)); }
.g-row b { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; padding: 0 6px; border-radius: 6px; overflow: hidden; white-space: nowrap; color: #fff; font-weight: 600; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 40%, #0b1226)); border: 1px solid var(--c); }
.g-row b.cl { --c: #64748b; color: #cbd5e1; }
.g-row b.idle { --c: #fbbf24; background: repeating-linear-gradient(45deg, rgba(251, 191, 36, .15) 0 6px, transparent 6px 12px); color: #fde68a; }
.g-row b.late { animation: lowblink 1s ease-in-out infinite alternate; }
.g-now { position: absolute; top: 0; bottom: 0; left: 70px; width: 2px; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: gnow 24s linear infinite; }
@keyframes gnow { from { left: 70px; } to { left: calc(100% - 2px); } }
.g-notes { display: flex; flex-wrap: wrap; gap: 6px; font-size: .7rem; }
.g-notes span { padding: 3px 9px; border-radius: 999px; background: rgba(99, 102, 241, .12); border: 1px solid rgba(129, 140, 248, .3); color: #c7d2fe; }

/* quality */
.q-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.spc-card { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#spc { width: 100%; flex: 1; min-height: 0; }
#spc text { fill: #94a3b8; font-size: 10px; }
#spc .lim { stroke: #fb7185; stroke-dasharray: 5 4; }
#spc .mean { stroke: #4ade80; stroke-dasharray: 2 4; }
.spc-status { font-size: .74rem; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .1); color: #bbf7d0; }
.spc-status.bad { border-color: #fb7185; background: rgba(251, 113, 133, .14); color: #fecdd3; }
.qc-list { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: rgba(14, 23, 51, .6); font-size: .74rem; }
.qc-list h5 { margin: 0 0 6px; color: #fff; font-size: .8rem; }
.qc-list p { display: grid; grid-template-columns: 1fr auto 18px; gap: 6px; margin: 0; padding: 5px 0; border-bottom: 1px solid rgba(129, 140, 248, .12); color: #94a3b8; }
.qc-list b { color: #e2e8f0; font-weight: 600; }
.qc-list i { font-style: normal; color: #4ade80; font-weight: 800; opacity: 0; animation: qtick 6s ease infinite; }
.qc-list p:nth-of-type(2) i { animation-delay: .5s; } .qc-list p:nth-of-type(3) i { animation-delay: 1s; } .qc-list p:nth-of-type(4) i { animation-delay: 1.5s; } .qc-list p:nth-of-type(5) i { animation-delay: 2s; } .qc-list p:nth-of-type(6) i { animation-delay: 2.5s; }
@keyframes qtick { 0%, 8% { opacity: 0; transform: scale(2); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* hazmat delivery */
.route-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.route-map { min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 13, 31, .6); display: grid; place-items: center; overflow: hidden; }
.route-map svg { width: 100%; height: 100%; max-height: 100%; }
.route-line { stroke-dasharray: 10 6; animation: flow 1.4s linear infinite; }
.read-card { border: 1px solid rgba(249, 115, 22, .4); border-radius: 12px; padding: 10px; background: rgba(14, 23, 51, .7); font-size: .72rem; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.read-card h5 { margin: 0; color: #fff; font-size: .82rem; }
.haz { display: flex; gap: 8px; align-items: center; margin: 0; color: #fed7aa; }
.haz i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #111; background: #fff; border: 2px solid #111; outline: 2px solid #fff; transform: rotate(45deg); }
.reads { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reads div { border-radius: 8px; padding: 6px; background: rgba(99, 102, 241, .1); border: 1px solid rgba(129, 140, 248, .2); }
.reads b { display: block; color: #fff; font: 800 .95rem var(--font-head); }
.reads span { color: #94a3b8; font-size: .66rem; }
.ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; color: #cbd5e1; }
.ev li { animation: paneIn .4s ease; }

/* sections below the control room */
.stage-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.safe-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
.gate-card { border: 1px solid rgba(249, 115, 22, .35); border-radius: 20px; padding: 10px; background: rgba(7, 13, 31, .55); }
.gate-card svg { width: 100%; height: auto; display: block; }
.gchk circle { fill: #0b1226; stroke: #64748b; stroke-width: 2; animation: gchk 6s ease infinite; animation-delay: var(--d); }
.gchk text { fill: #cbd5e1; font-size: 12px; }
@keyframes gchk { 0%, 10% { fill: #0b1226; stroke: #64748b; } 16%, 92% { fill: #4ade80; stroke: #bbf7d0; } 100% { fill: #0b1226; stroke: #64748b; } }
.gate-bar .boom { transform-origin: 424px 163px; animation: boom 6s ease infinite; }
@keyframes boom { 0%, 78% { transform: rotate(0); fill: #fb7185; } 84%, 96% { transform: rotate(-70deg); fill: #4ade80; } 100% { transform: rotate(0); } }
.gate-ok { fill: #4ade80; font: 800 14px var(--font); opacity: 0; animation: gateok 6s ease infinite; }
@keyframes gateok { 0%, 80% { opacity: 0; } 86%, 96% { opacity: 1; } 100% { opacity: 0; } }
.ghs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; perspective: 600px; }
.ghs-d { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: .68rem; color: #cbd5e1; }
.ghs-d i { width: 42px; height: 42px; display: grid; place-items: center; margin-top: 8px; font-style: normal; font-size: 1.1rem; background: #fff; border: 3px solid #dc2626; transform: rotate(45deg); box-shadow: 0 8px 18px -6px rgba(220, 38, 38, .7); animation: ghs 5s ease-in-out infinite; }
.ghs-d:nth-child(2n) i { animation-delay: -2.5s; }
@keyframes ghs { 0%, 100% { transform: rotateY(0) rotate(45deg); } 50% { transform: rotateY(180deg) rotate(45deg); } }
.small-checks li { font-size: .82rem; margin: 6px 0; }
.recall { animation: flow 1.6s linear infinite reverse; }
.pj-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
.pj-steps { gap: 14px; }
.pj-steps .step { padding-top: 40px; }
.pj-steps .step::before { font-size: 1.6rem; }
.pj-steps .step h3 { font-size: .95rem; }
.pj-steps .step p { font-size: .78rem; }
.iso-card { position: relative; border: 1px solid rgba(129, 140, 248, .3); border-radius: 20px; padding: 10px; background: radial-gradient(400px 220px at 50% 55%, rgba(249, 115, 22, .14), transparent 70%), rgba(7, 13, 31, .5); }
.iso-svg { width: 100%; height: auto; display: block; }
.iso-pipe { fill: none; stroke: #334155; stroke-width: 5; stroke-linejoin: round; }
.iso-flow { fill: none; stroke: #67e8f9; stroke-width: 2; stroke-dasharray: 4 8; animation: flow 1.2s linear infinite; }
@media (max-width: 1080px) {
  .console #plant3d { flex: none; height: 380px; }
  .tank-grid, .q-grid, .route-grid { grid-template-columns: 1fr; }
  .route-map { height: 260px; }
  .gantt { min-height: 240px; }
  #spc { height: 220px; flex: none; }
  .stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .safe-grid, .pj-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .console #plant3d { height: 260px; }
  .tanks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tank-body { flex: none; height: 110px; min-height: 0; }
  .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ghs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-row b { font-size: .6rem; padding: 0 3px; }
  .pj-steps { grid-template-columns: 1fr 1fr; }
}
.console .schematic-wrap svg.tall { width: auto; height: 100%; max-width: 100%; }
@media (max-width: 1080px) { .console .schematic-wrap svg.tall { min-width: 0; width: 100%; max-width: 520px; height: auto; } }
.q-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.qc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; }
.qc-list h5 { grid-column: 1 / -1; }
@media (max-width: 700px) { .qc-list { grid-template-columns: 1fr; } }
.route-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.read-card { display: grid; grid-template-columns: 1fr 1.3fr 1.1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 6px; align-items: start; }
.read-card h5 { grid-column: 1; grid-row: 1; }
.read-card .haz { grid-column: 1; grid-row: 2; }
.read-card .reads { grid-column: 2; grid-row: 1 / 3; }
.read-card .ev { grid-column: 3; grid-row: 1 / 3; }
@media (max-width: 700px) { .read-card { grid-template-columns: 1fr; } .read-card h5, .read-card .haz, .read-card .reads, .read-card .ev { grid-column: 1; grid-row: auto; } }
.pl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 4px; }
.pl-chips span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(249, 115, 22, .4); background: rgba(249, 115, 22, .08); color: #fed7aa; animation: plchip 5s ease-in-out infinite; }
.pl-chips span:nth-child(2) { animation-delay: .5s; } .pl-chips span:nth-child(3) { animation-delay: 1s; } .pl-chips span:nth-child(4) { animation-delay: 1.5s; } .pl-chips span:nth-child(5) { animation-delay: 2s; } .pl-chips span:nth-child(6) { animation-delay: 2.5s; } .pl-chips span:nth-child(7) { animation-delay: 3s; } .pl-chips span:nth-child(8) { animation-delay: 3.5s; } .pl-chips span:nth-child(9) { animation-delay: 4s; } .pl-chips span:nth-child(10) { animation-delay: 4.5s; }
@keyframes plchip { 0%, 14%, 100% { background: rgba(249, 115, 22, .08); color: #fed7aa; } 6% { background: #f97316; color: #fff; } }
@media (prefers-reduced-motion: reduce) { .pl-chips span { animation: none; } }

/* ---------- JRM page (jrm.html) – journey risk management ---------- */
#jrm3d { position: relative; border-radius: 12px; background: radial-gradient(600px 300px at 50% 60%, rgba(34, 197, 94, .14), transparent 70%); overflow: hidden; cursor: grab; }
#jrm3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#jrm3d .hint { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; color: #94a3b8; z-index: 1; pointer-events: none; }
.console #jrm3d { flex: 1; min-height: 0; }
.console #jr-now { flex: none; font-size: .78rem; }
.console #jr-now p { margin: 6px 0 0; }
#jr-chips { max-height: 120px; overflow: auto; }
/* report card on the right */
.jr-report { border-radius: 16px; border: 1px solid rgba(34, 197, 94, .4); background: linear-gradient(160deg, rgba(20, 83, 45, .35), rgba(11, 18, 38, .95)); padding: 12px; font-size: .72rem; color: #a7b4cc; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 40px -14px rgba(34, 197, 94, .6); }
.jr-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.jr-top small { display: block; color: #86efac; letter-spacing: .08em; text-transform: uppercase; font-size: .62rem; }
.jr-top b { display: block; color: #fff; font: 700 .95rem var(--font-head); margin: 2px 0; }
.jr-gauge { width: 74px; height: 74px; flex: none; }
.jr-arc { animation: jrarc 2.4s ease-out; }
@keyframes jrarc { from { stroke-dashoffset: 251; } }
.jr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.jr-stats div { border-radius: 8px; padding: 5px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(129, 140, 248, .18); }
.jr-stats b { display: block; color: #fff; font: 800 1rem var(--font-head); }
.jr-stats b.r { color: #fb7185; }
.jr-haz p { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 0; border-top: 1px solid rgba(129, 140, 248, .12); color: #cbd5e1; }
.jr-haz i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.jr-haz i.r { background: #fb7185; box-shadow: 0 0 8px #fb7185; } .jr-haz i.y { background: #fbbf24; } .jr-haz i.g { background: #4ade80; }
.jr-haz em { margin-left: auto; font-style: normal; font-size: .62rem; text-transform: uppercase; color: #94a3b8; }
/* risk profile */
.rp-card { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#rp { width: 100%; flex: 1; min-height: 0; }
#rp .rp-haz { cursor: pointer; }
.rp-now { font-size: .74rem; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .08); color: #cbd5e1; }
.rp-now b { color: #fff; } .rp-now i { font-style: normal; font-weight: 700; }
/* route finder */
.find-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.find-form { display: flex; flex-direction: column; gap: 10px; font-size: .74rem; color: #94a3b8; }
.find-form label { display: flex; flex-direction: column; gap: 4px; }
.find-form select { font: inherit; font-size: .8rem; color: #e2e8f0; background: rgba(14, 23, 51, .9); border: 1px solid rgba(129, 140, 248, .35); border-radius: 10px; padding: 8px; }
.find-form .btn { margin-top: 4px; }
.find-res { min-width: 0; }
.find-card { border-radius: 16px; border: 1px solid rgba(34, 197, 94, .45); background: linear-gradient(160deg, rgba(20, 83, 45, .3), rgba(11, 18, 38, .9)); padding: 14px; font-size: .78rem; color: #a7b4cc; }
.find-top { display: flex; justify-content: space-between; align-items: center; }
.find-ok { color: #4ade80; font-weight: 800; }
.find-card h4 { margin: 8px 0 2px; color: #fff; font: 700 1.05rem var(--font-head); }
.find-veh { margin: 0 0 10px; color: #86efac; }
.find-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.find-stats div { border-radius: 10px; padding: 7px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(129, 140, 248, .18); font-size: .68rem; }
.find-stats b { display: block; color: #fff; font: 800 1rem var(--font-head); }
.find-risk { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 12px 0 8px; }
.find-risk i { height: 8px; border-radius: 999px; background: rgba(129, 140, 248, .18); overflow: hidden; }
.find-risk em { display: block; height: 100%; border-radius: 999px; animation: grow 1s ease-out; }
@keyframes grow { from { width: 0 !important; } }
.find-inc { margin: 0 0 10px; }
.find-msg { color: #fbbf24; }
/* what's inside: a fanned stack of report pages */
.inside-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; align-items: center; }
.sheets { position: relative; height: 100%; min-height: 220px; perspective: 900px; }
.sheet { position: absolute; left: 50%; top: 50%; width: 170px; height: 110px; margin: -55px 0 0 -85px; border-radius: 10px; padding: 10px; border: 1px solid var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #0e1733), #0b1226); box-shadow: 0 20px 30px -18px #000, 0 0 20px -8px var(--c); transform: rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 14px)); animation: fan 6s ease-in-out infinite; }
.sheet b { display: block; color: #fff; font-size: .78rem; margin-bottom: 8px; }
.sheet i { display: block; height: 5px; margin: 6px 0; border-radius: 3px; background: color-mix(in srgb, var(--c) 45%, transparent); }
.sheet i:nth-of-type(2) { width: 70%; } .sheet i:nth-of-type(3) { width: 45%; }
@keyframes fan { 0%, 15%, 100% { transform: rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 14px)); } 45%, 70% { transform: rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 42px)) translateX(calc(var(--i) * 6px)); } }
.inside-list { margin: 0; padding-left: 18px; font-size: .78rem; color: #a7b4cc; display: grid; gap: 6px; }
.inside-list b { color: #fff; }
/* coverage map */
.cover-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: center; }
#cover { width: 100%; height: 100%; max-height: 100%; min-height: 0; }
.cv-line { fill: none; stroke: rgba(34, 211, 238, .35); stroke-width: 1.2; stroke-dasharray: 4 5; animation: flow 2s linear infinite; }
.cv-line.long { stroke: rgba(167, 139, 250, .35); }
.cv-dot { fill: #67e8f9; }
.cv-city { fill: #4ade80; stroke: #052e16; stroke-width: 1.5; animation: cvp 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cvp { 50% { transform: scale(1.6); } }
.cv-name { fill: #a7b4cc; font-size: 8.5px; }
.cover-count b { display: block; font: 800 2.4rem var(--font-head); background: linear-gradient(90deg, #4ade80, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover-count span { font-size: .78rem; color: #cbd5e1; }
.cover-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; font-size: .74rem; color: #a7b4cc; }
.cover-list b { display: block; color: #fff; }
/* buy online */
.buy-flow { flex: none; }
.buy-flow svg { width: 100%; height: auto; display: block; }
.packs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pack { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid rgba(129, 140, 248, .3); background: linear-gradient(160deg, rgba(30, 27, 75, .55), rgba(11, 18, 38, .9)); font-size: .76rem; color: #a7b4cc; transform: perspective(600px) rotateX(6deg); transition: transform .25s, box-shadow .25s; }
.pack:hover { transform: perspective(600px) rotateX(0) translateY(-4px); box-shadow: 0 0 30px -10px #22c55e; }
.pack.hot { border-color: #22c55e; box-shadow: 0 0 30px -12px #22c55e; }
.pack-tag { position: absolute; top: 10px; right: 10px; font-size: .62rem; font-weight: 800; color: #052e16; background: #4ade80; border-radius: 999px; padding: 2px 8px; }
.pack-ico { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 12px; background: rgba(34, 197, 94, .18); border: 1px solid #22c55e; }
.pack b { color: #fff; font-size: .92rem; margin-top: 4px; }
.pack p { margin: 0 0 8px; }
.pack .btn { margin-top: auto; padding: 7px 12px; font-size: .78rem; text-align: center; }
.haz-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .console #jrm3d { flex: none; height: 380px; }
  #rp { flex: none; height: auto; }
  .find-grid, .inside-grid, .cover-grid { grid-template-columns: 1fr; }
  .sheets { height: 240px; }
  #cover { height: auto; max-height: 420px; }
  .haz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .console #jrm3d { height: 280px; }
  .packs { grid-template-columns: 1fr; }
  .find-stats { grid-template-columns: 1fr 1fr; }
  .haz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .cv-city, .cv-line { animation: none; } }
.jr-report { padding-bottom: 24px; }
.jr-report + .mock-tag { bottom: 5px; }
.find-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.find-pop { display: flex; flex-wrap: wrap; gap: 5px; }
.find-pop small { width: 100%; color: #94a3b8; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.find-pop button { font: inherit; font-size: .7rem; color: #bbf7d0; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .35); border-radius: 999px; padding: 4px 9px; cursor: pointer; }
.find-pop button:hover { background: rgba(34, 197, 94, .25); }
.packs { flex: none; }
.pay-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-strip span { font-size: .72rem; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .08); color: #bbf7d0; }
.cover-grid { grid-template-columns: 1.7fr 1fr; }
.cv-name { font-size: 7.5px; }
.packs { flex: 1; min-height: 0; }
.pack-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.pack-list li { position: relative; padding-left: 18px; color: #cbd5e1; }
.pack-list li::before { content: "✓"; position: absolute; left: 0; color: #4ade80; font-weight: 800; }
.jr-chips-home span { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .08); color: #bbf7d0; animation-name: jrchip; }
@keyframes jrchip { 0%, 14%, 100% { background: rgba(34, 197, 94, .08); color: #bbf7d0; } 6% { background: #16a34a; color: #fff; } }

/* About: founders */
.leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.leader { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 20px; border-radius: 20px; border: 1px solid rgba(129, 140, 248, .3); background: linear-gradient(160deg, rgba(30, 27, 75, .55), rgba(11, 18, 38, .9)); box-shadow: 0 0 40px -18px #6366f1; }
.leader h3 { margin: 0; color: #fff; font-size: 1.15rem; }
.leader .role { display: inline-block; margin: 4px 0 6px; font-size: .74rem; font-weight: 700; color: #67e8f9; letter-spacing: .06em; text-transform: uppercase; }
.leader p { margin: 0 0 8px; font-size: .82rem; color: #a7b4cc; }
.leader a { display: block; font-size: .8rem; margin-top: 2px; }
.orb { position: relative; width: 104px; height: 104px; display: grid; place-items: center; perspective: 400px; }
.orb b { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; font: 800 1.9rem var(--font-head); color: #fff; background: radial-gradient(circle at 30% 30%, #a5b4fc, #4f46e5 55%, #1e1b4b); box-shadow: 0 0 30px -4px #6366f1, inset 0 -8px 16px rgba(0, 0, 0, .4); }
.orb.c b { background: radial-gradient(circle at 30% 30%, #a5f3fc, #0891b2 55%, #083344); box-shadow: 0 0 30px -4px #22d3ee, inset 0 -8px 16px rgba(0, 0, 0, .4); }
.orb i { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(103, 232, 249, .55); transform: rotateX(70deg); animation: orbspin 6s linear infinite; }
.orb i + i { inset: 0; border-color: rgba(167, 139, 250, .5); transform: rotateY(70deg); animation-duration: 9s; animation-direction: reverse; }
@keyframes orbspin { to { transform: rotateX(70deg) rotateZ(360deg); } }
.orb i + i { animation-name: orbspin2; }
@keyframes orbspin2 { to { transform: rotateY(70deg) rotateZ(360deg); } }
@media (max-width: 700px) { .leaders { grid-template-columns: 1fr; } .leader { grid-template-columns: 84px 1fr; } .orb { width: 84px; height: 84px; } .orb b { width: 58px; height: 58px; font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .orb i { animation: none; } }

/* Solutions dropdown in the top menu */
.has-sub { position: relative; }
.sub { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 270px; display: none; flex-direction: column; gap: 2px; border-radius: 14px; border: 1px solid rgba(129, 140, 248, .3); background: rgba(7, 13, 31, .97); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .8); z-index: 50; }
.sub a { display: block; border-radius: 10px; white-space: nowrap; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: flex; }
@media (max-width: 880px) {
  .sub { position: static; display: flex; min-width: 0; border: 0; box-shadow: none; background: none; padding: 0 0 0 14px; }
  .sub a { font-size: .82rem; white-space: normal; }
}

/* ---------- Completed projects page (projects.html) + home project cards ---------- */
#proj3d { position: relative; border-radius: 12px; background: radial-gradient(600px 320px at 50% 65%, rgba(99, 102, 241, .22), transparent 70%); overflow: hidden; cursor: grab; }
#proj3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#proj3d .hint { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; color: #94a3b8; z-index: 1; pointer-events: none; }
.console #proj3d { flex: 1; min-height: 0; }
.pj-pane { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: center; }
.pj-vis { min-height: 0; height: 100%; display: grid; place-items: center; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: radial-gradient(400px 240px at 50% 55%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), rgba(7, 13, 31, .5); }
.pj-vis svg { width: 100%; max-height: 100%; }
.pj-side { font-size: .8rem; color: #a7b4cc; display: flex; flex-direction: column; gap: 10px; }
.pj-side p { margin: 0; }
.pj-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.pj-kpis div { border-radius: 10px; padding: 7px 8px; background: rgba(99, 102, 241, .1); border: 1px solid rgba(129, 140, 248, .25); }
.pj-kpis b { display: block; color: #fff; font: 800 1rem var(--font-head); }
.pj-kpis span { font-size: .66rem; color: #94a3b8; }
.pj-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pj-panel { flex: 1; }
.pj-tag { margin: 6px 0 0; font-size: .72rem; font-weight: 700; }
#pj-info { font-size: .8rem; }
#pj-info p { margin: 6px 0 0; }
.pj-thumbs { display: grid; gap: 8px; }
.pj-thumb { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, #0e1733), #0b1226); text-decoration: none !important; transition: box-shadow .2s, border-color .2s, transform .2s; }
.pj-thumb:hover, .pj-thumb.on { border-color: var(--c); box-shadow: 0 0 24px -8px var(--c); transform: translateX(-3px); }
.pj-thumb i { font-style: normal; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: 1.05rem; background: color-mix(in srgb, var(--c) 25%, #0b1226); border: 1px solid var(--c); transform: perspective(200px) rotateX(14deg); }
.pj-thumb b { display: block; color: #fff; font-size: .8rem; }
.pj-thumb small { color: #94a3b8; font-size: .66rem; }
.hub-node { animation: hubn 4s ease-in-out infinite; }
@keyframes hubn { 50% { opacity: .55; } }
/* home: three project cards */
.pj-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pj-hcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, #0e1733), #0b1226); text-decoration: none !important; transition: box-shadow .25s, border-color .25s; }
.pj-hcard:hover { border-color: var(--c); box-shadow: 0 0 40px -12px var(--c); }
.pj-hvis { padding: 6px; background: radial-gradient(300px 160px at 50% 55%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%); }
.pj-hvis svg { width: 100%; height: auto; display: block; }
.pj-htxt { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 14px; }
.pj-hico { font-size: 1.2rem; }
.pj-htxt b { color: #fff; font-size: .95rem; }
.pj-htxt small { color: #94a3b8; font-size: .72rem; }
@media (max-width: 1080px) {
  .console #proj3d { flex: none; height: 380px; }
  .pj-pane { grid-template-columns: 1fr; }
  .pj-vis { height: auto; }
  .pj-home { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .console #proj3d { height: 300px; }
  .pj-cards3, .pj-home { grid-template-columns: 1fr; }
}
.hero-tags a { font-size: .82rem; color: #fff; font-weight: 600; text-decoration: none; border: 1px solid #22d3ee; background: rgba(34, 211, 238, .12); border-radius: 999px; padding: 5px 12px; animation: tagpulse 3s ease-in-out infinite; }
.hero-tags a:hover { background: rgba(34, 211, 238, .3); }
.hero-tags a:nth-child(2) { border-color: #f97316; background: rgba(249, 115, 22, .12); animation-delay: -1s; }
.hero-tags a:nth-child(3) { border-color: #22c55e; background: rgba(34, 197, 94, .12); animation-delay: -2s; }
.home .hero-tags a { font-size: .72rem; padding: 3px 9px; }
@keyframes tagpulse { 50% { box-shadow: 0 0 14px -2px rgba(34, 211, 238, .55); } }
.pj-pane { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
.pj-side { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px 14px; align-items: center; }
.pj-side p { grid-row: 1 / 3; }
.pj-side .pj-kpis { margin: 0; }
@media (max-width: 700px) { .pj-side { grid-template-columns: 1fr; } .pj-side p { grid-row: auto; } }
.contact-list li > div { min-width: 0; overflow-wrap: anywhere; } .split > * { min-width: 0; }

/* ---------- compact 3D first screens: services, about, contact, solutions ---------- */
.svc-mini { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
.svc-mini.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid rgba(129, 140, 248, .3); background: linear-gradient(160deg, rgba(30, 27, 75, .55), rgba(11, 18, 38, .9)); color: #a7b4cc; text-decoration: none !important; font-size: .74rem; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; animation: tileglow 6s ease-in-out infinite; }
.svc-tile:nth-child(2n) { animation-delay: -1.5s; } .svc-tile:nth-child(3n) { animation-delay: -3s; } .svc-tile:nth-child(4n) { animation-delay: -4.5s; }
@keyframes tileglow { 50% { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 22px -10px #22d3ee; } }
.svc-tile:hover { border-color: #22d3ee; transform: translateY(-2px); }
.svc-tile .icon3d { width: 38px; height: 38px; margin: 0 0 4px; }
.svc-tile .icon3d svg { width: 20px; height: 20px; }
.svc-tile b { color: #fff; font-size: .84rem; }
.pj-why { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; font-size: .78rem; color: #cbd5e1; }
.pj-why li { padding: 6px 9px; border-radius: 10px; background: rgba(99, 102, 241, .08); border: 1px solid rgba(129, 140, 248, .18); }
.pj-cards3.big { flex: 1; min-height: 0; }
.pj-cards3.big .pj-hcard { min-height: 0; }
.radar-wrap { flex: 1; min-height: 0; display: grid; place-items: center; }
.radar { width: 100%; height: 100%; max-height: 100%; }
.radar-sweep { transform-origin: 290px 140px; animation: sweep360 4s linear infinite; }
@keyframes sweep360 { to { transform: rotate(360deg); } }
.office-card .radar { height: auto; border-radius: 12px; }
.office-card p { margin: 6px 0 2px; font-size: .78rem; color: #cbd5e1; }
.office-card a { display: block; font-size: .76rem; margin-top: 3px; }
.map-link { margin: 0; text-align: center; }
.con-form { flex: 1; min-height: 0; overflow: auto; }
.con-form .form { gap: 8px; }
.con-form textarea { min-height: 90px; }
.mini-leaders { display: grid; gap: 10px; }
.mini-leaders > div { display: flex; align-items: center; gap: 10px; }
.mini-leaders span { display: flex; flex-direction: column; font-size: .76rem; }
.mini-leaders b { color: #fff; font-size: .9rem; }
.mini-leaders small { color: #67e8f9; }
.orb.sm { width: 64px; height: 64px; flex: none; }
.orb.sm b { width: 44px; height: 44px; font-size: 1.2rem; }
.console .leaders { gap: 12px; max-width: none; }
.console .leader { padding: 14px; grid-template-columns: 90px 1fr; }
.console .leader p { font-size: .76rem; }
@media (max-width: 1080px) {
  .svc-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .radar { height: auto; }
  .console .con-form { overflow: visible; }
}
@media (max-width: 560px) { .svc-mini, .svc-mini.four { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .radar-sweep, .svc-tile { animation: none; } }

/* ---------- Factory One page (factoryone.html) ---------- */
#factory3d { position: relative; border-radius: 12px; background: radial-gradient(600px 300px at 50% 60%, rgba(239, 68, 68, .14), transparent 70%); overflow: hidden; cursor: grab; }
#factory3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#factory3d .hint { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; color: #94a3b8; z-index: 1; pointer-events: none; }
.console #factory3d { flex: 1; min-height: 0; }
.console #fx-info { flex: none; font-size: .78rem; }
.console #fx-info p { margin: 6px 0 0; }
.bays { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
.bay { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, #0e1733), #0b1226); font-size: .74rem; color: #a7b4cc; overflow: hidden; }
.bay.late { border-color: #fb7185; animation: lowblink 1s ease-in-out infinite alternate; }
.bay-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.bay-top b { color: #fff; font-size: .9rem; }
.bay-top small { color: var(--c); font-weight: 700; }
.bay p { margin: 0; color: #e2e8f0; font-weight: 600; }
.bay-bar { height: 8px; border-radius: 999px; background: rgba(129, 140, 248, .18); overflow: hidden; margin-top: auto; }
.bay-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c), #fff); transition: width 1.2s ease; }
.bay-foot { display: flex; justify-content: space-between; }
.bay-foot em { font-style: normal; font-weight: 700; color: #94a3b8; }
.bay-foot em.ok { color: #4ade80; } .bay-foot em.bad { color: #fb7185; }
.bay-alert { font-size: .74rem; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .1); color: #bbf7d0; }
.bay-alert.bad { border-color: rgba(251, 113, 133, .5); background: rgba(251, 113, 133, .12); color: #fecdd3; }
.fgantt .g-row > span { font-size: .7rem; }
.po-pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.po-pipe div { position: relative; text-align: center; padding: 12px 6px; border-radius: 12px; border: 1px solid rgba(167, 139, 250, .35); background: linear-gradient(160deg, rgba(76, 29, 149, .3), rgba(11, 18, 38, .9)); }
.po-pipe div::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: #a78bfa; font-weight: 800; animation: arrowp 1.4s ease-in-out infinite; }
.po-pipe div:last-child::after { content: none; }
@keyframes arrowp { 50% { transform: translate(3px, -50%); } }
.po-pipe b { display: block; color: #fff; font: 800 1.3rem var(--font-head); }
.po-pipe span { font-size: .7rem; color: #a7b4cc; }
.po-tbl { margin-top: 4px; }
.ppl-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.9fr 1.3fr 0.9fr; gap: 12px; align-items: center; }
.ppl-ring svg { width: 100%; max-width: 220px; display: block; margin: 0 auto; }
.ppl-arc { animation: arcin 2s ease-out; }
@keyframes arcin { from { stroke-dasharray: 0 503; } }
.ppl-leg { display: flex; justify-content: center; gap: 10px; font-size: .7rem; color: #cbd5e1; }
.ppl-leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 4px; }
.ppl-bars h5, .ppl-wo h5 { margin: 0 0 6px; color: #fff; font-size: .8rem; }
.pb { display: grid; grid-template-columns: 110px 1fr 54px; gap: 6px; align-items: center; font-size: .7rem; color: #a7b4cc; margin: 4px 0; }
.pb i { height: 7px; border-radius: 999px; background: rgba(129, 140, 248, .15); overflow: hidden; }
.pb em { display: block; height: 100%; border-radius: 999px; transition: width 1s ease; }
.pb b { color: #e2e8f0; font-weight: 600; text-align: right; }
.ppl-wo { display: flex; flex-direction: column; gap: 4px; }
.ppl-wo a { font-size: .74rem; padding: 5px 9px; border-radius: 9px; background: rgba(99, 102, 241, .1); border: 1px solid rgba(129, 140, 248, .25); color: #c7d2fe; text-decoration: none; }
.ppl-wo a:hover { border-color: #22d3ee; color: #fff; }
@media (max-width: 1080px) {
  .console #factory3d { flex: none; height: 380px; }
  .bays { grid-auto-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .console #factory3d { height: 280px; }
  .bays { grid-template-columns: 1fr; }
  .po-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-pipe div::after { content: none; }
  .po-tbl th:nth-child(4), .po-tbl td:nth-child(4) { display: none; }
}
.bay-tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; font-size: .68rem; color: #64748b; }
.bay-tasks li.d { color: #4ade80; }
.bay-tasks li.n { color: #fff; font-weight: 700; animation: tagpulse 1.4s ease-in-out infinite; }
.pj-cards3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pj-home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pj-home .pj-htxt b { font-size: .86rem; }
@media (max-width: 1080px) { .pj-cards3, .pj-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pj-cards3, .pj-home { grid-template-columns: 1fr; } }

/* richer moving background (user, 2026-10-29): stronger glows, two more, rising light particles */
.bg-fx i { opacity: .5; filter: saturate(1.25); }
.bg-fx i:nth-child(4) { width: 46vmax; height: 46vmax; left: 40vw; top: -18vmax; background: radial-gradient(circle, var(--fx-2), transparent 64%); opacity: .34; animation-duration: 52s; animation-delay: -8s; }
.bg-fx i:nth-child(5) { width: 52vmax; height: 52vmax; left: -14vmax; top: 46vh; background: radial-gradient(circle, var(--fx-3), transparent 64%); opacity: .3; animation-duration: 47s; animation-delay: -30s; animation-direction: alternate-reverse; }
.bg-fx u { position: absolute; inset: 0 0 -1280px; text-decoration: none; background-image: radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1.4px 1.4px at 38% 62%, rgba(165, 243, 252, .5), transparent 60%), radial-gradient(1.8px 1.8px at 72% 32%, rgba(196, 181, 253, .55), transparent 60%), radial-gradient(1.3px 1.3px at 86% 78%, rgba(255, 255, 255, .45), transparent 60%), radial-gradient(1.5px 1.5px at 56% 8%, rgba(103, 232, 249, .5), transparent 60%); background-size: 420px 420px; animation: fxrise 60s linear infinite; } /* moves by whole tiles, so the loop is seamless */
.bg-fx u + u { background-size: 640px 640px; opacity: .7; animation: fxrise2 95s linear infinite; filter: blur(.4px); }
@keyframes fxrise { to { transform: translateY(-1260px); } }
@keyframes fxrise2 { to { transform: translateY(-1280px); } }
.bg-fx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--fx-1) 18%, transparent) 45%, transparent 60%); background-size: 300% 100%; animation: fxsheen 24s ease-in-out infinite alternate; }
@keyframes fxsheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .bg-fx u, .bg-fx::after { animation: none; } }

/* privacy + 404 first screens */
.prose-cols { flex: 1; min-height: 0; overflow: auto; columns: 2 300px; column-gap: 26px; font-size: .8rem; color: #cbd5e1; padding-right: 6px; }
.prose-cols h2 { font-size: .95rem; color: #fff; margin: 0 0 4px; break-after: avoid; }
.prose-cols p { margin: 0 0 12px; }
.lost { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: radial-gradient(500px 300px at 50% 50%, rgba(251, 113, 133, .15), transparent 70%); }
.lost #hero3d { position: absolute; inset: 0; }
.lost-n { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(4rem, 10vw, 8rem) var(--font-head); color: transparent; -webkit-text-stroke: 2px rgba(251, 113, 133, .7); text-shadow: 0 0 40px rgba(251, 113, 133, .35); pointer-events: none; animation: floaty 6s ease-in-out infinite; }
.svc-mini.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile-ico { font-size: 1.6rem; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(99, 102, 241, .15); border: 1px solid rgba(129, 140, 248, .4); transform: perspective(200px) rotateX(14deg); }
@media (max-width: 1080px) { .lost { flex: none; height: 300px; } .prose-cols { overflow: visible; } .svc-mini.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Work One module pages: tighter header so the 3D process flow starts on the first screen */
.mod .mod-hero { padding: 16px 0 4px; }
.mod .mod-hero h1 { font-size: clamp(1.3rem, 2vw, 1.85rem); margin: 4px 0; }
.mod .mod-hero .lead { font-size: .84rem; }
.mod .mod-hero .hero-3d { min-height: 250px; }
.mod .mod-facts div { padding: 6px 10px; }
.mod #flow { padding-top: 14px; }
.mod #flow .home-head { margin-bottom: 10px; }
/* short laptop screens: keep the left column of every control room on one screen */
@media (max-height: 760px) and (min-width: 1081px) {
  .con-left { gap: 7px; }
  .con-left h1 { font-size: 1.2rem; }
  .con-left .lead { font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .con-kpis { gap: 6px; }
  .con-kpis div { padding: 5px 8px; }
  .con-kpis b { font-size: .95rem; }
  .con-left .hero-cta .btn { padding: 7px 14px; font-size: .78rem; }
}
.view-btn { position: absolute; right: 10px; bottom: 10px; z-index: 2; font: inherit; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(7, 13, 31, .85); border: 1px solid #22c55e; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.view-btn:hover { background: rgba(34, 197, 94, .25); }
.find-price { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid #22c55e; background: linear-gradient(90deg, rgba(34, 197, 94, .2), rgba(34, 197, 94, .04)); }
.find-price span { color: #bbf7d0; font-size: .74rem; }
.find-price b { color: #fff; font: 800 1.35rem var(--font-head); text-align: right; animation: tagpulse 2.4s ease-in-out infinite; }
.find-price small { grid-column: 1 / -1; color: #86efac; font-size: .68rem; }
.jr-price, .pk-rate { color: #4ade80; }