/*
Theme Name: Technopromo Hub Landing v2 (Staging)
Theme URI: https://technopromohub.com
Author: Technopromo Hub
Description: Premium dark landing redesign for Technopromo Hub. Staging package. Preserves the existing access-request form contract and DK Promo Pool backend integration.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: technopromo-hub
*/

:root{
  --bg:#050506;
  --surface:#090a0d;
  --surface-2:#0d0f14;
  --surface-3:#11131a;
  --text:#f1f0ee;
  --muted:#a1a4ad;
  --muted-2:#7f8490;
  --border:rgba(255,255,255,.075);
  --border-2:rgba(255,255,255,.045);
  --accent:#7d67f6;
  --accent-2:#927ef8;
  --accent-soft:rgba(125,103,246,.12);
  --radius:26px;
  --radius-sm:16px;
  --container:1160px;
  --shadow:0 28px 80px rgba(0,0,0,.46);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.62;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(44rem 24rem at 11% 15%, rgba(77,57,172,.17), transparent 60%),
    radial-gradient(36rem 20rem at 84% 20%, rgba(44,28,118,.12), transparent 57%);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}

.container{width:min(calc(100% - 56px), var(--container));margin-inline:auto}
.site-topbar{
  border-bottom:1px solid var(--border-2);
  color:var(--muted-2);
  background:rgba(0,0,0,.26);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.site-topbar .container{
  min-height:28px;display:flex;align-items:center;justify-content:space-between
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(4,4,5,.84);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-2)
}
.site-header .container{
  min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.brand{display:flex;align-items:center;gap:12px;min-width:180px}
.brand img{width:128px;max-width:100%}
.brand-fallback{
  font-family:Manrope,Inter,sans-serif;
  font-size:22px;
  font-style:italic;
  letter-spacing:.08em;
  font-weight:500
}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  color:#d4d8e0;
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  transition:color .2s ease, opacity .2s ease
}
.nav a:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:999px;
  border:1px solid var(--border);color:var(--text);
  background:transparent;font-size:13px;font-weight:500;letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:#fcfbff;
  background:linear-gradient(90deg,rgba(119,95,245,.96),rgba(140,119,247,.96));
  border-color:rgba(149,131,248,.28);
  box-shadow:0 10px 30px rgba(110,86,233,.22)
}
.btn-primary:hover{box-shadow:0 14px 32px rgba(110,86,233,.28)}

