:root{
  --brand: #1D4ED8;
  --brand-2: #DC2626;
  --bg: #0B1530;
  --bg-2: #0F1A3D;
  --surface: #131F47;
  --surface-2: #1A2858;
  --border: #233268;
  --text: #EAF0FF;
  --muted: #9AAAD0;
  --success: #10B981;
  --warn: #F59E0B;
  --danger: #EF4444;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px -10px rgba(29,78,216,.35);
  --grad: linear-gradient(135deg, #1D4ED8 0%, #4F46E5 50%, #DC2626 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(220,38,38,.18), transparent 60%),
              radial-gradient(1000px 500px at -10% 10%, rgba(29,78,216,.25), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a{color:#9DB7FF;text-decoration:none}
a:hover{color:#fff}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid transparent;
  font-weight:600;font-size:14px;cursor:pointer;transition:.15s;
  background:var(--surface);color:var(--text);
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:#1846C2;box-shadow:var(--shadow)}
.btn-accent{background:var(--brand-2);color:#fff}
.btn-accent:hover{background:#B91C1C}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-block{width:100%}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:14px}
.input,select,textarea{
  width:100%;padding:11px 14px;background:#0E1838;color:var(--text);
  border:1px solid var(--border);border-radius:10px;font-size:14px;
  font-family:inherit;
}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.25)}
label{display:block;margin:0 0 6px;font-size:13px;color:var(--muted)}
.field{margin-bottom:14px}
.row{display:grid;gap:14px}
@media(min-width:700px){ .row.row-2{grid-template-columns:1fr 1fr} .row.row-3{grid-template-columns:repeat(3,1fr)} }
.card{
  background: linear-gradient(180deg, var(--surface) 0%, #101B43 100%);
  border:1px solid var(--border);border-radius:var(--radius);padding:22px;
}
.muted{color:var(--muted)}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(29,78,216,.18);color:#BCD0FF;border:1px solid rgba(29,78,216,.4);
}
.tag.green{background:rgba(16,185,129,.15);color:#9EE9CC;border-color:rgba(16,185,129,.35)}
.tag.amber{background:rgba(245,158,11,.15);color:#FFD79A;border-color:rgba(245,158,11,.35)}
.tag.red{background:rgba(220,38,38,.18);color:#FFB1B1;border-color:rgba(220,38,38,.4)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(11,21,48,.78);border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;letter-spacing:.2px}
.brand .mark{
  width:34px;height:34px;border-radius:10px;
  background:var(--grad);display:grid;place-items:center;color:#fff;font-size:18px;
}
.brand .name{font-size:17px}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{padding:8px 12px;border-radius:8px;color:#CFD8F4;font-weight:500;font-size:14px}
.nav-links a:hover{background:var(--surface-2);color:#fff}
.nav-cta{display:flex;align-items:center;gap:8px}

/* Hero */
.hero{padding:64px 0 32px;text-align:center;position:relative}
.hero h1{
  font-size:clamp(34px,5vw,56px);line-height:1.05;margin:14px 0 14px;font-weight:800;
  background: linear-gradient(180deg, #fff, #BFD0FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.sub{font-size:clamp(15px,1.6vw,18px);color:var(--muted);max-width:680px;margin:0 auto 26px}
.hero .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px;color:#A8B7E1;font-size:13px}
.trust span{display:inline-flex;align-items:center;gap:6px}

/* Sections */
section{padding:48px 0}
.section-h{text-align:center;margin-bottom:28px}
.section-h h2{font-size:clamp(24px,3vw,34px);margin:0 0 8px}
.section-h p{color:var(--muted);margin:0}

/* Product grid */
.products{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.product{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:18px;border-radius:var(--radius);
  background:linear-gradient(180deg,#16224F,#10193D);
  border:1px solid var(--border);transition:.2s;
}
.product:hover{transform:translateY(-3px);border-color:#3252C9;box-shadow:var(--shadow)}
.product .emoji{font-size:36px}
.product h3{margin:0;font-size:16px}
.product .desc{color:var(--muted);font-size:13px;min-height:36px}
.product .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.price{font-weight:800;font-size:18px;color:#fff}
.price small{color:var(--muted);font-weight:500}

/* Steps + features */
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{padding:20px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.step .num{
  width:34px;height:34px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;font-weight:800;margin-bottom:10px;color:#fff;
}
.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feature{padding:20px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.feature .icn{width:42px;height:42px;border-radius:12px;background:rgba(29,78,216,.18);
  display:grid;place-items:center;margin-bottom:10px;color:#BCD0FF}

/* FAQ */
.faq details{
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:14px 18px;margin-bottom:10px;
}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;color:var(--muted)}
.faq details[open] summary::after{content:'–'}

/* Footer */
.site-footer{margin-top:60px;padding:28px 0;border-top:1px solid var(--border);color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* Stepper / checkout */
.stepper{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.stepper .s{flex:1;min-width:120px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:13px}
.stepper .s.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.tab{padding:10px 14px;border-radius:8px 8px 0 0;cursor:pointer;color:var(--muted);font-weight:600;font-size:13px}
.tab.on{background:var(--surface);color:#fff;border:1px solid var(--border);border-bottom-color:transparent}
.codebox{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#0A1230;
  border:1px solid var(--border);border-radius:10px;padding:14px;word-break:break-all;
  display:flex;justify-content:space-between;gap:8px;align-items:center;
}
.copy-btn{padding:6px 10px;font-size:12px;border-radius:8px;background:var(--brand);color:#fff;cursor:pointer;border:none}

/* Wishlist heart */
.heart{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);border:1px solid var(--border);
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#fff}
.heart.on{background:var(--brand-2);border-color:var(--brand-2)}

/* Alerts */
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.alert.info{background:rgba(29,78,216,.18);color:#CFE0FF;border:1px solid rgba(29,78,216,.4)}
.alert.success{background:rgba(16,185,129,.15);color:#B7F0D9;border:1px solid rgba(16,185,129,.35)}
.alert.error{background:rgba(220,38,38,.15);color:#FFC0C0;border:1px solid rgba(220,38,38,.4)}
.alert.warn{background:rgba(245,158,11,.15);color:#FFE4B5;border:1px solid rgba(245,158,11,.35)}

/* Tables */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
table.t th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:rgba(29,78,216,.06)}
table.t tr:hover td{background:rgba(29,78,216,.05)}

/* Auth pages */
.auth-wrap{max-width:440px;margin:60px auto}
.auth-wrap .card{padding:28px}
.auth-wrap h1{margin:0 0 6px;font-size:24px}
.auth-wrap .muted{margin:0 0 22px}

/* Mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);color:#fff;border-radius:10px;width:38px;height:38px;cursor:pointer}
@media(max-width:760px){
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;margin-top:10px}
  .nav-links.open{display:flex}
  .nav-cta{order:-1}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{flex-wrap:wrap}
}

/* ===== v2.1 UI polish ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 0 0 rgba(29,78,216,.45) } 50% { box-shadow:0 0 0 14px rgba(29,78,216,0) } }
@keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }

.hero h1, .hero p.sub, .hero .cta-row { animation: fadeUp .55s ease both }
.hero p.sub { animation-delay:.08s } .hero .cta-row { animation-delay:.16s }

.btn { transition: transform .15s ease, background .2s ease, box-shadow .2s ease }
.btn:hover { transform: translateY(-1px) }
.btn-primary { background: linear-gradient(135deg, var(--brand), #4F46E5); border:none }
.btn-primary:hover { background: linear-gradient(135deg, #1846C2, #4338CA); box-shadow: 0 14px 36px -12px rgba(79,70,229,.65) }
.btn-accent { background: linear-gradient(135deg, var(--brand-2), #F43F5E); border:none }
.btn-accent:hover { background: linear-gradient(135deg, #B91C1C, #E11D48); box-shadow: 0 14px 36px -12px rgba(220,38,38,.6) }
.btn-lg.btn-primary { animation: pulseGlow 2.4s ease-in-out infinite }

.product { animation: fadeUp .45s ease both }
.product::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:linear-gradient(135deg, rgba(29,78,216,.0), rgba(220,38,38,.0));
  transition:.25s;
}
.product:hover::before { background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(220,38,38,.08)) }
.product .price { font-size:20px; font-weight:800; background:linear-gradient(90deg,#fff,#BFD0FF); -webkit-background-clip:text; background-clip:text; color:transparent }

.feature { transition:.2s; animation: fadeUp .5s ease both }
.feature:hover { transform: translateY(-2px); border-color:#3252C9; box-shadow: var(--shadow) }

.tag { backdrop-filter: blur(6px) }

/* Skeleton shimmer for loading placeholders */
.skeleton {
  background: linear-gradient(90deg, #16224F 0%, #22307A 50%, #16224F 100%);
  background-size:200% 100%; animation: shimmer 1.4s linear infinite;
  border-radius:10px; height:14px;
}

/* Inputs glow on focus */
.input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(29,78,216,.22), inset 0 0 0 1px var(--brand) }

/* Smooth scrolling */
html { scroll-behavior:smooth }

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#22307A;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#2D3F9C}
::-webkit-scrollbar-track{background:transparent}

/* Brand mark subtle pulse */
.brand .mark { box-shadow: 0 6px 18px -6px rgba(220,38,38,.5) }

/* Code box copy feedback */
.copy-btn:active { transform: scale(.96) }
.copy-btn.ok { background: var(--success) }

/* Stepper active glow */
.stepper .s.on { box-shadow: 0 8px 22px -10px rgba(29,78,216,.7) }

/* Selection color */
::selection { background: rgba(220,38,38,.35); color:#fff }