:root {
  --pro-accent: var(--accent, #b9ff36);
  --pro-ink: var(--ink, #f4f6f2);
  --pro-muted: var(--muted, #9ca39d);
  --pro-line: var(--line, rgba(235, 245, 234, 0.14));
  --pro-panel: var(--panel, #101310);
}

.page-pro { background: #080a09; color: var(--pro-ink); }
.pro-page {
  overflow: clip;
  background: radial-gradient(circle at 78% 12%, rgba(185,255,54,.055), transparent 24rem), #080a09;
}

.pro-hero {
  position: relative;
  min-height: min(880px, calc(100svh - 72px));
  border-bottom: 1px solid var(--pro-line);
  display: grid;
  align-items: center;
  isolation: isolate;
}
.pro-hero::before {
  position: absolute; inset: 0; z-index: -2; content: "";
  background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,transparent 82%);
  mask-image: linear-gradient(to bottom,#000 0%,transparent 82%);
}
.pro-hero-glow {
  position: absolute; right: 5%; top: 8%; z-index: -1; width: 48rem; height: 48rem;
  border-radius: 50%; background: radial-gradient(circle,rgba(185,255,54,.1),rgba(185,255,54,0) 68%);
  filter: blur(12px); pointer-events: none;
}
.pro-hero-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr); gap: clamp(48px,7vw,112px); align-items: center;
  padding-top: clamp(84px,11vh,136px); padding-bottom: clamp(80px,10vh,128px);
}
.pro-hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: #c7cdc7;
  font-size: .74rem; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow span { color: var(--pro-accent); }
.eyebrow i { width: 28px; height: 1px; background: #626862; }
.pro-hero h1 {
  max-width: 760px; margin: 0; color: #f6f8f4; font-size: clamp(3.15rem,5.4vw,6.3rem);
  font-weight: 630; line-height: .99; letter-spacing: -.065em;
}
.pro-hero h1 em { color: var(--pro-accent); font-style: normal; }
.pro-lead { max-width: 630px; margin: 30px 0 0; color: #abb1ac; font-size: clamp(1rem,1.2vw,1.18rem); line-height: 1.85; }
.pro-hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 38px; }
.button-accent {
  min-height: 54px; padding: 0 24px; border: 1px solid var(--pro-accent); border-radius: 2px;
  background: var(--pro-accent); color: #080a09; font-weight: 720;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button-accent:hover { transform: translateY(-2px); background: #c9ff65; box-shadow: 0 12px 38px rgba(185,255,54,.16); }
.button-accent svg { width: 19px; margin-left: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.text-link { padding: 10px 0; border-bottom: 1px solid #59605a; color: #e1e5df; font-size: .91rem; transition: color 180ms ease,border-color 180ms ease; }
.text-link:hover { border-color: var(--pro-accent); color: var(--pro-accent); }
.pro-hero-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pro-hero-notes span {
  padding: 7px 10px; border: 1px solid var(--pro-line); color: #899089;
  font: .68rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .07em; text-transform: uppercase;
}

.pro-visual { position: relative; min-width: 0; }
.visual-frame {
  position: relative; overflow: hidden; aspect-ratio: 1.38; border: 1px solid rgba(224,235,225,.18); background: #0d100e;
  clip-path: polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  box-shadow: 0 34px 100px rgba(0,0,0,.54);
}
.visual-frame::before,.visual-frame::after { position: absolute; z-index: 2; content: ""; pointer-events: none; }
.visual-frame::before {
  inset: 0; background: linear-gradient(90deg,rgba(185,255,54,.12),transparent 22%,transparent 78%,rgba(185,255,54,.05)),linear-gradient(180deg,transparent 58%,rgba(4,6,5,.78));
}
.visual-frame::after { inset: 12px; border: 1px solid rgba(255,255,255,.08); }
.visual-frame picture,.visual-frame img { display: block; width: 100%; height: 100%; }
.visual-frame img { object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.78); transition: transform 900ms cubic-bezier(.2,.7,0,1); }
.pro-visual:hover .visual-frame img { transform: scale(1.025); }
.visual-scan {
  position: absolute; z-index: 3; left: 0; right: 0; top: -18%; height: 18%;
  background: linear-gradient(to bottom,transparent,rgba(185,255,54,.14),transparent); animation: console-scan 6s linear infinite; pointer-events: none;
}
.visual-label {
  position: absolute; z-index: 4; color: rgba(233,239,233,.72);
  font: .61rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .11em;
}
.visual-label::before {
  display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--pro-accent);
  box-shadow: 0 0 12px var(--pro-accent); content: ""; vertical-align: 1px;
}
.visual-label-top { left: 28px; top: 28px; }
.visual-label-bottom { right: 28px; bottom: 26px; }
.price-panel {
  position: absolute; z-index: 5; right: -18px; bottom: -50px; display: flex; width: min(340px,72%); min-height: 112px;
  align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border: 1px solid rgba(185,255,54,.48);
  background: rgba(10,13,10,.92); box-shadow: 0 22px 70px rgba(0,0,0,.55); backdrop-filter: blur(16px);
}
.price-panel div { display: grid; gap: 8px; }
.price-panel span { color: #f2f5ef; font-weight: 650; }
.price-panel small { color: #7f867f; font-size: .72rem; }
.price-panel strong { color: var(--pro-accent); font: 650 clamp(2.2rem,3vw,3.3rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: -.08em; }
.price-panel sup { margin-right: 3px; font-size: .38em; vertical-align: top; }

.pro-signal { border-bottom: 1px solid var(--pro-line); background: #0b0d0c; }
.signal-track {
  display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden;
  color: #989f99; font-size: .75rem; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase;
}
.signal-track span { display: flex; align-items: center; gap: 10px; }
.signal-track b { color: var(--pro-accent); font: 600 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.signal-track i { width: 4px; height: 4px; border-radius: 50%; background: #3f453f; }

.pro-section { padding-block: clamp(96px,11vw,176px); border-bottom: 1px solid var(--pro-line); }
.section-heading {
  display: grid; grid-template-columns: minmax(130px,.28fr) minmax(0,1fr); gap: clamp(36px,7vw,112px); align-items: start;
  margin-bottom: clamp(52px,7vw,94px);
}
.section-index { margin: 5px 0 0; color: var(--pro-accent); font: .69rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .13em; text-transform: uppercase; }
.section-heading h2 {
  max-width: 900px; margin: 0; color: #f3f5f1; font-size: clamp(2.15rem,4vw,4.8rem); font-weight: 590; line-height: 1.08; letter-spacing: -.055em;
}
.section-heading p:not(.section-index) { max-width: 580px; margin: 24px 0 0; color: var(--pro-muted); line-height: 1.75; }

.deliverable-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); border-top: 1px solid var(--pro-line); border-left: 1px solid var(--pro-line); }
.deliverable-card {
  position: relative; grid-column: span 4; min-height: 320px; padding: 36px; border-right: 1px solid var(--pro-line); border-bottom: 1px solid var(--pro-line);
  background: rgba(255,255,255,.012); transition: background 240ms ease,transform 240ms ease;
}
.deliverable-card:hover { z-index: 1; background: rgba(185,255,54,.045); }
.deliverable-card-primary {
  grid-row: span 2; min-height: 640px; background: linear-gradient(160deg,rgba(185,255,54,.1),transparent 52%),#101310;
}
.deliverable-card-wide { grid-column: span 8; min-height: 290px; background: linear-gradient(90deg,#111512,rgba(185,255,54,.045)); }
.compact-card { grid-column: span 6; min-height: 260px; }
.card-number { position: absolute; right: 28px; top: 26px; color: #525852; font: .68rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.card-icon { display: grid; width: 68px; height: 68px; margin-bottom: 78px; place-items: center; border: 1px solid rgba(185,255,54,.36); color: var(--pro-accent); }
.card-icon svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.card-kicker { margin: 0 0 17px; color: var(--pro-accent); font: .65rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .13em; }
.deliverable-card h3 { max-width: 460px; margin: 0; color: #ecefeb; font-size: clamp(1.22rem,1.8vw,1.65rem); font-weight: 590; line-height: 1.35; letter-spacing: -.025em; }
.deliverable-card > p:last-of-type { max-width: 550px; margin: 20px 0 0; color: #8f9690; font-size: .91rem; line-height: 1.8; }
.platform-note { position: absolute; left: 36px; bottom: 34px; color: #676e68; font: .65rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .12em; }

.workflow-section { background: linear-gradient(120deg,rgba(255,255,255,.018),transparent 46%),#0b0e0c; }
.workflow-rail { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.workflow-rail::before { position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: linear-gradient(90deg,var(--pro-accent),rgba(185,255,54,.2)); content: ""; }
.workflow-rail li { position: relative; min-width: 0; padding-right: clamp(20px,2.7vw,46px); }
.workflow-rail li > span {
  position: relative; z-index: 1; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(185,255,54,.6);
  border-radius: 50%; background: #0b0e0c; color: var(--pro-accent); font: .69rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow: 0 0 0 7px #0b0e0c;
}
.workflow-rail li > div { margin-top: 30px; }
.workflow-rail b { display: block; color: #e9ece7; font-size: 1rem; }
.workflow-rail p { margin: 13px 0 0; color: #858c86; font-size: .84rem; line-height: 1.75; }

.boundaries-grid { display: grid; grid-template-columns: minmax(260px,.55fr) minmax(0,1fr); gap: clamp(54px,10vw,160px); }
.section-heading-vertical { display: block; margin: 0; }
.section-heading-vertical h2 { margin-top: 28px; font-size: clamp(2.2rem,3.6vw,4.2rem); }
.boundary-list { border-top: 1px solid var(--pro-line); }
.boundary-list article { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--pro-line); }
.boundary-symbol { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(185,255,54,.32); color: var(--pro-accent); font: 1rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.boundary-list h3 { margin: 2px 0 0; color: #edf0ea; font-size: 1.04rem; font-weight: 600; }
.boundary-list p { margin: 10px 0 0; color: #858c86; font-size: .9rem; line-height: 1.75; }

.pro-final-cta {
  position: relative; overflow: hidden; min-height: 610px; display: grid; place-items: center;
  background: radial-gradient(circle at 60% 100%,rgba(185,255,54,.12),transparent 40%),#0c0f0d;
}
.cta-grid {
  position: absolute; inset: -20%; opacity: .4;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 72px 72px; transform: perspective(500px) rotateX(62deg) translateY(30%); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top,#000,transparent 74%); mask-image: linear-gradient(to top,#000,transparent 74%);
}
.cta-inner { position: relative; z-index: 1; padding-block: 110px; text-align: center; }
.cta-inner .section-index { margin-bottom: 24px; }
.cta-inner h2 { max-width: 980px; margin: 0 auto; color: #f4f6f2; font-size: clamp(2.5rem,5.4vw,6rem); font-weight: 600; line-height: 1.04; letter-spacing: -.065em; }
.cta-inner > p:not(.section-index) { max-width: 620px; margin: 28px auto 0; color: #9ca39d; line-height: 1.75; }
.cta-action-row { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 36px; }
.cta-action-row > span { color: #858c86; font-size: .8rem; }
.cta-action-row b { color: #e8ece5; font: 600 1.2rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }

@keyframes console-scan { from { transform: translateY(0); } to { transform: translateY(650%); } }

@media (max-width: 1080px) {
  .pro-hero-grid { grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); gap: 42px; }
  .pro-hero h1 { font-size: clamp(3rem,5.8vw,5.2rem); }
  .deliverable-card { grid-column: span 6; }
  .deliverable-card-primary { grid-row: auto; min-height: 430px; }
  .deliverable-card-wide { grid-column: span 12; }
  .workflow-rail { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 54px; }
  .workflow-rail::before { display: none; }
}

@media (max-width: 820px) {
  .pro-hero { min-height: auto; }
  .pro-hero-grid { grid-template-columns: 1fr; padding-top: 80px; padding-bottom: 104px; }
  .pro-hero-copy { max-width: 680px; }
  .pro-visual { width: min(680px,100%); }
  .price-panel { right: 18px; }
  .signal-track { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .signal-track::-webkit-scrollbar { display: none; }
  .section-heading,.boundaries-grid { grid-template-columns: 1fr; }
  .section-heading { gap: 24px; }
  .workflow-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .pro-hero-grid { gap: 42px; padding-top: 62px; padding-bottom: 88px; }
  .eyebrow { align-items: flex-start; flex-wrap: wrap; font-size: .64rem; }
  .eyebrow i { display: none; }
  .pro-hero h1 { font-size: clamp(2.75rem,14vw,4rem); }
  .pro-lead { margin-top: 24px; font-size: .96rem; }
  .pro-hero-actions { align-items: stretch; flex-direction: column; }
  .pro-hero-actions .button-accent { justify-content: space-between; }
  .text-link { align-self: flex-start; }
  .visual-frame { aspect-ratio: 1.12; }
  .visual-label { font-size: .52rem; }
  .visual-label-top { left: 20px; top: 20px; }
  .visual-label-bottom { right: 20px; bottom: 20px; }
  .price-panel { position: relative; right: auto; bottom: auto; width: 100%; min-height: 94px; margin-top: -1px; padding: 20px; }
  .signal-track { min-height: 72px; }
  .pro-section { padding-block: 88px; }
  .section-heading { margin-bottom: 46px; }
  .section-heading h2 { font-size: clamp(2.15rem,11vw,3.1rem); }
  .deliverable-grid { grid-template-columns: 1fr; }
  .deliverable-card,.deliverable-card-primary,.deliverable-card-wide,.compact-card { grid-column: 1; min-height: 0; padding: 30px 26px; }
  .deliverable-card-primary { padding-bottom: 84px; }
  .card-icon { margin-bottom: 64px; }
  .platform-note { left: 26px; bottom: 30px; }
  .workflow-rail { grid-template-columns: 1fr; row-gap: 0; }
  .workflow-rail li { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding: 0 0 34px; }
  .workflow-rail li:not(:last-child)::after { position: absolute; left: 22px; top: 46px; bottom: 0; width: 1px; background: rgba(185,255,54,.26); content: ""; }
  .workflow-rail li > div { margin-top: 4px; }
  .boundary-list article { grid-template-columns: 42px 1fr; gap: 14px; }
  .pro-final-cta { min-height: 560px; }
  .cta-inner { padding-block: 88px; text-align: left; }
  .cta-inner h2 { font-size: clamp(2.5rem,12vw,4rem); }
  .cta-inner > p:not(.section-index) { margin-inline: 0; }
  .cta-action-row { align-items: stretch; flex-direction: column; }
  .cta-action-row .button-accent { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-scan { display: none; }
  .visual-frame img,.button-accent { transition: none; }
}