/* Princess Skater — petal-arc parallax layout */
:root{
  --bg:#0a0b1a;
  --ink:#f0f4ff;
  --muted:#a9b4da;
  --glass:rgba(255,255,255,.08);
  --accent:#ff97d1;
  --accent2:#7ef5ff;
  --gold:#ffd36e;
  --radius:22px;
  --shadow:0 18px 44px rgba(0,0,0,.46);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:
  radial-gradient(900px 600px at -10% 110%, rgba(126,245,255,.12), transparent),
  radial-gradient(900px 600px at 110% -10%, rgba(255,151,209,.12), transparent),
  linear-gradient(180deg,#0a0b1a 0%, #0e1434 60%, #0b1126 100%);
color:var(--ink);font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:var(--accent2);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:60;background:rgba(10,11,26,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--glass)}
.header .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:14px}
.brand{display:flex;gap:12px;align-items:center}
.brand-crown{width:44px;height:44px;border-radius:50%;background:conic-gradient(from 160deg,var(--accent),var(--gold),var(--accent2));display:grid;place-items:center;color:#112;font-weight:900;box-shadow:var(--shadow)}
.brand-title{font-weight:900;letter-spacing:.3px}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:11px 15px;border-radius:14px;border:1px solid var(--glass);background:rgba(255,255,255,.05);transition:.2s;display:inline-flex;gap:8px;align-items:center}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#012;border:none;font-weight:900}
.cart-dot{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:var(--gold);color:#222;font-size:12px;font-weight:900;padding:0 6px}
.hero{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);}
.hero-top{padding:26px;background:linear-gradient(160deg,#111a52,#0a1028)}
.hero-arcs{position:relative;height:120px;overflow:hidden}
.hero-arcs::before,.hero-arcs::after{content:"";position:absolute;inset:0;background:
   radial-gradient(400px 140px at 20% 100%, rgba(255,151,209,.28), transparent 65%),
   radial-gradient(400px 140px at 80% 100%, rgba(126,245,255,.28), transparent 65%);
  mix-blend:screen;opacity:.7}
.arc{position:absolute;left:0;right:0;height:120px;transform-origin:left bottom;opacity:.9}
.arc.a{bottom:0;background:radial-gradient(60px 120px at 0% 100%, transparent 78px, #0a0b1a 80px) repeat-x;background-size:120px 120px;transform:translateY(0)}
.arc.b{bottom:-8px;background:radial-gradient(70px 120px at 0% 100%, transparent 88px, #0a0b1a 90px) repeat-x;background-size:140px 120px;opacity:.6;transform:translateY(4px)}
.petal-wrap{position:absolute;inset:0;pointer-events:none}
.petal{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff 0 20%, rgba(255,255,255,.2) 30% 60%, transparent 70%);animation:float 9s linear infinite}
@keyframes float{from{transform:translateY(0) rotate(0)}to{transform:translateY(-120px) rotate(180deg)}}
.section{margin:28px 0}
.section h2{margin:0 0 12px;font-size:20px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.input,.select{padding:12px 14px;border-radius:14px;border:1px solid var(--glass);background:#101a46;color:var(--ink)}
.select{min-width:180px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{position:relative;background:linear-gradient(180deg,#121e58,#0a1334);border:1px solid var(--glass);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transform:skewY(-1.2deg)}
.card .thumb{aspect-ratio:16/10;overflow:hidden}
.card .body{padding:14px;display:flex;flex-direction:column;gap:8px;transform:skewY(1.2deg)}
.ribbon{position:absolute;top:12px;left:-8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#012;font-weight:900;padding:6px 12px;border-radius:12px;box-shadow:var(--shadow)}
.kicker{color:#d3e2ff;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.price{font-size:18px;font-weight:900}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th,.table td{padding:12px 14px;background:#101b4e;border:1px solid var(--glass)}
.table th{background:#16286a;text-align:left}
.table tr:hover td{background:#1a2e78}
.total{font-weight:900;font-size:18px}
.footer{opacity:.85;margin-top:34px;border-top:1px solid var(--glass);padding:18px 0;font-size:13px;color:#a9b4d6}
.badge{padding:8px 12px;border:1px dashed var(--glass);border-radius:999px;background:rgba(255,255,255,.06);font-weight:800;font-size:12px}
@media (max-width:860px){ .hero h1{font-size:32px} }