/*
Theme Name: Kraz Active
Template: astra
Author: Kraz Active
Description: Kraz Active child theme - imported from the real design system handoff (tokens/colors, typography, spacing, effects, fonts). Pronoun kept as "I" per RULED S2 Positioning canon, which bans "we" outright.
Version: 2.1
*/

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700;800&display=swap");

:root{
/* ---- Brand core (Brand Book canon) ---- */
--kraz-jet-black:#060317;
--kraz-electric-indigo:#5f4ee5;
--kraz-royal-blue:#3c88d6;
--kraz-pure-white:#ffffff;

--kraz-black-900:#05020f;
--kraz-black-800:#060317;
--kraz-black-700:#0a0620;
--kraz-black-600:#0d0a26;
--kraz-black-500:#120e33;
--kraz-black-400:#1a1642;
--kraz-line-100:rgba(255,255,255,.07);
--kraz-line-200:rgba(255,255,255,.12);
--kraz-line-indigo:rgba(95,78,229,.45);

--kraz-indigo-700:#3b2bbf;
--kraz-indigo-600:#4a37d6;
--kraz-indigo-500:#5f4ee5;
--kraz-indigo-400:#7d70ec;
--kraz-indigo-300:#a49bf3;
--kraz-blue-600:#2a6fbd;
--kraz-blue-500:#3c88d6;
--kraz-blue-400:#63a3e3;

--surface-page:var(--kraz-black-900);
--surface-section:var(--kraz-black-800);
--surface-raised:var(--kraz-black-700);
--surface-card:rgba(255,255,255,.025);
--surface-card-hover:rgba(255,255,255,.05);

--text-primary:#ffffff;
--text-body:rgba(255,255,255,.78);
--text-muted:rgba(255,255,255,.55);
--text-faint:rgba(255,255,255,.32);
--text-accent:var(--kraz-indigo-400);

--border-hairline:var(--kraz-line-100);
--border-card:var(--kraz-line-200);
--border-accent:var(--kraz-indigo-500);

--gradient-brand:linear-gradient(90deg,var(--kraz-indigo-500) 0%,var(--kraz-blue-500) 100%);
--gradient-heading:linear-gradient(96deg,var(--kraz-indigo-400) 0%,var(--kraz-blue-400) 100%);
--gradient-section-glow:radial-gradient(120% 80% at 50% 0%,rgba(95,78,229,.16) 0%,transparent 65%);

/* type */
--font-display:"Chakra Petch","Montserrat",system-ui,sans-serif;
--font-body:"Montserrat",system-ui,-apple-system,sans-serif;
--text-sm:14px; --text-md:18px; --text-lg:20px; --text-xl:24px;
--text-3xl:38px; --text-4xl:48px; --text-5xl:64px;
--text-hero:clamp(48px,6.2vw,88px);
--weight-light:300; --weight-semibold:600; --weight-bold:700;
--leading-tight:1.02; --leading-relaxed:1.65;
--tracking-label:.14em; --tracking-tagline:.22em;

/* spacing */
--space-4:16px; --space-6:24px; --space-8:32px;
--container-max:1240px;
--gutter:clamp(20px,5vw,64px);
--section-padding-y:clamp(72px,9vw,128px);
--grid-gap:24px;
--card-padding:32px;

/* radii - the brand is squared off */
--radius-none:0;

/* glow */
--glow-indigo-md:0 0 24px rgba(95,78,229,.55);
--glow-indigo-lg:0 0 48px rgba(95,78,229,.45);
--text-glow-white:0 0 22px rgba(255,255,255,.55);
--icon-glow:drop-shadow(0 0 10px rgba(95,78,229,.75));
--skew-cta:-12deg;
}

* { box-sizing: border-box; }

html, body.kraz-page {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  margin: 0; padding: 0; width: 100%; overflow-x: hidden;
}

.kraz-section p a, .kraz-faq-item p a { color: var(--kraz-indigo-300); }

