:root{
  --bg:#07090c;           /* deep black */
  --panel:#0d1117;        /* card background */
  --muted:#9aa5b1;
  --text:#e9eef3;
  --accent:#9bff45;       /* neon green */
  --accent-2:#b7ff73;
  --danger:#ff4d4d;
  --radius:20px;
  --shadow:0 0 40px rgba(155,255,69,.15), 0 0 3px rgba(155,255,69,.35) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 70% -10%, rgba(155,255,69,.06), transparent 60%) , var(--bg);
  line-height:1.5;
}

/* Layout helpers */
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding:84px 0}
.section--boxed{background:linear-gradient(0deg, rgba(155,255,69,.05), rgba(155,255,69,.02)); border-top:1px solid rgba(155,255,69,.12); border-bottom:1px solid rgba(155,255,69,.12)}
.section--cta{padding:96px 0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(7,9,12,.75); backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(155,255,69,.14);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.brand-logo{height:34px; filter:drop-shadow(0 0 10px rgba(155,255,69,.35))}
.nav{display:flex; align-items:center; gap:22px}
/* before */
.nav a{ color: var(--text); text-decoration:none; font-weight:600; opacity:.9 }

/* after */
.nav a:not(.cta--nav){ color: var(--text); text-decoration:none; font-weight:600; opacity:.9 }
.nav a:hover{color:var(--accent)}
.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:.25s}

ul.nav { list-style: none; margin: 0; padding: 0; }
ul.nav > li { display: inline-flex; }

/* Buttons */
.btn{
  display:inline-block; white-space:nowrap;
  padding:12px 18px; border-radius:999px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#041104; font-weight:800; text-decoration:none; letter-spacing:.2px;
  box-shadow:0 8px 30px rgba(155,255,69,.25), 0 0 0 1px rgba(155,255,69,.35) inset;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 36px rgba(155,255,69,.35), 0 0 0 1px rgba(155,255,69,.5) inset}
.btn--ghost{
  background:transparent; color:var(--text);
  border:1px solid rgba(155,255,69,.5);
  box-shadow:var(--shadow);
}
.btn--ghost:hover{background:rgba(155,255,69,.08)}
.btn--sm{padding:9px 14px; font-weight:700}

/* Hero */
.hero{position:relative; text-align:center; padding-top:120px}
.hero-logo{width:min(520px, 80%); margin-inline:auto; display:block}
.hero-title{font:800 clamp(28px, 4vw, 40px)/1.15 "Space Grotesk", Inter, sans-serif; margin:18px 0 6px}
.hero-sub{max-width:760px; margin:0 auto 22px; color:var(--muted)}
.hero-ctas{display:flex; justify-content:center; gap:12px}
.hero-glow{
  position:absolute; inset:auto 0 -140px 0; height:260px; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(155,255,69,.24), rgba(155,255,69,0));
  filter:blur(30px);
}

/* Titles */
.section-title{
  font:800 clamp(24px, 3.2vw, 34px)/1.15 "Space Grotesk", Inter, sans-serif;
  text-shadow:0 0 24px rgba(155,255,69,.2);
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(155,255,69,.25);
  border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow);
}
.card-badge{
  display:inline-block; font-size:12px; letter-spacing:.4px; font-weight:800; color:#041104;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
}
.card h3{margin:6px 0 10px; font-weight:800}
.price{font-weight:800; margin:6px 0 14px}
.price span{font-weight:600; color:var(--muted)}
.list{margin:0 0 18px 0; padding:0 0 0 18px}
.list li{margin:6px 0}
.card-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Fit grid */
.fit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px}
.fit-item{
  background:var(--panel); border:1px solid rgba(155,255,69,.2); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow)
}
.fit-emoji{font-size:28px; margin-bottom:6px}

/* Clients */
.clients-bar{
  background:var(--panel); border:1px solid rgba(155,255,69,.22); border-radius:var(--radius);
  padding:18px; display:flex; justify-content:center; box-shadow:var(--shadow)
}
.clients-bar img{width:min(900px, 100%); filter:grayscale(1) brightness(.9); opacity:.85}
.clients-bar img:hover{filter:none; opacity:1}

/* CTA */
.cta-box{
  display:grid; grid-template-columns:160px 1fr; align-items:center; gap:18px;
  background:var(--panel); border:1px solid rgba(155,255,69,.25); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow)
}
.cta-logo{width:140px; filter:drop-shadow(0 0 12px rgba(155,255,69,.4))}
.cta-actions{display:flex; gap:12px; margin-top:6px}

