/* =========================================================
   ONYX SCRIPTS — thème noir & blanc / design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg: #131315;
  --bg-alt: #19191b;
  --surface: #202022;
  --surface-2: #29292b;
  --border: #38383a;
  --border-hover: #4d4d50;
  --text: #f8f8f9;
  --text-dim: #b7b7bb;
  --text-faint: #8a8a8e;
  --white: #ffffff;
  --black: #000000;
  --danger: #e5484d;
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --accent-glow: rgba(34,197,94,.45);

  --radius-lg: 24px;
  --radius: 17px;
  --radius-sm: 11px;
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --shadow-lg: 0 24px 70px -24px rgba(0,0,0,.85);
  --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6);
  --ease: cubic-bezier(.16,1,.3,1);
  --header-h: 72px;

  /* glass */
  --glass-bg: rgba(255,255,255,.05);
  --glass-bg-2: rgba(255,255,255,.08);
  --glass-bg-hover: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.14);
  --glass-border-soft: rgba(255,255,255,.09);
  --glass-blur: blur(26px) saturate(160%);
  --glass-blur-sm: blur(14px) saturate(150%);
  --glass-blur-strong: blur(34px) saturate(170%) contrast(1.02) brightness(1.03);
  --glass-shadow: 0 24px 60px -22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.025);
  --glass-shadow-hover: 0 30px 70px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.03);
  --glare: radial-gradient(circle 240px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.11), transparent 65%);
}

/* reset */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle 640px at 10% 8%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(circle 620px at 92% 6%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(circle 760px at 50% 45%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(circle 700px at 12% 95%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(circle 680px at 95% 92%, rgba(34,197,94,.06), transparent 70%),
    radial-gradient(circle 520px at 60% 30%, rgba(255,255,255,.025), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: auto, auto, auto, auto, auto, auto, 32px 32px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
}
.aurora{
  position:fixed; inset:-10%; z-index:-2; pointer-events:none; overflow:hidden;
}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(110px); opacity:.5;
  will-change:transform;
}
.aurora span:nth-child(1){
  width:52vw; height:52vw; top:-14%; left:-10%;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 68%);
  animation:aurora-drift-1 34s ease-in-out infinite;
}
.aurora span:nth-child(2){
  width:46vw; height:46vw; bottom:-18%; right:-8%;
  background:radial-gradient(circle,rgba(34,197,94,.2),transparent 68%);
  animation:aurora-drift-2 40s ease-in-out infinite;
}
.aurora span:nth-child(3){
  width:40vw; height:40vw; top:36%; left:56%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  animation:aurora-drift-3 30s ease-in-out infinite;
}
.aurora span:nth-child(4){
  width:34vw; height:34vw; top:6%; right:12%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);
  animation:aurora-drift-4 26s ease-in-out infinite;
}
.aurora span:nth-child(5){
  width:30vw; height:30vw; bottom:4%; left:8%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%);
  animation:aurora-drift-5 36s ease-in-out infinite;
}
@keyframes aurora-drift-1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vw,8vh) scale(1.12); }
}
@keyframes aurora-drift-2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-7vw,-6vh) scale(1.15); }
}
@keyframes aurora-drift-3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vw,6vh) scale(1.08); }
}
@keyframes aurora-drift-4{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-4vw,5vh) scale(1.1); }
}
@keyframes aurora-drift-5{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(5vw,-4vh) scale(1.14); }
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing:-0.02em; }
p{ margin:0; }
::selection{ background:var(--white); color:var(--black); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--border-hover); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:96px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:40px; flex-wrap:wrap;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--text-faint);
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background: var(--accent); box-shadow:0 0 12px 1px var(--accent-glow);
}
.eyebrow-live::before{ animation:pulse-dot 2s ease-in-out infinite; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.section-head .desc{ color:var(--text-dim); max-width:480px; font-size:15px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; transition: all .25s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--white); color:var(--black); }
.btn-primary:hover{ background:#e2e2e4; transform:translateY(-2px); box-shadow:0 10px 30px -8px var(--accent-glow); }
.btn:active{ transform:scale(.96); transition-duration:.12s; }
.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; left:-90px;
  background:linear-gradient(100deg, transparent, rgba(0,0,0,.16), transparent);
  transform:skewX(-20deg);
}
.btn-shine:hover::after{ left:130%; transition:left .75s var(--ease); }
.btn-ghost{ background:var(--glass-bg); color:var(--text); border-color:var(--glass-border); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); }
.btn-ghost:hover{ border-color:var(--white); background:var(--glass-bg-hover); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }
.btn-icon{ width:42px; height:42px; padding:0; border-radius:50%; }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; border:1px solid var(--glass-border); color:var(--text-dim);
  background:var(--glass-bg-2); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
}
.badge-solid{ background:var(--white); color:var(--black); border-color:var(--white); font-weight:600; }
.badge-outline-danger{ color:#ff9c9f; border-color:rgba(229,72,77,.45); }

/* ---------- demo banner ---------- */
.demo-banner{
  background: repeating-linear-gradient(135deg, #1c1c20, #1c1c20 10px, #26262c 10px, #26262c 20px);
  border-bottom:1px solid var(--border);
  color: var(--text-dim); font-size:13.5px; text-align:center; padding:10px 18px;
}
.demo-banner strong{ color:var(--white); }
.demo-banner code{ background:var(--surface-2); padding:2px 6px; border-radius:5px; font-family:var(--font-mono); color:var(--white); }

/* ---------- announcement bar ---------- */
.announce{
  background:var(--black); border-bottom:1px solid var(--border);
  color:var(--text-dim); font-size:13px; text-align:center; padding:9px 16px;
  font-family:var(--font-mono); letter-spacing:.02em;
}
.announce b{ color:var(--white); }

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(14,14,17,.5);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-bottom:1px solid var(--glass-border);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 12px 40px -18px rgba(0,0,0,.6);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:13px; font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.01em; }
.brand-mark{
  width:48px; height:48px; border-radius:13px; overflow:hidden; flex-shrink:0;
  background:#000; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(255,255,255,.35);
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--text-dim); position:relative; padding:6px 0;
  transition:color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--white); border-radius:2px;
}
.nav-actions{ display:flex; align-items:center; gap:12px; }
.cart-btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);
}
.cart-btn:hover{ border-color:var(--white); background:var(--glass-bg-hover); }
.cart-badge{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 4px;
  background:var(--accent); color:var(--white); border-radius:999px;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg); transform:scale(0); transition:transform .2s var(--ease);
  box-shadow:0 0 10px 1px var(--accent-glow);
}
.cart-badge.show{ transform:scale(1); }
.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--glass-border); background:var(--glass-bg); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); }
.burger span, .burger::before, .burger::after{ content:""; display:block; width:18px; height:2px; background:var(--text); }

.mobile-nav{
  position:fixed; inset:var(--header-h) 0 0 0; background:rgba(14,14,17,.65); z-index:55;
  backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .25s var(--ease);
  overflow-y:auto; border-top:1px solid var(--glass-border);
}
.mobile-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-nav .container{ padding-top:28px; display:flex; flex-direction:column; gap:6px; }
.mobile-nav a{ padding:16px 4px; border-bottom:1px solid var(--border); font-size:17px; font-weight:600; }

@keyframes hero-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ---------- marquee ticker ---------- */
.marquee{
  overflow:hidden; border-bottom:1px solid var(--border); background:var(--bg-alt);
  padding:15px 0;
}
.marquee-track{ display:flex; width:max-content; animation:marquee-scroll 26s linear infinite; }
.marquee-group{ display:flex; align-items:center; flex-shrink:0; }
.marquee-group span{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; font-weight:600;
  color:var(--white); white-space:nowrap; padding:0 22px; position:relative;
}
.marquee-group span::after{
  content:"◆"; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
  font-size:6px; color:var(--accent);
}
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- script spotlight (accueil) ---------- */
#spotlight{ animation: hero-rise .8s var(--ease) .15s both; }
.spotlight{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  background:
    radial-gradient(ellipse 55% 80% at 90% -10%, rgba(255,255,255,.07), transparent),
    var(--glass-bg);
  border:1px solid var(--glass-border); border-radius:28px; padding:36px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); position:relative; overflow:hidden;
}
.spotlight::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.spotlight-video{
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--glass-border);
  background:rgba(0,0,0,.4);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
}
.spotlight-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.spotlight-ribbon{
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(10,10,11,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); color:var(--white);
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px;
}
.spotlight-info{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.spotlight-info h3{ font-size:28px; line-height:1.2; }
.spotlight-desc{ color:var(--text-dim); font-size:14.5px; line-height:1.7; }
.spotlight-desc p{ margin-bottom:10px; }
.spotlight-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:10px;
  padding-top:22px; border-top:1px solid var(--glass-border-soft); width:100%;
}
.spotlight-price-box{ display:flex; flex-direction:column; gap:2px; }
.spotlight-price-label{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint);
}
.spotlight-foot .price{ font-size:27px; color:var(--accent); }

