:root{
  --bg:#0b0f17;
  --card:#111827;
  --accent:#3b82f6;
  --accent-2:#60a5fa;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --success:#22c55e;
  --danger:#ef4444;
  --glow: 0 0 40px rgba(59,130,246,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(1000px 600px at 20% 110%, rgba(96,165,250,.12), transparent 60%),
    linear-gradient(180deg, #0a0f1a, #0b0f17);
  min-height:100%;
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:28px 18px 64px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow: var(--glow)}
.nav a.btn{margin-left:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;background:linear-gradient(180deg, var(--accent), var(--accent-2));color:white;font-weight:600;border:none;cursor:pointer;box-shadow: var(--glow);transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease}
.btn:hover{ transform: translateY(-2px) }
.btn:active{ transform: translateY(0px) scale(.98) }
.btn-ghost{background:rgba(255,255,255,.06);box-shadow:none}
.hero{display:grid;grid-template-columns: 1.1fr .9fr;gap:32px;align-items:center;padding:32px 0 10px}
@media (max-width: 920px){ .hero{ grid-template-columns: 1fr } }
.h1{font-size: clamp(28px, 4vw, 48px);line-height: 1.05;margin:0 0 14px;font-weight:800}
.p-lg{ color:var(--muted); font-size: clamp(14px, 2.2vw, 18px); margin:0 0 24px }
.grid-3{display:grid;grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:24px}
@media (max-width: 920px){ .grid-3{ grid-template-columns: 1fr } }
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;position:relative;overflow:hidden;backdrop-filter: blur(6px);box-shadow: 0 6px 40px rgba(0,0,0,.25);transform-style: preserve-3d;perspective: 1000px}
.card h3{ margin:4px 0 8px }
.card p{ margin:0; color: var(--muted) }
.badge{position:absolute; top:12px; right:12px;padding:6px 10px;font-size:12px; font-weight:700;border-radius:999px;background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.4);color:#cfe3ff}
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px }
.footer{ margin-top:40px; opacity:.7; font-size:13px; text-align:center }
/* 3D entering animation */
.page-enter{ animation: pageIn .6s cubic-bezier(.2,.85,.22,1) }
@keyframes pageIn{
  from{ opacity:0; transform: translateY(12px) rotateX(10deg) scale(.98); transform-origin: top center }
  to{ opacity:1; transform: none }
}
/* 3D tilt wrapper */
.tilt{ transform-style: preserve-3d; perspective: 1200px }
.tilt-item{ transform-style: preserve-3d; will-change: transform, box-shadow; transition: transform .12s ease }
.tilt .shine{ position:absolute; inset:-1px; background: radial-gradient(600px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 55%); mix-blend-mode: screen; pointer-events:none }
/* Price table */
.table{ width:100%; border-collapse: collapse; margin: 10px 0 0 }
.table th, .table td{ text-align:left; padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.08) }
.table th{ color:#c9d7ff; font-weight:700 }
.table td{ color:var(--text) }
.section{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:20px }
/* Form */
.input, .select{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color:var(--text); outline:none }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
@media (max-width: 720px){ .row{ grid-template-columns: 1fr } }
.help{ color:var(--muted); font-size:13px; margin-top:8px }