/* ───────── PROTOTYPE 4 MERGE ADD-ONS ───────── */
/* Who is TreyTech for */
.h4-help { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.08); margin-bottom: 40px; }
.h4-help-row { display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.h4-help-row .hk { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;  color: #12d6ff; }
.h4-help-row p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.74); margin: 0; }
@media (max-width: 699px) { .h4-help-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } }

.h4-who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* logo wordmark "Studios" suffix */
.wm-studios { font-weight: 500; color: rgba(255,255,255,.6); }

/* Founding partners */
.h4-partners { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
.h4-partner { background: #121519; min-height: 120px; display: grid; place-items: center; transition: background .25s; }
.h4-partner:hover { background: rgba(56,182,255,.04); }
.h4-partner .lock {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; 
  color: rgba(255,255,255,.32);
  border: 1px dashed rgba(255,255,255,.16); border-radius: 999px; padding: 10px 18px;
}
.h4-partner-meta { margin-top: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: rgba(255,255,255,.45); }
@media (max-width: 699px) { .h4-partners { grid-template-columns: 1fr 1fr; } }

/* ───────── MOTION: pop + animated gradients ───────── */
@keyframes h4-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes h4-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes h4-glow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.grad-cobalt, .h3-hero h1 .accent, .h4-prog .nm {
  background-size: 220% 100% !important;
  animation: h4-shimmer 6s linear infinite;
}
.h3-hero::before { animation: h4-glow 7s ease-in-out infinite; }

.h3-section, .h3-pull, .h3-close {
  animation: h4-rise .8s cubic-bezier(.2,.8,.2,1) both;
  animation-timeline: view(); animation-range: entry 0% cover 26%;
}

.h3-svc-cell, .h4-who-card, .h4-prog, .h3-node, .h4-why-card {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, background .25s;
}
.h3-svc-cell:hover, .h4-who-card:hover, .h3-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(56,182,255,.4);
  border-color: rgba(56,182,255,.4);
}
.h4-prog:hover { transform: translateY(-4px) scale(1.01); }
.h3-scale-chip { transition: transform .2s, border-color .2s, color .2s; }
.h3-scale-chip:hover { transform: translateY(-2px); border-color: rgba(56,182,255,.6); color: #bff6ff; }
.btn-primary { transition: transform .15s, box-shadow .2s, background .2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -12px rgba(56,182,255,.7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}
.h4-who-card {
  padding: 36px; border-radius: 14px;
  background: #121519; border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 14px;
}
.h4-who-card.enterprise { background: radial-gradient(70% 60% at 80% 15%, rgba(56,182,255,.12) 0%, transparent 60%), #121519; border-color: rgba(56,182,255,.3); }
.h4-who-card .who-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: #12d6ff; }
.h4-who-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,3.4vw,40px); letter-spacing: -.02em; line-height: 1; margin: 0; color: #fff; }
.h4-who-card p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; }
.h4-who-card .who-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;  color: rgba(174,227,255,.85); padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.h4-who-card .btn-text { margin-top: 4px; }
@media (max-width: 699px) { .h4-who { grid-template-columns: 1fr; } }

/* Programs preview (slim) */
.h4-programs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.h4-prog {
  position: relative; overflow: hidden; padding: 40px 36px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 18px; min-height: 160px; justify-content: center;
}
.h4-prog.sos { background: radial-gradient(70% 60% at 80% 20%, rgba(255,138,82,.18) 0%, transparent 60%), #121519; border: 1px solid rgba(255,138,82,.32); }
.h4-prog.start { background: radial-gradient(70% 60% at 80% 20%, rgba(76,223,122,.18) 0%, transparent 60%), #121519; border: 1px solid rgba(76,223,122,.32); }
.h4-prog .chip { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: #fff; padding: 6px 10px; border-radius: 999px; }
.h4-prog.sos .chip { background: rgba(255,138,82,.18); border: 1px solid rgba(255,138,82,.4); }
.h4-prog.start .chip { background: rgba(76,223,122,.18); border: 1px solid rgba(76,223,122,.4); }
.h4-prog .nm { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px,4.5vw,52px); line-height: 1; letter-spacing: -.025em; margin: 0; }
.h4-prog.sos .nm { background: linear-gradient(115deg,#ffd28a,#ff7a2f 50%,#ff4d00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h4-prog.start .nm { background: linear-gradient(115deg,#ccffda,#3dff8f 50%,#00e676); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 699px) { .h4-programs { grid-template-columns: 1fr; } }

/* How We Work — detailed 5-step list */
.h4-steps { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.08); }
.h4-step {
  display: grid; grid-template-columns: 90px 1fr; gap: 36px; align-items: start;
  padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.h4-step:last-child { border-bottom: 0; }
.h4-step .st-n { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -.02em; line-height: 1; }
.h4-step .st-body h4 { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em;  margin: 0 0 6px; color: #fff; }
.h4-step .st-body .st-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: #12d6ff; margin-bottom: 12px; }
.h4-step .st-body p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.68); margin: 0; max-width: 640px; }
@media (max-width: 699px) { .h4-step { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } }

/* studio nodes as links */
a.h3-node { text-decoration: none; cursor: pointer; }
a.h3-node .n-go { margin-top: auto; padding-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;  color: #12d6ff; }
a.h3-node:hover { background: rgba(56,182,255,.05); }

/* TreyTech · Prototype 3 — Launch-phase consulting site
   Calm, editorial, founder-led. Built around the executive overview:
   AI + Strategy + Creative Consulting that scales from individuals to Fortune 500. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #000; color: #fff;
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 999px) { .wrap { padding: 0 28px; } }
@media (max-width: 599px) { .wrap { padding: 0 20px; } }

.eb {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: .28em; 
  color: rgba(255,255,255,.55);
}
.eb .num { color: #12d6ff; margin-right: 16px; }
.grad-cobalt {
  background: linear-gradient(115deg, #bff6ff, #12d6ff, #bff6ff);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: h4-shimmer 5s linear infinite;
}

/* ───────── HEADER ───────── */
.h3-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(0,0,0,.72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.08); }
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.h3-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 18px 40px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand img { width: 22px; height: 22px; }
.brand .wm { font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: -.005em; }
.brand .wm .tm { font-size: 9px; vertical-align: super; color: rgba(255,255,255,.55); margin-left: 2px; }
.h3-nav { display: flex; gap: 36px; justify-content: center; }
.h3-nav a, .h3-drop > .h3-drop-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.005em; color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.h3-nav a:hover, .h3-drop:hover > .h3-drop-t { color: #fff; }
.brand .wm { font-weight: 700 !important; font-size: 18px !important; }
.h3-cta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; 
  color: rgba(255,255,255,.85); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 4px;
  transition: color .2s, border-color .2s; white-space: nowrap;
}
.h3-cta:hover { color: #fff; border-color: #fff; }
@media (max-width: 999px) { .h3-header-inner { padding: 16px 28px; gap: 20px; } .h3-nav { gap: 18px; } }
@media (max-width: 599px) { .h3-header-inner { grid-template-columns: auto auto; } .h3-nav { display: none; } }

/* ───────── HERO ───────── */
.h3-hero { position: relative; padding: 220px 0 130px; overflow: hidden; }
.h3-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 48% at 80% 26%, rgba(56,182,255,.11) 0%, transparent 60%),
    radial-gradient(34% 40% at 8% 92%, rgba(56,182,255,.05) 0%, transparent 60%);
  pointer-events: none;
}
.h3-hero-inner { position: relative; max-width: 1080px; }
.h3-hero .eb { margin-bottom: 32px; }
.h3-hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(46px, 6.6vw, 84px); line-height: 1.03; letter-spacing: -.02em;
  margin: 0; color: #fff; text-wrap: balance; max-width: 15ch;
}
.h3-hero h1 .accent { color: #bff6ff; }
.h3-hero-sub {
  margin: 36px 0 0; max-width: 640px;
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: rgba(255,255,255,.72);
}
.h3-hero-actions { margin-top: 44px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.btn-primary {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; 
  color: #04253b; background: #12d6ff; text-decoration: none;
  padding: 15px 26px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .2s;
}
.btn-primary:hover { background: #5ee9ff; }
.btn-text {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; 
  color: rgba(255,255,255,.7); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s;
}
.btn-text:hover { color: #fff; }
@media (max-width: 599px) { .h3-hero { padding: 160px 0 90px; } }

/* ───────── SECTION SHELL ───────── */
.h3-section { padding: 160px 0; position: relative; background: #000; overflow: hidden; }
.h3-section:not(.alt) { background: #000 !important; }

/* ───────── HEADER DROPDOWNS ───────── */
.h3-drop { position: relative; display: inline-block; }
.h3-drop > .h3-drop-t { cursor: pointer; }
.h3-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 200px; padding: 12px; margin-top: 6px;
  background: rgba(8,10,14,.96); backdrop-filter: blur(18px);
  border: 1px solid rgba(56,182,255,.2); border-radius: 14px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  z-index: 60;
}
.h3-drop:hover .h3-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.h3-drop-menu a {
  font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,.78);
  text-decoration: none; padding: 9px 12px; border-radius: 8px;
  transition: background .18s, color .18s;
}
.h3-drop-menu a:hover { background: rgba(56,182,255,.12); color: #fff; }

/* animated gradient schedule link */
.h3-cta-grad {
  font-family: var(--font-display) !important; font-weight: 700 !important;
  font-size: 14px !important; letter-spacing: .02em !important; text-transform: none !important;
  background: linear-gradient(115deg, #5ee9ff, #9b6bff, #5ee9ff);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  border-bottom: 0 !important;
  animation: h4-shimmer 4s linear infinite;
  display: inline-flex; align-items: center; gap: 7px;
}
.h3-cta-grad .cta-spark { -webkit-text-fill-color: #5ee9ff; color: #5ee9ff; animation: tt-pulse 2.4s ease-in-out infinite; }
.h3-cta-grad:hover { animation: h4-shimmer 2.2s linear infinite; }

/* universal shimmer for every gradient text style, all pages */
.grad-cobalt, .grad-purple, .grad-green,
.xp-h1, .xp-closing-h, .xp-plus,
.h3-hero h1 .accent, .accent {
  background-size: 240% 100% !important;
  animation: h4-shimmer 5s linear infinite;
}

/* ───────── HIGH-TECH MOTION ───────── *//* animated scan line that sweeps each section on enter */
.h3-section::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,182,255,.6), rgba(138,109,255,.5), transparent);
  opacity: .5; animation: tt-scan 7s linear infinite;
}
@keyframes tt-scan { 0% { transform: translateY(0); opacity:0; } 8% { opacity:.6; } 92% { opacity:.6; } 100% { transform: translateY(440px); opacity:0; } }
/* faint animated tech grid on the hero */
.h3-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(56,182,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56,182,255,.05) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(70% 60% at 60% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000 0%, transparent 75%);
  animation: tt-grid 18s linear infinite;
}
@keyframes tt-grid { 0% { background-position: 0 0, 0 0; } 100% { background-position: 48px 48px, 48px 48px; } }
.h3-hero-inner { position: relative; z-index: 1; }
/* COLORS POP: brighten dim text on black sections + sharpen accents */
.h3-section:not(.alt) .lede,
.h3-section:not(.alt) p,
.h3-pull p, .h3-close .sub,
.h3-hero-sub { color: rgba(255,255,255,.96) !important; }
.h3-section .lede, .h3-section p { color: rgba(255,255,255,.92) !important; }
.h3-section:not(.alt) .eb, .h3-hero .eb { color: #5ee9ff !important; }
.h3-ai-tier .who { color: #cf8bff !important; }
.h3-ai-tier .what { color: rgba(255,255,255,.94) !important; }
.node p, .who-card p, .cap-card p, .scale-card p, .h3-card p { color: rgba(255,255,255,.9) !important; }
.node h4, .who-card h3, .cap-card h3, .scale-card h3, .h3-card h3 { color: #fff !important; }

/* START HERE = green theme */
.h3-close { position: relative; overflow: hidden; }
.h3-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(55% 60% at 50% 45%, rgba(76,223,122,.18) 0%, transparent 62%);
  animation: tt-pulse 4.5s ease-in-out infinite;
}
.h3-close > .wrap { position: relative; z-index: 1; }
.h3-close .eb { color: #3dff8f !important; }
.h3-close h2 .accent,
.h3-close .grad-green {
  background: linear-gradient(115deg, #ccffda, #3dff8f, #ccffda);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: h4-shimmer 6s linear infinite;
}
.h3-close .btn-primary { background: #12d6ff; color: #04253b; }

/* PULSING ACCENTS + MOVING GRADIENTS */
@keyframes tt-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.grad-cobalt, .grad-purple, .h3-hero h1 .accent {
  background-size: 240% 100% !important;
  animation: h4-shimmer 5s linear infinite;
}
/* soft pulsing glow ring on primary CTAs */
.btn-primary { position: relative; }
.btn-primary::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, #5ee9ff, #9b6bff, #5ee9ff);
  background-size: 200% 100%;
  opacity: .0; animation: tt-cta-glow 4s ease-in-out infinite, h4-shimmer 5s linear infinite;
  filter: blur(8px);
}
@keyframes tt-cta-glow { 0%,100% { opacity:.0; } 50% { opacity:.5; } }
/* eyebrow accent dot pulse */
.eb .num, .xp-eb .accent { animation: tt-pulse 3s ease-in-out infinite; }

/* TRUE ALTERNATION: keep all sections black (premium dark). */
.h3-section.alt { background: #000 !important; border-top: 1px solid rgba(255,255,255,.06); }
.h3-section.alt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 70% at 82% 18%, rgba(56,182,255,.10) 0%, transparent 62%),
              radial-gradient(50% 60% at 8% 92%, rgba(94,76,255,.06) 0%, transparent 60%);
}
.h3-section.alt > .wrap { position: relative; z-index: 1; }

/* AI-flavored puff: purple (kept dark). */
.h3-section.ai-puff::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 70% at 80% 20%, rgba(138,109,255,.18) 0%, transparent 62%),
              radial-gradient(55% 60% at 12% 90%, rgba(94,76,255,.12) 0%, transparent 60%);
}
.h3-section.ai-puff > .wrap { position: relative; z-index: 1; }
.h3-head {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; margin-bottom: 72px;
}
.h3-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.015em;
  margin: 12px 0 0; color: #fff; text-wrap: balance;
}
.h3-head .lede {
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  color: rgba(255,255,255,.72); margin: 0; max-width: 560px;
}
@media (max-width: 899px) {
  .h3-section { padding: 92px 0; }
  .h3-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 52px; }
}

/* ───────── BELIEFS ───────── */
.h3-beliefs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.08); }
.h3-belief { padding: 40px 32px 0 0; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 12px; }
.h3-belief:last-child { border-right: 0; padding-right: 0; }
.h3-belief:not(:first-child) { padding-left: 32px; }
.h3-belief .b-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.4); }
.h3-belief h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0; color: #fff; }
.h3-belief p { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.65); margin: 0; }
@media (max-width: 899px) {
  .h3-beliefs { grid-template-columns: 1fr; }
  .h3-belief { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 28px 0; }
  .h3-belief:not(:first-child) { padding-left: 0; }
  .h3-belief:last-child { border-bottom: 0; }
}

