:root{
  color-scheme:dark;
  --bg:#0a0a0a;
  --bg-soft:#101010;
  --surface:rgba(20,20,20,.85);
  --surface-strong:rgba(13,13,13,.95);
  --surface-soft:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.2);
  --text:#f0f0f0;
  --muted:#9a9a9a;
  --accent:#ffffff;
  --accent-strong:#ffffff;
  --accent-glow:rgba(255,255,255,.18);
  --accent-cold:#c9c9c9;
  --accent-warm:#d8d8d8;
  --ink:#0a0a0a;
  --radius-xl:16px;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.5);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.25), 0 8px 28px rgba(0,0,0,.5);
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease-smooth:cubic-bezier(0.2, 0.8, 0.2, 1);
  --reveal-delay:0ms;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f6f8;
  --bg-soft:#eceef3;
  --surface:rgba(255,255,255,.88);
  --surface-strong:rgba(255,255,255,.97);
  --surface-soft:rgba(15,23,42,.05);
  --line:rgba(15,23,42,.1);
  --line-strong:rgba(15,23,42,.18);
  --text:#16181d;
  --muted:#5b6472;
  --accent:#0f172a;
  --accent-strong:#000000;
  --accent-glow:rgba(15,23,42,.14);
  --accent-cold:#475569;
  --accent-warm:#64748b;
  --ink:#ffffff;
  --shadow:0 1px 2px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 2px 4px rgba(15,23,42,.08), 0 16px 40px rgba(15,23,42,.12);
  --shadow-glow:0 0 0 1px rgba(15,23,42,.12), 0 8px 28px rgba(15,23,42,.1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  background:
    linear-gradient(180deg, #0d0d0d 0%, var(--bg) 46%, #080808 100%);
  -webkit-font-smoothing:antialiased;
}
[data-theme="light"] body{
  background:
    linear-gradient(180deg, #ffffff 0%, var(--bg) 46%, #eef0f4 100%);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;outline:none;}
.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;
}
.shell{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}
.home{
  padding:36px 0 80px;
}
.section{
  margin-top:56px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.section-head h2,
.catalog-copy h2,
.hero-copy h1{
  margin:0;
  font-family:var(--font-display);
  letter-spacing:-.03em;
  font-weight:700;
}
.section-head h2{
  font-size:clamp(24px,2.8vw,32px);
}
.muted,.sub,.copy,.label,.feature-card p,.mini p,.foot p,.catalog-copy p,.card p,.journey-empty,.service-card p,.hero-summary p{
  color:var(--muted);
  line-height:1.7;
}
.hero-grid,
.hero-side,
.hero-summary-grid,
.journey-grid,
.feature-grid,
.service-grid,
.reason-grid,
.footer-grid,
.games,
.stats-grid{
  display:grid;
  gap:18px;
}
.hero-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  align-items:stretch;
}
.hero-side{
  gap:14px;
  align-content:start;
}
.journey-grid,
.feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.service-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.reason-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.footer-grid{
  grid-template-columns:1.2fr repeat(3,minmax(0,1fr));
}
.games{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.stats-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.hero-card,
.side-card,
.catalog,
.feature-card,
.mini,
.card,
.foot,
.service-card,
.reason-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  transition:transform 0.24s var(--ease-smooth), box-shadow 0.24s var(--ease-smooth), border-color 0.24s var(--ease-smooth);
}
.hero-card,
.side-card,
.catalog,
.feature-card,
.mini,
.foot,
.service-card,
.reason-card{
  padding:28px;
}
/* Hero card */
.hero-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(17,21,30,.92), rgba(13,17,25,.96));
}
[data-theme="light"] .hero-card{
  background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(246,248,251,.98));
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:30px;
  height:100%;
}
.hero-copy{
  display:grid;
  gap:16px;
}
.eyebrow,.pill,.meta,.badge,.chip,.signal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.eyebrow{
  width:max-content;
  padding:6px 12px;
  color:var(--accent-strong);
  border:1px solid var(--accent-glow);
  background:var(--accent-glow);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
}
.title{
  max-width:14ch;
  font-size:clamp(36px,4.6vw,54px);
  line-height:1.06;
}
.sub{
  max-width:58ch;
  font-size:16px;
}
.actions,.pills,.hero-links,.meta-row,.filters,.results,.catalog-head,.footer-base,.feature-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
/* Touch-friendly tap targets */
@media (pointer: coarse){
  .btn,
  .chip,
  input,
  select,
  #scroll-top{
    min-height:46px;
  }
  .chip{
    padding:0 14px;
  }
  a.card{
    min-height:44px;
  }
}

