@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root{
  --bg:#000;
  --panel:#0b0b0b;
  --line:#1a1a1a;
  --line-2:#2a2a2a;
  --text:#e8e8e8;
  --muted:#a9a9a9;
  --white:#fff;
  --radius:16px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
#email-form[hidden]{display:none !important;}

/* === Cinematic background === */
.bg-grid{
  position:fixed; inset:0; z-index:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px; background-position:center;
  filter: contrast(105%) brightness(95%);
}
.bg-scan{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70vw 70vw at 50% 55%, rgba(255,255,255,.07), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
}
.bg-noise{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".035"/></svg>');
  opacity:.35;
}

/* === Topbar === */
.topbar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:rgba(0,0,0,.72); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(8px);
}
.brand{display:flex;align-items:center;gap:10px}
.logo-mark{width:18px;height:18px;border:2px solid var(--white);border-top:none;border-bottom:none;border-radius:3px}
.logo-type{font-weight:700;letter-spacing:.15em}
.nav a{color:var(--muted);text-decoration:none;margin:0 10px;font-weight:600}
.nav a:hover{color:var(--white)}

/* === Wrapper === */
.wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:48px 22px}

/* === Hero === */
.hero{display:grid;gap:18px;justify-items:center;padding:70px 0 36px;text-align:center}
.hero-title{
  font-size: clamp(60px, 10vw, 120px);
  line-height:.95; 
  letter-spacing:.08em; 
  text-transform:uppercase;
  font-weight:700;
  text-shadow:0 0 20px rgba(255,255,255,.1);
  animation: heroPop .7s ease both;
}
@keyframes heroPop{from{opacity:0; transform: translateY(8px) scale(.985)} to{opacity:1; transform: translateY(0) scale(1)}}
.hero-sub{color:var(--muted);font-size:1.1rem;letter-spacing:.15em}

/* === Buttons === */
.btn{
  appearance:none;border:none;
  background:linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  color:#000;
  padding:13px 20px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:14px; 
  box-shadow:0 4px 16px rgba(255,255,255,.12);
  transition:.24s transform ease, .24s background ease, .24s box-shadow ease;
  font-family:'Space Grotesk',sans-serif;
  width:100%;
}
.btn:hover{
  background:linear-gradient(135deg, #fff 0%, #fff 100%);
  box-shadow:0 8px 28px rgba(255,255,255,.18);
  transform:translateY(-3px)
}
.btn:active{transform:translateY(-1px)}

.icon-btn{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-2);
  color:#cfcfcf;
  padding:8px 10px;
  cursor:pointer;
  border-radius:12px; 
  transition:.2s ease;
  font-size:0.9rem;
}
.icon-btn:hover{border-color:var(--white);color:var(--white);box-shadow:0 8px 18px rgba(255,255,255,.08)}

