:root{--bg:#050505;--panel:rgba(19,19,23,.64);--panel2:rgba(8,8,12,.76);--gold:#f5b642;--gold2:#ffd36d;--text:#f7f4ed;--muted:#a9a7ad;--line:rgba(255,255,255,.10);--cyan:#55e6d3;--blue:#59a7ff;--violet:#c77dff;--danger:#ff6d79;--shadow:0 24px 80px rgba(0,0,0,.45);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(1200px 700px at 75% -10%,rgba(245,182,66,.14),transparent 55%),radial-gradient(800px 600px at -10% 20%,rgba(89,167,255,.10),transparent 55%),#050505;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.aurora{position:fixed;width:52vw;height:52vw;filter:blur(90px);border-radius:50%;opacity:.08;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}.a1{background:#f0a61f;right:-18vw;top:-20vw}.a2{background:#6f4cff;left:-25vw;top:35vh;animation-delay:-6s}.a3{background:#20d7c5;right:-25vw;top:68vh;animation-delay:-12s}@keyframes drift{to{transform:translate3d(4vw,5vh,0) scale(1.12)}}
.container{width:min(1180px,calc(100% - 42px));margin:auto}.glass{background:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px rgba(255,255,255,.08),var(--shadow);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%)}
nav{position:sticky;top:0;z-index:50;padding:14px 0;background:linear-gradient(180deg,rgba(5,5,5,.94),rgba(5,5,5,.62));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.05)}.nav-inner{display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:12px;min-width:210px}.brand img{height:34px;max-width:155px;object-fit:contain}.brand span{font-size:11px;letter-spacing:.18em;color:#c9c6c0}.links{display:flex;gap:6px;margin-left:auto;align-items:center}.links a{font-size:13px;color:#c8c6ca;padding:10px 12px;border-radius:999px}.links a:hover{background:rgba(255,255,255,.06);color:white}.cta{border:1px solid rgba(245,182,66,.45)!important;color:var(--gold2)!important;background:rgba(245,182,66,.07)}.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:12px;padding:9px 12px}
.hero{padding:100px 0 72px;position:relative}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);font-weight:700}.hero h1{font-size:clamp(54px,7.6vw,108px);line-height:.92;letter-spacing:-.055em;margin:18px 0 22px;max-width:980px}.hero h1 .gold{background:linear-gradient(110deg,#fff1b8,#f8b63f 48%,#fff0b4);-webkit-background-clip:text;color:transparent}.hero p{font-size:clamp(18px,2vw,25px);line-height:1.55;color:#c4c1c7;max-width:820px;margin:0 0 34px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{padding:13px 19px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid var(--line);transition:.25s}.btn.primary{background:linear-gradient(120deg,#c47c0d,#ffc857);color:#090704;border-color:rgba(255,220,133,.65);box-shadow:0 12px 40px rgba(245,182,66,.2)}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.35)}
.hero-grid{margin-top:64px;display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.hero-card{border-radius:28px;padding:28px;min-height:250px;position:relative;overflow:hidden}.hero-card:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at var(--mx,60%) var(--my,20%),rgba(255,209,103,.16),transparent 28%);pointer-events:none}.orbit{position:absolute;width:280px;height:280px;border:1px solid rgba(255,210,111,.2);border-radius:50%;right:-80px;bottom:-110px}.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid rgba(85,230,211,.16);border-radius:50%;inset:35px}.orbit:after{inset:75px;border-color:rgba(199,125,255,.18)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 0}.kpi{border-radius:18px;padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.035)}.kpi strong{display:block;font-size:28px;color:#fff}.kpi span{display:block;color:#a9a7ad;font-size:12px;margin-top:5px}
.section{padding:82px 0}.section.tight{padding:50px 0}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:30px}.section-head h2{font-size:clamp(36px,5vw,66px);line-height:1;margin:8px 0 0;letter-spacing:-.04em}.section-head p{max-width:520px;color:#a9a7ad;line-height:1.7}.pill{display:inline-flex;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ccc;background:rgba(255,255,255,.035)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border-radius:24px;padding:24px;min-height:240px;position:relative;overflow:hidden;transition:.35s ease}.card:hover{transform:translateY(-5px);border-color:rgba(255,211,109,.28)}.card .icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);font-weight:900;color:var(--accent,var(--gold))}.card h3{font-size:23px;margin:24px 0 7px}.card h4{font-size:12px;color:var(--accent,var(--gold2));letter-spacing:.13em;text-transform:uppercase;margin:0 0 13px}.card p{color:#a8a6ab;font-size:14px;line-height:1.65;margin:0}.card .arrow{position:absolute;right:20px;bottom:18px;font-size:20px;color:#68676c}.card:hover .arrow{color:var(--accent,var(--gold2));transform:translateX(3px)}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pillar{border-radius:26px;padding:28px;min-height:370px;position:relative;overflow:hidden}.pillar h3{font-size:32px;margin:18px 0 12px}.pillar p{color:#b1aeb4;line-height:1.65}.pillar .line{height:2px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);margin:26px 0}.pillar ul{list-style:none;padding:0;margin:0}.pillar li{padding:9px 0;color:#d5d2d6;border-bottom:1px solid rgba(255,255,255,.055);font-size:14px}
.flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.flow .node{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:13px}.flow .sep{color:#5f6068}.banner{border-radius:30px;padding:34px;display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center}.banner h3{font-size:38px;margin:0 0 12px}.banner p{color:#b1aeb4;line-height:1.7}.brandmark{display:grid;place-items:center}.brandmark img{width:min(280px,80%);filter:drop-shadow(0 24px 45px rgba(0,0,0,.5))}
.product-hero{padding:88px 0 54px}.product-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}.product-title{font-size:clamp(56px,8vw,105px);line-height:.95;margin:12px 0 18px;letter-spacing:-.055em}.product-sub{font-size:21px;color:var(--accent,var(--gold2));font-weight:700}.product-lead{font-size:18px;color:#b8b5bc;line-height:1.7;max-width:760px}.product-art{border-radius:32px;min-height:380px;position:relative;display:grid;place-items:center;overflow:hidden}.sigil{width:210px;height:210px;border-radius:44px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025));display:grid;place-items:center;box-shadow:inset 0 1px rgba(255,255,255,.12),0 40px 80px rgba(0,0,0,.45);transform:rotate(-5deg)}.sigil span{font-size:74px;font-weight:900;color:var(--accent,var(--gold2));text-shadow:0 0 40px color-mix(in srgb,var(--accent,var(--gold2)) 45%,transparent)}
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.content-box{border-radius:22px;padding:24px}.content-box h3{margin:0 0 12px;font-size:21px}.content-box p,.content-box li{color:#aaa8ae;line-height:1.7;font-size:14px}.content-box ul{padding-left:20px}.wide{grid-column:1/-1}.quote{font-size:30px;line-height:1.35;color:#f3ede0;border-left:2px solid var(--gold);padding-left:22px;margin:0}
.founder{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;align-items:stretch}.portrait{border-radius:30px;overflow:hidden;min-height:510px}.portrait img{width:100%;height:100%;object-fit:cover}.founder-copy{border-radius:30px;padding:34px}.founder-copy h2{font-size:52px;margin:8px 0 8px}.founder-copy p{color:#b3b0b5;line-height:1.75}.timeline{display:grid;gap:12px;margin-top:22px}.timeline div{padding:14px 16px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
footer{padding:60px 0 34px;border-top:1px solid rgba(255,255,255,.07);margin-top:70px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:28px}.footer-grid h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#ddd}.footer-grid p,.footer-grid a{color:#8f8d93;line-height:1.8;font-size:13px;display:block}.legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);color:#66666b;font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media(max-width:950px){.links{display:none;position:absolute;top:70px;left:20px;right:20px;flex-direction:column;padding:18px;border-radius:20px;background:rgba(10,10,12,.95);border:1px solid var(--line)}.links.open{display:flex}.menu-btn{display:block}.hero-grid,.product-hero .grid,.banner,.founder{grid-template-columns:1fr}.cards,.triad{grid-template-columns:1fr 1fr}.kpi-row{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.brand{min-width:0}}
@media(max-width:640px){.container{width:min(100% - 26px,1180px)}.hero{padding-top:70px}.cards,.triad,.content-grid{grid-template-columns:1fr}.kpi-row{grid-template-columns:1fr 1fr}.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:18px}.product-art{min-height:280px}.founder-copy h2{font-size:40px}}

/* =========================================================
   TRENDEST / AYA CORPORATE V2 FOUNDATION
   Progressive enhancement + premium glass refinement
   ========================================================= */

/*
 * Content is visible by default.
 * JS adds .motion-ready only after confirming that the
 * browser can safely run the reveal system.
 */
.reveal{
  opacity:1;
  transform:none;
}

/* Only JS-certified motion mode may initially conceal items. */
html.motion-ready .reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}

html.motion-ready .reveal.show{
  opacity:1;
  transform:none;
}

/* Never conceal content for reduced-motion users. */
@media (prefers-reduced-motion:reduce){
  html.motion-ready .reveal,
  html.motion-ready .reveal.show{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  .aurora{
    animation:none !important;
  }

  .card,
  .btn{
    transition:none !important;
  }
}

/* ---------------------------------------------------------
   V2 glass material
   --------------------------------------------------------- */

.glass{
  position:relative;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105) 0%,
      rgba(255,255,255,.045) 38%,
      rgba(255,255,255,.018) 100%
    );
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 24px 70px rgba(0,0,0,.30),
    var(--shadow);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}

.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(
      circle at var(--mx,72%) var(--my,12%),
      rgba(255,222,148,.10),
      transparent 27%
    );
  opacity:.78;
  mix-blend-mode:screen;
}

