/* ==========================================================================
   PLASMA CITY — Design System
   Palette: notte urbana / neon viola-magenta su base blu-nero profondo
   Type: Sora (display) + Inter (corpo testo)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&display=swap');

:root{
  --bg: #06070c;
  --bg-elevated: #0b0d16;
  --surface: #12141f;
  --surface-2: #191c2b;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f2f3f7;
  --text-muted: #9296ab;
  --text-faint: #5c6079;

  --accent-1: #ff241b;
  --accent-2: #b70808;
  --accent-gradient: linear-gradient(135deg, #ff241b 0%, #b70808 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(255,36,27,.16), rgba(183,8,8,.16));

  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-glow: 0 0 0 1px rgba(255,36,27,.26), 0 8px 40px -8px rgba(183,8,8,.42);

  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Orbitron', system-ui, sans-serif;

  --header-h: 76px;
}

.development-notice{ position:fixed; z-index:950; left:18px; top:calc(var(--header-h) + 16px); width:min(330px,calc(100vw - 36px)); display:grid; gap:4px; padding:14px 16px; border:1px solid rgba(255,36,27,.34); border-radius:14px 14px 14px 4px; background:rgba(7,8,12,.9); box-shadow:0 18px 55px rgba(0,0,0,.35); backdrop-filter:blur(14px); }
.development-notice strong{ color:#fff; font:800 11px var(--font-display); letter-spacing:.08em; text-transform:uppercase; }.development-notice span{ color:var(--text-muted); font-size:10px; }.development-notice a{ margin-top:4px; color:var(--accent-1); font-size:10px; font-weight:800; }
.screen-section:not(.hero),.site-footer{ content-visibility:auto; contain-intrinsic-size:900px; }
img{ content-visibility:auto; }
@media(max-width:640px){.development-notice{left:10px;top:calc(var(--header-h) + 10px);padding:11px 13px}.development-notice span{display:none}}

/* ---------- Player Plasma Previewer ---------- */
.page-preview{ background:#05060a; overflow-x:hidden; }
.preview-main{ min-height:calc(100vh - var(--header-h)); padding:clamp(64px,8vw,110px) 0 60px; background:radial-gradient(circle at 50% 52%,rgba(183,8,8,.12),transparent 34%),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:auto,70px 70px,70px 70px; }
.preview-intro{ display:flex; justify-content:space-between; align-items:end; gap:30px; position:relative; z-index:5; }
.preview-intro h1{ margin:12px 0; font-size:clamp(48px,6.4vw,96px); line-height:.88; letter-spacing:-.055em; }
.preview-intro p{ max-width:570px; color:var(--text-muted); }
.preview-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.preview-filters button{ min-height:42px; padding:0 18px; color:var(--text-muted); border:1px solid rgba(255,255,255,.12); border-radius:999px; background:#0e0f14; font:700 10px var(--font-body); letter-spacing:.1em; text-transform:uppercase; transition:.3s ease; }
.preview-filters button:hover,.preview-filters button.active{ color:#fff; border-color:var(--accent-1); background:rgba(183,8,8,.22); }
.preview-stage{ position:relative; height:clamp(520px,60vw,720px); margin-top:10px; touch-action:pan-y; user-select:none; }
.preview-stage{ cursor:grab; }
.preview-stage.is-dragging{ cursor:grabbing; }
.preview-stage.is-dragging .preview-card{ transition:none!important; pointer-events:none; }
.preview-stage.is-dragging .preview-orbit{ cursor:grabbing; }
.preview-stage::before{ content:""; position:absolute; width:min(72vw,900px); aspect-ratio:2/1; left:50%; top:45%; transform:translate(-50%,-50%); border:1px solid rgba(255,36,27,.25); border-radius:50%; box-shadow:0 0 80px rgba(183,8,8,.08),inset 0 0 80px rgba(183,8,8,.05); }
.preview-orbit{ position:absolute; inset:0; outline:none; }
.preview-card{ position:absolute; left:50%; top:46%; width:clamp(220px,34vw,510px); aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:26px; background:#111218; box-shadow:0 30px 80px rgba(0,0,0,.5); cursor:pointer; transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .6s ease,filter .6s ease,border-color .4s ease; will-change:transform; }
.preview-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.preview-card img{ position:absolute; inset:0; display:block; background-image:var(--preview-cover); background-size:cover; background-position:center; }
.preview-card::after{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(3,3,6,.62),transparent 55%); }
.preview-card small{ position:absolute; z-index:2; left:20px; bottom:18px; color:#fff; font:800 10px var(--font-body); letter-spacing:.14em; }
.preview-card.is-active{ border-color:rgba(255,36,27,.8); }
.preview-card.is-active img{ transform:scale(1.035); }
.preview-arrow{ position:absolute; z-index:8; top:45%; width:clamp(64px,8vw,112px); height:clamp(110px,16vw,210px); transform:translateY(-50%); border:1px solid rgba(255,255,255,.2); color:#fff; background:rgba(13,14,19,.8); clip-path:polygon(0 0,100% 25%,100% 75%,0 100%); transition:.3s ease; }
.preview-arrow:hover{ color:var(--accent-1); background:#17181f; }
.preview-arrow span{ font:200 clamp(54px,6vw,86px)/1 sans-serif; }
.preview-prev{ left:0; transform:translateY(-50%) scaleX(-1); }.preview-prev span{ display:block; transform:scaleX(-1); }.preview-next{ right:0; }
.preview-detail{ position:absolute; z-index:7; left:50%; bottom:14px; width:min(620px,80%); transform:translateX(-50%); text-align:center; }
.preview-detail small{ color:var(--accent-1); font:800 9px var(--font-body); letter-spacing:.18em; }.preview-detail h2{ margin:8px 0 6px; font-size:clamp(22px,3vw,38px); }.preview-detail p{ color:var(--text-muted); font-size:13px; }
.preview-counter{ position:absolute; right:20px; bottom:18px; display:flex; align-items:center; gap:10px; color:var(--text-faint); font:700 10px var(--font-display); }.preview-counter i{ width:50px; height:1px; background:linear-gradient(90deg,var(--accent-1),rgba(255,255,255,.15)); }
.preview-help{ display:flex; justify-content:center; gap:18px; color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.preview-help span{ color:var(--accent-1); }
.preview-stage.is-empty{ height:clamp(300px,36vw,430px); cursor:default; }
.preview-stage.is-empty::before{ width:min(660px,88vw); aspect-ratio:auto; height:220px; top:50%; border-style:dashed; border-color:rgba(255,255,255,.12); border-radius:22px; box-shadow:none; background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(183,8,8,.035)); }
.preview-empty{ position:absolute; z-index:3; left:50%; top:50%; width:min(520px,82vw); transform:translate(-50%,-50%); text-align:center; }
.preview-empty span{ width:52px; height:52px; display:grid; place-items:center; margin:0 auto 18px; padding-left:3px; border:1px solid rgba(255,36,27,.5); border-radius:50%; color:var(--accent-1); background:rgba(183,8,8,.1); }
.preview-empty h2{ margin-bottom:8px; font-size:clamp(20px,3vw,30px); }.preview-empty p{ color:var(--text-muted); font-size:13px; }
.preview-stage [hidden],.preview-help[hidden]{ display:none!important; }
@media(max-width:800px){ .preview-intro{ display:block; }.preview-filters{ justify-content:flex-start; margin-top:24px; }.preview-stage{ height:600px; }.preview-stage::before{ width:105vw; }.preview-card{ width:min(70vw,430px); }.preview-arrow{ top:48%; width:64px; height:120px; }.preview-detail{ bottom:35px; }.preview-counter{ display:none; } }
@media(max-width:520px){ .preview-main{ padding-top:52px; }.preview-intro h1{ font-size:46px; }.preview-stage{ height:510px; }.preview-card{ width:75vw; border-radius:18px; }.preview-arrow{ top:43%; width:48px; height:94px; }.preview-arrow span{ font-size:50px; }.preview-detail{ width:92%; bottom:20px; }.preview-help{ display:none; } }
.preview-card video,.preview-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; object-fit:cover; }
.preview-cover-video{ pointer-events:none; }
.plasma-player{ position:absolute; inset:0; z-index:3; background:#000; }
.plasma-player-controls{ position:absolute; z-index:6; left:14px; right:14px; bottom:12px; min-height:44px; display:grid; grid-template-columns:38px auto 1fr 38px 38px; align-items:center; gap:10px; padding:6px 10px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(7,8,12,.76); backdrop-filter:blur(16px) saturate(140%); opacity:0; transform:translateY(8px); transition:.25s ease; }
.plasma-player:hover .plasma-player-controls,.plasma-player:focus-within .plasma-player-controls{ opacity:1; transform:none; }
.plasma-player-controls button{ width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:#fff; font-size:14px; }.plasma-player-controls button:hover{ background:rgba(255,36,27,.18); color:var(--accent-1); }
.plasma-player-controls span{ color:#fff; font:700 9px var(--font-display); }
.plasma-player-controls input{ width:100%; accent-color:var(--accent-1); cursor:pointer; }
.plasma-player.is-youtube iframe{ pointer-events:none; }
.preview-file-input{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; }
.preview-upload-button{ width:max-content; min-height:36px; display:inline-flex; align-items:center; margin-top:9px; padding:0 13px; border:1px solid rgba(255,36,27,.38); border-radius:9px; background:rgba(183,8,8,.1); color:#fff!important; font-size:11px!important; font-weight:800!important; cursor:pointer; transition:.25s ease; }.preview-upload-button:hover{ border-color:var(--accent-1); background:rgba(183,8,8,.2); }
.preview-card:not(.is-active){ cursor:pointer; }
.preview-card:not(.is-active)::before{ content:""; position:absolute; z-index:2; inset:0; border:1px solid rgba(255,255,255,.12); border-radius:inherit; }
.preview-play{ position:absolute; z-index:4; left:50%; top:50%; width:66px; height:66px; display:grid; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(5,6,10,.66); color:#fff; font-size:20px; backdrop-filter:blur(12px); transition:transform .3s ease,background .3s ease; }
.preview-card:hover .preview-play{ transform:translate(-50%,-50%) scale(1.08); background:rgba(183,8,8,.82); }
.preview-card.is-active{ width:clamp(320px,44vw,680px); box-shadow:0 40px 110px rgba(0,0,0,.72),0 0 0 1px rgba(255,36,27,.45); }
.preview-card.is-active small{ padding:8px 12px; border-radius:999px; background:rgba(5,6,10,.68); backdrop-filter:blur(10px); }
@media(max-width:800px){.preview-card.is-active{width:min(76vw,560px)}.preview-card:not(.is-active){width:min(58vw,340px)}}
@media(max-width:520px){.preview-card.is-active{width:78vw}.preview-card:not(.is-active){width:62vw}.preview-play{width:54px;height:54px}.plasma-player-controls{left:7px;right:7px;bottom:7px;grid-template-columns:34px 1fr 34px 34px;gap:4px}.plasma-player-controls span{display:none}}
@media(prefers-reduced-motion:reduce){ .preview-card{ transition:opacity .2s ease,transform .2s ease; } }

/* Store spacing */
.page-store .empty-state{ margin-top:72px; min-height:270px; padding:76px 24px; }

/* Page: Cosa offre Plasma */
.plasma-showcase-page{ min-height:calc(100svh - var(--header-h)); padding:clamp(90px,12vw,150px) 0 100px; }
.plasma-showcase-head{ position:relative; padding:clamp(34px,5vw,68px); border:1px solid rgba(255,255,255,.13); border-radius:28px 28px 28px 8px; background:linear-gradient(135deg,rgba(255,36,27,.105),rgba(255,255,255,.035)); backdrop-filter:blur(25px) saturate(160%); overflow:hidden; }
.plasma-showcase-head::after{ content:"PLASMA"; position:absolute; right:-.04em; bottom:-.28em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07); font-size:clamp(100px,20vw,290px); font-weight:900; pointer-events:none; }
.plasma-showcase-head h1{ position:relative; z-index:1; max-width:800px; margin:14px 0; font-size:clamp(38px,6vw,78px); line-height:.95; }
.plasma-showcase-head p{ position:relative; z-index:1; max-width:660px; color:var(--text-muted); line-height:1.7; }
.content-filters{ position:relative; z-index:1; display:flex; gap:10px; margin-top:32px; }
.content-filters button{ min-height:40px; padding:0 18px; border:1px solid rgba(255,255,255,.14); border-radius:12px 12px 12px 4px; background:rgba(255,255,255,.045); color:var(--text-muted); font:700 10px var(--font-body); text-transform:uppercase; letter-spacing:.08em; transition:.35s ease; }
.content-filters button:hover,.content-filters button.active{ color:#fff; border-color:var(--accent-1); background:rgba(255,36,27,.16); }
.plasma-content-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding-top:38px; }
.plasma-content-card{ display:grid; grid-template-columns:minmax(190px,42%) 1fr; min-height:270px; padding:0; overflow:hidden; text-align:left; color:#fff; border:1px solid rgba(255,255,255,.13); border-radius:24px 24px 24px 7px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); backdrop-filter:blur(24px) saturate(150%); filter:saturate(.68); transition:filter .7s ease,border-color .7s ease,transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease; }
.plasma-content-card:hover{ filter:saturate(1.5); border-color:rgba(255,36,27,.65); transform:translateY(-6px); box-shadow:0 28px 80px -42px rgba(255,36,27,.55); }
.plasma-content-media{ overflow:hidden; }
.plasma-content-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform 1s cubic-bezier(.22,1,.36,1); }
.plasma-content-card:hover img{ transform:scale(1.1); }
.plasma-content-copy{ display:flex; flex-direction:column; padding:28px; }
.plasma-content-copy small{ color:var(--accent-1); font-size:9px; letter-spacing:.17em; }
.plasma-content-copy strong{ margin:10px 0 12px; font-size:18px; line-height:1.25; }
.plasma-content-copy>span{ color:var(--text-muted); font-size:12px; line-height:1.65; }
.plasma-content-copy i{ margin-top:auto; padding-top:18px; color:#fff; font-size:10px; font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.plasma-content-empty{ grid-column:1/-1; min-height:300px; display:grid; place-content:center; border:1px dashed rgba(255,255,255,.16); color:var(--text-muted); border-radius:22px; }
.content-short-cell{ max-width:320px; color:var(--text-muted); font-size:11px; line-height:1.55; }

/* Extended notification used for script/map details */
.plasma-notice-card.notice-mode-detail.is-active{ width:min(760px,calc(100vw - 40px)); height:min(610px,calc(100svh - 50px)); }
.notice-mode-detail .plasma-notice-content{ justify-content:flex-start; padding:26px; overflow:auto; }
.plasma-notice-preview{ width:100%; height:230px; margin:13px 0 18px; object-fit:cover; border-radius:15px 15px 15px 5px; border:1px solid rgba(255,255,255,.12); }
.plasma-notice-title{ margin:0; font-size:clamp(22px,4vw,34px); }
.notice-mode-detail .plasma-notice-content p{ white-space:pre-line; }

@media (max-width:820px){
  .plasma-content-grid{ grid-template-columns:1fr; }
  .plasma-content-card{ grid-template-columns:1fr; }
  .plasma-content-media{ height:210px; }
  .plasma-showcase-page{ padding-top:90px; }
  .plasma-notice-card.notice-mode-detail.is-active{ width:calc(100vw - 28px); height:calc(100svh - 34px); }
  .plasma-notice-preview{ height:190px; }
}

/* Discord OAuth */
.discord-login-btn{
  min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 15px;
  border:1px solid #6975ed; border-radius:12px; background:#5865f2; color:#fff;
  font:700 10px var(--font-body); letter-spacing:.035em; white-space:nowrap;
  box-shadow:0 9px 26px -16px rgba(88,101,242,.9); transition:background-color .25s ease,transform .2s ease,box-shadow .25s ease;
}
.discord-login-btn:hover{ background:#6975ed; box-shadow:0 12px 34px -16px rgba(88,101,242,1); transform:translateY(-1px); }
.discord-login-btn:active{ transform:scale(.96); }
.discord-login-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.discord-login-large{ min-height:54px; margin-top:26px; font-size:11px; }
.discord-auth-card{ max-width:510px; padding:44px; }
.discord-auth-card h1{ margin-top:13px; font-size:clamp(30px,5vw,46px); }
.discord-auth-note{ margin-top:18px; color:var(--text-faint); font-size:9px; line-height:1.65; text-align:center; }
.discord-user-control{
  min-height:40px; display:flex; align-items:center; gap:9px; padding:4px 6px 4px 5px;
  border:1px solid rgba(88,101,242,.48); border-radius:13px; background:rgba(88,101,242,.13); color:#fff;
}
.discord-user-control>img,.discord-user-icon{ width:30px; height:30px; border-radius:9px; object-fit:cover; overflow:hidden; }
.discord-user-icon{ display:grid; place-items:center; color:#aeb5ff; }
.discord-user-icon svg{ width:20px; height:20px; }
.discord-user-control>span:not(.discord-user-icon){ max-width:125px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:700; }
.discord-user-control>a{ padding:6px 8px; border-left:1px solid rgba(255,255,255,.12); color:#b8bbca; font-size:8px; text-transform:uppercase; }
.main-nav [data-staff-link]{ color:#aeb5ff; }

@media (max-width:720px){
  .header-actions>.discord-login-btn span{ display:none; }
  .header-actions>.discord-login-btn{ width:40px; padding:0; }
  .discord-user-control>span:not(.discord-user-icon),.discord-user-control>a{ display:none; }
  .discord-user-control{ padding:4px; }
  .discord-auth-card{ padding:34px 22px; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing:-0.02em; line-height:1.1; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline: 2px solid var(--accent-1); outline-offset: 2px; }

.container{ max-width: 1240px; margin:0 auto; padding: 0 24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent-2);
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--accent-gradient); box-shadow:0 0 12px var(--accent-2); }

.gradient-text{
  background: var(--accent-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px; border-radius: 100px; border:1px solid transparent;
  font-weight:600; font-size:14.5px; white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--accent-gradient); color:#fff; box-shadow: 0 6px 24px -6px rgba(183,8,8,.68); }
.btn-primary:hover{ box-shadow: 0 10px 34px -6px rgba(255,36,27,.72); transform: translateY(-2px); }
.btn-ghost{ background: rgba(255,255,255,.04); border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: var(--border-strong); }
.btn-outline{ background:transparent; border-color: var(--border-strong); color:var(--text); }
.btn-outline:hover{ border-color: var(--accent-1); color: var(--accent-1); }
.btn-sm{ padding: 9px 16px; font-size:13px; }
.btn-danger{ background: rgba(248,113,113,.12); color: var(--danger); border-color: rgba(248,113,113,.3); }
.btn-danger:hover{ background: rgba(248,113,113,.2); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(6,7,12,.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.01em; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; background: var(--accent-gradient);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff;
  box-shadow: 0 4px 18px -4px rgba(255,36,27,.62);
}
.brand-logo{
  width:44px; height:44px; object-fit:contain; display:block;
  filter: drop-shadow(0 4px 14px rgba(255,36,27,.42));
}
.staff-sidebar .brand .brand-logo{ width:38px; height:38px; }
.brand small{ display:block; font-family: var(--font-body); font-weight:600; font-size:10px; letter-spacing:.16em; color: var(--text-muted); text-transform:uppercase; margin-top:-2px; }

.main-nav{ display:flex; align-items:center; gap: 4px; }
.main-nav a{
  padding: 9px 15px; border-radius: 100px; font-size:14px; font-weight:600; color: var(--text-muted);
  transition: color .15s, background .15s;
}
.main-nav a:hover, .main-nav a.active{ color:#fff; background: rgba(255,255,255,.06); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.lang-switch{
  display:flex; align-items:center; gap:2px; padding:3px; background: rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius: 100px;
}
.lang-switch button{
  border:0; background:transparent; color: var(--text-muted); font-size:12.5px; font-weight:700;
  padding:6px 11px; border-radius: 100px; transition: all .15s;
}
.lang-switch button.active{ background: var(--accent-gradient); color:#fff; }

.icon-btn{
  width:40px; height:40px; border-radius: 100px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text); position:relative;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover{ background: rgba(255,255,255,.09); border-color: var(--border-strong); }
.icon-btn svg{ width:18px; height:18px; }
.cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:100px;
  background: var(--accent-2); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.nav-toggle{ display:none; }

/* ---------- Hero / skyline signature ---------- */
.skyline{
  position:relative; height:64px; width:100%; overflow:hidden;
  --sky: linear-gradient(180deg, transparent, rgba(255,36,27,.06));
}
.skyline svg{ position:absolute; bottom:0; left:0; width:100%; height:100%; }

.hero{
  position:relative; padding: 96px 0 40px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height:600px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,36,27,.24), transparent 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(183,8,8,.2), transparent 70%);
  filter: blur(10px); pointer-events:none; z-index:0;
}
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center; }
.hero h1{ font-size: clamp(38px, 5vw, 62px); margin-top:16px; }
.hero p.lead{ font-size:17px; color: var(--text-muted); margin-top:18px; max-width:520px; }
.hero-cta{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:26px; }
.hero-stat span{ font-size:12.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; }

.hero-visual{
  position:relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); overflow:hidden;
}
.hero-visual .glow{ position:absolute; inset:0; background: var(--accent-gradient); opacity:.18; filter: blur(60px); }
.hero-visual .ticker{
  position:absolute; left:16px; right:16px; bottom:16px;
  background: rgba(6,7,12,.7); backdrop-filter: blur(10px); border:1px solid var(--border);
  border-radius: var(--radius-md); padding:16px;
}
.hero-visual .path-window{
  position:absolute; top:16px; left:16px; right:16px; height:44px;
  border-radius: var(--radius-sm); background: rgba(255,255,255,.04); border:1px solid var(--border);
  display:flex; align-items:center; padding:0 14px; gap:8px; font-size:12px; color:var(--text-muted);
}
.dot{ width:8px; height:8px; border-radius:50%; }
.hero-city-art{ position:absolute; inset:0; opacity:.9; }

/* ---------- Sections ---------- */
.section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); margin-top:12px; }
.section-head p{ color: var(--text-muted); margin-top:14px; font-size:16px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.feature-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; transition: border-color .2s, transform .2s;
}
.feature-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; background: var(--accent-gradient-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color: var(--accent-1);
}
.feature-icon svg{ width:22px; height:22px; }
.feature-card h3{ font-size:18px; margin-bottom:8px; }
.feature-card p{ color: var(--text-muted); font-size:14.5px; }

.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; counter-reset: step; }
.step{ position:relative; padding: 30px 24px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); }
.step .num{
  font-family: var(--font-display); font-size:34px; font-weight:800; opacity:.16; position:absolute; top:16px; right:20px;
}
.step h3{ font-size:17px; margin: 4px 0 8px; }
.step p{ color: var(--text-muted); font-size:14px; }

.cta-band{
  border-radius: var(--radius-lg); padding: 52px; text-align:center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,36,27,.18), rgba(6,7,12,0)), var(--surface);
  border:1px solid var(--border);
}
.cta-band h2{ font-size: clamp(24px,3vw,34px); }
.cta-band p{ color: var(--text-muted); margin-top:12px; max-width: 480px; margin-left:auto; margin-right:auto; }
.cta-band .hero-cta{ justify-content:center; margin-top:26px; }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--border); padding: 20px 0; }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:15.5px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:22px; color:var(--text-muted); transition: transform .2s; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ color:var(--text-muted); margin-top:12px; font-size:14.5px; padding-right: 30px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding: 56px 0 28px; margin-top:40px; background: var(--bg-elevated); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-faint); margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ color: var(--text-muted); font-size:14px; }
.footer-grid ul a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ color: var(--text-faint); font-size:12.5px; max-width:640px; }

/* ---------- Store ---------- */
.store-header{ padding: 40px 0 0; }
.back-home-btn{ margin-bottom: 20px; }
.store-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin: 28px 0 32px;
}
.category-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:9px 16px; border-radius:100px; border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--text-muted);
  background: var(--surface); transition: all .15s;
}
.pill:hover{ color:#fff; }
.pill.active{ background: var(--accent-gradient); color:#fff; border-color:transparent; }

.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap:20px; padding-bottom: 40px; }
.product-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .18s, border-color .18s;
}
.product-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); }
.product-media{ aspect-ratio: 1/1; background: var(--surface-2); position:relative; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-cat-tag{
  position:absolute; top:10px; left:10px; background: rgba(6,7,12,.7); backdrop-filter: blur(6px);
  padding:5px 10px; border-radius:100px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--accent-2);
}
.product-body{ padding: 16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-body h3{ font-size:16.5px; }
.product-body .desc{ color: var(--text-muted); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.product-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.price{ font-family: var(--font-display); font-size:20px; font-weight:700; }
.price .old{ font-family: var(--font-body); font-size:12.5px; color: var(--text-faint); text-decoration:line-through; font-weight:500; margin-right:6px; }

.empty-state{
  border:1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 64px 24px; text-align:center; color: var(--text-muted);
}
.empty-state .icon{ width:52px; height:52px; margin:0 auto 18px; opacity:.5; }

/* Modal / drawer */
.overlay{
  position:fixed; inset:0; background: rgba(3,4,8,.65); backdrop-filter: blur(4px); z-index: 200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition: opacity .2s;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background: var(--bg-elevated); border:1px solid var(--border-strong); border-radius: var(--radius-lg);
  width:100%; max-width: 640px; max-height: 88vh; overflow:auto; padding: 30px;
  transform: translateY(12px) scale(.98); transition: transform .2s;
}
.overlay.open .modal{ transform: translateY(0) scale(1); }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.modal-close{ width:34px; height:34px; border-radius:100px; background: rgba(255,255,255,.06); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.variant-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin: 16px 0; }
.variant-opt{
  border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; text-align:center; background: var(--surface);
  transition: border-color .15s;
}
.variant-opt img{ aspect-ratio:1/1; object-fit:cover; }
.variant-opt span{ display:block; padding: 6px 4px; font-size:11.5px; font-weight:600; color: var(--text-muted); }
.variant-opt.selected{ border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1); }
.variant-opt.selected span{ color:#fff; }

.qty-row{ display:flex; align-items:center; gap:12px; margin: 18px 0; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--border); border-radius:100px; overflow:hidden; }
.qty-control button{ width:36px; height:36px; background:transparent; border:0; color:#fff; font-size:16px; }
.qty-control input{ width:40px; text-align:center; background:transparent; border:0; color:#fff; font-family: var(--font-display); }

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:100%; max-width:400px; background: var(--bg-elevated);
  border-left:1px solid var(--border); z-index: 250; transform: translateX(100%); transition: transform .25s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform: translateX(0); }
.cart-drawer-head{ padding: 22px 22px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.cart-items{ flex:1; overflow:auto; padding: 16px 22px; display:flex; flex-direction:column; gap:14px; }
.cart-item{ display:flex; gap:12px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:10px; }
.cart-item img{ width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ font-size:13.5px; font-weight:700; }
.cart-item-info span{ font-size:12px; color: var(--text-muted); }
.cart-item-remove{ font-size:12px; color: var(--danger); font-weight:600; }
.cart-drawer-foot{ padding: 18px 22px 26px; border-top:1px solid var(--border); }
.cart-total-row{ display:flex; justify-content:space-between; font-size:14px; color: var(--text-muted); margin-bottom:6px; }
.cart-total-row.grand{ color:#fff; font-weight:700; font-size:16px; margin: 10px 0 18px; }

/* ---------- Forms / Auth ---------- */
.auth-shell{ min-height: calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; padding: 60px 20px; position:relative; }
.auth-shell::before{
  content:''; position:absolute; inset:0; background: radial-gradient(50% 50% at 50% 0%, rgba(255,36,27,.16), transparent 70%); pointer-events:none;
}
.auth-card{ position:relative; z-index:1; width:100%; max-width: 420px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 38px; }
.auth-card .eyebrow{ margin-bottom:10px; }
.auth-card h1{ font-size:26px; }
.auth-card p.sub{ color: var(--text-muted); font-size:14px; margin-top:8px; margin-bottom:26px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color: var(--text-muted); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm); border:1px solid var(--border);
  background: var(--bg-elevated); color:#fff; font-size:14.5px; font-family: var(--font-body); transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent-1); }
.field-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color: var(--text-muted); }
.field-check input{ width:16px; height:16px; margin-top:2px; accent-color: var(--accent-1); }
.form-foot{ margin-top:18px; text-align:center; font-size:13.5px; color: var(--text-muted); }
.form-foot a{ color: var(--accent-1); font-weight:600; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color: var(--text-faint); font-size:12px; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background: var(--border); }
.form-error{ background: rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color: var(--danger); font-size:13px; padding:10px 14px; border-radius: var(--radius-sm); margin-bottom:16px; display:none; }
.form-success{ background: rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); color: var(--success); font-size:13px; padding:10px 14px; border-radius: var(--radius-sm); margin-bottom:16px; display:none; }

/* ---------- Staff dashboard ---------- */
.staff-shell{ min-height:100vh; display:flex; }
.staff-gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; }
.staff-gate::before{ content:''; position:absolute; inset:0; background: radial-gradient(50% 50% at 50% 0%, rgba(255,36,27,.2), transparent 70%); }
.staff-badge{ width:52px; height:52px; border-radius:14px; background: var(--accent-gradient); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.staff-badge svg{ width:24px; height:24px; color:#fff; }

.staff-sidebar{
  width: 250px; flex-shrink:0; background: var(--bg-elevated); border-right:1px solid var(--border);
  padding: 22px 16px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh;
}
.staff-sidebar .brand{ padding: 6px 10px 22px; }
.staff-nav-item{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius: var(--radius-sm); color: var(--text-muted);
  font-size:14px; font-weight:600; transition: all .15s; border:0; background:transparent; width:100%; text-align:left;
}
.staff-nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.staff-nav-item:hover{ background: rgba(255,255,255,.05); color:#fff; }
.staff-nav-item.active{ background: var(--accent-gradient-soft); color:#fff; }
.staff-sidebar-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }

/* ---------- Staff: category switch pills (non-white) ---------- */
.staff-cat-switch{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.staff-cat-pill{
  padding:8px 15px; border-radius:100px; font-size:13px; font-weight:700; letter-spacing:.01em;
  background: rgba(255,36,27,.08); border:1px solid rgba(255,36,27,.25); color: var(--text-muted);
  transition: all .15s; display:flex; align-items:center; gap:7px;
}
.staff-cat-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--text-faint); transition: background .15s; }
.staff-cat-pill:hover{ color:#fff; border-color: rgba(255,36,27,.5); background: rgba(255,36,27,.14); }
.staff-cat-pill.active{
  background: rgba(255,36,27,.16); border-color: var(--accent-1); color:#ffd8d5;
  box-shadow: inset 0 0 0 1px rgba(255,36,27,.25), 0 0 0 3px rgba(255,36,27,.08);
}
.staff-cat-pill.active::before{ background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }

/* ---------- Staff: category management (create/rename/delete) ---------- */
.cat-manage-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.cat-manage-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border:1px solid var(--border);
}
.cat-manage-row .cat-dot{ width:9px; height:9px; border-radius:50%; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); flex-shrink:0; }
.cat-manage-row .cat-name{ flex:1; font-weight:600; font-size:14px; }
.cat-manage-row .cat-count{ font-size:12px; color: var(--text-muted); background: rgba(255,255,255,.05); padding:3px 9px; border-radius:100px; }
.cat-manage-form{ display:flex; gap:10px; }
.cat-manage-form input{ flex:1; }

.staff-main{ flex:1; min-width:0; padding: 32px 36px 60px; }
.staff-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 28px; flex-wrap:wrap; gap:14px; }
.staff-topbar h1{ font-size:24px; }
.staff-topbar p{ color: var(--text-muted); font-size:13.5px; margin-top:4px; }

.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:30px; }
.stat-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.stat-card span{ font-size:12.5px; color: var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-card b{ display:block; font-family: var(--font-display); font-size:28px; margin-top:8px; }
.staff-table-scroll{ overflow-x:auto; }
.analytics-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; display:block; border:1px solid rgba(255,36,27,.45); background:#111218; }
.analytics-avatar-fallback{ display:grid; place-items:center; color:#fff; font-family:var(--font-display); }
.analytics-username{ display:block; margin-top:3px; color:var(--text-muted); }
.analytics-consent{position:fixed;z-index:10020;left:20px;right:20px;bottom:20px;max-width:960px;margin:auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:22px;background:rgba(9,9,13,.97);border:1px solid rgba(255,36,27,.5);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.analytics-consent strong{font-family:var(--font-display);color:#fff}.analytics-consent p{margin:6px 0 0;color:var(--text-muted);font-size:13px;line-height:1.55;max-width:650px}.analytics-consent-actions{display:flex;gap:9px;flex-shrink:0}
@media(max-width:720px){.analytics-consent{align-items:stretch;flex-direction:column;left:10px;right:10px;bottom:10px}.analytics-consent-actions{display:grid;grid-template-columns:1fr 1fr}.analytics-consent .btn{padding-inline:10px}}
.legal-page{max-width:900px;padding-top:150px;padding-bottom:100px}.legal-page h1{font-size:clamp(38px,7vw,76px);margin:12px 0 28px}.legal-page h2{font-family:var(--font-display);font-size:20px;margin:34px 0 9px}.legal-page p{color:var(--text-muted);line-height:1.75}.legal-page a{color:var(--red)}

.panel{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-bottom:22px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.panel-head h2{ font-size:17px; }
.panel-head p{ color: var(--text-muted); font-size:13px; margin-top:4px; }

.data-table{ width:100%; border-collapse: collapse; font-size:13.5px; }
.data-table th{ text-align:left; color: var(--text-faint); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding: 10px 12px; border-bottom:1px solid var(--border); }
.data-table td{ padding: 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:0; }
.table-thumb{ width:36px; height:36px; border-radius:8px; object-fit:cover; background:var(--surface-2); }
.tag{ display:inline-block; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:700; }
.tag-active{ background: rgba(52,211,153,.12); color: var(--success); }
.tag-inactive{ background: rgba(255,255,255,.06); color: var(--text-faint); }
.tag-info{ background: rgba(255,36,27,.14); color:#ffaaa4; }
.row-actions{ display:flex; gap:8px; }
.icon-action{ width:30px; height:30px; border-radius:8px; background: rgba(255,255,255,.05); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.icon-action svg{ width:14px; height:14px; }
.icon-action:hover{ background: rgba(255,255,255,.1); }

.empty-row{ text-align:center; padding: 40px 12px; color: var(--text-muted); }

.log-line{ display:flex; gap:12px; padding: 12px; border-bottom:1px solid var(--border); font-size:13px; align-items:flex-start; }
.log-line:last-child{ border-bottom:0; }
.log-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.log-line .meta{ color: var(--text-faint); font-size:11.5px; margin-top:2px; }

.toggle{ position:relative; width:42px; height:24px; }
.toggle input{ opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; z-index:1; }
.toggle .track{ position:absolute; inset:0; background: var(--surface-2); border:1px solid var(--border); border-radius:100px; transition: background .2s; }
.toggle .thumb{ position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition: transform .2s; }
.toggle input:checked + .track{ background: var(--accent-gradient); }
.toggle input:checked ~ .thumb{ transform: translateX(18px); }

.modal-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.variant-row{ display:grid; grid-template-columns: 1fr 1fr 90px auto; gap:8px; align-items:center; margin-bottom:8px; }
.variant-row input{ padding:9px 10px; border-radius:8px; border:1px solid var(--border); background: var(--bg-elevated); color:#fff; font-size:13px; }
.add-variant-btn{ font-size:12.5px; font-weight:700; color: var(--accent-1); margin-top:4px; padding:8px 0; background:transparent; border:0; }

/* Toast */
.toast-stack{ position:fixed; bottom:24px; right:24px; z-index:400; display:flex; flex-direction:column; gap:10px; }
.toast{
  background: var(--bg-elevated); border:1px solid var(--border-strong); border-radius: var(--radius-md); padding: 14px 18px;
  min-width:260px; box-shadow: 0 10px 40px -10px rgba(0,0,0,.6); display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600;
  animation: toast-in .25s ease;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }
.toast .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:360px; margin:0 auto; }
  .feature-grid, .steps{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
  .staff-sidebar{ display:none; }
}
@media (max-width: 720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .feature-grid, .steps{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .modal-grid-2{ grid-template-columns:1fr; }
  .variant-row{ grid-template-columns: 1fr; }
}

/* ---------- Motion system / red edition ---------- */
.scroll-progress{
  position:fixed; inset:0 0 auto; height:3px; z-index:500; pointer-events:none;
  background:rgba(255,255,255,.04);
}
.scroll-progress span{
  display:block; width:100%; height:100%; background:var(--accent-gradient);
  transform:scaleX(0); transform-origin:left center; will-change:transform;
  box-shadow:0 0 14px rgba(255,36,27,.7);
}

.site-header{ animation:header-enter .65s cubic-bezier(.22,1,.36,1) both; }
.hero-grid>div:first-child{ animation:hero-copy-enter .8s .12s cubic-bezier(.22,1,.36,1) both; }
.home-hero-image{
  aspect-ratio:16/9; min-height:320px; width:115%; margin-left:-5%;
  transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--scroll-shift,0px));
  transition:transform .28s ease, border-color .3s ease, box-shadow .3s ease;
  box-shadow:0 30px 80px -36px rgba(255,36,27,.5);
}
.home-hero-image::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(255,36,27,.12));
}
.home-hero-image img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
  transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s ease;
  animation:image-enter 1s .16s cubic-bezier(.22,1,.36,1) both;
}
.home-hero-image:hover{ border-color:rgba(255,36,27,.7); box-shadow:0 36px 100px -34px rgba(255,36,27,.62); }
.home-hero-image:hover img{ transform:scale(1.075); filter:saturate(1.08) contrast(1.03); }
.image-corner{ position:absolute; z-index:2; width:38px; height:38px; pointer-events:none; }
.image-corner-a{ top:13px; left:13px; border-top:2px solid var(--accent-1); border-left:2px solid var(--accent-1); }
.image-corner-b{ right:13px; bottom:13px; border-right:2px solid var(--accent-1); border-bottom:2px solid var(--accent-1); }

.product-media img,.table-thumb{
  transition:transform .65s cubic-bezier(.22,1,.36,1),filter .35s ease;
}
.product-card:hover .product-media img{ transform:scale(1.09); filter:saturate(1.12); }
.feature-card,.step,.stat-card,.panel{ position:relative; overflow:hidden; }
.feature-card::after,.step::after,.stat-card::after,.panel::after{
  content:''; position:absolute; inset:auto 0 0; height:2px; background:var(--accent-gradient);
  transform:scaleX(0); transform-origin:left; transition:transform .42s ease;
}
.feature-card:hover::after,.step:hover::after,.stat-card:hover::after,.panel:hover::after{ transform:scaleX(1); }
.step-link{ display:block; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.step-link:hover{ transform:translateY(-4px); border-color:rgba(255,36,27,.48); box-shadow:0 18px 45px -30px rgba(255,36,27,.7); }

.reveal-on-scroll{
  opacity:0; transform:translateY(30px); filter:blur(5px);
  transition:opacity .72s ease,transform .72s cubic-bezier(.22,1,.36,1),filter .72s ease;
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-on-scroll.is-visible{ opacity:1; transform:none; filter:none; }

.btn,.icon-btn,.icon-action,.staff-cat-pill,.staff-nav-item{ position:relative; overflow:hidden; isolation:isolate; }
.is-pulsing{ animation:control-pulse .45s ease-out; }
.is-pulsing::before{
  content:''; position:absolute; z-index:-1; left:50%; top:50%; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.38); transform:translate(-50%,-50%) scale(0); animation:pulse-ripple .5s ease-out;
}
.staff-main button:not(.btn-primary),.staff-sidebar button{ color:var(--text); }
.staff-main .btn-outline,.staff-sidebar .btn-outline{ background:rgba(255,255,255,.035); border-color:var(--border-strong); color:var(--text); }
.staff-main .btn-outline:hover,.staff-sidebar .btn-outline:hover{ color:#fff; border-color:var(--accent-1); background:rgba(255,36,27,.1); }
.staff-main .icon-action{ background:#161823; color:#fff; border-color:rgba(255,255,255,.12); }
.staff-main .icon-action:hover{ background:rgba(255,36,27,.18); border-color:rgba(255,36,27,.48); }

@keyframes header-enter{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:none; } }
@keyframes hero-copy-enter{ from{ opacity:0; transform:translateX(-34px); } to{ opacity:1; transform:none; } }
@keyframes image-enter{ from{ opacity:0; transform:scale(1.1); filter:blur(10px); } to{ opacity:1; transform:scale(1); filter:none; } }
@keyframes control-pulse{ 0%{ transform:scale(1); } 45%{ transform:scale(.95); } 100%{ transform:scale(1); } }
@keyframes pulse-ripple{ 0%{ opacity:.8; transform:translate(-50%,-50%) scale(0); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(11); } }

@media (max-width:980px){
  .home-hero-image{ order:-1; width:100%; max-width:760px; min-height:0; margin:0 auto; }
}
@media (max-width:720px){
  .hero{ padding-top:58px; }
  .home-hero-image{ width:calc(100% + 16px); margin-left:-8px; border-radius:var(--radius-md); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal-on-scroll{ opacity:1; transform:none; filter:none; }
  .home-hero-image{ transform:none!important; }
}

/* ---------- Full-screen flow / Plasma minimal edition ---------- */
.brand-logo-static{ width:82px; height:42px; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(255,36,27,.34)); }
.staff-sidebar .brand .brand-logo-static{ width:72px; height:38px; }

.page-loader{
  position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#050505; opacity:1; visibility:visible; transition:opacity .45s ease,visibility .45s ease;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.page-loader img{ width:min(260px,58vw); height:auto; object-fit:contain; }
.page-loader-line{ width:min(260px,58vw); height:1px; margin-top:24px; background:rgba(255,255,255,.12); overflow:hidden; }
.page-loader-line span{ display:block; width:42%; height:100%; background:var(--accent-1); animation:loader-line 1s ease-in-out infinite; }
.page-loader p{ margin-top:15px; color:var(--text-muted); font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
body.is-loading{ overflow:hidden; }

.page-home{ scroll-snap-type:y proximity; }
.page-home .screen-section{
  min-height:calc(100svh - var(--header-h)); width:100%; scroll-snap-align:start; scroll-snap-stop:normal;
  display:flex; align-items:center; padding-top:56px!important; padding-bottom:56px!important;
}
.page-home .screen-section>.container{ width:100%; }
.page-home .hero{ height:calc(100svh - var(--header-h)); min-height:620px; }
.page-home .site-footer{ min-height:calc(100svh - var(--header-h)); }

.feature-card,.step,.product-card,.stat-card,.panel,.faq-item,.cta-band{
  background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:2px; box-shadow:none;
  filter:saturate(.72); transition:filter .42s ease,border-color .42s ease,background-color .42s ease,transform .42s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover,.step:hover,.product-card:hover,.stat-card:hover,.panel:hover,.faq-item:hover,.cta-band:hover{
  filter:saturate(1.55); border-color:rgba(255,36,27,.65); background:rgba(255,36,27,.025);
}
.feature-icon{ background:transparent; border:1px solid rgba(255,36,27,.4); border-radius:2px; }
.product-media img{ filter:saturate(.72); }
.product-card:hover .product-media img{ filter:saturate(1.35) contrast(1.04); }
.faq-item{ padding:0; margin-bottom:8px; overflow:hidden; }
.faq-item summary{ min-height:58px; padding:0 18px; transition:color .25s ease,background-color .25s ease; }
.faq-item summary:hover{ color:#fff; background:rgba(255,36,27,.055); }
.faq-item summary::after{ color:var(--accent-1); transform-origin:center; }
.faq-item[open] summary::after{ transform:rotate(45deg) scale(1.12); }
.faq-item p{ margin:0; padding:0 48px 20px 18px; transform-origin:top; }
.faq-item.is-opening p{ animation:faq-open .36s cubic-bezier(.22,1,.36,1) both; }
.faq-item.is-closing p{ animation:faq-close .25s ease both; }

@keyframes loader-line{ 0%{ transform:translateX(-120%); } 55%{ transform:translateX(110%); } 100%{ transform:translateX(260%); } }
@keyframes faq-open{ from{ opacity:0; transform:translateY(-10px) scaleY(.85); } to{ opacity:1; transform:none; } }
@keyframes faq-close{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-7px) scaleY(.9); } }

@media (max-height:760px) and (min-width:721px){
  .page-home .screen-section{ padding-top:30px!important; padding-bottom:30px!important; }
  .page-home .section-head{ margin-bottom:24px; }
  .page-home .feature-card{ padding:20px; }
  .page-home .hero-stats{ margin-top:24px; }
  .page-home .hero-cta{ margin-top:22px; }
}
@media (max-width:720px){
  .page-home{ scroll-snap-type:y proximity; }
  .page-home .screen-section{ min-height:calc(100svh - var(--header-h)); height:auto; padding-top:48px!important; padding-bottom:48px!important; }
  .page-home .hero{ height:auto; min-height:calc(100svh - var(--header-h)); }
  .brand-logo-static{ width:66px; height:38px; }
}
@media (prefers-reduced-motion:reduce){
  .page-home{ scroll-snap-type:none; }
  .page-loader-line span{ animation:none!important; width:100%; }
  .faq-item p{ animation:none!important; }
}

/* ---------- Plasma notifications ---------- */
.plasma-notice-layer{
  position:fixed; inset:0; z-index:1500; background:rgba(0,0,0,0); backdrop-filter:blur(0);
  transition:backdrop-filter .38s ease,background-color .38s ease;
}
.plasma-notice-layer.is-blurred{ background:rgba(0,0,0,.28); backdrop-filter:blur(9px); }
.plasma-notice-card{
  position:absolute; left:28px; bottom:28px; width:16px; height:16px; min-height:16px; overflow:hidden;
  border:1px solid var(--accent-1); border-radius:50%; background:var(--accent-1); color:var(--text);
  box-shadow:0 0 24px rgba(255,36,27,.56); transform:translate(0,0); opacity:.95;
  transition:left .55s cubic-bezier(.22,1,.36,1),bottom .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),border-radius .4s ease,background-color .4s ease,opacity .3s ease;
}
.plasma-notice-card.is-active{
  left:50%; bottom:50%; width:min(500px,calc(100vw - 40px)); height:190px;
  transform:translate(-50%,50%); border-radius:2px; background:rgba(7,7,9,.96); opacity:1;
  box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,36,27,.13);
}
.plasma-notice-card.is-active:has(.plasma-notice-input){ height:232px; }
.plasma-notice-card.notice-success{ border-color:#34d399; box-shadow:0 0 24px rgba(52,211,153,.4); }
.plasma-notice-card.notice-error{ border-color:#f87171; box-shadow:0 0 24px rgba(248,113,113,.4); }
.plasma-notice-card.is-leaving{
  left:28px; bottom:28px; width:16px; height:16px; transform:none; border-radius:50%; opacity:0;
}
.plasma-notice-signal{ position:absolute; inset:4px; border-radius:50%; background:#fff; animation:notice-signal 1s ease-in-out infinite; }
.plasma-notice-card.is-active .plasma-notice-signal{ opacity:0; transform:scale(4); transition:opacity .2s ease,transform .35s ease; }
.plasma-notice-content{
  width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:30px 32px;
  opacity:0; transform:translateY(12px); transition:opacity .3s .31s ease,transform .35s .31s ease;
}
.plasma-notice-card.is-active .plasma-notice-content{ opacity:1; transform:none; }
.plasma-notice-content small{ color:var(--accent-1); font-size:9px; font-weight:800; letter-spacing:.2em; }
.plasma-notice-content p{ margin:12px 0 20px; color:#f5f5f5; font-size:14px; line-height:1.65; }
.plasma-notice-input{
  width:100%; height:42px; margin:-4px 0 18px; padding:0 12px; border:1px solid rgba(255,255,255,.18); border-radius:2px;
  background:#050505; color:#fff; font:600 12px var(--font-body); outline:none;
}
.plasma-notice-input:focus{ border-color:var(--accent-1); }
.plasma-notice-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; }
.plasma-notice-button{
  min-width:92px; height:38px; padding:0 15px; border:1px solid rgba(255,255,255,.2); border-radius:2px;
  background:transparent; color:#fff; font:700 10px var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.plasma-notice-button:hover{ border-color:#fff; transform:translateY(-1px); }
.plasma-notice-button.primary{ background:var(--accent-1); border-color:var(--accent-1); }
.plasma-notice-button.primary:hover{ background:#fff; border-color:#fff; color:#050505; }
@keyframes notice-signal{ 0%,100%{ opacity:.5; transform:scale(.65); } 50%{ opacity:1; transform:scale(1); } }

/* ---------- Natural full-screen scroll rail ---------- */
.page-home .scroll-progress{ display:none; }
html{ scrollbar-width:thin; scrollbar-color:#b70808 #08090e; }
html::-webkit-scrollbar{ width:12px; }
html::-webkit-scrollbar-track{ background:#08090e; border-left:1px solid rgba(255,255,255,.06); }
html::-webkit-scrollbar-thumb{ min-height:52px; border:3px solid #08090e; border-radius:999px; background:linear-gradient(#ff241b,#8e0505); }
html::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#ff4a42,#b70808); }
.section-rail{
  position:fixed; z-index:420; left:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px;
}
.section-rail button{
  width:48px; height:18px; padding:0; display:flex; align-items:center; gap:7px; border:0; background:transparent; color:rgba(255,255,255,.35);
}
.section-rail button span{ width:15px; font:700 7px var(--font-body); letter-spacing:.08em; transition:color .28s ease; }
.section-rail button i{ display:block; width:15px; height:1px; background:currentColor; transition:width .32s cubic-bezier(.22,1,.36,1),background-color .32s ease; }
.section-rail button:hover{ color:rgba(255,255,255,.8); }
.section-rail button.active{ color:var(--accent-1); }
.section-rail button.active i{ width:28px; }

@media (max-width:720px){
  .section-rail{ left:7px; gap:9px; }
  .section-rail button{ width:35px; }
  .section-rail button span{ display:none; }
  .section-rail button i{ width:9px; }
  .section-rail button.active i{ width:20px; }
  .plasma-notice-card{ left:18px; bottom:18px; }
  .plasma-notice-card.is-active{ width:calc(100vw - 28px); height:210px; }
  .plasma-notice-card.is-leaving{ left:18px; bottom:18px; }
  .plasma-notice-content{ padding:25px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .plasma-notice-card,.plasma-notice-content,.section-rail button i{ transition-duration:.01ms!important; }
  .plasma-notice-signal{ animation:none!important; }
}

/* ---------- Full-background home presentation ---------- */
.page-home .hero{ position:relative; isolation:isolate; padding:0!important; }
.hero-showcase-background{ position:absolute; inset:0; z-index:-4; overflow:hidden; }
.hero-showcase-background img{ width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.04); transform:scale(1.01); transition:filter .8s ease,transform 1.2s cubic-bezier(.22,1,.36,1); }
.hero:hover .hero-showcase-background img{ filter:saturate(1.03) contrast(1.06); transform:scale(1.035); }
.hero-showcase-shade{ position:absolute; inset:0; z-index:-3; background:linear-gradient(90deg,rgba(2,3,7,.9) 0%,rgba(2,3,7,.55) 43%,rgba(2,3,7,.18) 69%,rgba(2,3,7,.68) 100%),linear-gradient(0deg,rgba(2,3,7,.72),transparent 48%); }
.hero-showcase{ position:relative; z-index:2; min-height:100%; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.7fr); align-items:center; gap:8vw; }
.hero-showcase-brand{ max-width:650px; animation:hero-copy-enter .8s .1s cubic-bezier(.22,1,.36,1) both; }
.hero-showcase-logo{ width:min(420px,58vw); max-height:195px; margin:0 0 14px -24px; object-fit:contain; object-position:left center; filter:drop-shadow(0 18px 32px rgba(0,0,0,.48)); }
.hero-showcase-brand h1{ margin:15px 0 0; font-size:clamp(52px,6vw,94px); line-height:.9; letter-spacing:-.055em; }
.hero-showcase-brand h1 span{ color:var(--accent-1); }
.hero-showcase-brand .lead{ max-width:560px; font-size:14px; color:rgba(255,255,255,.72); }
.hero-showcase-brand .hero-stats{ margin-top:30px; }
.hero-showcase-menu{
  justify-self:end; width:min(410px,100%); padding:24px 18px;
  background:rgba(11,12,17,.38); border:1px solid rgba(255,255,255,.13); border-radius:24px 24px 24px 7px;
  backdrop-filter:blur(22px) saturate(165%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 28px 80px rgba(0,0,0,.32);
}
.hero-showcase-menu small{ display:block; padding:0 16px 13px; color:rgba(255,255,255,.42); font-size:8px; font-weight:800; letter-spacing:.2em; }
.hero-showcase-menu a{ position:relative; min-height:50px; display:grid; grid-template-columns:28px 1fr 28px; align-items:center; gap:10px; padding:0 16px; border-radius:13px 13px 13px 4px; color:rgba(255,255,255,.7); font-size:12px; font-weight:700; letter-spacing:.035em; text-transform:uppercase; transition:color .25s ease,background-color .3s ease,transform .3s ease; }
.hero-showcase-menu a span{ color:rgba(255,255,255,.3); font-size:8px; }
.hero-showcase-menu a i{ justify-self:end; width:14px; height:1px; background:currentColor; transition:width .3s ease; }
.hero-showcase-menu a:hover{ color:#fff; background:rgba(255,255,255,.075); transform:translateX(-4px); }
.hero-showcase-menu a:hover i{ width:24px; }
.hero-showcase-menu a.active{ color:#fff; background:linear-gradient(90deg,rgba(255,36,27,.86),rgba(183,8,8,.58)); box-shadow:0 10px 28px -16px rgba(255,36,27,.8),inset 0 1px rgba(255,255,255,.22); }

/* ---------- Apple-inspired glass surfaces ---------- */
.site-header{ background:rgba(7,8,12,.56); backdrop-filter:blur(24px) saturate(175%); box-shadow:inset 0 -1px rgba(255,255,255,.045); }
.feature-card,.step,.product-card,.stat-card,.panel,.faq-item,.cta-band,.auth-card,.modal,.cart-item,.cat-manage-row{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.14); border-radius:18px 18px 18px 6px;
  backdrop-filter:blur(22px) saturate(155%); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 55px -38px rgba(0,0,0,.82);
}
.feature-card:hover,.step:hover,.product-card:hover,.stat-card:hover,.panel:hover,.faq-item:hover,.cta-band:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,36,27,.04)); border-color:rgba(255,36,27,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 65px -38px rgba(255,36,27,.36);
}
.feature-icon,.icon-action,.field input,.field select,.field textarea,.plasma-notice-input{ border-radius:10px 10px 10px 3px; }
.plasma-notice-card.is-active{ border-radius:22px 22px 22px 7px; background:rgba(9,10,14,.72); backdrop-filter:blur(30px) saturate(170%); box-shadow:inset 0 1px rgba(255,255,255,.13),0 30px 100px rgba(0,0,0,.55); }

/* Smaller Store back control */
.back-home-btn{ min-height:30px; margin-bottom:16px; padding:6px 10px; gap:6px; border-radius:9px 9px 9px 3px; font-size:9px; letter-spacing:.05em; }
.back-home-btn svg{ width:12px; height:12px; }

/* Larger section progress rail */
.section-rail{ left:28px; gap:15px; padding:17px 11px; background:rgba(8,9,13,.38); border:1px solid rgba(255,255,255,.1); border-radius:18px 18px 18px 6px; backdrop-filter:blur(18px) saturate(155%); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.section-rail button{ width:84px; height:22px; gap:10px; }
.section-rail button span{ width:20px; font-size:8px; }
.section-rail button i{ width:24px; height:2px; border-radius:2px; }
.section-rail button.active i{ width:47px; box-shadow:0 0 11px rgba(255,36,27,.55); }
.section-rail button.active span{ color:#fff; }

/* Notification starts as a line, without circular pulse */
.plasma-notice-card,.plasma-notice-card.is-leaving{ width:5px; height:24px; min-height:24px; border-radius:2px; }
.plasma-notice-signal{ display:none; }

@media (max-width:980px){
  .hero-showcase{ grid-template-columns:1fr minmax(280px,.65fr); gap:35px; }
  .hero-showcase-logo{ width:min(330px,46vw); }
  .hero-showcase-brand h1{ font-size:clamp(46px,7vw,70px); }
}
@media (max-width:720px){
  .hero-showcase{ grid-template-columns:1fr; align-content:center; gap:25px; padding-top:35px; padding-bottom:35px; }
  .hero-showcase-brand{ display:none; }
  .hero-showcase-menu{ justify-self:center; width:min(390px,calc(100vw - 48px)); }
  .hero-showcase-shade{ background:rgba(2,3,7,.48); }
  .section-rail{ left:6px; padding:12px 7px; }
  .section-rail button{ width:28px; }
  .section-rail button i{ width:12px; }
  .section-rail button.active i{ width:24px; }
}

/* Detailed Staff log tags */
.log-line .meta{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.log-tag{ display:inline-flex; align-items:center; min-height:19px; padding:2px 7px; border:1px solid currentColor; border-radius:7px 7px 7px 2px; font-size:8px; font-weight:800; letter-spacing:.08em; line-height:1; }
.log-tag-order{ color:#ff6b62; background:rgba(255,36,27,.08); }
.log-tag-auth{ color:#34d399; background:rgba(52,211,153,.08); }
.log-tag-cart{ color:#ff847d; background:rgba(183,8,8,.1); }
.log-tag-product{ color:#fb7185; background:rgba(251,113,133,.08); }
.log-tag-category{ color:#c084fc; background:rgba(192,132,252,.08); }
.log-tag-content{ color:#ff6b62; background:rgba(255,77,69,.09); }
.log-tag-security{ color:#f59e0b; background:rgba(245,158,11,.08); }
.log-tag-webhook{ color:#38bdf8; background:rgba(56,189,248,.08); }
.log-tag-error{ color:#ef4444; background:rgba(239,68,68,.1); }
.log-tag-contact{ color:#60a5fa; background:rgba(96,165,250,.08); }
.log-tag-system,.log-tag-staff{ color:#b3b6c5; background:rgba(179,182,197,.07); }

/* ---------- Isolated landing + site-wide glass ---------- */
body{ background:radial-gradient(circle at 18% 8%,rgba(255,36,27,.075),transparent 28%),radial-gradient(circle at 90% 60%,rgba(255,255,255,.035),transparent 34%),#06070c; }
body:not(.page-store) [onclick="openCartDrawer()"]{ display:none!important; }
.page-home .site-header{ display:none; }
.page-home .screen-section,.page-home .site-footer{ min-height:100svh; }
.page-home .hero{ height:100svh; min-height:620px; }
.page-home:not(.content-home){ height:100svh; overflow:hidden; }
.page-home:not(.content-home) .screen-section:not(.hero),.page-home:not(.content-home) .site-footer,.page-home:not(.content-home) .section-rail{ display:none!important; }
.page-home.content-home .hero{ display:none; }
.page-home.content-home .site-header{ display:flex; }
.page-home.content-home .screen-section{ position:relative; isolation:isolate; overflow:hidden; min-height:100svh; padding:clamp(82px,10vh,130px) 0!important; }
.page-home.content-home .screen-section::before{ content:attr(data-section); position:absolute; z-index:-2; right:3vw; bottom:-.18em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.055); font-size:clamp(220px,34vw,620px); font-weight:900; line-height:.8; letter-spacing:-.1em; }
.page-home.content-home .screen-section::after{ content:""; position:absolute; z-index:-3; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 86% 50%,rgba(255,36,27,.12),transparent 30%); background-size:70px 70px,70px 70px,auto; }
.hero-showcase-single{ display:flex; justify-content:flex-end; align-items:center; }
.hero-showcase-single .hero-showcase-menu{ margin-right:clamp(10px,6vw,90px); }
.hero-menu-logo{ display:block; width:min(330px,100%); max-height:155px; margin:0 auto 14px; object-fit:contain; filter:drop-shadow(0 16px 28px rgba(0,0,0,.42)); }

.store-header>.container,.site-footer,.staff-sidebar,.cart-drawer,.lang-switch,.main-nav.mobile-open{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(26px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 70px -52px rgba(0,0,0,.9);
}
.store-header>.container{ padding:30px 34px; border-radius:24px 24px 24px 8px; }
.site-footer{ border-radius:30px 30px 0 0; }
.staff-sidebar{ border-width:0 1px 0 0; border-radius:0 24px 24px 0; }
.cart-drawer{ background:rgba(8,9,13,.72); border-radius:26px 0 0 26px; }
.field input,.field select,.field textarea,.qty-control,.variant-opt,.category-pills .pill{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.13); backdrop-filter:blur(14px) saturate(150%);
}
.icon-btn,.btn-ghost,.btn-outline,.staff-cat-pill{ background:rgba(255,255,255,.055); backdrop-filter:blur(14px) saturate(150%); }
.back-home-btn{ display:flex; width:max-content; margin:0 0 34px; }

/* Slower, shallow FAQ movement */
.faq-item summary{ transition:color .45s ease,background-color .45s ease,padding-left .45s cubic-bezier(.22,1,.36,1); }
.faq-item summary:hover{ padding-left:22px; }
.faq-item summary::after{ transition:transform .55s cubic-bezier(.22,1,.36,1),color .4s ease; }
.faq-item.is-opening p{ animation:faq-open-shallow .72s cubic-bezier(.22,1,.36,1) both; }
.faq-item.is-closing p{ animation:faq-close-shallow .5s ease both; }
.faq-item{ will-change:height; transition:border-color .65s ease,background .65s ease,filter .65s ease,box-shadow .65s ease; }
@keyframes faq-open-shallow{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@keyframes faq-close-shallow{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-3px); } }

@media (max-width:720px){
  .site-header{ height:64px; }
  .site-header .container{ padding:0 14px; gap:10px; }
  .site-header .brand>span{ display:none; }
  .header-actions{ gap:6px; }
  .lang-switch button{ padding:5px 8px; }
  .hero-showcase-single{ justify-content:center; padding:20px; }
  .hero-showcase-single .hero-showcase-menu{ margin:0; width:min(400px,calc(100vw - 34px)); padding:20px 14px; border-radius:22px 22px 22px 7px; }
  .hero-menu-logo{ width:min(290px,78vw); max-height:130px; margin-bottom:8px; }
  .hero-showcase-menu a{ min-height:54px; font-size:11px; }
  .store-header{ padding:22px 12px 0; }
  .store-header>.container{ padding:22px 18px; border-radius:20px 20px 20px 7px; }
  .back-home-btn{ margin-bottom:28px; }
  .product-grid{ grid-template-columns:1fr; gap:14px; }
  .product-card{ border-radius:20px 20px 20px 7px; }
  .overlay{ align-items:flex-end; padding:0; }
  .modal{ width:100%; max-width:none!important; max-height:92svh; overflow:auto; margin:0; border-radius:26px 26px 0 0; padding:22px 18px; }
  .cart-drawer{ width:100%; max-width:none; border-radius:26px 26px 0 0; top:auto; bottom:0; height:min(88svh,760px); }
  .section{ padding-left:10px!important; padding-right:10px!important; }
  .feature-card,.step,.faq-item,.cta-band{ border-radius:18px 18px 18px 6px; }
  .cta-band{ padding:34px 20px; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* ========================================================================== 
   PLASMA EDITORIAL — direzione gaming pulita, ispirata ai riferimenti Emerals
   ========================================================================== */
body{
  background:#07080d;
  background-image:radial-gradient(ellipse at 0 38%,rgba(122,0,0,.10),transparent 34%),radial-gradient(ellipse at 100% 72%,rgba(90,0,0,.07),transparent 30%);
}
.accent-word{ color:var(--accent-1); }
.site-header{ background:rgba(7,8,12,.96); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:none; box-shadow:none; }
.hero-showcase-menu{ background:rgba(9,9,13,.92); border-color:rgba(255,255,255,.12); border-radius:18px; backdrop-filter:blur(10px); box-shadow:0 24px 80px rgba(0,0,0,.42); }
.section-rail{ background:#0b0c12; border-color:rgba(255,255,255,.1); border-radius:14px; backdrop-filter:none; box-shadow:none; }

/* Più aria tra tutti i controlli affiancati */
.hero-cta,.header-actions,.content-filters,.category-pills,.staff-cat-switch,.plasma-notice-actions{ gap:14px; }
.hero-showcase-menu a + a{ margin-top:12px; }
.btn:active,.icon-btn:active,.content-filters button:active,.hero-showcase-menu a:active{ transform:scale(.96); }

/* Home: niente griglia, numeri giganti o vetro decorativo */
.page-home.content-home .screen-section::before{ display:none; }
.page-home.content-home .screen-section::after{
  inset:0; background:linear-gradient(90deg,rgba(255,36,27,.045),transparent 32%,transparent 72%,rgba(255,36,27,.025));
}
.page-home.content-home .screen-section{ padding:clamp(108px,13vh,160px) 0!important; }
.page-home.content-home .site-footer{ min-height:auto; padding-top:72px; }
.page-home.content-home .section-head{ max-width:900px; margin-bottom:clamp(42px,6vh,72px); }
.page-home.content-home .section-head h2{ max-width:920px; margin-top:14px; font-size:clamp(39px,5vw,72px); line-height:.98; letter-spacing:-.055em; }
.page-home.content-home .section-head p{ max-width:650px; margin-top:20px; font-size:14px; line-height:1.75; }

#features{ background:linear-gradient(110deg,rgba(80,0,0,.14),transparent 50%),#08090e; }
#features .feature-grid{ gap:20px; }
#features .feature-card{
  min-height:245px; padding:32px 30px; background:#111117; border:1px solid rgba(255,255,255,.10); border-radius:18px;
  backdrop-filter:none; box-shadow:none; filter:none;
}
#features .feature-card:hover{ background:#151319; border-color:rgba(255,36,27,.38); transform:translateY(-5px); }
#features .feature-icon{ width:44px; height:44px; margin-bottom:32px; background:#121116; border-color:rgba(255,36,27,.6); border-radius:10px; }
#features .feature-card h3{ font-size:17px; }
#features .feature-card p{ margin-top:12px; font-size:12px; line-height:1.75; }

#steps{ background:#07080d; }
#steps .steps{ gap:0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
#steps .step{
  min-height:280px; padding:42px 36px; background:transparent; border:0; border-right:1px solid rgba(255,255,255,.1); border-radius:0; backdrop-filter:none; box-shadow:none; filter:none;
}
#steps .step:last-child{ border-right:0; }
#steps .step:hover{ background:rgba(255,36,27,.045); transform:none; }
#steps .step .num{ display:block; margin-bottom:58px; color:transparent; -webkit-text-stroke:1px var(--accent-1); font-size:clamp(58px,6vw,90px); line-height:.75; }
#steps .step h3{ font-size:18px; }
#steps .step p{ margin-top:12px; font-size:12px; line-height:1.7; }

#join{ background:#07080d; }
#join .cta-band{
  position:relative; isolation:isolate; min-height:520px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:clamp(42px,7vw,90px); overflow:hidden; text-align:left; border:1px solid rgba(255,255,255,.11); border-radius:24px;
  background:linear-gradient(90deg,rgba(4,5,9,.95) 0%,rgba(4,5,9,.65) 55%,rgba(4,5,9,.34) 100%),url('../img/bg_home.png') center/cover no-repeat;
  backdrop-filter:none; box-shadow:none; filter:none;
}
#join .cta-band::after{ content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(6,7,12,.7),transparent 65%),linear-gradient(90deg,rgba(120,0,0,.16),transparent 55%); }
#join .cta-band h2{ max-width:740px; font-size:clamp(43px,6vw,78px); line-height:.95; }
#join .cta-band p{ max-width:580px; margin:24px 0 0; text-align:left; line-height:1.7; }
#join .hero-cta{ margin-top:34px; }

#faq{ background:linear-gradient(105deg,rgba(90,0,0,.08),transparent 38%),#08090e; }
#faq .container{ max-width:1240px!important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; align-content:center; }
#faq .section-head{ grid-column:1/-1; text-align:left; align-items:flex-start; }
#faq .faq-item{
  margin:0 0 16px; background:#101118; border:1px solid rgba(255,255,255,.055); border-radius:15px; backdrop-filter:none; box-shadow:none; filter:none;
}
#faq .faq-item:hover{ background:#12131a; border-color:rgba(255,36,27,.28); }
#faq .faq-item summary{ min-height:76px; padding:0 24px; font-size:12px; }
#faq .faq-item summary:hover{ padding-left:28px; }
#faq .faq-item p{ padding:0 44px 24px 24px; font-size:11px; }

/* Pagina Script e Mappe: superfici scure e piatte */
.page-plasma{ background:#07080d; }
.plasma-showcase-page{ padding-top:clamp(110px,12vw,160px); }
.plasma-showcase-head{
  padding:0 24px 48px; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.11); border-radius:0; backdrop-filter:none;
}
.plasma-showcase-head::after{ display:none; }
.plasma-showcase-head h1{ max-width:880px; font-size:clamp(46px,7vw,92px); letter-spacing:-.06em; }
.plasma-showcase-head p{ margin-top:20px; }
.content-filters{ margin-top:38px; gap:14px; }
.content-filters button{ min-width:96px; min-height:44px; border-radius:12px; background:#111117; }
.plasma-content-grid{ gap:24px; padding-top:56px; }
.plasma-content-card{
  min-height:300px; background:#101116; border-color:rgba(255,255,255,.12); border-radius:20px; backdrop-filter:none; box-shadow:none; filter:saturate(.72);
}
.plasma-content-card:hover{ background:#121319; border-color:rgba(255,36,27,.42); filter:saturate(1.3); transform:translateY(-4px); box-shadow:none; }
.plasma-content-copy{ padding:32px 30px; }
.plasma-content-copy strong{ font-size:19px; }

.site-footer{ background:#07080d; border-radius:0; backdrop-filter:none; box-shadow:none; }

@media (max-width:820px){
  .page-home.content-home .screen-section{ min-height:auto; padding:96px 0!important; }
  .page-home.content-home .section-head h2{ font-size:clamp(36px,11vw,54px); }
  #features .feature-grid{ grid-template-columns:1fr; }
  #steps .steps{ display:grid; grid-template-columns:1fr; }
  #steps .step{ min-height:230px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  #steps .step:last-child{ border-bottom:0; }
  #steps .step .num{ margin-bottom:38px; }
  #join .cta-band{ min-height:560px; background-position:58% center; }
  #faq .container{ grid-template-columns:1fr; }
  #faq .section-head{ grid-column:1; }
  .content-filters{ flex-wrap:wrap; row-gap:12px; }
}