.section{padding:112px 0}
.section-tight{padding:86px 0}
.hero{padding:108px 0 98px}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);gap:68px;align-items:start
}
.eyebrow{
  display:inline-flex;align-items:center;min-height:28px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(125,103,246,.2);background:rgba(125,103,246,.08);
  color:#d2caff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500
}
.hero-copy{position:relative;padding-top:8px}
.hero-copy::after{
  content:"";
  position:absolute;
  width:420px;height:240px;left:-72px;top:16px;
  background:radial-gradient(circle, rgba(115,86,234,.14), transparent 72%);
  z-index:-1;pointer-events:none
}
.hero h1,
.section-title,
.workflow-line,
.cta-title,
.request-card h2,
.security-title,
.footer-brand h3{
  font-family:Manrope,Inter,sans-serif;
}
.hero h1{
  margin:22px 0 18px;
  max-width:720px;
  font-size:clamp(3.35rem,6.2vw,5rem);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:500
}
.hero p.lead{
  margin:0 0 30px;
  max-width:560px;
  color:var(--muted);
  font-size:17px;
  line-height:1.74
}
.hero-actions{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.hero-points{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 34px;max-width:700px;padding:0;margin:0;list-style:none
}
.hero-points li,.bullet-list li{
  position:relative;padding-left:14px;color:#d7dae2;font-size:14px;line-height:1.82
}
.hero-points li::before,.bullet-list li::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);
  position:absolute;left:0;top:.92em
}
.card{
  background:linear-gradient(180deg, rgba(12,13,19,.96), rgba(8,9,13,.98));
  border:1px solid rgba(255,255,255,.055);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.request-card{
  padding:28px 24px 22px;
  backdrop-filter:blur(14px)
}
.request-card h2{
  margin:16px 0 8px;
  font-size:34px;
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:500
}
.request-card p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.65}
.form-group{margin-bottom:14px}
.form-label{
  display:block;margin:0 0 8px;color:#d5d8df;
  font-size:12px;font-weight:500;letter-spacing:.01em
}
.form-control{
  width:100%;min-height:48px;padding:0 15px;border-radius:14px;
  border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);outline:none
}
textarea.form-control{padding:13px 15px;resize:vertical;min-height:104px}
select.form-control{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #aaa7bb 50%),
    linear-gradient(135deg, #aaa7bb 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat
}
.form-control::placeholder{color:#6f7480}
.form-control:focus{
  border-color:rgba(125,103,246,.4);
  box-shadow:0 0 0 3px rgba(125,103,246,.1)
}
.form-control option{
  background:#0c0d12;
  color:#eceef4;
}
.form-note{margin-top:12px;color:var(--muted-2);font-size:12px;line-height:1.55}
.form-message{margin:0 0 16px;padding:12px 14px;border-radius:14px;font-size:13px}
.form-message.success{background:rgba(137,255,180,.08);color:#c8ffd9;border:1px solid rgba(137,255,180,.2)}
.form-message.error{background:rgba(255,100,100,.08);color:#ffd4d4;border:1px solid rgba(255,100,100,.2)}

.two-col{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start
}
.section-title{
  margin:16px 0 0;font-size:clamp(2.45rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.05em;font-weight:500;max-width:560px
}
.section-text{color:var(--muted);font-size:15px;line-height:1.72}
.capabilities-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 38px
}
.workflow-center{text-align:center}
.workflow-line{
  margin:18px auto 12px;font-size:clamp(2.4rem,4vw,3.9rem);line-height:1.02;letter-spacing:-.055em;font-weight:500;max-width:980px;
  position:relative
}
.workflow-line::after{
  content:"";display:block;width:132px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg, transparent, rgba(125,103,246,.86), transparent)
}
.workflow-sub{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.proof-grid{
  display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:56px;align-items:start
}
.stats-card{padding:16px}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stat-tile{
  padding:20px 20px 18px;background:rgba(255,255,255,.018);
  border:1px solid rgba(255,255,255,.045);border-radius:18px
}
.stat-value{font-size:24px;line-height:1;font-weight:500;letter-spacing:-.04em}
.stat-label{margin-top:10px;color:var(--muted);font-size:13px}
.stats-note{margin:16px 4px 2px;color:var(--muted);font-size:13px}
.proof-copy .section-title{max-width:490px}
.network-note{margin-top:14px;color:#8c92a3;font-size:12px}
.security-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:54px;align-items:center
}
.security-copy{padding:34px}
.security-title{
  margin:18px 0 12px;font-size:30px;line-height:1.05;letter-spacing:-.045em;font-weight:500
}
.lock-panel{
  display:flex;align-items:center;justify-content:center;min-height:240px;position:relative
}
.lock-panel::before{
  content:"";position:absolute;inset:22%;border-radius:50%;
  background:radial-gradient(circle, rgba(125,103,246,.23), transparent 70%)
}
.lock-icon{position:relative;width:120px;height:120px;opacity:.96}
.lock-icon::before,.lock-icon::after{content:"";position:absolute;left:50%;transform:translateX(-50%)}
.lock-icon::before{
  top:12px;width:52px;height:40px;border:5px solid var(--accent);border-bottom:none;border-radius:32px 32px 0 0
}
.lock-icon::after{
  top:48px;width:72px;height:60px;border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#d7d8df);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)
}
.lock-keyhole{
  position:absolute;top:71px;left:50%;transform:translateX(-50%);
  width:10px;height:20px;border-radius:999px;background:#161823;z-index:2
}
.cta-card{
  padding:30px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  position:relative;overflow:hidden
}
.cta-card::before{
  content:"";position:absolute;width:420px;height:220px;left:0;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle at left, rgba(125,103,246,.16), transparent 70%);pointer-events:none
}
.cta-title{
  position:relative;margin:16px 0 0;font-size:clamp(2.5rem,4vw,4rem);line-height:1.02;letter-spacing:-.055em;font-weight:500;max-width:560px
}
.site-footer{
  margin-top:108px;border-top:1px solid var(--border-2);padding:64px 0 0
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr .8fr .9fr;gap:40px;align-items:start
}
.footer-title{
  margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d8d1ff;font-weight:500
}
.footer-brand h3{
  margin:0 0 12px;font-size:22px;line-height:1.08;letter-spacing:-.04em;font-weight:500
}
.footer-brand p,.footer-nav a,.footer-contact a,.footer-contact span{
  color:var(--muted);font-size:14px;line-height:1.75
}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:8px}
.footer-nav a:hover,.footer-contact a:hover{color:#fff}
.footer-bottom{
  margin-top:42px;padding:18px 0 28px;border-top:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8f95a4;font-size:12px
}
.footer-bottom a{color:#aeb4c3}
.site-main{min-height:60vh}



.proof-grid--three{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.feedback-intro{
  margin:18px 0 28px;
  max-width:760px;
  color:var(--muted);
  font-size:16px;
}
.rating-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}
.metric-card{
  padding:22px 20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.metric-value{
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(1.15rem,2.4vw,1.7rem);
  line-height:1.15;
  letter-spacing:-.035em;
}
.metric-label{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.testimonial-card{
  padding:22px 22px 20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg, rgba(12,13,19,.96), rgba(8,9,13,.98));
  box-shadow:var(--shadow);
}
.testimonial-stars{
  color:#c9bcff;
  font-size:14px;
  letter-spacing:.18em;
}
.testimonial-quote{
  margin:14px 0 18px;
  color:#f1f0ee;
  font-size:15px;
  line-height:1.72;
}
.testimonial-source{
  font-size:14px;
  font-weight:500;
  color:#e7e9ef;
}
.testimonial-meta{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.01em;
}
.feedback-note{
  margin:18px 2px 0;
  color:#8c92a3;
  font-size:12px;
}

@media (max-width: 1100px){
  .hero-grid,.two-col,.proof-grid,.security-grid,.cta-card,.footer-grid,.testimonials-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hero{padding:88px 0 82px}
  .request-card{max-width:620px}
}
@media (max-width: 768px){
  .container{width:min(calc(100% - 32px), var(--container))}
  .site-topbar{font-size:10px}
  .site-header .container{min-height:72px}
  .brand img{width:116px}
  .hero{padding:66px 0 58px}
  .section{padding:78px 0}
  .section-tight{padding:68px 0}
  .hero h1{font-size:clamp(2.5rem,12vw,3.45rem)}
  .section-title,.cta-title,.workflow-line{font-size:clamp(2.1rem,10vw,2.9rem)}
  .hero-points,.capabilities-grid,.stats-grid,.rating-metrics{grid-template-columns:1fr}
  .hero-actions,.header-actions,.footer-bottom{flex-direction:column;align-items:flex-start}
  .request-card h2{font-size:30px}
}


.form-switch{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:18px 0 20px
}
.form-switch-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:#cfd3dc;
  font-size:13px;
  font-weight:500;
  text-align:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease
}
.form-switch-link:hover{color:#fff}
.form-switch-link.is-active{
  color:#fcfbff;
  background:linear-gradient(90deg,rgba(119,95,245,.96),rgba(140,119,247,.96));
  border-color:rgba(149,131,248,.28);
  box-shadow:0 10px 30px rgba(110,86,233,.18)
}
.inquiry-pane[hidden]{display:none !important}
.form-honeypot{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}

@media (max-width: 768px){
  .hero-actions{flex-wrap:wrap}
  .form-switch{grid-template-columns:1fr}
}


/* ==========================================================================
   Landing v2.1 - refined premium pass (additive overrides)
   Lighter type, more space, cinematic atmosphere, hairline composition.
   Reuses base tokens. Plain hyphen only. No en or em dashes.
   ========================================================================== */

:root{
  --hair:rgba(255,255,255,.08);
  --hair-soft:rgba(255,255,255,.05);
  --ink:#f3f2f0;
  --ink-2:#dfe2e9;
  --dim:#9aa0b0;
  --dim-2:#828897;
  --display:Manrope,Inter,sans-serif;
}

/* ---- Type and rhythm ---- */
body{font-weight:400}
.section{padding:130px 0}
.section-tight{padding:106px 0}
.site-main section[id]{scroll-margin-top:120px}

/* Refined kicker (replaces pill eyebrow) */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;min-height:auto;padding:0;
  border:0;background:none;color:#9a93c8;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:500
}
.eyebrow::before{content:"";width:20px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

/* Headings: lighter, tighter, more refined */
.hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(3rem,5.4vw,4.7rem);line-height:1.04;letter-spacing:-.045em;
  margin:28px 0 24px;max-width:16ch;color:var(--ink)
}
.section-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.05rem,3.3vw,3rem);line-height:1.08;letter-spacing:-.04em;color:var(--ink)
}
.cta-title{font-family:var(--display);font-weight:500;letter-spacing:-.04em}

/* ---- Buttons ---- */
.btn{font-weight:500;letter-spacing:.02em;min-height:46px;padding:0 22px;border-radius:999px;border-color:var(--hair)}
.btn:not(.btn-primary){background:rgba(255,255,255,.012);color:var(--ink-2)}
.btn:not(.btn-primary):hover{border-color:rgba(125,103,246,.4);background:rgba(125,103,246,.06);color:#fff}
.btn-primary{
  color:#fbfaff;background:linear-gradient(180deg,#8b76f4,#6d54e8);
  border:1px solid rgba(150,132,248,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 38px rgba(98,74,224,.3)
}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 46px rgba(98,74,224,.4)}

/* ---- Header and brand ---- */
.site-header .container{min-height:90px}
.site-topbar{font-size:10px;letter-spacing:.14em}
.nav{gap:36px}
.nav a{font-size:12.5px;letter-spacing:.04em;color:#a4aaba}
.nav a:hover{color:#fff}
.brand{gap:13px;min-width:auto}
.brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 1px rgba(125,103,246,.18),0 10px 26px rgba(98,74,224,.25)}
.brand-word{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.16em;line-height:1}
.brand-word-1{color:#f3f2f0}
.brand-word-2{color:var(--accent-2)}

/* ---- Hero: cinematic atmosphere ---- */
.hero{position:relative;overflow:hidden;padding:120px 0 112px}
.hero .container{position:relative;z-index:2}
.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(360px,.74fr);gap:80px;align-items:center}
.hero-copy{padding-top:0}
.hero-copy::after{display:none}
.hero p.lead{font-weight:400;font-size:17px;line-height:1.8;color:var(--dim);max-width:48ch;margin:0 0 36px}
.hero-actions{gap:14px;margin-bottom:36px}
.hero-points{gap:16px 40px;max-width:560px}
.hero-points li{color:var(--ink-2);font-size:14px;line-height:1.7}
.hero-points li::before{background:var(--accent);box-shadow:0 0 10px rgba(125,103,246,.6)}

.hero-atmos{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-ring{position:absolute;border-radius:50%;border:1px solid rgba(125,103,246,.12)}
.hero-ring--1{width:560px;height:560px;right:-130px;top:50%;transform:translateY(-52%)}
.hero-ring--2{width:840px;height:840px;right:-270px;top:50%;transform:translateY(-52%);border-color:rgba(125,103,246,.08)}
.hero-ring--3{width:1180px;height:1180px;right:-450px;top:50%;transform:translateY(-52%);border-color:rgba(125,103,246,.045)}
.hero-orb{position:absolute;right:7%;top:28%;width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 26px 6px rgba(125,103,246,.55)}
.hero-glow{position:absolute;width:820px;height:820px;left:-260px;top:-230px;background:radial-gradient(circle,rgba(125,103,246,.22),rgba(125,103,246,.05) 42%,transparent 68%)}
.hero-beam{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(125,103,246,.5),transparent)}
.hero-wave{position:absolute;left:-2%;width:104%;bottom:26px;height:150px;opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.hero-wave path{filter:drop-shadow(0 0 6px rgba(125,103,246,.5))}

/* ---- Premium glass form card ---- */
.request-card{
  padding:34px 30px 26px;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(21,21,29,.66),rgba(11,11,16,.74));
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 36px 90px rgba(0,0,0,.55)
}
.request-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(125,103,246,.55),transparent)}
.request-card h2{font-family:var(--display);font-weight:500;font-size:29px;letter-spacing:-.03em;color:var(--ink);margin:14px 0 8px}
.request-card p{color:var(--dim);font-size:14px;line-height:1.65}
.form-label{color:#c9cdd6;font-size:11.5px;letter-spacing:.02em;font-weight:500}
.form-control{border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.018);min-height:46px}
.form-control:focus{border-color:rgba(125,103,246,.45);box-shadow:0 0 0 3px rgba(125,103,246,.12)}
.form-switch-link{border-radius:999px;border-color:var(--hair);background:rgba(255,255,255,.015);font-weight:500;font-size:12.5px;color:#c2c6d0}
.form-switch-link.is-active{
  background:linear-gradient(180deg,#8b76f4,#6d54e8);border-color:rgba(150,132,248,.4);color:#fbfaff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 28px rgba(98,74,224,.22)
}
.form-note{color:var(--dim-2);font-size:11.5px}

/* ---- Shared section heads ---- */
.tph-section-head{max-width:680px;margin:0 0 56px}
.tph-section-head .section-title{margin-top:16px}
.tph-lead{margin:18px 0 0;color:var(--dim);font-size:16px;line-height:1.8;max-width:620px}

/* ---- Proof: elegant stat wall ---- */
.tph-proof-head{text-align:center;max-width:720px;margin:0 auto 56px}
.tph-proof-head .section-title{margin:16px auto 0;max-width:680px}
.tph-proof-head .eyebrow{justify-content:center}
.tph-stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:22px;overflow:hidden}
.tph-stat{background:#090a0e;padding:40px 22px;text-align:left;transition:background .25s ease;border:0;border-radius:0;box-shadow:none}
.tph-stat:hover{background:#0c0d12;transform:none;box-shadow:none}
.tph-stat-num{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,3vw,2.7rem);line-height:1;letter-spacing:-.03em;
  color:var(--ink);background:none;-webkit-text-fill-color:var(--ink)
}
.tph-stat-label{margin-top:14px;color:var(--dim);font-size:12.5px;line-height:1.5}

/* ---- How it works: refined process cards ---- */
.tph-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:0}
.tph-step{
  position:relative;padding:32px 28px;border-radius:18px;border:1px solid var(--hair-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004));
  transition:border-color .25s ease,transform .25s ease
}
.tph-step:hover{transform:translateY(-4px);border-color:rgba(125,103,246,.3)}
.tph-step-num{display:inline-flex;align-items:center;gap:9px;padding:0;border:0;background:none;border-radius:0;font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--dim)}
.tph-step-num::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(125,103,246,.7)}
.tph-step-title{margin:18px 0 8px;font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.tph-step-copy{margin:0;color:var(--dim);font-size:14px;line-height:1.72}

/* ---- Capabilities: airy, less boxy ---- */
.tph-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 56px}
.tph-feature{position:relative;padding:26px 0 0;border:0;background:none;border-radius:0;backdrop-filter:none;box-shadow:none;transition:none}
.tph-feature::before{content:"";position:absolute;top:0;left:0;width:46px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);transition:width .3s ease}
.tph-feature:hover{transform:none;background:none;box-shadow:none}
.tph-feature:hover::before{width:100%}
.tph-feature-mark{position:relative;display:block;width:26px;height:26px;border-radius:8px;margin-bottom:20px;border:1px solid rgba(125,103,246,.35);background:rgba(125,103,246,.08);box-shadow:none}
.tph-feature-mark::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:2px;background:var(--accent-2);transform:rotate(45deg)}
.tph-feature-title{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.tph-feature-copy{margin:0;color:var(--dim);font-size:14px;line-height:1.72}

/* ---- Flagship case study: strongest element ---- */
.tph-case{
  position:relative;overflow:hidden;padding:48px;border-radius:28px;
  background:linear-gradient(180deg,rgba(19,18,28,.92),rgba(9,9,13,.97));
  border:1px solid rgba(125,103,246,.18);
  box-shadow:0 50px 120px rgba(0,0,0,.55)
}
.tph-case::before{content:"";position:absolute;width:640px;height:420px;right:-160px;top:-200px;background:radial-gradient(circle,rgba(125,103,246,.2),transparent 68%);pointer-events:none}
.tph-case::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(125,103,246,.65),transparent)}
.tph-case>*{position:relative}
.tph-case-head{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:end;margin-bottom:34px}
.tph-case-title{margin:0 0 14px;font-family:var(--display);font-weight:500;font-size:clamp(1.75rem,2.9vw,2.5rem);letter-spacing:-.035em;color:var(--ink)}
.tph-case-label{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#c4b7f6;border:1px solid rgba(125,103,246,.28);background:rgba(125,103,246,.07);border-radius:999px;padding:6px 14px}
.tph-case-copy{margin:0;color:var(--dim);font-size:15px;line-height:1.75}
.tph-case-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;margin-bottom:34px}
.tph-case-metric{background:rgba(8,8,12,.66);padding:26px 16px;text-align:left;border:0;border-radius:0}
.tph-case-value{font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,2.4vw,2.1rem);letter-spacing:-.03em;color:var(--ink)}
.tph-case-mlabel{margin-top:8px;color:var(--dim-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tph-case-foot{display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center;padding-top:32px;border-top:1px solid var(--hair)}
.tph-toptrack{display:flex;flex-direction:column;gap:10px}
.tph-toptrack-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.tph-toptrack-name{font-family:var(--display);font-weight:500;font-size:23px;letter-spacing:-.02em;color:var(--ink)}
.tph-toptrack-picks{align-self:flex-start;font-size:11px;letter-spacing:.04em;color:#c4b7f6;border:1px solid rgba(125,103,246,.28);background:rgba(125,103,246,.07);border-radius:999px;padding:5px 13px}
.tph-support-eyebrow{display:block;margin-bottom:16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.tph-support-rows{display:flex;flex-direction:column;gap:14px}
.tph-support-row{display:grid;grid-template-columns:80px 1fr 30px;align-items:center;gap:14px;font-size:13px;color:var(--ink-2)}
.tph-support-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.tph-support-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px rgba(125,103,246,.45)}
.tph-support-val{text-align:right;color:var(--ink);font-weight:500}

/* Feedback band */
.tph-feedback{margin-top:52px}
.tph-feedback-title{margin:0 0 22px;font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.testimonials-grid{gap:16px}
.testimonial-card{background:linear-gradient(180deg,rgba(13,13,18,.66),rgba(9,9,13,.78));border:1px solid var(--hair);border-radius:18px;padding:24px;box-shadow:none}
.testimonial-stars{color:#8f7df0;letter-spacing:.3em;font-size:13px}
.testimonial-quote{margin:14px 0 16px;color:var(--ink-2);font-weight:400;font-size:15px;line-height:1.75}
.testimonial-source{font-weight:500;color:#eceef3;font-size:14px}
.testimonial-meta{color:var(--dim-2);font-size:12px}
.tph-feedback-note{color:var(--dim-2);font-size:12px;margin-top:22px}

/* ---- Reports: premium analytics output ---- */
.tph-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.tph-report-list{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px}
.bullet-list li{color:var(--dim);font-size:14px;line-height:1.85}
.bullet-list li::before{background:var(--accent)}
.tph-doc{position:relative;padding:28px;border-radius:22px;background:linear-gradient(180deg,rgba(17,17,24,.92),rgba(9,9,13,.97));border:1px solid var(--hair);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.tph-doc::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(125,103,246,.55),transparent)}
.tph-doc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.tph-doc-brand{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9bdca}
.tph-doc-dot{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--accent-2),#5a3ed4);box-shadow:0 0 12px rgba(125,103,246,.5)}
.tph-doc-tag{font-size:10px;letter-spacing:.12em;color:var(--dim-2);border:1px solid var(--hair);border-radius:999px;padding:3px 10px}
.tph-doc-titles{display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
.tph-doc-title{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.tph-doc-sub{font-size:12px;color:var(--dim-2)}
.tph-doc-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-bottom:22px}
.tph-doc-chip{background:rgba(8,8,12,.7);padding:14px 10px;display:flex;flex-direction:column;gap:5px}
.tph-doc-num{font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink)}
.tph-doc-lab{font-size:10.5px;letter-spacing:.04em;color:var(--dim-2)}
.tph-doc-chart{position:relative;margin-bottom:22px}
.tph-doc-chart-label{display:block;margin-bottom:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.tph-doc-chart svg{display:block;width:100%;height:88px}
.tph-doc-support{display:flex;flex-direction:column;gap:11px}
.tph-doc-srow{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;font-size:11.5px;color:var(--dim)}
.tph-doc-sbar{height:5px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}
.tph-doc-sbar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* ---- Track intelligence: editorial ---- */
.tph-intel-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.tph-intel-head .section-title{margin-top:16px;max-width:12ch}
.tph-intel-body{padding-top:6px}
.tph-intel-copy{margin:0 0 28px;color:var(--dim);font-size:17px;line-height:1.82}
.tph-intel-chips{display:flex;flex-wrap:wrap;gap:10px}
.tph-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.015);color:var(--ink-2);font-size:13px;font-weight:400;transition:border-color .2s ease,color .2s ease,background .2s ease}
.tph-chip:hover{border-color:rgba(125,103,246,.4);color:#fff;background:rgba(125,103,246,.06)}

/* ---- Physical opportunities: elegant secondary ---- */
.tph-physical-card{position:relative;overflow:hidden;padding:48px;max-width:940px;margin:0 auto;border-radius:26px;background:linear-gradient(180deg,rgba(14,14,20,.7),rgba(9,9,13,.82));border:1px solid var(--hair)}
.tph-physical-card::before{content:"";position:absolute;width:460px;height:260px;left:-130px;bottom:-140px;background:radial-gradient(circle,rgba(125,103,246,.12),transparent 70%);pointer-events:none}
.tph-physical-title{position:relative;margin:18px 0 14px;font-family:var(--display);font-weight:500;font-size:clamp(1.65rem,2.6vw,2.15rem);letter-spacing:-.035em;color:var(--ink)}
.tph-physical-copy{position:relative;margin:0 0 24px;color:var(--ink-2);font-weight:400;font-size:16px;line-height:1.75;max-width:680px}
.tph-disclaimer{position:relative;border:1px solid var(--hair);background:rgba(255,255,255,.012);border-radius:16px;padding:20px 22px;max-width:760px}
.tph-disclaimer-label{display:inline-block;margin-bottom:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.tph-disclaimer p{margin:0;color:var(--dim);font-size:12.5px;line-height:1.7}

/* ---- Final CTA: atmospheric ---- */
.tph-final{
  position:relative;overflow:hidden;padding:76px 48px;border-radius:30px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,rgba(16,15,24,.82),rgba(9,9,13,.92));
  border:1px solid rgba(125,103,246,.16)
}
.tph-final-atmos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tph-final-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(125,103,246,.12)}
.tph-final-ring--1{width:520px;height:520px}
.tph-final-ring--2{width:780px;height:780px;border-color:rgba(125,103,246,.07)}
.tph-final-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;height:340px;background:radial-gradient(circle,rgba(125,103,246,.22),transparent 70%)}
.tph-final-eyebrow{position:relative;margin-bottom:18px}
.tph-final-title{position:relative;margin:0;max-width:16ch;font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,3.6vw,3.4rem);letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
.tph-final-sub{position:relative;margin:18px 0 30px;max-width:52ch;color:var(--dim);font-size:16px;line-height:1.7}
.tph-final-actions{position:relative;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---- Footer ---- */
.footer-brand h3{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.footer-title{color:#b9bdca;letter-spacing:.18em}
.footer-brand p,.footer-nav a,.footer-contact a,.footer-contact span{color:var(--dim);font-size:13.5px}
@media (min-width:1101px){ .footer-grid--four{grid-template-columns:1.5fr .8fr .8fr 1fr} }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .nav{display:none}
  .hero{padding:92px 0 84px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-wave,.hero-ring--3{display:none}
  .tph-stat-grid,.tph-case-metrics,.tph-doc-chips{grid-template-columns:repeat(3,1fr)}
  .tph-steps{grid-template-columns:repeat(2,1fr)}
  .tph-feature-grid{grid-template-columns:repeat(2,1fr);gap:40px 44px}
  .tph-case-head,.tph-case-foot,.tph-report-grid,.tph-intel-grid{grid-template-columns:1fr;gap:34px}
  .tph-report-visual{order:-1}
  .tph-report-list{grid-template-columns:repeat(2,1fr)}
  .section{padding:104px 0}
  .section-tight{padding:88px 0}
}
@media (max-width:768px){
  .tph-stat-grid,.tph-case-metrics,.tph-doc-chips{grid-template-columns:repeat(2,1fr)}
  .tph-steps,.tph-feature-grid,.tph-report-list{grid-template-columns:1fr}
  .tph-case,.tph-physical-card{padding:30px}
  .tph-final{padding:48px 26px}
  .tph-final-ring--1,.tph-final-ring--2{display:none}
  .tph-final-actions{flex-direction:column;align-items:stretch;width:100%}
  .request-card{padding:26px 22px}
  .brand-word{font-size:14px;letter-spacing:.14em}
  .hero h1{font-size:clamp(2.5rem,11vw,3.3rem)}
  .section{padding:84px 0}
  .section-tight{padding:72px 0}
}

/* ---- VIP campaign feedback ---- */
.tph-vip-intro{margin-top:16px;max-width:64ch;color:var(--muted)}
.vip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:4px;
  align-items:stretch;
}
.vip-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:26px 24px;
  border-radius:18px;
  border:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(13,13,18,.72),rgba(9,9,13,.8));
}
.vip-quote{
  margin:0 0 18px;
  color:var(--ink-2);
  font-weight:400;
  font-size:15.5px;
  line-height:1.7;
}
.vip-card-foot{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--hair-soft);
}
.vip-name{font-weight:500;color:#eceef3;font-size:14px}
.vip-meta{margin-top:3px;color:var(--dim-2);font-size:12px;letter-spacing:.02em}
.vip-note{margin-top:26px;color:var(--dim-2);font-size:12px;max-width:70ch}
@media (max-width:1100px){ .vip-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:768px){ .vip-grid{grid-template-columns:1fr} }