:root{--bg:#05080d;--bg-soft:#08111f;--surface:rgba(255,255,255,.055);--line:rgba(255,255,255,.13);--text:#f8fbff;--muted:#a8b6c6;--dim:#708194;--teal: #99d9d9;--blue: #355464;--green:#8fffc1;--amber:#ffd38a;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(76,229,210,.12),transparent 26rem),linear-gradient(135deg,#05080d,#08111f 55%,#030508);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:84px 84px;mask-image:radial-gradient(circle at center,black,transparent 76%);opacity:.38;z-index:-1}.cursor-glow{position:fixed;width:440px;height:440px;border-radius:999px;background:radial-gradient(circle,rgba(76,229,210,.08),transparent 68%);transform:translate(-50%,-50%);left:var(--mx,50%);top:var(--my,50%);pointer-events:none;z-index:0}.site-header {width:min(var(--max),calc(100% - 40px));position:sticky;top:18px;z-index:20;margin:0 auto;transform:translateY(18px);border:1px solid rgba(255,255,255,.10);border-radius:999px;background: rgba(5,8,13,.84);backdrop-filter: blur(24px) saturate(1.15);display:flex;justify-content:space-between;align-items:center;padding:14px 18px 14px 22px;box-shadow:0 18px 70px rgba(0,0,0,.28)
  box-shadow: 0 14px 48px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(76,229,210,.045);
}.brand{color:var(--text);text-decoration:none;font-weight:850;letter-spacing:.08em;font-size:14px}.brand span{color:var(--teal);font-weight:500}.nav-links{display:flex;gap:8px}.nav-links a{color:var(--muted);text-decoration:none;font-size:var(--se-nav-font-size,var(--ds-menu-font-size,13px));padding:9px 13px;border-radius:999px;transition:background .2s,color .2s}.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.08)}.section-shell{width:min(var(--max),calc(100% - 40px));margin:0 auto;position:relative;z-index:1}.hero{min-height:100vh;display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;padding:110px 0 72px}.eyebrow{color:var(--teal);text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:12px;margin:0 0 18px}h1,h2,h3{margin:0;letter-spacing:-.055em;line-height:.98}h1{font-size:clamp(54px,8vw,104px)}h1 span{color:var(--muted)}h2{font-size:clamp(38px,5.2vw,74px);max-width:880px}h3{font-size:clamp(24px,3vw,38px)}.lede,.section-intro p,.wide-copy,.cta-content p{color:var(--muted);font-size:18px;line-height:1.55}.lede{max-width:590px;margin:26px 0 0}.actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;text-decoration:none;font-weight:800;font-size:14px;transition:transform .2s,background .2s,border-color .2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--teal);color:#061018;box-shadow:0 16px 42px rgba(76,229,210,.18)}.btn.ghost{color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.04)}.hero-stage{min-height:620px}.stage-frame{height:640px;border-radius:38px;overflow:hidden;position:relative;border:1px solid var(--line);background:radial-gradient(circle at center,rgba(76,229,210,.09),transparent 22rem),linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 40px 110px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.10);transform-style:preserve-3d}#networkCanvas{position:absolute;inset:0;width:100%;height:100%}.stage-chip{position:absolute;color:rgba(248,251,255,.78);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 12px;background:rgba(5,8,13,.42);backdrop-filter:blur(12px);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.top-chip{top:28px;left:32px}.right-chip{top:46%;right:28px}.bottom-chip{bottom:108px;left:42%}.stage-caption{position:absolute;left:28px;right:28px;bottom:28px;padding:18px 20px;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:rgba(5,8,13,.58);backdrop-filter:blur(18px);display:flex;justify-content:space-between;gap:18px;align-items:center}.stage-caption span{color:var(--muted);font-size:13px}.reality{padding:96px 0 120px}.section-intro{max-width:840px}.section-intro.centered{text-align:center;margin:0 auto}.section-intro h3{color:var(--muted);margin-top:10px}.section-intro p{max-width:680px}.centered p{margin-left:auto;margin-right:auto}.fragment-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:52px 0 32px}.fragment{min-height:154px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(circle at 30% 20%,rgba(76,229,210,.12),transparent 9rem),rgba(255,255,255,.035);display:grid;place-items:center;color:var(--text);font-size:20px;font-weight:850;letter-spacing:-.02em}.fragment:nth-child(2){transform:translateY(34px)}.fragment:nth-child(3){transform:translateY(-12px)}.fragment:nth-child(4){transform:translateY(22px)}.fragment:nth-child(5){transform:translateY(-22px)}.wide-copy{max-width:760px;margin-top:70px}.growth-engine,.engage,.results,.industries,.partner,.insights,.final-cta{padding:110px 0}.engine-wrap{position:relative;height:660px;margin-top:48px;border-radius:42px;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(76,229,210,.15),transparent 20rem),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.30)}.engine-lines{position:absolute;inset:0;width:100%;height:100%}.line{fill:none;stroke:rgba(76,229,210,.16);stroke-width:2;stroke-dasharray:8 14;animation:dash 18s linear infinite;transition:stroke .25s,stroke-width .25s}.engine-wrap[data-active=audience] .audience-demand,.engine-wrap[data-active=demand] .demand-opportunity,.engine-wrap[data-active=opportunity] .opportunity-revenue,.engine-wrap[data-active=revenue] .revenue-optimization,.engine-wrap[data-active=optimization] .optimization-demand{stroke:rgba(76,229,210,.75);stroke-width:3}@keyframes dash{to{stroke-dashoffset:-240}}.engine-node{position:absolute;width:150px;height:150px;border-radius:999px;border:1px solid rgba(76,229,210,.36);background:rgba(5,8,13,.64);color:var(--text);font:inherit;font-weight:850;cursor:pointer;box-shadow:0 0 35px rgba(76,229,210,.12),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s,background .25s,box-shadow .25s,border-color .25s;z-index:2}.engine-node:hover,.engine-node.active{transform:scale(1.08);background:rgba(76,229,210,.14);border-color:rgba(76,229,210,.75);box-shadow:0 0 70px rgba(76,229,210,.26),inset 0 1px 0 rgba(255,255,255,.12)}.node-audience{left:calc(50% - 75px);top:52px}.node-demand{right:120px;top:250px}.node-opportunity{left:calc(50% - 75px);bottom:52px}.node-revenue{left:120px;top:250px}.node-optimization{left:calc(50% - 75px);top:250px}.engine-core{position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;border-radius:999px;background:radial-gradient(circle,rgba(76,229,210,.18),rgba(76,229,210,.035) 60%,transparent);border:1px solid rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted)}.engine-core strong{display:block;color:var(--text);font-size:19px;letter-spacing:.08em;margin-top:4px}.engine-card{position:absolute;right:34px;bottom:34px;width:min(390px,calc(100% - 68px));border-radius:26px;border:1px solid var(--line);background:rgba(5,8,13,.66);backdrop-filter:blur(20px);padding:24px;z-index:3}.engine-card h3{font-size:32px;margin-bottom:12px}.engine-card p:not(.eyebrow){color:var(--muted);line-height:1.5}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.pill-row span,.metric-row span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:rgba(248,251,255,.82);border-radius:999px;padding:8px 10px;font-size:12px}.engage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}.engage-card,.insight-card{min-height:300px;border-radius:28px;border:1px solid var(--line);background:radial-gradient(circle at var(--local-x,50%) var(--local-y,20%),rgba(76,229,210,.13),transparent 12rem),rgba(255,255,255,.04);padding:26px;transform-style:preserve-3d}.engage-card span,.insight-card span{color:var(--teal);font-weight:850;font-size:13px;letter-spacing:.12em}.engage-card h3,.insight-card h3{font-size:28px;margin:70px 0 16px}.engage-card p{color:var(--muted);line-height:1.52}.result-panels{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px}.result-panel{min-height:520px;border-radius:34px;overflow:hidden;position:relative;border:1px solid var(--line);background:rgba(255,255,255,.04);transform-style:preserve-3d;box-shadow:0 30px 90px rgba(0,0,0,.26)}.result-panel:first-child{grid-column:span 2;min-height:580px}.panel-bg{position:absolute;inset:0;background:radial-gradient(circle at var(--local-x,30%) var(--local-y,30%),rgba(76,229,210,.28),transparent 15rem),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 58px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 58px),linear-gradient(135deg,rgba(106,183,255,.18),rgba(76,229,210,.05));transition:transform .5s}.novo .panel-bg{background:radial-gradient(circle at var(--local-x,40%) var(--local-y,20%),rgba(76,229,210,.28),transparent 18rem),linear-gradient(130deg,rgba(160,190,210,.16),rgba(76,229,210,.08)),repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),repeating-linear-gradient(25deg,rgba(255,255,255,.035) 0 1px,transparent 1px 72px)}.silverdale .panel-bg{background:radial-gradient(circle at var(--local-x,35%) var(--local-y,35%),rgba(143,255,193,.26),transparent 16rem),linear-gradient(130deg,rgba(76,229,210,.12),rgba(106,183,255,.08)),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 56px)}.bear .panel-bg{background:radial-gradient(circle at var(--local-x,40%) var(--local-y,35%),rgba(143,255,193,.22),transparent 15rem),repeating-radial-gradient(circle at center,rgba(255,255,255,.045) 0 1px,transparent 1px 48px),linear-gradient(145deg,rgba(143,255,193,.12),rgba(76,229,210,.05))}.fredericks .panel-bg{background:radial-gradient(circle at var(--local-x,45%) var(--local-y,30%),rgba(255,211,138,.20),transparent 14rem),linear-gradient(135deg,rgba(255,211,138,.10),rgba(76,229,210,.06)),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 52px)}.result-panel:hover .panel-bg{transform:scale(1.04)}.panel-content{position:absolute;inset:auto 28px 28px 28px;border-radius:26px;border:1px solid rgba(255,255,255,.14);background:rgba(5,8,13,.66);backdrop-filter:blur(20px);padding:26px}.panel-content p{margin:0 0 10px;color:var(--teal);text-transform:uppercase;font-size:12px;font-weight:850;letter-spacing:.14em}.panel-content h3{max-width:820px;font-size:clamp(30px,4vw,56px)}.metric-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.industry-orbit{height:580px;margin-top:46px;border-radius:42px;border:1px solid var(--line);background:radial-gradient(circle at center,rgba(76,229,210,.12),transparent 20rem),linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));position:relative;overflow:hidden}.industry-orbit:before{content:"";position:absolute;inset:80px;border:1px dashed rgba(76,229,210,.25);border-radius:50%;animation:slowRotate 40s linear infinite}@keyframes slowRotate{to{transform:rotate(360deg)}}.industry-center{position:absolute;left:50%;top:50%;width:250px;height:250px;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;border-radius:999px;border:1px solid rgba(76,229,210,.35);background:rgba(5,8,13,.62);color:var(--text);font-weight:850;line-height:1.25}.industry-node{position:absolute;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:var(--text);border-radius:999px;padding:22px 28px;font:inherit;font-weight:850;transition:transform .2s,background .2s,box-shadow .2s}.industry-node:hover{transform:translateY(-4px) scale(1.04);background:rgba(76,229,210,.13);box-shadow:0 0 54px rgba(76,229,210,.17)}.healthcare{left:12%;top:18%}.engineering{right:12%;top:18%}.home{left:14%;bottom:18%}.professional{right:10%;bottom:18%}.comparison{margin-top:46px;display:grid;grid-template-columns:1.3fr repeat(4,1fr);border:1px solid var(--line);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.035)}.comparison>div{padding:20px 16px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted)}.comparison>div:nth-child(-n+5){color:var(--text);font-weight:850;background:rgba(255,255,255,.055)}.comparison .highlight{color:var(--teal);background:rgba(76,229,210,.07);font-weight:900}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.insight-card{min-height:280px}.final-cta{min-height:680px;display:grid;place-items:center;text-align:center;overflow:hidden}.cta-network{position:absolute;inset:80px;border-radius:48px;background:radial-gradient(circle at center,rgba(76,229,210,.14),transparent 19rem),repeating-radial-gradient(circle at center,rgba(255,255,255,.055) 0 1px,transparent 1px 64px);border:1px solid rgba(255,255,255,.08);opacity:.72}.cta-content{position:relative;max-width:840px;z-index:2}.cta-content p:not(.eyebrow){max-width:680px;margin:24px auto 32px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.reveal.in-view{opacity:1;transform:translateY(0)}.interactive-tilt{transition:transform .12s ease-out}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}@media(max-width:980px){.site-header{border-radius:26px;align-items:flex-start;gap:12px;flex-direction:column}.nav-links{flex-wrap:wrap}.hero{grid-template-columns:1fr;padding-top:140px}.hero-stage,.stage-frame{min-height:520px;height:520px}.fragment-grid,.engage-grid,.insight-grid,.result-panels{grid-template-columns:1fr}.result-panel:first-child{grid-column:span 1}.engine-wrap{height:740px}.engine-node{width:125px;height:125px;font-size:13px}.node-audience{left:calc(50% - 62px);top:42px}.node-demand{right:26px;top:210px}.node-opportunity{left:calc(50% - 62px);bottom:210px}.node-revenue{left:26px;top:210px}.node-optimization{left:calc(50% - 62px);top:210px}.engine-card{left:22px;right:22px;bottom:22px;width:auto}.comparison{grid-template-columns:1.1fr repeat(4,.8fr);font-size:12px;overflow-x:auto}.stage-caption{flex-direction:column;align-items:flex-start}}@media(max-width:640px){.section-shell{width:min(100% - 28px,var(--max))}.hero-stage,.stage-frame{min-height:440px;height:440px}.fragment:nth-child(n){transform:none}.stage-chip{display:none}.result-panel,.result-panel:first-child{min-height:520px}.panel-content{inset:auto 16px 16px 16px;padding:20px}.industry-orbit{height:520px}.industry-center{width:190px;height:190px;font-size:14px}.healthcare{left:8%;top:14%}.engineering{right:7%;top:20%}.home{left:7%;bottom:17%}.professional{right:5%;bottom:13%}}


