/* Premes Software Solutions — Purple/Black Modern Styles */
:root{
  --bg:#0b0b12;
  --surface:#10101a;
  --elev:#151527;
  --text:#ececf3;
  --muted:#9aa3b2;
  --brand:#a78bfa; /* lavender */
  --brand-strong:#7c3aed; /* indigo-purple */
  --link:#c4b5fd;
  --ring: 0 0 0 2px rgba(167,139,250,.35);
  --shadow: 0 12px 34px rgba(0,0,0,.45);
  --maxw: 1200px;
  --radius: 22px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#0e0e17; /* keep dark-forward even in light to honor request */
    --surface:#131324;
    --elev:#191932;
    --text:#f1f1f6;
    --muted:#a6afc3;
    --link:#caaaff;
  }
}

*{ box-sizing: border-box; }
html:focus-within{ scroll-behavior: smooth; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(800px 400px at 10% -10%, rgba(34,211,238,.08), transparent 65%),
    var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; }
.section{ padding: clamp(56px, 8vw, 110px) 0; }
h1{ font-size: clamp(2.3rem, 4vw + 1rem, 4.6rem); line-height:1.05; margin:0 0 .6rem; letter-spacing:-.02em; }
h2{ font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); line-height:1.15; margin:0 0 .8rem; letter-spacing:-.01em; }
p{ font-size: clamp(1rem, .25vw + .95rem, 1.12rem); color:var(--muted); margin:0 0 1rem; }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.02em; }
.brand img{ width:38px; height:38px; object-fit:cover; border-radius:10px; }
.nav a.link{ padding:.55rem .9rem; border-radius:12px; display:inline-flex; align-items:center; gap:.5rem; }
.nav a.link:hover{ background: color-mix(in oklab, var(--elev) 70%, transparent); text-decoration:none; }
.nav a.link.active{ color:var(--brand); background: color-mix(in oklab, var(--elev) 78%, transparent); }

/* Hero */
.hero{ position:relative; overflow:clip;
  background:
   radial-gradient(1200px 400px at 10% -5%, rgba(124,58,237,.25), transparent 60%),
   radial-gradient(1000px 500px at 90% -10%, rgba(34,211,238,.10), transparent 65%);
}
.hero .grid{ display:grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: 1.1fr .9fr; }
@media (max-width: 980px){ .hero .grid{ grid-template-columns:1fr; } }
.kicker{ display:inline-flex; align-items:center; gap:.6rem; padding:.35rem .65rem; border-radius:999px;
  background: color-mix(in oklab, var(--elev) 75%, transparent); color:var(--brand); font-weight:600; font-size:.95rem;
  border:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
}
.buttons{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.2rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.15rem; border-radius:14px; border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 22%, var(--elev)), var(--elev));
  color:var(--text); font-weight:650; box-shadow: var(--shadow);
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow: 0 14px 40px rgba(0,0,0,.5); text-decoration:none; }
.btn.ghost{ background: color-mix(in oklab, var(--elev) 80%, transparent); border-color: color-mix(in oklab, var(--text) 14%, transparent); box-shadow:none; }

.device{
  aspect-ratio: 16/10; border-radius: 28px; overflow:hidden;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 88%, transparent), transparent), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 26px 70px rgba(0,0,0,.55);
  position:relative;
}
.device img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.95; }

/* Features */
.grid{ display:grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .grid{ grid-template-columns:1fr; } }
.card{
  background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 88%, transparent), transparent);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius); padding: clamp(16px, 2.2vw, 24px);
  box-shadow: var(--shadow); overflow:hidden; position:relative;
}
.card .badge{ display:inline-block; font-size:.85rem; padding:.35rem .6rem; border-radius:999px;
  background: color-mix(in oklab, var(--elev) 78%, transparent); color:var(--brand);
  border:1px solid color-mix(in oklab, var(--brand) 25%, transparent);
}

/* Sticky scrollytelling — shortened */
.sticky-panels{ position:relative; }
.panel{ position:sticky; top:72px; min-height: 68svh; display:grid; place-items:center; padding:1.2rem 0; }
.panel .frame{ width:min(100% - 2rem, 900px); aspect-ratio:16/9; overflow:hidden; border-radius:24px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--surface); box-shadow: var(--shadow);
}
.panel img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Pricing */
.pricing{ display:grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width:1100px){ .pricing{ grid-template-columns:1fr; } }
.tier{
  background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 85%, transparent), transparent);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: 24px; padding: 24px; box-shadow: var(--shadow);
}
.tier .name{ font-weight:800; letter-spacing:.02em; color:var(--text); }
.price{ font-size: clamp(2rem, 3vw + 1rem, 3rem); font-weight:800; letter-spacing:-.02em; }
.list{ list-style:none; padding:0; margin:1rem 0 0; }
.list li{ display:flex; gap:.6rem; align-items:flex-start; margin:.4rem 0; }
.list li::before{ content:"✓"; color:var(--brand); margin-top:.1rem; }

/* FAQ */
.faq{ max-width: 900px; margin: 0 auto; }
.faq details{ background: color-mix(in oklab, var(--elev) 83%, transparent); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 14px; padding: 14px 16px; margin: 10px 0; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--text); }
.faq p{ margin-top:.6rem; }

/* Footer */
.footer{ padding:54px 0; border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent); color:var(--muted); }

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; will-change: transform, opacity; content-visibility: auto; }
.reveal.show{ opacity:1; transform:none; }

/* Utilities */
.center{text-align:center;} .muted{ color:var(--muted); } .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.elev{ background: var(--elev); border-radius: var(--radius); padding: clamp(16px, 2.2vw, 24px); box-shadow: var(--shadow); }
.round{ border-radius: var(--radius); }