@media (max-width:900px){
  .spotlight{ grid-template-columns:1fr; padding:24px; }
}

/* ---------- category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.cat-card{
  position:relative; border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:26px;
  background:var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition:all .35s var(--ease); overflow:hidden; min-height:150px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.cat-card::before{
  content:""; position:absolute; inset:0;
  background:
    var(--glare),
    radial-gradient(circle at 130% -40%, rgba(255,255,255,.08), transparent 70%);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.cat-card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.cat-card:hover{
  border-color:var(--glass-border); background:var(--glass-bg-hover); transform:translateY(-4px) scale(1.012);
  box-shadow: var(--glass-shadow-hover);
}
.cat-card:hover::before{ opacity:1; }
.cat-card .n{ font-size:34px; font-weight:800; font-family:var(--font-display); opacity:.14; position:absolute; top:18px; right:22px; }
.cat-card h3{ font-size:19px; margin-bottom:6px; }
.cat-card p{ color:var(--text-faint); font-size:13.5px; }
.cat-card .count{ margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }

/* ---------- product grid & cards ---------- */
.filters-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:30px;
  padding:16px; border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.chip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass-bg-2);
  color:var(--text-dim); font-size:13.5px; font-weight:500; transition:all .2s var(--ease);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
}
.chip:hover{ border-color:var(--white); color:var(--white); background:var(--glass-bg-hover); }
.chip.active{ background:var(--white); color:var(--black); border-color:var(--white); font-weight:700; }
.search-box{
  display:flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid var(--glass-border);
  border-radius:999px; background:var(--glass-bg-2); min-width:220px;
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
}
.search-box input{ background:transparent; border:none; outline:none; color:var(--text); font-size:14px; width:100%; }
.search-box svg{ flex-shrink:0; color:var(--text-faint); }
.sort-select{
  background-color:var(--glass-bg-2); border:1px solid var(--glass-border); color:var(--text); border-radius:999px;
  padding:10px 34px 10px 16px; font-size:13.5px; appearance:none;
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a1a1a8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:22px; }
.product-card{
  position:relative;
  border:1px solid var(--glass-border); border-radius:var(--radius-lg); background:var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  overflow:hidden; display:flex; flex-direction:column; transition:all .35s var(--ease);
}
.product-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.product-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.product-card:hover::after{ opacity:1; }
.product-card:hover{ transform:translateY(-4px) scale(1.012); border-color:var(--glass-border); background:var(--glass-bg-hover); box-shadow:var(--glass-shadow-hover); }
.product-card:active{ transform:translateY(-2px) scale(1.002); transition-duration:.12s; }
.product-thumb{
  position:relative; aspect-ratio:16/10; background:
    linear-gradient(135deg,rgba(46,46,52,.6),rgba(24,24,28,.6));
  display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--glass-border-soft);
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-thumb .glyph{ font-family:var(--font-display); font-weight:800; font-size:40px; color:rgba(255,255,255,.16); }
.product-thumb .tag{
  position:absolute; top:12px; left:12px;
}
.product-body{ padding:20px 20px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h3{ font-size:16.5px; line-height:1.3; }
.product-body .desc{ color:var(--text-faint); font-size:13.5px; line-height:1.5; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:10px; }
.price{ font-family:var(--font-mono); font-weight:600; font-size:18px; }
.price small{ color:var(--text-faint); font-size:11px; font-weight:500; margin-left:2px; }
.price-old{ text-decoration:line-through; color:var(--text-faint); font-size:12.5px; margin-right:6px; }
.add-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg-2);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  color:var(--text); display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); flex-shrink:0;
}
.add-btn:hover{ background:var(--accent); color:var(--white); border-color:var(--accent); transform:scale(1.07) rotate(90deg); box-shadow:0 6px 18px -6px var(--accent-glow); }
.add-btn.added{ background:var(--accent); color:var(--white); border-color:var(--accent); }

/* skeletons */
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:8px; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.skel-card{ height:340px; border-radius:var(--radius-lg); }

.empty-state{
  text-align:center; padding:80px 20px; color:var(--text-faint); border:1px dashed var(--glass-border);
  background:var(--glass-bg); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius:var(--radius-lg); grid-column:1/-1;
}
.empty-state h3{ color:var(--text-dim); margin-bottom:8px; font-size:18px; }

/* ---------- features / steps ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.feature-card{
  position:relative; overflow:hidden;
  padding:28px; border:1px solid var(--glass-border); border-radius:var(--radius-lg); background:var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition:all .35s var(--ease);
}
.feature-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.feature-card:hover::after{ opacity:1; }
.feature-card:hover{
  border-color:var(--glass-border); background:var(--glass-bg-hover); transform:translateY(-4px) scale(1.012);
  box-shadow: var(--glass-shadow-hover);
}
.feature-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--glass-bg-2);
  border:1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--white);
  transition:all .35s var(--ease);
}
.feature-card h3{ font-size:16.5px; margin-bottom:8px; }
.feature-card p{ color:var(--text-faint); font-size:13.5px; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.step{
  position:relative; padding:32px 26px; border:1px solid var(--glass-border); border-radius:var(--radius-lg); background:var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); transition:all .3s var(--ease);
}
.step:hover{ background:var(--glass-bg-hover); transform:translateY(-4px); box-shadow: var(--glass-shadow-hover); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono); font-size:13px; color:var(--text-faint);
  display:block; margin-bottom:16px; letter-spacing:.1em;
}
.step::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.step:hover::after{ opacity:1; }
.step h3{ font-size:16.5px; margin-bottom:8px; }
.step p{ color:var(--text-faint); font-size:13.5px; }

/* ---------- CTA banner ---------- */
.cta-banner{
  border:1px solid var(--glass-border); border-radius:24px; padding:64px 40px; text-align:center;
  background:
    radial-gradient(ellipse 60% 90% at 85% -20%, rgba(255,255,255,.08), transparent),
    radial-gradient(ellipse 80% 100% at 50% 120%,rgba(255,255,255,.1),transparent),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.cta-banner h2{ font-size:clamp(24px,3.6vw,36px); margin-bottom:14px; }
.cta-banner p{ color:var(--text-dim); max-width:460px; margin:0 auto 30px; }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  position:relative;
  border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg); overflow:hidden;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); transition: background .25s var(--ease), border-color .25s var(--ease);
}
.faq-item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.faq-item:hover::after{ opacity:1; }
.faq-item:hover{ background:var(--glass-bg-hover); border-color:var(--glass-border); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px;
  font-weight:600; font-size:15px; background:none; border:none; color:var(--text); width:100%; text-align:left;
}
.faq-q svg{ flex-shrink:0; transition:transform .25s var(--ease); color:var(--text-faint); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 22px 20px; color:var(--text-faint); font-size:14px; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--glass-border); background:rgba(14,14,17,.55); padding:72px 0 28px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; margin-bottom:56px; }
.footer-brand p{ color:var(--text-faint); font-size:13.5px; margin-top:16px; max-width:280px; }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:18px; font-family:var(--font-mono); font-weight:600; }
.footer-col a{ display:block; color:var(--text-dim); font-size:14px; padding:7px 0; transition:color .2s; }
.footer-col a:hover{ color:var(--white); }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg-2); display:flex;
  align-items:center; justify-content:center; color:var(--text-dim); padding:0; transition:all .2s var(--ease);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
}
.social-row a:hover{ border-color:var(--white); color:var(--white); background:var(--glass-bg-hover); }
.footer-bottom{
  border-top:1px solid var(--border); padding-top:26px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:14px; color:var(--text-faint); font-size:13px;
}
.pay-icons{ display:flex; gap:8px; align-items:center; color:var(--text-faint); font-family:var(--font-mono); font-size:12px; }

