.product-page {
  --accent: #42f3ff;
  --accent-rgb: 66, 243, 255;
  --accent-2: #4778ff;
  --accent-2-rgb: 71, 120, 255;
  background:
    radial-gradient(circle at 76% 4%, rgba(var(--accent-rgb), .11), transparent 30rem),
    radial-gradient(circle at 18% 34%, rgba(var(--accent-2-rgb), .08), transparent 28rem),
    var(--ink-950);
}

.product-page[data-product="sms"] { --accent: #44f6ff; --accent-rgb: 68, 246, 255; --accent-2: #765cff; --accent-2-rgb: 118, 92, 255; }
.product-page[data-product="sip"] { --accent: #7ae9ff; --accent-rgb: 122, 233, 255; --accent-2: #aa5cff; --accent-2-rgb: 170, 92, 255; }
.product-page[data-product="crm"] { --accent: #51f6bb; --accent-rgb: 81, 246, 187; --accent-2: #11aeea; --accent-2-rgb: 17, 174, 234; }

.product-page .eyebrow { color: var(--accent); }
.product-page .site-header .button-primary { --electric: var(--accent); --blue-deep: var(--accent-2); }

.product-nav-link[aria-current="page"] { color: var(--accent); text-shadow: 0 0 1rem rgba(var(--accent-rgb), .46); }

.breadcrumb {
  position: relative;
  z-index: 5;
  padding-block: 6.5rem 0;
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; color: #7f9ab0; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .55rem; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: rgba(var(--accent-rgb), .52); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--accent); }

.product-hero {
  position: relative;
  min-height: 50rem;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: 3rem 6rem;
  isolation: isolate;
}

.product-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(rgba(74, 180, 230, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 180, 230, .045) 1px, transparent 1px);
  background-size: 4.8rem 4.8rem;
  mask-image: linear-gradient(to bottom, black, transparent 94%);
}

.product-hero::after {
  content: attr(data-code);
  position: absolute;
  z-index: -2;
  inset-inline-end: -1.5rem;
  inset-block-start: 50%;
  color: rgba(var(--accent-rgb), .026);
  font-size: clamp(9rem, 30vw, 28rem);
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: .7;
  transform: translateY(-50%);
  pointer-events: none;
}

.product-network { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: .65; }

.product-hero-inner { display: grid; gap: 4rem; align-items: center; }
.product-copy { position: relative; z-index: 2; }
.product-copy::before { content: ""; position: absolute; z-index: -1; inset: -1.7rem auto auto -1.7rem; width: 6rem; height: 6rem; border-block-start: 1px solid rgba(var(--accent-rgb), .58); border-inline-start: 1px solid rgba(var(--accent-rgb), .58); }
.product-code { display: inline-flex; align-items: center; gap: .55rem; margin-block-end: 1.25rem; color: #8fa8bb; font-size: .62rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.product-code::before { content: ""; width: 2rem; height: 1px; background: var(--accent); box-shadow: 0 0 .8rem rgba(var(--accent-rgb), .8); }
.product-copy h1 { max-width: 12ch; font-family: "Sora", ui-sans-serif, system-ui, sans-serif; font-size: clamp(3.05rem, 6.1vw, 5.4rem); font-weight: 650; letter-spacing: -.065em; line-height: .98; }
.product-copy h1 span { display: block; color: var(--accent); text-shadow: 0 0 2rem rgba(var(--accent-rgb), .28); }
.product-copy h1 span:first-child { color: var(--white); text-shadow: none; }
.product-lede { max-width: 41rem; margin-block: 1.5rem 2rem; color: #b2c5d5; font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.65; }
.product-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.product-actions .button-primary { --electric: var(--accent); --blue-deep: var(--accent-2); }

.product-visual { min-height: 28rem; display: grid; place-items: center; perspective: 70rem; }
.signal-reactor { position: relative; width: min(88vw, 34rem); aspect-ratio: 1; transform-style: preserve-3d; transition: transform .3s var(--ease); }
.reactor-halo { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .21), transparent 66%); filter: blur(1.4rem); transform: translateZ(-3rem); }
.reactor-ring { position: absolute; inset: var(--ring-inset); border: 1px solid rgba(var(--accent-rgb), var(--ring-alpha)); border-radius: 50%; box-shadow: inset 0 0 1.5rem rgba(var(--accent-rgb), .025), 0 0 1.5rem rgba(var(--accent-rgb), .045); transform: rotateX(var(--ring-x)) rotateY(var(--ring-y)) rotateZ(var(--ring-z)); }
.reactor-ring::before, .reactor-ring::after { content: ""; position: absolute; width: .48rem; height: .48rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1rem var(--accent), 0 0 2rem rgba(var(--accent-rgb), .55); }
.reactor-ring::before { inset: 13% auto auto 8%; }.reactor-ring::after { inset: auto 12% 15% auto; }
.ring-a { --ring-inset: 7%; --ring-alpha: .32; --ring-x: 68deg; --ring-y: 4deg; --ring-z: 16deg; animation: product-orbit-a 13s linear infinite; }
.ring-b { --ring-inset: 17%; --ring-alpha: .42; --ring-x: 74deg; --ring-y: 13deg; --ring-z: -26deg; animation: product-orbit-b 17s linear infinite; }
.ring-c { --ring-inset: 28%; --ring-alpha: .55; --ring-x: 61deg; --ring-y: -18deg; --ring-z: 42deg; animation: product-orbit-a 10s linear infinite reverse; }

@keyframes product-orbit-a { to { transform: rotateX(var(--ring-x)) rotateY(var(--ring-y)) rotateZ(calc(var(--ring-z) + 360deg)); } }
@keyframes product-orbit-b { to { transform: rotateX(var(--ring-x)) rotateY(calc(var(--ring-y) + 360deg)) rotateZ(var(--ring-z)); } }

.reactor-core {
  position: absolute;
  inset: 31%;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(var(--accent-rgb), .82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,.38), transparent 8%),
    radial-gradient(circle at 42% 34%, rgba(var(--accent-rgb), .84), rgba(var(--accent-2-rgb), .5) 46%, rgba(1, 7, 19, .98) 75%);
  box-shadow: 0 0 4rem rgba(var(--accent-rgb), .34), inset -.8rem -1rem 2.5rem rgba(0, 0, 0, .5), inset .7rem .9rem 2rem rgba(255,255,255,.17);
  transform: translateZ(3rem);
}
.reactor-core::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.reactor-core strong { color: white; font-size: clamp(1.3rem, 4vw, 2.2rem); letter-spacing: -.04em; text-shadow: 0 0 1.3rem rgba(255,255,255,.48); }
.reactor-core span { color: rgba(255,255,255,.72); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
.reactor-node { position: absolute; min-width: 7.8rem; padding: .72rem .85rem; border: 1px solid rgba(var(--accent-rgb), .26); background: rgba(4, 18, 34, .84); box-shadow: 0 0 1.2rem rgba(var(--accent-rgb), .08), inset 0 0 1.2rem rgba(var(--accent-rgb), .045); clip-path: var(--panel-cut); backdrop-filter: blur(.5rem); }
.reactor-node strong { display: block; color: var(--white); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }.reactor-node small { color: #7f9bb2; font-size: .56rem; }
.reactor-node:nth-of-type(2) { inset: 8% auto auto 5%; transform: translateZ(2rem) rotate(-4deg); }.reactor-node:nth-of-type(3) { inset: 18% 0 auto auto; transform: translateZ(4rem) rotate(3deg); }.reactor-node:nth-of-type(4) { inset: auto auto 8% 12%; transform: translateZ(5rem) rotate(2deg); }

.product-strip { position: relative; z-index: 3; border-block: 1px solid rgba(var(--accent-rgb), .18); background: rgba(3, 14, 29, .82); }
.product-strip-grid { display: grid; }
.product-strip article { min-height: 7rem; padding: 1.25rem; border-block-end: 1px solid rgba(var(--accent-rgb), .12); }
.product-strip article:last-child { border-block-end: 0; }
.product-strip span { display: block; margin-block-end: .35rem; color: rgba(var(--accent-rgb), .72); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
.product-strip strong { color: var(--white); font-size: 1rem; }

.product-section { position: relative; padding-block: clamp(5.5rem, 11vw, 9rem); }
.product-heading { display: grid; gap: 1.4rem; margin-block-end: 3rem; }
.product-heading h2 { max-width: 13ch; font-family: "Sora", ui-sans-serif, system-ui, sans-serif; font-weight: 650; }
.product-heading > p { max-width: 39rem; color: var(--muted); }

.feature-matrix { display: grid; gap: 1px; border: 1px solid rgba(var(--accent-rgb), .16); background: rgba(var(--accent-rgb), .15); clip-path: var(--panel-cut); }
.feature-cell { position: relative; min-height: 15rem; padding: 1.5rem; overflow: hidden; background: linear-gradient(145deg, rgba(8, 31, 53, .98), rgba(3, 14, 28, .99)); }
.feature-cell::before { content: attr(data-index); position: absolute; inset: .8rem .9rem auto auto; color: rgba(var(--accent-rgb), .23); font-size: 2.5rem; font-weight: 800; line-height: 1; }
.feature-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; margin-block-end: 2.5rem; border: 1px solid rgba(var(--accent-rgb), .32); color: var(--accent); background: rgba(var(--accent-rgb), .05); box-shadow: inset 0 0 1rem rgba(var(--accent-rgb), .08); clip-path: var(--panel-cut); }
.feature-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.feature-cell h3 { margin-block-end: .8rem; font-size: 1.35rem; }.feature-cell p { margin: 0; color: var(--muted); font-size: .9rem; }

.product-console-wrap { overflow: hidden; background: #020814; }
.product-console { display: grid; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .2); background: #04101f; box-shadow: 0 2.5rem 7rem rgba(0,0,0,.45); clip-path: var(--panel-cut); }
.console-media { position: relative; min-height: 24rem; overflow: hidden; }.console-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.72); }.console-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(2,8,20,.12)), linear-gradient(0deg, rgba(2,8,20,.6), transparent 50%); }
.product-page[data-product="sms"] .console-media img { transform: scaleY(1.16); }
.product-page[data-product="sms"] .use-case img[src*="sms-2fa"],
.product-page[data-product="sms"] .use-case img[src*="sms-api"] { transform: scaleY(1.12); }
.product-page[data-product="sms"] .use-case:hover img[src*="sms-2fa"],
.product-page[data-product="sms"] .use-case:hover img[src*="sms-api"] { transform: scaleY(1.12) scale(1.035); }
.console-panel { position: relative; padding: 2rem; background: radial-gradient(circle at 100% 0, rgba(var(--accent-rgb), .09), transparent 18rem), rgba(3, 14, 29, .98); }
.console-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 2rem; padding-block-end: 1rem; border-block-end: 1px solid rgba(var(--accent-rgb), .14); color: #7d98ae; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }.console-topline i { width: .5rem; height: .5rem; display: inline-block; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1rem var(--accent); }
.console-panel h3 { max-width: 16ch; margin-block-end: 1rem; font-size: clamp(1.8rem, 5vw, 3rem); }.console-panel > p { color: var(--muted); }
.console-list { display: grid; gap: .7rem; padding: 0; margin: 2rem 0 0; list-style: none; }.console-list li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding-block: .8rem; border-block-start: 1px solid rgba(var(--accent-rgb), .1); }.console-list span { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .3); color: var(--accent); font-size: .58rem; }.console-list strong { color: #dceaf5; font-size: .86rem; }

.use-case-grid { display: grid; gap: 1rem; }
.use-case { position: relative; min-height: 24rem; display: flex; align-items: end; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .16); clip-path: var(--panel-cut); }
.use-case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }.use-case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,8,18,.97), rgba(2,8,18,.14) 72%); }.use-case:hover img { transform: scale(1.035); }
.use-case-content { position: relative; z-index: 2; padding: 1.5rem; }.use-case-content span { color: var(--accent); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }.use-case-content h3 { max-width: 17ch; margin-block: .55rem .7rem; }.use-case-content p { max-width: 36rem; margin: 0; color: #a9bed0; font-size: .88rem; }

.deployment { background: linear-gradient(180deg, rgba(7,25,45,.48), rgba(2,9,20,0)); }
.deployment-steps { display: grid; counter-reset: deployment; }
.deployment-step { position: relative; min-height: 13rem; padding: 1.5rem 0 1.5rem 3.3rem; border-block-start: 1px solid rgba(var(--accent-rgb), .15); counter-increment: deployment; }
.deployment-step::before { content: "0" counter(deployment); position: absolute; inset: 1.5rem auto auto 0; color: var(--accent); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-shadow: 0 0 .8rem rgba(var(--accent-rgb), .5); }.deployment-step h3 { margin-block-end: .65rem; font-size: 1.35rem; }.deployment-step p { margin: 0; color: var(--muted); font-size: .9rem; }

.product-faq { display: grid; gap: 4rem; }.product-faq-intro { align-self: start; }.product-faq .accordion details { border-color: rgba(var(--accent-rgb), .16); }.product-faq .accordion summary::after { color: var(--accent); }

.product-cta { padding-block: clamp(5rem, 11vw, 8rem); }
.product-cta-panel { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); border: 1px solid transparent; background: linear-gradient(130deg, rgba(7, 28, 50, .96), rgba(3, 12, 27, .98)) padding-box, linear-gradient(115deg, rgba(var(--accent-rgb), .68), rgba(var(--accent-2-rgb), .42), transparent 70%) border-box; clip-path: var(--panel-cut); }
.product-cta-panel::before { content: ""; position: absolute; width: 26rem; height: 26rem; inset: -11rem -8rem auto auto; border-radius: 50%; background: rgba(var(--accent-rgb), .13); filter: blur(5rem); }.product-cta-panel h2 { position: relative; max-width: 13ch; margin-block-end: 1rem; }.product-cta-panel p { position: relative; max-width: 38rem; color: var(--muted); }.product-cta-panel .button { margin-block-start: 1rem; }

