/* =====================================================================
PlantNura — Component stylesheet (components.css)
Buttons, cards, pillars, pricing, carousels, tabs, accordions,
process steps, video embeds, forms, modals, toggles, FAQ.
===================================================================== */
/* ---------- Brand logos ---------- */
.brand-logo-img{height:70px;width:auto;display:block;}
.footer-brand .brand-logo-img{height:66px;margin-bottom:var(--space-4);}
.drawer-head .brand-logo-img{height:52px;}
/* White "chip" so any logo stays crisp on dark / navy / gradient panels */
.logo-chip{background:#fff;border-radius:var(--radius-lg);padding:.55rem .8rem;
display:inline-flex;align-items:center;box-shadow:var(--shadow-sm);}
.logo-chip img{display:block;width:auto;}
/* ---------- Product page: brand chip + inline mark ---------- */
.brand-chip{display:inline-flex;align-items:center;gap:.75rem;background:var(--color-surface);
border:1px solid var(--color-divider);border-radius:var(--radius-full);padding:.5rem 1.1rem .5rem .7rem;
box-shadow:var(--shadow-sm);margin-bottom:var(--space-5);}
.brand-chip img{height:42px;width:auto;display:block;}
.brand-chip .chip-tag{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);}
.brand-chip .chip-div{width:1px;height:18px;background:var(--color-border);}
/* Registered product marks are dark artwork, so the chip stays a light plate in
dark mode. The logos themselves are never filtered or recoloured. */
[data-theme="dark"] .brand-chip,
[data-theme="dark"] .logo-chip{background:#f7f7fa;border-color:rgba(255,255,255,.14);
box-shadow:0 6px 22px rgba(0,0,0,.45);}
[data-theme="dark"] .brand-chip .chip-div{background:rgba(15,17,21,.16);}
[data-theme="dark"] .brand-chip .chip-tag{color:#5b2fd4;}
.head-with-mark{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
.head-with-mark img{height:46px;width:auto;flex:none;}
/* ---------- Modular numbered feature cards ---------- */
.feature-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--space-5);}
.fmod{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
padding:var(--space-6) var(--space-6);position:relative;display:flex;flex-direction:column;
transition:all var(--transition);overflow:hidden;}
.fmod{padding:var(--space-8) var(--space-6);}
.fmod::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--color-primary),var(--color-gold));
opacity:0;transition:opacity var(--transition);}
.fmod:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-border);}
.fmod:hover::after{opacity:1;}
.fmod-top{display:flex;align-items:center;gap:.85rem;margin-bottom:var(--space-4);}
.fmod-num{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:var(--color-gold);letter-spacing:-.02em;}
.fmod-ico{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;
background:var(--color-primary-soft);color:var(--color-primary);flex:none;}
.fmod-ico [data-lucide]{width:1.45rem;height:1.45rem;}
.fmod h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.5rem;color:var(--color-text);}
.fmod .fmod-eyebrow{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);color:var(--color-primary);margin-bottom:.5rem;line-height:1.25;}
.fmod p{font-size:var(--text-sm);color:var(--color-text-muted);}
/* ---------- Access cards (browser-based / secure / fast) ---------- */
.access-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--space-5);margin-top:var(--space-10);}
.access-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
padding:var(--space-8) var(--space-6);text-align:center;transition:all var(--transition);}
.access-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.access-card .ac-ico{width:60px;height:60px;border-radius:var(--radius-full);display:grid;place-items:center;margin:0 auto var(--space-4);
background:linear-gradient(140deg,var(--color-primary),var(--color-navy));color:#fff;}
.access-card .ac-ico [data-lucide]{width:1.7rem;height:1.7rem;}
.access-card h4{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);margin-bottom:.5rem;}
.access-card p{font-size:var(--text-sm);color:var(--color-text-muted);}
/* ---------- Workflow line pill ---------- */
.workflow-line{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
margin:var(--space-8) auto 0;max-width:900px;}
.wf-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:800;
font-size:var(--text-sm);padding:.6rem 1.15rem;border-radius:var(--radius-full);color:#fff;
background:linear-gradient(135deg,var(--color-primary),var(--color-teal));box-shadow:var(--shadow-sm);}
.wf-pill:nth-child(3){background:linear-gradient(135deg,var(--color-teal),var(--color-navy));}
.wf-pill:nth-child(5){background:linear-gradient(135deg,var(--color-navy),var(--color-indigo-bright));}
.wf-pill:nth-child(7){background:linear-gradient(135deg,var(--color-gold-hover),var(--color-gold));color:var(--color-on-accent);}
.wf-pill:nth-child(9){background:linear-gradient(135deg,var(--color-primary-active),var(--color-primary));}
.wf-arrow{color:var(--color-gold);display:inline-grid;place-items:center;}
.wf-arrow [data-lucide]{width:1.2rem;height:1.2rem;}
/* ---------- Hero brand carousel ---------- */
.brand-carousel{position:relative;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg);
background:var(--color-navy);aspect-ratio:4/3;}
/* Plot gallery variant: plots render on white, contained, wider frame */
.plot-carousel{background:#fff;aspect-ratio:16/10;}
.plot-carousel .bslide img{object-fit:contain;padding:var(--space-6) var(--space-6) var(--space-16);background:#fff;}
.plot-carousel .bslide-body{background:linear-gradient(180deg,transparent,rgba(10,10,22,.04) 40%,rgba(10,10,22,.74));}
.plot-carousel .bslide-body h3{font-size:var(--text-lg);}
.bslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;}
.bslide.is-active{opacity:1;visibility:visible;}
.bslide img{width:100%;height:100%;object-fit:cover;}
.bslide-body{position:absolute;left:0;right:0;bottom:0;padding:var(--space-8) var(--space-6) var(--space-6);
background:linear-gradient(180deg,transparent,rgba(8,8,20,.55)35%,rgba(8,8,20,.9));color:#fff;}
.bslide-cat{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-accent-bright);margin-bottom:.4rem;}
.bslide-body h3{color:#fff;font-size:var(--text-xl);margin-bottom:.3rem;}
.bslide-body p{color:rgba(255,255,255,.85);font-size:var(--text-sm);margin-bottom:var(--space-3);max-width:42ch;}
.bslide-body .link-arrow{color:var(--color-accent-bright);}
.bcar-btn{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:var(--radius-full);
background:rgba(255,255,255,.9);color:var(--color-primary);display:grid;place-items:center;box-shadow:var(--shadow-md);
transition:all var(--transition);}
.bcar-btn:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.bcar-btn.prev{left:var(--space-4);}
.bcar-btn.next{right:var(--space-4);}
.bcar-btn [data-lucide]{width:1.3rem;height:1.3rem;}
.bcar-dots{position:absolute;top:var(--space-4);left:var(--space-6);right:var(--space-6);z-index:5;
display:flex;gap:.4rem;}
.bcar-dots button{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:background var(--transition);padding:0;}
.bcar-dots button.active{background:var(--color-accent-bright);}
/* ---------- Capabilities cards ---------- */
.cap-grid{align-items:stretch;}
.cap{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-2xl);
padding:var(--space-8);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all var(--transition);}
.cap::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--color-primary),var(--color-gold));opacity:0;transition:opacity var(--transition);}
.cap:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-border);}
.cap:hover::before{opacity:1;}
.cap-ico{width:56px;height:56px;border-radius:var(--radius-lg);display:grid;place-items:center;
background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-4);}
.cap-ico [data-lucide]{width:1.7rem;height:1.7rem;}
.cap .pillar-num{position:absolute;top:var(--space-6);right:var(--space-6);font-family:var(--font-display);
font-weight:800;font-size:var(--text-xl);color:var(--color-gold);opacity:.5;}
.cap h3{font-size:var(--text-xl);margin-bottom:.35rem;}
.cap-sub{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);color:var(--color-primary);margin-bottom:var(--space-4);line-height:1.25;}
.cap-body{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-5);}
.cap ul{display:grid;gap:.6rem;margin-bottom:var(--space-6);}
.cap li{display:flex;gap:.55rem;font-size:var(--text-sm);color:var(--color-text);align-items:flex-start;}
.cap li [data-lucide]{width:1.1rem;height:1.1rem;color:var(--color-primary);flex:none;margin-top:.15rem;}
.cap .link-arrow{margin-top:auto;}
@media(max-width:960px){.cap-grid{grid-template-columns:1fr;}}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);
font-weight:700;font-size:var(--text-sm);padding:.8rem 1.5rem;border-radius:var(--radius-full);
transition:all var(--transition);min-height:46px;white-space:nowrap;text-align:center;}
.btn [data-lucide]{width:1.1rem;height:1.1rem;}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
[data-theme="dark"] .btn-primary{color:var(--color-text-inverse);}
.btn-gold{background:var(--color-gold);color:var(--color-on-accent);}
.btn-gold:hover{background:var(--color-gold-hover);transform:translateY(-2px);box-shadow:var(--shadow-gold);}
.btn-ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border);}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary);}
.btn-light{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32);}
.btn-light:hover{background:rgba(255,255,255,.26);}
.btn-navy{background:var(--color-navy);color:#fff;}
.btn-navy:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-lg{padding:1rem 1.9rem;font-size:var(--text-base);min-height:52px;}
.btn-sm{padding:.55rem 1rem;min-height:40px;font-size:var(--text-xs);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;color:var(--color-primary);font-weight:700;font-size:var(--text-sm);}
.link-arrow [data-lucide]{width:1.05rem;height:1.05rem;transition:transform var(--transition);}
.link-arrow:hover [data-lucide]{transform:translateX(4px);}
/* ---------- Chips / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--color-gold-soft);color:var(--color-gold-hover);
font-weight:700;font-size:var(--text-xs);padding:.4rem .95rem;border-radius:var(--radius-full);}
.tag{display:inline-block;font-size:var(--text-xs);font-weight:700;color:var(--color-primary);
background:var(--color-primary-soft);padding:.28rem .75rem;border-radius:var(--radius-full);}
.tag-gold{color:var(--color-gold-hover);background:var(--color-gold-soft);}
/* ---------- Pillars (home) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.pillar{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
padding:var(--space-8);transition:all var(--transition);display:flex;flex-direction:column;}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-border);}
.pillar-num{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:var(--color-gold);opacity:.85;}
.pillar h3{font-size:var(--text-lg);margin:var(--space-3) 0;}
.pillar>p{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-5);}
.pillar ul{display:grid;gap:.6rem;margin-bottom:var(--space-6);}
.pillar li{display:flex;gap:.55rem;font-size:var(--text-sm);color:var(--color-text);}
.pillar li [data-lucide]{width:1.1rem;height:1.1rem;color:var(--color-primary);flex:none;margin-top:.15rem;}
.pillar .link-arrow{margin-top:auto;}
/* ---------- Generic card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));gap:var(--space-6);}
/* Six-card sets read better three-and-three than four-and-two, and the wider
minimum gives each card room for a real sentence. */
#leave .card-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
padding:var(--space-6);transition:all var(--transition);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border);}
.card h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin:.5rem 0;}
.card p{font-size:var(--text-sm);color:var(--color-text-muted);}
.card .card-ico{width:48px;height:48px;border-radius:var(--radius-lg);display:grid;place-items:center;
background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-4);}
.card .card-ico [data-lucide]{width:1.5rem;height:1.5rem;}
/* ---------- Navy product band (home tools) ---------- */
.band-navy{background:var(--color-band-deep);color:#fff;}
.band-navy .eyebrow{color:var(--color-accent-bright);}
.band-navy .eyebrow::before{background:var(--color-gold);}
.band-navy h2,.band-navy h3{color:#fff;}
.band-navy .sec-head p{color:rgba(255,255,255,.72);}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.tool-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);
padding:var(--space-6);transition:all var(--transition);display:flex;flex-direction:column;}
.tool-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);}
.tool-logo{height:50px;margin-bottom:var(--space-5);display:flex;align-items:center;}
.tool-logo img{max-height:50px;width:auto;object-fit:contain;}
.tool-name{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:#fff;margin-bottom:.3rem;}
.tool-tag{font-size:var(--text-xs);color:var(--color-accent-bright);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-4);}
.tool-card p{font-size:var(--text-sm);color:rgba(255,255,255,.78);margin-bottom:var(--space-5);}
.tool-card .stats{display:flex;gap:var(--space-5);margin-bottom:var(--space-5);}
.tool-card .stats b{font-family:var(--font-display);font-size:var(--text-lg);color:#fff;display:block;}
.tool-card .stats small{font-size:var(--text-xs);color:rgba(255,255,255,.6);}
.tool-card .link-arrow{color:var(--color-accent-bright);margin-top:auto;}
/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);counter-reset:s;}
.step{position:relative;padding-top:var(--space-10);}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--font-display);
font-weight:800;font-size:var(--text-2xl);color:var(--color-gold);opacity:.9;position:absolute;top:0;left:0;}
.step h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.5rem;}
.step p{font-size:var(--text-sm);color:var(--color-text-muted);}
.note-callout{margin-top:var(--space-10);background:var(--color-primary-soft);border-radius:var(--radius-xl);
padding:var(--space-6) var(--space-8);display:flex;gap:var(--space-4);align-items:center;}
.note-callout [data-lucide]{width:2rem;height:2rem;color:var(--color-primary);flex:none;}
.note-callout p{font-weight:600;color:var(--color-primary-active);}
[data-theme="dark"] .note-callout p{color:var(--color-primary-active);}
/* ---------- Founder ---------- */
.founder{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-2xl);
padding:clamp(var(--space-8),5vw,var(--space-16));display:grid;grid-template-columns:auto 1fr;gap:var(--space-10);align-items:center;}
.founder-photo{width:160px;height:160px;border-radius:var(--radius-2xl);object-fit:cover;flex:none;box-shadow:var(--shadow-md);}
.founder-photo.placeholder{background:linear-gradient(140deg,var(--color-primary),var(--color-navy));display:grid;place-items:center;
color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);}
.founder blockquote{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);line-height:1.35;letter-spacing:-.01em;margin-bottom:var(--space-5);}
.founder cite{font-style:normal;font-weight:700;color:var(--color-text);}
.founder cite span{display:block;font-weight:400;font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem;}
/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,#5b27ce 0%,#4733d6 55%,#3d53e0 100%);border-radius:var(--radius-2xl);padding:clamp(var(--space-10),6vw,var(--space-20));
text-align:center;color:#fff;position:relative;overflow:hidden;}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(700px circle at 50% 120%,rgba(3,247,235,.22),transparent 60%);}
.cta-band>*{position:relative;}
.cta-band h2{color:#fff;font-size:var(--text-2xl);margin-bottom:var(--space-4);}
.cta-band p{color:rgba(255,255,255,.9);max-width:46ch;margin:0 auto var(--space-8);}
/* ---------- Stats strip ---------- */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center;}
.stat-item b{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);color:var(--color-primary);display:block;line-height:1;}
.stat-item span{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2);display:block;}
/* =====================================================================
PRODUCT / TOOL PAGES
===================================================================== */
.prod-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:center;}
.prod-logo-lg{height:68px;margin-bottom:var(--space-5);display:flex;align-items:center;}
.prod-logo-lg img{max-height:68px;width:auto;}
.prod-tagline{font-size:var(--text-xl);color:var(--color-text);font-family:var(--font-display);font-weight:800;margin-bottom:var(--space-4);max-width:20ch;}
/* video embed (lazy YouTube) */
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);
background:var(--color-navy);cursor:pointer;display:block;}
.video-embed.as-link{text-decoration:none;}
.video-embed img.thumb{width:100%;height:100%;object-fit:cover;opacity:.82;}
.video-embed::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.15),rgba(0,0,0,.45));}
.video-embed .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
transition:all var(--transition);box-shadow:var(--shadow-lg);}
.video-embed:hover .play-btn{transform:translate(-50%,-50%) scale(1.08);background:#fff;}
.video-embed .play-btn [data-lucide]{width:2rem;height:2rem;color:var(--color-primary);margin-left:4px;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-cap{position:absolute;bottom:var(--space-4);left:var(--space-5);font-size:var(--text-xs);color:rgba(255,255,255,.85);z-index:2;font-weight:600;}
/* feature carousel */
.carousel{position:relative;}
.carousel-track{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;padding-bottom:var(--space-4);-ms-overflow-style:none;scrollbar-width:none;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track>*{scroll-snap-align:start;flex:0 0 clamp(260px,80%,340px);}
.feature-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
padding:var(--space-6);height:100%;display:flex;flex-direction:column;}
.feature-card .f-ico{width:52px;height:52px;border-radius:var(--radius-lg);display:grid;place-items:center;
background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-4);}
.feature-card .f-ico [data-lucide]{width:1.6rem;height:1.6rem;}
.feature-card h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.5rem;}
.feature-card p{font-size:var(--text-sm);color:var(--color-text-muted);}
.carousel-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:var(--space-4);}
.carousel-nav button{width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--color-border);
display:grid;place-items:center;color:var(--color-text);transition:all var(--transition);background:var(--color-surface);}
.carousel-nav button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
/* feature grid (static infographic) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.info-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);}
.info-card [data-lucide]{width:1.7rem;height:1.7rem;color:var(--color-primary);margin-bottom:var(--space-3);}
.info-card h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.4rem;}
.info-card p{font-size:var(--text-sm);color:var(--color-text-muted);}
/* use-cases */
.usecase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--space-5);}
.usecase{background:var(--color-surface);border-left:3px solid var(--color-gold);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);}
.usecase h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.4rem;}
.usecase p{font-size:var(--text-sm);color:var(--color-text-muted);}
/* =====================================================================
PRICING
===================================================================== */
.price-toggle{display:inline-flex;align-items:center;gap:.25rem;background:var(--color-surface-offset);
border-radius:var(--radius-full);padding:.35rem;margin:0 auto var(--space-10);}
.price-toggle button{padding:.55rem 1.4rem;border-radius:var(--radius-full);font-weight:700;font-size:var(--text-sm);
color:var(--color-text-muted);transition:all var(--transition);}
.price-toggle button.active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm);}
[data-theme="dark"] .price-toggle button.active{color:var(--color-text-inverse);}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--space-5);align-items:stretch;}
.plan{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
padding:var(--space-8) var(--space-6);position:relative;transition:all var(--transition);display:flex;flex-direction:column;}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.plan.featured{border-color:var(--color-gold);box-shadow:var(--shadow-gold);}
.plan.featured::before{content:"Best Value";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
background:var(--color-gold);color:var(--color-on-accent);font-size:var(--text-xs);font-weight:800;padding:.35rem 1rem;border-radius:var(--radius-full);white-space:nowrap;letter-spacing:.03em;}
.plan h4{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:.3rem;}
.plan .plan-term{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-5);}
.plan .price{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);color:var(--color-text);line-height:1.05;}
.plan .price .cur{font-size:var(--text-lg);vertical-align:top;}
.plan .price-gst{font-size:var(--text-xs);color:var(--color-text-faint);font-weight:600;margin-top:.35rem;margin-bottom:var(--space-5);}
.plan ul{display:grid;gap:.65rem;text-align:left;margin-bottom:var(--space-6);}
.plan li{display:flex;gap:.5rem;font-size:var(--text-sm);align-items:flex-start;}
.plan li [data-lucide]{width:1.05rem;height:1.05rem;color:var(--color-primary);flex:none;margin-top:.2rem;}
.plan .btn{margin-top:auto;}
.plan.enterprise{background:linear-gradient(150deg,var(--color-navy),var(--color-primary-active));color:#fff;border:none;}
.plan.enterprise h4,.plan.enterprise .price{color:#fff;}
.plan.enterprise .plan-term,.plan.enterprise li{color:rgba(255,255,255,.85);}
.plan.enterprise li [data-lucide]{color:var(--color-accent-bright);}
.pay-redirect-note{display:flex;gap:.5rem;align-items:center;justify-content:center;font-size:var(--text-sm);
color:var(--color-text-muted);margin-top:var(--space-6);text-align:center;}
.pay-redirect-note [data-lucide]{width:1.1rem;height:1.1rem;color:var(--color-primary);flex:none;}
/* =====================================================================
FAQ / accordion
===================================================================== */
.accordion{display:grid;gap:var(--space-3);max-width:820px;margin-inline:auto;}
.acc-item{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;}
.acc-item summary{padding:var(--space-5) var(--space-6);font-family:var(--font-body);font-weight:700;font-size:var(--text-base);
cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary .chev{transition:transform var(--transition);flex:none;color:var(--color-primary);}
.acc-item[open] summary .chev{transform:rotate(180deg);}
.acc-body{padding:0 var(--space-6) var(--space-5);color:var(--color-text-muted);font-size:var(--text-sm);}
/* =====================================================================
EDUCATION — course carousel + course rows
===================================================================== */
.course-slide{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);
overflow:hidden;height:100%;display:flex;flex-direction:column;transition:all var(--transition);}
.course-slide:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.course-thumb{aspect-ratio:16/10;background:linear-gradient(140deg,var(--color-primary),var(--color-navy));
position:relative;display:grid;place-items:center;color:#fff;overflow:hidden;}
.course-thumb img{width:100%;height:100%;object-fit:cover;}
.course-thumb .thumb-ico{font-size:2.6rem;}
.course-slide-body{padding:var(--space-6);display:flex;flex-direction:column;flex-grow:1;}
.course-slide-body h4{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);margin:.5rem 0;}
.course-slide-body p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);flex-grow:1;}
.course-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--color-text-muted);font-size:var(--text-xs);margin-bottom:var(--space-5);}
.course-meta [data-lucide]{width:.95rem;height:.95rem;margin-left:.5rem;}
.course-meta [data-lucide]:first-child{margin-left:0;}
.course-slide-actions{display:flex;gap:.5rem;margin-top:auto;flex-wrap:wrap;}
/* internship track cards */
/* =====================================================================
COURSE DETAIL PAGE
===================================================================== */
.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-10);align-items:start;}
.timeline{display:grid;gap:0;margin:var(--space-6) 0;}
.timeline-item{position:relative;padding:0 0 var(--space-6) var(--space-8);border-left:2px solid var(--color-divider);}
.timeline-item:last-child{border-left-color:transparent;padding-bottom:0;}
.timeline-item::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--color-gold);}
.timeline-item h5{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.25rem;}
.timeline-item p{font-size:var(--text-sm);color:var(--color-text-muted);}
.outcomes{display:grid;gap:.7rem;margin:var(--space-5) 0;}
.outcomes li{display:flex;gap:.6rem;font-size:var(--text-sm);align-items:flex-start;}
.outcomes li [data-lucide]{width:1.15rem;height:1.15rem;color:var(--color-primary);flex:none;margin-top:.15rem;}
.instructor-card{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--color-surface);
border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-5);}
.instructor-card .ins-photo{width:64px;height:64px;border-radius:var(--radius-full);object-fit:cover;flex:none;
background:linear-gradient(140deg,var(--color-primary),var(--color-navy));display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;}
.instructor-card h5{font-family:var(--font-body);font-weight:700;margin-bottom:.2rem;}
.instructor-card p{font-size:var(--text-sm);color:var(--color-text-muted);}
.enroll-sidebar{position:sticky;top:calc(var(--header-h) + 1rem);background:var(--color-surface);
border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);}
.enroll-sidebar h4{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-4);}
.enroll-sidebar .es-row{display:flex;justify-content:space-between;font-size:var(--text-sm);padding:.5rem 0;border-bottom:1px solid var(--color-divider);}
.enroll-sidebar .es-row span:first-child{color:var(--color-text-muted);}
.enroll-sidebar .es-row span:last-child{font-weight:600;}
/* =====================================================================
CONSULTANCY — brand panels + secure workflow
===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start;}
.brand-panel{border-radius:var(--radius-2xl);padding:var(--space-10);color:#fff;position:relative;overflow:hidden;}
.brand-panel.biometrik{background:linear-gradient(140deg,var(--color-navy),var(--color-primary));}
.brand-panel.breedforward{background:linear-gradient(140deg,var(--color-primary-active),var(--color-navy));}
.brand-panel .brandlogo{margin-bottom:var(--space-5);}
.brand-panel .brandlogo img{max-height:46px;width:auto;}
.brand-panel h3{color:#fff;font-size:var(--text-xl);margin-bottom:var(--space-4);}
.brand-panel p{color:rgba(255,255,255,.85);font-size:var(--text-sm);margin-bottom:var(--space-6);}
.brand-panel ul{display:grid;gap:.65rem;margin-bottom:var(--space-6);}
.brand-panel li{display:flex;gap:.55rem;font-size:var(--text-sm);color:rgba(255,255,255,.94);align-items:flex-start;}
.brand-panel li [data-lucide]{width:1.1rem;height:1.1rem;color:var(--color-accent-bright);flex:none;margin-top:.15rem;}
.workflow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);counter-reset:w;position:relative;}
.wf-step{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);
padding:var(--space-6) var(--space-5);text-align:center;position:relative;}
.wf-step .wf-ico{width:52px;height:52px;border-radius:var(--radius-full);display:grid;place-items:center;margin:0 auto var(--space-4);
background:var(--color-primary-soft);color:var(--color-primary);}
.wf-step .wf-ico [data-lucide]{width:1.5rem;height:1.5rem;}
.wf-step .wf-num{counter-increment:w;content:counter(w);position:absolute;top:.75rem;right:1rem;font-family:var(--font-display);
font-weight:800;color:var(--color-gold);font-size:var(--text-base);}
.wf-step h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);margin-bottom:.4rem;}
.wf-step p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4;}
.privacy-banner{display:flex;gap:var(--space-4);align-items:center;background:var(--color-primary);color:#fff;
border-radius:var(--radius-xl);padding:var(--space-6) var(--space-8);}
.privacy-banner [data-lucide]{width:2.2rem;height:2.2rem;color:#fff;flex:none;}
.privacy-banner p{color:rgba(255,255,255,.95);font-weight:600;}
/* who we serve */
.serve-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:var(--space-5);}
.serve-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);
padding:var(--space-6);text-align:center;transition:all var(--transition);}
.serve-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.serve-card [data-lucide]{width:1.8rem;height:1.8rem;color:var(--color-primary);margin:0 auto var(--space-3);}
.serve-card h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:.35rem;}
.serve-card p{font-size:var(--text-sm);color:var(--color-text-muted);}
/* =====================================================================
FORMS
===================================================================== */
.form-grid{display:grid;gap:var(--space-4);}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:var(--text-sm);font-weight:600;}
.field input,.field select,.field textarea{padding:.75rem .85rem;border:1px solid var(--color-border);
border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-base);transition:border var(--transition);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);}
.field .req{color:var(--color-gold-hover);}
fieldset.field-set{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);}
fieldset.field-set legend{padding:0 .4rem;font-size:var(--text-sm);font-weight:600;}
.radio-row{display:flex;gap:var(--space-4);flex-wrap:wrap;}
.radio-row label{display:inline-flex;align-items:center;gap:.5rem;font-weight:400;font-size:var(--text-sm);}
.contact-panel{background:linear-gradient(140deg,var(--color-navy),var(--color-primary));color:#fff;border-radius:var(--radius-2xl);padding:var(--space-10);}
.contact-panel h3{color:#fff;}
.contact-panel p{color:rgba(255,255,255,.85);}
.contact-panel .field input,.contact-panel .field textarea,.contact-panel .field select{
background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
.contact-panel .field input::placeholder,.contact-panel .field textarea::placeholder{color:rgba(255,255,255,.6);}
.contact-panel .field label{color:#fff;}
/* =====================================================================
MODAL (enrollment)
===================================================================== */
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,22,.66);backdrop-filter:blur(4px);
opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:250;display:grid;place-items:center;padding:var(--space-4);}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{background:var(--color-bg);border-radius:var(--radius-2xl);width:min(560px,100%);max-height:92dvh;overflow-y:auto;
box-shadow:var(--shadow-lg);transform:translateY(24px) scale(.98);transition:transform .32s cubic-bezier(.16,1,.3,1);}
.modal-overlay.open .modal{transform:none;}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding:var(--space-8) var(--space-8) var(--space-4);}
.modal-head h3{font-family:var(--font-display);font-size:var(--text-xl);}
.modal-head p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.35rem;}
.modal-body{padding:0 var(--space-8) var(--space-8);}
.pay-note{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-sm);color:var(--color-text-muted);
background:var(--color-surface-offset);padding:var(--space-4);border-radius:var(--radius-md);margin-top:var(--space-4);}
.pay-note [data-lucide]{width:1.1rem;height:1.1rem;color:var(--color-primary);flex:none;margin-top:.15rem;}
.modal-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-6);}
.enroll-success{text-align:center;padding:var(--space-6) 0;}
.enroll-success .success-ico{width:64px;height:64px;color:var(--color-primary);margin:0 auto var(--space-4);}
.enroll-success h3{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-3);}
.enroll-success p{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6);}
.pay-choice{display:grid;gap:.6rem;}
/* =====================================================================
RESPONSIVE (components)
===================================================================== */
@media(max-width:960px){
.pillars,.tools,.feature-grid{grid-template-columns:1fr 1fr;}
.steps{grid-template-columns:1fr 1fr;}
.prod-hero,.split{grid-template-columns:1fr;}
.founder{grid-template-columns:1fr;gap:var(--space-6);text-align:center;}
.founder-photo{margin-inline:auto;}
.stats-strip{grid-template-columns:1fr 1fr;}
.workflow{grid-template-columns:1fr 1fr;}
.detail-layout{grid-template-columns:1fr;}
.enroll-sidebar{position:static;}
}
@media(max-width:560px){
.pillars,.tools,.feature-grid,.steps,.stats-strip,.plans{grid-template-columns:1fr;}
.workflow{grid-template-columns:1fr;}
.carousel-track>*{flex-basis:85%;}
}
/* ---- Course card: price + cohort (added with the courses-page build) ---- */
.course-price{display:flex;align-items:baseline;gap:.4rem;margin-top:var(--space-3);}
.course-price b{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:var(--color-text);}
.course-price small{font-size:var(--text-xs);color:var(--color-text-faint);}
.course-price .price-tbc{font-size:var(--text-sm);font-weight:700;color:var(--color-primary);}
.course-cohort{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;margin-bottom:var(--space-4);
font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);}
.course-cohort [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);flex:none;}
/* =====================================================================
VISUAL REFINEMENT PASS — homepage first, applies site-wide
Pure CSS. No new image assets, no added page weight.
===================================================================== */
/* ---- Hero: layered brand mesh + a fine data grid, instead of two flat
radial washes. The grid echoes a plot axis without being literal. */
.hero::before{
background:
radial-gradient(52% 62% at 88% -12%, color-mix(in srgb, var(--color-brand-violet) 22%, transparent) 0%, transparent 62%),
radial-gradient(44% 54% at -8% 8%, color-mix(in srgb, var(--color-accent-bright) 16%, transparent) 0%, transparent 58%),
radial-gradient(60% 70% at 40% 120%, color-mix(in srgb, var(--color-indigo-bright) 14%, transparent) 0%, transparent 60%);
}
.hero::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(70% 70% at 30% 40%, #000 0%, transparent 75%);
-webkit-mask-image:radial-gradient(70% 70% at 30% 40%, #000 0%, transparent 75%);
}
.hero-grid{grid-template-columns:1.1fr .9fr;gap:clamp(var(--space-8),5vw,var(--space-16));}
.hero h1{letter-spacing:-.033em;line-height:1.02;}
.hero-lead{max-width:44ch;}
/* ---- Eyebrow mark: a small gradient dot with a soft ring, replacing the
dash. Reads as a deliberate marker rather than a stray line, and
applies to every section header across the site. */
.eyebrow{gap:.7rem;}
.eyebrow::before{
width:8px;height:8px;flex:none;border-radius:50%;
background:linear-gradient(135deg,var(--color-primary),var(--color-accent-bright));
box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.band-navy .eyebrow::before{
background:linear-gradient(135deg,var(--color-accent-bright),var(--color-magenta-bright));
box-shadow:0 0 0 4px color-mix(in srgb, var(--color-accent-bright) 18%, transparent);
}
/* ---- Section headings: tighter, more confident */
.sec-head h2{letter-spacing:-.028em;line-height:1.06;}
.sec-head{max-width:46rem;}
.sec-head p{max-width:54ch;}
.sec-head.center p{margin-inline:auto;}
/* ---- Capability cards: the page's signature component.
Large ghosted numeral, gradient icon chip, always-on accent edge. */
.cap{
border-color:color-mix(in srgb, var(--color-text) 8%, transparent);
box-shadow:0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent);
overflow:hidden;
}
.cap::before{
opacity:1;height:3px;
background:linear-gradient(90deg,var(--color-primary),var(--color-indigo-bright) 55%,var(--color-accent-bright));
transform:scaleX(0);transform-origin:left;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cap:hover::before{transform:scaleX(1);}
.cap:hover{
transform:translateY(-6px);
border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow:0 24px 50px color-mix(in srgb, var(--color-primary) 16%, transparent),
0 6px 16px color-mix(in srgb, var(--color-text) 8%, transparent);
}
.cap .pillar-num{
font-size:clamp(3.2rem,5vw,4.6rem);line-height:1;
top:var(--space-4);right:var(--space-5);
color:var(--color-primary);opacity:.10;letter-spacing:-.04em;
transition:opacity var(--transition);pointer-events:none;
}
.cap:hover .pillar-num{opacity:.18;}
.cap-ico{
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo-bright));
color:#fff;box-shadow:0 6px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.cap-sub{color:var(--color-text);opacity:.9;}
.cap li [data-lucide]{color:var(--color-accent-bright);}
[data-theme="light"] .cap li [data-lucide],:root .cap li [data-lucide]{color:var(--color-teal);}
/* ---- Value cards: deliberately LIGHTER than .cap so two card grids on one
page don't read as the same component twice. */
.card{
background:transparent;border:none;box-shadow:none;
padding:var(--space-5) var(--space-5) var(--space-5) 0;
border-top:1px solid var(--color-divider);border-radius:0;
}
.card:hover{transform:none;box-shadow:none;border-top-color:var(--color-primary);}
.card .card-ico{
width:42px;height:42px;border-radius:var(--radius-md);
background:color-mix(in srgb, var(--color-primary) 12%, transparent);
color:var(--color-primary);box-shadow:none;margin-bottom:var(--space-3);
}
.card .card-ico [data-lucide]{width:1.3rem;height:1.3rem;}
.card h4{font-size:var(--text-base);letter-spacing:-.01em;}
/* Cards that are links (404 page) keep an affordance */
a.card:hover h4{color:var(--color-primary);}
/* ---- CTA band: dot-grid texture so the gradient has something to sit on */
.cta-band::before{
content:"";position:absolute;inset:0;
background-image:radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px);
background-size:22px 22px;
mask-image:radial-gradient(80% 80% at 50% 0%, #000 0%, transparent 70%);
-webkit-mask-image:radial-gradient(80% 80% at 50% 0%, #000 0%, transparent 70%);
}
.cta-band h2{letter-spacing:-.028em;}
/* ---- Buttons: a little more presence */
.btn-primary{box-shadow:0 6px 18px color-mix(in srgb, var(--color-primary) 30%, transparent);}
.btn-primary:hover{box-shadow:0 10px 26px color-mix(in srgb, var(--color-primary) 38%, transparent);transform:translateY(-2px);}
/* ---- Brand carousel: lift it so it reads as a framed object */
.brand-carousel{box-shadow:0 30px 70px color-mix(in srgb, var(--color-text) 16%, transparent),
0 8px 20px color-mix(in srgb, var(--color-text) 8%, transparent);}
@media (prefers-reduced-motion:reduce){
.cap,.cap::before,.btn-primary{transition:none;}
.cap:hover{transform:none;}
}
/* =====================================================================
TAGLINE CHIP — "Innovate · Educate · Transform"
Each word takes one brand colour, so the tagline carries the palette
instead of sitting in a single flat pill.
===================================================================== */
.tagline-chip{
display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--font-display);font-weight:800;
font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
padding:.5rem 1.05rem;border-radius:var(--radius-full);
background:color-mix(in srgb, var(--color-surface) 70%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
box-shadow:0 2px 10px color-mix(in srgb, var(--color-primary) 10%, transparent);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tagline-chip [data-lucide]{width:1rem;height:1rem;color:var(--color-green);}
[data-theme="dark"] .tagline-chip [data-lucide]{color:var(--color-green);}
.tagline-chip b{font-weight:800;}
.tagline-chip b:nth-of-type(1){color:var(--color-primary);} /* violet */
.tagline-chip b:nth-of-type(2){color:var(--color-indigo);} /* indigo */
.tagline-chip b:nth-of-type(3){color:var(--color-teal);} /* teal */
.tagline-chip s{width:4px;height:4px;border-radius:50%;text-decoration:none;
background:var(--color-text-faint);opacity:.6;flex:none;}
/* =====================================================================
PILLAR SHOWCASE — one large panel driven by a segmented control.
Replaces three small cards. The media slot takes an ![]()
or a
.video-embed[data-yt], so a panel can become a video at any time.
===================================================================== */
.showcase{margin-top:var(--space-10);}
.sc-tabs{
display:inline-flex;gap:.25rem;padding:.35rem;margin:0 auto var(--space-8);
background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-full);box-shadow:var(--shadow-sm);
}
.sc-tabs{display:flex;width:max-content;margin-inline:auto;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.sc-tabs::-webkit-scrollbar{display:none;}
.sc-tab{
display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
padding:.7rem 1.5rem;border-radius:var(--radius-full);
font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
color:var(--color-text-muted);transition:all var(--transition);
}
.sc-tab .sc-n{font-size:var(--text-xs);opacity:.55;letter-spacing:.04em;}
.sc-tab:hover{color:var(--color-text);}
.sc-tab.is-active{
color:#fff;
background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));
box-shadow:0 6px 18px color-mix(in srgb, var(--color-primary) 34%, transparent);
}
[data-theme="dark"] .sc-tab.is-active{color:var(--color-text-inverse);}
.sc-tab.is-active .sc-n{opacity:.8;}
.sc-stage{position:relative;}
.sc-panel{
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(var(--space-6),4vw,var(--space-12));
align-items:center;
background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-2xl);overflow:hidden;
padding:clamp(var(--space-5),2.5vw,var(--space-8));
box-shadow:0 18px 44px color-mix(in srgb, var(--color-text) 8%, transparent);
}
.sc-panel[hidden]{display:none;}
.sc-panel.is-active{animation:scFade .45s cubic-bezier(.16,1,.3,1) both;}
@keyframes scFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.sc-media{border-radius:var(--radius-xl);overflow:hidden;position:relative;
background:var(--color-surface-offset);box-shadow:0 10px 30px color-mix(in srgb, var(--color-text) 12%, transparent);}
.sc-media img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.sc-media .video-embed{border-radius:var(--radius-xl);box-shadow:none;}
.sc-body{padding-block:var(--space-2);}
.sc-kicker{
display:inline-flex;align-items:center;gap:.45rem;margin-bottom:var(--space-4);
font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-primary);
background:color-mix(in srgb, var(--color-primary) 10%, transparent);
padding:.4rem .85rem;border-radius:var(--radius-full);
}
.sc-kicker [data-lucide]{width:1rem;height:1rem;}
.sc-body h3{font-size:var(--text-xl);letter-spacing:-.025em;line-height:1.12;margin-bottom:var(--space-4);}
.sc-body>p{color:var(--color-text-muted);margin-bottom:var(--space-5);}
.sc-body ul{display:grid;gap:.7rem;margin-bottom:var(--space-6);}
.sc-body li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-sm);color:var(--color-text-muted);}
.sc-body li b{color:var(--color-text);font-weight:700;}
.sc-body li [data-lucide]{width:1.15rem;height:1.15rem;color:var(--color-teal);flex:none;margin-top:.15rem;}
[data-theme="dark"] .sc-body li [data-lucide]{color:var(--color-accent-bright);}
@media(max-width:900px){
.sc-panel{grid-template-columns:1fr;}
.sc-tab{padding:.6rem 1.05rem;font-size:var(--text-sm);}
}
@media (prefers-reduced-motion:reduce){ .sc-panel.is-active{animation:none;} }
/* =====================================================================
BRAND DUOTONE — unifies the decorative imagery with the palette
The 3D brand renders were produced in the old forest-green / harvest-gold
scheme and clashed with the violet/cyan brand. Rather than regenerate
them, they are recoloured in the browser: greyscale base + a navy ->
violet -> cyan gradient blended in 'color' mode. Costs nothing, applies
everywhere at once, and is removed by deleting this block if the images
are ever replaced with on-brand originals.
IMPORTANT: scientific figures (.plot-carousel, .plot-wall) are EXCLUDED.
Those are data, and recolouring a heatmap or a Manhattan plot would
misrepresent it.
===================================================================== */
.brand-carousel:not(.plot-carousel) .bslide,
.sc-media{isolation:isolate;}
.brand-carousel:not(.plot-carousel) .bslide>img,
.sc-media>img{filter:grayscale(1) contrast(1.03);}
.brand-carousel:not(.plot-carousel) .bslide::after,
.sc-media::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:linear-gradient(140deg,#01284F 0%,#8C52FF 55%,#03F7EB 100%);
mix-blend-mode:color;opacity:.85;
}
/* keep the caption and controls above the colour layer */
.brand-carousel .bslide-body{z-index:3;}
.brand-carousel .bcar-btn,.brand-carousel .bcar-dots{z-index:6;}
/* Product-page hero art gets the same treatment for consistency */
.prod-hero img[src*="-hero"],
.prod-hero img[src*="brand-"]{filter:grayscale(1) contrast(1.03);}
.prod-hero .hero-visual,.prod-hero figure{isolation:isolate;position:relative;}
/* =====================================================================
VALUE CARDS — restored presence
These were deliberately flattened while the homepage had two card grids
that looked alike. The capability cards have since become the showcase,
so the differentiation problem is gone — and flat cards on the near-white
default background were reading as a spec list rather than a designed row.
They now carry a real surface, so they work on ANY background.
===================================================================== */
.card{
background:var(--color-surface);
border:1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
border-radius:var(--radius-xl);border-top-width:1px;
padding:var(--space-6);
box-shadow:0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent);
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.card:hover{
transform:translateY(-4px);
border-color:color-mix(in srgb, var(--color-primary) 28%, transparent);
box-shadow:0 18px 38px color-mix(in srgb, var(--color-primary) 13%, transparent),
0 4px 12px color-mix(in srgb, var(--color-text) 7%, transparent);
}
.card .card-ico{
width:46px;height:46px;border-radius:var(--radius-lg);
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
color:#fff;box-shadow:0 5px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
margin-bottom:var(--space-4);
}
.card .card-ico [data-lucide]{width:1.4rem;height:1.4rem;}
.card h4{font-size:var(--text-base);letter-spacing:-.012em;margin-bottom:.4rem;}
a.card{display:block;}
a.card:hover h4{color:var(--color-primary);}
/* ---- Rhythm: a section immediately before the closing CTA doesn't need
full padding on both sides — it was leaving a dead gap. */
.section + .section:last-of-type{padding-top:var(--space-8);}
/* =====================================================================
PRINCIPLES — the "what makes the work different" band
An editorial numbered list rather than a card grid: a sticky heading on
the left, four large rows on the right separated by hairlines. Reads as
a statement of principles, which is what it is, and gives the homepage
one strong dark moment before the closing CTA.
===================================================================== */
.principles{
position:relative;overflow:hidden;
background:
radial-gradient(70% 90% at 88% 0%, color-mix(in srgb,#8C52FF 26%, transparent) 0%, transparent 62%),
radial-gradient(60% 80% at 4% 100%, color-mix(in srgb,#03F7EB 14%, transparent) 0%, transparent 58%),
var(--color-band-deep);
}
.principles::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 78%);
-webkit-mask-image:radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 78%);
}
.principles>*{position:relative;}
.principles-grid{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(var(--space-8),6vw,var(--space-20));align-items:start;}
.principles-head{padding-top:var(--space-5);}
.principles-head h2{font-size:var(--text-2xl);letter-spacing:-.03em;line-height:1.05;margin:var(--space-4) 0 var(--space-4);}
.principles-head p{color:rgba(255,255,255,.66);margin-bottom:var(--space-6);max-width:34ch;}
.principles-head .link-arrow{color:var(--color-accent-bright);}
.principle-list{display:grid;gap:0;counter-reset:none;margin:0;padding:0;list-style:none;}
.principle{
position:relative;display:grid;
grid-template-columns:auto 1fr auto;align-items:start;
gap:clamp(var(--space-5),3vw,var(--space-8));
padding:clamp(var(--space-6),3vw,var(--space-8)) var(--space-4);
border-top:1px solid rgba(255,255,255,.12);
transition:background .4s cubic-bezier(.16,1,.3,1);
}
.principle:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
/* gradient rule that draws across on hover */
.principle::before{
content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,var(--color-brand-violet),var(--color-accent-bright));
transform:scaleX(0);transform-origin:left;
transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.principle:hover::before{transform:scaleX(1);}
.principle:hover{background:rgba(255,255,255,.035);}
.p-num{
font-family:var(--font-display);font-weight:800;
font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;letter-spacing:-.03em;
background:linear-gradient(140deg,var(--color-brand-violet),var(--color-accent-bright));
-webkit-background-clip:text;background-clip:text;color:transparent;
opacity:.55;transition:opacity var(--transition);min-width:2.4ch;
}
.principle:hover .p-num{opacity:1;}
.p-body h3{
color:#fff;font-size:var(--text-lg);letter-spacing:-.02em;
margin-bottom:.5rem;line-height:1.15;
}
.p-body p{color:rgba(255,255,255,.66);font-size:var(--text-sm);max-width:52ch;line-height:1.65;}
.p-ico{
width:46px;height:46px;flex:none;border-radius:var(--radius-lg);
display:grid;place-items:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
color:var(--color-accent-bright);
transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.p-ico [data-lucide]{width:1.35rem;height:1.35rem;}
.principle:hover .p-ico{
background:color-mix(in srgb, var(--color-brand-violet) 26%, transparent);
border-color:color-mix(in srgb, var(--color-accent-bright) 40%, transparent);
transform:translateY(-2px);
}
@media(max-width:900px){
.principles-grid{grid-template-columns:1fr;gap:var(--space-8);}
.principle{grid-template-columns:auto 1fr;padding-inline:0;}
.p-ico{display:none;}
}
@media (prefers-reduced-motion:reduce){
.principle,.principle::before,.p-num,.p-ico{transition:none;}
}
/* =====================================================================
SCROLL CHROME
The header's scroll states (glass, progress line, underline indicator)
moved to style.css on 26 Sept 2026 and now apply on every page. What is
left here is the back-to-top button (any page that includes it).
===================================================================== */
/* ---- Back to top ---- */
.to-top{
position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
width:48px;height:48px;border-radius:var(--radius-full);z-index:120;
display:grid;place-items:center;
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
color:#fff;border:1px solid color-mix(in srgb,#fff 22%,transparent);
box-shadow:0 10px 28px color-mix(in srgb, var(--color-primary) 38%, transparent);
opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
transition:opacity .35s cubic-bezier(.16,1,.3,1),
transform .35s cubic-bezier(.16,1,.3,1),
box-shadow var(--transition);
}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{box-shadow:0 14px 36px color-mix(in srgb, var(--color-primary) 50%, transparent);transform:translateY(-3px);}
.to-top [data-lucide]{width:1.3rem;height:1.3rem;}
[data-theme="dark"] .to-top{color:var(--color-text-inverse);}
@media (prefers-reduced-motion:reduce){ .to-top{transition:none;} }
/* =====================================================================
SECTION ENTRANCE MOTION — homepage only for now
The base .reveal (opacity + 26px rise) lives in style.css and stays as the
universal fallback. This block gives the homepage a richer, choreographed
entrance: a longer travel, a whisper of scale, and a per-component feel so
sections arrive with intent rather than all doing the same fade.
--i is set by initReveal() on children of any [data-stagger] container.
===================================================================== */
body[data-page="home"] .reveal{
/* Declared as an explicit property LIST, not the shorthand. Several
components (.principle, .card) set their own `transition:` shorthand,
which resets transition-property and silently killed the opacity and
transform animation — the reveal class was applied but nothing moved.
Hover properties are kept in the list with their own short durations. */
transition-property:opacity, transform, background, box-shadow, border-color;
transition-duration:.85s, .85s, .4s, .35s, .35s;
transition-timing-function:cubic-bezier(.16,1,.3,1);
transition-delay:calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
will-change:opacity, transform;
}
html.js body[data-page="home"] .reveal{
opacity:0;transform:translateY(34px) scale(.985);
}
html.js body[data-page="home"] .reveal.in{
opacity:1;transform:none;
}
/* drop will-change once the element has arrived */
body[data-page="home"] .reveal.in{will-change:auto;}
/* --- Per-component character ------------------------------------------- */
/* Section headings lead: shorter travel, no delay, so the copy lands first
and the content follows it. */
html.js body[data-page="home"] .sec-head.reveal,
html.js body[data-page="home"] .principles-head.reveal{
transform:translateY(22px);
}
/* The showcase panel is large — let it settle rather than fly. */
html.js body[data-page="home"] .showcase.reveal{
transform:translateY(40px) scale(.99);
}
body[data-page="home"] .showcase.reveal{transition-duration:1s, 1s, .4s, .35s, .35s;}
/* Principles rows come in from the left, tracking the reading direction and
the hairline rules they sit between. */
html.js body[data-page="home"] .principle.reveal{
transform:translateY(20px) translateX(-16px);
}
html.js body[data-page="home"] .principle.reveal.in{transform:none;}
/* Value cards rise a little further and cascade. */
html.js body[data-page="home"] .card.reveal{
transform:translateY(30px) scale(.97);
}
/* The hero should never animate in — it is already on screen at load, and a
hero that fades in is a hero that looks slow. */
html.js body[data-page="home"] .hero .reveal{
opacity:1;transform:none;transition:none;
}
@media (prefers-reduced-motion:reduce){
html.js body[data-page="home"] .reveal,
html.js body[data-page="home"] .reveal.in,
html.js body[data-page="home"] .principle.reveal{
opacity:1;transform:none;transition:none;
}
}
/* Bullet text is a single flex item, so a bold label and its description wrap
together as prose rather than as two independently-wrapping items. */
.sc-body li>span{flex:1;min-width:0;}
.sc-body li b{color:var(--color-text);font-weight:700;}
/* =====================================================================
FOOTER
Brand block carries the identity, the contact details and the social
links; the four nav columns carry the sitemap; legal moves to the bottom
bar where it belongs. Previously the grid declared five tracks while the
markup had six children, so the Legal column wrapped onto its own row.
===================================================================== */
.site-footer::before{
background:linear-gradient(90deg,var(--color-primary),var(--color-indigo) 45%,var(--color-accent-bright));
}
.footer-brand .brand-logo-img{height:58px;}
.footer-mission{max-width:34ch;}
/* ---- Contact block ---- */
.footer-contact{display:grid;gap:.55rem;margin:var(--space-5) 0 var(--space-6);list-style:none;}
.footer-contact li{display:flex;align-items:center;gap:.6rem;font-size:var(--text-sm);}
.footer-contact [data-lucide]{width:1.05rem;height:1.05rem;color:var(--color-primary);flex:none;}
.footer-contact a{color:var(--color-text-muted);transition:color var(--transition);}
.footer-contact a:hover{color:var(--color-primary);}
/* ---- Social links in their own brand colours ----
Each sets --brand inline. At rest the chip is a soft tint of that
colour with the glyph in full colour; on hover the chip fills and the
glyph goes white. Recognisable at a glance without three loud blocks of
non-brand colour sitting in the footer. */
.socials{display:flex;gap:.55rem;list-style:none;padding:0;margin:0;}
.soc{
display:inline-grid;place-items:center;width:42px;height:42px;
border-radius:var(--radius-full);
color:var(--brand);
background:color-mix(in srgb, var(--brand) 12%, transparent);
border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
transition:background var(--transition),color var(--transition),
transform var(--transition),box-shadow var(--transition);
}
.soc svg{width:19px;height:19px;}
.soc:hover{
background:var(--brand);color:#fff;transform:translateY(-3px);
box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 42%, transparent);
}
.soc:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
/* On the dark theme the raw brand colours sit a little low — lift the glyph
and the tint so they stay legible without changing the identity. */
[data-theme="dark"] .soc{
color:color-mix(in srgb, var(--brand) 78%, #fff);
background:color-mix(in srgb, var(--brand) 20%, transparent);
border-color:color-mix(in srgb, var(--brand) 38%, transparent);
}
[data-theme="dark"] .soc:hover{color:#fff;}
/* ---- Bottom bar ---- */
/* The grid already carries a bottom rule — a second one on .footer-bottom
produced two hairlines with a dead gap between them. */
.footer-grid{margin-bottom:var(--space-8);padding-bottom:var(--space-8);}
.footer-bottom{padding-top:0;border-top:none;}
.fb-legal{display:flex;gap:var(--space-5);flex-wrap:wrap;}
.fb-legal a{color:var(--color-text-muted);transition:color var(--transition);}
.fb-legal a:hover{color:var(--color-primary);}
@media(max-width:960px){
.footer-grid{grid-template-columns:1fr 1fr;}
.footer-brand{grid-column:1 / -1;}
}
@media(max-width:560px){
.footer-bottom{align-items:flex-start;}
}
/* Address is a block element inside the contact row, so align to the top. */
.footer-contact li:has(address){align-items:flex-start;}
.footer-contact li:has(address) [data-lucide]{margin-top:.2rem;}
.footer-contact address{font-style:normal;color:var(--color-text-muted);line-height:1.55;}
/* =====================================================================
EDUCATION HUB — hero lockup, flagship programme, in-development grid
===================================================================== */
.edu-hero{position:relative;overflow:hidden;
padding-block:clamp(var(--space-16),7vw,var(--space-24)) clamp(var(--space-12),5vw,var(--space-16));}
.edu-hero::before{content:"";position:absolute;inset:0;z-index:-1;
background:
radial-gradient(50% 60% at 82% -10%, color-mix(in srgb, var(--color-brand-violet) 20%, transparent) 0%, transparent 62%),
radial-gradient(44% 52% at -6% 10%, color-mix(in srgb, var(--color-accent-bright) 14%, transparent) 0%, transparent 58%);}
.edu-hero-inner{max-width:70ch;}
/* Two-column hero on desktop: message on the left, the open programme on the
right. Below 1080px the snapshot stacks under the copy. */
@media (min-width:1080px){
.edu-hero-inner{max-width:none;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
gap:clamp(var(--space-10),5vw,var(--space-16));align-items:center;}
.edu-hero-inner > div{max-width:64ch;}
}
/* ---- Hero snapshot card ---- */
.edu-snapshot{position:relative;align-self:center;
background:color-mix(in srgb, var(--color-surface) 86%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
border-radius:var(--radius-2xl);padding:clamp(var(--space-6),2.4vw,var(--space-8));
box-shadow:0 26px 60px color-mix(in srgb, var(--color-text) 12%, transparent);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
margin-top:var(--space-10);}
@media (min-width:1080px){ .edu-snapshot{margin-top:0;} }
.edu-snapshot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
padding:1px;background:linear-gradient(140deg,
color-mix(in srgb, var(--color-primary) 55%, transparent),
color-mix(in srgb, var(--color-accent-bright) 45%, transparent) 55%,
transparent 85%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;}
.snap-flag{display:inline-flex;align-items:center;gap:.5rem;
font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--color-primary);margin-bottom:var(--space-5);}
.snap-flag .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-primary);
box-shadow:0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent);
animation:snapPulse 2.4s ease-out infinite;}
@keyframes snapPulse{
0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-primary) 50%, transparent);}
70%{box-shadow:0 0 0 .55rem transparent;}
100%{box-shadow:0 0 0 0 transparent;}}
@media (prefers-reduced-motion:reduce){ .snap-flag .dot{animation:none;} }
.snap-title{font-family:var(--font-display);font-weight:800;
font-size:clamp(1.25rem,.95rem + .75vw,1.6rem);line-height:1.12;letter-spacing:-.028em;
margin:0 0 .4rem;}
.snap-sub{font-size:var(--text-sm);color:var(--color-primary);font-weight:600;margin:0 0 var(--space-6);}
.snap-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);
padding:var(--space-5) 0;border-block:1px solid var(--color-divider);}
.snap-facts b{display:block;font-family:var(--font-display);font-weight:800;
font-size:clamp(1.15rem,.9rem + .6vw,1.5rem);line-height:1;
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
-webkit-background-clip:text;background-clip:text;color:transparent;}
.snap-facts span{display:block;font-size:.72rem;line-height:1.3;color:var(--color-text-muted);margin-top:.3rem;}
.snap-meta{display:grid;gap:0;margin:0 0 var(--space-6);}
.snap-meta > div{display:flex;justify-content:space-between;gap:var(--space-4);
padding:.65rem 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm);}
.snap-meta dt{color:var(--color-text-muted);margin:0;}
.snap-meta dd{margin:0;font-weight:700;text-align:right;}
.snap-go{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--text-sm);
color:var(--color-primary);text-decoration:none;}
.snap-go [data-lucide]{width:1rem;height:1rem;transition:transform var(--transition);}
.snap-go:hover [data-lucide]{transform:translateX(4px);}
@media (max-width:560px){
.snap-facts{grid-template-columns:repeat(2,1fr);row-gap:var(--space-5);}
}
.edu-hero h1{font-size:clamp(2.1rem,1.35rem + 2.5vw,3.4rem);letter-spacing:-.032em;line-height:1.04;margin:var(--space-6) 0 var(--space-5);}
/* A headline that has to name three disciplines needs a smaller top end, or it
runs to six lines in the hero's left column. */
.edu-hero h1.h1-long{font-size:clamp(1.95rem,1.2rem + 2.05vw,2.75rem);line-height:1.08;}
/* DataViz Pro "Who it is for": a wider head so the headline breaks in three balanced lines, not four. */
.who-head{max-width:62rem;}
.who-head h2{text-wrap:balance;}
#who .sec-head h2 .grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.edu-hero h1 .grad{
background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.edu-hero .lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:56ch;}
/* Logo lockup — the mark is never restyled, only framed. */
.brand-lockup{display:inline-flex;align-items:center;gap:var(--space-4);
background:color-mix(in srgb, var(--color-surface) 78%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
border-radius:var(--radius-xl);padding:.7rem 1.1rem;
box-shadow:0 4px 18px color-mix(in srgb, var(--color-primary) 10%, transparent);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.brand-lockup img{height:44px;width:auto;display:block;}
.brand-lockup.no-logo img{display:none;}
.brand-lockup-div{width:1px;align-self:stretch;background:var(--color-divider);}
.brand-lockup-txt{font-size:var(--text-xs);line-height:1.35;color:var(--color-text-muted);
text-transform:uppercase;letter-spacing:.12em;font-weight:700;}
.brand-lockup-txt b{color:var(--color-text);font-weight:800;}
/* The registered KultivateEd mark is dark artwork, so in dark mode the plate
stays light rather than the logo being altered. */
[data-theme="dark"] .brand-lockup{background:#f7f7fa;border-color:rgba(255,255,255,.14);
box-shadow:0 6px 22px rgba(0,0,0,.45);}
[data-theme="dark"] .brand-lockup-div{background:rgba(15,17,21,.14);}
[data-theme="dark"] .brand-lockup-txt{color:#5a5c66;}
[data-theme="dark"] .brand-lockup-txt b{color:#0f1115;}
/* ---- Flagship programme ---- */
.flagship{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(var(--space-6),3vw,var(--space-10));
background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-2xl);overflow:hidden;
padding:clamp(var(--space-6),3vw,var(--space-10));
box-shadow:0 20px 50px color-mix(in srgb, var(--color-text) 9%, transparent);}
.flagship-main h3{font-size:var(--text-2xl);letter-spacing:-.03em;line-height:1.05;margin:var(--space-4) 0 .4rem;}
.flagship-sub{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);
color:var(--color-primary);margin-bottom:var(--space-5);}
.flagship-blurb{color:var(--color-text-muted);max-width:60ch;margin-bottom:var(--space-8);}
.flagship-modlabel{font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-text-faint);margin-bottom:var(--space-4);}
.flagship-mods{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:none;}
.flagship-mods li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:baseline;
padding:var(--space-4) 0;border-top:1px solid var(--color-divider);}
.flagship-mods li:last-child{border-bottom:1px solid var(--color-divider);}
.fm-n{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
background:linear-gradient(140deg,var(--color-primary),var(--color-accent-bright));
-webkit-background-clip:text;background-clip:text;color:transparent;}
.fm-t b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
letter-spacing:-.012em;margin-bottom:.15rem;}
.fm-t i{font-style:normal;font-size:var(--text-sm);color:var(--color-text-muted);}
.flagship-side{background:var(--color-surface-alt);border-radius:var(--radius-xl);
padding:var(--space-6);align-self:start;position:sticky;top:calc(var(--header-h) + var(--space-4));}
.flagship-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-6);}
.flagship-facts b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);
line-height:1;background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
-webkit-background-clip:text;background-clip:text;color:transparent;}
.flagship-facts span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.25rem;}
.flagship-meta{display:grid;gap:0;margin:0 0 var(--space-6);}
.flagship-meta > div{display:flex;justify-content:space-between;gap:var(--space-4);
padding:.6rem 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-sm);}
.flagship-meta dt{color:var(--color-text-muted);margin:0;}
.flagship-meta dd{margin:0;font-weight:700;text-align:right;}
.flagship-side .btn{margin-bottom:.6rem;}
.flagship-note{display:flex;gap:.5rem;align-items:flex-start;margin-top:var(--space-4);
font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5;}
.flagship-note [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);flex:none;margin-top:.1rem;}
/* ---- In development ---- */
.planned-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.planned{background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.planned:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--color-primary) 26%, transparent);
box-shadow:0 16px 34px color-mix(in srgb, var(--color-primary) 12%, transparent);}
.planned-ico{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;
background:color-mix(in srgb, var(--color-primary) 11%, transparent);color:var(--color-primary);
margin-bottom:var(--space-4);}
.planned-ico [data-lucide]{width:1.3rem;height:1.3rem;}
.planned h4{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);margin-bottom:.4rem;}
.planned p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-5);flex-grow:1;}
.planned .link-arrow{margin-top:auto;}
/* ---- Instructors ---- */
.tutor-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start;}
.tutor{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);align-items:start;
background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-2xl);padding:var(--space-6);}
.tutor-photo{width:104px;height:104px;border-radius:var(--radius-xl);object-fit:cover;flex:none;
box-shadow:0 8px 22px color-mix(in srgb, var(--color-text) 12%, transparent);}
.tutor-photo.is-initials{display:grid;place-items:center;color:#fff;
font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));}
.tutor-body h3{font-size:var(--text-lg);letter-spacing:-.018em;margin-bottom:.15rem;}
.tutor-role{font-size:var(--text-sm);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-4);}
.tutor-body p{font-size:var(--text-sm);color:var(--color-text-muted);}
.tutor-tags{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-4);list-style:none;padding:0;}
.tutor-tags li{display:flex;align-items:center;gap:.4rem;font-size:var(--text-xs);font-weight:600;
color:var(--color-text-muted);}
.tutor-tags [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);}
/* steps without the old numeral, since the numbers moved into the modules */
.edu-hero ~ .section .steps .step{padding-top:var(--space-6);border-top:2px solid var(--color-divider);}
.edu-hero ~ .section .steps .step::before{display:none;}
@media(max-width:1000px){
.flagship{grid-template-columns:1fr;}
.planned-grid{grid-template-columns:1fr 1fr;}
.tutor-grid{grid-template-columns:1fr;}
}
@media(max-width:620px){
.planned-grid{grid-template-columns:1fr;}
.tutor{grid-template-columns:1fr;}
.brand-lockup{flex-wrap:wrap;}
}
/* =====================================================================
COURSE DETAIL — hero, outcomes, session-level programme
===================================================================== */
.course-hero{position:relative;overflow:hidden;
padding-block:clamp(var(--space-8),4vw,var(--space-12)) clamp(var(--space-12),5vw,var(--space-16));}
.course-hero::before{content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(52% 62% at 88% -12%, color-mix(in srgb, var(--color-brand-violet) 18%, transparent) 0%, transparent 62%);}
.course-hero-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(var(--space-8),4vw,var(--space-12));
align-items:start;margin-top:var(--space-6);}
.course-hero h1{font-size:clamp(2rem,1.3rem + 2.3vw,3.2rem);letter-spacing:-.03em;line-height:1.05;
margin:var(--space-4) 0 .5rem;}
.course-sub{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);
color:var(--color-primary);margin-bottom:var(--space-5);}
.course-hero .lead{color:var(--color-text-muted);max-width:62ch;}
.course-facts{display:flex;gap:clamp(var(--space-6),3vw,var(--space-10));flex-wrap:wrap;
margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-divider);}
.cf b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);line-height:1;
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
-webkit-background-clip:text;background-clip:text;color:transparent;}
.cf span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.3rem;}
.enrol-card{position:sticky;top:calc(var(--header-h) + var(--space-4));
background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-2xl);
padding:var(--space-6);box-shadow:0 18px 44px color-mix(in srgb, var(--color-text) 10%, transparent);}
.enrol-card h4{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-5);}
.enrol-meta{display:grid;gap:0;margin:0 0 var(--space-6);}
.enrol-meta > div{display:flex;justify-content:space-between;gap:var(--space-4);padding:.6rem 0;
border-bottom:1px solid var(--color-divider);font-size:var(--text-sm);}
.enrol-meta dt{color:var(--color-text-muted);margin:0;}
.enrol-meta dd{margin:0;font-weight:700;text-align:right;}
.enrol-card .btn{margin-bottom:.6rem;}
.enrol-note{display:flex;gap:.5rem;align-items:flex-start;margin-top:var(--space-4);
font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5;}
.enrol-note [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);flex:none;margin-top:.1rem;}
/* ---- outcomes ---- */
/* =====================================================================
OUTCOMES — three pillars: the science, the models, the decisions.
Editorial rather than boxed: hairline rules, the term in display type,
and a soft spotlight that tracks the pointer across the block.
===================================================================== */
.outcome-pillars{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(var(--space-8),4vw,var(--space-16));
--spot-x:50%;--spot-y:50%;}
/* The spotlight sits behind the text and never intercepts clicks. */
.outcome-pillars::before{content:"";position:absolute;inset:-8% -4%;z-index:0;
pointer-events:none;border-radius:var(--radius-2xl);
background:radial-gradient(340px circle at var(--spot-x) var(--spot-y),
color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 70%);
opacity:0;transition:opacity .4s ease;}
.outcome-pillars.is-lit::before{opacity:1;}
[data-theme="dark"] .outcome-pillars::before{
background:radial-gradient(340px circle at var(--spot-x) var(--spot-y),
color-mix(in srgb, var(--color-accent-bright) 15%, transparent) 0%, transparent 70%);}
.opil{position:relative;z-index:1;}
.opil-head{display:flex;align-items:baseline;gap:.75rem;
padding-bottom:var(--space-4);margin-bottom:var(--space-2);
border-bottom:1px solid var(--color-divider);position:relative;}
/* A short brand rule rides on top of the hairline. */
.opil-head::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;
background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));}
.opil-n{font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);
letter-spacing:.14em;color:var(--color-text-faint);}
.opil-head h3{font-family:var(--font-display);font-weight:800;
font-size:clamp(1.05rem,.9rem + .45vw,1.3rem);letter-spacing:-.02em;margin:0;
text-transform:uppercase;}
.opil ul{list-style:none;margin:0;padding:0;}
.opil li{position:relative;padding:var(--space-5) 0 var(--space-5) var(--space-5);
border-bottom:1px solid var(--color-divider);
transition:padding-left var(--transition);}
.opil li:last-child{border-bottom:0;}
/* The accent bar grows out of the left edge on hover. */
.opil li::before{content:"";position:absolute;left:0;top:calc(var(--space-5) + .35rem);
width:3px;height:0;border-radius:2px;
background:linear-gradient(180deg,var(--color-primary),var(--color-accent-bright));
transition:height var(--transition);}
.opil li:hover::before{height:calc(100% - var(--space-10) - .7rem);min-height:1.1rem;}
.opil li b{display:block;font-family:var(--font-display);font-weight:800;
font-size:var(--text-base);letter-spacing:-.014em;line-height:1.25;
color:var(--color-text);transition:color var(--transition);}
.opil li:hover b{color:var(--color-primary);}
.opil li i{display:block;font-style:normal;margin-top:.35rem;
font-size:var(--text-sm);line-height:1.55;color:var(--color-text-muted);}
@media (prefers-reduced-motion:reduce){
.opil li,.opil li::before,.opil li b{transition:none;}
.outcome-pillars::before{display:none;}
}
/* Three pillars into two columns left the third stranded on its own row, so
below 1000px each pillar takes the full width and its own items go two-up
instead. Single column on phones. */
@media (max-width:1000px){
.outcome-pillars{grid-template-columns:1fr;gap:var(--space-10);}
.opil ul{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(var(--space-6),4vw,var(--space-12));}
.opil li:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:700px){
.opil ul{grid-template-columns:1fr;}
.opil li:nth-last-child(-n+2){border-bottom:1px solid var(--color-divider);}
.opil li:last-child{border-bottom:0;}
}
/* ---- programme ---- */
.prog-tools{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:var(--space-5);}
.prog{display:grid;gap:var(--space-4);}
.prog-mod{background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-xl);overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition);}
.prog-mod[open]{border-color:color-mix(in srgb, var(--color-primary) 26%, transparent);
box-shadow:0 14px 34px color-mix(in srgb, var(--color-primary) 10%, transparent);}
.prog-mod summary{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--space-5);
align-items:center;padding:var(--space-5) var(--space-6);cursor:pointer;list-style:none;}
.prog-mod summary::-webkit-details-marker{display:none;}
.pm-n{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);line-height:1;
background:linear-gradient(140deg,var(--color-primary),var(--color-accent-bright));
-webkit-background-clip:text;background-clip:text;color:transparent;}
.pm-head b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
letter-spacing:-.014em;}
.pm-head i{font-style:normal;font-size:var(--text-sm);color:var(--color-text-muted);}
.pm-meta{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);white-space:nowrap;}
.prog-mod summary .chev{transition:transform var(--transition);color:var(--color-primary);flex:none;}
.prog-mod[open] summary .chev{transform:rotate(180deg);}
.prog-body{border-top:1px solid var(--color-divider);}
.ses{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--space-5);
padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-divider);}
.ses:last-child{border-bottom:none;}
.ses-time{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);
font-variant-numeric:tabular-nums;padding-top:.15rem;white-space:nowrap;}
.ses-type{display:inline-block;font-size:var(--text-xs);font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--color-primary);
background:color-mix(in srgb, var(--color-primary) 10%, transparent);
padding:.2rem .6rem;border-radius:var(--radius-full);margin-bottom:.5rem;}
.ses-body h5{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
letter-spacing:-.012em;margin-bottom:.45rem;}
.ses-content{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}
.ses-out{display:flex;gap:.5rem;align-items:flex-start;margin-top:.7rem;
font-size:var(--text-sm);color:var(--color-text);font-weight:600;}
.ses-out [data-lucide]{width:1rem;height:1rem;color:var(--color-teal);flex:none;margin-top:.22rem;}
[data-theme="dark"] .ses-out [data-lucide]{color:var(--color-accent-bright);}
.ses.is-break{padding-block:.7rem;background:var(--color-surface-offset);align-items:center;}
.ses-brk{font-size:var(--text-xs);font-weight:700;color:var(--color-text-faint);
text-transform:uppercase;letter-spacing:.09em;}
@media(max-width:1000px){
.course-hero-grid{grid-template-columns:1fr;}
.enrol-card{position:static;}
}
@media(max-width:700px){
.prog-mod summary{grid-template-columns:auto 1fr auto;gap:var(--space-3);padding:var(--space-4);}
.pm-meta{display:none;}
.ses{grid-template-columns:1fr;gap:.4rem;padding:var(--space-4);}
}
/* =====================================================================
PROGRAMME CAROUSEL — one programme at a time, led by the figure of the
method it teaches. Scroll-snap moves it; JS only adds arrows and dots.
===================================================================== */
.pcar{position:relative;margin-top:var(--space-10);}
.pcar-track{
display:grid;grid-auto-flow:column;grid-auto-columns:100%;
gap:var(--space-6);overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:var(--space-2);border-radius:var(--radius-2xl);}
.pcar-track::-webkit-scrollbar{display:none;}
.pcar-track:focus-visible{outline:3px solid var(--color-primary);outline-offset:6px;}
@media (prefers-reduced-motion:reduce){ .pcar-track{scroll-behavior:auto;} }
.pslide{
scroll-snap-align:center;display:grid;grid-template-columns:1.02fr .98fr;
align-items:stretch;overflow:hidden;
background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-2xl);
box-shadow:0 18px 44px color-mix(in srgb, var(--color-text) 8%, transparent);
transition:box-shadow var(--transition),border-color var(--transition);}
.pslide.is-current{border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow:0 24px 60px color-mix(in srgb, var(--color-primary) 16%, transparent);}
.pslide-art{position:relative;min-height:300px;background:#050B1A;overflow:hidden;}
.pslide-art img{width:100%;height:100%;object-fit:cover;display:block;}
.pslide-art::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.42) 100%);}
.pslide-ico{position:absolute;top:var(--space-5);left:var(--space-5);z-index:1;
width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.pslide-ico [data-lucide]{width:1.35rem;height:1.35rem;}
.pslide-body{padding:clamp(var(--space-6),3vw,var(--space-10));
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.pslide-step{display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);
letter-spacing:.14em;color:var(--color-text-faint);margin-bottom:var(--space-4);}
.pslide-step s{width:18px;height:1px;background:currentColor;opacity:.6;text-decoration:none;}
.pslide-body h3{font-family:var(--font-display);font-weight:800;
font-size:clamp(1.3rem,1rem + .9vw,1.8rem);letter-spacing:-.03em;line-height:1.08;
margin:0 0 var(--space-4);}
.pslide-body > p{color:var(--color-text-muted);margin:0 0 var(--space-5);max-width:46ch;}
.pslide-cap{display:flex;gap:.5rem;align-items:flex-start;
font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5;
margin:0 0 var(--space-5);max-width:40ch;}
.pslide-cap [data-lucide]{width:.95rem;height:.95rem;flex:none;margin-top:.15rem;color:var(--color-primary);}
.pslide-state{display:inline-flex;align-items:center;gap:.5rem;
font-size:var(--text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-text-muted);
background:color-mix(in srgb, var(--color-text) 6%, transparent);
border:1px solid var(--color-divider);border-radius:var(--radius-full);
padding:.4rem .85rem;margin-bottom:var(--space-6);}
.pslide-state s{width:.45rem;height:.45rem;border-radius:50%;background:var(--color-text-faint);text-decoration:none;}
.pcar-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--color-surface);border:1px solid var(--color-divider);
color:var(--color-text);box-shadow:0 8px 24px color-mix(in srgb, var(--color-text) 16%, transparent);
transition:all var(--transition);}
.pcar-nav.prev{left:calc(-1 * var(--space-5));}
.pcar-nav.next{right:calc(-1 * var(--space-5));}
.pcar-nav:hover:not(:disabled){background:var(--color-primary);color:#fff;border-color:transparent;transform:translateY(-50%) scale(1.06);}
.pcar-nav:disabled{opacity:0;pointer-events:none;}
.pcar-nav [data-lucide]{width:1.25rem;height:1.25rem;}
@media (max-width:1180px){ .pcar-nav.prev{left:var(--space-3);} .pcar-nav.next{right:var(--space-3);} }
.pcar-dots{display:flex;justify-content:center;gap:.5rem;margin-top:var(--space-6);}
.pcar-dots button{width:9px;height:9px;border-radius:50%;padding:0;
background:color-mix(in srgb, var(--color-text) 20%, transparent);
transition:all var(--transition);}
.pcar-dots button:hover{background:color-mix(in srgb, var(--color-primary) 55%, transparent);}
.pcar-dots button.is-on{width:26px;border-radius:var(--radius-full);
background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));}
@media (max-width:860px){
.pslide{grid-template-columns:1fr;}
.pslide-art{min-height:200px;aspect-ratio:16/9;}
.pcar-track{grid-auto-columns:92%;}
/* Swiping is the natural gesture on touch, and the arrows would sit on top
of the copy at this width. Dots still show position. */
.pcar-nav{display:none;}
}
/* =====================================================================
COURSE VIDEO TILES — two films side by side: the short introduction and
the full walkthrough. Each poster is drawn, never an empty grey box.
Set data-yt="VIDEO_ID" on .vtile and it plays inline.
===================================================================== */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-5),2.5vw,var(--space-8));}
.vtile{display:block;overflow:hidden;text-decoration:none;color:inherit;
border-radius:var(--radius-2xl);background:var(--color-surface);
border:1px solid var(--color-divider);
box-shadow:0 16px 40px color-mix(in srgb, var(--color-text) 9%, transparent);
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.vtile:hover{transform:translateY(-4px);
border-color:color-mix(in srgb, var(--color-primary) 28%, transparent);
box-shadow:0 28px 62px color-mix(in srgb, var(--color-primary) 20%, transparent);}
.vt-stage{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;
background:linear-gradient(135deg,#0B1030 0%,#2A1470 48%,#06333A 100%);}
.vtile.d1 .vt-stage{background:linear-gradient(135deg,#0A1330 0%,#111B5E 46%,#2A0F52 100%);}
.vt-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(110% 90% at 50% 46%, transparent 48%, rgba(0,0,0,.44) 100%);}
.vt-motif{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.vt-play{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;
display:grid;place-items:center;background:#fff;color:#12121a;
box-shadow:0 14px 36px rgba(0,0,0,.45);transition:transform var(--transition);}
.vtile:hover .vt-play{transform:scale(1.09);}
.vt-play svg{width:26px;height:26px;margin-left:3px;}
.vt-badge{position:absolute;z-index:1;left:var(--space-5);top:var(--space-5);
width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.vt-badge svg{width:1.15rem;height:1.15rem;color:#FF4747;}
.vt-foot{display:flex;align-items:center;gap:var(--space-4);
padding:var(--space-5) var(--space-6);}
.vt-txt{flex:1;min-width:0;}
.vt-txt b{display:block;font-family:var(--font-display);font-weight:800;
font-size:var(--text-lg);letter-spacing:-.022em;line-height:1.2;color:var(--color-text);}
.vt-txt i{display:block;font-style:normal;margin-top:.3rem;
font-size:var(--text-sm);line-height:1.5;color:var(--color-text-muted);}
.vt-arrow{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
color:var(--color-primary);
background:color-mix(in srgb, var(--color-primary) 11%, transparent);
transition:all var(--transition);}
.vt-arrow [data-lucide]{width:1.05rem;height:1.05rem;}
.vtile:hover .vt-arrow{background:var(--color-primary);color:#fff;}
.vtile.is-playing .vt-stage{display:none;}
.vtile iframe{width:100%;aspect-ratio:16/9;border:0;display:block;}
@media (max-width:860px){ .vgrid{grid-template-columns:1fr;} }
/* =====================================================================
INSTRUCTOR CARDS — a reserved portrait slot that reads as designed rather
than broken, plus profile links in each network's own colour.
Drop a photo at the img src and it simply takes over.
===================================================================== */
.tutor-photo.is-reserved{
position:relative;display:grid;place-items:center;overflow:hidden;
background:linear-gradient(140deg,#1B1046 0%,#4A21B8 46%,#07535B 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),
0 12px 30px color-mix(in srgb, var(--color-primary) 22%, transparent);}
.tutor-photo.is-reserved::before{content:"";position:absolute;inset:0;
background:
radial-gradient(60% 60% at 24% 16%, rgba(3,247,235,.30) 0%, transparent 62%),
radial-gradient(60% 60% at 82% 88%, rgba(249,91,246,.24) 0%, transparent 60%);}
.tutor-photo.is-reserved::after{content:"";position:absolute;
inset:9px;border-radius:calc(var(--radius-xl) - 6px);
border:1px solid rgba(255,255,255,.2);}
.tutor-photo.is-reserved b{position:relative;font-family:var(--font-display);
font-weight:800;font-size:2rem;letter-spacing:.02em;color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.35);}
.tutor-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--space-5) 0 0;padding:0;list-style:none;}
.tlink{display:inline-flex;align-items:center;gap:.45rem;
font-size:var(--text-xs);font-weight:700;text-decoration:none;
padding:.42rem .8rem;border-radius:var(--radius-full);
color:var(--brand,var(--color-primary));
background:color-mix(in srgb, var(--brand,var(--color-primary)) 10%, transparent);
border:1px solid color-mix(in srgb, var(--brand,var(--color-primary)) 24%, transparent);
transition:all var(--transition);}
.tlink svg,.tlink [data-lucide]{width:.95rem;height:.95rem;flex:none;}
.tlink:hover{background:var(--brand,var(--color-primary));color:#fff;
border-color:transparent;transform:translateY(-2px);
box-shadow:0 8px 18px color-mix(in srgb, var(--brand,var(--color-primary)) 34%, transparent);}
/* GitHub's near-black needs to lift in dark mode to stay visible. */
[data-theme="dark"] .tlink[style*="#24292F"]{--brand:#C9D1D9;}
/* Watch-the-intro link inside the hero snapshot. Points at the channel until
a video id is set on that tile on the course page. */
.snap-watch{display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--space-4);
font-size:var(--text-sm);font-weight:700;text-decoration:none;color:var(--color-text-muted);
transition:color var(--transition);}
.snap-watch:hover{color:var(--color-text);}
.sw-play{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
background:#FF0000;color:#fff;transition:transform var(--transition);}
.sw-play svg{width:12px;height:12px;margin-left:1.5px;}
.snap-watch:hover .sw-play{transform:scale(1.12);}
.edu-snapshot .snap-go{display:inline-flex;width:fit-content;}
.edu-snapshot .snap-watch{display:flex;}
/* =====================================================================
INTERNSHIP ACADEMY — open-track cards with a length selector, the
session-photo gallery, and the cohort carousel. Built on the
same pieces as the Courses hub (edu-hero, edu-snapshot, pcar) so the
two pages read as one product.
===================================================================== */
/* ---- hero snapshot: list of open tracks ---- */
.snap-tracks{list-style:none;margin:0 0 var(--space-5);padding:0;display:grid;gap:.5rem;}
.snap-tracks a{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;
padding:.7rem .85rem;border-radius:var(--radius-lg);
background:color-mix(in srgb, var(--color-primary) 6%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
transition:all var(--transition);}
.snap-tracks a:hover{background:color-mix(in srgb, var(--color-primary) 11%, transparent);
border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);transform:translateX(3px);}
.snap-tracks a > [data-lucide]:first-child{width:1.15rem;height:1.15rem;color:var(--color-primary);flex:none;}
.snap-tracks a > span{flex:1;min-width:0;}
.snap-tracks b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);line-height:1.2;}
.snap-tracks i{display:block;font-style:normal;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.15rem;}
.snap-tracks .go{width:1rem;height:1rem;color:var(--color-text-faint);flex:none;}
/* ---- open track card ---- */
.trk-list{display:grid;gap:var(--space-8);margin-top:var(--space-10);}
.trk{display:grid;grid-template-columns:1.08fr .92fr;align-items:start;gap:clamp(var(--space-6),3vw,var(--space-10));
background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-2xl);padding:clamp(var(--space-6),3vw,var(--space-10));
box-shadow:0 20px 50px color-mix(in srgb, var(--color-text) 9%, transparent);
scroll-margin-top:calc(var(--header-h) + var(--space-6));}
.trk-head{display:flex;gap:var(--space-5);align-items:flex-start;margin-bottom:var(--space-5);}
.trk-ico{flex:none;width:56px;height:56px;border-radius:var(--radius-lg);display:grid;place-items:center;
color:#fff;background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
box-shadow:0 10px 24px color-mix(in srgb, var(--color-primary) 30%, transparent);}
.trk-ico [data-lucide]{width:1.6rem;height:1.6rem;}
.trk-head h3{font-family:var(--font-display);font-weight:800;
font-size:clamp(1.4rem,1.05rem + 1.1vw,2rem);letter-spacing:-.03em;line-height:1.06;margin:.5rem 0 .35rem;}
.trk-tag{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);color:var(--color-primary);margin:0;}
.trk-blurb{color:var(--color-text-muted);max-width:62ch;margin:0 0 var(--space-6);}
/* length selector */
.trk-lens{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-4);}
.len{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
padding:.6rem .95rem;border-radius:var(--radius-lg);text-align:left;
background:var(--color-surface-alt);border:1px solid var(--color-divider);
color:var(--color-text);transition:all var(--transition);}
.len b{font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);line-height:1.1;}
.len span{font-size:var(--text-xs);color:var(--color-text-muted);}
.len:hover{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);transform:translateY(-1px);}
.len.is-on{background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));color:#fff;border-color:transparent;
box-shadow:0 8px 20px color-mix(in srgb, var(--color-primary) 32%, transparent);}
.len.is-on span{color:rgba(255,255,255,.8);}
[data-theme="dark"] .len.is-on{color:var(--color-text-inverse);}
[data-theme="dark"] .len.is-on span{color:color-mix(in srgb, var(--color-text-inverse) 75%, transparent);}
.trk-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;min-height:2.6em;}
/* ---- the card's two columns ----
Left is the pitch, right is what you walk away with. The side column is a
tinted panel of its own so the two read as deliberate halves rather than
one column that ran long. */
.trk-main{min-width:0;display:flex;flex-direction:column;}
.trk-side{min-width:0;align-self:start;
padding:clamp(var(--space-6),2.2vw,var(--space-8));
border-radius:var(--radius-xl);
background:color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-alt));
border:1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);}
.trk-sidelabel{font-family:var(--font-display);font-weight:800;
font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;
color:var(--color-text-muted);margin:0 0 var(--space-4);
padding-bottom:var(--space-3);
border-bottom:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);}
/* A rule under each label groups what follows it, so the two halves of the
panel read as two blocks rather than one long run. */
.trk-build + .trk-sidelabel{margin-top:var(--space-6);}
.trk-sidelabel span{color:var(--color-primary);}
.trk-build{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.trk-build li{display:flex;gap:.55rem;align-items:flex-start;
font-size:var(--text-sm);line-height:1.45;}
.trk-build [data-lucide]{width:1rem;height:1rem;flex:none;margin-top:.22rem;
color:var(--color-primary);}
.trk-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;}
.trk-tags li{font-size:var(--text-xs);font-weight:600;line-height:1.1;
padding:.32rem .6rem;border-radius:var(--radius-full);
color:var(--color-text-muted);
background:color-mix(in srgb, var(--color-text) 5%, transparent);
border:1px solid color-mix(in srgb, var(--color-text) 9%, transparent);}
.trk-side .btn{margin-top:var(--space-6);}
.trk-side .btn + .btn{margin-top:var(--space-3);}
@media (max-width:980px){
.trk{grid-template-columns:1fr;}
.trk-sub{min-height:0;}
}
@media (max-width:560px){
.trk-head{gap:var(--space-4);}
.trk-ico{width:46px;height:46px;}
.len{flex:1 1 auto;min-width:0;}
}
/* ---- the cohort carousel ----
Photo-led: the portrait sits on a deep brand-gradient panel with two soft
colour washes over it, cropped to a circle with a white ring, and the copy
column keeps a readable width rather than stretching across half a very
wide card. */
.icar .pslide{grid-template-columns:.88fr 1.12fr;}
.intern-art{display:grid;place-items:center;padding:clamp(var(--space-6),3vw,var(--space-10));
background:linear-gradient(140deg,#1B1046 0%,#4A21B8 46%,#07535B 100%);min-height:280px;position:relative;}
.intern-art::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 60% at 24% 16%, rgba(3,247,235,.26) 0%, transparent 62%),
radial-gradient(60% 60% at 82% 88%, rgba(249,91,246,.22) 0%, transparent 60%);}
.intern-art img,.intern-photo{position:relative;width:min(248px,78%);aspect-ratio:1;border-radius:50%;object-fit:cover;
box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 24px 50px rgba(0,0,0,.45);}
.intern-photo.is-reserved{display:grid;place-items:center;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);}
.intern-photo.is-reserved b{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:#fff;}
.intern-aff{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-4);}
.icar .pslide-body{max-width:56ch;}
/* Status pill stays on one line; the track and length sit under it. The
is a mid-dot drawn in CSS so it is never read out or copied with the text. */
.pslide-state{white-space:nowrap;}
.pslide-state.is-live{color:var(--color-primary);
background:color-mix(in srgb, var(--color-primary) 9%, transparent);
border-color:color-mix(in srgb, var(--color-primary) 22%, transparent);}
.pslide-state.is-live s{background:var(--color-primary);}
/* An intern who has finished their track. Distinct from "in session" so the
same carousel can carry both without the section over-claiming. */
.pslide-state.is-done{color:var(--color-success);
background:color-mix(in srgb, var(--color-success) 10%, transparent);
border-color:color-mix(in srgb, var(--color-success) 24%, transparent);}
.pslide-state.is-done s{background:var(--color-success);}
.intern-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
margin:var(--space-4) 0 0;font-size:var(--text-sm);font-weight:600;
color:var(--color-text-muted);}
.intern-meta s{width:.28rem;height:.28rem;border-radius:50%;flex:none;
background:var(--color-text-faint);text-decoration:none;}
/* Profile link on an intern card. Same pill as the mentor cards. */
.intern-links{margin:var(--space-5) 0 0;}
@media (max-width:860px){
.icar .pslide{grid-template-columns:1fr;}
.intern-art{min-height:240px;aspect-ratio:auto;}
}
/* =====================================================================
ACADEMY GALLERY — a peeking filmstrip of session photographs.
Several are in view at once with the next one cut by the edge, so it
reads as a gallery you can pull through rather than a fixed collage.
Drag with a pointer, swipe on touch, arrow keys, arrows or dots.
Contents come from PLANTNURA_ACADEMY_PHOTOS, so updating it weekly is
one line of data and a file.
===================================================================== */
.gal{position:relative;margin-top:var(--space-10);}
.gal-track{
display:grid;grid-auto-flow:column;
grid-auto-columns:clamp(280px, 34%, 460px);
gap:var(--space-5);
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding-block:var(--space-2);
/* The gutters let the first and last photo sit against the container
edge while still snapping to the same line as the rest. */
padding-inline:1px;
cursor:grab;}
.gal-track::-webkit-scrollbar{display:none;}
.gal-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.gal-track.is-dragging img{pointer-events:none;}
.gal-track:focus-visible{outline:3px solid var(--color-primary);outline-offset:6px;border-radius:var(--radius-xl);}
@media (prefers-reduced-motion:reduce){ .gal-track{scroll-behavior:auto;} }
.gshot{scroll-snap-align:center;margin:0;position:relative;
border-radius:var(--radius-xl);overflow:hidden;background:#050B1A;
box-shadow:0 14px 36px color-mix(in srgb, var(--color-text) 12%, transparent);
transition:box-shadow var(--transition),transform var(--transition);}
.gshot img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
transition:transform .9s cubic-bezier(.16,1,.3,1);
-webkit-user-drag:none;user-select:none;}
.gshot:hover{transform:translateY(-3px);
box-shadow:0 22px 50px color-mix(in srgb, var(--color-primary) 18%, transparent);}
.gshot:hover img{transform:scale(1.04);}
/* Caption sits on the photo, on a gradient that keeps it legible whatever
is underneath. */
.gshot figcaption{position:absolute;inset:auto 0 0 0;
padding:var(--space-8) var(--space-5) var(--space-4);
font-size:var(--text-sm);font-weight:600;line-height:1.4;color:#fff;
background:linear-gradient(to top, rgba(4,8,20,.88) 0%, rgba(4,8,20,.55) 55%, transparent 100%);}
.gal-nav{position:absolute;top:calc(50% - var(--space-8));transform:translateY(-50%);z-index:3;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--color-surface);border:1px solid var(--color-divider);
color:var(--color-text);box-shadow:0 8px 24px color-mix(in srgb, var(--color-text) 18%, transparent);
transition:all var(--transition);}
.gal-nav.prev{left:calc(-1 * var(--space-5));}
.gal-nav.next{right:calc(-1 * var(--space-5));}
.gal-nav:hover:not(:disabled){background:var(--color-primary);color:#fff;border-color:transparent;transform:translateY(-50%) scale(1.06);}
.gal-nav:disabled{opacity:0;pointer-events:none;}
.gal-nav [data-lucide]{width:1.25rem;height:1.25rem;}
@media (max-width:1180px){ .gal-nav.prev{left:var(--space-3);} .gal-nav.next{right:var(--space-3);} }
@media (max-width:760px){ .gal-nav{display:none;} }
.gal-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
flex-wrap:wrap;margin-top:var(--space-5);}
.gal-cap{display:flex;align-items:center;gap:.5rem;margin:0;
font-size:var(--text-sm);color:var(--color-text-muted);}
.gal-cap [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);flex:none;}
.gal-dots{display:flex;gap:.45rem;margin-left:auto;}
.gal-dots button{width:8px;height:8px;border-radius:50%;padding:0;
background:color-mix(in srgb, var(--color-text) 20%, transparent);
transition:all var(--transition);}
.gal-dots button:hover{background:color-mix(in srgb, var(--color-primary) 55%, transparent);}
.gal-dots button.is-on{width:24px;border-radius:var(--radius-full);
background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));}
@media (max-width:760px){
.gal-track{grid-auto-columns:86%;}
.gal-foot{justify-content:center;}
.gal-dots{margin-left:0;}
}
/* =====================================================================
BIOMETRIK CONSULTING
Built on the Education pieces (edu-hero, edu-snapshot, sec-head, card-grid,
accordion, cta-band) so the consultancy pages read as the same product.
What is new here: the three premise pillars, the orbital workflow, the
audience selector, the deliverable strip and the security split.
===================================================================== */
/* ---- premise pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
gap:var(--space-6);margin-top:var(--space-10);}
.pil{position:relative;padding:var(--space-8) var(--space-6) var(--space-6);
border-radius:var(--radius-2xl);background:var(--color-surface);
border:1px solid var(--color-divider);overflow:hidden;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
/* A gradient hairline along the top edge, drawn rather than bordered so it
can carry the full brand ramp. */
.pil::before{content:"";position:absolute;inset:0 0 auto;height:3px;
background:linear-gradient(90deg,var(--color-primary),var(--color-indigo),var(--color-accent-bright));
opacity:.85;}
.pil:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--color-primary) 28%, transparent);
box-shadow:0 22px 48px color-mix(in srgb, var(--color-primary) 14%, transparent);}
.pil-n{display:block;font-family:var(--font-display);font-weight:800;
font-size:var(--text-sm);letter-spacing:.12em;
color:color-mix(in srgb, var(--color-primary) 55%, var(--color-text-faint));
margin-bottom:var(--space-4);}
.pil h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
font-size:var(--text-xl);line-height:1.14;margin:0 0 var(--space-3);}
.pil p{color:var(--color-text-muted);margin:0;}
/* =====================================================================
THE ORBITAL WORKFLOW
Six stages on a ring with a hub in the middle that carries the active one.
The plain underneath is the real content: it is always in the DOM and
the ring only takes over once the script adds .is-live, so with no JS, a
narrow screen or reduced motion the reader still gets six numbered steps.
Node placement is one trig call in JS writing --x/--y per node; everything
else is CSS.
===================================================================== */
.orbit{margin-top:var(--space-10);}
.orbit-ring{display:none;}
.orbit.is-live .orbit-ring{display:block;position:relative;
width:min(600px, calc(100% - 320px));aspect-ratio:1;margin:0 auto;}
.orbit.is-live .orbit-list{display:none;}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.orb-track{fill:none;stroke:var(--color-divider);stroke-width:1.5;}
.orb-prog{fill:none;stroke:url(#orbGrad);stroke-width:3;stroke-linecap:round;
stroke-dasharray:100;stroke-dashoffset:100;
transform:rotate(-90deg);transform-origin:200px 200px;
transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);}
/* Each node sits at --x/--y from the centre, then is pulled back by half its
own size. Percentages are of the ring box, so it all scales together. */
.orb-node{position:absolute;left:var(--l);top:var(--t);
transform:translate(-50%,-50%);
width:clamp(52px,8.6%,68px);aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;cursor:pointer;
background:var(--color-surface);border:1px solid var(--color-divider);
color:var(--color-text-muted);
box-shadow:0 6px 18px color-mix(in srgb, var(--color-text) 8%, transparent);
transition:all var(--transition);z-index:2;}
.orb-node [data-lucide]{width:1.35rem;height:1.35rem;}
.orb-node:hover{border-color:color-mix(in srgb, var(--color-primary) 45%, transparent);
color:var(--color-primary);transform:translate(-50%,-50%) scale(1.07);}
.orb-node.is-done{color:var(--color-primary);
border-color:color-mix(in srgb, var(--color-primary) 32%, transparent);
background:color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));}
.orb-node.is-on{color:#fff;border-color:transparent;
background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));
box-shadow:0 10px 30px color-mix(in srgb, var(--color-primary) 42%, transparent);
transform:translate(-50%,-50%) scale(1.14);}
[data-theme="dark"] .orb-node.is-on{color:var(--color-text-inverse);}
.orb-node:focus-visible{outline:3px solid var(--color-primary);outline-offset:4px;}
/* ---- radial labels ----
Each label sits on the far side of its node from the centre, so it always
reads outside the ring. A numbered kicker over a display-weight title, with
a short tick back to the node. Labels stagger in with the ring and the
active one lifts and takes the brand colour. */
.orb-lab{position:absolute;display:flex;flex-direction:column;gap:.15rem;
white-space:nowrap;pointer-events:none;
opacity:0;animation:orbLabIn .6s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay:calc(.35s + var(--i,0) * .09s);}
@keyframes orbLabIn{to{opacity:1;}}
.orb-lab i{font-style:normal;font-family:var(--font-display);font-weight:800;
font-size:.62rem;letter-spacing:.16em;line-height:1;
color:var(--color-text-faint);transition:color var(--transition);}
.orb-lab b{font-family:var(--font-display);font-weight:800;
font-size:var(--text-sm);letter-spacing:-.01em;line-height:1.1;
color:var(--color-text);
transition:color var(--transition),transform var(--transition);}
/* the tick between node and label */
.orb-lab::before{content:"";position:absolute;background:var(--color-divider);
transition:background var(--transition);}
/* right-hand nodes: label to the right, left-aligned */
.lab-right .orb-lab{left:calc(100% + 22px);top:50%;transform:translateY(-50%);align-items:flex-start;text-align:left;}
.lab-right .orb-lab::before{left:-16px;top:50%;width:10px;height:1.5px;transform:translateY(-50%);}
/* left-hand nodes: label to the left, right-aligned */
.lab-left .orb-lab{right:calc(100% + 22px);top:50%;transform:translateY(-50%);align-items:flex-end;text-align:right;}
.lab-left .orb-lab::before{right:-16px;top:50%;width:10px;height:1.5px;transform:translateY(-50%);}
/* top node: label above, centred */
.lab-top .orb-lab{bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);align-items:center;text-align:center;}
.lab-top .orb-lab::before{left:50%;bottom:-12px;width:1.5px;height:8px;transform:translateX(-50%);}
/* bottom node: label below, centred */
.lab-bottom .orb-lab{top:calc(100% + 18px);left:50%;transform:translateX(-50%);align-items:center;text-align:center;}
.lab-bottom .orb-lab::before{left:50%;top:-12px;width:1.5px;height:8px;transform:translateX(-50%);}
/* states */
.orb-node.is-done .orb-lab i{color:var(--color-primary);}
.orb-node.is-on .orb-lab i{color:var(--color-primary);}
.orb-node.is-on .orb-lab b{color:var(--color-primary);
background:linear-gradient(90deg,var(--color-primary),var(--color-indigo));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.orb-node.is-on .orb-lab::before{background:var(--color-primary);}
.lab-right.is-on .orb-lab b,.lab-left.is-on .orb-lab b{transform:translateX(0);}
/* The scaled active node would scale its label too, so the label undoes it. */
.orb-node.is-on .orb-lab{transform:translateY(-50%) scale(.877);}
.lab-top.is-on .orb-lab,.lab-bottom.is-on .orb-lab{transform:translateX(-50%) scale(.877);}
/* A soft pulse ring on the active node. */
.orb-node.is-on::after{content:"";position:absolute;inset:-6px;border-radius:50%;
border:2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
animation:orbPulse 2.2s ease-out infinite;pointer-events:none;}
@keyframes orbPulse{0%{transform:scale(.9);opacity:.9;}100%{transform:scale(1.55);opacity:0;}}
/* hub content eases in on every change */
.orbit-hub.is-swap .hub-step,.orbit-hub.is-swap .hub-title,.orbit-hub.is-swap .hub-body{
animation:hubIn .45s cubic-bezier(.2,.7,.2,1) both;}
.orbit-hub.is-swap .hub-title{animation-delay:.05s;}
.orbit-hub.is-swap .hub-body{animation-delay:.1s;}
@keyframes hubIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
.orb-lab{animation:none;opacity:1;}
.orb-node.is-on::after{animation:none;}
.orbit-hub.is-swap .hub-step,.orbit-hub.is-swap .hub-title,.orbit-hub.is-swap .hub-body{animation:none;}
}
.orbit-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:54%;aspect-ratio:1;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:clamp(var(--space-5),4%,var(--space-8));
background:var(--color-surface);border:1px solid var(--color-divider);
box-shadow:0 20px 50px color-mix(in srgb, var(--color-text) 10%, transparent);}
.orbit-hub::before{content:"";position:absolute;inset:-1px;border-radius:50%;
padding:1px;pointer-events:none;
background:linear-gradient(140deg,color-mix(in srgb, var(--color-primary) 55%, transparent),transparent 60%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;}
.hub-step{font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);
letter-spacing:.14em;color:var(--color-primary);margin-bottom:.55rem;}
.hub-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
font-size:clamp(1.15rem,.85rem + .9vw,1.6rem);line-height:1.1;margin:0 0 .6rem;}
.hub-body{font-size:var(--text-sm);line-height:1.48;color:var(--color-text-muted);margin:0;
max-width:32ch;}
/* the fallback list, and the only thing shown below 900px */
.orbit-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);
counter-reset:ol;}
.ol-item{display:flex;gap:var(--space-5);align-items:flex-start;
padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);}
.ol-n{flex:none;font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);
line-height:1;color:var(--color-primary);
min-width:2.4rem;padding-top:.15rem;}
.ol-item h4{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);
margin:0 0 .35rem;}
.ol-item p{color:var(--color-text-muted);font-size:var(--text-sm);margin:0;}
@media (max-width:900px){
.orbit.is-live .orbit-ring{display:none;}
.orbit.is-live .orbit-list{display:grid;}
}
@media (prefers-reduced-motion:reduce){
.orbit.is-live .orbit-ring{display:none;}
.orbit.is-live .orbit-list{display:grid;}
.orb-prog{transition:none;}
}
/* =====================================================================
WHO WE HELP - a selector, not four flat cards. Same interaction grammar
as the length selector on the Internship Academy tracks.
===================================================================== */
.aud{margin-top:var(--space-10);display:grid;grid-template-columns:.9fr 2.1fr;
gap:clamp(var(--space-6),3vw,var(--space-10));align-items:start;}
.aud-tabs{display:grid;gap:.6rem;}
.aud-tab{display:flex;gap:.85rem;align-items:flex-start;text-align:left;
padding:var(--space-5);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);
color:var(--color-text);cursor:pointer;transition:all var(--transition);}
.aud-tab > [data-lucide]{width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem;
color:var(--color-primary);transition:color var(--transition);}
.aud-tab b{display:block;font-family:var(--font-display);font-weight:800;
font-size:var(--text-base);line-height:1.15;}
.aud-tab i{display:block;font-style:normal;font-size:var(--text-xs);
color:var(--color-text-muted);margin-top:.2rem;transition:color var(--transition);}
.aud-tab:hover{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);
transform:translateX(3px);}
.aud-tab.is-on{background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));
border-color:transparent;color:#fff;
box-shadow:0 12px 30px color-mix(in srgb, var(--color-primary) 32%, transparent);}
.aud-tab.is-on > [data-lucide]{color:#fff;}
.aud-tab.is-on i{color:rgba(255,255,255,.82);}
[data-theme="dark"] .aud-tab.is-on{color:var(--color-text-inverse);}
[data-theme="dark"] .aud-tab.is-on > [data-lucide]{color:var(--color-text-inverse);}
[data-theme="dark"] .aud-tab.is-on i{color:color-mix(in srgb, var(--color-text-inverse) 78%, transparent);}
.aud-panel{padding:clamp(var(--space-6),2.4vw,var(--space-10));
border-radius:var(--radius-2xl);
background:color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
border:1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
opacity:0;transform:translateY(6px);}
.aud-panel.is-in{animation:audIn .38s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes audIn{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
.aud-panel{opacity:1;transform:none;}
.aud-panel.is-in{animation:none;}
}
.aud-lede{font-family:var(--font-display);font-weight:500;
font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);line-height:1.35;
color:var(--color-text);margin:0 0 var(--space-8);max-width:52ch;}
/* optional one-line "why it stands out" callout (e.g. DataViz Pro "Beyond a prompt") */
.aud-edge{position:relative;margin:calc(-1 * var(--space-4)) 0 var(--space-8);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);
font-size:var(--text-sm);line-height:1.5;color:var(--color-text);max-width:62ch;
background:linear-gradient(100deg,color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),color-mix(in srgb, var(--color-teal) 8%, var(--color-surface)));
border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);}
.aud-edge::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
background:linear-gradient(180deg,var(--color-primary),var(--color-teal));}
.aud-edge span{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem;font-family:var(--font-display);font-weight:800;font-size:.68rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);}
.aud-edge span [data-lucide]{width:.9rem;height:.9rem;}
.aud-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
gap:var(--space-8);margin-bottom:var(--space-8);}
.aud-cols h4{display:flex;align-items:center;gap:.5rem;
font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);
letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-muted);
margin:0 0 var(--space-4);padding-bottom:var(--space-3);
border-bottom:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);}
.aud-cols h4 [data-lucide]{width:.95rem;height:.95rem;flex:none;color:var(--color-primary);}
.aud-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.aud-cols li{position:relative;padding-left:1.1rem;font-size:var(--text-sm);line-height:1.45;
color:var(--color-text-muted);}
.aud-cols li::before{content:"";position:absolute;left:0;top:.55em;
width:.32rem;height:.32rem;border-radius:50%;background:var(--color-primary);}
@media (max-width:900px){
.aud{grid-template-columns:1fr;}
.aud-tabs{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}
.aud-tab:hover{transform:none;}
}
/* A centred section head, for a section whose content is itself centred -
the orbit would otherwise sit under a left-aligned heading and read lopsided. */
.sec-head-mid{text-align:center;margin-left:auto;margin-right:auto;}
.sec-head-mid .eyebrow{justify-content:center;}
.sec-head-mid p{margin-left:auto;margin-right:auto;}
/* ---- deliverable formats ---- */
.fmt{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--space-5);}
.fmt-item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
column-gap:.85rem;row-gap:.2rem;align-items:center;
padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);
transition:all var(--transition);}
.fmt-item:hover{border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);
transform:translateY(-2px);}
.fmt-item [data-lucide]{grid-row:1 / span 2;width:1.4rem;height:1.4rem;color:var(--color-primary);}
.fmt-item b{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);line-height:1.15;}
.fmt-item span{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4;}
/* ---- data security split ---- */
.sec-split{display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(var(--space-8),4vw,var(--space-16));align-items:start;}
.sec-split h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
font-size:clamp(1.7rem,1.2rem + 1.6vw,2.6rem);line-height:1.08;
margin:var(--space-4) 0 var(--space-5);}
.sec-split p{color:var(--color-text-muted);max-width:56ch;}
.sec-promise{display:flex;gap:.85rem;align-items:flex-start;margin-top:var(--space-6);
padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);
background:color-mix(in srgb, var(--color-success) 8%, transparent);
border:1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
color:var(--color-text);font-size:var(--text-sm);line-height:1.5;max-width:none;}
.sec-promise [data-lucide]{width:1.25rem;height:1.25rem;flex:none;margin-top:.1rem;
color:var(--color-success);}
.sec-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);}
.sec-list li{display:flex;gap:.95rem;align-items:flex-start;
padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);}
.sec-list [data-lucide]{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;color:var(--color-primary);}
.sec-list b{display:block;font-family:var(--font-display);font-weight:800;
font-size:var(--text-base);line-height:1.15;margin-bottom:.2rem;}
.sec-list span{display:block;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.45;}
@media (max-width:900px){ .sec-split{grid-template-columns:1fr;} }
/* =====================================================================
BIOMETRIK - hero video, service cards, platform cards.
===================================================================== */
/* ---- the film panel ----
A cover with one obvious play control, not an autoplaying loop. The poster
does all the work until someone chooses to watch, so a slow connection
pays for an image and nothing more. */
.hvid{display:flex;flex-direction:column;gap:var(--space-5);}
.hv-frame{position:relative;margin:0;border-radius:var(--radius-2xl);overflow:hidden;
aspect-ratio:16/9;background:#0B0726;
border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
box-shadow:0 30px 70px color-mix(in srgb, var(--color-text) 18%, transparent);}
.hv-media{width:100%;height:100%;object-fit:cover;display:block;background:#0B0726;}
/* The play cover: the whole frame is the button. */
.hv-play{position:absolute;inset:0;z-index:2;cursor:pointer;
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
gap:var(--space-5);padding:var(--space-8);text-align:left;
background:linear-gradient(0deg,rgba(6,4,20,.78) 0%,rgba(6,4,20,.25) 48%,transparent 100%);
border:0;transition:background var(--transition);}
.hv-play:hover{background:linear-gradient(0deg,rgba(6,4,20,.84) 0%,rgba(6,4,20,.34) 52%,rgba(6,4,20,.08) 100%);}
.hv-play:focus-visible{outline:3px solid var(--color-accent-bright);outline-offset:-4px;}
.hv-play-ico{width:62px;height:62px;border-radius:50%;flex:none;
display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));
box-shadow:0 12px 34px color-mix(in srgb, var(--color-primary) 55%, transparent);
transition:transform var(--transition);}
.hv-play:hover .hv-play-ico{transform:scale(1.07);}
.hv-play-ico [data-lucide]{width:1.5rem;height:1.5rem;margin-left:3px;}
.hv-play-txt b{display:block;font-family:var(--font-display);font-weight:800;
font-size:var(--text-lg);line-height:1.15;color:#fff;}
.hv-play-txt i{display:block;font-style:normal;font-size:var(--text-xs);
letter-spacing:.06em;text-transform:uppercase;font-weight:700;
color:var(--color-accent-bright);margin-top:.3rem;}
@media (max-width:560px){
.hv-play{padding:var(--space-5);gap:var(--space-4);}
.hv-play-ico{width:52px;height:52px;}
}
.hv-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin:0;
padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);}
.hv-facts > div{min-width:0;}
.hv-facts dt{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:.2rem;}
.hv-facts dd{margin:0;font-family:var(--font-display);font-weight:800;
font-size:var(--text-sm);line-height:1.2;}
@media (max-width:1080px){ .hv-facts{grid-template-columns:1fr;gap:.6rem;} }
/* ---- service cards ---- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
gap:var(--space-6);margin-top:var(--space-10);}
.svc{display:flex;flex-direction:column;overflow:hidden;
border-radius:var(--radius-2xl);background:var(--color-surface);
border:1px solid var(--color-divider);
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.svc:hover{transform:translateY(-4px);
border-color:color-mix(in srgb, var(--color-primary) 28%, transparent);
box-shadow:0 26px 56px color-mix(in srgb, var(--color-primary) 16%, transparent);}
.svc-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#140B35;}
.svc-art img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.4,0,.2,1);}
.svc:hover .svc-art img{transform:scale(1.05);}
.svc-art::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(0deg,rgba(10,6,30,.55) 0%,transparent 52%);}
.svc-body{padding:var(--space-6);display:flex;flex-direction:column;flex:1;}
.svc-kick{font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);
letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);
margin-bottom:var(--space-3);}
.svc-body h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
font-size:var(--text-xl);line-height:1.12;margin:0 0 var(--space-3);}
.svc-body > p{color:var(--color-text-muted);font-size:var(--text-sm);margin:0 0 var(--space-5);}
.svc-chips{list-style:none;margin:auto 0 0;padding:var(--space-5) 0 0;
border-top:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
display:flex;flex-wrap:wrap;gap:.35rem;}
.svc-chips li{font-size:var(--text-xs);font-weight:600;line-height:1.1;
padding:.3rem .58rem;border-radius:var(--radius-full);
color:var(--color-text-muted);
background:color-mix(in srgb, var(--color-primary) 6%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);}
/* ---- our own platforms ---- */
/* Three statements between the heading and the platform cards: what makes
the stack different, in one line each. */
.plat-claims{list-style:none;margin:var(--space-8) auto 0;padding:0;max-width:1080px;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.plat-claims li{display:flex;gap:.85rem;align-items:flex-start;
padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);
font-size:var(--text-sm);line-height:1.5;color:var(--color-text-muted);text-align:left;}
.plat-claims li [data-lucide]{width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem;color:var(--color-primary);}
.plat-claims b{color:var(--color-text);font-weight:700;}
.plat-claims + .plat{margin-top:var(--space-8);}
@media (max-width:900px){ .plat-claims{grid-template-columns:1fr;} }
.plat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
gap:var(--space-8);margin-top:var(--space-10);}
.plat-card{display:flex;flex-direction:column;overflow:hidden;
border-radius:var(--radius-2xl);background:var(--color-surface);
border:1px solid var(--color-divider);
box-shadow:0 20px 50px color-mix(in srgb, var(--color-text) 9%, transparent);}
/* The product shot is framed as a screen, with a title bar, so a light
product image reads as a screenshot rather than as a palette clash. */
.plat-shot{position:relative;padding:var(--space-6) var(--space-6) 0;
background:linear-gradient(160deg,#1B1046 0%,#3A1C96 52%,#07535B 100%);}
.plat-shot::before{content:"";position:absolute;left:var(--space-6);top:calc(var(--space-6) - 16px);
width:44px;height:8px;border-radius:99px;
background:radial-gradient(circle at 5px 4px,rgba(255,255,255,.55) 3px,transparent 3px),
radial-gradient(circle at 22px 4px,rgba(255,255,255,.35) 3px,transparent 3px),
radial-gradient(circle at 39px 4px,rgba(255,255,255,.22) 3px,transparent 3px);}
.plat-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
object-position:top center;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
border:1px solid rgba(255,255,255,.18);border-bottom:0;
box-shadow:0 -12px 40px rgba(0,0,0,.35);}
/* The shot runs off the bottom of the frame on purpose - the screen carries
on past the card. A short fade stops that being read as a crop bug. */
.plat-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
pointer-events:none;
background:linear-gradient(0deg,var(--color-surface) 12%,transparent 100%);}
.plat-body{padding:var(--space-8) var(--space-6) var(--space-6);display:flex;flex-direction:column;flex:1;}
/* ---- the registered marks on a platform card ----
Both marks are stacked lockups: icon over wordmark over tagline. At the
26px they were rendered at, the tagline was a smear and the whole thing
read as a sticker. They now get a real size, and a light plate because
the black wordmark in each disappears on a dark surface. The plate is
sized to the mark with even optical padding rather than being a generic
chip, and the two are matched on the height of their wordmark rather than
on overall image height, which differs between them. */
.plat-logo{align-self:flex-start;margin-bottom:var(--space-6);
display:inline-grid;place-items:center;border-radius:var(--radius-xl);}
.plat-logo img{display:block;height:var(--logo-h,98px);width:auto;}
/* KropAnalytiX is a taller lockup than DataViz Pro, so matching raw image
height makes its wordmark look smaller. Nudged so the two read as equals. */
#platform .plat-card:first-child .plat-logo img{--logo-h:106px;}
/* The card is already light, so in light mode the mark sits straight on it -
a white plate on a white card is just a seam. The plate exists only where
it is needed: in dark mode, where the black wordmark in each of these
marks would otherwise disappear. The artwork itself is never altered. */
[data-theme="dark"] .plat-logo{background:#f7f7fa;
padding:var(--space-5) var(--space-6);
border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 26px rgba(0,0,0,.45);}
/* Fallback if a mark ever fails to load - the name, never nothing. */
.plat-name{align-self:flex-start;margin-bottom:var(--space-5);
font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);}
.plat-body h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
font-size:var(--text-xl);line-height:1.12;margin:0 0 var(--space-3);}
.plat-body > p{color:var(--color-text-muted);margin:0 0 var(--space-5);}
.plat-pts{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;gap:.6rem;}
.plat-pts li{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--text-sm);line-height:1.45;}
.plat-pts [data-lucide]{width:1rem;height:1rem;flex:none;margin-top:.22rem;color:var(--color-primary);}
.plat-body .link-arrow{margin-top:auto;align-self:flex-start;}
@media (max-width:560px){
.plat-shot{padding:var(--space-5) var(--space-5) 0;}
.plat-shot::before{left:var(--space-5);top:calc(var(--space-5) - 14px);}
}
/* =====================================================================
BIOMETRIK - report gallery (#receive).
Sixteen real report pages in sets of four. A set arrives from below with
a stagger, holds and breathes, sweeps out upward, and the next set
arrives. The sheets are documents, so they stay white in both themes;
the stage behind them themes.
===================================================================== */
.rgal{margin-top:var(--space-10);}
.rg-stage{position:relative;isolation:isolate;perspective:1800px;
padding:clamp(var(--space-6),3vw,var(--space-10)) clamp(var(--space-5),3vw,var(--space-12));}
.rg-stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-2xl);
background:
radial-gradient(60% 70% at 18% 20%, color-mix(in srgb, var(--color-brand-violet) 24%, transparent), transparent 72%),
radial-gradient(55% 65% at 84% 84%, color-mix(in srgb, var(--color-gold) 22%, transparent), transparent 72%),
var(--color-surface-alt);
border:1px solid var(--color-divider);}
[data-theme="dark"] .rg-stage::before{
background:
radial-gradient(60% 70% at 18% 20%, color-mix(in srgb, var(--color-brand-violet) 36%, transparent), transparent 72%),
radial-gradient(55% 65% at 84% 84%, color-mix(in srgb, var(--color-gold) 24%, transparent), transparent 72%),
var(--color-surface-alt);}
.rg-stage::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius-2xl);
background-image:radial-gradient(color-mix(in srgb, var(--color-text) 14%, transparent) 1px, transparent 1.2px);
background-size:18px 18px;opacity:.45;
mask-image:radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
-webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);}
/* All sets share one footprint: the first stays in flow to give the stage its
height, the rest lie over it. Only the set that is .is-on (or sweeping .is-out)
is visible. */
.rg-set{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(var(--space-4),2.4vw,var(--space-8));
transform-style:preserve-3d;visibility:hidden;pointer-events:none;}
.rg-set:first-child{position:relative;}
.rg-set:not(:first-child){position:absolute;inset:clamp(var(--space-6),3vw,var(--space-10)) clamp(var(--space-5),3vw,var(--space-12));}
.rg-set.is-on,.rg-set.is-out{visibility:visible;}
.rg-set.is-on{pointer-events:auto;}
.rg-sheet{position:relative;margin:0;aspect-ratio:612 / 700;border-radius:8px;overflow:hidden;background:#fff;
border:1px solid rgba(15,17,21,.12);
box-shadow:0 24px 50px -18px rgba(18,12,60,.35), 0 6px 16px -6px rgba(18,12,60,.18);
opacity:0;will-change:transform,opacity;}
.rg-sheet img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;
transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.rg-sheet:hover img{transform:scale(1.045);}
[data-theme="dark"] .rg-sheet{border-color:rgba(255,255,255,.14);
box-shadow:0 28px 56px -18px rgba(0,0,0,.7), 0 6px 16px -6px rgba(0,0,0,.5);}
/* Arrive: rise from below with a tilt, one after another. Hold: a slow breath,
each sheet on its own phase. Leave: lift away upward. */
.rg-set.is-on .rg-sheet{
animation:
rgIn .95s cubic-bezier(.16,.8,.24,1) calc(var(--k,0) * .12s) both,
rgBreathe 5.2s ease-in-out calc(.95s + var(--k,0) * .12s + var(--k,0) * -1.3s) infinite alternate;}
.rg-set.is-out .rg-sheet{opacity:1;animation:rgOut .6s cubic-bezier(.4,0,.8,.4) calc(var(--k,0) * .07s) both;}
.rgal.is-back .rg-set.is-on .rg-sheet{animation-name:rgInBack, rgBreathe;}
.rgal.is-back .rg-set.is-out .rg-sheet{animation-name:rgOutBack;}
@keyframes rgIn{
from{opacity:0;transform:translate3d(0,72px,-140px) rotateX(14deg);}
60%{opacity:1;}
to{opacity:1;transform:translate3d(0,0,0) rotateX(0);}}
@keyframes rgOut{
from{opacity:1;transform:translate3d(0,0,0) rotateX(0);}
to{opacity:0;transform:translate3d(0,-56px,90px) rotateX(-10deg);}}
@keyframes rgInBack{
from{opacity:0;transform:translate3d(0,-72px,-140px) rotateX(-14deg);}
60%{opacity:1;}
to{opacity:1;transform:translate3d(0,0,0) rotateX(0);}}
@keyframes rgOutBack{
from{opacity:1;transform:translate3d(0,0,0) rotateX(0);}
to{opacity:0;transform:translate3d(0,56px,90px) rotateX(10deg);}}
@keyframes rgBreathe{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-9px,0);}}
.rgal.is-still .rg-set.is-on .rg-sheet{animation-play-state:running,paused;}
/* ---- controls: arrows either side of four progress dots ---- */
.rg-ctl{display:flex;align-items:center;justify-content:center;gap:var(--space-5);margin-top:var(--space-6);}
.rg-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:var(--color-surface);border:1px solid var(--color-divider);color:var(--color-text);
transition:all var(--transition);}
.rg-btn [data-lucide]{width:1.1rem;height:1.1rem;}
.rg-btn:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.rg-dots{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;}
.rg-dots button{position:relative;display:block;width:34px;height:14px;padding:0;border:0;background:transparent;cursor:pointer;}
.rg-dots button::before{content:"";position:absolute;left:0;right:0;top:5px;height:4px;border-radius:2px;
background:color-mix(in srgb, var(--color-text) 16%, transparent);transition:background var(--transition);}
.rg-dots button:hover::before{background:color-mix(in srgb, var(--color-text) 30%, transparent);}
.rg-dots button i{position:absolute;left:0;top:5px;height:4px;width:100%;border-radius:2px;transform-origin:0 50%;transform:scaleX(0);
background:linear-gradient(90deg,var(--color-primary),var(--color-gold));}
.rg-dots button[aria-current="true"] i{animation:rgProg var(--rg-dur,6.2s) linear forwards;}
.rgal.is-still .rg-dots button i{animation-play-state:paused;}
@keyframes rgProg{to{transform:scaleX(1);}}
/* Compact variant of the formats grid under the gallery. */
.fmt-compact{margin-top:var(--space-10);grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.fmt-compact .fmt-item{padding:var(--space-4) var(--space-5);}
.fmt-compact.fmt-three{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){
.rg-set{grid-template-columns:repeat(2,minmax(0,1fr));}
.fmt-compact,.fmt-compact.fmt-three{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
.rg-stage{padding:var(--space-5) var(--space-4);}
.rg-set:not(:first-child){inset:var(--space-5) var(--space-4);}
.fmt-compact,.fmt-compact.fmt-three{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
.rg-set.is-on .rg-sheet,.rgal.is-back .rg-set.is-on .rg-sheet{animation:rgFade .3s ease both;}
.rg-set.is-out .rg-sheet{animation:none;opacity:0;}
.rg-sheet img,.rg-btn{transition:none;}
@keyframes rgFade{from{opacity:0;}to{opacity:1;}}
}
/* =====================================================================
BREEDFORWARD - gain projection, the five E's, the five-stage pipeline.
The orbit, the selector, the service cards, pillars, formats, split and
FAQ are the shared consultancy components above.
===================================================================== */
/* ---- the hero projection: a drawn chart that animates when seen ---- */
.bf-sim{position:relative;margin:0;border-radius:var(--radius-2xl);overflow:hidden;
background:linear-gradient(160deg,#120A33 0%,#1B1046 55%,#062F38 100%);
border:1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
box-shadow:0 30px 70px color-mix(in srgb, var(--color-text) 18%, transparent);
color:#fff;}
.bf-sim-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
padding:var(--space-5) var(--space-6) 0;font-size:var(--text-xs);white-space:nowrap;}
.bf-sim-kick{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-accent-bright);}
.bf-sim-kick [data-lucide]{width:1rem;height:1rem;}
.bf-sim-cycle{color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;}
.bf-sim-cycle b{color:#fff;font-weight:800;}
.bf-stage{position:relative;aspect-ratio:640/380;}
.bf-sim-svg{display:block;width:100%;height:auto;aspect-ratio:640/380;}
.bf-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;
transition:opacity .45s ease, visibility 0s linear .45s;}
.bf-scene.is-on{opacity:1;visibility:visible;transition-delay:0s;}
/* shared text styles inside the scenes */
.bf-t{font-family:var(--font-body);font-size:13px;font-weight:600;fill:#fff;}
.bf-t-dim{fill:rgba(255,255,255,.62);font-weight:500;}
.bf-acc{fill:var(--color-accent-bright);}
.bf-big{font-family:var(--font-display);font-size:44px;font-weight:800;letter-spacing:-.03em;fill:#fff;}
.bf-step{opacity:0;}
.bf-big-xl{font-size:56px;}
.bf-t-md{font-size:15px;}
.bf-num{font-family:var(--font-display);font-weight:800;font-size:19px;fill:#fff;}
/* crosses */
.cx-cell{fill:rgba(255,255,255,.16);opacity:0;transition:fill .5s;}
/* genomic selection: the recurrent loop and the gain steps */
.gl-node{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.2);stroke-width:1;transition:fill .3s,stroke .3s;}
.gl-txt{font-family:var(--font-body);font-size:11.5px;font-weight:700;fill:rgba(255,255,255,.75);}
g.is-on .gl-node{fill:var(--color-brand-violet);stroke:transparent;filter:drop-shadow(0 0 8px var(--color-brand-violet));}
g.is-on .gl-txt{fill:#fff;}
.gl-arrow{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.5;}
.gl-return{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:4 4;transition:stroke .3s;}
.gl-return.is-on{stroke:var(--color-accent-bright);}
.gs-step{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;}
.gs-step-a{stroke:rgba(255,255,255,.5);} .gs-step-b{stroke:var(--color-accent-bright);filter:drop-shadow(0 0 5px var(--color-accent-bright));}
/* connecting locations */
.cl-cell{opacity:0;transition:fill .35s, opacity .35s;}
.cl-arc{fill:none;stroke-width:1.6;}
/* haplotypes */
.hp-seg{fill:rgba(255,255,255,.12);transition:fill .3s;}
.hp-seg.is-on{fill:var(--color-accent-bright);}
.hp-seg.is-alt{fill:var(--color-brand-violet);}
.hp-arrow{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.6;}
/* variance bars */
.vb-track{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.14);}
.vb-fill.vb-a{fill:rgba(255,255,255,.42);}
.vb-fill.vb-b{fill:url(#bfGrad);fill:var(--color-accent-bright);opacity:.85;}
/* genomic selection lanes */
.gs-grid{stroke:rgba(255,255,255,.08);stroke-width:1;}
.gs-block{opacity:.12;transition:opacity .3s;}
.gs-a{fill:rgba(255,255,255,.28);} .gs-b{fill:var(--color-brand-violet);}
.gs-txt{font-family:var(--font-body);font-size:11px;font-weight:600;fill:#fff;opacity:.18;transition:opacity .3s;}
.gs-star{fill:var(--color-accent-bright);filter:drop-shadow(0 0 6px var(--color-accent-bright));opacity:0;transition:opacity .3s;}
/* connected testing */
.mt-cell{fill:rgba(255,255,255,.22);opacity:0;transition:fill .4s;}
.mt-cell.is-keep{fill:var(--color-accent-bright);}
.mt-arc{fill:none;stroke:var(--color-accent-bright);stroke-width:1.6;opacity:0;transition:opacity .35s;}
/* tabs under the panel */
.bf-tabs{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 var(--space-6) var(--space-5);}
.bf-tabs button{padding:.32rem .7rem;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;
transition:all var(--transition);}
.bf-tabs button:hover{border-color:rgba(255,255,255,.4);color:#fff;}
.bf-tabs button[aria-selected="true"]{background:linear-gradient(135deg,var(--color-brand-violet),var(--color-indigo));border-color:transparent;color:#fff;}
.bf-tabs button:focus-visible{outline:2px solid var(--color-accent-bright);outline-offset:2px;}
.bf-grid line{stroke:rgba(255,255,255,.1);stroke-width:1;}
.bf-grid text,.bf-xlab,.bf-ylab{fill:rgba(255,255,255,.6);font-family:var(--font-body);font-size:13px;}
.bf-xlab{text-anchor:middle;} .bf-ylab{text-anchor:middle;}
.bf-axis{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.5;}
.bf-area{fill:url(#bfFill);}
.bf-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.bf-line-a{stroke:rgba(255,255,255,.55);stroke-dasharray:6 6;}
.bf-line-b{stroke:url(#bfGrad);stroke-width:3.5;}
.bf-line-x{stroke:var(--color-magenta-bright);stroke-width:2.5;opacity:.85;}
.bf-tag-x{fill:var(--color-magenta-bright);}
.vb-fill.vb-div{fill:var(--color-brand-violet);opacity:.8;}
.vb-fill.vb-gain{fill:var(--color-accent-bright);opacity:.9;}
.bf-dot{stroke:none;}
.bf-dot-a{fill:#fff;opacity:.8;}
.bf-dot-b{fill:var(--color-accent-bright);filter:drop-shadow(0 0 8px var(--color-accent-bright));}
.bf-cursor{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 4;}
.bf-tag{font-family:var(--font-body);font-size:13px;font-weight:700;text-anchor:end;opacity:0;transition:opacity .5s;}
.bf-tag-a{fill:rgba(255,255,255,.7);} .bf-tag-b{fill:var(--color-accent-bright);}
.bf-scene.is-done .bf-tag{opacity:1;}
.bf-scene.is-done .bf-cursor{opacity:0;}
.bf-tag-a,.bf-tag-b{opacity:0;}
.bf-sim-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
padding:0 var(--space-6) var(--space-4);min-height:4.6em;font-size:var(--text-xs);line-height:1.45;color:rgba(255,255,255,.62);}
.bf-sim-replay{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;transition:all var(--transition);}
.bf-sim-replay [data-lucide]{width:.9rem;height:.9rem;}
.bf-sim-replay:hover{background:rgba(255,255,255,.16);border-color:var(--color-accent-bright);color:var(--color-accent-bright);}
.bf-sim-replay:focus-visible{outline:2px solid var(--color-accent-bright);outline-offset:2px;}
/* ---- the five E's: an equation ----
E x E x E x E x E = gain that compounds. Five cards arrive in sequence with
the multiplication signs between them, then the result band draws its
curve. The E's grow from left to right, so the row itself rises. */
.e5-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(var(--space-6),3vw,var(--space-12));}
.e5-mark{display:inline-flex;align-items:flex-start;font-family:var(--font-display);font-weight:800;line-height:.8;letter-spacing:-.06em;
font-size:clamp(5rem,3rem + 7vw,9.5rem);padding:0 var(--space-2);user-select:none;
filter:drop-shadow(0 18px 40px color-mix(in srgb, var(--color-primary) 22%, transparent));}
.e5-mark span,.e5-mark sup{background:linear-gradient(135deg,var(--color-brand-violet) 0%,var(--color-indigo) 55%,var(--color-gold) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
/* background-clip:text paints only inside each element's box, and the tight
tracking pulls the glyph past it - so each glyph gets its own breathing room. */
.e5-mark span{padding:.04em .02em .04em .06em;}
.e5-mark sup{font-size:.42em;line-height:1;letter-spacing:0;margin-left:.04em;margin-top:-.06em;padding:.08em .22em .08em .04em;}
.eq{margin-top:var(--space-12);}
.eq-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:clamp(var(--space-8),3.2vw,var(--space-12));position:relative;}
/* the chain the operators sit on - visible only in the gaps between cards */
.eq-row::before{content:"";position:absolute;left:6%;right:6%;top:50%;height:2px;z-index:0;
background:linear-gradient(90deg,var(--color-brand-violet),var(--color-indigo),var(--color-gold));opacity:0;
transition:opacity .8s 1s;}
.eq.in .eq-row::before{opacity:.45;}
.eq-card{position:relative;z-index:1;display:grid;grid-template-rows:auto auto 1fr auto;gap:.45rem;
padding:var(--space-6) var(--space-5) var(--space-5);border-radius:var(--radius-2xl);
background:var(--color-surface);border:1px solid var(--color-divider);
box-shadow:var(--shadow-sm);opacity:0;transform:translateY(24px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
transition-delay:calc(var(--i,0) * .16s);}
.eq-card::before{content:"";position:absolute;left:var(--space-5);right:var(--space-5);top:0;height:3px;border-radius:0 0 3px 3px;
background:linear-gradient(90deg,var(--color-primary),var(--color-gold));
opacity:calc(.35 + var(--i,0) * .16);}
/* the multiplication sign between cards */
.eq-card:not(:last-child)::after{content:"\00d7";position:absolute;top:50%;
right:calc(-1 * clamp(var(--space-8),3.2vw,var(--space-12)) / 2 - 18px);
width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transform:translateY(-50%) scale(0);
font-family:var(--font-display);font-weight:800;font-size:1.35rem;line-height:1;
color:var(--color-primary);background:var(--color-surface);
border:2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);box-shadow:var(--shadow-md);
z-index:2;transition:transform .45s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s;
transition-delay:calc(var(--i,0) * .16s + .42s);}
.eq-e{font-family:var(--font-display);font-weight:800;line-height:.85;letter-spacing:-.05em;
font-size:calc(2.6rem + var(--i,0) * .45rem);
background:linear-gradient(135deg,var(--color-brand-violet),var(--color-indigo) 60%,var(--color-gold));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
transition:filter .35s;}
.eq-card h3{margin:.15rem 0 0;font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:-.02em;line-height:1.1;}
.eq-card p{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;}
.eq-card small{display:block;padding-top:.7rem;margin-top:.3rem;border-top:1px solid var(--color-divider);
font-size:var(--text-xs);font-weight:600;color:var(--color-text);line-height:1.45;}
.eq.in .eq-card{opacity:1;transform:translateY(0);}
.eq.in .eq-card:not(:last-child)::after{transform:translateY(-50%) scale(1);
animation:eqRing 4.6s ease-out infinite;animation-delay:calc(1.8s + var(--i,0) * .38s);}
@keyframes eqRing{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent), var(--shadow-md);}
28%{box-shadow:0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent), var(--shadow-md);}
100%{box-shadow:0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent), var(--shadow-md);}}
.eq.in .eq-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb, var(--color-primary) 34%, transparent);transition-delay:0s;}
.eq.in .eq-card:hover::after{transition-delay:0s;}
.eq-card:hover .eq-e{filter:drop-shadow(0 8px 18px color-mix(in srgb, var(--color-primary) 45%, transparent));}
.eq-card:hover::after{background:linear-gradient(135deg,var(--color-brand-violet),var(--color-indigo));color:#fff;border-color:transparent;}
/* the result band */
.eq-result{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,.9fr);align-items:center;
gap:clamp(var(--space-6),3vw,var(--space-12));margin-top:var(--space-8);
padding:var(--space-6) clamp(var(--space-6),3vw,var(--space-10));border-radius:var(--radius-2xl);
background:
radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--color-brand-violet) 16%, transparent), transparent 70%),
radial-gradient(50% 120% at 100% 50%, color-mix(in srgb, var(--color-gold) 14%, transparent), transparent 70%),
var(--color-surface-alt);
border:1px solid var(--color-divider);opacity:0;transform:translateY(18px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1) 1s, transform .7s cubic-bezier(.2,.7,.2,1) 1s;}
.eq.in .eq-result{opacity:1;transform:none;}
.eq-equals{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,2.4rem + 2.4vw,4.8rem);line-height:1;letter-spacing:-.05em;
background:linear-gradient(135deg,var(--color-brand-violet),var(--color-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.eq-result-txt h3{margin:0 0 .35rem;font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.025em;line-height:1.1;}
.eq-result-txt p{margin:0;color:var(--color-text-muted);font-size:var(--text-base);max-width:44ch;}
.eq-spark{display:block;width:100%;height:auto;overflow:visible;}
.eq-spark-base{fill:none;stroke:color-mix(in srgb, var(--color-text) 28%, transparent);stroke-width:1.5;stroke-dasharray:4 5;}
.eq-spark-fill{fill:url(#eqFill);}
.eq-spark-line{fill:none;stroke:url(#eqGrad);stroke-width:3;stroke-linecap:round;}
.eq-spark-dot{fill:var(--color-accent-bright);filter:drop-shadow(0 0 6px var(--color-accent-bright));}
.eq-spark-dot-a{fill:var(--color-text-muted);filter:none;opacity:0;}
.eq-spark-lab[data-eq-lab-a],.eq-spark-lab[data-eq-lab-b]{opacity:0;transition:opacity .4s;}
.eq-spark-lab{font-family:var(--font-body);font-size:10px;font-weight:600;fill:var(--color-text-muted);}
.eq-spark-lab-acc{fill:var(--color-primary);font-weight:700;}
@media (max-width:1100px){
.e5-head{grid-template-columns:1fr;align-items:start;gap:var(--space-4);}
.e5-mark{justify-self:start;font-size:clamp(4rem,3rem + 4vw,6rem);}
/* the equation keeps reading left to right: a snap-scrolling row */
.eq-row{display:flex;overflow-x:auto;gap:var(--space-10);padding:.25rem .25rem var(--space-4);
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.eq-card{flex:0 0 min(78vw,300px);scroll-snap-align:start;}
.eq-card:not(:last-child)::after{right:calc(-1 * var(--space-10) / 2 - 18px);}
.eq-row::before{display:none;}
.eq-result{grid-template-columns:auto minmax(0,1fr);}
.eq-spark{grid-column:1 / -1;}
}
@media (max-width:560px){
.eq-result{padding:var(--space-5);}
}
@media (prefers-reduced-motion:reduce){
.eq-card,.eq-result,.eq-card::after{transition:none;}
.eq-card,.eq-result{opacity:1;transform:none;}
.eq-card:not(:last-child)::after{transform:translateY(-50%) scale(1);animation:none;}
}
/* ---- the training promise: one line, set large ---- */
.promise{position:relative;margin:var(--space-10) 0 var(--space-4);padding:var(--space-6) var(--space-8) var(--space-6) calc(var(--space-8) + 6px);
border-radius:var(--radius-2xl);background:var(--color-surface);border:1px solid var(--color-divider);overflow:hidden;}
.promise::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
background:linear-gradient(180deg,var(--color-brand-violet),var(--color-indigo) 55%,var(--color-gold));
transform:scaleY(0);transform-origin:50% 0;transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s;}
.promise.in::before{transform:scaleY(1);}
.promise-kick{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:var(--space-3);
font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);}
.promise-kick::before{content:"";width:.5rem;height:.5rem;border-radius:50%;
background:linear-gradient(135deg,var(--color-brand-violet),var(--color-gold));box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);}
.promise p{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.15;
font-size:clamp(1.45rem,1.1rem + 1.3vw,2.3rem);color:var(--color-text);max-width:30ch;text-wrap:balance;}
.promise em{font-style:normal;}
/* words: each rises into place; the accent words carry a gradient that is
offset per word so the phrase reads as one sweep, then keeps drifting */
.promise .w{display:inline-block;}
.promise.is-split .w{opacity:0;transform:translateY(.55em);filter:blur(4px);
transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .55s ease;
transition-delay:calc(.25s + var(--w,0) * .05s);}
.promise.is-split.in .w{opacity:1;transform:translateY(0);filter:blur(0);}
.promise .w-acc{background:linear-gradient(90deg,var(--color-primary),var(--color-indigo) 40%,var(--color-gold) 70%,var(--color-primary));
background-size:320% 100%;background-position:calc(var(--k,0) * 12%) 0;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.promise.in .w-acc{animation:pwShine 6s linear infinite;animation-delay:calc(1.8s - var(--k,0) * .18s);}
@keyframes pwShine{from{background-position:calc(var(--k,0) * 12%) 0;}to{background-position:calc(var(--k,0) * 12% + 320%) 0;}}
.promise-kick::before{animation:pwPulse 2.6s ease-out infinite;}
@keyframes pwPulse{0%{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);}
60%{box-shadow:0 0 0 10px color-mix(in srgb, var(--color-primary) 0%, transparent);}
100%{box-shadow:0 0 0 10px color-mix(in srgb, var(--color-primary) 0%, transparent);}}
@media (prefers-reduced-motion:reduce){
.promise::before{transform:none;transition:none;}
.promise.is-split .w{opacity:1;transform:none;filter:none;transition:none;}
.promise.in .w-acc,.promise-kick::before{animation:none;}
}
@media (max-width:560px){ .promise{padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 6px);} }
/* ---- the five-stage pipeline ----
A rail with a flowing line and five nodes; one panel open beneath. The
panels are all in the DOM (hidden attribute), so no JS = the first reads. */
.pipe{margin-top:var(--space-12);}
.pipe-rail{position:relative;height:150px;margin:0 var(--space-6) var(--space-6);}
.pipe-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pipe-track{fill:none;stroke:color-mix(in srgb, var(--color-text) 14%, transparent);stroke-width:3;stroke-linecap:round;}
.pipe-prog{fill:none;stroke:var(--color-primary);stroke-width:3;stroke-linecap:round;
stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1);}
.pipe-node{position:absolute;left:var(--x);top:50%;transform:translate(-50%,-50%);z-index:1;
display:grid;justify-items:center;gap:.5rem;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;font:inherit;}
.pipe-node i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-style:normal;font-weight:800;
font-size:.8rem;letter-spacing:.02em;background:var(--color-surface);color:var(--color-text-muted);
border:2px solid var(--color-divider);box-shadow:var(--shadow-sm);transition:all var(--transition);}
.pipe-node b{position:absolute;top:calc(50% + 30px);white-space:nowrap;font-family:var(--font-display);font-weight:800;
font-size:var(--text-sm);letter-spacing:-.01em;color:var(--color-text-muted);transition:color var(--transition);}
.pipe-node:hover i{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);}
.pipe-node.is-done i{border-color:color-mix(in srgb, var(--color-primary) 55%, transparent);color:var(--color-primary);}
.pipe-node.is-on i{background:linear-gradient(135deg,var(--color-brand-violet),var(--color-indigo));color:#fff;border-color:transparent;
box-shadow:0 0 0 6px color-mix(in srgb, var(--color-primary) 18%, transparent), var(--shadow-md);transform:scale(1.08);}
.pipe-node.is-on b{background:linear-gradient(90deg,var(--color-primary),var(--color-indigo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pipe-node:focus-visible{outline:none;}
.pipe-node:focus-visible i{outline:2px solid var(--color-primary);outline-offset:3px;}
/* every node sits on the line; labels alternate below and above so they never collide */
.pipe-node:nth-of-type(even) b{top:auto;bottom:calc(50% + 30px);}
/* the two stages outside our mandate: on the rail, but quiet and not tabs */
.pipe-node.pipe-ctx{cursor:default;}
.pipe-node.pipe-ctx i{background:transparent;border-style:dashed;border-color:color-mix(in srgb, var(--color-text) 28%, transparent);
color:var(--color-text-faint);box-shadow:none;}
.pipe-node.pipe-ctx b{color:var(--color-text-faint);}
.pipe-node.pipe-ctx small{position:absolute;white-space:nowrap;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-text-faint);}
.pipe-node.pipe-ctx:nth-of-type(odd) small{bottom:calc(50% + 30px);}
.pipe-node.pipe-ctx:nth-of-type(even) small{top:calc(50% + 30px);}
.pipe-node.pipe-ctx:hover i{transform:none;border-color:color-mix(in srgb, var(--color-text) 28%, transparent);color:var(--color-text-faint);}
/* the zone we work in: a soft band behind nodes 02-04 */
.pipe-zone{position:absolute;left:15.5%;right:15.5%;top:-6px;bottom:-6px;border-radius:var(--radius-full);
background:color-mix(in srgb, var(--color-primary) 7%, transparent);
border:1px dashed color-mix(in srgb, var(--color-primary) 32%, transparent);}
.pipe-zone b{position:absolute;left:50%;top:-11px;transform:translateX(-50%);white-space:nowrap;
padding:.18rem .65rem;border-radius:var(--radius-full);font-family:var(--font-body);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-primary);background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);}
.pipe-panels{position:relative;}
.pipe-panel{padding:clamp(var(--space-6),3vw,var(--space-10));border-radius:var(--radius-2xl);
background:var(--color-surface);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);}
.pipe-panel.is-in{animation:hubIn .45s both;}
.pp-head{display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--space-5);align-items:baseline;margin-bottom:var(--space-6);}
.pp-n{grid-row:1 / span 2;font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,1.8rem + 2vw,3.6rem);line-height:1;letter-spacing:-.04em;
background:linear-gradient(135deg,var(--color-brand-violet),var(--color-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pp-head h3{margin:0;font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);letter-spacing:-.025em;line-height:1.1;}
.pp-head p{margin:0;color:var(--color-text-muted);font-size:var(--text-base);}
.pp-cols{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(var(--space-6),3vw,var(--space-12));}
.pp-cols h4{display:flex;align-items:center;gap:.5rem;margin:0 0 var(--space-4);font-family:var(--font-body);font-weight:700;
font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);}
.pp-cols h4 [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);}
.pp-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.pp-cols li{position:relative;padding-left:1.15rem;font-size:var(--text-sm);line-height:1.5;color:var(--color-text);}
.pp-cols li::before{content:"";position:absolute;left:0;top:.6em;width:.34rem;height:.34rem;border-radius:50%;background:var(--color-primary);}
.pp-cols > div:last-child li{color:var(--color-text-muted);}
.pp-cols > div:last-child li::before{background:var(--color-gold);}
@media (max-width:900px){
.pipe-rail{height:auto;margin:0 0 var(--space-5);}
.pipe-svg{display:none;}
.pipe-node{position:static;transform:none;top:auto;
grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:.7rem;width:100%;padding:.55rem .6rem;border-radius:var(--radius-lg);}
.pipe-rail{display:grid;gap:.25rem;}
.pipe-node i{width:36px;height:36px;font-size:.72rem;}
.pipe-node b,.pipe-node:nth-of-type(even) b{position:static;}
.pipe-zone{display:none;}
.pipe-node.pipe-ctx{grid-template-columns:auto 1fr auto;}
.pipe-node.pipe-ctx b{justify-self:start;}
.pipe-node.pipe-ctx small,.pipe-node.pipe-ctx:nth-of-type(odd) small,.pipe-node.pipe-ctx:nth-of-type(even) small{position:static;justify-self:end;padding-right:.4rem;}
.pipe-node.is-on{background:color-mix(in srgb, var(--color-primary) 8%, transparent);}
.pipe-node.is-on i{transform:none;}
.pp-cols{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
.fiveE li,.pipe-node i,.pipe-prog{transition:none;}
.pipe-panel.is-in{animation:none;}
}
/* =====================================================================
SOFTWARE PAGES - KropAnalytiX Pro, DataViz Pro, BreedPilot
Built on the same pieces as Education and Consultancy (edu-hero,
brand-lockup, sec-head, pillars, steps, aud, fmt, plans, sec-split,
accordion, cta-band). New here: the product screen, the feature tour,
the plot wall and the suite row. The imagery is the real product art
framed as a screen, so a light image reads as a screenshot rather than
as a palette clash - the same device as the platform cards on BioMetriK.
===================================================================== */
/* ---- product screen ----
A browser-like frame: title bar with three dots and a name pill, then the
viewport. Several images can sit in the viewport; the script crossfades
them and writes the caption. Without JS the first image simply shows. */
.tscr{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-10);}
@media (min-width:1080px){ .tscr{margin-top:0;} }
.tscr .hv-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1080px){ .tscr .hv-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);} }
@media (max-width:420px){ .tscr .hv-facts{padding:var(--space-4);} .tscr .hv-facts dd{font-size:var(--text-xs);} }
.tscr-frame{position:relative;border-radius:var(--radius-2xl);overflow:hidden;
padding:var(--space-4) var(--space-4) 0;
background:linear-gradient(160deg,#1B1046 0%,#3A1C96 52%,#07535B 100%);
border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
box-shadow:0 30px 70px color-mix(in srgb, var(--color-text) 18%, transparent);}
.tscr-bar{display:flex;align-items:center;gap:.6rem;padding:0 .2rem .7rem;}
.tscr-dots{display:flex;gap:6px;flex:none;}
.tscr-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.34);}
.tscr-dots i:first-child{background:rgba(255,255,255,.55);}
.tscr-name{margin:0 auto;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:rgba(255,255,255,.78);background:rgba(255,255,255,.1);
padding:.28rem .9rem;border-radius:var(--radius-full);white-space:nowrap;
border:1px solid rgba(255,255,255,.12);}
.tscr-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
border:1px solid rgba(255,255,255,.18);border-bottom:0;
box-shadow:0 -12px 40px rgba(0,0,0,.35);}
.tscr-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
display:block;opacity:0;transform:scale(1.05);
transition:opacity .9s ease,transform 7s linear;}
.tscr-view img.is-on{opacity:1;transform:scale(1);}
.tscr-view img:first-child{opacity:1;} /* no-JS: the first shows */
.tscr.is-live .tscr-view img:first-child:not(.is-on){opacity:0;}
/* The product art was drawn in the old forest-green / harvest-gold scheme.
On a screen marked .is-duo it takes the site's brand duotone - the same
treatment as the brand carousel (greyscale + navy-violet-cyan in 'color'
mode). Scientific figures (the DataViz Pro plot wall) never get it. */
.tscr-view.is-duo{isolation:isolate;}
.tscr-view.is-duo img{filter:grayscale(1) contrast(1.03);}
.tscr-view.is-duo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(140deg,#01284F 0%,#8C52FF 55%,#03F7EB 100%);
mix-blend-mode:color;opacity:.85;}
.tscr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;align-items:center;gap:.7rem;padding:var(--space-8) var(--space-5) var(--space-4);
background:linear-gradient(0deg,rgba(6,4,20,.82) 0%,rgba(6,4,20,.3) 60%,transparent 100%);
color:#fff;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.tscr-cap i{font-style:normal;color:var(--color-accent-bright);}
.tscr-cap b{font-weight:800;}
.tscr-prog{position:absolute;left:0;bottom:0;z-index:3;height:3px;width:100%;
transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));}
.tscr.is-live .tscr-prog{animation:tscrProg var(--hold,5200ms) linear forwards;}
@keyframes tscrProg{to{transform:scaleX(1);}}
.tscr.is-paused .tscr-prog{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
.tscr-view img{transition:none;transform:none;}
.tscr.is-live .tscr-prog{animation:none;display:none;}
}
/* ---- feature tour ----
The modules as a column of tabs beside one screen. The open tab shows its
description and carries a progress hairline; the screen shows its image.
Auto-advances, pauses on hover, focus, off-screen and hidden tab, and
stops for good once the visitor chooses a tab. Under 900px the screen
goes on top and the tabs become a horizontal, snap-scrolling row. */
.tour{margin-top:var(--space-10);display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
gap:clamp(var(--space-6),3vw,var(--space-10));align-items:center;}
.tour-tabs{display:grid;gap:.45rem;margin:0;padding:0;list-style:none;}
.tour-tab{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:start;
width:100%;text-align:left;padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);
background:transparent;border:1px solid transparent;color:var(--color-text);cursor:pointer;
overflow:hidden;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);}
.tour-tab > [data-lucide]{width:1.2rem;height:1.2rem;flex:none;margin-top:.2rem;color:var(--color-primary);}
.tt-body{display:block;min-width:0;}
.tour-tab b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-base);line-height:1.15;}
.tour-tab small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-text-faint);margin-bottom:.15rem;}
.tt-desc{display:block;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-muted);
max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s,margin .35s;}
.tour-tab:hover{background:color-mix(in srgb, var(--color-primary) 4%, transparent);}
.tour-tab.is-on{background:var(--color-surface);
border-color:color-mix(in srgb, var(--color-primary) 24%, transparent);
box-shadow:0 16px 40px color-mix(in srgb, var(--color-primary) 12%, transparent);}
.tour-tab.is-on .tt-desc{max-height:8em;opacity:1;margin-top:.35rem;}
.tour-tab .tt-prog{position:absolute;left:0;right:0;bottom:0;height:2px;
transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,var(--color-primary),var(--color-accent-bright));}
.tour.is-auto .tour-tab.is-on .tt-prog{animation:tscrProg var(--hold,5600ms) linear forwards;}
.tour.is-paused .tour-tab.is-on .tt-prog{animation-play-state:paused;}
.tour .tscr-frame{margin:0;}
.tour .tscr-view{aspect-ratio:16/10;}
@media (max-width:900px){
.tour{grid-template-columns:1fr;gap:var(--space-5);}
.tour .tscr-frame{order:-1;}
.tour-tabs{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
padding:.25rem .25rem var(--space-3);margin:0 calc(-1 * var(--space-1));
scrollbar-width:thin;}
.tour-tab{flex:0 0 min(78%,320px);scroll-snap-align:start;}
.tt-desc{max-height:none;opacity:1;margin-top:.35rem;}
.tour-tab:not(.is-on){background:var(--color-surface);border-color:var(--color-divider);}
}
@media (prefers-reduced-motion:reduce){
.tt-desc{transition:none;}
.tour.is-auto .tour-tab.is-on .tt-prog{animation:none;display:none;}
}
/* ---- plot wall (DataViz Pro) ----
Eight figures in true colour - these are the product's output, and stay
excluded from the brand duotone like every other scientific figure on the
site. Each sits on a white panel like a figure on a page, contained rather
than cropped, with its name in a bar underneath. */
.pwall{margin-top:var(--space-10);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.pw{display:flex;flex-direction:column;margin:0;border-radius:var(--radius-xl);overflow:hidden;
background:var(--color-surface);border:1px solid var(--color-divider);
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.pw-img{position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;}
.pw-img img{position:absolute;inset:var(--space-3);width:calc(100% - 2 * var(--space-3));height:calc(100% - 2 * var(--space-3));
object-fit:contain;display:block;transition:transform .7s cubic-bezier(.4,0,.2,1);}
.pw.pw-wide{grid-column:span 2;}
.pw.pw-wide .pw-img{aspect-ratio:auto;flex:1;min-height:0;}
.pw:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow:0 24px 50px color-mix(in srgb, var(--color-primary) 14%, transparent);}
.pw:hover .pw-img img{transform:scale(1.035);}
.pw figcaption{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-divider);}
.pw figcaption b{font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);line-height:1.2;color:var(--color-text);}
.pw figcaption span{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 8%, transparent);
padding:.25rem .55rem;border-radius:var(--radius-full);}
.pw-fam{justify-content:center;border-top:0;padding:0;margin:var(--space-8) auto 0;max-width:860px;}
@media (max-width:900px){
.pwall{grid-template-columns:repeat(2,minmax(0,1fr));}
.pw.pw-wide .pw-img{aspect-ratio:2/1;flex:none;}
}
@media (max-width:520px){ .pwall{grid-template-columns:1fr;} .pw.pw-wide{grid-column:auto;} }
/* ---- the suite ----
The three tools side by side, the current one marked, each with where
else on the site it does its work. Registered marks sit on a light plate
in both themes because their wordmarks are dark. */
.suite{margin-top:var(--space-10);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--space-5);}
.suite-card{position:relative;display:flex;flex-direction:column;gap:var(--space-4);
padding:var(--space-6);border-radius:var(--radius-2xl);
background:var(--color-surface);border:1px solid var(--color-divider);
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.suite-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow:0 22px 48px color-mix(in srgb, var(--color-primary) 12%, transparent);}
.suite-card.is-here{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);
background:color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));}
.suite-here{position:absolute;top:var(--space-4);right:var(--space-4);
font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);
background:color-mix(in srgb, var(--color-primary) 10%, transparent);
border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
padding:.3rem .6rem;border-radius:var(--radius-full);}
.suite-logo{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
height:72px;padding:.55rem .9rem;border-radius:var(--radius-lg);
background:#fff;border:1px solid var(--color-divider);}
.suite-logo img{height:100%;width:auto;display:block;}
[data-theme="dark"] .suite-logo{background:#f7f7fa;border-color:rgba(255,255,255,.14);}
.suite-card h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:var(--text-lg);line-height:1.15;margin:0;}
.suite-card > p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;flex:1;}
.suite-use{display:block;line-height:1.5;
padding-top:var(--space-4);border-top:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
font-size:var(--text-xs);color:var(--color-text-muted);}
.suite-use [data-lucide]{display:inline-block;vertical-align:-.2em;margin-right:.4rem;width:.95rem;height:.95rem;color:var(--color-primary);}
.suite-use a{color:var(--color-text);font-weight:700;text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);}
.suite-use a:hover{color:var(--color-primary);}
.suite-card .link-arrow{margin-top:var(--space-2);}
/* ---- plans on the software pages ----
The currency toggle sits in the section head line rather than centred
over the grid, so the section reads like the rest of the page. */
.plans-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-6);}
.plans-head .sec-head{margin-bottom:0;}
.plans-head .price-toggle{margin-bottom:var(--space-2);}
.plans-wrap{margin-top:var(--space-10);}
.plans-wrap .plans{max-width:none;}
.plan-note{margin-top:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted);display:flex;gap:.6rem;align-items:flex-start;}
.plan-note [data-lucide]{width:1.05rem;height:1.05rem;flex:none;margin-top:.15rem;color:var(--color-primary);}
/* The enterprise plan's gradient is built from --color-navy and
--color-primary-active, which the dark theme lightens - leaving light text
on a pale lavender card. In dark mode it keeps a fixed deep ramp. */
[data-theme="dark"] .plan.enterprise{background:linear-gradient(150deg,#1B1046 0%,#3A1C96 60%,#2B2F9E 100%);
border:1px solid rgba(169,123,255,.28);}
[data-theme="dark"] .plan.enterprise .price-gst{color:rgba(255,255,255,.62);}
/* "You are here" sits on the card's top edge, like "Best Value" on a plan,
so it can never collide with a wide registered mark. Fixed colours: the
theme primary lightens in dark mode and white text would fail on it. */
.suite-here{top:-11px;right:var(--space-5);color:#fff;border:0;
background:linear-gradient(135deg,#6D3BE8,#3D53E0);
box-shadow:0 6px 16px rgba(109,59,232,.3);}
/* On a phone the eight figures become a swipeable row rather than eight
full-width cards stacked down the page. */
@media (max-width:520px){
.pwall{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);
padding:.25rem .25rem var(--space-4);margin-inline:calc(-1 * var(--space-1));scrollbar-width:thin;}
.pw,.pw.pw-wide{flex:0 0 82%;scroll-snap-align:start;}
.pw.pw-wide .pw-img{aspect-ratio:4/3;}
.pw:hover{transform:none;}
}
/* Tour descriptions: room for the longest one at the narrowest desktop
column, and never clipped in the phone row. */
.tour-tab.is-on .tt-desc{max-height:16em;}
@media (max-width:900px){ .tour-tab .tt-desc,.tour-tab.is-on .tt-desc{max-height:none;} }
.plans-head .price-toggle{flex:none;}
.plans-head .price-toggle button{white-space:nowrap;}
/* ---- software pages: the introduction film ----
Same panel as the BioMetriK film (.hvid / .hv-frame / .hv-play), but the
cover is the product art and the film is on YouTube. The whole frame is
the link; with a video id in data-yt it plays inline instead. */
.hv-yt .hv-play{text-decoration:none;}
.hv-yt .hv-media{transition:transform 1.2s cubic-bezier(.4,0,.2,1);}
.hv-yt:hover .hv-media{transform:scale(1.035);}
.hv-yt.is-duo{isolation:isolate;}
.hv-yt.is-duo .hv-media{filter:grayscale(1) contrast(1.03);}
.hv-yt.is-duo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(140deg,#01284F 0%,#8C52FF 55%,#03F7EB 100%);
mix-blend-mode:color;opacity:.85;}
.hv-yt-badge{position:absolute;top:var(--space-5);right:var(--space-5);z-index:3;pointer-events:none;
display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .75rem .38rem .6rem;
border-radius:var(--radius-full);background:rgba(6,4,20,.58);
border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.hv-yt-badge svg{width:18px;height:18px;color:#FF0033;flex:none;}
.hv-yt iframe{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;display:block;}
.hv-yt.is-playing .hv-play,.hv-yt.is-playing .hv-yt-badge{display:none;}
/* three short facts stay three-up on a phone */
.hv-tool .hv-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1080px){ .hv-tool .hv-facts{gap:var(--space-3);} }
@media (max-width:420px){ .hv-tool .hv-facts{padding:var(--space-4);} .hv-tool .hv-facts dd{font-size:var(--text-xs);} }
/* stacked hero: breathing room between the call to action and the film */
@media (max-width:1079px){ .edu-hero .hvid{margin-top:var(--space-10);} }
@media (max-width:560px){ .hv-yt-badge{top:var(--space-3);right:var(--space-3);} }
/* =====================================================================
DATAVIZ PRO - comparison strip, family explorer, data workspace,
export card
===================================================================== */
/* ---- two workflows, side by side ---- */
.vs{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);}
.vs-card{padding:var(--space-6);border-radius:var(--radius-2xl);
background:var(--color-surface);border:1px solid var(--color-divider);}
.vs-card.is-dvp{background:linear-gradient(150deg,#1B1046 0%,#3A1C96 58%,#07535B 100%);border-color:transparent;color:#fff;
box-shadow:0 22px 50px color-mix(in srgb, var(--color-primary) 22%, transparent);}
.vs-kick{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--text-xs);font-weight:800;
letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);}
.vs-kick [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);}
.vs-card.is-dvp .vs-kick{color:var(--color-accent-bright);}
.vs-card.is-dvp .vs-kick [data-lucide]{color:var(--color-accent-bright);}
.vs-steps{list-style:none;margin:var(--space-5) 0 var(--space-4);padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.vs-steps li{font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);
padding:.4rem .8rem;border-radius:var(--radius-full);
background:color-mix(in srgb, var(--color-text) 5%, transparent);color:var(--color-text-muted);}
.vs-steps li + li::before{content:"\2192";margin-right:.5rem;opacity:.5;font-weight:600;}
.vs-steps li + li{padding-left:.4rem;background:none;}
.vs-card:not(.is-dvp) .vs-steps li:last-child{color:var(--color-magenta);}
.vs-card.is-dvp .vs-steps li{color:#fff;background:rgba(255,255,255,.12);}
.vs-card.is-dvp .vs-steps li + li{background:none;}
.vs-card.is-dvp .vs-steps li:last-child{color:var(--color-accent-bright);}
.vs-card p{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);}
.vs-card.is-dvp p{color:rgba(255,255,255,.82);}
@media (max-width:760px){ .vs{grid-template-columns:1fr;} }
/* ---- family explorer ----
Families on the left (name, modules, plot types); the chosen family's
modules on the right, each a card with its plot types as chips. */
.fam{margin-top:var(--space-10);display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,2.28fr);
gap:clamp(var(--space-6),3vw,var(--space-10));align-items:start;}
.fam-tabs{display:grid;gap:.5rem;position:sticky;top:calc(var(--header-h, 72px) + var(--space-4));}
.fam-tab{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;text-align:left;width:100%;
padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);
background:var(--color-surface);border:1px solid var(--color-divider);color:var(--color-text);cursor:pointer;
transition:all var(--transition);}
.fam-tab > [data-lucide]{width:1.2rem;height:1.2rem;color:var(--color-primary);}
.fam-tab b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--text-base);line-height:1.15;}
.fam-tab i{display:block;font-style:normal;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.15rem;}
.fam-tab em{font-style:normal;font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);
color:color-mix(in srgb, var(--color-primary) 70%, var(--color-text));}
.fam-tab:hover{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);transform:translateX(3px);}
.fam-tab.is-on{background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));border-color:transparent;color:#fff;
box-shadow:0 12px 30px color-mix(in srgb, var(--color-primary) 32%, transparent);}
.fam-tab.is-on > [data-lucide],.fam-tab.is-on em{color:#fff;}
.fam-tab.is-on i{color:rgba(255,255,255,.82);}
[data-theme="dark"] .fam-tab.is-on{background:linear-gradient(135deg,#6D3BE8,#3D53E0);}
.fam-total{margin:var(--space-3) 0 0;padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);
border:1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45;}
.fam-total b{color:var(--color-text);font-family:var(--font-display);font-weight:800;font-size:var(--text-base);}
.fam-panel{padding:clamp(var(--space-6),2.4vw,var(--space-8));border-radius:var(--radius-2xl);
background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);}
.fam-panel.is-in{animation:audIn .38s cubic-bezier(.4,0,.2,1) both;}
.fam-head{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:start;
padding-bottom:var(--space-5);margin-bottom:var(--space-5);border-bottom:1px solid var(--color-divider);}
.fam-head h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:var(--text-2xl);line-height:1.05;margin:0 0 .45rem;}
.fam-head p{margin:0;color:var(--color-text-muted);max-width:60ch;}
.fam-count{text-align:right;}
.fam-count b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,1.6rem + 1.6vw,3.2rem);line-height:.95;
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo) 55%,var(--color-teal));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.fam-count span{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);}
.fam-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-4);}
.fam-mod{padding:var(--space-5);border-radius:var(--radius-xl);
background:color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));border:1px solid var(--color-divider);}
.fam-mod-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:var(--space-3);}
.fam-mod h4{font-family:var(--font-display);font-weight:800;font-size:var(--text-base);margin:0;line-height:1.2;}
.fam-mod-n{flex:none;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:linear-gradient(135deg,#6D3BE8,#3D53E0);padding:.26rem .6rem;border-radius:var(--radius-full);}
.fam-mod .svc-chips{border-top:0;padding:0;margin:0 0 var(--space-3);}
.fam-mod p{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted);}
.fam-note{display:flex;gap:.7rem;align-items:flex-start;margin:var(--space-5) 0 0;padding:var(--space-4) var(--space-5);
border-radius:var(--radius-xl);background:color-mix(in srgb, var(--color-primary) 6%, transparent);
font-size:var(--text-sm);line-height:1.5;color:var(--color-text);}
.fam-note [data-lucide]{width:1.1rem;height:1.1rem;flex:none;margin-top:.15rem;color:var(--color-primary);}
.fam-fallback{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;color:var(--color-text-muted);}
.fam-fallback b{color:var(--color-text);}
@media (max-width:980px){
.fam{grid-template-columns:1fr;}
.fam-tabs{position:static;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.5rem;padding:.2rem .2rem var(--space-3);}
.fam-tab{flex:0 0 auto;min-width:210px;scroll-snap-align:start;}
.fam-tab:hover{transform:none;}
.fam-total{display:none;}
}
@media (max-width:560px){
.fam-head{grid-template-columns:1fr;}
.fam-count{text-align:left;}
}
@media (prefers-reduced-motion:reduce){ .fam-panel.is-in{animation:none;} }
/* ---- data workspace ---- */
.dws-stats{margin:var(--space-8) 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);}
.dws-stats > div{padding:var(--space-5);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid var(--color-divider);}
.dws-stats dt{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.35rem;}
.dws-stats dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem);line-height:1;
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.dws{margin-top:var(--space-6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.dw{display:flex;flex-direction:column;padding:var(--space-6);border-radius:var(--radius-2xl);
background:var(--color-surface);border:1px solid var(--color-divider);
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.dw:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--color-primary) 28%, transparent);
box-shadow:0 22px 48px color-mix(in srgb, var(--color-primary) 12%, transparent);}
.dw-ico{width:44px;height:44px;border-radius:var(--radius-lg);display:grid;place-items:center;margin-bottom:var(--space-4);
color:#fff;background:linear-gradient(135deg,#6D3BE8,#3D53E0);}
.dw-ico [data-lucide]{width:1.3rem;height:1.3rem;}
.dw h3{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);letter-spacing:-.02em;margin:0 0 var(--space-2);}
.dw > p{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted);flex:1;}
@media (max-width:1000px){ .dws{grid-template-columns:repeat(2,minmax(0,1fr));} .dws-stats{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){ .dws{grid-template-columns:1fr;} .dws-stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* ---- export card ---- */
.expo{margin-top:var(--space-6);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-8);align-items:center;
padding:clamp(var(--space-6),3vw,var(--space-10));border-radius:var(--radius-2xl);
background:linear-gradient(150deg,#1B1046 0%,#3A1C96 58%,#07535B 100%);color:#fff;}
.expo .vs-kick,.expo .vs-kick [data-lucide]{color:var(--color-accent-bright);}
.expo h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:var(--text-2xl);line-height:1.1;margin:var(--space-3) 0 var(--space-3);color:#fff;}
.expo-main p{margin:0;color:rgba(255,255,255,.82);}
.expo-specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}
.expo-specs > div{padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);}
.expo-specs dt{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-bright);}
.expo-specs dd{margin:.3rem 0 .15rem;font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);color:#fff;}
.expo-specs small{font-size:var(--text-xs);color:rgba(255,255,255,.7);}
@media (max-width:860px){ .expo{grid-template-columns:1fr;gap:var(--space-6);} }
@media (max-width:420px){ .expo-specs{grid-template-columns:1fr;} }
/* Plot wall with tall cells: the real circos output gets two rows. The wide
cell keeps its own ratio (two 4:3 cells side by side) so row one always
has a height to give the tall cell beside it. */
.pwall{grid-auto-flow:row dense;}
.pw.pw-wide .pw-img{aspect-ratio:8/3;flex:none;}
.pw.pw-tall{grid-row:span 2;}
.pw.pw-tall .pw-img{aspect-ratio:auto;flex:1;min-height:0;}
@media (max-width:900px){ .pw.pw-wide .pw-img{aspect-ratio:2/1;} }
@media (max-width:520px){ .pw.pw-tall{grid-row:auto;} .pw.pw-tall .pw-img{aspect-ratio:4/3;flex:none;} }
.vs-steps li{font-size:.85rem;}
/* Featured cells: the real circos output takes two columns and two rows.
Their height comes from the ordinary 4:3 cells beside them. */
.pw.pw-big{grid-column:span 2;grid-row:span 2;}
.pw.pw-big .pw-img{aspect-ratio:auto;flex:1;min-height:0;}
@media (max-width:900px){ .pw.pw-big{grid-row:auto;} .pw.pw-big .pw-img{aspect-ratio:6/5;flex:none;} }
@media (max-width:520px){ .pw.pw-big{grid-column:auto;} .pw.pw-big .pw-img{aspect-ratio:4/3;} }
@media (max-width:980px){ .fam-tab{width:auto;} }
/* =====================================================================
DataViz Pro "Access & plans" (.pl2) — Explorer / Researcher / Big Data /
Lab cards, Institute band, workspace scale strip and notes.
Scoped to .pl2 so the KropAnalytiX / BreedPilot .plans blocks are untouched.
Billing: section[data-billing="mo|yr"] hides [data-per] blocks; currency is
the shared [data-inr]/[data-usd] toggle in main.js.
===================================================================== */
.pl2 .grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.pl2 .plans-head .sec-head h2 .grad{display:block;}
.pl2 .nw{white-space:nowrap;}
.pl2-ctrl{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;flex:none;}
.pl2-ctrl .price-toggle{margin:0;}
.pl2-ctrl .price-toggle button{white-space:nowrap;}
.pl2-bill em{font-style:normal;font-size:.72em;font-weight:800;margin-left:.4rem;padding:.12rem .5rem;border-radius:var(--radius-full);
background:var(--color-gold-soft);color:var(--color-text);vertical-align:.08em;}
.pl2-bill button.active em{background:rgba(255,255,255,.22);color:inherit;}
html:not(.js) .pl2-bill{display:none;}
.pl2[data-billing="mo"] [data-per="yr"],.pl2[data-billing="yr"] [data-per="mo"]{display:none;}
.pl2-trust{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:var(--space-6);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:600;}
.pl2-trust li{display:flex;align-items:center;gap:.45rem;}
.pl2-trust [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);flex:none;}
.pl2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-8);align-items:stretch;}
.pl2-card{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-divider);
border-radius:var(--radius-xl);padding:var(--space-6);transition:transform var(--transition),box-shadow var(--transition);}
.pl2-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.pl2-card.is-pick{border-color:var(--color-gold);box-shadow:var(--shadow-gold);}
.pl2-flag{position:absolute;top:-12px;left:var(--space-6);background:var(--color-gold);color:var(--color-on-accent);font-size:var(--text-xs);
font-weight:800;padding:.3rem .85rem;border-radius:var(--radius-full);letter-spacing:.03em;white-space:nowrap;}
.pl2-top{display:flex;align-items:center;gap:.55rem;}
.pl2-top [data-lucide]{width:1.3rem;height:1.3rem;color:var(--color-primary);flex:none;}
.pl2-top h3{font-family:var(--font-display);font-size:var(--text-lg);margin:0;line-height:1.2;}
.pl2-tag{color:var(--color-text-muted);font-size:var(--text-sm);margin:.35rem 0 var(--space-5);min-height:2.8em;}
.pl2-price{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;}
.pl2-amt{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);line-height:1.05;color:var(--color-text);letter-spacing:-.02em;}
.pl2-per{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600;}
.pl2-sub{font-size:var(--text-xs);color:var(--color-text-faint);font-weight:600;margin:.45rem 0 var(--space-5);}
.pl2-list{display:grid;gap:.6rem;margin-bottom:var(--space-5);}
.pl2-list li{display:flex;gap:.5rem;font-size:var(--text-sm);align-items:flex-start;line-height:1.4;}
.pl2-list [data-lucide]{width:1.05rem;height:1.05rem;color:var(--color-primary);flex:none;margin-top:.12rem;}
.pl2-list .pl2-hi{color:var(--color-text);font-weight:600;}
.pl2-list .pl2-hi [data-lucide]{color:var(--color-teal);}
.pl2-alt{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--text-xs);line-height:1.45;color:var(--color-text-muted);
background:var(--color-surface-offset);border-radius:var(--radius-md);padding:.6rem .75rem;margin:auto 0 var(--space-4);}
.pl2-alt [data-lucide]{width:.95rem;height:.95rem;flex:none;margin-top:.08rem;color:var(--color-primary);}
.pl2-alt b{color:var(--color-text);}
.pl2-card > .btn{margin-top:auto;}
.pl2-alt + .btn{margin-top:0;}
.pl2-inst{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-6);
padding:var(--space-6) var(--space-8);border-radius:var(--radius-xl);color:#fff;
background:linear-gradient(120deg,var(--color-navy),var(--color-primary-active));}
[data-theme="dark"] .pl2-inst{background:linear-gradient(120deg,#1B1046 0%,#3A1C96 60%,#2B2F9E 100%);border:1px solid rgba(169,123,255,.28);}
.pl2-inst-txt{flex:1 1 30rem;max-width:46rem;}
.pl2-inst-k{display:inline-flex;align-items:center;gap:.45rem;text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-xs);font-weight:800;color:var(--color-accent-bright);}
.pl2-inst-k [data-lucide]{width:1rem;height:1rem;}
.pl2-inst h3{color:#fff;font-size:var(--text-xl);margin:.45rem 0 .4rem;line-height:1.25;}
.pl2-inst p{color:rgba(255,255,255,.82);font-size:var(--text-sm);margin:0;max-width:62ch;}
.pl2-inst-cta{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;flex:none;}
.pl2-inst-p{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);color:#fff;white-space:nowrap;}
.pl2-inst-p small{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.72);}
.pl2-ws{margin-top:var(--space-10);}
.pl2-ws-h{font-size:var(--text-xl);margin-bottom:var(--space-5);text-wrap:balance;}
.pl2-ws-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.pl2-ws-row li{--w:34%;display:flex;flex-direction:column;gap:.35rem;padding:var(--space-5);border:1px solid var(--color-divider);
border-radius:var(--radius-lg);background:var(--color-surface);}
.pl2-ws-row li::before{content:"";display:block;height:6px;width:var(--w);border-radius:var(--radius-full);margin-bottom:.55rem;
background:linear-gradient(90deg,var(--color-primary),var(--color-teal));}
.pl2-ws-row li.is-big{--w:67%;}
.pl2-ws-row li:last-child{--w:100%;}
.pl2-ws-row b{font-family:var(--font-display);font-size:var(--text-base);}
.pl2-ws-row span{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.45;}
.pl2-ws-row em{font-style:normal;margin-top:auto;padding-top:.4rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);}
.pl2-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-8);
padding-top:var(--space-6);border-top:1px solid var(--color-divider);}
.pl2-notes li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted);}
.pl2-notes b{color:var(--color-text);}
.pl2-notes [data-lucide]{width:1.05rem;height:1.05rem;flex:none;margin-top:.1rem;color:var(--color-primary);}
@media (max-width:1100px){
.pl2-grid,.pl2-notes{grid-template-columns:repeat(2,minmax(0,1fr));}
.pl2-ctrl{flex-direction:row;flex-wrap:wrap;align-items:center;}
}
@media (max-width:720px){
.pl2-ws-row{grid-template-columns:1fr;}
.pl2-inst{padding:var(--space-6);}
.pl2-inst-cta{align-items:flex-start;}
}
@media (max-width:620px){
.pl2-grid,.pl2-notes{grid-template-columns:1fr;}
.pl2-tag{min-height:0;}
.pl2-ctrl{width:100%;flex-direction:column;align-items:stretch;}
.pl2-ctrl .price-toggle{width:100%;}
.pl2-ctrl .price-toggle button{flex:1 1 0;padding:.55rem .6rem;}
}
@media (prefers-reduced-motion:reduce){.pl2-card,.pl2-card:hover{transition:none;transform:none;}}
/* =====================================================================
DataViz Pro "Your data" (.dsx) — lifecycle strip (upload → workspace →
figure → download → deleted) with a travelling pulse, keep / never-keep
columns, and three extra-protection notes. Scoped to .dsx.
===================================================================== */
.dsx .grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.dsx-head{max-width:66rem;}
.dsx-head h2 .grad{display:block;}
@media (min-width:600px){.dsx-nw{white-space:nowrap;}}
.dsx-head p{max-width:60ch;}
.dsx-more a,.pl2-notes a{color:var(--color-primary);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.dsx-k{margin-top:var(--space-10);font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);}
.dsx-flow{--dot:56px;position:relative;list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);}
.dsx-flow::before{content:"";position:absolute;top:calc(var(--dot) / 2 - 1px);left:10%;right:10%;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--color-primary),var(--color-teal) 80%,transparent);opacity:.45;}
.dsx-flow::after{content:"";position:absolute;top:calc(var(--dot) / 2 - 5px);left:10%;width:10px;height:10px;border-radius:50%;
background:var(--color-teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-teal) 18%,transparent),0 0 14px var(--color-teal);animation:dsxRun 7s linear infinite;}
@keyframes dsxRun{0%{left:10%;opacity:0}6%{opacity:1}84%{left:calc(90% - 10px);opacity:1}92%,100%{left:calc(90% - 10px);opacity:0}}
.dsx-flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;}
.dsx-ico{position:relative;z-index:1;display:grid;place-items:center;width:var(--dot);height:var(--dot);border-radius:50%;margin-bottom:.45rem;
background:var(--color-surface);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);}
.dsx-ico [data-lucide]{width:1.4rem;height:1.4rem;color:var(--color-primary);}
.dsx-flow b{font-family:var(--font-display);font-size:var(--text-base);}
.dsx-flow span:not(.dsx-ico){font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.45;max-width:24ch;}
.dsx-flow .is-end .dsx-ico{border:2px dashed var(--color-teal);background:transparent;box-shadow:none;}
.dsx-flow .is-end .dsx-ico [data-lucide]{color:var(--color-teal);}
.dsx-flow em{font-style:normal;margin-top:.2rem;padding:.18rem .6rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:800;
letter-spacing:.06em;text-transform:uppercase;background:var(--color-gold-soft);color:var(--color-text);}
.dsx-kn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-10);}
.dsx-col{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-6);}
.dsx-col h3{display:flex;align-items:center;gap:.55rem;font-size:var(--text-lg);margin:0 0 var(--space-4);}
.dsx-col h3 [data-lucide]{width:1.25rem;height:1.25rem;color:var(--color-primary);flex:none;}
.dsx-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.dsx-col li{display:flex;gap:.55rem;align-items:flex-start;font-size:var(--text-sm);line-height:1.45;}
.dsx-col li [data-lucide]{width:1.05rem;height:1.05rem;flex:none;margin-top:.12rem;color:var(--color-primary);}
.dsx-col.is-no{border-color:color-mix(in srgb,var(--color-teal) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-teal) 7%,transparent);}
.dsx-col.is-no h3 [data-lucide],.dsx-col.is-no li [data-lucide]{color:var(--color-teal);}
.dsx-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:var(--space-5) 0 0;}
.dsx-chips span{padding:.3rem .7rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;
background:var(--color-surface-offset);color:var(--color-text);border:1px solid var(--color-divider);}
.dsx-more{list-style:none;margin:var(--space-8) 0 0;padding:var(--space-6) 0 0;border-top:1px solid var(--color-divider);
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.dsx-more li{display:flex;gap:.75rem;align-items:flex-start;}
.dsx-more li > [data-lucide]{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;color:var(--color-primary);}
.dsx-more b{display:block;font-family:var(--font-display);font-size:var(--text-base);margin-bottom:.2rem;}
.dsx-more span{display:block;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.45;}
@media (max-width:900px){
.dsx-kn,.dsx-more{grid-template-columns:1fr;}
}
@media (max-width:720px){
.dsx-flow{--dot:48px;grid-template-columns:1fr;gap:var(--space-5);}
.dsx-flow::before{top:calc(var(--dot) / 2);bottom:calc(var(--dot) / 2);left:calc(var(--dot) / 2 - 1px);right:auto;width:2px;height:auto;
background:linear-gradient(180deg,var(--color-primary),var(--color-teal) 80%,transparent);}
.dsx-flow::after{left:calc(var(--dot) / 2 - 5px);top:calc(var(--dot) / 2);animation-name:dsxRunV;}
.dsx-flow li{display:grid;grid-template-columns:var(--dot) 1fr;column-gap:var(--space-4);row-gap:.2rem;align-items:start;text-align:left;}
.dsx-ico{grid-row:span 3;margin-bottom:0;}
.dsx-flow b{padding-top:.35rem;}
.dsx-flow span:not(.dsx-ico){max-width:none;}
.dsx-flow em{justify-self:start;}
}
@keyframes dsxRunV{0%{top:calc(var(--dot) / 2);opacity:0}6%{opacity:1}84%{top:calc(100% - var(--dot) / 2 - 10px);opacity:1}92%,100%{top:calc(100% - var(--dot) / 2 - 10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dsx-flow::after{animation:none;display:none;}}
/* =====================================================================
DATAVIZ PRO - GLIMPSE (real output: default vs customised, interactive)
Figures always sit on white: they are scientific output and keep their
true colours in both themes. JS: assets/js/glimpse.js
===================================================================== */
.gx-stats{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;}
.gx-stats li{display:flex;align-items:baseline;gap:.45rem;padding:.5rem .95rem;border-radius:var(--radius-full);
background:var(--color-surface);border:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-muted);}
.gx-stats b{font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);line-height:1;
background:linear-gradient(140deg,var(--color-primary),var(--color-indigo));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
#gallery .sec-head h2 .grad{background:linear-gradient(100deg,var(--color-primary),var(--color-indigo) 50%,var(--color-teal));
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.gx{margin-top:var(--space-8);}
.gx-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-5);}
.gx-cat{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem .55rem .8rem;border-radius:var(--radius-full);
background:var(--color-surface);border:1px solid var(--color-divider);color:var(--color-text);cursor:pointer;
font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);line-height:1.1;white-space:nowrap;
transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition);}
.gx-cat [data-lucide]{width:1rem;height:1rem;color:var(--color-primary);flex:none;}
.gx-cat em{font-style:normal;font-size:.7rem;font-weight:800;min-width:1.5rem;text-align:center;padding:.15rem .4rem;border-radius:var(--radius-full);
background:color-mix(in srgb, var(--color-primary) 10%, transparent);color:color-mix(in srgb, var(--color-primary) 80%, var(--color-text));}
.gx-cat:hover{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);transform:translateY(-1px);}
.gx-cat.is-on{background:linear-gradient(135deg,var(--color-primary),var(--color-indigo));border-color:transparent;color:#fff;
box-shadow:0 10px 26px color-mix(in srgb, var(--color-primary) 30%, transparent);}
.gx-cat.is-on [data-lucide]{color:#fff;}
.gx-cat.is-on em{background:rgba(255,255,255,.2);color:#fff;}
[data-theme="dark"] .gx-cat.is-on{background:linear-gradient(135deg,#6D3BE8,#3D53E0);}
.gx-main{display:block;}
/* the app-like canvas */
.gx-frame{border-radius:var(--radius-2xl);background:var(--color-surface);border:1px solid var(--color-divider);overflow:hidden;
box-shadow:0 26px 60px color-mix(in srgb, var(--color-primary) 10%, transparent);}
.gx-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
padding:.6rem .75rem .6rem 1rem;border-bottom:1px solid var(--color-divider);
background:color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));}
.gx-crumb{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;min-width:0;font-size:var(--text-xs);color:var(--color-text-muted);}
.gx-crumb b{font-family:var(--font-display);font-weight:800;color:var(--color-text);}
.gx-crumb span::before{content:"\203A";margin-right:.35rem;opacity:.55;}
.gx-crumb span:last-child{color:var(--color-text);font-weight:700;}
.gx-tools{display:flex;align-items:center;gap:.5rem;}
.gx-seg{display:inline-flex;padding:3px;border-radius:var(--radius-full);background:color-mix(in srgb, var(--color-text) 7%, transparent);}
.gx-seg button{border:0;background:none;cursor:pointer;padding:.38rem .75rem;border-radius:var(--radius-full);
font-family:var(--font-display);font-weight:800;font-size:.74rem;color:var(--color-text-muted);transition:background var(--transition),color var(--transition),box-shadow var(--transition);}
.gx-seg button:hover{color:var(--color-text);}
.gx-seg button.is-on{background:var(--color-surface);color:var(--color-text);box-shadow:0 2px 8px rgba(15,23,42,.12);}
.gx-ix{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;padding:.45rem .8rem;border-radius:var(--radius-full);
border:1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);background:var(--color-surface);color:var(--color-primary);
font-family:var(--font-display);font-weight:800;font-size:.74rem;transition:all var(--transition);}
.gx-ix [data-lucide]{width:.95rem;height:.95rem;}
.gx-ix:hover:not(:disabled){background:color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));}
.gx-ix.is-on,.gx-ix.is-on:hover:not(:disabled){background:linear-gradient(135deg,#6D3BE8,#3D53E0);border-color:transparent;color:#fff;box-shadow:0 8px 20px color-mix(in srgb, #6D3BE8 35%, transparent);}
.gx-ix:disabled,.gx-ix.is-on:disabled{cursor:not-allowed;opacity:.5;border-style:dashed;background:var(--color-surface);color:var(--color-text-muted);box-shadow:none;border-color:var(--color-divider);}
.gx-stage{--p:50%;position:relative;margin:0;background:#fff;aspect-ratio:var(--ar,1.6);width:100%;
max-height:min(76vh,780px);min-height:260px;overflow:hidden;}
.gx-view{position:absolute;inset:0;}
.gx-static{cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:opacity .35s ease;}
.gx-static.is-swap{opacity:.35;}
.gx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(6px,1.2vw,14px);
box-sizing:border-box;background:#fff;pointer-events:none;-webkit-user-drag:none;}
.gx-clip{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p));will-change:clip-path;}
.gx-handle{position:absolute;top:0;bottom:0;left:var(--p);width:0;z-index:3;outline:none;}
.gx-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;border-radius:3px;
background:linear-gradient(180deg,#8C52FF,#3D53E0 50%,#03C9BE);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 18px rgba(109,59,232,.35);}
.gx-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;gap:0;background:#fff;color:#3D53E0;
box-shadow:0 6px 18px rgba(15,23,42,.22),0 0 0 3px rgba(109,59,232,.18);transition:transform .2s ease,box-shadow .2s ease;}
.gx-knob [data-lucide]{width:15px;height:15px;stroke-width:2.6;}
.gx-static:hover .gx-knob,.gx-stage.is-drag .gx-knob,.gx-handle:focus-visible .gx-knob{transform:translate(-50%,-50%) scale(1.08);
box-shadow:0 8px 22px rgba(15,23,42,.26),0 0 0 5px rgba(109,59,232,.24);}
.gx-handle:focus-visible .gx-knob{outline:3px solid var(--color-primary);outline-offset:3px;}
.gx-tag{position:absolute;top:12px;z-index:2;padding:.28rem .62rem;border-radius:var(--radius-full);pointer-events:none;
font-family:var(--font-display);font-weight:800;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
transition:opacity .25s ease,transform .25s ease;}
.gx-tag-l{left:12px;background:rgba(15,23,42,.78);color:#fff;}
.gx-tag-r{right:12px;background:linear-gradient(135deg,#6D3BE8,#3D53E0);color:#fff;box-shadow:0 4px 12px rgba(61,83,224,.3);}
.gx-stage.is-cus .gx-tag-l,.gx-stage.is-def .gx-tag-r{opacity:0;transform:translateY(-4px);}
/* a figure from the app's gallery: no default to compare */
.gx-stage.is-solo .gx-a,.gx-stage.is-solo .gx-handle,.gx-stage.is-solo .gx-tag-l{display:none;}
.gx-stage.is-solo .gx-static{cursor:default;}
.gx-stage.is-solo .gx-tag-r{opacity:1;transform:none;}
.gx-frame:has(.gx-stage.is-solo) .gx-seg{opacity:.4;pointer-events:none;}
/* interactive */
.gx-live{background:#fff;}
.gx-live .js-plotly-plot,.gx-live .plot-container{width:100%;height:100%;}
.gx-stage.is-live .gx-tag{display:none;}
.gx-frame:has(.gx-stage.is-live) .gx-seg button.is-on{background:none;box-shadow:none;color:var(--color-text-muted);}
.gx-load{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;display:none;align-items:center;gap:.5rem;
padding:.4rem .8rem;border-radius:var(--radius-full);background:rgba(15,23,42,.8);color:#fff;font-size:.74rem;font-weight:600;}
.gx-stage.is-loading .gx-load:not(:empty){display:inline-flex;}
.gx-stage.is-note .gx-load:not(:empty){display:inline-flex;}
.gx-spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gxSpin .8s linear infinite;}
@keyframes gxSpin{to{transform:rotate(360deg);}}
.gx-stage.is-loading::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,transparent 30%,rgba(109,59,232,.06) 50%,transparent 70%);background-size:200% 100%;animation:gxShim 1.2s linear infinite;}
.gx-stage.is-live.is-loading::after{display:none;}
@keyframes gxShim{from{background-position:120% 0;}to{background-position:-80% 0;}}
/* info card */
@keyframes gxUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes gxChip{from{opacity:0;transform:translateY(6px) scale(.96);}to{opacity:1;transform:none;}}
/* filmstrip + controls */
.gx-foot{margin-top:var(--space-4);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:center;}
.gx-strip{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.35rem .2rem .6rem;scrollbar-width:thin;}
.gx-th{position:relative;flex:0 0 auto;width:148px;padding:0;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;scroll-snap-align:start;
background:var(--color-surface);border:1px solid var(--color-divider);text-align:left;color:var(--color-text);
transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);}
.gx-strip.is-in .gx-th{animation:gxUp .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .035s);}
.gx-th-img{display:block;height:88px;background:#fff;border-bottom:1px solid var(--color-divider);}
.gx-th-img img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box;display:block;}
.gx-th-t{display:block;padding:.4rem .55rem .5rem;font-size:.72rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gx-th-ix{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,#6D3BE8,#3D53E0);color:#fff;}
.gx-th-ix [data-lucide]{width:11px;height:11px;}
.gx-th:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--color-primary) 35%, transparent);}
.gx-th.is-on{border-color:transparent;box-shadow:0 0 0 2px #6D3BE8,0 10px 24px color-mix(in srgb, #6D3BE8 22%, transparent);}
.gx-th-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,#8C52FF,#03C9BE);}
.gx-th.is-on .gx-th-bar{transform:scaleX(.001);}
.gx.is-playing .gx-th.is-on .gx-th-bar.is-run{animation:gxBar var(--hold,9000ms) linear forwards;}
.gx.is-held .gx-th.is-on .gx-th-bar.is-run{animation-play-state:paused;}
@keyframes gxBar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.gx-nav{display:flex;gap:.4rem;}
.gx-nav button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:var(--color-surface);border:1px solid var(--color-divider);color:var(--color-text);transition:all var(--transition);}
.gx-nav button [data-lucide]{width:1.1rem;height:1.1rem;}
.gx-nav button:hover{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);color:var(--color-primary);}
.gx-nav .gx-play{background:linear-gradient(135deg,#6D3BE8,#3D53E0);border-color:transparent;color:#fff;}
.gx-nav .gx-play:hover{color:#fff;filter:brightness(1.08);}
/* one-line provenance badge under the Glimpse: flowing gradient border, shimmering name, live dot */
.gx-fine{margin:var(--space-6) 0 0;display:flex;justify-content:center;}
.gx-fine-in{position:relative;display:inline-flex;align-items:center;gap:.65rem;max-width:100%;overflow:hidden;
padding:.62rem 1.25rem .62rem 1rem;border-radius:var(--radius-full);border:1.5px solid transparent;
background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,
linear-gradient(90deg,#8C52FF,#3D53E0,#03C9BE,#F95BF6,#8C52FF) border-box;
background-size:100% 100%,300% 100%;animation:gxFlow 7s linear infinite;
box-shadow:0 14px 34px -18px color-mix(in srgb, var(--color-primary) 55%, transparent);}
.gx-fine-in::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
animation:gxGlint 4.8s ease-in-out infinite;}
[data-theme="dark"] .gx-fine-in::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);}
.gx-fine-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#03C9BE;
box-shadow:0 0 0 0 rgba(3,201,190,.55);animation:gxPing 2.2s ease-out infinite;}
.gx-fine-t{white-space:nowrap;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
font-size:clamp(.86rem,3.6vw,1rem);color:var(--color-text);}
.gx-fine-t b{font-weight:800;background:linear-gradient(90deg,#6D3BE8,#3D53E0,#03A99F,#C93BC6,#6D3BE8);background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:gxFlowT 7s linear infinite;}
[data-theme="dark"] .gx-fine-t b{background-image:linear-gradient(90deg,#B79CFF,#8C9BFF,#03F7EB,#F95BF6,#B79CFF);}
.gx-fine-s{display:none;}
@media (max-width:560px){ .gx-fine-l{display:none;} .gx-fine-s{display:inline;} }
@media (max-width:360px){ .gx-fine-in{gap:.45rem;padding:.55rem .8rem .55rem .7rem;} .gx-fine-t{font-size:.74rem;} }
@keyframes gxFlow{to{background-position:0 0,300% 0;}}
@keyframes gxFlowT{to{background-position:300% 0;}}
@keyframes gxGlint{0%,55%{left:-40%;}85%,100%{left:120%;}}
@keyframes gxPing{0%{box-shadow:0 0 0 0 rgba(3,201,190,.55);}70%,100%{box-shadow:0 0 0 9px rgba(3,201,190,0);}}
/* before the script runs, show the first customised figure alone */
.gx:not(.is-ready) .gx-a,.gx:not(.is-ready) .gx-handle,.gx:not(.is-ready) .gx-tag,.gx:not(.is-ready) .gx-tools,.gx:not(.is-ready) .gx-foot{display:none;}
.gx:not(.is-ready) .gx-clip{clip-path:none;}
@media (max-width:760px){
.gx-cats{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4));
padding:0 var(--space-4) .4rem;scrollbar-width:none;}
.gx-cats::-webkit-scrollbar{display:none;}
.gx-cat{scroll-snap-align:start;}
.gx-bar{padding:.55rem .6rem;}
.gx-crumb{display:none;}
.gx-tools{width:100%;justify-content:space-between;}
.gx-seg button{padding:.36rem .6rem;}
.gx-stage{max-height:none;min-height:220px;}
.gx-tag{top:8px;font-size:.6rem;}
.gx-tag-l{left:8px;} .gx-tag-r{right:8px;}
.gx-knob{width:38px;height:38px;}
.gx-foot{grid-template-columns:1fr;}
.gx-nav{justify-content:center;order:-1;}
.gx-th{width:120px;}
.gx-th-img{height:72px;}
}
@media (max-width:520px){ .gx-ix{padding:.45rem .6rem;} .gx-ix span{display:none;} }
@media (max-width:380px){ .gx-seg button{padding:.34rem .48rem;font-size:.7rem;} }
@media (prefers-reduced-motion:reduce){
.gx-fine-in,.gx-fine-in::after,.gx-fine-dot,.gx-fine-t b{animation:none;}
.gx-strip.is-in .gx-th{animation:none;}
.gx-stage.is-loading::after{animation:none;}
.gx.is-playing .gx-th.is-on .gx-th-bar.is-run{animation:none;}
}
/* =====================================================================
DATAVIZ PRO - DATA PREVIEW "DATA ROOM"
An animated walk through the real Data Preview workspace, played on
the app's own sample data (RCBD trial, HapMap panel). The window is a
faithful schematic of the app layout: data sources and quick checks on
the left, the data view in the middle, the nine action panels on the
right. JS: assets/js/dataroom.js Data: