/*
Theme Name: Content Creator Labs
Theme URI: https://contentcreatorlabs.in
Author: Content Creator Labs
Author URI: https://contentcreatorlabs.in
Description: A single-page theme for Content Creator Labs — an AI-powered creator training programme and influencer marketing agency. Built around a "pass" metaphor: perforated pricing passes, a WhatsApp-routed enquiry form and a trained-creator roster, in a sand-and-sky palette.
Version: 4.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: content-creator-labs
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, full-width-template, landing-page
*/

/* ============================================================
   01. TOKENS

   Palette: #F9E8A2 sand · #B4E1EB sky · #95BDD7 blue · #78A4CB deep.

   All four are light, so none can carry body text — --ink, a deep navy,
   does the reading work. White on the palette blue is only 2.63:1, so blue
   is a background colour with dark text on it. --blue (#4E7FA6) is that
   blue darkened until white text clears 4.5:1; it highlights the
   Collaborate buttons. --rust is the same tone for small accent copy.
   ============================================================ */
:root{
  --cream:#EDF6FA;
  --sand:#F9E8A2;
  --sand-lo:#F3DC83;
  --orange:#78A4CB;        /* palette deep — a surface colour, dark text on it */
  --orange-lo:#679AC4;
  --peach:#B4E1EB;         /* sky */
  --blue:#4E7FA6;          /* darkened, takes white text — Collaborate buttons */
  --blue-lo:#416B8D;

  --ink:#14314A;
  --ink-2:#1D4160;
  --rust:#4E7FA6;
  --muted:#5B7285;
  --paper:#FFFFFF;
  --tint:#EDF6FA;

  --line:rgba(20,49,74,.14);
  --line-soft:rgba(20,49,74,.08);
  --shadow:0 1px 2px rgba(20,49,74,.05),0 18px 44px -28px rgba(20,49,74,.4);
  --shadow-lg:0 1px 2px rgba(20,49,74,.06),0 40px 80px -40px rgba(20,49,74,.45);

  --notch:var(--cream);

  --font-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1240px;
  --gut:clamp(20px,5vw,56px);
  --sec:clamp(72px,10vw,140px);
  --r:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   02. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:2px}
::selection{background:var(--sand);color:var(--ink)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--cream);padding:12px 20px;font-family:var(--font-mono);font-size:12px}
.skip-link:focus{left:12px;top:12px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative;background:var(--cream);--notch:var(--cream)}
.sec--tint{background:var(--paper);--notch:var(--paper)}
.sec--paper{background:var(--paper);--notch:var(--paper)}
.sec--volt{background:var(--sand);--notch:var(--sand)}

/* a whisper of grain keeps the flat pastels from looking like plastic */
.sec--volt,.sec--tint,.cta,.hero{position:relative}
.sec--volt::after,.sec--tint::after,.cta::after,.hero .grain{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:multiply;
}
.sec--volt > *,.sec--tint > *,.cta > *{position:relative;z-index:1}
.cta::after{z-index:0}

/* ============================================================
   03. TYPE
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.035em;
  margin:0;
  font-variation-settings:"wdth" 92;
  color:var(--ink);
}
.h-xl{font-size:clamp(48px,8.8vw,112px);letter-spacing:-.044em;line-height:.92}
.h-lg{font-size:clamp(35px,5.6vw,68px);letter-spacing:-.038em}
.h-md{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.028em}
.h-sm{font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;line-height:1.15}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 22px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.sec--volt .eyebrow{color:var(--ink);opacity:.6}
.cta .eyebrow{color:var(--ink);opacity:.6}

.lede{font-size:clamp(16px,1.55vw,19px);line-height:1.62;color:var(--muted);max-width:56ch;margin:20px 0 0}
.sec--volt .lede{color:rgba(20,49,74,.72)}
.cta .lede{color:rgba(20,49,74,.74)}

.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* Emphasis sits on a sand highlighter stroke — the palette blues are too
   pale to carry display type. The stroke is very slightly skewed and
   rotated so it reads as a marker sweep rather than a rectangle, and it
   draws itself in from the left on load. */