@media (min-width: 36rem) {
  .product-strip-grid { grid-template-columns: 1fr 1fr; }
  .product-strip article { border-inline-end: 1px solid rgba(var(--accent-rgb), .12); }
  .product-strip article:nth-child(2n) { border-inline-end: 0; }
  .feature-matrix { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 50rem) {
  .product-hero-inner { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .product-hero { min-height: 47rem; padding-block: 2rem 4.5rem; }
  .product-strip-grid { grid-template-columns: repeat(4, 1fr); }
  .product-strip article { border-block-end: 0; }.product-strip article:nth-child(2n) { border-inline-end: 1px solid rgba(var(--accent-rgb), .12); }.product-strip article:last-child { border-inline-end: 0; }
  .product-heading { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 5rem; }
  .feature-matrix { grid-template-columns: repeat(3, 1fr); }
  .product-console { grid-template-columns: 1.05fr .95fr; min-height: 38rem; }.console-media { min-height: 100%; }.console-panel { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem; }
  .use-case-grid { grid-template-columns: repeat(3, 1fr); }.use-case { min-height: 31rem; }
  .deployment-steps { grid-template-columns: repeat(4, 1fr); }.deployment-step { padding: 4.5rem 1.5rem 1.5rem; border-inline-start: 1px solid rgba(var(--accent-rgb), .15); }.deployment-step::before { inset: 1.5rem auto auto 1.5rem; }.deployment-step:last-child { border-inline-end: 1px solid rgba(var(--accent-rgb), .15); }
  .product-faq { grid-template-columns: .8fr 1.2fr; gap: 6rem; }.product-faq-intro { position: sticky; top: 8rem; }
}

@media (min-width: 72rem) {
  .product-copy { padding-inline-start: 1.5rem; }
  .product-visual { min-height: 34rem; }
  .signal-reactor { width: 34rem; }
  .feature-cell { min-height: 18rem; padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reactor-ring { animation: none !important; }
  .signal-reactor, .use-case img { transform: none !important; }
}