/* ---------- cart drawer ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(6,6,8,.55); backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%); z-index:80;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.overlay.show{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); background:rgba(18,18,21,.55);
  backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
  border-left:1px solid var(--glass-border); z-index:90; display:flex; flex-direction:column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform .35s var(--ease);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--glass-border); }
.cart-head h3{ font-size:17px; }
.cart-close{ width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg-2); color:var(--text); display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); }
.cart-close:hover{ border-color:var(--white); background:var(--glass-bg-hover); }
.cart-items{ flex:1; overflow-y:auto; padding:10px 24px; display:flex; flex-direction:column; gap:16px; }
.cart-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--glass-border-soft); }
.cart-item .thumb{
  width:64px; height:64px; border-radius:10px; background:var(--glass-bg-2); border:1px solid var(--glass-border-soft); flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--text-faint);
}
.cart-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .info h4{ font-size:14px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item .info .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.qty-ctrl{ display:flex; align-items:center; gap:0; border:1px solid var(--glass-border); border-radius:999px; overflow:hidden; background:var(--glass-bg-2); }
.qty-ctrl button{ width:26px; height:26px; background:transparent; border:none; color:var(--text-dim); font-size:15px; }
.qty-ctrl button:hover{ background:var(--glass-bg-hover); color:var(--white); }
.qty-ctrl span{ min-width:22px; text-align:center; font-size:13px; font-family:var(--font-mono); }
.item-price{ font-family:var(--font-mono); font-size:13.5px; }
.remove-btn{ color:var(--text-faint); font-size:12px; text-decoration:underline; margin-top:4px; display:inline-block; }
.remove-btn:hover{ color:var(--danger); }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--text-faint); }
.cart-empty svg{ margin-bottom:18px; color:var(--border-hover); }
.cart-foot{ padding:22px 24px 26px; border-top:1px solid var(--glass-border); }
.cart-foot .row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:14.5px; color:var(--text-dim); }
.cart-foot .total{ font-size:19px; font-weight:700; color:var(--accent); font-family:var(--font-mono); }
.cart-foot small{ display:block; text-align:center; margin-top:12px; color:var(--text-faint); font-size:11.5px; }
.coupon-box{ display:flex; gap:8px; margin-bottom:12px; }
.coupon-box input{
  flex:1; min-width:0; background:var(--glass-bg-2); border:1px solid var(--glass-border); color:var(--text);
  border-radius:999px; padding:9px 16px; font-size:13.5px; outline:none;
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
}
.coupon-box input:focus{ border-color:var(--white); }
.coupon-box .btn{ flex-shrink:0; padding:9px 16px; }
.coupon-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.coupon-list:empty{ display:none; }
.coupon-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--glass-bg-2); border:1px solid var(--glass-border); border-radius:10px;
  padding:8px 12px; font-family:var(--font-mono); font-size:12.5px;
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
}
.coupon-chip span{ color:var(--text); font-weight:600; letter-spacing:.03em; }
.coupon-chip button{ background:transparent; border:none; color:var(--text-faint); font-size:16px; line-height:1; padding:0 2px; }
.coupon-chip button:hover{ color:var(--danger); }
#cartSubtotalRow span:last-child{ text-decoration:line-through; color:var(--text-faint); font-family:var(--font-mono); }

/* ---------- support popup ---------- */
.support-popup{
  position:fixed; bottom:24px; left:24px; z-index:110; width:280px;
  background:var(--glass-bg-2); border:1px solid var(--glass-border); border-radius:16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding:20px 20px 18px; box-shadow:var(--glass-shadow);
  transform:translateY(16px) scale(.97); opacity:0; pointer-events:none;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.support-popup.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.support-popup-close{
  position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%;
  background:transparent; border:1px solid var(--glass-border); color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);
}
.support-popup-close:hover{ color:var(--white); border-color:var(--white); background:var(--glass-bg-hover); }
.support-popup-icon{
  width:38px; height:38px; border-radius:11px; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--white);
}
.support-popup h4{ font-size:15px; margin-bottom:6px; font-family:var(--font-display); }
.support-popup p{ font-size:13px; color:var(--text-faint); line-height:1.5; margin-bottom:16px; }
@media (max-width:600px){
  .support-popup{ left:16px; right:16px; width:auto; bottom:16px; }
}

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:24px; right:24px; z-index:120; display:flex; flex-direction:column; gap:10px; }
.toast{
  display:flex; align-items:center; gap:12px; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius:12px; padding:14px 18px; min-width:280px; box-shadow:var(--glass-shadow);
  transform:translateY(10px); opacity:0; animation:toast-in .3s var(--ease) forwards;
}
@keyframes toast-in{ to{ transform:translateY(0); opacity:1; } }
.toast .ic{ width:30px; height:30px; border-radius:50%; background:var(--white); color:var(--black); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast.error .ic{ background:var(--danger); color:#fff; }
.toast p{ font-size:13.5px; color:var(--text); }

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,6,8,.6); backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal{
  background:rgba(20,20,23,.6); border:1px solid var(--glass-border); border-radius:20px; width:100%; max-width:640px;
  backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--glass-shadow);
  max-height:86vh; overflow-y:auto; transform:scale(.96) translateY(10px); transition:transform .3s var(--ease);
}
.modal-overlay.show .modal{ transform:scale(1) translateY(0); }
.modal-thumb{ aspect-ratio:16/8; background:linear-gradient(135deg,rgba(46,46,52,.6),rgba(24,24,28,.6)); border-bottom:1px solid var(--glass-border-soft); position:relative; }
.modal-thumb img{ width:100%; height:100%; object-fit:cover; }
.modal-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,.4); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border:1px solid var(--glass-border); color:#fff; display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);
}
.modal-close:hover{ background:rgba(0,0,0,.6); border-color:var(--white); }
.modal-body{ padding:28px 30px 32px; }
.modal-body .badge{ margin-bottom:14px; }
.modal-body h2{ font-size:24px; margin-bottom:14px; }
.modal-desc{ color:var(--text-dim); font-size:14.5px; line-height:1.7; margin-bottom:26px; }
.modal-desc p{ margin-bottom:12px; }
.modal-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; border-top:1px solid var(--glass-border); }

/* ---------- generic page (legal / thanks) ---------- */
.page-hero{
  padding:80px 0 40px; border-bottom:1px solid var(--border);
  background: radial-gradient(ellipse 55% 100% at 50% -20%, rgba(255,255,255,.12), transparent 65%), var(--bg);
}
.page-hero h1{ font-size:clamp(30px,5vw,44px); }
.page-hero p{ color:var(--text-dim); margin-top:14px; }
.prose{ max-width:760px; padding:60px 0 100px; color:var(--text-dim); font-size:15px; line-height:1.8; }
.prose h2{ color:var(--text); font-size:21px; margin:38px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose ul{ list-style:disc; padding-left:22px; margin:14px 0; }
.prose li{ margin-bottom:6px; }
.prose strong{ color:var(--text); }

.thanks-box{
  max-width:560px; margin:90px auto; text-align:center; padding:56px 40px; border:1px solid var(--glass-border);
  border-radius:24px; background:var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.thanks-icon{
  width:76px; height:76px; border-radius:50%; background:var(--white); color:var(--black);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px;
  box-shadow: 0 10px 30px -8px rgba(255,255,255,.35);
}
.thanks-box h1{ font-size:26px; margin-bottom:12px; }
.thanks-box p{ color:var(--text-dim); font-size:14.5px; margin-bottom:30px; }

/* ---------- tools (miniature maker) ---------- */
.tool-layout{ display:grid; grid-template-columns:360px 1fr; gap:26px; align-items:start; }
.tool-sidebar{ display:flex; flex-direction:column; gap:16px; }
.tool-panel{
  padding:22px; border-radius:var(--radius-lg); border:1px solid var(--glass-border);
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.tool-panel h3{ font-size:14.5px; margin-bottom:18px; letter-spacing:.01em; }

.field{ margin-bottom:18px; }
.field:last-child{ margin-bottom:0; }
.field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.field-row label{ font-size:13px; color:var(--text-dim); }
.field-value{
  font-family:var(--font-mono); font-size:11.5px; color:var(--text); background:var(--glass-bg-2);
  border:1px solid var(--glass-border); padding:3px 8px; border-radius:6px; white-space:nowrap;
}

.field input[type="text"], .field textarea{
  width:100%; background:var(--glass-bg-2); border:1px solid var(--glass-border); border-radius:10px;
  padding:10px 12px; color:var(--text); font-size:14px; font-family:var(--font-body); resize:vertical;
  transition:border-color .2s var(--ease);
}
.field textarea{ min-height:46px; line-height:1.4; }
.field input[type="text"]:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }

.tool-select{
  width:100%; background-color:var(--glass-bg-2); border:1px solid var(--glass-border); color:var(--text);
  border-radius:10px; padding:10px 34px 10px 12px; font-size:14px; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a1a1a8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.tool-select:focus{ outline:none; border-color:var(--accent); }

input[type="range"].tool-range{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px;
  background:rgba(255,255,255,.14); outline:none; cursor:pointer;
}
input[type="range"].tool-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--white); border:3px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:pointer;
}
input[type="range"].tool-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--white); border:3px solid var(--accent);
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5);
}
input[type="range"].tool-range::-moz-range-track{ background:transparent; }