/* DemandSense logo integration */
.logo-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  text-decoration: none;
  min-width: 0;
}

.logo-brand img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
}

.logo-geometry {
  position: absolute;
  right: 48px;
  top: 48px;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  opacity: .18;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--teal), transparent 50%));
  pointer-events: none;
}

.logo-geometry span {
  display: block;
  width: 12px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal), white 8%), color-mix(in srgb, var(--blue), black 4%));
}

.logo-geometry span:nth-child(1) { height: 34px; }
.logo-geometry span:nth-child(2) { height: 52px; }
.logo-geometry span:nth-child(3) { height: 70px; }
.logo-geometry span:nth-child(4) { height: 46px; }

.stage-frame::after,
.engine-wrap::after,
.cta-network::after {
  content: "";
  position: absolute;
  right: 34px;
  top: 34px;
  width: 86px;
  height: 86px;
  background:
    linear-gradient(180deg, var(--teal), var(--blue)) 10px 42px / 10px 34px no-repeat,
    linear-gradient(180deg, var(--teal), var(--blue)) 28px 26px / 10px 50px no-repeat,
    linear-gradient(180deg, var(--teal), var(--blue)) 46px 10px / 10px 66px no-repeat,
    linear-gradient(180deg, var(--teal), var(--blue)) 64px 34px / 10px 42px no-repeat;
  opacity: .055;
  border-radius: 16px;
  pointer-events: none;
}