.hl,.hero h1 em{
  font-style:normal;color:var(--ink);position:relative;display:inline-block;z-index:0;
}
.hl::after,.hero h1 em::after{
  content:"";position:absolute;left:-.08em;right:-.08em;bottom:.02em;height:.47em;
  background:var(--sand);border-radius:6px 8px 7px 5px;z-index:-1;
  transform:skewX(-2deg) rotate(-.5deg);
}
.hero h1 em::after{
  transform-origin:left center;
  animation:sweep .85s var(--ease) .35s both;
}
@keyframes sweep{
  from{transform:skewX(-2deg) rotate(-.5deg) scaleX(0)}
  to{transform:skewX(-2deg) rotate(-.5deg) scaleX(1)}
}

/* hand-drawn underline under "zero" */
.squig{position:relative;display:inline-block;z-index:0}
.squig::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:-.1em;height:.19em;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2014'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2%209%20Q18%203%2034%208.5%20T66%208%20T98%208.5%20T118%206'%20fill='none'%20stroke='%234E7FA6'%20stroke-width='3.2'%20stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%;
  animation:draw .7s var(--ease) .8s both;
}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ============================================================
   04. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border:0;border-radius:var(--r);cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s;
  text-align:center;line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--volt{background:var(--ink);color:var(--paper)}