.seg-group{ display:flex; gap:8px; flex-wrap:wrap; }
.seg-btn{
  padding:8px 14px; border-radius:8px; border:1px solid var(--glass-border); background:var(--glass-bg-2);
  color:var(--text-dim); font-size:12.5px; font-weight:600; transition:all .2s var(--ease); white-space:nowrap;
}
.seg-btn:hover{ border-color:var(--border-hover); color:var(--text); }
.seg-btn.active{ border-color:var(--accent); color:var(--accent); background:rgba(34,197,94,.12); }
.seg-btn.wide{ flex:1; text-align:center; }

.color-field{ display:flex; align-items:center; gap:10px; }
.color-swatch{
  width:38px; height:34px; border-radius:8px; border:1px solid var(--glass-border); padding:0;
  flex-shrink:0; overflow:hidden; position:relative; cursor:pointer; background:var(--glass-bg-2);
}
.color-swatch input[type="color"]{
  position:absolute; inset:-30%; width:160%; height:160%; border:none; padding:0; cursor:pointer; background:none;
}
.color-hex{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); background:var(--glass-bg-2);
  border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; flex:1;
}

.upload-box{
  position:relative; border:1.5px dashed var(--glass-border); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg-2); transition:border-color .2s var(--ease);
}
.upload-box:hover{ border-color:var(--accent); }
.upload-box input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; z-index:1; }
.upload-box img{ width:100%; height:100%; object-fit:cover; }
.upload-placeholder{
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-faint);
  font-size:12px; text-align:center; padding:14px;
}
.upload-remove{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:8px; z-index:2;
  background:var(--danger); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease);
}
.upload-remove:hover{ background:#ff6166; }

.toggle-row{ display:flex; align-items:center; justify-content:space-between; }
.switch{ position:relative; display:inline-block; width:40px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-track{
  position:absolute; inset:0; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  border-radius:999px; transition:all .2s var(--ease); cursor:pointer;
}
.switch-track::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:2.5px;
  background:var(--text-faint); border-radius:50%; transition:all .2s var(--ease);
}
.switch input:checked + .switch-track{ background:rgba(34,197,94,.22); border-color:var(--accent); }
.switch input:checked + .switch-track::before{ transform:translateX(16px); background:var(--accent); }
.switch input:focus-visible + .switch-track{ border-color:var(--white); }

.tool-preview-wrap{ position:sticky; top:calc(var(--header-h) + 24px); }
.tool-preview{
  border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  overflow:hidden; aspect-ratio:16/9; position:relative;
}
.tool-preview canvas{ width:100%; height:100%; display:block; }
.tool-preview-meta{
  display:flex; justify-content:space-between; align-items:center; margin-top:14px;
  color:var(--text-faint); font-size:12px; font-family:var(--font-mono);
}

/* ---------- tools hub ---------- */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.tools-grid .cat-card{ justify-content:flex-start; }
.tool-card-icon{
  width:46px; height:46px; border-radius:12px; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--white);
  position:relative; z-index:1;
}
.tool-card-cta{
  margin-top:16px; display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--accent); font-family:var(--font-mono); position:relative; z-index:1;
}
.tool-card-soon{
  position:relative; z-index:1; opacity:.5; pointer-events:none;
}