.btn,.chip,input,select,#scroll-top{
  transition:transform .2s var(--ease-smooth), border-color .2s var(--ease-smooth), background-color .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.btn,#scroll-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  gap:8px;
}
.btn.primary{
  border-color:transparent;
  color:#0a0a0a;
  background:linear-gradient(135deg, #ffffff, #c9c9c9);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
}
[data-theme="light"] .btn.primary{
  color:#0a0a0a;
}
.btn.secondary{
  background:var(--surface-soft);
  border:1px solid var(--line);
}
.btn:hover,
.btn:focus-visible,
#scroll-top:hover,
#scroll-top:focus-visible{
  transform:translateY(-2px);
  border-color:var(--accent-glow);
  outline:none;
}
.btn.primary:hover,
.btn.primary:focus-visible{
  box-shadow:0 2px 4px rgba(0,0,0,.3), 0 10px 24px var(--accent-glow);
}
.btn:active{
  transform:translateY(0) scale(.99);
}
/* Card / interactive element hover */
.chip:hover,
.chip:focus-visible,
input:focus-visible,
select:focus-visible{
  transform:translateY(-1px);
  border-color:var(--accent-glow);
  outline:none;
}
.card:hover,
.card:focus-visible,
.feature-card:hover,
.mini:hover,
.service-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-glow);
  outline:none;
  box-shadow:var(--shadow-lg);
}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.btn:focus-visible,
.chip:focus-visible,
input:focus-visible,
select:focus-visible,
.card:focus-visible,
.feature-card:focus-visible,
.mini:focus-visible,
.service-card:focus-visible,
#scroll-top:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.pills{
  margin-top:6px;
}
.pill{
  min-height:34px;
  padding:0 13px;
  color:var(--muted);
  background:var(--surface-soft);
  border:1px solid var(--line);
  font-weight:500;
}
.hero-summary-grid{
  grid-template-columns:1.2fr .8fr;
}
.hero-summary,
.hero-live{
  padding:20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.hero-summary{
  display:grid;
  gap:16px;
}
.hero-window{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface-strong);
  overflow:hidden;
}
.window-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.window-dots{
  display:flex;
  gap:6px;
}
.window-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
}
.window-dots span:nth-child(1){background:#e05d5d}
.window-dots span:nth-child(2){background:#e0b45d}
.window-dots span:nth-child(3){background:#5de07a}
.window-label{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.window-body{
  display:grid;
  gap:12px;
  padding:16px;
}
.showcase-main{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.showcase-mark{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  font-size:18px;
  font-weight:800;
  color:#0a0a0a;
  background:linear-gradient(135deg, #ffffff, #c9c9c9);
}
.showcase-main strong,
.showcase-list strong,
.feature-card strong,
.mini strong,
.service-card strong,
.reason-card strong,
.foot strong{
  display:block;
  margin-bottom:6px;
  font-size:17px;
  letter-spacing:-.02em;
}
.showcase-main p,
.showcase-item span{
  color:var(--muted);
  font-size:13px;
  margin:0;
}
.showcase-list{
  display:grid;
  gap:10px;
}
.showcase-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.signal,.badge,.meta{
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  background:var(--surface-soft);
  border-radius:999px;
  font-weight:600;
  font-size:11px;
}
.signal{
  color:var(--text);
}
.badge{
  color:var(--accent-strong);
  border-color:var(--accent-glow);
  background:var(--accent-glow);
}
.hero-live{
  display:grid;
  gap:14px;
  align-content:start;
}
.stats-grid .stat{
  padding:16px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.stat strong{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,32px);
  letter-spacing:-.04em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.stat span{
  color:var(--muted);
  font-size:12px;
}
.mini{
  display:grid;
  gap:12px;
}
.mini-game-list{
  display:grid;
  gap:10px;
}
.mini-game-card{
  display:grid;
  gap:3px;
  padding:14px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-soft);
  transition:border-color .2s var(--ease-smooth), background-color .2s var(--ease-smooth);
}
.mini-game-card:hover{
  border-color:var(--accent-glow);
  background:var(--surface-soft);
}
.mini-game-card strong{
  margin:0;
  font-size:14px;
}
.mini-game-card span{
  font-size:12px;
  color:var(--muted);
}
.journey-empty{
  padding:14px;
  border-radius:var(--radius-md);
  border:1px dashed var(--line-strong);
  background:var(--surface-soft);
  font-size:13px;
}
.feature-card{
  position:relative;
  overflow:hidden;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}
.hero-side .feature-card{
  min-height:auto;
  padding:20px;
  border-radius:var(--radius-lg);
  gap:12px;
}
.hero-side .feature-card strong{
  font-size:16px;
  margin-bottom:5px;
}
.hero-side .feature-card p{
  font-size:13px;
  line-height:1.6;
}
.hero-side .feature-actions{
  gap:8px;
}
.hero-side .feature-actions .btn{
  min-height:38px;
  padding:0 14px;
  font-size:13px;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--feature-bg);
  opacity:.5;
  pointer-events:none;
}
.feature-card > *{
  position:relative;
  z-index:1;
}
/* Catalog */
.catalog{
  overflow:hidden;
  background:var(--surface-strong);
}
.catalog-head{
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.catalog-copy{
  max-width:740px;
}
.catalog-copy h2{
  font-size:clamp(24px,2.8vw,32px);
  margin-bottom:8px;
}
.loading{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-soft);
  font-size:13px;
  color:var(--muted);
}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}
.controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:14px;
  margin-top:24px;
}
.field{
  display:grid;
  gap:7px;
}
.field label{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-soft);
  position:relative;
}
.search:has(input:focus){
  border-color:var(--accent-glow);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.search span{
  color:var(--muted);
  font-size:13px;
}
input,select{
  width:100%;
  min-height:50px;
  padding:0 15px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--text);
  font-size:14px;
}
input::placeholder{
  color:var(--muted);
  opacity:.7;
}
.search input{
  min-height:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.filters,.results,.footer-base{
  justify-content:space-between;
}
.filters{
  margin-top:16px;
}
.chip{
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.chip:hover{
  color:var(--text);
  border-color:var(--line-strong);
}
.chip.active{
  color:var(--accent-strong);
  border-color:var(--accent-glow);
  background:var(--accent-glow);
}
.results{
  margin-top:14px;
  font-size:13px;
  color:var(--muted);
}
.results span:first-child{
  color:var(--text);
  font-weight:600;
}
.card{
  overflow:hidden;
  display:grid;
  background:var(--surface-strong);
}
[data-theme="light"] .card{
  background:var(--surface-strong);
}
.thumb{
  position:relative;
  min-height:160px;
  padding:16px;
  border-bottom:1px solid var(--line);
  background:var(--thumb);
}
.thumb::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
}
.stage,.thumb-tags{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.stage{
  align-items:flex-end;
  min-height:120px;
}
.mark{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:var(--radius-md);
  background:rgba(8,11,17,.35);
  border:1px solid rgba(255,255,255,.18);
  font-size:18px;
  font-weight:800;
  color:#ffffff;
}
.preview{
  display:grid;
  gap:8px;
  width:min(180px,58%);
}
.bar,.cube,.ring{
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.bar{height:9px}
.bar.alt{width:72%}
.row{
  display:flex;
  gap:8px;
}
.cube,.ring{
  width:26px;
  height:26px;
}
.ring{
  border-radius:50%;
  border:4px solid rgba(255,255,255,.26);
  background:transparent;
}
.thumb-tags{
  margin-top:10px;
}
.thumb-tags span{
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(8,11,17,.35);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  font-size:11px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
}
.body{
  display:grid;
  gap:12px;
  padding:20px;
}
.head,.end{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.head h3{
  margin:0;
  font-size:19px;
  letter-spacing:-.02em;
}
.slug{
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
}
.card p{
  font-size:13px;
  margin:0;
}
.end .meta{
  border:none;
  background:transparent;
  padding:0;
}
/* Skeleton loading */
.skeleton{
  min-height:300px;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.04) 20%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.04) 80%,
    rgba(255,255,255,.02) 100%
  );
  background-size:300% 100%;
  animation: skeleton-sweep 1.8s var(--ease-smooth) infinite;
}
@keyframes skeleton-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.empty{
  display:none;
  padding:24px;
  border-radius:var(--radius-xl);
  border:1px dashed var(--line-strong);
  background:var(--surface-soft);
  color:var(--muted);
  font-size:14px;
}
.empty.show{
  display:block;
}
.service-card,
.reason-card{
  display:grid;
  gap:10px;
  min-height:100%;
}
.service-card p,
.reason-card p{
  font-size:13px;
  margin:0;
}
.service-card .btn{
  align-self:flex-start;
  margin-top:6px;
}
/* Reveal animations */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .45s var(--ease-smooth), transform .45s var(--ease-smooth);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.active{
  opacity:1;
  transform:translateY(0);
}
.reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal:nth-child(2) { --reveal-delay: 40ms; }
.reveal:nth-child(3) { --reveal-delay: 80ms; }
.reveal:nth-child(4) { --reveal-delay: 120ms; }
.reveal:nth-child(5) { --reveal-delay: 160ms; }
.reveal:nth-child(6) { --reveal-delay: 200ms; }
.footer-grid .foot{
  display:grid;
  gap:10px;
  align-content:start;
}
.foot p{
  font-size:13px;
  margin:0;
}
.foot .hero-links{
  display:grid;
  gap:6px;
  justify-items:start;
}
.foot .hero-links a{
  font-size:13px;
  color:var(--muted);
  transition:color .2s var(--ease-smooth);
}
.foot .hero-links a:hover{
  color:var(--accent-strong);
}
.footer-base{
  margin-top:20px;
  padding:18px 4px 0;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}
#scroll-top{
  min-height:36px;
  padding:0 14px;
  font-size:13px;
}
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.22); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(13,20,32,.18); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(13,20,32,.28); }

