/* =========================================================
   VYRO — shared design system
   Used by index.html and every /audience page.
   One source of truth: edit here, it applies everywhere.
========================================================= */

:root{
    --bg:#F4F5F6;
    --ink:#0A0A0B;
    --ink-soft:rgba(10,10,11,.6);
    --hair:rgba(10,10,11,.14);

    --blue:#1738FF;
    --green:#0FA968;
    --gold:#FFC300;
    --red:#FF3B30;

    --gold-real:#D4A853;

    --grad-dark: radial-gradient(130% 110% at 18% 0%, rgba(255,255,255,.07), transparent 45%), linear-gradient(160deg, #1A1A1F 0%, #0A0A0B 55%, #000000 100%);
    --grad-blue: radial-gradient(130% 110% at 15% 8%, rgba(255,255,255,.4), transparent 42%), linear-gradient(120deg, #BFD6FF 0%, #6E8CFF 22%, #1738FF 50%, #5A3FE0 76%, #C589FF 100%);
    --grad-green: radial-gradient(130% 110% at 15% 8%, rgba(255,255,255,.4), transparent 42%), linear-gradient(120deg, #D6FFEF 0%, #6EE7B7 22%, #0FA968 50%, #0E8F8C 76%, #9BF0E0 100%);
    --grad-gold: radial-gradient(130% 110% at 15% 8%, rgba(255,255,255,.45), transparent 42%), linear-gradient(120deg, #FFF6DA 0%, #FFE066 22%, #FFC300 50%, #FF8F1F 76%, #FFD9A0 100%);
    --grad-red: radial-gradient(130% 110% at 15% 8%, rgba(255,255,255,.38), transparent 42%), linear-gradient(120deg, #FFDCD2 0%, #FF8A73 22%, #FF3B30 50%, #E0245E 76%, #FF9BC7 100%);

    --ease: cubic-bezier(.2,.9,.25,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{
    width:100%;min-height:100%;
    font-family:"Inter",Arial,Helvetica,sans-serif;
    background:var(--bg);
    overflow-x:clip;
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:var(--red);color:#fff;}
a{color:inherit;text-decoration:none;}

.display{font-family:"Anton",Impact,"Arial Narrow",sans-serif;text-transform:uppercase;}

/* GRAIN */
.grain{
    position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size:180px;
}

/* CURSOR — crosshair, broadcast-graphic feel */
.cursor{
    position:fixed;top:0;left:0;width:18px;height:18px;pointer-events:none;z-index:9999;
    transform:translate3d(-50%,-50%,0);mix-blend-mode:difference;will-change:transform;
}
.cursor::before,.cursor::after{content:"";position:absolute;background:#fff;}
.cursor::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-1px);}
.cursor::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-1px);}
.cursor.hover{width:34px;height:34px;}
@media (hover:none),(max-width:900px){.cursor{display:none;}}

/* =========================================================
   NAV — persistent across every page
========================================================= */
.site-nav{
    position:fixed;top:0;left:0;width:100%;z-index:9600;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 30px;pointer-events:none;
}
.site-nav *{pointer-events:auto;}
.site-nav-brand{
    font-family:"Anton",sans-serif;font-size:16px;letter-spacing:.08em;color:#fff;
    mix-blend-mode:difference;
}
.site-nav-burger{
    width:38px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:none;border:none;cursor:pointer;mix-blend-mode:difference;
}
.site-nav-burger span{width:20px;height:2px;background:#fff;transition:transform .35s var(--ease),opacity .25s;}
.site-nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav-burger.open span:nth-child(2){opacity:0;}
.site-nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.site-drawer-overlay{
    position:fixed;inset:0;z-index:9550;background:rgba(0,0,0,0);pointer-events:none;
    transition:background .4s var(--ease);
}
.site-drawer-overlay.open{background:rgba(0,0,0,.4);pointer-events:auto;}

.site-drawer{
    position:fixed;top:0;right:0;height:100%;width:min(400px,86vw);z-index:9601;
    background:#0A0A0B;color:#fff;padding:100px 40px 40px;
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .5s var(--ease);
    overflow-y:auto;
}
.site-drawer.open{transform:translateX(0);}
.site-drawer-label{font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:22px;}
.site-drawer-link{
    display:flex;align-items:center;justify-content:space-between;
    font-family:"Anton",sans-serif;font-size:26px;text-transform:uppercase;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.65);
    transition:color .3s,padding-left .3s var(--ease);
}
.site-drawer-link:hover{color:#fff;padding-left:8px;}
.site-drawer-link.active{color:var(--acc,#fff);}
.site-drawer-link .n{font-family:"Inter",sans-serif;font-size:11px;font-weight:700;color:rgba(255,255,255,.35);}
.site-drawer-cta{
    margin-top:auto;padding-top:24px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-real);
}

/* =========================================================
   REVEAL — generic scroll-in utility (fade + rise)
========================================================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1.in{transition-delay:.08s;}
.reveal-d2.in{transition-delay:.16s;}
.reveal-d3.in{transition-delay:.24s;}

/* =========================================================
   PAGE HERO — used by every /audience page.
   Full-bleed pearlescent band in the audience's accent color,
   same treatment as a story scene — not a dark-with-glow hero.
========================================================= */
.page-hero{
    position:relative;padding:calc(9vw + 70px) 7vw 7vw;color:#fff;overflow:hidden;text-align:center;
    background:var(--acc-grad,var(--grad-red));
}
.page-hero::after{
    content:"";position:absolute;inset:-25%;pointer-events:none;
    background:radial-gradient(45% 35% at 30% 20%, rgba(255,255,255,.24), transparent 60%);
    mix-blend-mode:overlay;animation:pageHeroSheen 9s ease-in-out infinite;
}
@keyframes pageHeroSheen{0%{transform:translate(0,0);}50%{transform:translate(14%,10%);}100%{transform:translate(0,0);}}
.page-hero-inner{position:relative;max-width:820px;margin:0 auto;}
.page-hero-eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:11px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.85);
}
.page-hero-eyebrow::before,.page-hero-eyebrow::after{content:"";width:22px;height:2px;background:currentColor;opacity:.6;}
.page-hero h1{
    margin-top:24px;font-family:"Anton",sans-serif;text-transform:uppercase;
    font-size:clamp(42px,8.5vw,110px);line-height:.94;letter-spacing:-.01em;color:#fff;
    text-wrap:pretty;
}
.page-hero-sub{
    margin:24px auto 0;max-width:560px;font-size:clamp(14.5px,1.25vw,17px);line-height:1.7;
    font-weight:500;color:rgba(255,255,255,.85);
}

/* MARQUEE — same bottom-ticker language as the homepage, run inline in the page flow */
.page-marquee{
    position:relative;padding:16px 0;background:#0A0A0B;overflow:hidden;
    border-top:1px solid rgba(255,255,255,.08);
}
.page-marquee-track{display:flex;white-space:nowrap;animation:pmScroll 26s linear infinite;width:max-content;}
.page-marquee-track span{
    display:inline-flex;align-items:center;gap:10px;
    font-family:"Anton",sans-serif;font-size:12px;letter-spacing:.08em;color:#fff;
    padding:0 22px;text-transform:uppercase;
}
.page-marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc,var(--red));}
@keyframes pmScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* STAT BAND — jersey-numeral stats, dark canvas, colored numerals */
.stat-band{background:#0A0A0B;padding:7vw 7vw;border-bottom:3px solid var(--acc,var(--red));}
.stat-band-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.08);}
@media (max-width:800px){.stat-band-grid{grid-template-columns:1fr;}}
.stat-band-cell{background:#111114;padding:40px 26px;text-align:center;}
.stat-band-num{
    font-family:"Anton",sans-serif;font-size:clamp(46px,5.6vw,72px);line-height:1;color:var(--acc,#fff);
}
.stat-band-label{margin-top:14px;font-size:13.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.6);max-width:240px;margin-left:auto;margin-right:auto;}

/* EDGE SECTION — the exact diagonal split-panel language from the story's
   company scenes: big ghost numeral on a clipped color wedge + copy beside it. */
.edge{display:flex;background:#0A0A0B;min-height:340px;}
.edge.reverse{flex-direction:row-reverse;}
.edge-side{
    flex:0 0 30%;position:relative;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.03);
    clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
}
.edge.reverse .edge-side{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);}
.edge-num{font-family:"Anton",sans-serif;font-size:clamp(70px,11vw,150px);line-height:1;color:var(--acc,#fff);opacity:.9;}
.edge-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,70px);}
.edge.reverse .edge-main{text-align:right;align-items:flex-end;}
.edge-title{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(26px,3.6vw,44px);line-height:1.08;color:#fff;text-wrap:pretty;}
.edge-text{margin-top:16px;max-width:600px;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.75;color:rgba(255,255,255,.62);}
@media (max-width:800px){
    .edge{flex-direction:column;}
    .edge.reverse{flex-direction:column;}
    .edge-side{clip-path:none;flex:0 0 140px;}
    .edge.reverse .edge-side{clip-path:none;}
    .edge-num{font-size:clamp(56px,20vw,90px);}
    .edge-main,.edge.reverse .edge-main{text-align:center;align-items:center;padding:28px 8vw;}
}

/* STATEMENT BAND — full-bleed accent color, one bold line */
.statement-band{
    padding:6vw 7vw;text-align:center;
    background-color:var(--acc,#FF3B30);
    background-image:
        radial-gradient(130% 130% at 15% 10%, rgba(255,255,255,.35), transparent 42%),
        linear-gradient(120deg, color-mix(in srgb, var(--acc,#FF3B30) 55%, #fff) 0%, var(--acc,#FF3B30) 55%, color-mix(in srgb, var(--acc,#FF3B30) 65%, #000) 100%);
}
.statement-band p{
    font-family:"Anton",sans-serif;text-transform:uppercase;color:#fff;
    font-size:clamp(24px,4.4vw,54px);line-height:1.15;max-width:1000px;margin:0 auto;
    text-wrap:pretty;
}

/* PULL QUOTE — diagonal color tab instead of a plain centered italic block */
.quote-band{background:#111114;padding:5.5vw 7vw;display:flex;justify-content:center;}
.quote-inner{position:relative;max-width:760px;padding-left:34px;}
.quote-inner::before{
    content:"";position:absolute;left:0;top:4px;bottom:4px;width:6px;background:var(--acc,var(--red));
    clip-path:polygon(0 0,100% 10%,100% 90%,0 100%);
}
.quote-inner p{
    font-size:clamp(19px,2.4vw,29px);line-height:1.5;font-weight:600;color:rgba(255,255,255,.9);
}

/* FAQ — numbered rows with a colored accent bar, matching the roster-tab language */
.faq-wrap{background:#0A0A0B;padding:7vw;}
.faq-eyebrow{text-align:center;font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.faq-title{
    text-align:center;margin-top:14px;font-family:"Anton",sans-serif;text-transform:uppercase;
    font-size:clamp(28px,4.4vw,48px);color:#fff;text-wrap:pretty;
}
.faq-list{max-width:900px;margin:50px auto 0;border-top:3px solid rgba(255,255,255,.1);}
.faq-item{position:relative;border-bottom:3px solid rgba(255,255,255,.1);padding-left:18px;}
.faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc,var(--red));transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);}
.faq-item.open::before{transform:scaleY(1);}
.faq-q{
    width:100%;display:flex;align-items:baseline;gap:20px;
    background:none;border:none;text-align:left;cursor:pointer;padding:22px 4px;
}
.faq-q .fn{font-family:"Anton",sans-serif;font-size:13px;color:var(--acc,var(--red));flex:0 0 auto;}
.faq-q span:not(.fn):not(.faq-q-icon){
    font-family:"Inter",sans-serif;font-size:clamp(15px,1.4vw,19px);font-weight:600;color:#fff;flex:1;
}
.faq-q-icon{flex:0 0 auto;width:18px;height:18px;position:relative;margin-left:auto;}
.faq-q-icon::before,.faq-q-icon::after{content:"";position:absolute;background:rgba(255,255,255,.6);transition:transform .3s var(--ease);}
.faq-q-icon::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-1px);}
.faq-q-icon::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-1px);}
.faq-item.open .faq-q-icon::after{transform:translateX(-1px) rotate(90deg) scaleY(0);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a-inner{overflow:hidden;}
.faq-a p{padding:0 4px 22px 42px;max-width:720px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.6);}
@media (max-width:600px){.faq-a p{padding-left:4px;}}

/* MODULES — diagonal color-slice cards, same recipe as the gateway grid */
.modules-wrap{background:#111114;padding:7vw;}
.modules-eyebrow{text-align:center;font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.modules-title{
    text-align:center;margin-top:14px;font-family:"Anton",sans-serif;text-transform:uppercase;
    font-size:clamp(28px,4.4vw,48px);color:#fff;text-wrap:pretty;
}
.modules-grid{max-width:1100px;margin:50px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.08);}
@media (max-width:800px){.modules-grid{grid-template-columns:1fr;}}
.module-card{position:relative;background:#0A0A0B;overflow:hidden;}
.module-card-slice{height:8px;background:var(--acc,#fff);}
.module-card-body{padding:28px 24px 32px;}
.module-card h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:19px;color:#fff;}
.module-card p{margin-top:12px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.6);}

/* POWERED BY */
.powered{background:#0A0A0B;padding:5vw 7vw;text-align:center;}
.powered h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(18px,2vw,24px);color:#fff;}
.powered p{margin-top:12px;max-width:480px;margin-left:auto;margin-right:auto;font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);}
.powered a{margin-top:16px;display:inline-block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--red);}

/* =========================================================
   CONTACT — "Move with clarity."
   Full-bleed pearlescent gold band (our own recipe, same family
   as the story's blue/green/gold/red bands) instead of a
   dark-canvas-with-radial-glow treatment.
========================================================= */
.contact{position:relative;background:#0A0A0B;color:#fff;overflow:hidden;}
.contact-band{
    padding:9vw 7vw 6vw;text-align:center;
    background-color:var(--gold-real);
    background-image:
        radial-gradient(130% 130% at 15% 10%, rgba(255,255,255,.4), transparent 42%),
        linear-gradient(120deg, #F3DFA8 0%, var(--gold-real) 55%, #8B6F3A 100%);
}
.contact h2{
    font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(32px,5.6vw,58px);line-height:1;color:#fff;
    text-wrap:pretty;
}
.contact-sub{margin-top:16px;font-size:clamp(14px,1.1vw,16px);color:rgba(255,255,255,.85);max-width:520px;margin-left:auto;margin-right:auto;}

.contact-form{max-width:640px;margin:0 auto;padding:6vw 7vw 8vw;text-align:left;display:grid;gap:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px;}
.field input,.field select,.field textarea{
    width:100%;background:#111114;border:2px solid rgba(255,255,255,.14);
    color:#fff;font-family:"Inter",sans-serif;font-size:15px;font-weight:500;padding:12px 14px;
    transition:border-color .3s;
}
.field select{background:#111114;}
.field select option{background:#111114;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-real);}
.field textarea{resize:vertical;min-height:56px;}
.field-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.contact-submit-wrap{margin-top:10px;display:flex;justify-content:center;}
.contact-submit{
    position:relative;padding:18px 44px;border:none;cursor:pointer;overflow:hidden;
    font-family:"Anton",sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
    background:#111114;
}
.contact-submit-fill{position:absolute;inset:0;background:linear-gradient(120deg,#F3DFA8,var(--gold-real) 60%,#8B6F3A);transform:translateX(-101%);transition:transform .4s var(--ease);}
.contact-submit:hover .contact-submit-fill{transform:translateX(0);}
.contact-submit span{position:relative;z-index:1;transition:color .3s;}
.contact-submit:hover span{color:#0A0A0B;}

/* EXTERNAL CTA — "visit the real site" button, used on company pages.
   Colored by the company's own accent at rest (not just on hover) with a
   matching glow, so it actually stands out instead of reading as a plain
   dark button until someone happens to mouse over it. */
.ext-cta-wrap{background:#0A0A0B;padding:0 7vw 7vw;display:flex;justify-content:center;}
.ext-cta{
    position:relative;display:inline-flex;align-items:center;gap:16px;
    padding:20px 44px;color:#fff;
    font-family:"Anton",sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
    background:var(--acc-grad, var(--acc, var(--red)));
    box-shadow:0 12px 40px -10px var(--acc, rgba(0,0,0,.5));
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ext-cta:hover{transform:translateY(-3px);box-shadow:0 18px 50px -8px var(--acc, rgba(0,0,0,.6));}
.ext-cta span,.ext-cta svg{transition:transform .35s var(--ease);}
.ext-cta:hover svg{transform:translate(4px,-4px);}

footer{
    padding:36px 7vw 28px;border-top:1px solid rgba(255,255,255,.1);
    background:#0A0A0B;color:rgba(255,255,255,.5);
}
.footer-links{
    display:flex;flex-wrap:wrap;gap:10px 24px;padding-bottom:22px;margin-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-links a{
    font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.5);transition:color .3s;
}
.footer-links a:hover{color:#fff;}
.footer-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
    font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}