/* ==========================================================================
   JAG.CSS — "Jag by Django" landing page only (template-jag.php).
   Loaded after base.css on this template only, see functions.php ->
   django_theme_assets(). Fonts are enqueued separately in functions.php
   (Google Fonts: Poppins, Literata italic, JetBrains Mono) — see the
   django_theme_assets() snippet in the accompanying notes.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --spark:   #C8F135;
  --deep:    #0E0E0C;
  --dusk:    #1C1C19;
  --ash:     #F0EDE6;
  --stone:   #8C8880;
  --charcoal:#2E2D29;
  --border-l:rgba(0,0,0,0.08);
  --border-d:rgba(255,255,255,0.08);
  --django:  #E84B0F;
}
html { scroll-behavior: smooth; }
body { background: var(--ash); color: var(--charcoal); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
/* HERO */
.hero { min-height: calc(100vh - 64px); background: var(--deep); display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
.hero-rays { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 1200px; height: 700px; pointer-events: none; z-index: 1; }
.ray { position: absolute; bottom: 0; left: 50%; width: 1px; transform-origin: bottom center; background: linear-gradient(to top, var(--spark), transparent); animation: rayrise 2s ease forwards; opacity: 0; }
.ray:nth-child(1)  { height: 500px; transform: translateX(-50%) rotate(-55deg); animation-delay: 0.10s; }
.ray:nth-child(2)  { height: 540px; transform: translateX(-50%) rotate(-44deg); animation-delay: 0.18s; }
.ray:nth-child(3)  { height: 570px; transform: translateX(-50%) rotate(-33deg); animation-delay: 0.26s; }
.ray:nth-child(4)  { height: 590px; transform: translateX(-50%) rotate(-22deg); animation-delay: 0.34s; }
.ray:nth-child(5)  { height: 610px; transform: translateX(-50%) rotate(-11deg); animation-delay: 0.42s; }
.ray:nth-child(6)  { height: 620px; transform: translateX(-50%) rotate(0deg);   animation-delay: 0.50s; width: 2px; }
.ray:nth-child(7)  { height: 610px; transform: translateX(-50%) rotate(11deg);  animation-delay: 0.42s; }
.ray:nth-child(8)  { height: 590px; transform: translateX(-50%) rotate(22deg);  animation-delay: 0.34s; }
.ray:nth-child(9)  { height: 570px; transform: translateX(-50%) rotate(33deg);  animation-delay: 0.26s; }
.ray:nth-child(10) { height: 540px; transform: translateX(-50%) rotate(44deg);  animation-delay: 0.18s; }
.ray:nth-child(11) { height: 500px; transform: translateX(-50%) rotate(55deg);  animation-delay: 0.10s; }
@keyframes rayrise { 0% { opacity:0; } 50% { opacity:0.12; } 100% { opacity:0.07; } }
.hero-left { padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; border-right: 1px solid var(--border-d); }
.hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px; color: var(--spark); text-transform: uppercase; margin-bottom: 32px; display: flex; align-items: center; gap: 10px; }
.hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--spark); }
h1 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.1; letter-spacing: -1px; color: var(--ash); margin-bottom: 28px; }
h1 .accent { color: var(--spark); }
h1 .soft { color: rgba(240,237,230,0.35); }
.hero-desc { font-size: 17px; font-weight: 300; color: rgba(240,237,230,0.5); line-height: 1.75; max-width: 420px; margin-bottom: 48px; }
.hero-desc strong { color: var(--ash); font-weight: 400; }
.hero-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-spark { background: var(--spark); color: var(--deep); padding: 14px 28px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; transition: opacity 0.2s; }
.btn-spark:hover { opacity: 0.88; }
.btn-ghost { font-size: 14px; color: rgba(240,237,230,0.35); text-decoration: none; border-bottom: 1px solid rgba(240,237,230,0.12); padding-bottom: 2px; font-family: 'Poppins', sans-serif; font-style: italic; transition: color 0.2s; }
.btn-ghost:hover { color: var(--ash); }
.hero-right { padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; gap: 24px; }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-d); border: 1px solid var(--border-d); }
.h-stat { background: rgba(255,255,255,0.02); padding: 28px 24px; transition: background 0.2s; }
.h-stat:hover { background: rgba(200,241,53,0.04); }
.h-stat-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 40px; color: var(--spark); line-height: 1; letter-spacing: -1px; margin-bottom: 6px; }
.h-stat-label { font-size: 13px; color: rgba(240,237,230,0.38); line-height: 1.45; }
.hero-price { background: rgba(200,241,53,0.06); border: 1px solid rgba(200,241,53,0.15); padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; }
.price-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(240,237,230,0.25); text-transform: uppercase; margin-bottom: 4px; }
.price-amount { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 34px; color: var(--spark); letter-spacing: -0.8px; }
.price-note { font-size: 12px; color: rgba(240,237,230,0.22); margin-top: 2px; }
/* SECTIONS */
section { padding: 88px 52px; border-bottom: 1px solid var(--border-l); }
section.dark { background: var(--dusk); border-bottom-color: var(--border-d); }
section.mid { background: #F7F4EE; }
.s-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #8A6800; margin-bottom: 14px; }
section.dark .s-eyebrow { color: var(--spark); }
.s-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.8px; line-height: 1.12; margin-bottom: 16px; color: var(--charcoal); }
section.dark .s-title { color: var(--ash); }
.s-sub { font-size: 16px; font-weight: 300; color: var(--stone); max-width: 520px; line-height: 1.75; margin-bottom: 56px; }
section.dark .s-sub { color: rgba(240,237,230,0.38); }
/* ICP */
.icp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-l); border: 1px solid var(--border-l); margin-bottom: 16px; }
.icp-card { background: var(--ash); padding: 40px 36px; transition: background 0.25s; }
.icp-card:hover { background: #EAE6DD; }
.icp-icon { font-size: 28px; margin-bottom: 20px; display: block; }
.icp-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--charcoal); margin-bottom: 10px; }
.icp-desc { font-size: 14px; color: var(--stone); line-height: 1.7; margin-bottom: 18px; }
.icp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.icp-tag { background: white; border: 1px solid var(--border-l); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.5px; padding: 4px 10px; color: var(--stone); }
.not-strip { background: white; border: 1px solid var(--border-l); padding: 20px 28px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.not-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: var(--stone); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.not-items { display: flex; flex-wrap: wrap; gap: 8px; }
.not-item { font-size: 13px; color: #bbb; padding: 6px 14px; border: 1px solid #e5e2dc; text-decoration: line-through; background: #fafaf8; }
/* SERVICES — 8 deep areas */
.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border-d); border: 1px solid var(--border-d); }
.svc-card { background: var(--dusk); padding: 36px 28px; transition: background 0.25s; position: relative; overflow: hidden; }
.svc-card:hover { background: #222220; }
.svc-num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 56px; color: rgba(255,255,255,0.03); position: absolute; top: 12px; right: 16px; line-height: 1; letter-spacing: -1px; }
.svc-icon { font-size: 24px; margin-bottom: 16px; display: block; }
.svc-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: var(--ash); letter-spacing: -0.2px; margin-bottom: 10px; line-height: 1.2; }
.svc-desc { font-size: 13px; color: rgba(240,237,230,0.42); line-height: 1.65; margin-bottom: 14px; }
.svc-bullets { list-style: none; display: none; }
.svc-card:hover .svc-bullets { display: block; }
.svc-bullets li { font-size: 11.5px; color: rgba(200,241,53,0.6); padding: 3px 0; padding-left: 12px; position: relative; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.3px; }
.svc-bullets li::before { content: '·'; position: absolute; left: 0; color: var(--spark); font-size: 16px; line-height: 1; top: 2px; }
/* DELIVERABLES */
.dlv-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.dlv-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-d); border: 1px solid var(--border-d); }
.dlv-row { background: var(--dusk); display: grid; grid-template-columns: 48px 1fr 48px; transition: background 0.2s; cursor: default; }
.dlv-row:hover { background: #222220; }
.dlv-n { font-family: 'Literata', serif; font-style: italic; font-size: 13px; color: var(--stone); padding: 28px 0 28px 24px; display: flex; align-items: flex-start; }
.dlv-body { padding: 28px 20px; border-left: 1px solid var(--border-d); border-right: 1px solid var(--border-d); }
.dlv-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--ash); letter-spacing: -0.3px; margin-bottom: 4px; }
.dlv-desc { font-size: 13px; color: rgba(240,237,230,0.42); line-height: 1.6; }
.dlv-pills { display: none; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dlv-row:hover .dlv-pills { display: flex; }
.dlv-pill { background: rgba(200,241,53,0.07); border: 1px solid rgba(200,241,53,0.15); font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(200,241,53,0.55); padding: 3px 9px; letter-spacing: 0.3px; }
.dlv-icon { font-size: 18px; padding: 28px 14px; display: flex; align-items: flex-start; }
/* 30-DAY */
.weeks { display: flex; flex-direction: column; gap: 1px; background: var(--border-l); border: 1px solid var(--border-l); }
.week { background: var(--ash); display: grid; grid-template-columns: 180px 1fr; transition: background 0.2s; }
.week:hover { background: #EAE6DD; }
.week-meta { padding: 36px 28px; border-right: 1px solid var(--border-l); display: flex; flex-direction: column; }
.week-num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -1px; color: var(--charcoal); margin-bottom: 4px; }
.week-days { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #8A6800; margin-bottom: 10px; }
.week-phase { display: inline-block; background: var(--charcoal); color: var(--spark); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; width: fit-content; }
.week-content { padding: 36px 40px; }
.week-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--charcoal); margin-bottom: 8px; }
.week-desc { font-size: 14px; color: var(--stone); line-height: 1.7; margin-bottom: 14px; }
.week-items { display: flex; flex-wrap: wrap; gap: 6px; }
.week-item { background: white; border: 1px solid var(--border-l); font-size: 12px; color: var(--charcoal); padding: 5px 12px; font-family: 'Literata', serif; font-style: italic; }
.milestone-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border-l); border: 1px solid var(--border-l); margin-top: 16px; }
.milestone { background: var(--charcoal); padding: 20px 24px; text-align: center; }
.milestone-day { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: var(--spark); letter-spacing: -0.5px; }
.milestone-name { font-size: 11px; color: rgba(240,237,230,0.35); margin-top: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-transform: uppercase; }
/* FOUNDERS */
.founders-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 52px; }
.founder-card { display: flex; flex-direction: column; }
.f-img { overflow: hidden; background: #E84B0F; margin-bottom: 16px; height: 320px; }
.f-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; filter: grayscale(8%); transition: transform 0.4s, filter 0.3s; }
.founder-card:hover .f-img img { transform: scale(1.03); filter: grayscale(0%); }
.f-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: #ffffff }
.f-role { font-size: 12px; color: var(--django); font-weight: 500; margin-top: 3px; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
.f-note { font-size: 13px; color: var(--stone); line-height: 1.6; font-style: italic; }
/* PRICING */
.pricing-box { display: grid; grid-template-columns: 1fr 1fr; background: var(--border-d); gap: 1px; border: 1px solid var(--border-d); }
.p-left { background: var(--deep); padding: 56px; }
.p-right { background: var(--dusk); padding: 56px; }
.p-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: rgba(240,237,230,0.22); text-transform: uppercase; margin-bottom: 18px; }
.p-amount { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(48px,6vw,72px); color: var(--spark); line-height: 1; letter-spacing: -2px; margin-bottom: 6px; }
.p-amount sup { font-size: 0.4em; letter-spacing: 0; vertical-align: super; color: rgba(200,241,53,0.55); }
.p-note { font-size: 13px; color: rgba(240,237,230,0.28); margin-bottom: 36px; }
.p-split { display: flex; gap: 10px; margin-bottom: 28px; }
.p-split-item { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border-d); padding: 18px 16px; }
.p-split-pct { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: var(--ash); letter-spacing: -0.5px; }
.p-split-label { font-size: 12px; color: rgba(240,237,230,0.28); margin-top: 3px; }
.p-duration { background: rgba(200,241,53,0.06); border: 1px solid rgba(200,241,53,0.15); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.p-duration-label { font-size: 13px; color: rgba(240,237,230,0.4); }
.p-duration-val { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--spark); letter-spacing: -0.5px; }
.p-includes-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(240,237,230,0.22); margin-bottom: 20px; }
.p-includes { list-style: none; margin-bottom: 28px; }
.p-includes li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-d); font-size: 13.5px; color: rgba(240,237,230,0.65); }
.p-includes li:last-child { border-bottom: none; }
.p-check { width: 18px; height: 18px; background: rgba(200,241,53,0.1); border: 1px solid rgba(200,241,53,0.25); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--spark); font-size: 10px; font-weight: 700; margin-top: 1px; }
.p-addon { background: rgba(255,255,255,0.03); border: 1px solid var(--border-d); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; }
.p-addon-text { font-size: 13px; color: rgba(240,237,230,0.45); }
.p-addon-text span { display: block; font-size: 11px; color: rgba(240,237,230,0.22); margin-top: 2px; }
.p-addon-price { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px; color: var(--spark); letter-spacing: -0.5px; }
/* CTA */
.cta-band { background: var(--spark); padding: 72px 52px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(24px,3.2vw,42px); letter-spacing: -1px; color: var(--deep); line-height: 1.1; margin-bottom: 8px; }
.cta-band p { font-size: 15px; color: rgba(14,14,12,0.5); font-style: italic; font-family: 'Literata', serif; }
.btn-dark { background: var(--deep); color: var(--ash); padding: 16px 36px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; }
.btn-dark:hover { opacity: 0.85; }
/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.hero-left > * { animation: fadeUp 0.7s ease both; }
.hero-eyebrow { animation-delay:0.05s; } h1 { animation-delay:0.15s; }
.hero-desc { animation-delay:0.28s; } .hero-btns { animation-delay:0.40s; }
/* RESPONSIVE */
@media(max-width:860px) {
  section,.cta-band { padding:64px 24px; }
  .hero { grid-template-columns:1fr; }
  .hero-left { padding:56px 28px; border-right:none; border-bottom:1px solid var(--border-d); }
  .hero-right { padding:40px 28px; }
  .icp-grid,.founders-grid,.pricing-box { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .dlv-intro { grid-template-columns:1fr; gap:32px; }
  .week { grid-template-columns:1fr; }
  .week-meta { border-right:none; border-bottom:1px solid var(--border-l); padding:28px 24px; }
  .week-content { padding:28px 24px; }
  .milestone-bar { grid-template-columns:1fr 1fr; }
  .founders-grid { gap:32px; }
  .f-img { height:260px; }
  .p-left,.p-right { padding:36px 28px; }
  .cta-band { flex-direction:column; align-items:flex-start; text-align:left; }
  .svc-bullets { display:block; }
  .dlv-pills { display:flex; }
}
@media(max-width:640px) {
  h1, .heading-anim { letter-spacing:-0.8px; }
  .s-title { letter-spacing:-0.8px; }
  section,.cta-band { padding:48px 20px; }
  .hero-left { padding:48px 20px; }
  .hero-right { padding:32px 20px; }
  .services-grid,.hero-stat-grid,.milestone-bar { grid-template-columns:1fr; }
  .not-strip { flex-direction:column; align-items:flex-start; gap:12px; }
  .p-split { flex-direction:column; }
  .dlv-row { grid-template-columns:36px 1fr 36px; }
  .dlv-body { padding:22px 14px; }
  .dlv-icon { padding:22px 10px; }
  .dlv-n { padding:22px 0 22px 14px; }
  .week-num { font-size:36px; }
  .p-amount { letter-spacing:-2px; }
  .p-left,.p-right { padding:28px 20px; }
  .p-duration,.p-addon { flex-wrap:wrap; gap:8px; }
  .cta-band h2 { letter-spacing:-1px; }
  .btn-dark, .btn-spark { width:100%; text-align:center; }
  .founders-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .f-img { height:200px; }
}
@media(max-width:420px) {
  .founders-grid { grid-template-columns:1fr; }
  .f-img { height:280px; }
  .icp-tags,.week-items { gap:8px; }
}
.heading-anim{ animation: fadeUp 0.7s ease both; }
.one-time-in{
  display: none !important;
}
/* minimal shell nav/footer so this standalone file reads correctly
   (the real site uses its shared header/footer via base.css) */
.shell-header{ background:var(--deep); color:var(--ash); padding:18px 52px; display:flex; align-items:center; justify-content:space-between; font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-0.3px; }
.shell-header a{ color:var(--ash); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:1px; }
.shell-footer{ background:var(--deep); color:rgba(240,237,230,0.4); padding:40px 52px; font-size:13px; font-family:'JetBrains Mono',monospace; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.shell-footer a{ color:rgba(240,237,230,0.4); }