/* ---------- converter table ---------- */
.converter-tabs{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.tab-label{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text-faint); transition:color .25s var(--ease); }
.tab-label.active{ color:var(--white); }
.code-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.code-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.code-col-head label{ font-size:13px; color:var(--text-dim); }
.code-textarea{
  width:100%; min-height:360px; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:16px; color:var(--text); font-family:var(--font-mono);
  font-size:13.5px; line-height:1.6; resize:vertical; transition:border-color .2s var(--ease);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
}
.code-textarea:focus{ outline:none; border-color:var(--accent); }
.code-textarea[readonly]{ color:var(--text-dim); }
.code-textarea.has-error{ border-color:var(--danger); color:#ff9c9f; }

/* ---------- full-bleed hero ---------- */
.hero-full{ position:relative; min-height:620px; display:flex; align-items:center; overflow:hidden; }
.hero-full-bg{ position:absolute; inset:0; z-index:0; }
.hero-full-bg img{ width:100%; height:100%; object-fit:cover; object-position:75% center; display:block; }
.hero-full-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.7) 34%, rgba(10,10,11,.22) 60%, transparent 78%),
    linear-gradient(0deg, rgba(10,10,11,.5), transparent 45%);
}
.hero-full-content{ position:relative; z-index:1; max-width:600px; padding:90px 0; animation:hero-rise .8s var(--ease) both; }
.hero-full-content h1{ font-size:clamp(32px,4.6vw,54px); line-height:1.1; font-weight:800; color:var(--white); }
.hero-full-content .lead{ margin-top:18px; color:var(--text-dim); font-size:16px; line-height:1.65; max-width:500px; }
.hero-full-stat{ margin-top:16px; font-size:13.5px; color:var(--text-dim); font-family:var(--font-mono); }
.hero-full-stat strong{ color:var(--white); }
.hero-full-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.btn-discord{ background:#5865f2; color:#fff; }
.btn-discord:hover{ background:#6c75f5; transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(88,101,242,.55); }

/* ---------- derniers mods (strip horizontal) ---------- */
.mod-strip{
  display:flex; gap:16px; overflow-x:auto; padding:2px 2px 12px;
  scroll-snap-type:x proximity; -ms-overflow-style:none; scrollbar-width:none;
}
.mod-strip::-webkit-scrollbar{ display:none; }
.mod-card{
  position:relative; flex:0 0 190px; scroll-snap-align:start; display:block;
  border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass-bg);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  overflow:hidden; transition:all .3s var(--ease);
}
.mod-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.mod-card:hover::after{ opacity:1; }
.mod-card:hover{ transform:translateY(-4px); background:var(--glass-bg-hover); box-shadow:var(--glass-shadow); }
.mod-thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--glass-border-soft);
  background:linear-gradient(135deg,rgba(46,46,52,.6),rgba(24,24,28,.6));
  display:flex; align-items:center; justify-content:center;
}
.mod-thumb img{ width:100%; height:100%; object-fit:cover; }
.mod-thumb .glyph{ font-family:var(--font-display); font-weight:800; font-size:24px; color:rgba(255,255,255,.16); }
.mod-thumb .tag{ position:absolute; top:8px; right:8px; font-size:10px; padding:3px 8px; }
.mod-body{ padding:12px 14px 14px; }
.mod-body h4{ font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mod-body p{ font-size:11.5px; color:var(--text-faint); line-height:1.4; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mod-body .price{ font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--text); }

/* ---------- pourquoi nous choisir ---------- */
.why-section{ display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:start; }
.why-list{ display:flex; flex-direction:column; gap:28px; }
.why-item{ display:flex; gap:16px; align-items:flex-start; }
.why-item-icon{
  width:42px; height:42px; border-radius:11px; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;
}
.why-item h3{ font-size:16px; margin-bottom:6px; }
.why-item p{ color:var(--text-faint); font-size:13.5px; line-height:1.6; }
.why-cta{
  position:relative; overflow:hidden;
  border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:32px; background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
}
.why-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.why-cta:hover::after{ opacity:1; }
.why-cta h3{ font-size:20px; margin-bottom:12px; }
.why-cta p{ color:var(--text-dim); font-size:14px; line-height:1.7; margin-bottom:24px; }
.why-cta .actions{ display:flex; flex-direction:column; gap:10px; }

/* ---------- page produit ---------- */
.product-breadcrumb{ color:var(--text-faint); font-size:13px; margin-bottom:18px; }
.product-breadcrumb a{ color:var(--text-dim); }
.product-breadcrumb a:hover{ color:var(--white); }
.product-page-head{ display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:start; margin-bottom:60px; }
.product-gallery-main{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--glass-border); background:linear-gradient(135deg,rgba(46,46,52,.6),rgba(24,24,28,.6));
  display:flex; align-items:center; justify-content:center;
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.product-gallery-main .glyph{ font-family:var(--font-display); font-weight:800; font-size:64px; color:rgba(255,255,255,.14); }
.product-info-panel{
  position:relative; overflow:hidden;
  border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:30px;
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.product-info-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glare); opacity:0; transition:opacity .4s var(--ease);
}
.product-info-panel:hover::after{ opacity:1; }
.product-info-panel .badge{ margin-bottom:14px; }
.product-info-panel h1{ font-size:26px; line-height:1.2; margin-bottom:10px; }
.product-info-desc{ color:var(--text-dim); font-size:14px; margin-bottom:22px; }
.product-info-price{ font-size:30px; color:var(--accent); font-family:var(--font-mono); font-weight:700; margin-bottom:20px; }
.product-info-actions{ display:flex; gap:10px; }
.product-tabs{ display:flex; border-bottom:1px solid var(--glass-border); margin-bottom:28px; }
.product-tab-btn{
  padding:12px 4px; margin-right:26px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-faint); font-size:14.5px; font-weight:600; transition:all .2s var(--ease);
}
.product-tab-btn:hover{ color:var(--text); }
.product-tab-btn.active{ color:var(--white); border-color:var(--accent); }
.product-tab-panel{ display:none; color:var(--text-dim); font-size:14.5px; line-height:1.8; max-width:820px; }
.product-tab-panel.active{ display:block; }
.product-tab-panel p{ margin-bottom:14px; }
.product-tab-panel ul{ list-style:disc; padding-left:22px; margin:14px 0; }
.product-tab-panel li{ margin-bottom:6px; }
.product-tab-panel strong{ color:var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .tool-layout{ grid-template-columns:1fr; }
  .tool-preview-wrap{ position:static; order:-1; }
  .code-grid{ grid-template-columns:1fr; }
  .why-section{ grid-template-columns:1fr; }
  .product-page-head{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .nav-links{ display:none; }
  .burger{ display:flex; flex-direction:column; gap:4px; }
  .section{ padding:64px 0; }
  .hero-full{ min-height:0; }
  .hero-full-content{ padding:64px 0; max-width:100%; }
  .hero-full-bg::after{
    background:
      linear-gradient(0deg, rgba(10,10,11,.95) 15%, rgba(10,10,11,.55) 60%, rgba(10,10,11,.25) 100%);
  }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .filters-bar{ flex-direction:column; align-items:stretch; }
  .cart-drawer{ width:100vw; }
}

/* =========================================================
   V-CODE — direction artistique 2026 / accueil premium
   ========================================================= */

:root{
  --accent-soft: rgba(34,197,94,.12);
  --accent-line: rgba(74,222,128,.3);
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.brand{
  gap:0;
  font-size:0;
}
.brand-mark{
  width:150px;
  height:46px;
  border:0;
  border-radius:0;
  background:#fff;
  mask-image:url('../img/logo.png');
  mask-mode:luminance;
  mask-position:center;
  mask-size:160px 160px;
  mask-repeat:no-repeat;
  box-shadow:none;
}
.brand-mark img{ display:none; }
.navbar{
  background:rgba(11,11,13,.72);
  border-bottom-color:rgba(255,255,255,.08);
}
.nav-links a.active::after{
  left:50%;
  right:auto;
  width:5px;
  height:5px;
  bottom:-4px;
  border-radius:50%;
  transform:translateX(-50%);
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
}
.nav-discord{ gap:8px; }
.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
  flex:0 0 auto;
}

/* Hero : le visuel source est recadré pour ne garder que le personnage. */
.hero-full{
  min-height:690px;
  isolation:isolate;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle 540px at 74% 45%, rgba(34,197,94,.09), transparent 72%),
    radial-gradient(circle 480px at 18% 30%, rgba(255,255,255,.055), transparent 72%),
    #0b0b0d;
}
.hero-full::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,#000,transparent 74%);
}
.hero-full::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:160px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(transparent,#0b0b0d);
}
.hero-full > .container{
  position:relative;
  z-index:2;
  min-height:690px;
  display:flex;
  align-items:center;
}
.hero-full-bg{
  inset:0 0 0 auto;
  width:58%;
  z-index:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 27%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 27%,#000 100%);
}
.hero-full-bg img{
  object-position:100% center;
  filter:saturate(.9) contrast(1.04) brightness(.9);
  transform:scale(1.1);
  transform-origin:100% 50%;
}
.hero-full-bg::after{
  background:
    linear-gradient(90deg,#0b0b0d 0%,rgba(11,11,13,.98) 34%,rgba(11,11,13,.82) 48%,transparent 64%),
    linear-gradient(0deg,rgba(11,11,13,.48),transparent 36%);
}
.hero-full-content{
  width:60%;
  max-width:680px;
  padding:92px 0 104px;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c9c9cc;
}
.hero-kicker > span{
  width:28px;
  height:1px;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}
.hero-full-content h1{
  max-width:680px;
  font-size:clamp(46px,5.35vw,74px);
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}
.hero-full-content h1 em{
  color:var(--accent-hover);
  font-style:normal;
  background:linear-gradient(135deg,#f2fff6 0%,var(--accent-hover) 65%,#16a34a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-full-content .lead{
  max-width:590px;
  margin-top:24px;
  color:#bcbcc1;
  font-size:16.5px;
  line-height:1.72;
}
.hero-full-actions{ margin-top:34px; }
.hero-full-actions .btn{ min-height:50px; }
.play-dot{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  padding-left:2px;
  border-radius:50%;
  color:var(--accent-hover);
  background:var(--accent-soft);
  font-size:8px;
}
.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:30px;
  color:#9e9ea3;
  font-size:12.5px;
}
.hero-trust span{ display:flex; align-items:center; gap:7px; }
.hero-trust svg{ color:var(--accent); }
.hero-float{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  background:rgba(17,17,20,.64);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 45px -16px rgba(0,0,0,.85),inset 0 1px rgba(255,255,255,.08);
  animation:float-card 5s ease-in-out infinite;
}
.hero-float span:not(.status-dot){ display:flex; flex-direction:column; }
.hero-float small{
  color:#8d8d92;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-float strong{ color:#f8f8f9; font-size:13px; }
.hero-float-icon{ color:var(--accent); font-size:22px; }
.hero-float-performance{ right:33%; bottom:106px; }
.hero-float-ready{ right:4%; top:124px; animation-delay:-2.2s; }
@keyframes float-card{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* Bandeau de preuve */
.proof-bar{
  position:relative;
  z-index:4;
  background:#0f0f11;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.proof-grid{
  min-height:112px;
  display:grid;
  grid-template-columns:1.25fr repeat(4,1fr);
  align-items:stretch;
}
.proof-intro,.proof-stat{
  display:flex;
  justify-content:center;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08);
  padding:22px 24px;
}
.proof-intro{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding-left:0;
  color:#cfcfd2;
  font-size:13px;
  font-weight:600;
}
.proof-stat strong{
  font-family:var(--font-display);
  font-size:23px;
  line-height:1;
  color:#fff;
}
.proof-stat strong small{ color:var(--accent); font-size:.65em; }
.proof-stat > span{
  margin-top:7px;
  color:#77777c;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.proof-stat:last-child{ border-right:0; }

/* Sections et cartes */
.section-head h2{ max-width:720px; font-size:clamp(29px,3.5vw,43px); line-height:1.12; letter-spacing:-.04em; }
#spotlight{ padding-top:112px; }
.spotlight{
  gap:52px;
  padding:22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.02)),
    rgba(18,18,21,.68);
}
.spotlight-video{ border-radius:16px; }
.spotlight-info{ padding:22px 30px 22px 0; }
.spotlight-info h3{ font-size:clamp(25px,2.6vw,34px); letter-spacing:-.035em; }

.cat-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.cat-card{
  min-height:236px;
  padding:24px;
  justify-content:flex-start;
}
.cat-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.055);
  color:var(--accent-hover);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.cat-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.cat-card:hover .cat-icon{ transform:translateY(-3px) rotate(-3deg); background:var(--accent-soft); }