.cta-logo {
  height: 58px;
  width: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.28));
}

.engine-node::before,
.engage-card::before,
.result-panel::before {
  content: "";
  position: absolute;
  inset: 18px auto auto 18px;
  width: 34px;
  height: 34px;
  opacity: .16;
  background:
    linear-gradient(180deg, var(--teal), var(--blue)) 0 16px / 5px 18px no-repeat,
    linear-gradient(180deg, var(--teal), var(--blue)) 9px 9px / 5px 25px no-repeat,
    linear-gradient(180deg, var(--teal), var(--blue)) 18px 2px / 5px 32px no-repeat,
    linear-gradient(180deg, var(--teal), var(--blue)) 27px 13px / 5px 21px no-repeat;
  pointer-events: none;
}

.result-panel::before {
  z-index: 2;
  width: 46px;
  height: 46px;
  opacity: .12;
}

@media (max-width: 640px) {
  .logo-brand img { height: 34px; max-width: 180px; }
  .logo-geometry { display: none; }
  .cta-logo { height: 44px; }
}


/* Navigation contrast refinement for transparent logo */
.site-header {
  background: rgba(5,8,13,.84) !important;
  backdrop-filter: blur(24px) saturate(1.15) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 14px 48px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(76,229,210,.045) !important;
  transform: translateY(22px);
  padding: 16px 20px 16px 22px;
}