/*
 * Keep actual card/content descendants above the optical
 * material layer.
 */
.glass > *{
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------
   V2 product artwork
   --------------------------------------------------------- */

.product-art{
  isolation:isolate;
  background:
    radial-gradient(
      circle at 72% 24%,
      color-mix(
        in srgb,
        var(--accent,var(--gold2)) 18%,
        transparent
      ),
      transparent 32%
    ),
    radial-gradient(
      circle at 22% 78%,
      rgba(90,215,202,.075),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.018)
    );
}

.product-art::before{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  border-radius:50%;
  border:1px solid
    color-mix(
      in srgb,
      var(--accent,var(--gold2)) 28%,
      transparent
    );
  box-shadow:
    0 0 80px
      color-mix(
        in srgb,
        var(--accent,var(--gold2)) 12%,
        transparent
      ),
    inset 0 0 60px rgba(255,255,255,.018);
  transform:rotate(-14deg);
  z-index:0;
}

.product-art::after{
  content:"";
  position:absolute;
  width:420px;
  height:160px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  transform:rotate(24deg);
  z-index:0;
}

.sigil{
  position:relative;
  z-index:2;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.155),
      rgba(255,255,255,.028)
    );
  border:1px solid
    color-mix(
      in srgb,
      var(--accent,var(--gold2)) 30%,
      rgba(255,255,255,.14)
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.17),
    0 35px 90px rgba(0,0,0,.52),
    0 0 65px
      color-mix(
        in srgb,
        var(--accent,var(--gold2)) 11%,
        transparent
      );
}