.cat-card .n{ top:27px; right:24px; font-size:14px; font-family:var(--font-mono); opacity:.4; }
.cat-card h3{ margin-top:28px; font-size:18px; }
.cat-card p{ margin-top:4px; line-height:1.55; }
.cat-card .count{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.08);
}
.cat-card .count span{ color:var(--accent); font-size:16px; transition:transform .25s var(--ease); }
.cat-card:hover .count span{ transform:translate(2px,-2px); }

.why-block{
  background:
    radial-gradient(circle 500px at 82% 50%,rgba(34,197,94,.07),transparent 75%),
    var(--bg-alt);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.why-section{ grid-template-columns:1.35fr .75fr; gap:24px; }
.bento-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.bento-list .why-item{
  min-height:190px;
  padding:24px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.bento-list .why-item:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.2);
}
.bento-list .bento-main{ grid-column:1/-1; min-height:0; }
.bento-list .why-item:nth-child(4){ grid-column:1/-1; min-height:0; }
.bento-list .why-item-icon{ margin-top:1px; }
.bento-list .why-item h3{ font-size:17px; }
.mini-label{
  display:block;
  margin-top:17px;
  color:#6f6f74;
  font:600 10px/1 var(--font-mono);
  letter-spacing:.12em;
}
.why-cta{
  min-height:100%;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(0deg,rgba(34,197,94,.08),transparent 55%),
    rgba(255,255,255,.04);
}
.why-cta .eyebrow{ margin-bottom:auto; }
.why-cta h3{ font-size:clamp(25px,2.6vw,36px); line-height:1.08; letter-spacing:-.04em; }
.why-cta .actions{ position:relative; z-index:2; }

.steps{ position:relative; gap:16px; }
.step{
  min-height:245px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.step::before{ display:none; }
.step-icon{
  position:absolute;
  top:26px;
  left:28px;
  color:var(--accent);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.12em;
}
.step h3{ font-size:18px; }

.cta-banner{
  padding:84px 42px;
  background:
    radial-gradient(circle 320px at 50% 130%,rgba(34,197,94,.22),transparent 72%),
    radial-gradient(circle 480px at 50% -40%,rgba(255,255,255,.1),transparent 70%),
    #101012;
}
.cta-banner .eyebrow{ position:relative; z-index:2; }
.cta-banner h2{
  position:relative;
  z-index:2;
  margin-bottom:18px;
  font-size:clamp(34px,5vw,58px);
  line-height:1.03;
  letter-spacing:-.05em;
}
.cta-banner p{ position:relative; z-index:2; max-width:610px; }
.cta-actions{ position:relative; z-index:2; display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.cta-orbit{
  position:absolute;
  width:460px;
  height:460px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.05);
  border-radius:50%;
  box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.012);
}

