/* Nocturne v4 — Devolar. Dark indigo ground, violet accent, Space Grotesk display. */

body {
  background:
    radial-gradient(1200px 720px at 82% -160px, rgba(43,39,65,0.75), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, rgba(0,0,0,0.30), transparent 55%),
    var(--color-bg);
  text-wrap: pretty;
}

h1, h2, h3, h4, .brand, .stat-value, .plan-price, .bento-value { font-weight: 500; }
a { color: #d2cefd; }
a:hover { color: var(--color-primary); }
::selection { background: rgba(145,132,217,0.30); }

/* nav — borderless, last item (contact) as the outline button */
.site-header { border-block-end: none; background: rgba(22,24,38,0.82); }
.site-nav a:last-child {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius);
  padding: 0.42em 1em;
}
.site-nav a:last-child:hover { background: rgba(145,132,217,0.12); }

/* buttons — primary solid violet, secondary outline */
.button, .hero .button, .cta-band .button {
  background: var(--color-primary);
  color: #14151f;
  border: 1px solid transparent;
  font-weight: 500;
}
.button:hover { filter: brightness(1.1); transform: none; }
.button-secondary, .hero .button-secondary, .plan .button {
  background: transparent;
  border: 1px solid rgba(145,132,217,0.6);
  color: #d2cefd;
}
.button-secondary:hover, .plan .button:hover { background: rgba(145,132,217,0.12); filter: none; }
.plan-featured .button { background: var(--color-primary); color: #14151f; border: none; }

/* hero — page ground, grid backdrop, glow */
.hero {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  background:
    linear-gradient(rgba(58,61,77,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,61,77,0.16) 1px, transparent 1px),
    radial-gradient(900px 500px at 70% -10%, rgba(78,70,140,0.35), transparent 65%),
    var(--color-bg);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 50% 100%, transparent 40%, var(--color-bg) 96%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.hero-badge { border-color: rgba(145,132,217,0.4); color: #d2cefd; background: rgba(145,132,217,0.08); }
.hero-subtitle { font-size: 1.08rem; opacity: 0.85; }
.hero-note { opacity: 0.55; font-size: 0.9rem; max-width: 46ch; }

/* demo panel — glassy on the glow */
.demo-panel {
  background: rgba(30, 32, 46, 0.75);
  backdrop-filter: blur(10px);
  border-color: #3a3d4d;
  box-shadow: 0 0 0 1px rgba(145,132,217,0.12), 0 32px 90px rgba(0,0,0,0.6);
}
.demo-head { border-color: #33364433; letter-spacing: 0.16em; }
.demo-prompt { border-color: rgba(145,132,217,0.5); background: rgba(22,24,38,0.7); color: #e4e1fb; }
.demo-step { opacity: 0.92; }
.demo-meta { border-color: #33364433; }
.demo-action { border-color: rgba(145,132,217,0.5); color: #d2cefd; }

/* stats band — indigo ground with glow, uppercase labels */
.stats {
  background:
    radial-gradient(900px 420px at 85% -40%, rgba(53,59,128,0.7), transparent 64%),
    var(--color-band-bg);
}
.stat-value { margin-inline-start: -0.055em; }
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.81rem;
  opacity: 0.64;
  margin-block-start: 0.9em;
}

/* bento + cards + plans — surface ground, hairline edge, hover glow */
.bento-item, .card, .plan {
  background:
    radial-gradient(420px 200px at 20% 0%, rgba(145,132,217,0.05), transparent 70%),
    var(--color-card-bg);
  border: none;
  box-shadow: 0 0 0 1px #3f424d;
}
.bento-item:hover, .card:hover {
  transform: none;
  box-shadow: 0 0 0 1px #6a63a8, 0 10px 34px rgba(0,0,0,0.5);
}
.bento-item .icon, .card .icon { color: var(--color-primary); }
.bento-value { color: var(--color-primary); }
.card h2 { font-size: 1.13rem; }
.card p { font-size: 0.92rem; }
.card-kicker { font-size: 0.69rem; letter-spacing: 0.09em; }
.plan-name { color: var(--color-primary); font-size: 0.69rem; }
.plan-price { font-feature-settings: 'tnum' 1; }
.plan-items li { opacity: 0.82; font-size: 0.91rem; }
.plan .button { text-align: center; }
.plan-featured {
  box-shadow: 0 0 0 1px var(--color-primary), 0 0 44px rgba(145,132,217,0.22), 0 18px 60px rgba(0,0,0,0.5);
}
.plan-badge { background: var(--color-primary); color: #14151f; }

/* section intros, chips, faq */
.section-intro { margin-block-end: 2.4rem; }
.section-intro h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); letter-spacing: -0.015em; }
.section-intro .lede { opacity: 0.7; font-size: 1.02rem; }
.kicker { color: var(--color-primary); letter-spacing: 0.06em; font-weight: 400; }
.chip { background: rgba(35,37,50,0.55); border-color: #3a3d4d; font-weight: 400; color: #d6d6de; }
.chip svg { color: var(--color-primary); }
.faq-grid { gap: 2.1rem clamp(24px, 5vw, 72px); }
.faq-item h3 { font-size: 1.13rem; }
.faq-item p { opacity: 0.78; }

/* cta band */
.cta-band {
  background:
    radial-gradient(900px 420px at 85% -40%, rgba(53,59,128,0.7), transparent 64%),
    var(--color-band-bg);
}
.cta-band h2 { font-size: 1.9rem; }

/* footer — fading rule, the Nocturne signature */
.site-footer {
  border-block-start: none;
  background: linear-gradient(to right,
    transparent, #3a3d4d 48px, #3a3d4d calc(100% - 48px), transparent)
    no-repeat top / 100% 1px;
  opacity: 0.7;
}
.footer-nav a { opacity: 0.85; }
.footer-nav a:hover { color: var(--color-primary); opacity: 1; }

/* forms on the dark ground */
.contact-form input, .contact-form textarea {
  background: var(--color-card-bg);
  border-color: #3a3d4d;
}
.contact-form input:focus, .contact-form textarea:focus { outline-color: var(--color-primary); }

/* mobile — custom rules must collapse with the base */
@media (max-width: 760px) {
  .hero { background-size: 34px 34px, 34px 34px, auto, auto; }
  .hero-grid { gap: 2.2rem; }
  .hero-subtitle { font-size: 1rem; }
  .demo-panel { font-size: 0.85rem; }
  .section-intro { margin-block-end: 1.6rem; }
  .site-nav a:last-child { padding: 0.3em 0.8em; }
}