/* ---------------------------------------------------------
   V2 Founder presentation
   --------------------------------------------------------- */

.founder{
  gap:34px;
}

.portrait{
  position:relative;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.42);
  background:#0c0c0d;
}

.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(0,0,0,.18)
    );
}

.founder-copy{
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(245,182,66,.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.025)
    );
}

.founder-copy p{
  color:#c3c0c6;
  font-size:15px;
  line-height:1.82;
}

.timeline div{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
  border-color:rgba(255,255,255,.09);
}

/* ---------------------------------------------------------
   V2 cards / navigation micro-polish
   --------------------------------------------------------- */

.card{
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    0 18px 50px rgba(0,0,0,.20);
}

.card:hover{
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 26px 70px rgba(0,0,0,.34);
}

nav{
  box-shadow:0 10px 40px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------
   V2 responsive refinement
   --------------------------------------------------------- */

@media(max-width:950px){
  .product-art{
    min-height:330px;
  }

  .founder{
    gap:22px;
  }

  .portrait{
    min-height:440px;
    max-height:680px;
  }
}

@media(max-width:640px){
  .product-title{
    font-size:clamp(50px,16vw,72px);
  }

  .product-art{
    min-height:270px;
    border-radius:26px;
  }

  .product-art::before{
    width:230px;
    height:230px;
  }

  .product-art::after{
    width:300px;
    height:120px;
  }

  .sigil{
    width:165px;
    height:165px;
    border-radius:36px;
  }

  .sigil span{
    font-size:58px;
  }

  .portrait{
    min-height:390px;
  }

  .founder-copy{
    padding:26px 22px;
  }

  .founder-copy h2{
    font-size:40px;
  }

  .founder-copy p{
    font-size:14px;
    line-height:1.78;
  }
}

/* ==========================================================
   CORPORATE V2 R13 - differentiated product + pillar system
   Shared by AYA MEDIA and TRENDEST MEDIA.
   ========================================================== */

body[data-pillar="operations"]{
  --pillar:#55E6D3;
  --pillar-rgb:85,230,211;
}
body[data-pillar="technology"]{
  --pillar:#59A7FF;
  --pillar-rgb:89,167,255;
}
body[data-pillar="monetisation"]{
  --pillar:#C77DFF;
  --pillar-rgb:199,125,255;
}

body[data-pillar] .flow{
  position:relative;
  padding:18px;
  border:1px solid rgba(var(--pillar-rgb),.18);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(var(--pillar-rgb),.055),rgba(255,255,255,.018));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 60px rgba(0,0,0,.22);
}

