:root{
  color-scheme: light dark;

  --bg:          #f5f7fc;
  --bg:          light-dark(#f5f7fc, #080a12);
  --bg-2:        #ffffff;
  --bg-2:        light-dark(#ffffff, #0d101b);
  --surface:     #ffffff;
  --surface:     light-dark(#ffffff, #141828);
  --surface-2:   #f1f3fa;
  --surface-2:   light-dark(#f1f3fa, #1b2033);
  --surface-3:   #e9ecf6;
  --surface-3:   light-dark(#e9ecf6, #222840);
  --line:        #e3e7f1;
  --line:        light-dark(#e3e7f1, #262c42);
  --line-soft:   #eef0f8;
  --line-soft:   light-dark(#eef0f8, #1d2336);
  --ink:         #0f1329;
  --ink:         light-dark(#0f1329, #eef1fa);
  --ink-2:       #4a5170;
  --ink-2:       light-dark(#4a5170, #a8b0c9);
  --ink-3:       #858ba8;
  --ink-3:       light-dark(#858ba8, #767e9c);

  --brand:       #2d5bd7;
  --brand:       light-dark(#2d5bd7, #7d9dff);
  --brand-2:     #6b4de6;
  --brand-2:     light-dark(#6b4de6, #a78bfa);
  --brand-soft:  #eaf0ff;
  --brand-soft:  light-dark(#eaf0ff, #1a2240);
  --grad:        linear-gradient(105deg, var(--brand), var(--brand-2));

  --eco:         #0e9f6e;
  --eco:         light-dark(#0e9f6e, #34d399);
  --eco-soft:    #e3f7ef;
  --eco-soft:    light-dark(#e3f7ef, #0d2e26);
  --mid:         #c2690a;
  --mid:         light-dark(#c2690a, #fbbf24);
  --mid-soft:    #fdf1de;
  --mid-soft:    light-dark(#fdf1de, #33260c);
  --high:        #7c3aed;
  --high:        light-dark(#7c3aed, #c4b5fd);
  --high-soft:   #f0e9ff;
  --high-soft:   light-dark(#f0e9ff, #241a45);
  --warn:        #c0392b;
  --warn:        light-dark(#c0392b, #ff8f8f);
  --warn-soft:   #fdecec;
  --warn-soft:   light-dark(#fdecec, #3a1a1a);

  --sh-1:        rgba(16,20,42,.05);
  --sh-1:        light-dark(rgba(16,20,42,.05), rgba(0,0,0,.42));
  --sh-2:        rgba(16,20,42,.13);
  --sh-2:        light-dark(rgba(16,20,42,.13), rgba(0,0,0,.70));
  --sh-3:        rgba(16,20,42,.06);
  --sh-3:        light-dark(rgba(16,20,42,.06), rgba(0,0,0,.45));
  --sh-4:        rgba(16,20,42,.24);
  --sh-4:        light-dark(rgba(16,20,42,.24), rgba(0,0,0,.85));
  --shadow-sm:   0 1px 2px var(--sh-1);
  --shadow:      0 1px 2px var(--sh-1), 0 8px 22px -14px var(--sh-2);
  --shadow-md:   0 1px 3px var(--sh-3), 0 14px 34px -18px var(--sh-2);
  --shadow-lg:   0 2px 6px var(--sh-3), 0 26px 60px -22px var(--sh-4);
  --img-sh:      drop-shadow(0 14px 20px rgba(16,20,42,.18));
  --img-sh:      drop-shadow(0 14px 20px light-dark(rgba(16,20,42,.18), rgba(0,0,0,.55)));

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --wrap: 1240px;
  --gutter: clamp(1rem, 3.6vw, 2.25rem);
  --gap: clamp(.7rem, 1.6vw, 1.15rem);

  --fs-xs:   .72rem;
  --fs-sm:   .8rem;
  --fs-base: .88rem;
  --fs-md:   .95rem;
  --fs-lg:   clamp(1rem, 1.4vw, 1.08rem);
  --fs-xl:   clamp(1.15rem, 2.6vw, 1.5rem);
  --fs-2xl:  clamp(2rem, 6.2vw, 3.7rem);

  --font: "IBM Plex Sans Arabic", "Segoe UI", "Noto Naskh Arabic", "Dubai",
          Tahoma, system-ui, -apple-system, sans-serif;
}

:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark;  }

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

html, body, .modal{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.modal::-webkit-scrollbar{ width:0; height:0; display:none; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-inline:env(safe-area-inset-right) env(safe-area-inset-left);
}

img{ max-width:100%; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

.wrap{
  width:min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}

.bg-deco{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-deco::before,
.bg-deco::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.75;
}
.bg-deco::before{
  inset-block-start:-28vh; inset-inline-end:-18vw;
  width:min(78vw, 820px); aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--brand) 24%, transparent), transparent 65%);
}
.bg-deco::after{
  inset-block-start:24vh; inset-inline-start:-22vw;
  width:min(62vw, 620px); aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--brand-2) 17%, transparent), transparent 65%);
}

main{ position:relative; z-index:1; padding-block:clamp(1.5rem, 4vw, 2.75rem) clamp(3rem, 7vw, 5rem); }

.hero{
  position:relative; z-index:1;
  padding-block:clamp(2rem, 6vw, 4.5rem) clamp(1.75rem, 4.5vw, 3.25rem);
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:center;
}

.eyebrow{
  margin:0 0 .9rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  padding:.35rem .9rem; border-radius:999px;
}

.hero h1{
  margin:0 0 .9rem;
  font-size:var(--fs-2xl); line-height:1.14; font-weight:700; letter-spacing:-.015em;
}
.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.lede{
  margin:0 0 1.6rem; max-width:54ch;
  color:var(--ink-2); font-size:var(--fs-lg); line-height:1.85;
}

.hero-stats{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  max-width:30rem;
}
.stat{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.6rem .35rem; text-align:center;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.stat b{ display:block; font-size:1.3rem; font-weight:700; line-height:1.25; }
.stat span{ display:block; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.4; }

.hero-art{ display:flex; justify-content:center; }
.hero-art img{
  width:100%; max-width:clamp(190px, 30vw, 340px); height:auto; display:block;
  filter:drop-shadow(0 30px 45px light-dark(rgba(16,20,42,.26), rgba(0,0,0,.7)));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .hero-text{ order:2; }
  .hero-art{ order:1; }
  .lede{ margin-inline:auto; }
  .hero-stats{ margin-inline:auto; width:100%; }
}
@media (max-width: 430px){
  .hero-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 480px) and (orientation: landscape){
  .hero{ padding-block:1.5rem 1rem; }
  .hero-art img{ max-width:150px; }
}

.controls{
  position:sticky; inset-block-start:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-block:1px solid var(--line);
  padding-block:.7rem;
  transition:box-shadow .25s, background .25s;
}
.controls.is-stuck{
  box-shadow:0 10px 26px -20px var(--sh-4);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
}

.controls-grid{
  display:grid; gap:.5rem .7rem; align-items:center;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:
    "search theme"
    "rail   rail";
}
.controls-grid > .search   { grid-area:search; }
.controls-grid > .theme-btn{ grid-area:theme;  }
.controls-grid > .filter-rail{ grid-area:rail; }

@media (min-width: 760px){
  .controls-grid{ gap:.65rem .8rem; }
  .controls-grid > .search{ max-width:24rem; justify-self:start; }
}

.filter-rail{
  display:flex; align-items:center; gap:.5rem; min-width:0;
  overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity; scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  padding-block:.15rem;
}
.filter-rail::-webkit-scrollbar{ display:none; }
@media (min-width: 760px){
  .filter-rail{
    flex-wrap:wrap; overflow:visible; gap:.5rem .75rem;
    margin-inline:0; padding-inline:0;
  }
}

.rail-sep{
  flex:none; width:1px; align-self:stretch; margin-block:.15rem;
  background:var(--line);
}

.seg{
  display:flex; flex:none; scroll-snap-align:start;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:.2rem; gap:.15rem;
}
.seg-btn{
  flex:none; min-width:0;
  border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  font:inherit; font-weight:600; font-size:var(--fs-base);
  padding:.42rem 1.05rem; border-radius:999px;
  transition:color .18s, background .18s, box-shadow .18s;
  white-space:nowrap;
}
.seg-btn:hover{ color:var(--ink); }
.seg-btn.is-on{
  background:var(--grad); color:#fff;
  box-shadow:0 4px 14px -5px color-mix(in srgb, var(--brand) 75%, transparent);
}

.search{ position:relative; min-width:0; }
.search svg{
  position:absolute; inset-inline-start:.9rem; inset-block-start:50%;
  transform:translateY(-50%); width:1.05rem; height:1.05rem;
  fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; pointer-events:none;
}
.search input{
  width:100%; font:inherit; font-size:var(--fs-md); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.6rem 2.55rem .6rem 1rem; min-height:2.6rem;
  transition:border-color .18s, box-shadow .18s;
}
.search input::placeholder{ color:var(--ink-3); }
.search input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.search input::-webkit-search-cancel-button{ cursor:pointer; }

.theme-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font:inherit; font-size:var(--fs-base); font-weight:600; cursor:pointer;
  color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; min-height:2.6rem; min-width:2.6rem;
  transition:color .18s, border-color .18s, transform .18s;
}
.theme-btn:hover{ color:var(--ink); border-color:var(--ink-3); transform:translateY(-1px); }
.theme-btn svg{
  width:1.1rem; height:1.1rem; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.theme-btn .i-sun{ color:#f0a020; }
.theme-btn .i-moon{ display:none; }
.theme-btn[aria-pressed="true"] .i-sun{ display:none; }
.theme-btn[aria-pressed="true"] .i-moon{ display:block; }
@media (max-width: 759.98px){
  .theme-btn{ padding:.5rem .7rem; }
  .theme-btn .theme-label{ display:none; }
}

.chips{ display:flex; flex:none; gap:.45rem; }
.chip{
  flex:none; scroll-snap-align:start;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  padding:.35rem .9rem; border-radius:999px; white-space:nowrap;
  transition:color .18s, border-color .18s, background .18s;
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip.is-on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip-eco.is-on { background:var(--eco);  border-color:var(--eco);  color:#fff; }
.chip-mid.is-on { background:var(--mid);  border-color:var(--mid);  color:#fff; }
.chip-high.is-on{ background:var(--high); border-color:var(--high); color:#fff; }
@media (min-width: 760px){
  .chips{ flex:1 1 auto; flex-wrap:wrap; }
}

.result-meta{
  margin:0; padding-block-start:clamp(1rem, 2.5vw, 1.5rem);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-3);
}
.result-meta b{ color:var(--ink-2); font-weight:700; }

.section{ margin-block-end:clamp(2.25rem, 5vw, 3.25rem); scroll-margin-block-start:9rem; }
.section:last-child{ margin-block-end:0; }

.sec-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem;
  margin-block-end:1rem; padding-block-end:.8rem;
  border-block-end:1px solid var(--line);
}
.sec-head h2{
  margin:0; font-size:var(--fs-xl); font-weight:700; letter-spacing:-.01em;
  line-height:1.35;
}
.sec-head .count{
  color:var(--ink-3); font-size:var(--fs-sm); font-weight:600;
  background:var(--surface-2); border-radius:999px; padding:.1rem .65rem;
}
.tier-dot{
  width:.62rem; height:.62rem; border-radius:50%; flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}
.t-eco  .tier-dot{ background:var(--eco);  color:var(--eco);  }
.t-mid  .tier-dot{ background:var(--mid);  color:var(--mid);  }
.t-high .tier-dot{ background:var(--high); color:var(--high); }

.sec-range{
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  padding:.15rem .7rem; border-radius:999px; white-space:nowrap;
}

.baseline{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:clamp(.85rem, 2vw, 1.1rem);
  margin-block-end:1.3rem; box-shadow:var(--shadow);
}
.t-eco  .baseline{ --tier-c:var(--eco);  }
.t-mid  .baseline{ --tier-c:var(--mid);  }
.t-high .baseline{ --tier-c:var(--high); }

.bl-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem;
  margin-block-end:.8rem;
}
.bl-title{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:var(--fs-md); color:var(--ink);
}
.bl-title svg{
  width:1.1rem; height:1.1rem; flex:none; padding:.15rem;
  border-radius:50%; background:var(--tier-c); color:#fff;
  fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
.bl-range{
  font-size:var(--fs-xs); font-weight:700;
  color:var(--tier-c); background:color-mix(in srgb, var(--tier-c) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--tier-c) 28%, transparent);
  padding:.15rem .7rem; border-radius:999px; margin-inline-start:auto;
  white-space:nowrap;
}
.bl-grid{
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.bl-item{
  display:flex; align-items:center; gap:.6rem; min-width:0;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:.5rem .7rem;
}
.bl-ico{
  width:1.3rem; height:1.3rem; flex:none; color:var(--tier-c);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.bl-k{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--ink-3); line-height:1.4; }
.bl-v{ display:block; font-size:var(--fs-base); font-weight:700; color:var(--ink); line-height:1.45; }
.bl-for{ margin:.8rem 0 0; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.65; }
.bl-for span{ font-weight:700; color:var(--ink-3); font-size:var(--fs-xs); margin-inline-end:.4rem; }
@media (max-width: 560px){
  .bl-range{ margin-inline-start:0; }
}

.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
@media (min-width: 1400px){
  .grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
}

.card{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
@media (hover: hover){
  .card:hover{
    transform:translateY(-4px); box-shadow:var(--shadow-lg);
    border-color:color-mix(in srgb, var(--brand) 40%, var(--line));
  }
  .card:hover .card-media img{ transform:scale(1.05); }
}

.card-media{
  position:relative; cursor:pointer;
  display:grid; place-items:center;
  aspect-ratio:4 / 3; padding:1.15rem 1rem .6rem;
  background:
    radial-gradient(ellipse at 50% 118%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--surface);
}
.card-media img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:var(--img-sh);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.card-media img.solid,
.m-media img.solid{ background:#fff; border-radius:var(--r-sm); padding:.35rem; }

.brand-tag{
  position:absolute; z-index:2; inset-block-start:.75rem; inset-inline-end:.85rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
  color:var(--ink-3); line-height:1;
}

.badges{
  position:absolute; z-index:2;
  inset-block-start:.75rem; inset-inline-start:.75rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  max-width:calc(100% - 1.5rem);
}
.badge{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.01em;
  padding:.18rem .6rem; border-radius:999px; line-height:1.55; white-space:nowrap;
}
.b-eco { background:var(--eco-soft);  color:var(--eco); }
.b-mid { background:var(--mid-soft);  color:var(--mid); }
.b-high{ background:var(--high-soft); color:var(--high); }
.b-warn{ background:var(--warn-soft); color:var(--warn); }
.b-game{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); }

.card-body{
  display:flex; flex-direction:column; flex:1; min-width:0;
  padding:.55rem clamp(.85rem, 2.2vw, 1.15rem) clamp(.95rem, 2.2vw, 1.15rem);
}
.card h3{
  margin:0 0 .1rem; font-size:var(--fs-md); font-weight:700; line-height:1.45;
  cursor:pointer; transition:color .18s;
}
.card h3:hover{ color:var(--brand); }
.card .sub{ margin:0 0 .65rem; font-size:var(--fs-sm); color:var(--ink-3); line-height:1.5; }

.tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-block-end:.8rem; }
.tag{
  font-size:var(--fs-xs); font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line-soft);
  padding:.18rem .55rem; border-radius:var(--r-xs); line-height:1.6;
}

.price{
  margin-block:auto .75rem; font-size:var(--fs-md); font-weight:700; color:var(--ink);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem; line-height:1.5;
}
.price .plabel{ font-size:var(--fs-xs); font-weight:600; color:var(--ink-3); }
.price.is-off{ color:var(--ink-3); font-size:var(--fs-sm); font-weight:600; }

.buy{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  text-decoration:none; font-weight:700; font-size:var(--fs-base);
  background:var(--grad); color:#fff;
  padding:.65rem 1rem; min-height:2.75rem; border-radius:var(--r-sm);
  transition:filter .18s, transform .18s, box-shadow .18s;
}
.buy:hover{
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--brand) 80%, transparent);
}
.buy svg{
  width:.95rem; height:.95rem; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

.note{
  margin:.7rem 0 0; font-size:var(--fs-sm); line-height:1.65; color:var(--ink-3);
  border-inline-start:2px solid var(--line); padding-inline-start:.7rem;
}

@media (min-width: 561px) and (max-width: 900px){
  .grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
}

@media (max-width: 560px){
  .grid{ grid-template-columns:1fr; gap:.7rem; }

  .card{ flex-direction:row; align-items:stretch; border-radius:var(--r-md); }
  .card-media{
    flex:0 0 clamp(104px, 32%, 140px);
    aspect-ratio:auto; padding:.7rem .6rem;
  }
  .card-media img{ max-height:8.5rem; }
  .brand-tag{ display:none; }

  .card-body{ padding:.7rem .85rem .75rem; line-height:1.6; }
  .badges{
    position:static; flex-direction:row; flex-wrap:wrap; gap:.25rem;
    max-width:none; margin-block-end:.35rem;
  }
  .card h3{ font-size:var(--fs-md); line-height:1.4; }
  .card .sub{ margin-block-end:.5rem; }
  .tags{ margin-block-end:.55rem; }
  .price{ margin-block:auto .55rem; }
  .buy{ padding-block:.5rem; min-height:2.55rem; }
}

@media (max-width: 359px){
  .card-media{ flex-basis:92px; }
  .tag:nth-child(n+3){ display:none; }
}

.empty{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  text-align:center; color:var(--ink-3); padding-block:clamp(2.5rem, 8vw, 4.5rem);
  font-size:var(--fs-lg);
}
.empty[hidden]{ display:none; }
.empty svg{
  width:2.75rem; height:2.75rem; opacity:.5;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(1rem, 5vh, 3rem) var(--gutter);
  overflow-y:auto; overscroll-behavior:contain;
}
.modal[hidden]{ display:none; }

.modal-back{
  position:fixed; inset:0;
  background:rgba(8,10,20,.62);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.modal-box{
  position:relative; width:min(560px, 100%); margin-block:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); animation:pop .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes pop{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
@keyframes sheet{ from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none} }

.modal-x{
  position:absolute; inset-block-start:.7rem; inset-inline-end:.75rem; z-index:2;
  display:grid; place-items:center;
  width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); font-size:1.4rem; line-height:1;
  cursor:pointer; transition:background .18s, color .18s;
}
.modal-x:hover{ background:var(--surface-2); color:var(--ink); }

.modal-body{ padding:clamp(1.1rem, 3.5vw, 1.6rem); }
.m-media{
  display:grid; place-items:center; padding:1rem 0 1.2rem;
  background:radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%);
  border-radius:var(--r-md); margin-block-end:1.1rem;
}
.m-media img{
  width:100%; max-width:230px; height:auto; max-height:min(38vh, 210px);
  object-fit:contain; filter:var(--img-sh);
}
.modal h2{ margin:0 0 .2rem; font-size:var(--fs-xl); font-weight:700; line-height:1.4; }
.modal .m-sub{ margin:0 0 1rem; color:var(--ink-3); font-size:var(--fs-sm); }

.spec-list{ list-style:none; margin:0 0 1.1rem; padding:0; border-block-start:1px solid var(--line-soft); }
.spec-list li{
  display:flex; gap:1rem; justify-content:space-between; align-items:baseline;
  padding:.6rem .1rem; border-block-end:1px solid var(--line-soft); font-size:var(--fs-md);
}
.spec-list .k{ color:var(--ink-3); font-weight:600; flex:none; }
.spec-list .v{ text-align:end; font-weight:600; }
@media (max-width: 420px){
  .spec-list li{ flex-direction:column; gap:.1rem; }
  .spec-list .v{ text-align:start; }
}

@media (max-width: 560px){
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{
    width:100%; margin-block:auto 0;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-inline:0; border-block-end:0;
    animation:sheet .26s cubic-bezier(.2,.7,.3,1);
    padding-block-end:env(safe-area-inset-bottom);
  }
  .modal-body{ padding-block-start:1.9rem; }
  .modal-box::before{
    content:""; position:absolute; inset-block-start:.6rem; inset-inline:0;
    margin-inline:auto; width:2.5rem; height:.25rem; border-radius:999px;
    background:var(--line);
  }
}

.footer{
  position:relative; z-index:1;
  background:var(--bg-2); border-block-start:1px solid var(--line);
  padding-block:clamp(2.25rem, 5vw, 3rem);
}
.foot-grid{
  display:grid; gap:2rem clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  align-items:start;
}
.footer h3{
  margin:0 0 .6rem; font-size:var(--fs-md); font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}
.footer h3::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%; flex:none;
  background:var(--grad);
}
.footer p{ margin:0 0 .8rem; color:var(--ink-2); font-size:var(--fs-base); line-height:1.75; }
.footer .foot-cap{
  margin:.9rem 0 .35rem; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.02em; color:var(--ink-3);
}

.tg{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-weight:700; font-size:var(--fs-base); color:#fff; background:#2aabee;
  padding:.5rem 1rem; min-height:2.5rem; border-radius:var(--r-xs); transition:filter .18s;
}
.tg:hover{ filter:brightness(1.08); }
.tg svg{ width:1.05rem; height:1.05rem; fill:currentColor; }

.people{ list-style:none; margin:0 0 .55rem; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.people a{
  text-decoration:none; color:var(--ink-2); font-size:var(--fs-base); font-weight:600;
  background:var(--surface-2); border:1px solid var(--line);
  padding:.3rem .75rem; border-radius:var(--r-xs);
  transition:color .18s, border-color .18s;
}
.people a:hover{ color:var(--brand); border-color:var(--brand); }
.people:last-child{ margin-block-end:0; }

.to-top{
  position:fixed; z-index:40;
  inset-block-end:calc(1rem + env(safe-area-inset-bottom));
  inset-inline-end:1rem;
  display:grid; place-items:center;
  width:2.9rem; height:2.9rem; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  box-shadow:var(--shadow-md); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s, transform .25s, visibility .25s, color .18s;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ color:var(--brand); }
.to-top svg{
  width:1.15rem; height:1.15rem;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

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

@media print{
  .controls, .to-top, .bg-deco, .hero-art, .modal{ display:none !important; }
  .card{ break-inside:avoid; box-shadow:none; }
  body{ background:#fff; }
}