:root {
  --ink: #071820;
  --ink-soft: #12313a;
  --paper: #f2f6f3;
  --white: #ffffff;
  --mint: #64f2c2;
  --mint-deep: #24c996;
  --sky: #82d9ff;
  --violet: #9d8cff;
  --amber: #ffca76;
  --line: rgba(7, 24, 32, 0.13);
  --line-dark: rgba(255, 255, 255, 0.12);
  --page: clamp(22px, 5vw, 78px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: var(--ink); background: var(--mint); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.topbar { position: absolute; z-index: 20; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 86px; padding: 0 var(--page); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.1); }
.studio-link { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.studio-link i { color: rgba(255,255,255,.48); font-style: normal; font-weight: 500; }
.studio-mark { display: grid; width: 32px; height: 32px; place-items: center; color: var(--ink); background: var(--white); border-radius: 50%; font-size: 14px; font-weight: 900; }
.topbar-action { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.topbar-action span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }

.hero { position: relative; display: grid; min-height: 860px; padding: 170px var(--page) 90px; color: var(--white); background: var(--ink); grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr); gap: clamp(40px, 7vw, 120px); overflow: hidden; }
.hero::after { position: absolute; right: -12%; bottom: -52%; width: 64vw; height: 64vw; content: ""; border: 1px solid rgba(100,242,194,.11); border-radius: 50%; box-shadow: 0 0 0 70px rgba(100,242,194,.028), 0 0 0 150px rgba(100,242,194,.018); }
.hero-glow { position: absolute; top: -220px; left: 30%; width: 650px; height: 650px; background: radial-gradient(circle, rgba(30,142,127,.22), transparent 67%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; max-width: 690px; }
.product-lockup { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 68px; font-size: 22px; font-weight: 850; letter-spacing: -.045em; }
.product-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border: 1px solid rgba(100,242,194,.6); border-radius: 9px; transform: rotate(-8deg); }
.product-icon i { position: absolute; width: 3px; height: 13px; background: var(--mint); border-radius: 4px; }
.product-icon i:nth-child(1) { transform: translateX(-6px) scaleY(.55); }
.product-icon i:nth-child(3) { transform: translateX(6px) scaleY(.78); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: rgba(255,255,255,.58); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 1px; background: var(--mint); }
.eyebrow.dark { color: rgba(7,24,32,.52); }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(62px, 7vw, 112px); font-weight: 790; letter-spacing: -.078em; line-height: .89; }
.hero h1 em { color: var(--mint); font-style: normal; }
.hero-lead { max-width: 610px; margin: 36px 0 0; color: rgba(255,255,255,.66); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 28px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 750; transition: transform 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--mint); }
.button-primary:hover { background: #7dface; }
.button-secondary { color: var(--white); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.03); }
.access-note { display: flex; align-items: center; gap: 9px; margin-top: 23px; color: rgba(255,255,255,.42); font-size: 11px; }
.access-note span { color: var(--mint); font-size: 8px; }