body[data-pillar] .flow .node{
  position:relative;
  overflow:hidden;
  border-color:rgba(var(--pillar-rgb),.22);
  background:linear-gradient(145deg,rgba(var(--pillar-rgb),.105),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.07);
}

body[data-pillar] .flow .node::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 20%,rgba(var(--pillar-rgb),.14),transparent 80%);
  transform:translateX(-120%);
  animation:pipelineSweep 7s ease-in-out infinite;
  pointer-events:none;
}

body[data-pillar] .flow .sep{
  color:rgba(var(--pillar-rgb),.62);
  text-shadow:0 0 18px rgba(var(--pillar-rgb),.28);
}

@keyframes pipelineSweep{
  0%,58%,100%{transform:translateX(-120%)}
  76%{transform:translateX(120%)}
}

body[data-pillar="operations"] .flow{border-radius:18px}
body[data-pillar="operations"] .flow .node{border-radius:10px}

body[data-pillar="technology"] .flow{
  background:radial-gradient(circle at 50% -40%,rgba(89,167,255,.14),transparent 50%),rgba(255,255,255,.018);
}
body[data-pillar="technology"] .flow .node{border-radius:999px}

body[data-pillar="monetisation"] .flow{
  background:linear-gradient(120deg,rgba(199,125,255,.08),rgba(255,200,87,.025));
}
body[data-pillar="monetisation"] .flow .node{
  border-radius:16px;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 28px rgba(199,125,255,.045);
}

body[data-product] .product-art{
  isolation:isolate;
  perspective:900px;
  background:
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
}

body[data-product] .product-art::before{opacity:.9}
body[data-product] .product-art::after{opacity:.68}

body[data-product] .sigil{
  z-index:4;
  width:176px;
  height:176px;
  border-radius:38px;
  transform:rotate(-4deg) translateZ(24px);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body[data-product] .sigil span{font-size:62px}

.product-viz{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}

.product-viz .pv-ring,
.product-viz .pv-ring::before,
.product-viz .pv-ring::after{
  position:absolute;
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-radius:50%;
}

.product-viz .pv-ring{
  width:290px;
  height:290px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  animation:pvRotate 22s linear infinite;
}

.product-viz .pv-ring::before,
.product-viz .pv-ring::after{
  content:"";
  inset:34px;
}

.product-viz .pv-ring::after{
  inset:74px;
  border-style:dashed;
  opacity:.72;
}

.product-viz .pv-orbit{
  position:absolute;
  width:8px;
  height:8px;
  left:calc(50% - 4px);
  top:calc(50% - 4px);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 58%,transparent);
  animation:pvOrbit 8s linear infinite;
}

.product-viz .pv-grid{
  position:absolute;
  inset:15%;
  opacity:.28;
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle,#000 18%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 72%);
  transform:perspective(520px) rotateX(64deg) scale(1.15);
}

.product-viz .pv-pulse{
  position:absolute;
  width:330px;
  height:330px;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
  animation:pvPulse 5s ease-out infinite;
}

body[data-pillar="operations"] .product-viz .pv-ring{
  border-radius:26%;
  transform:translate(-50%,-50%) rotate(45deg);
  animation:pvOps 16s ease-in-out infinite;
}
body[data-pillar="operations"] .product-viz .pv-ring::before{border-radius:18%}
body[data-pillar="operations"] .product-viz .pv-ring::after{border-radius:12%}
body[data-pillar="operations"] .product-viz .pv-grid{opacity:.42}

body[data-pillar="technology"] .product-viz .pv-ring{
  box-shadow:0 0 60px rgba(89,167,255,.055),inset 0 0 50px rgba(89,167,255,.035);
}

body[data-pillar="monetisation"] .product-viz .pv-ring{
  width:310px;
  height:220px;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-14deg);
  animation:pvMarket 18s ease-in-out infinite;
}
body[data-pillar="monetisation"] .product-viz .pv-ring::before{inset:28px 48px}
body[data-pillar="monetisation"] .product-viz .pv-ring::after{inset:58px 90px}