/* ───────── SERVICES (what we do at launch) ───────── */
.h3-svc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.h3-svc-cell {
  background: #000; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .25s;
}
.h3-svc-cell:hover { background: rgba(255,255,255,.02); }
.h3-svc-cell .s-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: #12d6ff; }
.h3-svc-cell h4 { font-family: var(--font-display); font-weight: 500; font-size: 23px; letter-spacing: -.01em; margin: 0; color: #fff; }
.h3-svc-cell p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.65); margin: 0; }
@media (max-width: 699px) { .h3-svc { grid-template-columns: 1fr; } }

/* ───────── SCALE BAND (individuals → Fortune 500) ───────── */
.h3-scale-track { display: flex; flex-wrap: wrap; gap: 10px; }
.h3-scale-chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; 
  color: rgba(255,255,255,.78); padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
}
.h3-scale-chip.accent { border-color: rgba(56,182,255,.5); color: #bff6ff; }

/* ───────── STUDIO FLOW ───────── */
.h3-flow { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.h3-node { padding: 48px 28px; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 18px; position: relative; transition: background .3s; min-height: 260px; }
.h3-node:last-child { border-right: 0; }
.h3-node:hover { background: rgba(255,255,255,.02); }
.h3-node.ai { background: rgba(138,109,255,.06); }
.h3-node .n-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; color: rgba(255,255,255,.55); }
.h3-node .n-name { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.h3-node.ai .n-name { background: linear-gradient(115deg, #cf8bff 0%, #9b6bff 55%, #6a4dff 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: h4-shimmer 5s linear infinite; }
.h3-node.xp .n-name { background: linear-gradient(115deg, #ffd28a 0%, #ff7a2f 55%, #ff4d00 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: h4-shimmer 5s linear infinite; }
.h3-node.ai .n-go { color: #cf8bff; }
.h3-node.xp .n-go { color: #ff7a2f; }
.h3-node .n-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; }
.h3-flow-meta { margin-top: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: rgba(255,255,255,.45); }
@media (max-width: 899px) {
  .h3-flow { grid-template-columns: 1fr; }
  .h3-node { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .h3-node:last-child { border-bottom: 0; }
}

/* ───────── AI CENTERPIECE ───────── */
/* TreyTech.ai uses a purple gradient throughout. */
.grad-purple {
  background: linear-gradient(115deg, #cf8bff, #9b6bff, #cf8bff);
  background-size: 240% 100%;
  animation: h4-shimmer 5s linear infinite;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: h4-shimmer 6s linear infinite;
}
.h3-ai { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.h3-ai .left { display: flex; flex-direction: column; gap: 24px; }
.h3-ai .eb { color: #cf8bff; }
.h3-ai h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 5vw, 64px); line-height: 1.0; letter-spacing: -.02em; margin: 0; color: #fff; }
.h3-ai .lede { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0; max-width: 480px; }
.h3-ai-tiers { display: flex; flex-direction: column; border-left: 1px solid rgba(138,109,255,.28); padding-left: 32px; }
.h3-ai-tier { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: baseline; }
.h3-ai-tier:last-child { border-bottom: 0; }
.h3-ai-tier .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;  color: rgba(199,148,255,.8); }
.h3-ai-tier .what { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); }
@media (max-width: 899px) { .h3-ai { grid-template-columns: 1fr; gap: 40px; } .h3-ai-tier { grid-template-columns: 1fr; gap: 6px; } }

/* ───────── PROCESS ───────── */
.h3-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.h3-step { background: #000; padding: 32px 26px; display: flex; flex-direction: column; gap: 12px; }
.h3-step .st-n { font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -.02em; line-height: 1; }
.h3-step h4 { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -.005em;  margin: 0; color: #fff; }
.h3-step p { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0; }
@media (max-width: 899px) { .h3-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 499px) { .h3-steps { grid-template-columns: 1fr; } }

/* ───────── PULLQUOTE ───────── */
.h3-pull { text-align: center; padding: 180px 0; position: relative; }
.h3-pull::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 50% 50%, rgba(56,182,255,.10) 0%, transparent 60%); pointer-events: none; }
.h3-pull blockquote { position: relative; margin: 0 auto; max-width: 880px; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.h3-pull .attr { position: relative; margin-top: 36px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;  color: rgba(255,255,255,.45); }
@media (max-width: 599px) { .h3-pull { padding: 110px 0; } }

/* ───────── FOUNDER ───────── */
.h3-founder { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; border-top: 1px solid rgba(255,255,255,.08); padding-top: 72px; }
.h3-founder .meta { display: flex; flex-direction: column; gap: 8px; }
.h3-founder .meta .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: rgba(255,255,255,.45); }
.h3-founder .meta .nm { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: #fff; letter-spacing: -.005em; }
.h3-founder .body p { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0 0 20px; max-width: 640px; }
.h3-founder .body p:last-child { margin-bottom: 0; }
@media (max-width: 899px) { .h3-founder { grid-template-columns: 1fr; gap: 32px; padding-top: 52px; } }

/* ───────── CLOSING CTA ───────── */
.h3-close { text-align: center; padding: 150px 0; position: relative; overflow: hidden; }
.h3-close::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 55% at 50% 45%, rgba(56,182,255,.12) 0%, transparent 62%); pointer-events: none; }
.h3-close-inner { position: relative; }
.h3-close h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 5vw, 68px); line-height: 1.04; letter-spacing: -.02em; margin: 0 auto; max-width: 16ch; text-wrap: balance; color: #fff; }
.h3-close .sub { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 28px auto 0; max-width: 520px; }
.h3-close .h3-hero-actions { justify-content: center; margin-top: 44px; }

/* ───────── FOOTER ───────── */
.h3-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 64px 0 40px; }
.h3-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 48px; }
.h3-footer .f-mark { display: flex; align-items: center; gap: 10px; }
.h3-footer .f-mark img { width: 26px; height: 26px; }
.h3-footer .f-mark .wm { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: #fff; letter-spacing: -.005em; }
.h3-footer .f-tag { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.55); margin: 16px 0 0; max-width: 320px; }
.h3-footer h6 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: rgba(255,255,255,.45); margin: 0 0 14px; }
.h3-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.h3-footer li, .h3-footer a { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.65); text-decoration: none; }
.h3-footer a:hover { color: #fff; }
.h3-footer-copy { border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;  color: rgba(255,255,255,.35); }
@media (max-width: 899px) { .h3-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 599px) { .h3-footer-grid { grid-template-columns: 1fr; } }

.h3-node .n-glyph { display:block; width:34px; height:34px; }
.h3-node .n-glyph svg { width:100%; height:100%; }