.logo-brand img {
  height: 52px;
  max-width: 270px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}

.nav-links a {
  color: rgba(248,251,255,.74);
}

.nav-links a:hover {
  color: var(--text);
  background: rgba(255,255,255,.095);
}

@media (max-width: 640px) {
  .site-header {
    transform: translateY(14px);
    padding: 14px 16px;
  }

  .logo-brand img {
    height: 42px;
    max-width: 220px;
  }
}


/* Transparent logo asset update */
.logo-brand img,
.cta-logo {
  background: transparent !important;
}

.site-header {
  background: rgba(5,8,13,.78) !important;
  border-color: rgba(255,255,255,.15) !important;
}

.logo-brand img {
  height: 52px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.34));
}


/* v5 SVG logo integration */
.logo-brand img {
  height: 56px !important;
  width: auto;
  max-width: 285px !important;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.32));
}

.site-header {
  background: rgba(5,8,13,.74) !important;
  border-color: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(22px) saturate(1.1) !important;
  box-shadow:
    0 14px 46px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px color-mix(in srgb, var(--teal), transparent 95%) !important;
}

.stage-frame .logo-geometry {
  opacity: .22;
}

.logo-svg-watermark {
  position: absolute;
  right: 40px;
  top: 38px;
  width: 150px;
  opacity: .045;
  pointer-events: none;
  filter: grayscale(1) brightness(2);
}

