/* ============================================================
   koitoto l — Dark Crimson Premium theme
   Single source of styling for all pages. Edit here only.
   Change the palette in :root to retheme the whole site.
   ============================================================ */

:root{
  /* surfaces — near-black with warm crimson undertone */
  --bg:#0F0B0D;
  --bg-elev:#150F12;
  --surface:#1B1318;
  --surface-2:#241820;
  /* crimson accent */
  --accent:#E11D3C;
  --accent-2:#C2122F;
  --accent-deep:#9E0F26;
  --accent-light:#FF5168;
  --grad-accent:linear-gradient(135deg,#FF4D6D 0%,#E11D3C 46%,#B0152E 100%);
  --on-accent:#FFFFFF;            /* text/icon sitting on the accent */
  /* support */
  --emerald:#3FB984;
  --danger:#FF6B74;
  /* text */
  --text:#F1ECEE;
  --muted:#AEA2A8;
  --muted-2:#8A7E84;
  /* lines */
  --line:rgba(255,255,255,.09);
  --line-accent:rgba(225,29,60,.28);
  --glass:rgba(27,19,24,.66);

  /* bootstrap remaps */
  --bs-primary:#E11D3C;--bs-primary-rgb:225,29,60;
  --bs-info:#C2122F;
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-secondary-bg:var(--surface);
  --bs-tertiary-bg:var(--surface);
  --bs-emphasis-color:#FFFFFF;
  --bs-secondary-color:var(--muted);
  --bs-tertiary-color:var(--muted);
  --bs-heading-color:#FFFFFF;
  --bs-border-color:var(--line);
  --bs-border-color-translucent:var(--line);
  --bs-border-radius:10px;
  --bs-border-radius-lg:18px;
  --bs-link-color:var(--accent-light);
  --bs-link-hover-color:#FF7E8E;
  --bs-box-shadow:0 18px 48px rgba(0,0,0,.55);
  --bs-box-shadow-sm:0 8px 22px rgba(0,0,0,.45);

  --nav-h:60px;--toc-h:46px;
  --ff-h:'Sora','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-body-font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --bs-body-font-size:17px;--bs-body-line-height:1.6;--bs-body-font-weight:400;
}

html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{
  font-family:var(--bs-body-font-family);
  background:
    radial-gradient(1100px 520px at 80% -8%,rgba(225,29,60,.14),transparent 60%),
    radial-gradient(900px 480px at -10% 0%,rgba(225,29,60,.05),transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  padding-top:calc(var(--nav-h) + 34px);
  padding-bottom:max(72px,env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;overflow-x:hidden;letter-spacing:.1px;
}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-h);color:#fff;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.family-editorial-guide h1,.family-editorial-guide h2,.family-editorial-guide h3,
.family-editorial-guide h4,.family-editorial-guide h5,.family-editorial-guide h6{font-weight:700;letter-spacing:-.02em;text-transform:none;font-style:normal}
.fw-black,.fw-bold{font-weight:800!important}
img{max-width:100%;height:auto}
a{color:var(--accent-light);text-decoration:none}a:hover{color:#FF7E8E}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),var(--accent-deep));border-radius:4px}
[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* ---------- layout ---------- */
.section{padding:64px 24px 52px;max-width:1180px;margin-inline:auto;position:relative;overflow-x:clip}
.section+.section{margin-top:6px}
.section-line+.section-line::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-accent),transparent)}
.hero+.section,.hero-toc+.section,main>.section:first-of-type{padding-top:48px}
.section figure img,.section img.img-fluid{max-height:340px;object-fit:cover;width:100%;border-radius:var(--bs-border-radius-lg)}
.section figure{margin:24px auto;max-width:680px}
.section-soft{background:linear-gradient(180deg,rgba(225,29,60,.06),rgba(225,29,60,.012));
  border-block:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-accent);
  background:linear-gradient(180deg,#150F12,#0F0B0D)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(680px 360px at 78% 18%,rgba(225,29,60,.26),transparent 62%),
            radial-gradient(520px 340px at 12% 92%,rgba(225,29,60,.10),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.04;mix-blend-mode:overlay;z-index:-1}
.hero>*{position:relative;z-index:1}
.hero h1{font-weight:800;letter-spacing:-.03em}
.hero h1 .text-primary,.gold-text{
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
.hero .lead{color:var(--muted)!important}
.hero .img-fig img{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px var(--line-accent);}

/* ---------- navbar (floating pill) ---------- */
.navbar.fixed-top.top-nav{
  top:14px;left:50%;transform:translateX(-50%);
  width:min(1200px,calc(100% - 26px));
  background:rgba(15,11,13,.6);
  border:1px solid var(--line-accent);border-radius:999px;
  backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);
  min-height:var(--nav-h);padding-inline:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 0 1px rgba(225,29,60,.08),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-radius .25s ease,box-shadow .25s ease}
.navbar.fixed-top.top-nav .container-fluid{padding-inline:14px}
.navbar.fixed-top.top-nav:has(.navbar-collapse.show){border-radius:22px}
.navbar-brand.nav-logo{text-decoration:none}
.navbar-brand.nav-logo:hover{text-decoration:none}
.navbar-brand.nav-logo img{width:auto;height:36px;margin-right:0;border-radius:8px;object-fit:contain;background:transparent;
  filter:drop-shadow(0 2px 8px rgba(225,29,60,.3))}
.navbar-brand.nav-logo span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.top-nav .navbar-nav .nav-link{color:rgba(241,236,238,.78);font-weight:600;padding-inline:14px;border-radius:9px;transition:color .18s,background .18s}
.top-nav .navbar-nav .nav-link:hover{color:var(--accent-light);background:rgba(225,29,60,.12)}
.top-nav .navbar-nav .nav-link.active{color:var(--on-accent);font-weight:700;background:var(--grad-accent)}
.navbar-toggler{width:44px;height:44px;border:1px solid var(--line-accent);padding:0;background:rgba(225,29,60,.08)}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(225,29,60,.3)}
.navbar-toggler-icon{filter:invert(28%) sepia(82%) saturate(3200%) hue-rotate(330deg) brightness(95%)}

/* ---------- nav dropdown + cta ---------- */
.top-nav .nav-link.dropdown-toggle{display:inline-flex;align-items:center;gap:.3rem}
.dropdown-menu{background:rgba(18,12,14,.98);border:1px solid var(--line-accent);border-radius:14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.55);padding:8px;margin-top:10px!important}
.dropdown-item{color:var(--text);border-radius:9px;padding:8px 14px;font-weight:600;font-size:14px;transition:.15s}
.dropdown-item:hover,.dropdown-item:focus{background:rgba(225,29,60,.14);color:var(--accent-light)}
.dropdown-item.active,.dropdown-item:active{background:var(--grad-accent);color:var(--on-accent)}
.top-nav .nav-link.dropdown-toggle.active{color:var(--on-accent);background:var(--grad-accent)}
.nav-cta .btn{padding-inline:18px;border-radius:999px;font-size:14px;font-weight:700}
.nav-cta .btn-outline-primary{border-color:var(--line-accent)!important}
@media(min-width:992px){.nav-cta{margin-left:.75rem}}
@media(max-width:991.98px){.nav-cta{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}.nav-cta .btn{flex:1}}