/* Footer */
.site-footer{padding:36px 0; background:rgba(7,9,12,.9)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer-logo{height:30px; filter:drop-shadow(0 0 10px rgba(155,255,69,.3))}
.footer-links{display:flex; gap:18px}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--accent)}
.footnote{color:var(--muted); font-size:14px; margin:0}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 980px){
  .cards{grid-template-columns:1fr 1fr}
  .fit-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav{position:fixed; inset:60px 12px auto 12px; background:rgba(13,17,23,.98);
       padding:14px; border-radius:12px; flex-direction:column; gap:12px; display:none;
       border:1px solid rgba(155,255,69,.18)}
  .nav.open{display:flex}
  .nav-toggle{display:inline-flex}
  .cards{grid-template-columns:1fr}
  .fit-grid{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr; text-align:center}
  .cta-logo{margin:auto}
}
/* --- hotfix: layout guards --- */
:root{
  --ghst-green:#B6FF66;
  --ghost-bg:#0b0f12;
  --ghost-card:#12171c;
  --ghost-fg:#e8f0f5;
}

html,body{background:#0b0f12;color:var(--ghost-fg);}

.container{max-width:1100px;margin:0 auto;padding:0 20px;}

.section{padding:56px 0;border-top:1px solid rgba(255,255,255,.06);}

.hero{
  padding:40px 0 16px;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(182,255,102,.08), transparent 60%);
}
.hero .brand{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.hero .brand img{
  height:72px;/* keeps logo tidy */
  width:auto;max-width:100%;
}
.hero h1{
  font-size:clamp(28px,5vw,40px);margin:10px 0 6px;
  letter-spacing:.4px;
}
.hero p.lede{opacity:.9;margin:0 0 14px;font-size:1.05rem;}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-block;padding:10px 16px;border-radius:10px;
  background:linear-gradient(180deg,#1b242b,#12171c);
  border:1px solid rgba(255,255,255,.12);
  color:#e8f0f5;text-decoration:none;font-weight:600
}
.btn-primary{
  background:linear-gradient(180deg,#2a351f,#182212);
  border-color:rgba(182,255,102,.35);
  box-shadow:0 0 0 1px rgba(182,255,102,.15) inset, 0 10px 24px rgba(182,255,102,.12);
}
.btn:hover{transform:translateY(-1px)}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr; }
@media (min-width:880px){ .grid-2{grid-template-columns:1fr 1fr;} }

.card{
  background:var(--ghost-card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:18px 16px
}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card ul{margin:8px 0 0;padding-left:20px}
.card li{margin:6px 0}

.badge{
  display:inline-block;font-size:.78rem;padding:4px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:#0f1418; color:#cfead1;
}

/* keep any inline logos under control */
img.inline-logo{height:28px;width:auto;max-width:100%}

/* footer */
.footer{padding:28px 0 40px; opacity:.85;font-size:.95rem}
.footer a{color:#cfead1}
/* ===== Pricing page helpers ===== */
.p-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 960px) {
  .p-grid { grid-template-columns: 1fr; }
}

.p-card {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line, #1e2629);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 520px;               /* equal-ish heights */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 12px 38px rgba(0,0,0,0.35);
}

.p-card__pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 0%, rgba(182,255,90,0.12) 0%, rgba(182,255,90,0.05) 40%, transparent 70%);
  font-size: 13px;
  margin-bottom: 16px;
}