.engine-wrap::after,
.stage-frame::after,
.cta-network::after {
  opacity: .075 !important;
}

.cta-logo {
  height: 70px !important;
  width: auto;
  max-width: 320px;
  background: transparent !important;
}

@media (max-width: 640px) {
  .logo-brand img { height: 44px !important; max-width: 225px !important; }
  .cta-logo { height: 52px !important; }
}


/* v1.4 Hero network becomes atmospheric background, not a standalone visualization card */
.hero.hero-has-background-network {
  grid-template-columns: 1fr;
  overflow: visible;
}

.hero.hero-has-background-network .hero-copy {
  position: relative;
  z-index: 3;
  max-width: 860px;
  padding: 72px 0;
}

.hero.hero-has-background-network .hero-stage {
  position: absolute;
  inset: 88px 0 40px;
  min-height: auto;
  z-index: 1;
  pointer-events: none;
}

.hero.hero-has-background-network .stage-frame {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at var(--mx, 65%) var(--my, 45%), color-mix(in srgb, var(--teal), transparent 84%), transparent 25rem),
    radial-gradient(circle at 70% 42%, color-mix(in srgb, var(--blue), transparent 86%), transparent 32rem);
  box-shadow: none;
  overflow: visible;
  transform: none !important;
  pointer-events: auto;
  opacity: .82;
  mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 100%);
}

.hero.hero-has-background-network #networkCanvas {
  opacity: .62;
  filter: blur(.15px) saturate(.85);
}

.hero.hero-has-background-network .logo-geometry,
.hero.hero-has-background-network .logo-svg-watermark,
.hero.hero-has-background-network .stage-frame::after,
.hero.hero-has-background-network .stage-chip,
.hero.hero-has-background-network .stage-caption {
  display: none !important;
}

.hero.hero-has-background-network .hero-copy::before {
  content: "";
  position: absolute;
  inset: -70px -90px -70px -90px;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 40%, rgba(5,8,13,.94), rgba(5,8,13,.72) 38%, transparent 72%),
    linear-gradient(90deg, rgba(5,8,13,.92), rgba(5,8,13,.64) 48%, transparent);
  pointer-events: none;
}