/* ---------- breadcrumb ---------- */
.breadcrumb{max-width:1180px;margin:4px auto 0;padding:8px 24px 0;font-size:13px;color:var(--muted);
  display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent-light)}
.breadcrumb span{color:var(--text)}
@media(max-width:700px){.breadcrumb{padding-inline:16px}}

/* ---------- toc / pills ---------- */
.toc-bar{position:fixed;top:var(--nav-h);left:0;right:0;height:var(--toc-h);
  background:rgba(15,11,13,.8);border-bottom:1px solid var(--line);z-index:180;display:flex;align-items:center;gap:10px;
  padding:6px clamp(12px,3vw,24px);backdrop-filter:blur(12px);overflow:hidden}
.toc-scroll{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.toc-scroll::-webkit-scrollbar,.hero-toc::-webkit-scrollbar{display:none}
.toc-bar a,.hero-toc a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line-accent);color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap;flex:0 0 auto;text-decoration:none;
  transition:.2s}
.toc-bar a:hover,.toc-bar a.toc-active,.hero-toc a:hover,.hero-toc a.toc-active{
  color:var(--on-accent);background:var(--grad-accent);border-color:transparent}
.hero-toc{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:1180px;margin:0 auto 20px;padding:8px 24px}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,var(--surface),var(--bg-elev))!important;
  border:1px solid var(--line)!important;border-radius:18px!important;color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card:hover{transform:translateY(-5px);border-color:var(--line-accent)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.5),0 0 0 1px rgba(225,29,60,.22)}
