/* ==========================================================================
   Sweepstakes.io — landing page styles
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:"Plus Jakarta Sans"; font-weight:200; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-ExtraLight.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:300; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-Light.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-Regular.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-Medium.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-Bold.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:800; font-style:normal; font-display:swap; src:url("fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"); }
@font-face { font-family:"Permanent Marker"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/PermanentMarker-Regular.woff2") format("woff2"); }

/* ---------- Design tokens ---------- */
:root {
  --bg:              #0f1117;
  --bg-grad:         #0a0c16;
  --surface:         #151827;
  --surface-2:       #1a1e2e;
  --border:          #2a2f45;
  --border-soft:     #232840;

  --green:           #cbfc40;
  --green-strong:    #b6ec20;
  --green-deep:      #84cc16;
  --violet:          #7c4dff;
  --violet-soft:     #a78bfa;

  --text:            #f0f4ff;
  --text-body:       #c9cfe4;
  --text-muted:      #6b7a96;

  --radius:          18px;
  --radius-sm:       12px;
  --radius-pill:     999px;

  --wrap:            1140px;
  --wrap-narrow:     880px;

  --shadow:          0 24px 60px -30px rgba(0,0,0,.8);

  --font:            "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--text-body);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 15% -6%, rgba(203,252,64,.08), transparent 60%),
    radial-gradient(1000px 560px at 92% 4%, rgba(124,77,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-grad), var(--bg) 620px);
  background-repeat:no-repeat;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul, ol { margin:0; padding:0; }
li { list-style:none; }
h1,h2,h3 { color:var(--text); line-height:1.15; margin:0; letter-spacing:-.01em; }
p { margin:0; }
svg { display:block; }

/* ---------- Layout helpers ---------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--narrow { max-width:var(--wrap-narrow); }
.section { padding-block: 48px; }
.section--center { text-align:center; }
.accent { color:var(--green); }

/* ---------- Section headers ---------- */
.section__head { margin-bottom:36px; max-width:820px; }
.section__head--centered { margin-inline:auto; text-align:center; }
.section__title { font-weight:800; font-size:clamp(28px, 3.4vw, 44px); margin-bottom:14px; }
.section__lead { color:var(--text-body); font-size:clamp(15px, 1.15vw, 17px); }
.section__head--split { display:flex; gap:32px; align-items:flex-start; justify-content:space-between; max-width:none; }
.section__head--split .section__lead { max-width:820px; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow--green { color:var(--green); }
.eyebrow--green .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.eyebrow--violet {
  color:var(--violet-soft);
  border:1px solid rgba(124,77,255,.4);
  padding:7px 14px; border-radius:var(--radius-pill);
  background:rgba(124,77,255,.10);
}
.eyebrow .ico { width:14px; height:14px; }
.eyebrow--green .ico { fill:var(--green); }
.eyebrow--violet .ico { fill:none; stroke:var(--violet-soft); stroke-width:2; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
  border:0; border-radius:var(--radius-pill); padding:13px 22px;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn .arw { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn--play {
  color:#0c1400;
  background:linear-gradient(180deg, var(--green), var(--green-deep));
  box-shadow:0 10px 24px -10px rgba(203,252,64,.6);
}
.btn--play:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn--claim {
  width:100%;
  color:#fff;
  background:linear-gradient(180deg, var(--violet-soft), var(--violet));
  box-shadow:0 12px 26px -12px rgba(124,77,255,.7);
}
.btn--claim .star { width:15px; height:15px; fill:#fff; }
.btn--claim:hover { transform:translateY(-1px); filter:brightness(1.05); }

.terms { color:var(--text-muted); font-size:12px; }
.terms--center { display:block; text-align:center; margin-top:12px; }

/* ---------- Star / rating ---------- */
.rating { display:inline-flex; align-items:center; gap:5px; color:var(--text); font-weight:700; font-size:14px; }
.rating .star { width:14px; height:14px; fill:var(--green); }
.rating .of { color:var(--text-muted); font-weight:500; }

/* ---------- Logo tile ---------- */
.logo-tile {
  flex:0 0 auto;
  width:88px; height:88px; border-radius:16px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#2a2f45,#151827);
  border:1px solid var(--border);
}
.logo-tile img { width:100%; height:100%; object-fit:cover; }
.logo-tile--sm { width:48px; height:48px; border-radius:12px; }

/* ---------- HERO ---------- */
.hero { padding-block:clamp(56px, 7vw, 96px) 40px; }
.hero__title { font-weight:800; font-size:clamp(34px, 5.2vw, 60px); line-height:1.06; margin-bottom:22px; }
.hero__lead { color:var(--text-body); font-size:clamp(15px, 1.3vw, 18px); max-width:960px; }

/* ==========================================================================
   TOP CASINOS
   ========================================================================== */
.casino-list { display:flex; flex-direction:column; gap:16px; }
.casino-card {
  display:grid;
  grid-template-columns: 1.4fr 1.3fr 1fr auto;
  align-items:center; gap:24px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 24px;
  transition:border-color .2s ease, transform .2s ease;
}
.casino-card:hover { border-color:rgba(203,252,64,.35); transform:translateY(-2px); }
.casino-card__brand { display:flex; align-items:center; gap:16px; }
.casino-card__id { display:flex; flex-direction:column; gap:5px; }
.rank {
  display:inline-grid; place-items:center; width:22px; height:22px;
  font-size:12px; font-weight:700; color:var(--text-muted);
  border:1px solid var(--border); border-radius:6px;
}
.casino-card__name { font-weight:700; color:var(--text); font-size:18px; }

.casino-card__bonus {
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:12px 14px;
}
.bonus-label { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.bonus-label .ico { width:12px; height:12px; fill:var(--green); }
.casino-card__bonus p { color:var(--text); font-weight:600; font-size:14px; line-height:1.4; }

.casino-card__meta { display:flex; flex-direction:column; gap:6px; margin:0; }
.casino-card__meta div { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.casino-card__meta dt { color:var(--text-muted); margin:0; }
.casino-card__meta dd { color:var(--text); font-weight:600; margin:0; }

.casino-card__cta { display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ==========================================================================
   NEW CASINOS
   ========================================================================== */
.new-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.new-card {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 22px 18px;
  transition:border-color .2s ease, transform .2s ease;
}
.new-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--stripe, var(--green)); }
.new-card:hover { transform:translateY(-3px); border-color:var(--border); }
.new-card__top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.new-card__id { display:flex; flex-direction:column; gap:4px; margin-right:auto; }
.new-card__name { font-weight:700; color:var(--text); font-size:16px; }
.pill { font-size:11px; font-weight:700; letter-spacing:.06em; padding:5px 10px; border-radius:var(--radius-pill); }
.pill--new { color:var(--green); background:rgba(203,252,64,.12); border:1px solid rgba(203,252,64,.4); }
.new-card__bonus {
  color:var(--text-body); font-size:14px; line-height:1.5;
  background:rgba(255,255,255,.03); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:14px; min-height:96px;
}
.new-card__foot { margin-top:16px; }
.added { color:var(--text-muted); font-size:12px; }

/* ==========================================================================
   STATES
   ========================================================================== */
.stat {
  flex:0 0 auto; text-align:center;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px 22px; background:rgba(255,255,255,.02);
}
.stat__num { display:block; color:var(--green); font-weight:800; font-size:26px; }
.stat__label { color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }

.states-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.states-grid a {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 18px; font-weight:600; color:var(--text); font-size:15px;
  transition:border-color .2s ease, background .2s ease;
}
.states-grid a:hover { border-color:rgba(203,252,64,.4); }
.states-grid .arw { width:16px; height:16px; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   NO DEPOSIT / BEST FREE SC
   ========================================================================== */
.section--violet { position:relative; }
.section--violet::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:700px; height:340px; max-width:90%;
  background:radial-gradient(closest-side, rgba(124,77,255,.18), transparent);
  pointer-events:none;
}
.nd-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; position:relative; }
.nd-card {
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(124,77,255,.06), var(--surface));
  border:1px solid rgba(124,77,255,.25); border-radius:var(--radius);
  padding:20px;
}
.nd-card__top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.nd-card__id { display:flex; flex-direction:column; gap:4px; margin-right:auto; }
.nd-card__name { font-weight:700; color:var(--text); font-size:16px; }
.sc-badge {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:58px; padding:8px 6px; border-radius:12px;
  background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.4);
  color:var(--violet-soft); text-align:center; line-height:1;
}
.sc-badge b { font-size:18px; font-weight:800; color:#fff; }
.sc-badge span { font-size:9px; letter-spacing:.06em; margin-top:3px; }
.nd-card__desc {
  color:var(--text-body); font-size:14px; line-height:1.5; margin-bottom:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:14px; flex:1;
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.blog-card {
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.blog-card:hover { transform:translateY(-3px); border-color:rgba(203,252,64,.3); }
.blog-card__media { display:block; height:170px; background:var(--g, #333); position:relative; }
.blog-card__media .tag {
  position:absolute; top:14px; left:14px;
  background:rgba(15,17,23,.72); color:#fff; backdrop-filter:blur(4px);
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--radius-pill);
}
.blog-card__body { padding:20px 20px 22px; }
.blog-card__body h3 { font-size:18px; font-weight:700; line-height:1.3; margin-bottom:10px; }
.blog-card__body h3 a:hover { color:var(--green); }
.blog-card__body p { color:var(--text-body); font-size:14px; margin-bottom:18px; }
.byline { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:13px; }
.sep { opacity:.6; }
.avatar {
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  color:#0c1400; font-size:10px; font-weight:800;
}

/* ==========================================================================
   HOW WE WORK
   ========================================================================== */
.work-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; text-align:left; }
.work-card {
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); padding:22px;
}
.work-card h3 { font-size:16px; font-weight:700; margin-bottom:10px; }
.work-card p { color:var(--text-body); font-size:14px; }

/* ==========================================================================
   ACCORDION (framework + faq)
   ========================================================================== */
.accordion { display:flex; flex-direction:column; gap:12px; text-align:left; }
.accordion__item {
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  transition:border-color .2s ease;
}
.accordion__item[aria-open="true"] { border-color:rgba(203,252,64,.5); }
.accordion__trigger {
  display:flex; align-items:center; gap:16px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:18px 20px; color:var(--text); font-family:inherit; font-weight:600; font-size:16px;
}
.accordion__num {
  flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:rgba(203,252,64,.12); color:var(--green); font-size:14px; font-weight:700;
}
.accordion__label { flex:1; }
.accordion__trigger .chev { width:20px; height:20px; fill:none; stroke:var(--text-muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.accordion__trigger[aria-expanded="true"] .chev { transform:rotate(180deg); stroke:var(--green); }
.accordion__panel { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.accordion__item[aria-open="true"] .accordion__panel { max-height:500px; }
.accordion__panel p { color:var(--text-body); font-size:15px; padding:0 20px 20px; }
.faq .accordion__trigger { font-weight:700; }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; text-align:left; }
.team-card {
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); padding:22px;
}
.team-card__head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.avatar--lg { width:56px; height:56px; font-size:16px; border-radius:50%; }
.team-card__head h3 { font-size:17px; font-weight:700; }
.role { color:var(--green); font-size:13px; font-weight:600; }
.team-card > p { color:var(--text-body); font-size:14px; flex:1; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.chips li { font-size:12px; color:var(--text-body); border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 12px; background:rgba(255,255,255,.02); }
.team-card__foot { display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--border-soft); }
.team-card__foot a { display:grid; place-items:center; }
.team-card__foot > a:not(.profile) { width:34px; height:34px; border:1px solid var(--border); border-radius:9px; }
.team-card__foot > a:not(.profile):hover { border-color:var(--green); }
.team-card__foot svg { width:16px; height:16px; fill:none; stroke:var(--text-muted); stroke-width:1.8; }
.team-card__foot a:hover svg { stroke:var(--green); }
.profile { margin-left:auto; display:inline-flex !important; align-items:center; gap:6px; color:var(--green); font-weight:700; font-size:14px; }
.profile .arw { width:15px; height:15px; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   SEO ARTICLE (centered, single column)
   ========================================================================== */
.article { max-width:760px; margin-inline:auto; }
.article h2 { font-size:clamp(24px, 2.6vw, 32px); font-weight:800; margin:48px 0 16px; }
.article h2:first-child { margin-top:0; }
.article h3 { font-size:20px; font-weight:700; margin:28px 0 12px; }
.article p { color:var(--text-body); margin-bottom:16px; }
.article ul, .article ol { margin:0 0 20px; padding-left:22px; }
.article ul li { list-style:disc; margin-bottom:8px; color:var(--text-body); }
.article ol li { list-style:decimal; margin-bottom:8px; color:var(--text-body); }
.article strong { color:var(--text); }

.tip {
  margin:24px 0; padding:18px 22px;
  border-left:3px solid var(--green);
  background:rgba(203,252,64,.06); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.tip p { color:var(--text); margin-bottom:8px; }
.tip cite { color:var(--text-muted); font-style:normal; font-size:13px; font-weight:600; }

.ticks { padding-left:0 !important; }
.ticks li { list-style:none !important; position:relative; padding-left:30px; }
.ticks li::before {
  content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%;
  background:rgba(203,252,64,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbfc40' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.compare, .proscons, .features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.features { grid-template-columns:1fr 1fr; }
.compare__col, .proscons__col, .feature {
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); padding:22px;
}
.compare__col h3, .proscons__col h3, .feature h3 { font-size:17px; margin-bottom:14px; }
.compare__col ul, .proscons__col ul { padding-left:20px; margin:0; }
.compare__col li, .proscons__col li { margin-bottom:8px; }
.compare__col--accent { border-color:rgba(203,252,64,.4); background:linear-gradient(180deg, rgba(203,252,64,.06), var(--surface)); }
.proscons__col--pro { border-color:rgba(203,252,64,.35); }
.proscons__col--con { border-color:rgba(124,77,255,.35); }
.feature p { margin:0; font-size:14px; }

.steps, .tips { padding-left:0 !important; counter-reset:step; }
.steps li, .tips li { list-style:none !important; position:relative; padding-left:44px; margin-bottom:16px; min-height:32px; }
.steps li::before, .tips li::before {
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:rgba(203,252,64,.12); color:var(--green); font-weight:800; font-size:14px;
}

.takeaways { margin:28px 0; padding:24px; border:1px solid rgba(203,252,64,.3); border-radius:var(--radius); background:rgba(203,252,64,.04); }
.takeaways h3 { margin-bottom:14px; font-size:18px; }
.takeaways ul { margin:0; }

.table-scroll { overflow-x:auto; margin:20px 0 24px; border:1px solid var(--border); border-radius:var(--radius-sm); }
table { width:100%; border-collapse:collapse; min-width:560px; }
th, td { text-align:left; padding:14px 16px; font-size:14px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
thead th { background:rgba(255,255,255,.03); color:var(--text); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
tbody td { color:var(--text-body); }
tbody td:last-child { color:var(--text); font-weight:600; }
tbody tr:last-child td { border-bottom:0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px) {
  .casino-card { grid-template-columns:1.3fr 1.3fr 1fr; }
  .casino-card__cta { grid-column:1 / -1; flex-direction:row; justify-content:space-between; border-top:1px solid var(--border-soft); padding-top:14px; }
  .new-grid, .nd-grid, .blog-grid { grid-template-columns:repeat(2, 1fr); }
  .work-grid, .team-grid { grid-template-columns:repeat(2, 1fr); }
  .states-grid { grid-template-columns:repeat(3, 1fr); }
  .hero { padding-block: 20px; }
  .section { padding-block: 20px; }
  #seo-content { padding-inline: 20px; }
  .article h2 { margin-top: 20px; }
}

@media (max-width:680px) {
  .wrap { padding-inline:18px; }
  .section__head--split { flex-direction:column; }
  .casino-card {
    grid-template-columns:1fr; gap:16px;
    text-align:left;
  }
  .casino-card__cta { flex-direction:column; align-items:stretch; }
  .casino-card__cta .btn { width:100%; }
  .casino-card__cta .terms { text-align:center; }
  .new-grid, .nd-grid, .blog-grid, .work-grid, .team-grid { grid-template-columns:1fr; }
  .states-grid { grid-template-columns:repeat(2, 1fr); }
  .compare, .proscons, .features { grid-template-columns:1fr; }
  .accordion__trigger { font-size:15px; padding:16px; gap:12px; }
  .btn { width:auto; }
}

@media (max-width:400px) {
  .states-grid { grid-template-columns:1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
}