.kraz-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  background: rgba(6,3,23,.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0; z-index: 10;
}
.kraz-nav .kraz-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-primary) !important; text-decoration: none;
}
.kraz-nav-links { display: flex; gap: 0; }
.kraz-nav-links a {
  color: var(--text-body) !important; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm);
}
.kraz-nav-links a:hover { color: var(--kraz-indigo-300) !important; }
.kraz-nav-links a:not(:first-child) { position: relative; padding-left: 32px; }
.kraz-nav-links a:not(:first-child)::before {
  content: "|"; position: absolute; left: 0; color: var(--border-card);
  font-weight: var(--weight-light);
}
@media (max-width: 800px) { .kraz-nav-links { display: none; } }

.kraz-audience-grid, .kraz-lanes-grid, .kraz-pillar-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); margin-top: 40px; }
@media (max-width: 900px) { .kraz-audience-grid, .kraz-lanes-grid, .kraz-pillar-grid { grid-template-columns: minmax(0,1fr); } }
.kraz-audience-card, .kraz-lane-card, .kraz-pillar-card {
  border: 1px solid var(--border-hairline); background: var(--surface-card);
  padding: var(--card-padding); min-width: 0; overflow-wrap: break-word;
}
.kraz-audience-card { border-left: 3px solid var(--kraz-blue-500); }
.kraz-lane-card { border-top: 1px solid var(--border-hairline); }
.kraz-audience-card h3, .kraz-lane-card h3, .kraz-pillar-card h3 {
  font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary); margin-top: 0;
}
.kraz-audience-card p, .kraz-lane-card p, .kraz-pillar-card p {
  font-family: var(--font-body); font-weight: var(--weight-light); color: var(--text-body); font-size: var(--text-sm);
}
.kraz-audience-card .pain { color: var(--text-muted); margin-bottom: 12px; }
.kraz-audience-card .outcome { color: var(--kraz-indigo-300); }

.kraz-nav .kraz-logo .mark {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--kraz-electric-indigo);
  display:flex; align-items:center; justify-content:center;
  background: var(--gradient-brand);
  font-family: var(--font-display); color: var(--text-primary) !important;
}

/* The skew - CTAs are parallelograms, label counter-skewed upright */
.kraz-cta {
  display: inline-block;
  transform: skewX(var(--skew-cta));
  border: 1px solid var(--kraz-electric-indigo);
  box-shadow: var(--glow-indigo-md);
  padding: 10px 24px;
  color: var(--text-primary) !important;
  text-decoration: none;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-size: var(--text-sm);
}
.kraz-cta span { display: inline-block; transform: skewX(calc(var(--skew-cta) * -1)); }

.kraz-hero {
  position: relative;
  padding: 90px var(--gutter) 60px;
  background: var(--gradient-section-glow), var(--surface-page);
  text-align: left;
}
.kraz-hero .kraz-eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform:uppercase; letter-spacing: var(--tracking-label);
  color: var(--kraz-indigo-300); font-size: var(--text-sm); margin-bottom:18px;
}
.kraz-hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-hero); line-height: var(--leading-tight);
  text-transform: uppercase; max-width: 900px; margin: 0 0 24px 0;
  color: var(--text-primary);
}
.kraz-hero h1 .accent {
  background: var(--gradient-heading); -webkit-background-clip: text;
  background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(95,78,229,.55));
}
.kraz-hero p.lead {
  font-family: var(--font-body); font-weight: var(--weight-light);
  font-size: var(--text-lg); max-width: 620px; color: var(--text-body);
  margin-bottom: 36px;
}

a.kraz-btn-primary {
  display: inline-block;
  transform: skewX(var(--skew-cta));
  background-color: var(--kraz-electric-indigo);
  box-shadow: var(--glow-indigo-md);
  padding: 16px 36px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: box-shadow .24s ease, background-color .24s ease;
  color: var(--text-primary) !important;
  border-radius: var(--radius-none);
}
a.kraz-btn-primary span { display: inline-block; transform: skewX(calc(var(--skew-cta) * -1)); }
a.kraz-btn-primary:hover { box-shadow: var(--glow-indigo-lg); color: var(--text-primary) !important; }
a.kraz-btn-primary:visited { color: var(--text-primary) !important; }