body[data-product*="guard"] .product-viz .pv-ring{
  border-width:2px;
  border-radius:28%;
}
body[data-product*="guard"] .sigil{
  box-shadow:
    inset 0 1px rgba(255,255,255,.14),
    0 0 0 12px color-mix(in srgb,var(--accent) 5%,transparent),
    0 40px 80px rgba(0,0,0,.45);
}

body[data-product*="stream"] .product-viz .pv-grid,
body[data-product*="distribution"] .product-viz .pv-grid{
  transform:perspective(520px) rotateX(68deg) rotateZ(-8deg) scale(1.3);
}

body[data-product*="signal"] .product-viz .pv-pulse,
body[data-product*="epg"] .product-viz .pv-pulse{
  animation-duration:3.6s;
}

body[data-product*="serve"] .product-viz .pv-orbit,
body[data-product*="xchange"] .product-viz .pv-orbit,
body[data-product*="demand"] .product-viz .pv-orbit,
body[data-product*="yield"] .product-viz .pv-orbit{
  animation-duration:5.8s;
}

body[data-product*="ledger"] .product-viz .pv-grid,
body[data-product*="measure"] .product-viz .pv-grid,
body[data-product*="analytics"] .product-viz .pv-grid{
  opacity:.52;
}

@keyframes pvRotate{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes pvOrbit{
  from{transform:rotate(0deg) translateX(145px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(145px) rotate(-360deg)}
}

@keyframes pvPulse{
  0%{transform:translate(-50%,-50%) scale(.5);opacity:0}
  18%{opacity:.52}
  72%,100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}
}

@keyframes pvOps{
  0%,100%{transform:translate(-50%,-50%) rotate(42deg) scale(.96)}
  50%{transform:translate(-50%,-50%) rotate(48deg) scale(1.04)}
}

@keyframes pvMarket{
  0%,100%{transform:translate(-50%,-50%) rotate(-14deg) scale(.96)}
  50%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.04)}
}

body[data-pillar] .card{border-color:rgba(var(--pillar-rgb),.105)}

body[data-pillar] .card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(var(--pillar-rgb),.105),transparent 34%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}

body[data-pillar] .card:hover::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .product-viz *,
  body[data-pillar] .flow .node::before{
    animation:none !important;
  }
}

@media(max-width:640px){
  body[data-pillar] .flow{
    padding:13px;
    gap:7px;
  }

  body[data-pillar] .flow .node{
    padding:9px 11px;
    font-size:11px;
  }

  body[data-product] .sigil{
    width:142px;
    height:142px;
    border-radius:31px;
  }

  body[data-product] .sigil span{font-size:50px}

  .product-viz .pv-ring{
    width:235px;
    height:235px;
  }

  .product-viz .pv-pulse{
    width:270px;
    height:270px;
  }

  body[data-pillar="monetisation"] .product-viz .pv-ring{
    width:250px;
    height:180px;
  }
}

/* ==========================================================
   CORPORATE V2 R13C
   Product-semantic hero identity refinement.
   Keeps R13A/R13B layout, copy, navigation and reveal authority.
   ========================================================== */

.product-viz .pv-semantic{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  color:var(--accent);
}

.product-viz .pv-semantic::before,
.product-viz .pv-semantic::after{
  content:"";
  position:absolute;
  box-sizing:border-box;
}

/* playback / AstraVue */
body[data-viz="playback"] .pv-semantic::before{
  width:112px;height:82px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 72%,white 8%);
  border-radius:14px;
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 22%,transparent);
}
body[data-viz="playback"] .pv-semantic::after{
  left:50%;top:50%;
  transform:translate(-38%,-50%);
  width:0;height:0;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  border-left:26px solid var(--accent);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 50%,transparent));
}

/* protection / AstraGuard */
body[data-viz="protection"] .pv-semantic::before{
  width:100px;height:116px;
  left:50%;top:49%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 78%,white 8%);
  clip-path:polygon(50% 0,90% 14%,88% 59%,50% 100%,12% 59%,10% 14%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent);
}
body[data-viz="protection"] .pv-semantic::after{
  width:34px;height:28px;
  left:50%;top:48%;
  transform:translate(-50%,-50%);
  border:2px solid var(--accent);
  border-top:0;
  border-radius:5px;
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 34%,transparent);
}