.call-stage { position: relative; z-index: 3; align-self: center; min-height: 630px; padding: 26px 34px 30px; background: linear-gradient(145deg, rgba(25,63,70,.92), rgba(7,24,32,.96)); border: 1px solid rgba(255,255,255,.13); border-radius: 34px; box-shadow: 0 50px 120px rgba(0,0,0,.38); overflow: hidden; }
.call-stage::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 50% 34%, rgba(100,242,194,.12), transparent 34%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: auto, 28px 28px, 28px 28px; pointer-events: none; }
.stage-topline { position: relative; display: grid; align-items: center; color: rgba(255,255,255,.45); font-size: 10px; font-weight: 650; letter-spacing: .04em; grid-template-columns: 1fr auto 1fr; }
.stage-topline b { padding: 8px 12px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); border-radius: 999px; font-size: 9px; text-transform: uppercase; }
.stage-topline i { justify-self: end; color: var(--mint); font-style: normal; font-variant-numeric: tabular-nums; }
.customer-orbit { position: relative; display: grid; width: 194px; height: 194px; margin: 66px auto 18px; place-items: center; }
.orbit-ring { position: absolute; border: 1px solid rgba(100,242,194,.25); border-radius: 50%; }
.orbit-one { inset: 0; border-top-color: var(--mint); transform: rotate(28deg); }
.orbit-two { inset: 22px; border-right-color: var(--sky); transform: rotate(-18deg); }
.customer-avatar { position: relative; display: grid; width: 126px; height: 126px; place-items: center; color: #15333b; background: linear-gradient(145deg, #d4fbef, #87cdbc); border: 7px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 70px rgba(100,242,194,.16); font-size: 35px; font-weight: 850; letter-spacing: -.06em; }
.customer-avatar span { position: absolute; right: 1px; bottom: 7px; width: 16px; height: 16px; background: var(--mint); border: 3px solid var(--ink-soft); border-radius: 50%; }
.customer-name { position: relative; display: grid; gap: 5px; text-align: center; }
.customer-name strong { font-size: 19px; letter-spacing: -.03em; }
.customer-name span { color: rgba(255,255,255,.47); font-size: 11px; }
.voice-wave { position: relative; display: flex; height: 50px; align-items: center; justify-content: center; gap: 5px; margin: 22px 0 4px; }
.voice-wave i { width: 3px; height: var(--h); background: linear-gradient(var(--mint), var(--sky)); border-radius: 8px; opacity: .78; animation: pulse 1300ms ease-in-out infinite alternate; }
.voice-wave i:nth-child(3n) { animation-delay: -500ms; }.voice-wave i:nth-child(2n) { animation-delay: -900ms; }
@keyframes pulse { to { transform: scaleY(.4); opacity: .4; } }
.call-stage blockquote { position: relative; max-width: 460px; margin: 10px auto 20px; color: rgba(255,255,255,.88); font-size: 15px; font-weight: 560; line-height: 1.55; text-align: center; }
.call-signals { position: relative; display: flex; justify-content: center; gap: 8px; }
.call-signals span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: rgba(255,255,255,.56); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.signal-dot { width: 5px; height: 5px; background: var(--sky); border-radius: 50%; }.signal-dot.positive { background: var(--mint); }.signal-dot.amber { background: var(--amber); }
.mic-button { position: relative; display: grid; width: 60px; height: 60px; margin: 27px auto 6px; padding: 0; color: var(--ink); background: var(--mint); border: 0; border-radius: 50%; place-items: center; }
.mic-button::after { position: absolute; inset: -7px; content: ""; border: 1px solid rgba(100,242,194,.35); border-radius: 50%; }
.mic-button svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mic-label { position: relative; display: block; color: rgba(255,255,255,.45); font-size: 9px; text-align: center; text-transform: uppercase; }
.coach-chip { position: absolute; right: 22px; bottom: 20px; left: 22px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; color: rgba(255,255,255,.58); background: rgba(5,18,24,.74); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; font-size: 9px; line-height: 1.45; }
.coach-chip span { flex: none; padding: 5px 7px; color: var(--ink); background: var(--amber); border-radius: 6px; font-size: 8px; font-weight: 850; text-transform: uppercase; }

.proof-strip { display: grid; min-height: 150px; padding: 28px var(--page); align-items: center; background: var(--mint); grid-template-columns: .8fr repeat(4, 1fr); }
.proof-strip > p { margin: 0; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.proof-strip > div { display: flex; align-items: center; gap: 14px; min-height: 60px; padding-left: 24px; border-left: 1px solid rgba(7,24,32,.18); }
.proof-strip b { color: rgba(7,24,32,.34); font-size: 12px; }
.proof-strip span { font-size: 10px; line-height: 1.55; text-transform: uppercase; }
.proof-strip strong { font-size: 12px; }

.section { padding: 130px var(--page); }
.section-heading { display: grid; max-width: 1180px; margin: 0 auto 70px; grid-template-columns: 1fr 1fr; column-gap: 70px; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2, .measurement-copy h2, .closing h2 { margin: 0; font-size: clamp(44px, 5.4vw, 78px); font-weight: 780; letter-spacing: -.068em; line-height: .98; }
.section-heading > p:last-child { align-self: end; margin: 0; color: rgba(7,24,32,.58); font-size: 16px; line-height: 1.7; }
.process { background: var(--paper); }
.process-grid { display: grid; max-width: 1440px; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); }
.process-card { position: relative; min-height: 540px; padding: 32px 34px 38px; border-right: 1px solid var(--line); }
.process-card:last-child { border-right: 0; }
.process-card.featured { background: var(--white); }
.card-number { color: rgba(7,24,32,.35); font-size: 11px; font-weight: 850; }
.process-card h3 { margin: 34px 0 12px; font-size: 25px; letter-spacing: -.045em; }
.process-card p { margin: 0; color: rgba(7,24,32,.58); font-size: 14px; line-height: 1.72; }
.brief-visual { position: relative; display: grid; height: 220px; margin-top: 38px; padding: 44px 34px 26px; background: var(--ink); border-radius: 20px; grid-template-columns: 1fr 1fr; gap: 7px; overflow: hidden; }
.brief-visual::before { position: absolute; top: 0; right: 0; left: 0; height: 26px; content: ""; background: rgba(255,255,255,.05); }
.brief-visual i { position: absolute; top: 10px; width: 5px; height: 5px; background: rgba(255,255,255,.25); border-radius: 50%; }.brief-visual i:nth-child(1){left:14px}.brief-visual i:nth-child(2){left:24px}.brief-visual i:nth-child(3){left:34px}
.brief-visual b { grid-column: 1/-1; color: var(--white); font-size: 17px; }
.brief-visual em { display: flex; align-items: end; padding: 13px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.055); border-radius: 10px; font-size: 9px; font-style: normal; }
.people-visual { position: relative; display: flex; height: 220px; align-items: center; justify-content: center; margin-top: 38px; }
.people-visual span { display: grid; width: 92px; height: 92px; margin-left: -17px; place-items: center; color: var(--ink); background: var(--mint); border: 6px solid var(--white); border-radius: 50%; font-size: 19px; font-weight: 850; box-shadow: 0 14px 32px rgba(8,41,46,.1); }
.people-visual span:nth-child(2) { background: var(--sky); }.people-visual span:nth-child(3) { background: var(--violet); }.people-visual span:nth-child(4) { color: rgba(255,255,255,.7); background: var(--ink-soft); }
.level-visual { display: flex; height: 220px; align-items: center; justify-content: center; margin-top: 38px; }
.level-visual span { display: grid; flex: none; width: 52px; height: 52px; place-items: center; color: rgba(7,24,32,.35); border: 1px solid var(--line); border-radius: 50%; font-size: 13px; font-weight: 850; }
.level-visual i { width: 32px; height: 1px; background: var(--line); }.level-visual .done { color: var(--ink); background: var(--mint); border-color: var(--mint); }.level-visual .current { color: var(--white); background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 7px rgba(100,242,194,.3); }

.measurement { display: grid; color: var(--white); background: var(--ink); grid-template-columns: 1.14fr .86fr; gap: clamp(60px, 8vw, 130px); }
.wheel-panel { align-self: center; }
.wheel-card { max-width: 720px; padding: 28px; color: var(--ink); background: #f8fbf9; border-radius: 30px; box-shadow: 0 40px 100px rgba(0,0,0,.25); }
.wheel-head { display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; }.wheel-head b { color: #187d60; }
.wheel-layout { display: grid; align-items: center; padding: 36px 0 28px; grid-template-columns: 1fr 1fr; gap: 28px; }
.competency-wheel { position: relative; display: grid; width: 260px; height: 260px; margin: auto; background: conic-gradient(from -15deg, var(--mint) 0 14%, #daf8ee 14% 16.66%, var(--sky) 16.66% 30%, #dceff8 30% 33.33%, var(--violet) 33.33% 46%, #e5e0fa 46% 50%, var(--amber) 50% 63%, #f8edd9 63% 66.66%, #5fdbc1 66.66% 80%, #d8f2ec 80% 83.33%, #68bfd6 83.33% 96%, #dcedf0 96%); border-radius: 50%; }
.competency-wheel::before { position: absolute; inset: 45px; content: ""; background: #f8fbf9; border-radius: 50%; }
.competency-wheel div { position: relative; z-index: 1; display: grid; place-content: center; text-align: center; }.competency-wheel strong { font-size: 54px; letter-spacing: -.07em; }.competency-wheel span { color: rgba(7,24,32,.44); font-size: 10px; text-transform: uppercase; }
.wheel-layout ul { margin: 0; padding: 0; list-style: none; }
.wheel-layout li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 11px; }.wheel-layout li:last-child { border-bottom: 0; }.wheel-layout li span { color: rgba(7,24,32,.58); }.wheel-layout li b { font-variant-numeric: tabular-nums; }
.wheel-insight { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #e6f8f2; border-radius: 14px; }.wheel-insight i { display: grid; flex: none; width: 28px; height: 28px; place-items: center; color: var(--ink); background: var(--mint); border-radius: 50%; font-style: normal; }.wheel-insight p { margin: 0; color: rgba(7,24,32,.6); font-size: 10px; line-height: 1.55; }.wheel-insight span { display: block; color: var(--ink); font-weight: 800; text-transform: uppercase; }
.measurement-copy { align-self: center; max-width: 620px; }
.measurement-copy > p:not(.eyebrow) { margin: 30px 0 0; color: rgba(255,255,255,.59); font-size: 16px; line-height: 1.75; }
.feature-list { display: grid; gap: 20px; margin: 42px 0 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 14px; }.feature-list i { display: grid; flex: none; width: 25px; height: 25px; place-items: center; color: var(--ink); background: var(--mint); border-radius: 50%; font-size: 11px; font-style: normal; }.feature-list span { color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.5; }.feature-list strong { display: block; color: var(--white); font-size: 13px; }

.principles { background: #e8eeea; }
.section-heading.compact { display: block; margin-bottom: 72px; }
.principle-grid { display: grid; max-width: 1440px; margin: 0 auto; border-top: 1px solid var(--line); grid-template-columns: repeat(4,1fr); }
.principle-grid article { min-height: 310px; padding: 32px 30px; border-right: 1px solid var(--line); }.principle-grid article:last-child { border-right: 0; }
.principle-icon { display: grid; width: 46px; height: 46px; place-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 14px; font-size: 21px; }
.principle-grid h3 { margin: 78px 0 12px; font-size: 20px; letter-spacing: -.04em; }.principle-grid p { margin: 0; color: rgba(7,24,32,.55); font-size: 13px; line-height: 1.65; }

.closing { position: relative; display: grid; min-height: 680px; padding: 120px var(--page); place-content: center; color: var(--white); background: #0e3037; text-align: center; overflow: hidden; }
.closing > * { position: relative; z-index: 2; }.closing .eyebrow { justify-content: center; }.closing h2 { font-size: clamp(58px, 7vw, 104px); }.closing > p:not(.eyebrow) { max-width: 590px; margin: 30px auto; color: rgba(255,255,255,.56); font-size: 15px; line-height: 1.7; }.closing .button { justify-self: center; }
.closing-orbit { position: absolute; top: 50%; left: 50%; width: 660px; height: 660px; border: 1px solid rgba(100,242,194,.12); border-radius: 50%; transform: translate(-50%,-50%); }.closing-orbit::before,.closing-orbit::after { position: absolute; content:""; border: 1px solid rgba(100,242,194,.08); border-radius: 50%; }.closing-orbit::before{inset:90px}.closing-orbit::after{inset:190px}.closing-orbit i { position: absolute; width: 7px; height: 7px; background: var(--mint); border-radius: 50%; }.closing-orbit i:nth-child(1){top:30px;left:210px}.closing-orbit i:nth-child(2){right:50px;bottom:190px;background:var(--sky)}.closing-orbit i:nth-child(3){bottom:70px;left:120px;background:var(--violet)}

footer { display: grid; min-height: 190px; padding: 52px var(--page); align-items: end; color: rgba(255,255,255,.5); background: #061218; grid-template-columns: 1fr 1fr auto; gap: 24px; font-size: 11px; }footer > a { color: var(--white); font-size: 18px; font-weight: 800; letter-spacing: -.04em; }footer p { margin: 0; }footer div { display: flex; gap: 20px; }footer div a:hover { color: var(--white); }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 140px; }
  .hero-copy { max-width: 800px; }.product-lockup { margin-bottom: 48px; }.call-stage { width: min(760px,100%); margin: 0 auto; }
  .proof-strip { grid-template-columns: repeat(2,1fr); gap: 12px; }.proof-strip > p { grid-column:1/-1; }.proof-strip > div:nth-child(2),.proof-strip > div:nth-child(4){border-left:0;padding-left:0}
  .measurement { grid-template-columns: 1fr; }.wheel-card { margin: 0 auto; }.measurement-copy { max-width: 760px; }
  .principle-grid { grid-template-columns: repeat(2,1fr); }.principle-grid article:nth-child(2){border-right:0}.principle-grid article{border-bottom:1px solid var(--line)}
}

@media (max-width: 760px) {
  :root { --page: 20px; }
  .topbar { min-height: 70px; }.studio-link i { display:none }.topbar-action { font-size: 0 }.topbar-action span { font-size:13px }
  .hero { min-height: auto; padding-top: 116px; gap: 62px; }.hero h1 { font-size: clamp(53px,17vw,78px); }.hero-lead { font-size:16px }.product-lockup { margin-bottom: 40px; }
  .call-stage { min-height: 600px; padding: 22px 16px; border-radius: 24px; }.stage-topline { grid-template-columns: 1fr 1fr }.stage-topline b { display:none }.customer-orbit { margin-top:54px }.call-signals span:nth-child(2){display:none}.coach-chip{right:14px;left:14px}
  .proof-strip { padding-top:34px;padding-bottom:34px;grid-template-columns:1fr }.proof-strip > div{padding:14px 0;border-left:0;border-top:1px solid rgba(7,24,32,.16)}
  .section { padding-top: 88px; padding-bottom: 88px; }.section-heading { display:block;margin-bottom:46px }.section-heading h2,.measurement-copy h2{font-size:45px}.section-heading > p:last-child{margin-top:25px}
  .process-grid { grid-template-columns: 1fr; }.process-card{min-height:auto;padding:28px 20px 42px;border-right:0;border-bottom:1px solid var(--line)}.process-card:last-child{border-bottom:0}.process-card h3{margin-top:18px}
  .wheel-card { padding:18px;border-radius:22px }.wheel-layout{grid-template-columns:1fr}.competency-wheel{width:230px;height:230px}.wheel-insight{align-items:flex-start}
  .principle-grid { grid-template-columns:1fr }.principle-grid article{min-height:260px;border-right:0}.principle-grid h3{margin-top:54px}
  .closing { min-height:620px }.closing h2{font-size:55px}.closing-orbit{width:540px;height:540px}
  footer { grid-template-columns:1fr;align-items:start }footer div{margin-top:20px}
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto }.voice-wave i{animation:none}.button{transition:none} }