/* ============================================================
   CRISPY PIZZA — BRAND STYLES
   Orange / black, gaming, creator-tool energy.
   Imports ../../../assets/css/tokens.css for spacing/radius only —
   colors here are fully overridden for this brand.
   ============================================================ */

:root{
  --cp-orange:      #f7923f;
  --cp-orange-2:    #e07a1f;
  --cp-amber:       #FFA500;
  --cp-bg:          #171717;
  --cp-surface:     #212121;
  /* Crispy keeps its own font stack, independent of Darkness
     Creations' shared --font-display (which now points to
     system fonts for the parent site). */
  --font-display:   'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --cp-surface-2:   #2a221b;
  --cp-border:      rgba(255,255,255,0.12);
  --cp-border-glow: rgba(255,255,255,0.20);
  --cp-text:        #ffffff;
  --cp-text-dim:    #d8cec5;
  --cp-text-faint:  #a89e94;
}

*, *::before, *::after{ box-sizing:border-box; }

body.cp-body{
  background:var(--cp-bg);
  color:var(--cp-text);
  font-family:var(--font-body);
  overflow-x:hidden;
  position:relative;
}

/* ---------- Backdrop ---------- */
.cp-starfield{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--cp-bg);
}

/* ---------- Top bar ---------- */
.cp-topbar{
  position:relative; z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem clamp(1.2rem, 4vw, 3rem);
}
.cp-logo{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
}
.cp-logo__mark{
  width:30px; height:30px;
  border-radius:0;
  background:var(--cp-orange);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
}
.cp-logo span.dim{ color:var(--cp-text-faint); font-weight:500; }
.cp-back-link{
  font-size:.82rem;
  color:var(--cp-text-faint);
  text-decoration:underline;
}

.cp-topbar__right{ display:flex; align-items:center; gap:.9rem; }
.cp-lang{
  display:flex; align-items:center; gap:.3rem;
  padding:.5rem .8rem;
  border-radius:0;
  border:1px solid var(--cp-border);
  font-size:.85rem;
  color:var(--cp-text-dim);
}

/* Override shared account slot for Crispy palette */
.cp-topbar [data-dc-account] .dc-coin-badge{
  border-color:var(--cp-border-glow);
  background:rgba(255,122,0,0.12);
  color:var(--cp-amber);
}
.cp-topbar [data-dc-account] .btn--ghost{
  border-color:var(--cp-border-glow);
  background:rgba(255,122,0,0.08);
}

/* ---------- Hero ---------- */
.cp-hero{
  position:relative; z-index:1;
  padding:2.5rem clamp(1.2rem, 4vw, 3rem) 3rem;
  text-align:center;
}
.cp-hero__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.2rem, 6vw, 3.8rem);
  line-height:1.08;
  letter-spacing:-0.01em;
}
.cp-hero__title .cp-name{
  background:var(--cp-orange);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cp-hero__sub{
  margin-top:1rem;
  color:var(--cp-text-dim);
  font-size:1.05rem;
}
.cp-hero__cta{
  margin-top:1.8rem;
}

/* ---------- Buttons (gradient, glossy) ---------- */
.cp-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.95rem 2.2rem;
  border-radius:0;
  font-weight:700;
  font-size:.95rem;
  color:#1a0800;
  background:var(--cp-orange);
  border:1px solid transparent;
  transition:background .2s var(--ease);
}
.cp-btn:hover{ background:var(--cp-orange-2); }
.cp-btn--red{ background:#d9481f; color:#fff; }
.cp-btn--ghost-cp{
  background:var(--cp-surface-2);
  color:var(--cp-text);
  border:1px solid var(--cp-border);
}
.cp-btn--sm{ padding:.7rem 1.4rem; font-size:.85rem; width:100%; justify-content:center; }

/* ---------- Section shell ---------- */
.cp-section{ position:relative; z-index:1; padding:3rem clamp(1.2rem, 4vw, 3rem); }
.cp-section__head{ text-align:center; max-width:640px; margin:0 auto 2.4rem; }
.cp-section__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
}
.cp-section__title .accent{ color:var(--cp-orange); }
.cp-section__sub{ margin-top:.7rem; color:var(--cp-text-dim); }