.btn--volt:hover{background:var(--ink-2);box-shadow:0 12px 28px -14px rgba(20,49,74,.6)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:var(--ink-2)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--wide{width:100%}
.btn--sm{padding:12px 18px;font-size:11px}
/* on the navy footer the primary button flips to sand */
.site-foot .btn--volt{background:var(--sand);color:var(--ink)}
.site-foot .btn--volt:hover{background:var(--sand-lo)}
.cta .btn--ghost{box-shadow:inset 0 0 0 1px rgba(20,49,74,.38);color:var(--ink)}
.cta .btn--volt{background:var(--ink);color:var(--paper)}
.cta .btn--volt:hover{background:var(--ink-2)}

/* ============================================================
   05. HEADER
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,border-color .3s,backdrop-filter .3s,box-shadow .3s;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{background:rgba(237,246,250,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft);box-shadow:0 8px 24px -20px rgba(20,49,74,.5)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{width:44px;height:44px;border-radius:10px;background:#0A0A0A}
.brand-txt{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.02em;line-height:1;text-transform:uppercase;color:var(--ink)}
.brand-txt span{display:block;color:var(--rust);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.24em;font-weight:400;margin-top:4px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s;position:relative;padding-block:6px}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);transition:width .25s var(--ease)}
.nav a:hover::after{width:100%}
.head-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:3px 0;transition:.25s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ============================================================
   06. HERO
   ============================================================ */
.hero{
  position:relative;background:var(--cream);--notch:var(--cream);
  padding-top:clamp(112px,15vw,152px);padding-bottom:clamp(48px,7vw,90px);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-30% -15% auto -15%;height:135%;pointer-events:none;
  background:
    radial-gradient(40% 48% at 12% 10%,rgba(249,232,162,.85),transparent 68%),
    radial-gradient(36% 44% at 90% 4%,rgba(180,225,235,.9),transparent 70%),
    radial-gradient(32% 40% at 64% 92%,rgba(149,189,215,.4),transparent 72%);
  filter:blur(14px);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(20,49,74,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(20,49,74,.08) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 0%,#000,transparent 76%);
  mask-image:radial-gradient(70% 62% at 50% 0%,#000,transparent 76%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,72px);align-items:start}
.hero h1{margin-bottom:10px}
.hero h1 em{display:block}
.hero-sub{max-width:46ch;color:var(--muted)}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.badge{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border-radius:100px;background:var(--paper);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-soft);
}
.badge--live{color:var(--ink);background:var(--sand);box-shadow:none;display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.hero-stats div{padding-right:12px}
.hero-stats b{display:block;font-family:var(--font-display);font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1}
.hero-stats span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.5}

/* social proof row */
.proof{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.stack{display:flex;flex:none}
.stack img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:3px solid var(--paper);margin-left:-14px;box-shadow:0 4px 12px -6px rgba(20,49,74,.6);
}
.stack img:first-child{margin-left:0}
.proof p{margin:0;font-size:14px;color:var(--muted);max-width:34ch;line-height:1.5}
.proof a{color:var(--rust);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--sand)}
.proof a:hover{text-decoration-color:var(--rust)}

/* ============================================================
   07. THE PASS
   ============================================================ */
.pass{
  position:relative;background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.pass__top{padding:26px 26px 22px}
.pass__body{padding:22px 26px 26px}
.pass__tear{position:relative;height:22px;flex:none}
.pass__tear::before,.pass__tear::after{
  content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--notch);transform:translateY(-50%);
}
.pass__tear::before{left:-12px}
.pass__tear::after{right:-12px}
.pass__tear i{
  position:absolute;left:14px;right:14px;top:50%;height:1px;transform:translateY(-50%);
  background-image:linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
  background-size:12px 1px;
}
.pass__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.pass__code{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.barcode{height:34px;margin-top:20px;opacity:.55;
  background-image:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 9px,currentColor 9px 12px,transparent 12px 14px,currentColor 14px 15px,transparent 15px 19px);
}
.pass__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}

/* --- enquiry form pass --- */
.form-pass{box-shadow:var(--shadow-lg)}
.form-pass .pass__top{background:var(--sand);border-radius:15px 15px 0 0;padding:20px 26px}
.form-pass .pass__top .pass__code{color:rgba(20,49,74,.6)}
.form-pass h2{font-size:clamp(22px,2.4vw,27px);margin-top:8px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select{
  width:100%;padding:14px 15px;background:var(--tint);border:1px solid var(--line-soft);border-radius:var(--r);
  color:var(--ink);font-size:15.5px;transition:border-color .2s,background .2s;
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2314314A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer;
}
.field input::placeholder{color:#93A5B3}
.field input:focus,.field select:focus{border-color:var(--rust);background:var(--paper);outline:none}
.form-note{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);margin:14px 0 0;line-height:1.7;text-transform:none}
.form-err{color:#C1443A;font-family:var(--font-mono);font-size:10.5px;margin-top:8px;display:none;letter-spacing:.06em}
.field.has-err input,.field.has-err select{border-color:#C1443A}
.field.has-err .form-err{display:block}
.wa-ico{width:15px;height:15px;flex:none}

/* ============================================================
   08. TICKER
   ============================================================ */
.ticker{background:var(--ink);color:var(--cream);padding:15px 0;overflow:hidden;position:relative;z-index:3}
.ticker__track{display:flex;width:max-content;animation:slide 44s linear infinite}
.ticker span{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:0 22px;display:flex;align-items:center;gap:22px;white-space:nowrap}
.ticker span::after{content:"◆";font-size:8px;color:var(--peach);opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ============================================================
   09. SYSTEM / FEATURES
   ============================================================ */
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head--split{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;max-width:none}
.grid-8{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.cell{background:var(--paper);padding:32px 26px 34px;transition:background .3s;position:relative}
.cell:hover{background:var(--tint)}
.cell__no{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink);margin-bottom:20px;display:inline-block;background:var(--sand);padding:6px 11px;border-radius:100px}
.cell h3{margin-bottom:10px}
.cell p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.65}
.cell::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sand);transition:width .35s var(--ease)}
.cell:hover::after{width:100%}

/* ============================================================
   09b. AI TOOLS
   ============================================================ */
.tool-marquee{margin-bottom:clamp(34px,4vw,52px);display:grid;gap:12px}
.chiprow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chiprow__track{display:flex;gap:12px;width:max-content;animation:slide 52s linear infinite}
.chiprow--rev .chiprow__track{animation-direction:reverse;animation-duration:64s}
.chiprow:hover .chiprow__track{animation-play-state:paused}
.chip{
  flex:none;background:var(--paper);border-radius:100px;padding:11px 20px;
  font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;
  box-shadow:0 2px 10px -6px rgba(20,49,74,.5),inset 0 0 0 1px var(--line-soft);
}
.chip:nth-child(4n+2){background:var(--sand)}
.chip:nth-child(4n+3){background:var(--peach)}

.tool-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.toolcat{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;padding:24px 22px 22px;
  transition:transform .28s var(--ease),box-shadow .28s;
}
.toolcat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.toolcat__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.toolcat__n{
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);
  background:var(--sand);border-radius:100px;min-width:30px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 9px;flex:none;
}
.toolcat ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.toolcat li{font-size:14px;color:var(--muted);line-height:1.4;display:flex;gap:9px;align-items:flex-start}
.toolcat li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;margin-top:7px}
.toolcat__more{color:var(--rust);font-weight:600}
.toolcat__more::before{background:transparent!important;box-shadow:inset 0 0 0 1px var(--orange)}