.card .text-primary,.card .fs-3.text-primary,.card .fs-4.text-primary{color:var(--accent-light)!important}
.bg-body-tertiary{background:transparent!important}

/* ---------- buttons ---------- */
.btn{letter-spacing:.02em;text-transform:none;font-weight:700;border-radius:12px;transition:.2s}
.btn-primary,.site-ec6e .btn-primary{
  --bs-btn-color:var(--on-accent);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--on-accent);--bs-btn-active-color:var(--on-accent);
  background:var(--grad-accent)!important;border:0!important;color:var(--on-accent)!important;
  box-shadow:0 8px 24px rgba(225,29,60,.4)}
.btn-primary:hover,.site-ec6e .btn-primary:hover{filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(225,29,60,.55);color:var(--on-accent)!important}
.btn-outline-primary,.site-ec6e .btn-outline-primary{
  color:var(--accent-light)!important;border:1px solid var(--line-accent)!important;background:transparent}
.btn-outline-primary:hover,.site-ec6e .btn-outline-primary:hover{
  background:var(--grad-accent)!important;color:var(--on-accent)!important;border-color:transparent!important}
.btn-outline-secondary{color:var(--muted)!important;border:1px solid var(--line)!important}
.btn-outline-secondary:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;border-color:var(--line-accent)!important}
.btn-lg{border-radius:14px}

/* ---------- eyebrow / badges ---------- */
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:14px;padding:6px 16px;background:rgba(225,29,60,.12);
  border:1px solid var(--line-accent);border-radius:999px;line-height:1.2}
.badge.bg-primary-subtle,.site-ec6e .bg-primary-subtle{background:rgba(225,29,60,.16)!important}
.badge.text-primary,.text-primary,.site-ec6e .text-primary{color:var(--accent-light)!important}
.badge.bg-success-subtle{background:rgba(63,185,132,.16)!important}
.text-success,.text-success-emphasis{color:var(--emerald)!important}
.badge.bg-danger-subtle{background:rgba(255,107,116,.16)!important}
.text-danger{color:var(--danger)!important}
.text-body-secondary,.text-muted,.text-secondary{color:var(--muted)!important}
.lead{color:var(--muted)}

/* tables */
.table{--bs-table-color:var(--text);--bs-table-bg:transparent;--bs-table-border-color:var(--line);color:var(--text)}
.table thead th{color:var(--muted);border-bottom:1px solid var(--line-accent)}
.table td,.table th{border-color:var(--line)}
/* comparison table: left-align cells so check icons line up */
#comparison .table th,#comparison .table td{text-align:left!important}
#comparison .table td .badge{margin-right:6px}

/* list groups */
.list-group-item{background:transparent!important;color:var(--text);border-color:var(--line)!important}