.p-card__title { font-size: 28px; line-height: 1.1; margin: 8px 0 8px; }
.p-card__price { font-size: 34px; font-weight: 800; color: var(--glow,#b7ff5a); margin: 6px 0 18px; }
.p-card__price span { font-size: 16px; color: var(--muted,#9aa6ac); font-weight: 600; }

.p-card__list { margin: 0 0 18px; padding-left: 18px; }
.p-card__list li { margin: 8px 0; }
.p-card__list.compact li { margin: 6px 0; }

.p-card__actions {
  margin-top: auto;                /* push actions to bottom so buttons align */
  display: grid;
  gap: 12px;
}

.p-accordion summary {
  list-style: none;
}
.p-accordion summary::-webkit-details-marker { display: none; }
.p-accordion[open] .btn { box-shadow: none; } /* keep glow subtle when open */
.p-accordion__body {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}

/* Cypress starter split panel */
.p-starter {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.p-starter__img {
  width: 100%;
  max-width: 540px;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(182,255,90,0.18);
}
@media (max-width: 960px) {
  .p-starter { grid-template-columns: 1fr; }
}

/* Footer link style normalization */
footer.foot a {
  color: var(--ink,#e7f0f7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
footer.foot a:hover { border-bottom-color: var(--glow,#b7ff5a); }

/* Minor badge + lead reuse */
.badge {
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted,#9aa6ac);
  background:rgba(255,255,255,0.03);
}
.lead { color: var(--muted,#9aa6ac); }

/* Buttons (use your theme variables) */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:10px; font-weight:700;
  border:1px solid var(--line); background:rgba(255,255,255,0.03);
}
.btn-ghost { box-shadow: 0 0 28px rgba(182,255,90,0.12) inset; }
.btn-primary {
  color: #000;
  background: var(--glow,#b7ff5a);
  border-color: rgba(182,255,90,0.4);
  box-shadow: 0 0 32px rgba(182,255,90,0.25);
}
.btn:hover { transform: translateY(-1px); }

/* Book intro button style */
.book-intro-btn {
  color: #000; /* Use black text for better contrast on neon green */
  text-decoration: none;
  font-weight: 600;
}
.book-intro-btn:hover,
.book-intro-btn:focus {
  color: var(--glow, #b7ff5a);
  text-decoration: underline;
}

/* ===== NAV CTA (Glass Pill) ===== */
.site-header .nav li a.cta--nav {
  /* --- Structure & Text --- */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 18px; /* Adjusted padding */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;

  /* --- Glass Effect --- */
  background: rgba(255, 255, 255, 0.1); /* Light, transparent background */
  border: 1px solid rgba(0, 255, 65, 0.4); /* Neon green border */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* --- Font & Color --- */
  color: #00FF41; /* Crisp Neon Green */
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); /* Subtle default glow */

  /* --- Transitions --- */
  transition: all 0.2s ease-in-out;
}

.site-header .nav li a.cta--nav:hover,
.site-header .nav li a.cta--nav:focus {
  /* --- Hover State --- */
  background: rgba(0, 255, 65, 0.15); /* Increase neon background tint */
  border-color: rgba(0, 255, 65, 0.8);
  color: #00FF41; /* Keep text color */
  
  /* --- The "REALLY make the text glow" effect --- */
  text-shadow: 
    0 0 5px #00FF41,
    0 0 10px #00FF41,
    0 0 20px #00FF41,
    0 0 30px #39ff14,
    0 0 40px #39ff14;
  
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 255, 65, 0.2); /* Add a subtle lift shadow */
}

/* 1) Stop the generic nav link color from touching the CTA */
.nav a.cta--nav { color: #0b0f12 !important; }  /* black text by default */

/* 2) Compact transparent glass pill */
#navCta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 600;

  border-radius: 999px;
  background: rgba(255,255,255,0.06);           /* subtle glass */
  color: #ffffff !important;                    /* BLACK text */
  border: 1px solid rgba(183,255,90,0.35);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  text-decoration: none;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.35),
    inset 0 -1px 2px rgba(0,0,0,0.25);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}

/* 3) Glossy rim for depth (no blue) */
#navCta::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%) top/100% 70% no-repeat,
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%) bottom/100% 80% no-repeat;
  mix-blend-mode:screen;
}

/* Hover: neon glass glow + dark ink (still compact) */
#navCta:hover,
#navCta:focus{
  background: rgba(183,255,90,0.18);
  color: #b7ff5a !important;                   /* readable dark text inside glow */
  border-color: rgba(183,255,90,0.55);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.45),
    inset 0 -1px 3px rgba(0,0,0,0.28),
    0 0 14px rgba(183,255,90,0.45);
  transform: translateY(-1px);
}
/* ==== Hero media: prevent side crop & keep layout stable ==== */
.hero-media{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;               /* lock layout; no jump */
  background: var(--panel);
}
.hero-media img,
.hero-media video{
  position: absolute;
  inset: 0;                 /* no inner crop or shrink */
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-position: center center;
}
/* show entire video without trimming edges */
.hero-media video{
  object-fit: contain;    /* show whole video, no side crop */
  background: #000;
  z-index: 2;             /* ensure video sits above fallback image */
}
/* fallback image can still fill */
.hero-media img{
  object-fit: contain;    /* match video behavior so neither crops */
  background: #000;
  z-index: 1;
}

/* Center the CTAs on the Cypress offer panel */
.panel .cta-row{
  display: flex;
  justify-content: center;    /* 👈 center horizontally */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;           /* match your inline style */
}

/* optional: keep buttons same width + centered text */
.panel .cta-row .cta,
.panel .cta-row .ghost-btn{
  text-align: center;
  min-width: 220px;
}

/* Center text inside all buttons (CTA, ghost, and .btn) */
.btn,
a.cta,
a.ghost-btn{
  display: inline-flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
  text-align: center;
  line-height: 1;          /* prevents optical off-center */
  gap: 8px;                /* nice spacing if an icon appears */
}

/* force no-crop for hero media */
.hero-media video,
.hero-media img{ object-fit: contain !important; object-position: center; }

/* Remove focus outline only in the footer area */

/* ==== Footer polish: remove blue focus ring & enlarge logo ==== */
/* Remove focus outlines from footer links (mouse/trackpad) */
footer .foot a,
footer .foot a:focus,
footer .foot a:active,
footer .foot a:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
/* Also prevent focus outline on the wrapper itself */
footer .foot:focus,
footer .foot:focus-within{
  outline: none !important;
}
/* Mobile/WebKit tap highlight */
footer .foot a{
  -webkit-tap-highlight-color: transparent;
}
/* Firefox inner focus fix */
footer .foot a::-moz-focus-inner{
  border: 0;
}

/* Enlarge footer logo (overrides inline height via !important) */
footer .foot img[alt="TestGhost"]{
  height: 28px !important; /* was 24px inline */
}

footer a:focus,
footer a:active,
footer a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Center the hero lead on pricing */
.hero-quiet .lead{
  text-align: center;
  max-width: 900px;
  margin: 8px auto 0;
}

/* Nav: consistent padding + active underline (skip the CTA) */
.site-header .nav a:not(.cta--nav){
  padding: 8px 10px;
  border-bottom: 2px solid transparent;
}

.site-header .nav a.active:not(.cta--nav){
  border-bottom-color: var(--accent);   /* neon green */
}

.site-header .nav a:not(.cta--nav):hover{
  border-bottom-color: rgba(155,255,69,.55);
}

/* Enforce consistent header spacing + logo size site-wide */
header.site-header .header-inner{ padding: 14px 0; }
header.site-header img.brand-logo{
  height: 34px; width: auto; display: block;
}
header.site-header .nav{ gap: 22px; }
header.site-header .nav li{ display: inline-flex; }

/* ==== NAV: unify across all pages (tiny, surgical overrides) ==== */
header .header-inner{ padding:14px 0 !important; }

header .header-inner > a > img,
header .nav img,
header img.brand-logo{
  height:44px !important;  /* match homepage */
  width:auto !important;
  display:block;
}

ul.nav{ 
  display:flex !important; 
  gap:18px; 
  list-style:none; 
  margin:0; 
  padding:0; 
}
ul.nav > li{ display:inline-flex; }

header .nav a:not(.cta--nav){
  padding:8px 10px;
  border-bottom:2px solid transparent;
}
header .nav a.active:not(.cta--nav){
  border-bottom-color: var(--accent);   /* green underline for current page */
}

/* ==== NAV FIX: normalize any header <ul> across all pages ==== */
header .header-inner > ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:18px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
header .header-inner > ul > li{ display:inline-flex !important; }

/* links (skip the glass CTA) */
header .header-inner > ul a:not(.cta--nav){
  color:var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-bottom:2px solid transparent;
}
header .header-inner > ul a.active:not(.cta--nav){
  border-bottom-color:var(--accent);
}

/* keep logo + header spacing identical everywhere */
header .header-inner{ padding:14px 0 !important; }
header .header-inner a > img,
header img.brand-logo{
  height:44px !important;
  width:auto !important;
  display:block !important;
}

/* ==== Global header normalization (matches homepage) ==== */
.wrap.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.wrap.nav > a img{
  height:44px;
  width:auto;
  display:block;
}

/* nav list: horizontal, no bullets */
.wrap.nav nav ul{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.wrap.nav nav li{ display:inline-flex; }

/* links (skip the glass CTA) */
.wrap.nav nav a:not(.cta--nav){
  color:var(--text);
  text-decoration:none;
  opacity:.9;
  padding:8px 10px;
  border-bottom:2px solid transparent;
}
.wrap.nav nav a.active:not(.cta--nav){
  border-bottom-color:var(--accent);
}
.wrap.nav nav a:not(.cta--nav):hover{
  border-bottom-color:rgba(155,255,69,.55);
}

/* ============ Tidy the green "pill" chips ============ */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  font-size:.82rem;
  line-height:1;                 /* removes the tall look */
  border-radius:999px;
  background:rgba(182,255,90,.12);
  border:1px solid rgba(182,255,90,.20);
  color:var(--text);
  margin-bottom:12px;
}
.pill-small{ font-size:.75rem; }

/* Center the pills on plan cards only */
.plan > .pill{
  display:block;                 /* allow margin auto to work */
  width:max-content;
  margin:0 auto 12px;
}

/* ============ Stop the nav label wrapping ============ */
/* keep all top-nav items on one line (except CTA width is fine) */
.wrap.nav nav a:not(.cta--nav){
  white-space:nowrap;
}

/* shared wrapper used by the header on ALL pages */
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

/* header/nav sizing (same as home) */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.nav img{ height:44px; }                 /* logo size */
.nav ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.nav li a{ color:var(--ink); opacity:.85; text-decoration:none; white-space:nowrap; } /* prevent wrapping */

/* Prevent nav labels from breaking onto two lines */
.nav a { white-space: nowrap; }

/* Normalize any header wrapper just in case */
header .wrap,
header .container,
header .header-inner { 
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ===== Footer: normalize across all pages (robust to different HTML) ===== */
footer.site-footer,
footer {
  background: #0d0f11;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 24px 0;
}

/* Make footer width/padding match the header’s .wrap */
footer .wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* If the inner container is named differently, normalize it too */
footer .foot,
footer .footwrap,
footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

/* Left cluster (logo + copyright) when present */
footer .footer-left { display: flex; align-items: center; gap: 12px; color: var(--muted); }

/* Use whatever logo you have; keep size consistent + glowy */
footer img[alt="TestGhost"] {
  height: clamp(40px, 5vw, 60px);
  width: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(183,255,90,.35));
}

/* Kill bullets + spacing on any footer lists */
footer ul,
footer .foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
}

/* Neon/glowy footer links everywhere */
footer a {
  color: var(--glow, #b7ff5a);
  text-decoration: none;
  text-shadow: 0 0 6px rgba(183,255,90,.35);
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, opacity .15s ease;
}
footer a:hover { border-bottom-color: var(--glow, #b7ff5a); }

/* Remove blue focus ring just in the footer */
footer a:focus,
footer a:active,
footer a:focus-visible { outline: none; box-shadow: none; }

/* Small screens */
@media (max-width: 640px) {
  footer .wrap { align-items: flex-start; }
}

footer a {
  color: var(--glow);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

footer a:hover {
  text-shadow: 0 0 6px var(--glow);
}

footer.site-footer a {
  color: var(--glow) !important;
  text-decoration: none;
}

footer.site-footer a:hover {
  text-shadow: 0 0 6px var(--glow);
}

/* Shift Left Blog nav badge */
.nav li.nav-blog { display:flex; align-items:center; }

.nav li.nav-blog img {
  height: 28px;       /* keeps it tidy next to text links */
  width: auto;
  display: block;
  translate: 0 0;
  filter: drop-shadow(0 0 0 rgba(183,255,90,0));
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
  opacity: .95;
}

@media (min-width: 900px){
  .nav li.nav-blog img { height: 32px; }
}

.nav li.nav-blog a:hover img,
.nav li.nav-blog a:focus-visible img {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(183,255,90,.35));
  opacity: 1;
}

/* optional: mark it active when on blog.html */
body.blog .nav li.nav-blog img {
  filter: drop-shadow(0 0 12px rgba(183,255,90,.5));
  opacity: 1;
}

/* ===== NAV TUNING (keep CTA visible) ===== */
.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav > a { flex:0 0 auto; }         /* logo */
.nav > nav { flex:1 1 auto; }       /* let the link list flex */
.nav ul { display:flex; align-items:center; gap:16px; margin:0; padding:0; list-style:none; flex-wrap:nowrap; }
.nav a { white-space:nowrap; }

/* CTA a touch smaller so it fits */
#navCta { padding:10px 14px; font-size:.95rem; }

/* Blog badge */
.nav li.nav-blog { display:flex; align-items:center; }
.nav li.nav-blog img { height:28px; width:auto; display:block; }
.nav li.nav-blog .label { display:none; }

/* Medium screens: tighten gaps, shrink badge & CTA slightly */
@media (max-width: 1200px) {
  .nav ul { gap:12px; }
  #navCta { padding:8px 12px; font-size:.9rem; }
  .nav li.nav-blog img { height:22px; }
}

/* Smaller screens: swap image for text pill to save space */
@media (max-width: 1024px) {
  .nav { flex-wrap:wrap; row-gap:8px; }
  .nav > nav { width:100%; }
  .nav ul { justify-content:flex-end; }

  .nav li.nav-blog img { display:none; }
  .nav li.nav-blog .label {
    display:inline-block;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--glow);
    font-weight:600;
    line-height:1;
  }
}

/* --- Nav tidy for blog item + keep CTA visible --- */
.wrap.nav nav ul{
  display:flex;
  align-items:center;
  gap:14px;              /* was big; tighten so CTA fits */
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:nowrap;      /* prevent wrapping that hides CTA */
}

.nav a{
  color:var(--ink);
  text-decoration:none;
  opacity:.95;
}
.nav a:hover,
.nav a.active{           /* make active/hover green */
  color:var(--glow);
}

/* Blog pill */
.nav-blog a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  background:rgba(255,255,255,0.03);
}
.nav-blog a:hover{
  transform:translateY(-1px);
  border-color:rgba(183,255,90,.45);
  box-shadow:0 0 0 6px rgba(183,255,90,.08);
}

.nav-blog img{
  height:18px;           /* compact logo so it doesn’t shove items */
  width:auto;
  display:block;
}
.nav-blog .label{
  font-weight:700;
  color:var(--glow);
  white-space:nowrap;
}

/* Save space earlier on smaller screens: hide the text label first */
@media (max-width:1280px){
  .wrap.nav nav ul{ gap:10px; }
  .nav-blog .label{ display:none; }
}

/* Slightly shrink the icon on tight layouts */
@media (max-width:1024px){
  .nav-blog img{ height:16px; }
}

/* --- Shift Left Blog spotlight --- */
.blog-spotlight{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(183,255,90,.06), transparent 55%),
    radial-gradient(900px 420px at 95% 110%, rgba(183,255,90,.05), transparent 55%),
    var(--bg);
}

.blog-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.blog-badge{
  height:40px; width:auto; display:block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

.blog-head-copy{ flex:1; }
.blog-head-copy h2{ margin:0 0 6px; }
.blog-head-copy .lead{ margin:0; color:var(--muted); }

.blog-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}

.blog-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 16px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.blog-meta{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:6px;
}

.blog-title{ margin:0 0 8px; font-size:20px; }
.blog-excerpt{ margin:0 0 12px; color:var(--muted); }

.blog-list{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  padding:16px;
}
.blog-list h4{ margin:0 0 10px; }
.blog-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.blog-list a{ color:var(--glow); }

/* mobile */
@media (max-width: 960px){
  .blog-head{ flex-direction:column; text-align:center; }
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-badge{ height:34px; }
}

/* --- Shift Left Blog spotlight --- */
.blog-spotlight{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(183,255,90,.06), transparent 55%),
    radial-gradient(900px 420px at 95% 110%, rgba(183,255,90,.05), transparent 55%),
    var(--bg);
  padding-top: 60px;
  padding-bottom: 60px;
}

.blog-head{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:28px;
}

.blog-badge{
  height:64px;   /* bigger logo */
  width:auto;
  display:block;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

.blog-head-copy{ flex:1; }
.blog-head-copy h2{ margin:0 0 8px; font-size:1.8rem; }
.blog-head-copy .lead{ margin:0; color:var(--muted); }

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

.blog-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:22px;
  box-shadow: 0 18px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.blog-meta{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:6px;
}

.blog-title{ margin:0 0 8px; font-size:22px; }
.blog-excerpt{ margin:0 0 14px; color:var(--muted); }

.blog-footer{
  margin-top:20px;
  text-align:center;
}

.blog-footer .ghost-btn{
  padding:10px 22px;
  font-size:1rem;
}

/* mobile */
@media (max-width: 960px){
  .blog-head{ flex-direction:column; text-align:center; gap:12px; }
  .blog-badge{ height:54px; }
}

.blog-post-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(183, 255, 90, 0.2);
  border-radius: 20px;
  padding: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.blog-post-card:hover {
  border-color: var(--neon-green);
  box-shadow:
    0 0 15px rgba(183, 255, 90, 0.3),
    0 20px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(-6px);
}

.blog-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}

.blog-logo {
  max-width: 260px;  /* make logo bigger */
  height: auto;
  flex-shrink: 0;
}

.blog-intro {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 700px;
}

.blog-header-centered {
  text-align: center;
  margin-bottom: 30px;
}

.blog-header-img {
  max-width: 420px;  /* tweak size as needed */
  height: auto;
  display: inline-block;
}

.blog-header-centered {
  text-align: center;
  margin-bottom: 40px;
}

.blog-header-img {
  max-width: 700px;   /* bump this up to make it much larger */
  width: 100%;
  height: auto;
  display: inline-block;
}

.blog-post-card {
  background: var(--panel-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 40px;   /* add left + right breathing room */
  margin: 0 auto;
  max-width: 900px; /* keeps it from going wall-to-wall */
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}

.blog-post-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 0 25px rgba(183, 255, 90, 0.5);
}

.blog-header-centered {
  text-align: center;
  margin-bottom: 20px;
}

.blog-header-img {
  max-width: 700px;   /* you can tweak if it feels too big */
  width: 100%;
  height: auto;
  display: inline-block;
}

.blog-subtitle {
  margin-top: 6px; /* tight spacing under the image */
  font-size: 1rem;
  color: var(--muted);
  font-weight: 400;
}

/* Blog spotlight layout */
.blog-spotlight .panel {
  background: var(--panel);
}

.blog-spotlight .spotlight-article {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.blog-spotlight .spotlight-media {
  background: #0f1414;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 6px 26px rgba(0,0,0,.35);
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-spotlight .spotlight-media:hover {
  transform: translateY(-2px);
  border-color: rgba(183,255,90,.45);
  box-shadow:
    0 0 0 6px rgba(183,255,90,.10),
    0 14px 42px rgba(0,0,0,.45);
}

.blog-spotlight .blog-square-img {
  width: 100%;
  max-width: 280px;  /* keeps it compact */
  height: auto;
  border-radius: 12px;
}

/* Headline matches package card size */
.blog-spotlight .h2 {
  font-size: 28px;
  margin: 0 0 6px;
}

/* Compact spacing */
.blog-spotlight .wrap { padding-top: 18px; }
.blog-spotlight .grid-2 { align-items: center; gap: 28px; }

/* Stack on mobile */
@media (max-width: 960px){
  .blog-spotlight .grid-2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .blog-spotlight .spotlight-media { justify-content: center; }
}

.blog-spotlight .spotlight-media {
  background: #0f1414;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 6px 26px rgba(0,0,0,.35);
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;   /* 🔥 force square */
  max-width: 320px;      /* keeps it neat */
  margin: auto;          /* center if smaller than column */
}

.blog-spotlight .blog-square-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;   /* preserves square feel */
}

/* Make heading larger */
.blog-spotlight .blog-heading {
  font-size: 2rem;       /* bigger than normal */
  font-weight: 700;
  margin-bottom: 12px;
}

/* Tilt effect */
.blog-spotlight .spotlight-media.tilt {
  transform: rotate(-8deg);   /* adjust tilt angle */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #0f1414;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: auto;
}

/* Add glow on hover */
.blog-spotlight .spotlight-media.tilt:hover {
  transform: rotate(-8deg) scale(1.03);  /* tilt + zoom */
  box-shadow: 0 0 20px var(--glow);
}

/* Heading size */
.blog-spotlight .blog-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Container stays square */
.blog-spotlight .spotlight-media {
  background: #0f1414;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: auto;
}

/* Tilt the image itself */
.blog-spotlight .tilt-img {
  transform: rotate(-8deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
  display: block;
  max-width: 100%;
  height: auto;
}

/* Glow & zoom on hover */
.blog-spotlight .tilt-img:hover {
  transform: rotate(-100deg) scale(1.05);
  box-shadow: 0 0 20px var(--glow);
}

/* Tilted container */
.blog-spotlight .tilt-container {
  background: #0f1414;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: auto;

  /* permanent tilt */
  transform: rotate(-8deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Glow + zoom on hover */
.blog-spotlight .tilt-container:hover {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 0 25px var(--glow);
}

/* Image stays normal inside */
.blog-spotlight .blog-square-img {
  border-radius: 10px;
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   SHIFT LEFT BLOG – robust overrides
   (place at end of style.css)
   ========================= */

/* Tidy the spotlight section spacing/background */
.blog-spotlight{
  padding:56px 0;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(183,255,90,.06), transparent 55%),
    radial-gradient(900px 420px at 95% 110%, rgba(183,255,90,.05), transparent 55%),
    var(--bg, #0b0f12);
}

/* Two-column layout on desktop, stacks on mobile */
.blog-spotlight .grid-2{
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap:24px;
  align-items:center;
}
@media (max-width: 960px){
  .blog-spotlight .grid-2{ grid-template-columns:1fr; }
}

/* Article card (left) keeps your current style but with comfy padding */
.blog-spotlight .spotlight-article{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ======= TILTED IMAGE FRAME (right) ======= */

/* Square container that tilts as a unit (frame + image) */
.blog-spotlight .spotlight-media{
  /* make it a square frame */
  aspect-ratio: 1 / 1;
  max-width: 420px;
  width: min(420px, 92%);
  margin: 0 auto;

  /* frame styling */
  background: #0f1414;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  border-radius: 14px;
  padding: 14px;

  /* depth + smooth transitions */
  box-shadow: 0 6px 26px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* The *tilt* — force it to win over older rules */
.blog-spotlight .spotlight-media.tilt{
  transform: rotate(-12deg) !important;
}

/* Hover: keep the same tilt, add a tiny zoom + neon aura */
.blog-spotlight .spotlight-media.tilt:hover{
  transform: rotate(-12deg) scale(1.03) !important;
  border-color: rgba(183,255,90,.5);
  box-shadow:
    0 0 0 8px rgba(183,255,90,.08),
    0 22px 50px rgba(0,0,0,.5),
    0 0 28px rgba(183,255,90,.35);
}

/* Image inside the frame fills nicely without adding its own rotation */
.blog-spotlight .spotlight-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  transform: none !important;   /* neutralize any previous rotate on the img */
}

/* Headline sizing for "SHIFT LEFT BLOG" to match your package card */
.blog-spotlight .blog-heading{
  font: 800 clamp(22px, 2.2vw, 32px)/1.15 "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0 0 8px;
}

/* Keep the “Practical insights…” line snug under the heading */
.blog-spotlight .blog-intro{
  color: var(--muted, #9aa5b1);
  margin: 0 0 10px;
}

/* Button row */
.blog-spotlight .buttons{ display:flex; gap:12px; flex-wrap:wrap; }

/* Make the blog hero image bigger */
.blog-hero img {
  height: 100px;   /* adjust as needed */
  display: block;
  margin: 0 auto 12px;
}

/* Global link color override for blog page */
a {
  color: var(--neon);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

a:hover,
a:focus {
  color: #d4ff92; /* slightly lighter green for hover */
  text-decoration: underline;
}
  /* --- HOTFIX: cap the Shift Left Blog image on the homepage --- */
  .blog-spotlight .spotlight-media{
    display:flex;align-items:center;justify-content:center;
    padding:18px;
  }
  .blog-spotlight .spotlight-media img{
    width:100%;
    max-width:360px;         /* <= tweak if you want it larger/smaller */
    aspect-ratio:1 / 1;
    height:auto;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 14px 36px rgba(0,0,0,.45);
    display:block;
  }
  /* keep the card from growing huge */
  .blog-spotlight .panel{ overflow:hidden; }
  @media (max-width: 960px){
    .blog-spotlight .spotlight-media img{ max-width:300px; }
  }

  /* footer */
footer.site-footer {
  background: rgba(7,11,11,.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(183,255,90,.3);
  box-shadow: 0 -8px 32px rgba(0,0,0,.3);
  padding: 22px 0;
  color: var(--muted);
}
.foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-logo {
  height: 28px;
  display: block;
  margin-right: 10px;
}
.footer-links {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a {
  color: var(--ink);
  opacity: .85;
}
.footer-links a:hover {
  opacity: 1;
}