/* ---------- Project file shelf ---------- */
.cp-shelf{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1.1rem;
}
@media (max-width:1100px){ .cp-shelf{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px){ .cp-shelf{ grid-template-columns:repeat(2, 1fr); } }

.cp-card{
  position:relative;
  border-radius:0;
  overflow:hidden;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  transition:border-color .2s var(--ease);
}
.cp-card:hover{ border-color:var(--cp-border-glow); }
.cp-card__media{
  height:150px;
  position:relative;
  background:var(--cp-surface-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  color:rgba(255,255,255,0.25);
  font-size:.8rem;
}
.cp-card__badge{
  position:absolute; top:.6rem; left:.6rem;
  font-size:.68rem; font-weight:700;
  padding:.25rem .55rem;
  border-radius:0;
  background:var(--cp-orange);
  color:#1a0800;
}
.cp-card__lock{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap:.4rem;
  background:rgba(0,0,0,0.6);
  color:var(--cp-text-dim);
  font-size:.78rem;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.cp-card--locked:hover .cp-card__lock{ opacity:1; }
.cp-card__body{ padding:1rem 1rem 1.2rem; }
.cp-card__body h4{ font-size:.92rem; font-weight:600; }
.cp-card__price{ margin-top:.4rem; color:var(--cp-orange); font-weight:700; font-size:.95rem; }
.cp-card__body .cp-btn{ margin-top:.8rem; }

/* ---------- Blueprint / skills cards ---------- */
.cp-blueprints{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
@media (max-width:820px){ .cp-blueprints{ grid-template-columns:1fr; } }
.cp-blueprint{
  text-align:center;
  padding:1.6rem;
  border-radius:0;
  border:1px solid var(--cp-border);
  background:var(--cp-surface);
}
.cp-blueprint__cover{
  height:180px;
  border-radius:0;
  margin-bottom:1.2rem;
  background:var(--cp-surface);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
}
.cp-blueprint__cover span.popular{
  position:absolute; top:.6rem; right:.6rem;
  font-size:.65rem; font-weight:700;
  background:#ff4d4d; color:#fff;
  padding:.2rem .5rem; border-radius:0;
}
.cp-blueprint h4{ font-size:1rem; font-weight:600; margin-bottom:.9rem; }

/* ---------- Apps strip ---------- */
.cp-apps{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  flex-wrap:wrap;
}
.cp-app-icon{
  width:64px; height:64px;
  border-radius:0;
  background:var(--cp-surface);
  border:1px solid var(--cp-border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  color:var(--cp-text-dim);
}

/* ---------- Editor mockup ---------- */
.cp-mockup{
  border-radius:0;
  border:1px solid var(--cp-border);
  background:var(--cp-surface);
  padding:1.4rem;
  max-width:820px;
  margin:0 auto;
}
.cp-mockup__bar{ display:flex; gap:.4rem; margin-bottom:1rem; }
.cp-mockup__bar span{ width:10px; height:10px; border-radius:50%; background:var(--cp-border); }
.cp-mockup__grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; }
.cp-mockup__panel{ background:rgba(255,255,255,0.03); border-radius:0; padding:1rem; min-height:160px; }
.cp-mockup__panel .line{ height:8px; border-radius:0; background:rgba(255,255,255,0.08); margin-bottom:.6rem; }
.cp-mockup__panel .line.orange{ background:var(--cp-orange); width:60%; }

/* ---------- Offer grid ---------- */
.cp-offer-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
}
@media (max-width:900px){ .cp-offer-grid{ grid-template-columns:repeat(2, 1fr); } }
.cp-offer-card{
  text-align:center;
  padding:1.8rem 1.2rem;
  border-radius:0;
  border:1px solid var(--cp-border);
  background:var(--cp-surface);
}
.cp-offer-card__icon{
  width:44px; height:44px;
  margin:0 auto 1rem;
  border-radius:0;
  background:var(--cp-orange);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.cp-offer-card h4{ font-size:.98rem; font-weight:600; margin-bottom:.5rem; }
.cp-offer-card p{ font-size:.85rem; color:var(--cp-text-dim); }

/* ---------- Final CTA ---------- */
.cp-final{
  text-align:center;
  padding:4rem clamp(1.2rem,4vw,3rem);
}
.cp-final h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
}
.cp-final p{ margin-top:.9rem; color:var(--cp-text-dim); max-width:44ch; margin-inline:auto; }
.cp-final .cp-btn{ margin-top:1.6rem; }

/* ---------- Footer ---------- */
.cp-footer{
  position:relative; z-index:1;
  border-top:1px solid var(--cp-border);
  padding:3rem clamp(1.2rem,4vw,3rem) 6rem;
  text-align:center;
}
.cp-footer__logo{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin-bottom:1.6rem; }
.cp-footer__cols{
  display:flex;
  justify-content:center;
  gap:3rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.cp-footer__cols a{
  display:block;
  color:var(--cp-text-dim);
  font-size:.88rem;
  margin-bottom:.7rem;
}
.cp-footer__socials{ display:flex; justify-content:center; gap:.8rem; margin-bottom:1.6rem; }
.cp-footer__socials a{
  width:38px; height:38px;
  border-radius:0;
  border:1px solid var(--cp-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--cp-text-dim);
}
.cp-footer__copy{ color:var(--cp-text-faint); font-size:.8rem; }

/* ---------- Bottom fixed nav (DrillUp signature) ---------- */
.cp-bottom-nav{
  position:fixed; bottom:1.2rem; left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(14px);
  border:1px solid var(--cp-border);
  border-radius:0;
  padding:.35rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.cp-bottom-nav a{
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1.4rem;
  border-radius:0;
  font-size:.85rem;
  font-weight:600;
  color:var(--cp-text-dim);
  transition:all .3s var(--ease);
}
.cp-bottom-nav a.is-active{
  background:var(--cp-orange);
  color:#1a0800;
}
.cp-bottom-nav a svg{ width:16px; height:16px; }

/* ---------- Reveal (reuse shared class name) ---------- */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.is-visible{ opacity:1; transform:translateY(0); transition:opacity .8s var(--ease), transform .8s var(--ease); }