/* alerts */
.alert-primary{background:rgba(225,29,60,.10);border:1px solid var(--line-accent);color:var(--text);border-radius:16px}
.alert-primary .text-primary{color:var(--accent-light)!important}

/* accordion (faq) */
.accordion{--bs-accordion-bg:transparent;--bs-accordion-color:var(--text);--bs-accordion-border-color:var(--line);
  --bs-accordion-btn-color:var(--text);--bs-accordion-active-color:var(--accent-light);--bs-accordion-border-radius:12px}
.accordion-item{background:linear-gradient(180deg,var(--surface),var(--bg-elev))!important;border:1px solid var(--line)!important;
  border-radius:12px!important;margin-bottom:8px;overflow:hidden}
.accordion-button{background:transparent!important;color:var(--text)!important;font-weight:600;box-shadow:none}
.accordion-button:not(.collapsed){background:rgba(225,29,60,.10)!important;color:var(--accent-light)!important;
  box-shadow:none;border-left:3px solid var(--accent)!important}
.accordion-button::after{filter:invert(28%) sepia(82%) saturate(3200%) hue-rotate(330deg) brightness(95%)}
.accordion-body{color:var(--muted)}

/* forms (login / register) */
.form-control,.form-select{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--text)!important;border-radius:10px}
.form-control::placeholder{color:var(--muted-2)}
.form-control:focus,.form-select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 .2rem rgba(225,29,60,.25)!important;background:var(--surface)!important;color:var(--text)!important}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.input-group-text{background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}

/* ---------- featured game ---------- */
.featured-game{padding:clamp(32px,5vw,52px) clamp(22px,4vw,40px);margin:24px auto;max-width:1180px;
  background:linear-gradient(135deg,rgba(225,29,60,.14),rgba(27,19,24,.6) 45%,rgba(15,11,13,.92));
  border-radius:22px;border:1px solid var(--line-accent);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.featured-game .fg-badge{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--grad-accent);
  color:var(--on-accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;
  box-shadow:0 6px 18px rgba(225,29,60,.5)}
.featured-game img{border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.55);width:100%}

.error-num{font-family:var(--ff-h);font-size:clamp(96px,18vw,180px);font-weight:800;line-height:.9;letter-spacing:-.04em;
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}

.seo-copy{padding:20px 22px;columns:2 380px;column-gap:34px;color:var(--muted)}
.seo-copy p{break-inside:avoid}
@media(max-width:760px){.seo-copy{columns:1;padding:16px}}
.map-wrap,.location-map{width:100%;height:300px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.map-wrap iframe,.location-map iframe{width:100%;height:100%;border:0}

/* stat numbers */
.stat-row strong,.fs-2.text-primary,strong.fs-2{color:var(--accent-light)!important}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#120C0E,#0A0709);border-top:1px solid var(--line-accent);
  padding:40px 20px 18px;margin-top:56px}
.footer-inner{max-width:1400px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;margin-bottom:22px}
.footer-brand h3{font-size:19px;color:var(--accent-light);margin-bottom:8px}
.footer-col h4{font-size:13.5px;color:#fff;margin-bottom:10px;letter-spacing:.02em}
.footer-col a,.footer-brand p{font-size:13px;color:var(--muted);display:block;margin-bottom:6px;transition:color .15s}
.footer-col a:hover{color:var(--accent-light)}
.footer-bottom{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted-2)}
.footer a{color:var(--muted)}.footer a:hover{color:var(--accent-light)}
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:#c0392b;border-radius:50%;font-size:11px;font-weight:700;color:#fff}

/* ---------- sticky / back-to-top / mobile nav ---------- */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;background:rgba(18,12,14,.92);border-top:1px solid var(--line-accent);
  backdrop-filter:blur(10px);padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:400;
  transform:translateY(100%);transition:transform .3s}