/* streaming / distribution */
body[data-viz="stream"] .pv-semantic::before{
  width:150px;height:70px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      color-mix(in srgb,var(--accent) 82%,white 6%) 4% 8%,
      transparent 8% 19%,
      color-mix(in srgb,var(--accent) 64%,transparent) 19% 23%,
      transparent 23% 40%,
      color-mix(in srgb,var(--accent) 45%,transparent) 40% 44%,
      transparent 44%);
  mask:linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0);
}
body[data-viz="stream"] .pv-semantic::after{
  width:14px;height:14px;
  left:43%;top:50%;
  border-radius:50%;
  background:var(--accent);
  box-shadow:
    28px 0 0 color-mix(in srgb,var(--accent) 78%,transparent),
    56px 0 0 color-mix(in srgb,var(--accent) 56%,transparent),
    84px 0 0 color-mix(in srgb,var(--accent) 34%,transparent),
    0 0 26px color-mix(in srgb,var(--accent) 55%,transparent);
  transform:translate(-50%,-50%);
}

/* signal */
body[data-viz="signal"] .pv-semantic::before{
  width:4px;height:86px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent);
}
body[data-viz="signal"] .pv-semantic::after{
  width:126px;height:126px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 60%,transparent);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 22px transparent,
    0 0 30px color-mix(in srgb,var(--accent) 12%,transparent);
}

/* policy */
body[data-viz="policy"] .pv-semantic::before{
  width:122px;height:94px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  border-radius:14px;
  background:
    linear-gradient(var(--accent),var(--accent)) 22px 24px/58px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 22px 44px/78px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 22px 64px/48px 2px no-repeat;
}
body[data-viz="policy"] .pv-semantic::after{
  width:16px;height:16px;
  right:calc(50% - 49px);top:calc(50% + 18px);
  border:2px solid var(--accent);
  border-radius:50%;
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 42%,transparent);
}

/* factory / ingest / packaging */
body[data-viz="factory"] .pv-semantic::before{
  width:132px;height:82px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 58%,transparent);
  border-radius:12px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--accent) 24%,transparent) 0 30%,
      transparent 30% 35%,
      color-mix(in srgb,var(--accent) 14%,transparent) 35% 66%,
      transparent 66% 71%,
      color-mix(in srgb,var(--accent) 9%,transparent) 71%);
}
body[data-viz="factory"] .pv-semantic::after{
  width:18px;height:18px;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  border:2px solid var(--accent);
  box-shadow:
    -34px 34px 0 -4px color-mix(in srgb,var(--accent) 45%,transparent),
    34px -34px 0 -4px color-mix(in srgb,var(--accent) 32%,transparent);
}

/* QC */
body[data-viz="qc"] .pv-semantic::before{
  width:104px;height:104px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 54%,transparent);
  border-radius:50%;
}
body[data-viz="qc"] .pv-semantic::after{
  width:58px;height:30px;
  left:50%;top:48%;
  transform:translate(-50%,-50%) rotate(-8deg);
  border-left:5px solid var(--accent);
  border-bottom:5px solid var(--accent);
  border-radius:3px;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 40%,transparent));
}

/* metadata / MAM */
body[data-viz="metadata"] .pv-semantic::before{
  width:126px;height:90px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  border-radius:13px;
  background:
    linear-gradient(var(--accent),var(--accent)) 20px 20px/34px 34px no-repeat,
    linear-gradient(color-mix(in srgb,var(--accent) 58%,transparent),color-mix(in srgb,var(--accent) 58%,transparent)) 66px 23px/38px 2px no-repeat,
    linear-gradient(color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent) 42%,transparent)) 66px 36px/27px 2px no-repeat,
    linear-gradient(color-mix(in srgb,var(--accent) 34%,transparent),color-mix(in srgb,var(--accent) 34%,transparent)) 20px 68px/84px 2px no-repeat;
}
body[data-viz="metadata"] .pv-semantic::after{
  width:8px;height:8px;
  left:calc(50% + 46px);top:calc(50% + 32px);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 48%,transparent);
}

/* EPG / schedule */
body[data-viz="schedule"] .pv-semantic::before{
  width:134px;height:94px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:12px;
  background:
    repeating-linear-gradient(90deg,transparent 0 31px,color-mix(in srgb,var(--accent) 22%,transparent) 31px 32px),
    repeating-linear-gradient(0deg,transparent 0 21px,color-mix(in srgb,var(--accent) 18%,transparent) 21px 22px);
}
body[data-viz="schedule"] .pv-semantic::after{
  width:54px;height:18px;
  left:calc(50% - 28px);top:calc(50% - 18px);
  border-radius:5px;
  background:color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:44px 30px 0 color-mix(in srgb,var(--accent) 24%,transparent);
}