.hero.hero-has-background-network .lede {
  max-width: 680px;
}

@media (max-width: 980px) {
  .hero.hero-has-background-network .hero-stage {
    inset: 120px -20px 20px;
  }

  .hero.hero-has-background-network .stage-frame {
    mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 100%);
    opacity: .54;
  }

  .hero.hero-has-background-network .hero-copy {
    padding: 44px 0 72px;
  }
}


/* v2.1 Edge-to-edge hero network */
.hero.hero-edge-network {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.hero.hero-edge-network::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 46%, rgba(5,8,13,.98), rgba(5,8,13,.78) 30%, rgba(5,8,13,.38) 52%, transparent 74%),
    linear-gradient(90deg, rgba(5,8,13,.96) 0%, rgba(5,8,13,.74) 38%, rgba(5,8,13,.18) 74%, transparent 100%),
    radial-gradient(circle at 76% 35%, color-mix(in srgb, var(--teal), transparent 82%), transparent 32rem),
    radial-gradient(circle at 72% 78%, color-mix(in srgb, var(--blue), transparent 78%), transparent 34rem);
}

.hero.hero-edge-network::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: radial-gradient(circle at 70% 50%, black, transparent 72%);
  opacity: .45;
}

.hero.hero-edge-network .hero-copy {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 3;
  max-width: none;
  padding: clamp(150px, 18vh, 220px) 0 clamp(96px, 14vh, 160px);
}

.hero.hero-edge-network .hero-copy > * {
  max-width: 760px;
}

.hero.hero-edge-network .hero-copy h1 {
  max-width: 940px;
  word-spacing: 0.075em;
}

.hero.hero-edge-network .hero-copy .actions {
  max-width: 760px;
}

.hero.hero-edge-network .hero-copy::before {
  content: "";
  position: absolute;
  left: -12vw;
  top: 12vh;
  bottom: 8vh;
  width: min(980px, 86vw);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 42%, rgba(5,8,13,.90), rgba(5,8,13,.62) 36%, transparent 72%);
  filter: blur(2px);
}

.hero.hero-edge-network .hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: auto;
  pointer-events: none;
}

.hero.hero-edge-network .stage-frame {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  transform: none !important;
  pointer-events: auto;
  opacity: .78;
  mask-image: none;
}

.hero.hero-edge-network #networkCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .72;
  filter: saturate(.82);
}

.hero.hero-edge-network .logo-geometry,
.hero.hero-edge-network .logo-svg-watermark,
.hero.hero-edge-network .stage-frame::after,
.hero.hero-edge-network .stage-chip,
.hero.hero-edge-network .stage-caption {
  display: none !important;
}

@media (max-width: 980px) {
  .hero.hero-edge-network {
    min-height: 94vh;
  }

  .hero.hero-edge-network::before {
    background:
      radial-gradient(circle at 30% 42%, rgba(5,8,13,.98), rgba(5,8,13,.78) 42%, rgba(5,8,13,.42) 68%, transparent 100%),
      linear-gradient(180deg, rgba(5,8,13,.92) 0%, rgba(5,8,13,.40) 66%, transparent 100%);
  }

  .hero.hero-edge-network .hero-copy {
    width: min(100% - 28px, var(--max));
    padding: 140px 0 96px;
  }

  .hero.hero-edge-network .stage-frame {
    opacity: .48;
  }
}


/* v2.2 Editable Growth Story homepage cards */
.ds-growth-story-card-loop {
  align-items: stretch;
}

.result-panel.ds-story-frame {
  display: block;
  text-decoration: none;
  min-height: 320px;
  max-height: none;
  cursor: pointer;
}

.result-panel.ds-story-frame:first-child {
  min-height: 360px;
}

.result-panel.ds-story-frame .panel-content {
  inset: auto 24px 24px 24px;
  padding: clamp(22px, 3vw, 34px);
}

.result-panel.ds-story-frame .panel-content h3 {
  font-size: clamp(32px, 4.8vw, 68px);
  max-width: 880px;
}

.result-panel.ds-story-frame:not(:first-child) .panel-content h3 {
  font-size: clamp(28px, 3vw, 42px);
}