.sticky-bar.show{transform:translateY(0)}
.back-top{position:fixed;right:1rem;bottom:1.25rem;width:46px;height:46px;background:var(--grad-accent);color:var(--on-accent);
  border-radius:999px;display:grid;place-items:center;font-size:20px;line-height:1;text-decoration:none;
  box-shadow:0 14px 36px rgba(225,29,60,.5);z-index:1040;opacity:0;pointer-events:none;transition:opacity .25s,transform .2s,box-shadow .25s}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(225,29,60,.65);color:var(--on-accent)}
@media(max-width:767.98px){.back-top{bottom:calc(72px + env(safe-area-inset-bottom));right:1rem}}
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:62px;background:rgba(18,12,14,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-accent);z-index:290;box-shadow:0 -4px 18px rgba(0,0,0,.5)}
.mobile-nav ul{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0;list-style:none;height:100%}
.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:3px;
  color:var(--muted);font-size:10.5px;text-decoration:none;font-weight:600;transition:color .15s}
.mobile-nav a.active,.mobile-nav a:hover{color:var(--accent-light)}
.mobile-nav .m-icon.bi{font-size:22px;line-height:1;transition:color .15s,transform .18s}
.mobile-nav a.active .m-icon{color:var(--accent-light);transform:translateY(-2px)}
.mobile-nav a:hover .m-icon{color:var(--accent-light)}

/* family-editorial-guide overrides */
.family-editorial-guide{--bs-border-radius:.75rem;--bs-border-radius-sm:.5rem;--bs-border-radius-lg:1.1rem;
  --bs-card-spacer-y:1.75rem;--bs-card-spacer-x:2rem;--bs-btn-border-radius:.75rem;--bs-btn-padding-y:.85rem;--bs-btn-padding-x:1.8rem;
  --bs-box-shadow-sm:0 8px 22px rgba(0,0,0,.45);--bs-box-shadow:0 18px 48px rgba(0,0,0,.55);
  --bs-accordion-border-radius:.75rem;--bs-navbar-padding-y:1rem}