.section-divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:48px 0;
}

.loading-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  animation: dot-pulse 1.4s ease infinite;
}
.loading-dot:nth-child(2) { animation-delay:0.2s; }
.loading-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { opacity:.35; transform:scale(.85); }
  40% { opacity:1; transform:scale(1.1); }
}

@media (max-width: 1200px){
  .hero-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 1080px){
  .journey-grid,
  .feature-grid,
  .reason-grid,
  .games{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-summary-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns:1fr;
  }
  .hero-side{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .hero-side .feature-card{
    flex:1 1 calc(50% - 7px);
    min-width:280px;
  }
}
@media (max-width: 760px){
  .home{
    padding:24px 0 64px;
  }
  .section{
    margin-top:40px;
  }
  .hero-card,
  .side-card,
  .catalog,
  .feature-card,
  .mini,
  .foot,
  .service-card,
  .reason-card{
    padding:20px;
  }
  .title{
    font-size:clamp(30px,9vw,42px);
  }
  .journey-grid,
  .feature-grid,
  .service-grid,
  .reason-grid,
  .footer-grid,
  .games,
  .stats-grid,
  .controls{
    grid-template-columns:1fr;
  }
  .hero-side .feature-card{
    flex:1 1 100%;
    min-width:0;
  }
  .results,
  .filters,
  .footer-base,
  .catalog-head,
  .section-head,
  .head,
  .end,
  .showcase-item,
  .window-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .showcase-main{
    grid-template-columns:1fr;
  }
}
@media (max-width: 600px){
  .shell{
    width:calc(100% - 24px);
  }
  .hero-card,
  .feature-card,
  .service-card,
  .mini,
  .foot,
  .reason-card{
    padding:18px;
    border-radius:var(--radius-lg);
  }
  .title{
    font-size:clamp(28px,8vw,36px);
    line-height:1.08;
  }
  .sub{
    font-size:14px;
  }
  .actions{
    flex-direction:column;
    width:100%;
  }
  .actions .btn{
    width:100%;
    justify-content:center;
  }
  .pills{
    flex-direction:column;
    align-items:stretch;
  }
  .pill{
    width:100%;
    text-align:center;
  }
  .hero-summary,
  .hero-live{
    padding:14px;
    border-radius:var(--radius-md);
  }
  .showcase-mark{
    width:56px;
    height:56px;
    font-size:16px;
  }
  .showcase-item{
    padding:12px 13px;
  }
  .stat strong{
    font-size:24px;
  }
  .search{
    min-height:48px;
  }
  input,select{
    min-height:48px;
  }
  .chip{
    min-height:36px;
    font-size:12px;
  }
  .card{
    border-radius:var(--radius-lg);
  }
  .thumb{
    min-height:140px;
    padding:14px;
  }
  .mark{
    width:48px;
    height:48px;
    font-size:16px;
  }
  .stage{
    min-height:100px;
  }
  .preview{
    display:none;
  }
  .body{
    padding:16px;
  }
  .head h3{
    font-size:17px;
  }
  .end .meta{
    padding:0;
  }
  .meta-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .service-card strong,
  .reason-card strong{
    font-size:16px;
  }
  .footer-grid{
    gap:22px;
  }
  .footer-base{
    text-align:center;
  }
}
@media (max-width: 400px){
  .eyebrow{
    padding:5px 9px;
    font-size:10px;
  }
  .btn, #scroll-top{
    min-height:42px;
    padding:0 15px;
    font-size:13px;
  }
  .hero-card,
  .feature-card,
  .service-card,
  .mini,
  .foot,
  .reason-card{
    padding:16px;
  }
  .showcase-main{
    padding:13px;
  }
  .thumb{
    min-height:120px;
  }
  .mark{
    width:44px;
    height:44px;
    font-size:14px;
  }
  .head h3{
    font-size:16px;
  }
  .body p{
    font-size:13px;
    line-height:1.55;
  }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .reveal.active{
    opacity:1;
    transform:none;
  }
}