.result-panel.ds-story-frame .metric-row {
  margin-top: 18px;
}

.result-panel.ds-story-frame .panel-bg {
  opacity: .86;
}

.result-panel.ds-story-frame::after {
  content: "Explore the story →";
  position: absolute;
  right: 28px;
  top: 28px;
  z-index: 3;
  color: rgba(248,251,255,.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,13,.36);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 9px 12px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

.result-panel.ds-story-frame:hover::after,
.result-panel.ds-story-frame:focus::after {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .result-panel.ds-story-frame,
  .result-panel.ds-story-frame:first-child {
    min-height: 360px;
  }

  .result-panel.ds-story-frame .panel-content {
    inset: auto 16px 16px 16px;
  }

  .result-panel.ds-story-frame::after {
    opacity: 1;
    top: 18px;
    right: 18px;
  }
}


/* v3.0 Portfolio hierarchy */
.ds-growth-story-card-loop .ds-story-frame.role-flagship {
  min-height: 430px;
  grid-column: 1 / -1;
}

.ds-growth-story-card-loop .ds-story-frame.role-flagship .panel-content h3 {
  font-size: clamp(42px, 6vw, 82px);
}

.ds-growth-story-card-loop .ds-story-frame.bg-pipeline .panel-bg {
  background:
    radial-gradient(circle at 80% 22%, color-mix(in srgb, var(--teal), transparent 72%), transparent 28rem),
    linear-gradient(135deg, rgba(5,8,13,.35), rgba(5,8,13,.85));
}

.ds-growth-story-card-loop .ds-story-frame.bg-trust .panel-bg {
  background:
    radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--teal), transparent 76%), transparent 22rem),
    radial-gradient(circle at 80% 74%, color-mix(in srgb, var(--blue), transparent 74%), transparent 26rem),
    linear-gradient(135deg, rgba(5,8,13,.20), rgba(5,8,13,.85));
}

.ds-growth-story-card-loop .ds-story-frame.bg-local .panel-bg {
  background:
    radial-gradient(circle at 18% 75%, color-mix(in srgb, var(--teal), transparent 78%), transparent 22rem),
    linear-gradient(135deg, rgba(5,8,13,.20), rgba(5,8,13,.86));
}


/* alpha.25.1: legacy homepage menu font size follows Customizer Menu Font Size */
.ds-primary-nav a,.nav-links a{font-size:var(--se-nav-font-size,var(--ds-menu-font-size,13px))!important;font-weight:var(--ds-menu-font-weight,600);letter-spacing:var(--ds-menu-letter-spacing,0px)}

/* =========================================================
   Alpha 25.9 — Homepage headline media mask
   The headline scrolls normally while the selected media is
   sampled from a viewport-fixed coordinate system.
   ========================================================= */
.hero-mask-heading {
  position: relative;
  isolation: isolate;
  /* Preserve the pre-mask hero headline width. The wrapper became a direct
     child of .hero-copy, whose generic rule caps children at 760px. */
  max-width: 940px !important;
}