/* playout */
body[data-viz="playout"] .pv-semantic::before{
  width:132px;height:76px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 54%,transparent);
  border-radius:12px;
}
body[data-viz="playout"] .pv-semantic::after{
  left:50%;top:50%;
  transform:translate(-36%,-50%);
  width:0;height:0;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:24px solid var(--accent);
  filter:drop-shadow(-42px 0 0 color-mix(in srgb,var(--accent) 45%,transparent));
}

/* graphics */
body[data-viz="graphics"] .pv-semantic::before{
  width:104px;height:104px;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(12deg);
  border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:18px;
}
body[data-viz="graphics"] .pv-semantic::after{
  width:88px;height:60px;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-10deg);
  border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:15px;
}

/* ad break / SCTE */
body[data-viz="break"] .pv-semantic::before{
  width:150px;height:4px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 30%,transparent) 0 33%,
    transparent 33% 42%,
    var(--accent) 42% 58%,
    transparent 58% 67%,
    color-mix(in srgb,var(--accent) 30%,transparent) 67%);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 26%,transparent);
}
body[data-viz="break"] .pv-semantic::after{
  width:28px;height:42px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid var(--accent);
  border-radius:5px;
}

/* analytics / measurement */
body[data-viz="analytics"] .pv-semantic::before{
  width:126px;height:92px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-left:1px solid color-mix(in srgb,var(--accent) 44%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 44%,transparent);
  background:
    linear-gradient(135deg,transparent 45%,var(--accent) 46% 49%,transparent 50%) 6px 40px/34px 28px no-repeat,
    linear-gradient(155deg,transparent 45%,color-mix(in srgb,var(--accent) 65%,transparent) 46% 49%,transparent 50%) 38px 22px/40px 44px no-repeat,
    linear-gradient(130deg,transparent 45%,color-mix(in srgb,var(--accent) 42%,transparent) 46% 49%,transparent 50%) 72px 9px/42px 58px no-repeat;
}
body[data-viz="analytics"] .pv-semantic::after{
  width:8px;height:8px;
  left:calc(50% + 45px);top:calc(50% - 31px);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 55%,transparent);
}

/* ad server */
body[data-viz="adserve"] .pv-semantic::before{
  width:124px;height:84px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  border-radius:13px;
  background:
    radial-gradient(circle at 25% 50%,var(--accent) 0 5px,transparent 6px),
    radial-gradient(circle at 75% 30%,color-mix(in srgb,var(--accent) 70%,transparent) 0 5px,transparent 6px),
    radial-gradient(circle at 75% 70%,color-mix(in srgb,var(--accent) 44%,transparent) 0 5px,transparent 6px);
}
body[data-viz="adserve"] .pv-semantic::after{
  width:72px;height:52px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(28deg,transparent 48%,color-mix(in srgb,var(--accent) 50%,transparent) 49% 51%,transparent 52%),
    linear-gradient(-28deg,transparent 48%,color-mix(in srgb,var(--accent) 35%,transparent) 49% 51%,transparent 52%);
}

/* exchange / marketplace */
body[data-viz="exchange"] .pv-semantic::before{
  width:126px;height:126px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:2px dashed color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:50%;
}
body[data-viz="exchange"] .pv-semantic::after{
  width:72px;height:36px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-top:3px solid var(--accent);
  border-bottom:3px solid color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* demand */
body[data-viz="demand"] .pv-semantic::before{
  width:118px;height:82px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 15% 50%,var(--accent) 0 6px,transparent 7px),
    radial-gradient(circle at 85% 22%,color-mix(in srgb,var(--accent) 76%,transparent) 0 6px,transparent 7px),
    radial-gradient(circle at 85% 78%,color-mix(in srgb,var(--accent) 52%,transparent) 0 6px,transparent 7px);
}
body[data-viz="demand"] .pv-semantic::after{
  width:82px;height:66px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(25deg,transparent 48%,color-mix(in srgb,var(--accent) 55%,transparent) 49% 51%,transparent 52%),
    linear-gradient(-25deg,transparent 48%,color-mix(in srgb,var(--accent) 40%,transparent) 49% 51%,transparent 52%);
}