/* Polissage boutique et pages internes */
.page-hero{
  padding:92px 0 54px;
  background:
    radial-gradient(ellipse 48% 130% at 78% -10%,rgba(34,197,94,.11),transparent 68%),
    radial-gradient(ellipse 60% 120% at 20% -20%,rgba(255,255,255,.09),transparent 70%),
    #101012;
}
.page-hero h1{ font-size:clamp(36px,5vw,58px); letter-spacing:-.05em; }
.page-hero p{ max-width:650px; font-size:15.5px; }
.product-card{ background:rgba(255,255,255,.035); }
.product-thumb{ background:linear-gradient(145deg,#242429,#121215); }
.filters-bar{ position:relative; z-index:2; }

@media (max-width:1100px){
  .hero-full-bg{ width:62%; opacity:.88; }
  .hero-full-content{ width:65%; }
  .hero-full-content h1{ font-size:clamp(44px,6vw,66px); }
  .hero-float-performance{ right:27%; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .proof-grid{ grid-template-columns:1fr repeat(4,1fr); }
  .proof-intro{ font-size:12px; }
}

@media (max-width:860px){
  .hero-full,.hero-full > .container{ min-height:640px; }
  .hero-full-bg{
    width:100%;
    opacity:.36;
    -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 38%,#000 100%);
    mask-image:linear-gradient(0deg,transparent 0%,#000 38%,#000 100%);
  }
  .hero-full-bg::after{ background:linear-gradient(90deg,rgba(11,11,13,.78),rgba(11,11,13,.15)); }
  .hero-full-content{ width:82%; }
  .hero-float{ display:none; }
  .proof-grid{ grid-template-columns:repeat(2,1fr); padding:0; }
  .proof-intro{ grid-column:1/-1; padding:18px 24px; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .proof-stat{ min-height:96px; border-bottom:1px solid rgba(255,255,255,.08); }
  .proof-stat:nth-child(3){ border-right:0; }
  .spotlight-info{ padding:10px 4px 4px; }
  .why-section{ grid-template-columns:1fr; }
  .why-cta{ min-height:480px; }
}

@media (max-width:600px){
  .container{ padding-left:18px; padding-right:18px; }
  .navbar .brand-mark{ width:132px; height:44px; mask-size:145px 145px; }
  .nav-actions > .btn{ display:none; }
  .hero-full,.hero-full > .container{ min-height:650px; }
  .hero-full-content{ width:100%; padding:74px 0 82px; }
  .hero-kicker{ font-size:10px; letter-spacing:.09em; margin-bottom:18px; }
  .hero-full-content h1{ font-size:clamp(41px,12.5vw,58px); }
  .hero-full-content .lead{ margin-top:20px; font-size:15px; }
  .hero-full-actions{ display:grid; grid-template-columns:1fr; }
  .hero-full-actions .btn{ width:100%; }
  .hero-trust{ gap:9px 15px; }
  .hero-full-bg{ opacity:.24; width:125%; right:-25%; }
  .hero-full-bg img{ object-position:88% center; }
  .proof-stat{ padding:20px 18px; }
  .proof-stat strong{ font-size:20px; }
  .proof-stat > span{ font-size:9px; }
  #spotlight{ padding-top:76px; }
  .spotlight{ padding:14px; }
  .spotlight-foot{ align-items:flex-end; }
  .spotlight-foot .btn{ padding:12px 16px; }
  .cat-grid{ grid-template-columns:1fr; }
  .cat-card{ min-height:220px; }
  .bento-list{ grid-template-columns:1fr; }
  .bento-list .bento-main,.bento-list .why-item:nth-child(4){ grid-column:auto; }
  .bento-list .why-item{ min-height:0; }
  .why-cta{ min-height:420px; padding:28px; }
  .step{ min-height:210px; }
  .cta-banner{ padding:66px 22px; }
  .cta-banner h2{ font-size:36px; }
  .cta-actions{ flex-direction:column; }
  .cta-actions .btn{ width:100%; }
}

/* ---------- nouveaux outils FiveM ---------- */
.tool-page-hero h1{ max-width:820px; }
.tool-page-hero p{ max-width:760px; }
.code-image-layout{ grid-template-columns:340px minmax(0,1fr); }
.code-editor-panel{ margin-bottom:18px; }
.code-image-input{ min-height:235px; max-height:420px; }
.code-image-preview{
  aspect-ratio:16/9;
  background:#08090b;
  border-color:rgba(255,255,255,.16);
}
.tool-action-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.resource-layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.field-split{
  display:grid;
  grid-template-columns:1fr 110px;
  gap:10px;
}
.generator-switches{ display:flex; flex-direction:column; gap:16px; }
.generator-switches .toggle-row label:first-child{ color:var(--text-dim); font-size:13px; }
.resource-output{ min-width:0; }
.resource-summary{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
  background:
    radial-gradient(circle 280px at 100% 0%,rgba(34,197,94,.12),transparent 70%),
    var(--glass-bg);
}
.resource-summary .eyebrow{ margin-bottom:8px; }
.resource-summary h2{ font-size:28px; word-break:break-word; }
.resource-summary p{ margin-top:5px; color:var(--text-faint); font-size:13px; }
.resource-status{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid rgba(34,197,94,.25);
  border-radius:999px;
  background:rgba(34,197,94,.08);
  color:var(--accent-hover);
  font:600 10.5px/1 var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}
.resource-output-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);
  gap:18px;
}
.resource-code{ min-height:480px; resize:none; }
.resource-tree{
  min-height:480px;
  margin:0;
  padding:18px;
  overflow:auto;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  background:var(--glass-bg-2);
  color:#d7d7db;
  font:500 13.5px/1.85 var(--font-mono);
  white-space:pre;
}

@media (max-width:1080px){
  .code-image-layout,.resource-layout{ grid-template-columns:1fr; }
  .code-image-layout .tool-preview-wrap{ order:0; }
  .resource-output-grid{ grid-template-columns:1fr; }
  .resource-code,.resource-tree{ min-height:360px; }
}

@media (max-width:600px){
  .tool-page-hero{ padding-top:70px; }
  .tool-page-hero h1{ font-size:39px; }
  .tool-panel{ padding:18px; }
  .field-split{ grid-template-columns:1fr; }
  .tool-action-row{ display:grid; grid-template-columns:1fr; }
  .tool-action-row .btn{ width:100%; }
  .resource-summary{ align-items:flex-start; flex-direction:column; }
  .resource-code{ min-height:420px; font-size:12px; }
  .resource-tree{ min-height:280px; font-size:12px; }
  .code-image-input{ min-height:280px; }
}

/* ---------- boîte à outils FiveM étendue ---------- */
.field input[type="number"],
.coordinate-fields input{
  width:100%;
  min-width:0;
  background:var(--glass-bg-2);
  border:1px solid var(--glass-border);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
  font:500 13px var(--font-mono);
  transition:border-color .2s var(--ease);
}
.field input[type="number"]:focus,.coordinate-fields input:focus{ outline:none; border-color:var(--accent); }
.tool-help{ color:var(--text-faint); font-size:12px; line-height:1.6; }
.field-value.is-error{ color:#ff9c9f; border-color:rgba(229,72,77,.35); }
.utility-input{ min-height:150px !important; font-family:var(--font-mono) !important; }
.utility-layout,.generator-layout{
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.utility-output,.generator-output{ min-width:0; }
.coordinate-stage{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:18px;
}
.coord-axis{
  min-width:0;
  padding:22px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  position:relative;
}
.coord-axis::after{ content:""; position:absolute; inset:auto -30px -35px auto; width:90px; height:90px; border-radius:50%; background:var(--axis-color); filter:blur(35px); opacity:.18; }
.coord-axis span{ display:block; color:var(--axis-color); font:700 11px var(--font-mono); margin-bottom:12px; }
.coord-axis strong{ display:block; overflow:hidden; text-overflow:ellipsis; color:var(--white); font:600 clamp(14px,1.6vw,20px) var(--font-mono); }
.axis-x{ --axis-color:#ef4444; }.axis-y{ --axis-color:#22c55e; }.axis-z{ --axis-color:#3b82f6; }.axis-h{ --axis-color:#f59e0b; }
.format-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.utility-code{ min-height:330px; resize:none; }

.coordinate-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.coordinate-fields label{ display:flex; flex-direction:column; gap:7px; color:var(--text-faint); font:600 10px var(--font-mono); }
.generator-code{ min-height:465px; resize:none; font-size:12.5px; }

/* aperçu Blip */
.blip-preview{
  height:340px;
  position:relative;
  overflow:hidden;
  margin-bottom:18px;
  background:
    radial-gradient(circle at 50% 45%,rgba(34,197,94,.1),transparent 32%),
    linear-gradient(145deg,#1b2020,#0d1112);
}
.map-grid{ position:absolute; inset:0; opacity:.34; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:42px 42px; transform:rotate(-8deg) scale(1.2); }
.map-road{ position:absolute; height:58px; width:130%; left:-15%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); transform:rotate(-18deg); }
.road-one{ top:70px; }.road-two{ top:230px; transform:rotate(24deg); }
.blip-pin{
  --blip-color:#22c55e;
  position:absolute; left:50%; top:48%; width:64px; height:64px;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  transition:transform .25s;
}
.blip-pin::before{ display:none; }
.blip-pin span{ position:relative; color:#fff; font:800 13px var(--font-mono); text-shadow:0 1px 3px rgba(0,0,0,.5); }
.blip-pin img{ position:relative; width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.72)); }
.blip-pin.is-custom img{ width:60px; height:60px; }
.blip-label{ position:absolute; left:24px; bottom:22px; display:flex; flex-direction:column; gap:3px; padding:12px 15px; border:1px solid var(--glass-border); border-radius:12px; background:rgba(10,11,13,.72); backdrop-filter:blur(12px); }
.blip-label strong{ font:700 14px var(--font-display); }.blip-label small{ color:var(--text-faint); font:500 10px var(--font-mono); }
.blip-label em{ color:var(--accent); font:500 9px var(--font-mono); font-style:normal; text-transform:uppercase; letter-spacing:.05em; }
.blip-library-panel{ padding-bottom:16px; }
.blip-library-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.blip-library-head .eyebrow{ display:block; margin-bottom:5px; font-size:9px; }
.blip-library-head h3{ margin:0; }
.blip-search-field{ margin-bottom:12px; }
.blip-search-field input[type="search"]{ width:100%; padding:11px 13px; border:1px solid var(--glass-border); border-radius:10px; outline:0; background:var(--glass-bg-2); color:var(--text); font:500 12px var(--font-mono); }
.blip-search-field input[type="search"]:focus{ border-color:var(--accent); }
.blip-catalog{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-height:430px; padding-right:4px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(34,197,94,.45) transparent; }
.blip-option{ min-width:0; min-height:104px; padding:9px 5px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; border:1px solid var(--glass-border); border-radius:10px; background:rgba(255,255,255,.018); color:var(--text); transition:border-color .18s,background .18s,transform .18s; }
.blip-option:hover{ transform:translateY(-2px); border-color:rgba(34,197,94,.42); background:rgba(34,197,94,.055); }
.blip-option.active{ border-color:var(--accent); background:rgba(34,197,94,.1); box-shadow:inset 0 0 0 1px rgba(34,197,94,.16); }
.blip-option span{ width:43px; height:43px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.055); }
.blip-option img{ width:34px; height:34px; object-fit:contain; }
.blip-option b{ font:700 10px var(--font-mono); color:var(--accent-hover); }
.blip-option small{ width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-faint); font:500 8px var(--font-mono); text-transform:capitalize; }
.blip-empty{ grid-column:1/-1; padding:28px 10px; text-align:center; color:var(--text-faint); font-size:12px; }
.blip-more{ width:100%; margin-top:10px; }
.blip-more[hidden]{ display:none; }
.blip-library-panel .tool-help{ margin-top:10px; }
.custom-blip-panel{ overflow:hidden; }
.custom-blip-drop{ min-height:132px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; text-align:center; border:1px dashed rgba(34,197,94,.38); border-radius:13px; background:rgba(34,197,94,.035); transition:border-color .2s,background .2s; }
.custom-blip-drop:hover{ border-color:var(--accent); background:rgba(34,197,94,.075); }
.custom-blip-drop input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.custom-upload-icon{ width:34px; height:34px; display:grid; place-items:center; margin-bottom:3px; border-radius:50%; background:var(--accent); color:#071009; font:800 22px/1 var(--font-display); }
.custom-blip-drop strong{ font-size:13px; }
.custom-blip-drop small{ color:var(--text-faint); font-size:10px; }
.custom-file-row{ margin-top:10px; padding:9px 9px 9px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(34,197,94,.22); border-radius:10px; background:rgba(34,197,94,.055); }
.custom-file-row[hidden]{ display:none; }
.custom-file-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--accent-hover); font:600 10px var(--font-mono); }
.custom-blip-panel .tool-help{ margin-top:10px; }
.custom-convert-btn{ width:100%; margin-top:12px; }
.custom-convert-btn:disabled{ cursor:not-allowed; opacity:.42; filter:saturate(.35); }

/* aperçu Marker */
.marker-preview{ min-height:370px; display:grid; grid-template-columns:1fr 220px; gap:24px; margin-bottom:18px; overflow:hidden; position:relative; background:radial-gradient(circle at 35% 50%,rgba(34,197,94,.1),transparent 34%),var(--glass-bg); }
.marker-scene{ position:relative; min-height:320px; perspective:700px; display:grid; place-items:center; }
.marker-horizon{ position:absolute; width:150%; height:150%; top:48%; left:-25%; transform:rotateX(68deg); background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:35px 35px; mask-image:radial-gradient(circle,#000,transparent 65%); }
.marker-shape{ --marker-color:#22c55eb4; position:relative; z-index:2; width:120px; height:120px; transition:all .3s var(--ease); filter:drop-shadow(0 0 22px var(--marker-color)); }
.marker-shape span,.marker-shape::before,.marker-shape::after{ content:""; position:absolute; inset:0; background:var(--marker-color); border:2px solid rgba(255,255,255,.6); }
.marker-cylinder{ border-radius:50%; transform:perspective(300px) rotateX(58deg); background:linear-gradient(var(--marker-color),transparent); }
.marker-cylinder::before{ border-radius:50%; transform:translateY(-38px); }.marker-cylinder::after{ border-radius:50%; transform:translateY(38px); opacity:.38; }
.marker-chevron,.marker-chevron-small,.marker-arrow{ clip-path:polygon(50% 0,100% 62%,70% 62%,50% 100%,30% 62%,0 62%); }.marker-chevron-small{ transform:scale(.66); }.marker-arrow{ transform:rotate(180deg); }
.marker-disc{ border-radius:50%; transform:rotateX(65deg); }.marker-ring{ border-radius:50%; background:transparent !important; border:16px solid var(--marker-color); }.marker-ring span,.marker-ring::before,.marker-ring::after{ display:none; }
.marker-shape.is-rotating{ animation:marker-spin 4s linear infinite; }.marker-shape.is-bobbing{ animation:marker-bob 1.8s ease-in-out infinite; }
@keyframes marker-spin{ to{ rotate:360deg; } } @keyframes marker-bob{ 50%{ translate:0 -18px; } }
.marker-shadow{ position:absolute; z-index:1; width:140px; height:42px; border-radius:50%; background:rgba(0,0,0,.5); filter:blur(10px); transform:translateY(82px) rotateX(65deg); }
.custom-marker-preview{ position:relative; z-index:2; width:150px; height:150px; object-fit:contain; transform:none; filter:drop-shadow(0 12px 22px rgba(0,0,0,.65)); animation:marker-bob 1.8s ease-in-out infinite; }
.custom-marker-preview[hidden],.marker-shape[hidden]{ display:none; }
.marker-shadow[hidden]{ display:none; }
.custom-marker-settings{ display:flex; flex-direction:column; gap:15px; margin-top:16px; padding-top:16px; border-top:1px solid var(--glass-border); }
.custom-marker-settings .field{ margin:0; }
.custom-marker-panel ~ .tool-panel :disabled{ opacity:.46; cursor:not-allowed; }
.marker-preview-info{ align-self:center; display:flex; flex-direction:column; gap:8px; border-left:1px solid var(--glass-border); padding-left:26px; }
.marker-preview-info span{ color:var(--accent); font:600 10px var(--font-mono); letter-spacing:.12em; }.marker-preview-info strong{ font:700 24px var(--font-display); }.marker-preview-info small{ color:var(--text-faint); font:500 12px var(--font-mono); }
.marker-code{ min-height:530px; }

/* Manifest Validator */
.validator-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.85fr); gap:20px; align-items:start; }
.validator-input{ min-height:630px; resize:vertical; }
.validator-results{ display:flex; flex-direction:column; gap:16px; }
.validator-score{ display:flex; align-items:center; gap:24px; background:radial-gradient(circle at 0 50%,rgba(34,197,94,.1),transparent 45%),var(--glass-bg); }
.validator-score h2{ font-size:22px; margin-bottom:5px; }.validator-score p{ color:var(--text-faint); font-size:12.5px; }
.score-ring{ --score:360deg; width:112px; height:112px; flex:0 0 auto; display:grid; place-content:center; border-radius:50%; position:relative; background:conic-gradient(var(--accent) var(--score),rgba(255,255,255,.08) 0); }
.score-ring::before{ content:""; position:absolute; inset:8px; border-radius:50%; background:#171719; }.score-ring strong,.score-ring span{ position:relative; z-index:1; text-align:center; }.score-ring strong{ font:800 29px var(--font-display); }.score-ring span{ color:var(--text-faint); font:500 10px var(--font-mono); }.score-ring.has-errors{ background:conic-gradient(var(--danger) var(--score),rgba(255,255,255,.08) 0); }.score-ring.has-warnings{ background:conic-gradient(#f59e0b var(--score),rgba(255,255,255,.08) 0); }
.diagnostic-head{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:16px; }.diagnostic-head h3{ margin:0; }.diagnostic-counts{ display:flex; gap:7px; flex-wrap:wrap; }.diagnostic-counts span{ padding:5px 8px; border-radius:6px; font:600 9px var(--font-mono); text-transform:uppercase; }.diag-error{ color:#ff9c9f; background:rgba(229,72,77,.1); }.diag-warning{ color:#fbbf24; background:rgba(245,158,11,.1); }
.diagnostic-list{ display:flex; flex-direction:column; gap:10px; max-height:440px; overflow:auto; }
.diagnostic-item{ display:flex; gap:12px; padding:13px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass-bg-2); }.diagnostic-icon{ width:25px; height:25px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; font:bold 13px var(--font-mono); }.diagnostic-item.error .diagnostic-icon{ color:#fff;background:var(--danger); }.diagnostic-item.warning .diagnostic-icon{ color:#111;background:#f59e0b; }.diagnostic-item.info .diagnostic-icon{ color:#fff;background:#3b82f6; }.diagnostic-item strong{ font-size:12.5px; }.diagnostic-item p{ color:var(--text-faint); font-size:11.5px; margin-top:3px; }
.diagnostic-empty{ text-align:center; padding:26px; color:var(--text-faint); }.diagnostic-empty span{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;background:var(--accent);color:#fff;font-weight:800; }.diagnostic-empty strong{ display:block;color:var(--text); }.diagnostic-empty p{ margin-top:4px;font-size:12px; }
.manifest-tips h3{ margin-bottom:14px; }.checklist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.checklist-grid span{ padding:9px;border:1px solid var(--glass-border);border-radius:8px;color:var(--text-faint);font:600 10px var(--font-mono); }.checklist-grid span::before{ content:"○"; margin-right:7px; }.checklist-grid span.passed{ color:var(--accent-hover);border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.07); }.checklist-grid span.passed::before{ content:"✓"; }

@media (max-width:1050px){
  .utility-layout,.generator-layout,.validator-layout{ grid-template-columns:1fr; }
  .validator-input{ min-height:480px; }
}
@media (max-width:700px){
  .coordinate-stage{ grid-template-columns:1fr 1fr; }
  .coordinate-fields{ grid-template-columns:1fr; }
  .marker-preview{ grid-template-columns:1fr; }
  .marker-preview-info{ border-left:0; border-top:1px solid var(--glass-border); padding:20px 0 0; }
  .checklist-grid{ grid-template-columns:1fr 1fr; }
  .validator-score{ align-items:flex-start; flex-direction:column; }
  .score-ring{ width:96px;height:96px; }
  .diagnostic-head{ align-items:flex-start; flex-direction:column; }
}