.family-editorial-guide .hero{background:linear-gradient(180deg,#150F12,#0F0B0D)}
.family-editorial-guide .hero::before{top:0}

/* brand scope -> crimson/dark */
.site-ec6e{--bs-body-color:var(--text);--bs-emphasis-color:#fff;--bs-secondary-color:var(--muted);--bs-tertiary-color:var(--muted);
  --bs-primary:var(--accent);--bs-primary-rgb:225,29,60;--bs-link-color:var(--accent-light);--bs-link-hover-color:#FF7E8E;
  --text-strong:#fff;--text-body:var(--text);--text-muted:var(--muted);--text-accent:var(--accent-light)}
.site-ec6e .text-body,.site-ec6e .fw-bold.text-body{color:var(--text)!important}
.site-ec6e .text-body-secondary,.site-ec6e .text-secondary{color:var(--muted)!important}
.site-ec6e .text-bg-primary,.site-ec6e .text-bg-warning{background:var(--grad-accent)!important;color:var(--on-accent)!important}
.site-ec6e footer,.site-ec6e .footer{color:var(--text)!important}
.site-ec6e .section h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.025em}
.site-ec6e .hero{padding-block:80px}
.site-ec6e img.img-fluid{border-radius:20px}
.site-ec6e .section+.section{margin-top:6px}
body.site-ec6e ul:not(.list-group):not(.list-unstyled) li::marker{color:var(--accent);font-weight:700}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.rv-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:991.98px){
  .mobile-nav{display:none!important}body{padding-bottom:24px}
  .navbar.top-nav .navbar-collapse{position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:rgba(18,12,14,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid var(--line-accent);border-radius:18px;padding:12px 16px;
    max-height:calc(100vh - var(--nav-h) - 34px);overflow-y:auto;
    box-shadow:0 20px 50px rgba(0,0,0,.55)}
}
@media(max-width:700px){
  .section{padding:40px 16px 28px}
  .hero-toc{padding:8px 14px;gap:6px}.hero-toc a{height:28px;padding:0 12px;font-size:12px;flex:0 0 auto}
  .navbar.fixed-top.top-nav{width:calc(100% - 18px);top:10px}
  .footer{padding:24px 16px 12px;margin-top:36px}.footer-grid{grid-template-columns:1fr 1fr;gap:12px 16px}
}
@media(pointer:coarse){.btn,.nav-link,.toc-bar a,.hero-toc a,.mobile-nav a{min-height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* qa mobile toc guard */
@media(max-width:700px){
  .page-category .hero-toc,.page-static .hero-toc{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;max-width:100%!important;height:42px!important;max-height:42px!important;
    margin:0 0 10px!important;padding:4px 2px 5px!important;gap:6px!important;white-space:nowrap!important;scroll-snap-type:x proximity}
  .page-category .hero-toc a,.page-static .hero-toc a{white-space:nowrap!important;flex:0 0 auto!important;min-width:max-content!important;
    max-width:none!important;min-height:32px!important;height:32px!important;padding:6px 12px!important;font-size:11px!important;line-height:1!important;
    word-break:keep-all!important;overflow-wrap:normal!important;scroll-snap-align:start}
  .page-home .stats-row,.page-home .stat-row,.page-home .sr-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-home .stats-row>*,.page-home .stat-row>*,.page-home .sr-row>*{min-width:0!important}
}

/* ============================================================
   Hero — full-bleed rounded image stuck to the right (beranda)
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero>.container{position:static}   /* keep container unpositioned so the absolute image anchors to the section (viewport edge), not the container */
.hero-glow{display:none!important}

/* rotating boxes — peek around the full-bleed image */
.hero-art{position:relative;isolation:isolate;margin:8px 16px 0}
.hero-ring{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:16px;pointer-events:none;z-index:0;will-change:transform}
.hero-ring.r1{width:112%;border:1px solid rgba(225,29,60,.32);animation:hero-spin 24s linear infinite}
.hero-ring.r2{width:134%;border:1px dashed rgba(255,81,104,.22);animation:hero-spin 38s linear infinite reverse}
.hero-ring.r3{width:122%;border:1px solid rgba(225,29,60,.16);animation:hero-spin 16s linear infinite}
@keyframes hero-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* moving dotted texture, fading in toward the right edge */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask:linear-gradient(90deg,transparent 55%,#000 100%);
  mask:linear-gradient(90deg,transparent 55%,#000 100%);
  animation:hero-dots 38s linear infinite}
@keyframes hero-dots{from{background-position:0 0}to{background-position:0 220px}}

@media (min-width:992px){
  .hero .hero-art{position:absolute!important;top:50%;right:0;left:auto;transform:translateY(-50%);width:40vw;max-width:560px;margin:0;z-index:0}
  .hero .hero-art .img-fig{margin:0}
  .hero .hero-art img{width:100%!important;height:auto!important;object-fit:cover;
    aspect-ratio:1/1!important;border-radius:40px 0 0 40px!important;
    box-shadow:0 30px 80px rgba(0,0,0,.5)}
}
@media (max-width:991.98px){
  .hero-art{display:block;width:auto;max-width:460px;margin:20px auto 0}
  .hero-art .img-fig{margin:0}
  .hero-art img{display:block;width:100%!important;height:auto!important;aspect-ratio:1/1!important;
    object-fit:cover;border-radius:24px!important;box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .hero-ring.r1{width:104%}
  .hero-ring.r2{width:118%}
  .hero-ring.r3{width:96%}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero-ring{animation:none!important}
}

/* ============================================================
   Force all content images to 1:1 across every page
   (logo is in the navbar, outside <main>, so it's unaffected)
   ============================================================ */
.main figure img,.main .img-fluid,.main img.rounded,.main img.rounded-3,.main img.rounded-4{
  aspect-ratio:1/1!important;object-fit:cover!important;width:100%!important;height:auto!important;max-height:none!important}