/* ============================================================
   HOME — Cosmic 404 design language + SaaS layout
============================================================ */



body.home{
  background:
    radial-gradient(circle at 12% 12%, rgba(168,85,247,.30), transparent 55%),
    radial-gradient(circle at 88% 18%, rgba(34,211,238,.22), transparent 55%),
    radial-gradient(circle at 45% 92%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(circle at 18% 72%, rgba(236,72,153,.16), transparent 60%),
    linear-gradient(180deg, var(--cc-bg-mid) 0%, var(--cc-bg-deep) 70%) !important;
  color: rgba(255,255,255,0.92);
}

/* IMPORTANT: create a stacking context so the stars render */
body.home .ccv2-home{
  position: relative;
  isolation: isolate;
}

/* subtle stars overlay (visible) */
body.home .ccv2-home::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.20) 1px, transparent 1px);
  background-size: 140px 140px, 220px 220px;
  background-position: 0 0, 60px 90px;
  opacity: 0.14;
}

/* keep all content above the star layer */
body.home .ccv2-home > *{
  position: relative;
  z-index: 1;
}

/* remove banded section backgrounds */
body.home .ccv2-home .ccv2-section{
  background: transparent !important;
}


.ccv2-home{ position: relative; }

.ccv2-section{
  position: relative;
  padding: 110px 0;
  background: transparent;
  z-index: 1;
}

.ccv2-container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Typography */
.ccv2-home p, .ccv2-home li{
  font-size: var(--cc-body);
  line-height: calc(var(--cc-body) * var(--cc-line));
  letter-spacing: var(--cc-track);
  color: rgba(229,231,235,0.92);
}

.ccv2-section-title{
  font-size: clamp(34px, 2.6vw, 46px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 0 12px;
}

.ccv2-section-text{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  color: rgba(163,173,194,0.95);
}

/* Buttons */
.ccv2-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.ccv2-btn-primary{
  background: linear-gradient(135deg, var(--cc-orange), var(--cc-pink));
  color: #081018;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45), 0 0 0 8px rgba(249,115,22,0.18);
}
.ccv2-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 12px rgba(249,115,22,0.25); }

.ccv2-btn-ghost{
  background: rgba(15,23,42,0.55);
  border-color: rgba(148,163,184,0.45);
  color: var(--cc-text);
}
.ccv2-btn-ghost:hover{ transform: translateY(-1px); border-color: rgba(34,211,238,0.8); }

.ccv2-btn-link{
  background: transparent;
  border: 0;
  padding: 14px 6px;
  color: rgba(229,231,235,0.92);
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.9;
}
.ccv2-btn-link:hover{ opacity: 1; }

/* HERO */
.ccv2-hero{ padding-top: 130px; padding-bottom: 120px; }
.ccv2-hero-bg{
  position: absolute;
  inset: -200px;
  background:
    radial-gradient(circle at 0 0, rgba(168,85,247,0.35), transparent 55%),
    radial-gradient(circle at 100% 30%, rgba(34,211,238,0.28), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(249,115,22,0.22), transparent 60%);
  opacity: 1;
  filter: blur(0px);
  z-index: 0;
}

.ccv2-hero .ccv2-container{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: center;
}

.ccv2-hero h1{
  font-size: clamp(52px, 4.2vw, 72px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
}

.ccv2-hero h1 span{
  background: linear-gradient(120deg, var(--cc-orange), #facc15, var(--cc-cyan), var(--cc-purple));
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ccv2Gradient 12s ease infinite;
}

@keyframes ccv2Gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.ccv2-hero-text{ max-width: 56ch; color: rgba(229,231,235,0.92); }

.ccv2-hero-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 18px; }

.ccv2-hero-trust{ margin-top: 12px; font-size: 14px; color: rgba(163,173,194,0.95); }
.ccv2-hero-trust::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,0.25); margin-right:8px; }

/* Mock card */
.ccv2-mock-card{
  width: 100%;
  max-width: 460px;
  border-radius: 22px;
  background: radial-gradient(circle at top, rgba(2,6,23,0.95), rgba(15,23,42,0.9));
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  padding: 14px 16px 16px;
}