.kraz-section { padding: var(--section-padding-y) var(--gutter); max-width: var(--container-max); margin: 0 auto; width: 100%; overflow-wrap: break-word; }
.kraz-hero, .kraz-villain, .kraz-cta-band { overflow-wrap: break-word; }
.kraz-section h2 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform: uppercase; font-size: var(--text-3xl);
  margin-bottom: var(--space-6); color: var(--text-primary);
}
.kraz-section h2 .accent {
  background: var(--gradient-heading); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.kraz-section p.section-lead {
  font-family: var(--font-body); font-weight: var(--weight-light);
  font-size: var(--text-md); color: var(--text-body); max-width: 720px;
}

.kraz-villain { background: var(--surface-section); padding: 70px var(--gutter); text-align: center; }
.kraz-villain blockquote {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform: uppercase; font-size: clamp(22px,3vw,34px);
  max-width: 780px; margin: 0 auto; line-height: 1.3; color: var(--text-primary);
}

.kraz-plan-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); margin-top: 40px; }
@media (max-width: 900px) { .kraz-plan-grid { grid-template-columns: minmax(0,1fr); } }
.kraz-plan-step {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-none);
  padding: var(--card-padding); background: var(--surface-card);
  border-top: 2px solid var(--kraz-electric-indigo);
  min-width: 0; overflow-wrap: break-word;
}
.kraz-plan-step h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary); }
.kraz-plan-step p { font-family: var(--font-body); font-weight: var(--weight-light); color: var(--text-body); }
.kraz-plan-step .num {
  font-family: var(--font-display); color: var(--text-primary); opacity: .07;
  font-size: 56px; font-weight: var(--weight-bold); line-height: 1;
}

.kraz-ladder { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--grid-gap); margin-top: 40px; }
@media (max-width: 900px) { .kraz-ladder { grid-template-columns: minmax(0,1fr); } }
.kraz-tier { border: 1px solid var(--border-hairline); border-radius: var(--radius-none); padding: var(--card-padding); background: var(--surface-card); position: relative; min-width: 0; overflow-wrap: break-word; }
.kraz-tier h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary); }
.kraz-tier p { font-family: var(--font-body); font-weight: var(--weight-light); color: var(--text-body); }
.kraz-tier.flagship { border: 1px solid var(--kraz-electric-indigo); box-shadow: var(--glow-indigo-md); }
.kraz-tier.flagship::before {
  content: "FLAGSHIP"; position:absolute; top:-13px; left:28px;
  background: var(--kraz-electric-indigo); color: var(--text-primary);
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); padding: 4px 14px;
}
.kraz-tier .price { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-5xl); color: var(--text-primary); margin: 12px 0; }
.kraz-tier ul { list-style: none; padding: 0; margin: 20px 0; }
.kraz-tier ul li { padding: 6px 0; font-family: var(--font-body); font-weight: var(--weight-light); color: var(--text-body); }
.kraz-tier ul li::before { content: "— "; color: var(--kraz-electric-indigo); }

.kraz-cta-band { text-align:center; padding: 100px var(--gutter); background: var(--gradient-section-glow), var(--surface-section); }
.kraz-cta-band h2 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform: uppercase; font-size: var(--text-4xl); margin-bottom: 20px;
  color: var(--text-primary); text-shadow: var(--text-glow-white);
}
.kraz-cta-band p { font-family: var(--font-body); font-weight: var(--weight-light); color: var(--text-body); margin-bottom: 30px; }

.kraz-faq-item { border-bottom: 1px solid var(--border-hairline); padding: 20px 0; }
.kraz-faq-item summary { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md); cursor:pointer; color: var(--text-primary); }
.kraz-faq-item p { margin-top: 12px; font-family: var(--font-body); font-weight: var(--weight-light); color: var(--text-body); }

.kraz-footer { text-align:center; padding: 40px 24px; font-family: var(--font-body); color: var(--text-faint); font-size: var(--text-sm); }