/* yield */
body[data-viz="yield"] .pv-semantic::before{
  width:128px;height:90px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(to top,var(--accent) 0 42%,transparent 42%) 4px bottom/18px 100% no-repeat,
    linear-gradient(to top,color-mix(in srgb,var(--accent) 80%,transparent) 0 61%,transparent 61%) 34px bottom/18px 100% no-repeat,
    linear-gradient(to top,color-mix(in srgb,var(--accent) 62%,transparent) 0 78%,transparent 78%) 64px bottom/18px 100% no-repeat,
    linear-gradient(to top,color-mix(in srgb,var(--accent) 44%,transparent) 0 94%,transparent 94%) 94px bottom/18px 100% no-repeat;
}
body[data-viz="yield"] .pv-semantic::after{
  width:112px;height:2px;
  left:50%;top:66%;
  transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ledger */
body[data-viz="ledger"] .pv-semantic::before{
  width:118px;height:96px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  border-radius:10px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 18px,
      color-mix(in srgb,var(--accent) 25%,transparent) 18px 19px);
}
body[data-viz="ledger"] .pv-semantic::after{
  width:4px;height:80px;
  left:calc(50% - 31px);top:50%;
  transform:translate(-50%,-50%);
  background:var(--accent);
  opacity:.72;
}

/* commerce */
body[data-viz="commerce"] .pv-semantic::before{
  width:112px;height:72px;
  left:50%;top:50%;
  transform:translate(-50%,-42%);
  border:2px solid color-mix(in srgb,var(--accent) 58%,transparent);
  border-top:0;
  border-radius:5px 5px 14px 14px;
}
body[data-viz="commerce"] .pv-semantic::after{
  width:14px;height:14px;
  left:calc(50% - 28px);top:calc(50% + 44px);
  border-radius:50%;
  background:var(--accent);
  box-shadow:56px 0 0 color-mix(in srgb,var(--accent) 70%,transparent);
}

/* audience */
body[data-viz="audience"] .pv-semantic::before{
  width:42px;height:42px;
  left:50%;top:43%;
  transform:translate(-50%,-50%);
  border:2px solid var(--accent);
  border-radius:50%;
  box-shadow:
    -48px 18px 0 -8px color-mix(in srgb,var(--accent) 50%,transparent),
    48px 18px 0 -8px color-mix(in srgb,var(--accent) 50%,transparent);
}
body[data-viz="audience"] .pv-semantic::after{
  width:92px;height:38px;
  left:50%;top:62%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-bottom:0;
  border-radius:70px 70px 0 0;
}

/* generic monetisation control */
body[data-viz="monetise"] .pv-semantic::before{
  width:122px;height:86px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  border-radius:14px;
  background:
    radial-gradient(circle at 28% 32%,var(--accent) 0 5px,transparent 6px),
    radial-gradient(circle at 68% 32%,color-mix(in srgb,var(--accent) 70%,transparent) 0 5px,transparent 6px),
    radial-gradient(circle at 49% 70%,color-mix(in srgb,var(--accent) 48%,transparent) 0 5px,transparent 6px);
}
body[data-viz="monetise"] .pv-semantic::after{
  width:62px;height:42px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(35deg,transparent 48%,color-mix(in srgb,var(--accent) 38%,transparent) 49% 51%,transparent 52%),
    linear-gradient(-35deg,transparent 48%,color-mix(in srgb,var(--accent) 28%,transparent) 49% 51%,transparent 52%);
}

/* partner / integration */
body[data-viz="partner"] .pv-semantic::before{
  width:72px;height:72px;
  left:43%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 58%,transparent);
  border-radius:50%;
}
body[data-viz="partner"] .pv-semantic::after{
  width:72px;height:72px;
  left:57%;top:50%;
  transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--accent) 38%,transparent);
  border-radius:50%;
  mix-blend-mode:screen;
}

/* Make the legacy monogram subordinate instead of dominant. */
body[data-viz] .sigil{
  width:98px;
  height:98px;
  border-radius:25px;
  opacity:.30;
  transform:translate3d(0,0,20px) rotate(-6deg);
}

body[data-viz] .sigil span{
  font-size:34px;
}

/* Semantic scene comes forward. */
body[data-viz] .product-viz .pv-semantic{
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 16%,transparent));
}

/* Mobile keeps each symbol readable without overpowering copy. */
@media(max-width:640px){
  body[data-viz] .sigil{
    width:78px;
    height:78px;
    border-radius:20px;
  }

  body[data-viz] .sigil span{
    font-size:28px;
  }

  .product-viz .pv-semantic{
    transform:scale(.83);
    transform-origin:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .product-viz .pv-semantic{
    animation:none !important;
  }
}