.ccv2-mock-header{ display:flex; align-items:center; justify-content:space-between; font-size: 12px; color: rgba(163,173,194,0.95); margin-bottom: 10px; }
.ccv2-dots{ display:flex; gap: 4px; }
.ccv2-dots span{ width:8px; height:8px; border-radius:999px; background:#4b5563; }
.ccv2-dots span:nth-child(1){background: var(--cc-orange);} .ccv2-dots span:nth-child(2){background:#22c55e;} .ccv2-dots span:nth-child(3){background: var(--cc-cyan);} 

.ccv2-mock-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px; }
.ccv2-pill{ padding: 4px 8px; border-radius: 999px; font-size: 12px; background: linear-gradient(135deg,#22c55e,#a3e635); color:#022c22; font-weight: 800; }
.ccv2-pill-pill{ padding: 4px 8px; border-radius: 999px; font-size: 12px; background: rgba(15,23,42,0.55); border:1px solid rgba(148,163,184,0.45); }
.ccv2-mock-list{ list-style:none; padding:0; margin:0; }
.ccv2-mock-list li{ margin-bottom: 6px; color: rgba(203,213,245,0.95); }

/* Trial band */
.ccv2-trial-hero{ padding: 90px 0; text-align: center; }
.ccv2-trial-title{ font-size: clamp(34px, 2.6vw, 44px); font-weight: 900; margin: 0 0 12px; }
.ccv2-trial-title span{ background: linear-gradient(120deg, var(--cc-purple), var(--cc-cyan)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.ccv2-trial-sub{ max-width: 820px; margin: 0 auto 22px; color: rgba(229,231,235,0.88); }
.ccv2-trial-note{ margin-top: 10px; color: rgba(163,173,194,0.95); font-size: 14px; }

/* Grids & cards */
.ccv2-grid{ display:grid; gap: 28px; margin-top: 42px; }
.ccv2-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ccv2-grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

.ccv2-card{
  background: radial-gradient(circle at top left, rgba(255,255,255,0.10), var(--cc-card));
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 20px 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ccv2-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 80px rgba(0,0,0,0.65), 0 0 36px rgba(168,85,247,0.28); border-color: rgba(168,85,247,0.6); }
.ccv2-card h3{ margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing:-0.015em; }
.ccv2-card p{ margin: 0; color: rgba(229,231,235,0.88); }

/* Optimizer section */
.ccv2-optimizer-section{ padding-top: 120px; }
.ccv2-optimizer-shell{
  max-width: 1040px;
  margin: 32px auto 0;
  padding: 28px 24px;
  border-radius: 28px;
  background: rgba(15,23,42,0.86);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 32px 88px rgba(0,0,0,0.55);
  position: relative;
}
.ccv2-optimizer-bar{ height:4px; border-radius:999px; background: linear-gradient(90deg, var(--cc-cyan), var(--cc-purple), var(--cc-orange), #22c55e, var(--cc-cyan)); background-size: 220% 100%; animation: ccseoBar 11s linear infinite; margin-bottom: 14px; }
@keyframes ccseoBar{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

.ccv2-optimizer-topbar{ display:flex; justify-content:space-between; align-items:center; gap: 10px; font-size: 13px; }
.ccv2-optimizer-status{ padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg,#22c55e,#a3e635); color:#022c22; font-weight:900; }
.ccv2-optimizer-tag{ padding: 4px 11px; border-radius: 999px; border:1px solid rgba(148,163,184,0.35); background: rgba(2,6,23,0.25); }

.ccv2-demo-shell{ max-width: 980px; margin: 24px auto 0; }

/* Mobile */
@media (max-width: 1024px){
  .ccv2-hero .ccv2-container{ grid-template-columns: 1fr; }
  .ccv2-hero-mock{ order: -1; }
}

@media (max-width: 900px){
  .ccv2-container{ padding: 0 18px; }
  .ccv2-section{ padding: 72px 0; }
  .ccv2-hero{ padding-top: 95px; padding-bottom: 80px; }
  .ccv2-grid-3, .ccv2-grid-4{ grid-template-columns: 1fr; }
}
.ccv2-section{
  padding: clamp(64px, 6vw, 96px) 0;
}
.ccv2-section + .ccv2-section{
  padding-top: clamp(44px, 5vw, 72px);
}