/* === Product === */
.product{margin-top:12px;display:flex;justify-content:center}
.product-card{
  border:1px solid var(--line); background:linear-gradient(180deg,#0c0c0c,#070707);
  padding:26px; display:grid; gap:14px; border-radius:var(--radius);
  max-width:800px;
}
.product-card.soft{box-shadow: 0 22px 50px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.02)}
.product-head{display:flex;align-items:center;gap:10px}
.product-head h2{text-transform:uppercase;font-size:1.2rem}
.chip{border:1px solid var(--line-2);padding:6px 10px;font-size:.75rem;color:#cfcfcf;border-radius:999px;background:rgba(255,255,255,.02)}
.kv{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.kv li{list-style:none;color:#cfcfcf;font-size:.92rem}
.kv li span{color:#8d8d8d;margin-right:6px}

/* === Features === */
.features{padding:50px 0 20px}
.feature-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.feature{
  padding:24px;
  border-radius:var(--radius);
  display:grid;
  gap:12px;
  text-align:center;
  transition:.24s transform ease, .24s box-shadow ease;
}
.feature:hover{
  transform:translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
}
.feature-icon{
  font-size:2rem;
  color:#cfcfcf;
  margin-bottom:4px;
}
.feature h5{
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1rem;
  color:var(--white);
}
.muted{color:var(--muted);font-size:.92rem;line-height:1.6}

/* === Plans === */
.section-title{margin:70px 0 10px 0;text-transform:uppercase;font-size:1.02rem;color:#cfcfcf;letter-spacing:.18em;text-align:center}
.mini{margin-top:-2px;margin-bottom:18px;text-align:center}
.plan-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#0c0c0c 0%, #070707 100%);
  border-radius:var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  transition:.24s transform ease, .24s box-shadow ease;
}
.plan{
  padding:20px;display:grid;gap:12px; position:relative; overflow:hidden; transform: translateZ(0);
}
.plan::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(160px 80px at 0% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(120deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, -150% 0;
  opacity:.15; transition: background-position .9s ease;
  pointer-events:none;
}
.plan:hover::after{background-position:0 0, 150% 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}
.panel-head h4{text-transform:uppercase;letter-spacing:.12em}
.price{font-size:1.5rem}
.panel:hover{box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04); transform: translateY(-2px)}
.soft{box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02)}
.float-in{opacity:0; transform: translateY(10px); animation: floatIn .6s ease forwards; animation-delay: var(--d, 0s)}
@keyframes floatIn{to{opacity:1; transform: translateY(0)}}

/* Email form */
.panel-form{max-width:520px;margin:30px auto 0;padding:22px 22px 24px;display:grid;gap:14px}
.form-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pill{border:1px solid var(--line-2);padding:6px 10px;border-radius:999px;color:#cfcfcf;background:rgba(255,255,255,.02)}
.panel-form input{
  background:#000;border:1px solid var(--line-2);color:var(--white);padding:14px;font-family:inherit;border-radius:12px;
  font-size:0.95rem;
}
.panel-form input:focus{outline:none;border-color:var(--line)}
.err{color:#ff6b6b;font-size:0.9rem}

/* === Modal === */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(12px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5;
  animation: fadeBg .3s ease;
}
@keyframes fadeBg{from{opacity:0}to{opacity:1}}
.modal-box{
  width:min(480px,92vw);
  padding:32px 36px;
  position:relative;
  border-radius:var(--radius);
  animation: modalIn .35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalIn{
  from{transform: translateY(12px) scale(0.96); opacity:0}
  to{transform:none;opacity:1}
}
.modal-box h2{
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:20px;
  color:var(--white);
  padding-bottom:12px;
  border-bottom:1px solid var(--line-2);
}
.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  border-radius:12px;
  font-size:1.8rem;
  line-height:1;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
}
.modal-close:hover{
  background:rgba(255,255,255,.1);
  transform:scale(1.1);
}
.modal-list{
  margin-top:18px;
  display:grid;
  gap:14px;
}
.modal-list li{
  list-style:none;
  padding:14px 18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line-2);
  border-radius:10px;
  color:#d4d4d4;
  font-size:1rem;
  line-height:1.5;
  transition:all .2s ease;
}
.modal-list li:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
  transform:translateX(4px);
}

/* === Footer === */
.foot{max-width:1160px;margin:40px auto;padding:20px;color:var(--muted);border-top:1px solid var(--line);text-align:center}

/* === SUCCESS PAGE === */
.success-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
}

.success-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.success-box {
  background: linear-gradient(180deg,#0c0c0c,#070707);
  border: 1px solid var(--line);
  padding: 50px 40px;
  box-shadow: 0 22px 50px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.02);
  animation: fadeIn 0.5s ease;
  border-radius: var(--radius);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.success-box h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.success-box p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 30px;
  line-height: 1.7;
}

.check-icon {
  color: #4ade80;
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.order-box {
  background: #000;
  border: 1px solid var(--line);
  padding: 25px 20px;
  color: #bbb;
  min-height: 120px;
  margin-bottom: 30px;
  word-break: break-word;
  text-align: left;
  line-height: 1.8;
  border-radius: 12px;
}

.order-box p {
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.order-box strong {
  color: var(--white);
  font-weight: 600;
}

.order-box code {
  background: #0a0a0a;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  color: #4ade80;
  font-size: 0.9rem;
  border-radius: 6px;
}

.home-link {
  display: inline-block;
  color: #000;
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  text-transform: uppercase;
  border: none;
  padding: 13px 30px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: all 0.24s ease;
  box-shadow: 0 4px 16px rgba(255,255,255,.12);
  border-radius: 14px;
}
.home-link:hover {
  background: linear-gradient(135deg, #fff 0%, #fff 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255,255,255,.18);
}

/* === Responsive === */
@media (max-width: 980px){
  .plan-grid,.feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .plan-grid,.feature-grid{grid-template-columns:1fr}
  .topbar{gap:8px}
  .nav{display:none}
  .success-box {
    padding: 40px 25px;
  }
  .hero-title{font-size:clamp(48px,12vw,80px)}
}