/* ============================================================
   10. STATS BAND
   ============================================================ */
.statsec{padding-block:clamp(56px,6.5vw,86px)}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.statband div{position:relative;border-top:1px solid rgba(20,49,74,.28);padding-top:22px}
.statband div::before{content:"";position:absolute;top:-2px;left:0;width:38px;height:3px;background:var(--blue);border-radius:2px}
.statnote{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(20,49,74,.55);margin:clamp(30px,3.4vw,42px) 0 0;padding-top:20px;
  border-top:1px solid rgba(20,49,74,.16);
}
.statband b{display:block;font-family:var(--font-display);font-size:clamp(32px,4.6vw,58px);font-weight:800;letter-spacing:-.05em;line-height:.9}
.statband span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:12px;color:rgba(20,49,74,.66);line-height:1.6}

/* ============================================================
   11. PRICING
   ============================================================ */
.passes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.pass--plan{transition:transform .3s var(--ease),box-shadow .3s}
.pass--plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pass--feat{background:var(--ink);color:var(--cream);border-color:transparent;box-shadow:0 30px 64px -30px rgba(20,49,74,.7)}
.pass--feat .plan-name,.pass--feat .price{color:var(--cream)}
.pass--feat .plan-for{color:rgba(237,246,250,.82)}
.pass--feat .price-meta,.pass--feat .inc-label,.pass--feat .pass__code{color:rgba(237,246,250,.64)}
.pass--feat .inc li::before{background:var(--sand);box-shadow:none}
.pass--feat .btn--ink{background:var(--sand);color:var(--ink)}
.pass--feat .btn--ink:hover{background:var(--sand-lo)}
.pass--feat .btn--ghost{box-shadow:inset 0 0 0 1px rgba(237,246,250,.42);color:var(--cream)}
.pass--feat .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cream)}
.pass--feat .barcode{opacity:.4}
@media (min-width:941px){.pass--feat{transform:scale(1.035)}.pass--feat:hover{transform:scale(1.035) translateY(-6px)}}
.pass--feat .pass__code{color:rgba(20,49,74,.6)}
.pass--feat .pass__tear i{background-image:linear-gradient(90deg,rgba(237,246,250,.38) 0 6px,transparent 6px 12px)}
.tagpill{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.pass--feat .tagpill{background:var(--sand);color:var(--ink);border-color:var(--sand)}
.plan-name{font-size:clamp(30px,3.6vw,40px);margin-bottom:10px}
.plan-for{font-size:14px;color:var(--muted);line-height:1.55;min-height:66px;margin:0}
.pass--feat .plan-for{color:rgba(20,49,74,.72)}
.price{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,4.6vw,52px);letter-spacing:-.045em;line-height:1;margin-top:26px;color:var(--ink)}
.price-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.8}
.pass--feat .price-meta{color:rgba(20,49,74,.66)}
.inc-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.inc{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px}
.inc li{display:flex;gap:11px;font-size:14.5px;line-height:1.45;align-items:flex-start}
.inc li::before{content:"";width:11px;height:11px;background:var(--peach);box-shadow:inset 0 0 0 1px var(--orange);flex:none;margin-top:5px;border-radius:3px}
.pass--feat .inc li::before{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.inc li.off{color:#9AA9B5}
.inc li.off::before{background:transparent;box-shadow:inset 0 0 0 1px #C3CFD8}
.price-actions{display:grid;gap:9px}
.guarantee{text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:34px;line-height:2}

/* ============================================================
   12. COMPARISON
   ============================================================ */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.cmp thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-block:12px}
.cmp thead th.is-feat{background:var(--peach)}
.cmp td.is-feat{background:rgba(180,225,235,.34)}
.cmp tbody th{font-weight:400;color:var(--muted);width:30%}
.cmp .muted{color:#9AA9B5}
.cmp .strong{font-weight:600}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:var(--tint)}
.cmp tbody tr:hover td.is-feat{background:rgba(180,225,235,.5)}

/* ============================================================
   13. ROUTE
   ============================================================ */
.route{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.route > div{background:var(--paper);padding:28px 22px 32px}
.route b{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:15px;background:var(--sand);color:var(--ink);padding:6px 11px;border-radius:4px;letter-spacing:-.02em}
.route h3{margin:18px 0 9px;font-size:21px}
.route p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}

/* ============================================================
   14. CREATORS
   ============================================================ */
.creators{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.creator{
  position:relative;background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;padding:26px 24px 24px;text-align:center;
  display:flex;flex-direction:column;transition:transform .28s var(--ease),box-shadow .28s;overflow:hidden;
}
.creator:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.creator__link{display:block;color:inherit}
.creator__pic{width:100%;max-width:210px;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;margin:0 auto 20px;background:var(--tint);border:1px solid var(--line-soft)}
.creator__pic img{width:100%;height:100%;object-fit:cover}
.creator__fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,3vw,30px);color:var(--ink);
  background:linear-gradient(150deg,var(--sand),var(--peach));letter-spacing:-.03em;
}
.creator__ring{position:absolute;inset:-1px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(120,164,203,0);transition:box-shadow .28s}
.creator:hover .creator__ring{box-shadow:inset 0 0 0 3px var(--orange)}
.creator__id{margin-bottom:22px}
.creator__handle{font-size:16px;font-weight:600;letter-spacing:-.01em;word-break:break-word;line-height:1.35}
.creator__meta{margin:8px 0 0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.creator__count{color:var(--rust);font-weight:700;letter-spacing:.08em}
.creator__cta.btn{margin-top:auto;padding:14px 10px;font-size:11px;letter-spacing:.14em;background:var(--blue);color:#FFFFFF}
.creator__cta.btn:hover{transform:none;background:var(--blue-lo)}

/* ============================================================
   15. TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sand),var(--orange))}
.quote__mark{font-family:var(--font-display);font-size:56px;line-height:.6;color:var(--orange);margin-bottom:14px}
.quote p{font-size:16px;line-height:1.62;margin:0 0 26px;flex:1}
.quote footer{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line-soft);padding-top:18px}
.quote__av{width:38px;height:38px;border-radius:50%;background:var(--sand);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px;flex:none}
.quote__who b{display:block;font-size:14px;font-weight:600}
.quote__who span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   16. FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,4vw,64px)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.8vw,20px);letter-spacing:-.02em;line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:31px;width:13px;height:13px;
  background:linear-gradient(var(--rust),var(--rust)) center/13px 2px no-repeat,
             linear-gradient(var(--rust),var(--rust)) center/2px 13px no-repeat;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq p{margin:0 0 26px;font-size:15px;color:var(--muted);line-height:1.7;max-width:52ch;padding-right:24px}

/* ============================================================
   17. FINAL CTA
   ============================================================ */
.cta{background:var(--orange);color:var(--ink);position:relative;overflow:hidden;--notch:var(--orange)}
.cta::before{
  content:"";position:absolute;inset:auto -5% -55% -5%;height:70%;
  background:radial-gradient(50% 100% at 50% 100%,rgba(255,255,255,.3),transparent 70%);
}
.cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center;position:relative;z-index:2}
.cta h2{margin-bottom:20px;color:var(--ink)}
.cta-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.cta-list li{display:flex;gap:11px;font-size:15px;align-items:flex-start;font-weight:500}
.cta-list li::before{content:"→";font-family:var(--font-mono);font-weight:700;flex:none}

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-foot{background:var(--ink);color:var(--cream);padding-top:clamp(56px,7vw,84px);padding-bottom:36px}
.site-foot h4,.site-foot p,.site-foot a{color:inherit}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);padding-bottom:48px}
.foot-logo{width:96px;height:96px;border-radius:14px;margin-bottom:20px;background:#0A0A0A}
.foot-grid h4{font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--peach);margin:0 0 18px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-grid ul a{font-size:14.5px;color:rgba(255,255,255,.72);transition:color .2s}
.foot-grid ul a:hover{color:var(--peach)}
.foot-grid p{font-size:14.5px;color:rgba(255,255,255,.72);margin:0 0 14px;line-height:1.65}
.foot-bar{border-top:1px solid rgba(255,255,255,.16);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-bar p{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0}
.disclaimer{font-size:12px;color:rgba(255,255,255,.5);line-height:1.7;max-width:88ch;margin:0 0 26px;border-left:2px solid rgba(255,255,255,.2);padding-left:16px}

/* Floating WhatsApp */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:var(--orange);color:#FFFFFF;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -12px rgba(20,49,74,.7);transition:transform .25s var(--ease),background .25s;
}
.wa-float:hover{transform:scale(1.08);background:var(--ink-2)}
.wa-float svg{width:27px;height:27px}

/* ============================================================
   19. MOTION
   ============================================================ */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero h1 em::after{animation:none;transform:skewX(-2deg) rotate(-.5deg)}
  .squig::after{animation:none}
}

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-8{grid-template-columns:repeat(2,1fr)}
  .tool-cats{grid-template-columns:repeat(2,1fr)}
  .route{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  .hero-grid,.cta-grid{grid-template-columns:1fr}
  .hero{padding-top:118px}
  .passes{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .quotes{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .nav{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(237,246,250,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft);
    padding:8px var(--gut) 22px;display:none;
  }
  .nav-open .nav{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
  .nav-toggle{display:block}
  .head-cta .btn{padding:12px 15px;font-size:10.5px;letter-spacing:.12em}
  .sec-head--split{grid-template-columns:1fr}
}
@media (max-width:620px){
  .creators{grid-template-columns:repeat(2,1fr);gap:14px}
  .grid-8,.route,.statband,.hero-stats,.tool-cats{grid-template-columns:1fr 1fr}
  .chip{font-size:13px;padding:10px 16px}
  .foot-grid{grid-template-columns:1fr}
  .hero-stats{gap:22px 12px}
  .plan-for{min-height:0}
  .wa-float{right:14px;bottom:14px}
  .brand-txt{display:none}
  .btn-long{display:none}
  .head-in{gap:10px}
  .head-cta{gap:8px}
  .head-cta .btn{padding:12px 13px;font-size:10px;letter-spacing:.1em}
  .brand img{width:42px;height:42px}
}

/* ============================================================
   21. WORDPRESS CORE
   ============================================================ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px;color:var(--muted)}
.sticky,.gallery-caption,.bypostauthor{display:block}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}