.hero-mask-heading__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.hero-copy--media-mask.is-mask-ready .hero-mask-heading__text {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-copy--media-mask .hero-mask-heading__text {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy--media-mask[data-hero-mask-type="video"] .hero-mask-heading__canvas {
    /* JS freezes on the poster/first frame; no special motion CSS required. */
  }
}


/* =========================================================
   Alpha 25.12 — Browser-native headline mask geometry
   Image mode now clips the selected image directly to the real H1.
   The browser therefore owns wrapping, glyph metrics and responsive layout.
   ========================================================= */
.hero-copy--media-mask[data-hero-mask-type="image"].is-mask-ready .hero-mask-heading__text {
  background-image: var(--ds-hero-mask-image);
  background-repeat: no-repeat;
  /* JS maps the viewport-sized image into the real H1 coordinate space.
     This preserves native wrapping while the media remains visually fixed. */
  background-size: var(--ds-hero-mask-bg-width, 100vw) var(--ds-hero-mask-bg-height, 100vh);
  background-position: var(--ds-hero-mask-bg-x, 50%) var(--ds-hero-mask-bg-y, 50%);
  background-attachment: scroll;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-copy--media-mask[data-hero-mask-type="image"] .hero-mask-heading__canvas {
  display: none !important;
}

/* =========================================================
   Alpha 25.15 — Growth Story card content flow fix
   Keep card copy bottom-aligned while allowing the card to grow
   with long headlines/metrics instead of clipping absolute content.
   ========================================================= */
.ds-growth-story-card-loop .result-panel.ds-story-frame {
  display: flex;
  align-items: flex-end;
  padding: 24px;
  height: auto;
}

.ds-growth-story-card-loop .result-panel.ds-story-frame .panel-content {
  position: relative;
  inset: auto;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

.ds-growth-story-card-loop .result-panel.ds-story-frame .panel-content h3 {
  overflow: visible;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .ds-growth-story-card-loop .result-panel.ds-story-frame {
    padding: 16px;
  }
}

/* =========================================================
   Alpha 25.17 — Homepage story role hierarchy
   Saved Story Role owns card presentation. Homepage collection
   owns order. If every selected story is Standard, PHP promotes
   only the first selected story to an effective Flagship role.
   ========================================================= */
.ds-growth-story-card-loop {
  grid-template-columns: repeat(var(--se-case-study-cards-per-row, 2), minmax(0, 1fr));
}

/* Neutralize legacy positional styling. Position must never define role. */
.ds-growth-story-card-loop .result-panel.ds-story-frame:first-child {
  grid-column: auto;
  min-height: 360px;
}
.ds-growth-story-card-loop .result-panel.ds-story-frame:first-child .panel-content h3,
.ds-growth-story-card-loop .result-panel.ds-story-frame:not(:first-child) .panel-content h3 {
  font-size: clamp(30px, 3vw, 44px);
}

/* Story-role presentation */
.ds-growth-story-card-loop .result-panel.ds-story-frame.role-flagship {
  grid-column: 1 / -1;
  min-height: 430px;
}
.ds-growth-story-card-loop .result-panel.ds-story-frame.role-flagship .panel-content h3 {
  font-size: clamp(42px, 6vw, 82px);
  max-width: 880px;
}

.ds-growth-story-card-loop .result-panel.ds-story-frame.role-standard {
  min-height: 360px;
}
.ds-growth-story-card-loop .result-panel.ds-story-frame.role-standard .panel-content h3 {
  font-size: clamp(30px, 3vw, 44px);
}

.ds-growth-story-card-loop .result-panel.ds-story-frame.role-supporting {
  min-height: 300px;
}
.ds-growth-story-card-loop .result-panel.ds-story-frame.role-supporting .panel-content h3 {
  font-size: clamp(26px, 2.5vw, 36px);
}

@media (max-width: 900px) {
  .ds-growth-story-card-loop {
    grid-template-columns: 1fr;
  }
  .ds-growth-story-card-loop .result-panel.ds-story-frame,
  .ds-growth-story-card-loop .result-panel.ds-story-frame:first-child,
  .ds-growth-story-card-loop .result-panel.ds-story-frame.role-flagship,
  .ds-growth-story-card-loop .result-panel.ds-story-frame.role-standard,
  .ds-growth-story-card-loop .result-panel.ds-story-frame.role-supporting {
    grid-column: 1;
    min-height: 360px;
  }
}


/* 6.0.0-beta.4 — Editable, evenly distributed homepage industries */
.industry-node {
  left: var(--industry-x, 50%);
  top: var(--industry-y, 50%);
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}
.industry-node:hover {
  transform: translate(-50%, calc(-50% - 4px)) scale(1.04);
}
@media (max-width: 640px) {
  .industry-orbit {
    height: auto;
    min-height: 0;
    padding: 28px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .industry-orbit::before { display: none; }
  .industry-center {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(190px, 100%);
    height: 190px;
    margin: 0 auto 12px;
    grid-column: 1 / -1;
  }
  .industry-node,
  .industry-node:hover {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    white-space: normal;
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 14px 16px;
  }
}
@media (max-width: 420px) {
  .industry-orbit { grid-template-columns: 1fr; }
  .industry-center { grid-column: 1; }
}
