:root {
  --ink: #0a1020;
  --ink-2: #101a31;
  --ink-3: #18233c;
  --paper: #f5f7fb;
  --white: #ffffff;
  --muted: #657087;
  --line: #dce2ec;
  --gold: #f2c457;
  --gold-2: #ffdf7b;
  --cyan: #5ce7ef;
  --cyan-2: #168da8;
  --red: #d7334d;
  --green: #20c875;
  --shadow: 0 24px 70px rgba(10, 16, 32, .14);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { color: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 18px; top: -80px; z-index: 999; padding: 10px 14px; border-radius: 10px; background: var(--gold); color: #111; font-weight: 800; transition: .2s; }
.skip-link:focus { top: 18px; }

.age-strip {
  background: #070c17;
  color: #aeb8ca;
  font-size: .72rem;
  letter-spacing: .02em;
}
.age-strip .container { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; }
.age-strip strong { color: #ffd6dc; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(9, 15, 30, .92);
  color: #fff;
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.header-row { display: flex; align-items: center; min-height: 74px; gap: 22px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 196px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav a { position: relative; padding: 10px 11px; color: #c9d2e2; font-size: .78rem; font-weight: 700; transition: .2s; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a::after { position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--gold)); content: ""; transform: scaleX(0); transform-origin: left; transition: .2s; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .menu-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.06); cursor: pointer; transition: .2s; }
.icon-button:hover, .menu-button:hover { border-color: rgba(92,231,239,.55); background: rgba(92,231,239,.1); }
.icon-button svg, .menu-button svg { width: 19px; height: 19px; fill: currentColor; }
.menu-button { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--gold-2), #e99728); color: #181206; font-size: .76rem; font-weight: 900; letter-spacing: .03em; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px rgba(231,160,42,.22); transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(231,160,42,.32); }
.button.dark { border: 1px solid rgba(255,255,255,.18); background: rgba(7,13,25,.72); color: #fff; box-shadow: none; }

.hero {
  position: relative;
  min-height: 680px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #070c18 url("../images/hero-koi-gold.png") center / cover no-repeat;
}
.hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,9,18,.18) 0%, rgba(4,9,18,.72) 43%, rgba(4,9,18,.35) 72%, rgba(4,9,18,.35)), linear-gradient(0deg, #070d1c 0%, transparent 35%); content: ""; }
.hero::after { position: absolute; inset: auto 0 0; height: 100px; background: linear-gradient(transparent, var(--paper)); content: ""; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.08fr; align-items: center; min-height: 610px; }
.hero-copy { grid-column: 2; max-width: 690px; padding: 90px 0 120px 34px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #b8f8fb; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { width: 30px; height: 2px; background: var(--cyan); content: ""; box-shadow: 0 0 16px var(--cyan); }
.hero h1, .sub-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.4rem, 6.7vw, 6.6rem); line-height: .93; letter-spacing: -.055em; text-wrap: balance; }
.hero h1 span { color: var(--gold-2); text-shadow: 0 0 30px rgba(242,196,87,.2); }
.hero-lead { max-width: 650px; margin: 24px 0 28px; color: #cfdaeb; font-size: 1.03rem; line-height: 1.78; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; color: #b8c4d7; font-size: .72rem; }
.hero-facts span { display: flex; align-items: center; gap: 7px; }
.hero-facts i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.orb { position: absolute; z-index: 1; width: 250px; height: 250px; border: 1px solid rgba(92,231,239,.18); border-radius: 50%; filter: drop-shadow(0 0 20px rgba(92,231,239,.12)); animation: orbit 18s linear infinite; }
.orb::before, .orb::after { position: absolute; border-radius: 50%; content: ""; }
.orb::before { width: 11px; height: 11px; top: 20px; left: 48px; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.orb::after { width: 8px; height: 8px; right: 15px; bottom: 62px; background: var(--gold); box-shadow: 0 0 16px var(--gold); }
.orb.one { right: 8%; top: 12%; }
.orb.two { right: 34%; bottom: 6%; width: 110px; height: 110px; animation-direction: reverse; animation-duration: 12s; }

.section { padding: 82px 0; }
.section.dark { background: var(--ink); color: #fff; }
.section.gold-wash { background: radial-gradient(circle at 10% 0%, rgba(242,196,87,.14), transparent 36%), #fff; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.section-kicker { margin: 0 0 7px; color: var(--cyan-2); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.dark .section-kicker { color: var(--cyan); }
.section-head h2, .content-heading { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.06; letter-spacing: -.04em; }
.section-head p { max-width: 520px; margin: 0; color: var(--muted); }
.dark .section-head p { color: #aeb8c9; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
.article-card { border: 1px solid var(--line); border-radius: 30px; background: #fff; padding: clamp(26px, 5vw, 58px); box-shadow: var(--shadow); }
.article-card .lead { margin-top: 0; color: #3e4960; font-size: 1.12rem; line-height: 1.9; }
.article-card h2 { margin: 42px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.15; letter-spacing: -.025em; }
.article-card h3 { margin: 28px 0 8px; font-size: 1.12rem; }
.article-card p, .article-card li { color: #4e596d; }
.article-card ul, .article-card ol { padding-left: 20px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: #7b879a; font-size: .72rem; }
.tag { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #e9f9fa; color: #157080; font-weight: 800; }
.formula { display: grid; place-items: center; margin: 24px 0; padding: 24px; border: 1px solid #b9e8ed; border-radius: 18px; background: linear-gradient(135deg,#eefcfd,#fff8e7); color: #12394b; font-size: 1.22rem; font-weight: 900; text-align: center; }
.note-box { margin: 24px 0; padding: 20px 22px; border-left: 4px solid var(--gold); border-radius: 0 16px 16px 0; background: #fff8e5; color: #5a4622; }
.quote { position: relative; margin: 34px 0; padding: 32px 32px 28px 76px; overflow: hidden; border-radius: 22px; background: var(--ink); color: #fff; box-shadow: 0 18px 45px rgba(10,16,32,.18); }
.quote::before { position: absolute; left: 23px; top: 15px; color: var(--gold); font-family: Georgia,serif; font-size: 5.8rem; line-height: 1; content: "“"; opacity: .82; }
.quote p { margin: 0; color: #fff; font-family: Georgia,serif; font-size: 1.34rem; font-style: italic; }
.quote cite { display: block; margin-top: 10px; color: #a9b6cc; font-size: .72rem; font-style: normal; }
.source-note { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); color: #788398; font-size: .7rem; }
.source-note a { color: #126d85; text-decoration: underline; text-underline-offset: 3px; }

.sidebar { position: sticky; top: 105px; display: grid; gap: 18px; }
.side-card { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(10,16,32,.08); }
.side-card h3 { margin: 0 0 13px; font-size: .9rem; }
.side-card a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f5; color: #556176; font-size: .78rem; font-weight: 700; }
.side-card a:last-child { border: 0; }
.side-card a:hover { color: #087e96; }
.safety-card { background: linear-gradient(145deg,#101a31,#152847); color: #fff; }
.safety-card p { color: #b3bfd1; font-size: .79rem; }

.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.article-teaser { position: relative; min-height: 235px; display: flex; flex-direction: column; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(10,16,32,.08); transition: transform .25s, box-shadow .25s; }
.article-teaser::before { position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg,var(--cyan),var(--gold)); content: ""; }
.article-teaser:hover { transform: translateY(-7px); box-shadow: 0 22px 45px rgba(10,16,32,.14); }
.article-teaser small { color: #16859b; font-size: .66rem; font-weight: 900; letter-spacing: .1em; }
.article-teaser h3 { margin: 16px 0 10px; font-family: Georgia,serif; font-size: 1.35rem; line-height: 1.2; }
.article-teaser p { margin: 0 0 20px; color: #697489; font-size: .79rem; }
.article-teaser span { margin-top: auto; color: #0c788c; font-size: .72rem; font-weight: 900; }

.rating-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 30px; align-items: center; padding: 35px; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: radial-gradient(circle at 0 0,rgba(92,231,239,.15),transparent 40%),linear-gradient(135deg,#121d34,#0b1020); box-shadow: 0 30px 70px rgba(0,0,0,.23); }
.rating-avatar { position: relative; min-height: 330px; overflow: hidden; border-radius: 23px; background: url("../images/hero-koi-gold.png") 10% center / cover; }
.rating-avatar::after { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(8,14,28,.85),transparent 60%); content: ""; }
.rating-avatar span { position: absolute; z-index: 1; left: 18px; bottom: 16px; padding: 7px 11px; border-radius: 999px; background: rgba(8,14,28,.74); color: #d6faff; font-size: .63rem; font-weight: 800; backdrop-filter: blur(10px); }
.rating-copy h2 { margin: 0; font-family: Georgia,serif; font-size: clamp(2.2rem,4vw,4rem); line-height: 1.04; }
.rating-copy>p { color: #aebbd0; }
.stars { display: flex; gap: 7px; margin: 20px 0; }
.star { border: 0; background: transparent; color: #647086; font-size: 2.2rem; cursor: pointer; transition: transform .18s,color .18s,filter .18s; }
.star:hover, .star.active { color: var(--gold); filter: drop-shadow(0 0 8px rgba(242,196,87,.45)); transform: translateY(-3px) scale(1.08); }
.rating-response { min-height: 112px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.055); color: #dce5f4; }
.rating-response b { display: block; margin-bottom: 4px; color: var(--cyan); }
.rating-disclaimer { color: #7f8da4; font-size: .64rem; }

.promo-shell { position: relative; }
.promo-stage { position: relative; min-height: 420px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: #050912; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.promo-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s,transform .8s; }
.promo-slide.active { opacity: 1; transform: scale(1); }
.promo-slide img { width: 100%; height: 100%; object-fit: cover; }
.promo-slide::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,9,18,.9),rgba(5,9,18,.12) 50%,rgba(5,9,18,.3)); content: ""; }
.promo-copy { position: absolute; z-index: 2; left: clamp(24px,6vw,70px); top: 50%; max-width: 390px; transform: translateY(-50%); }
.promo-copy small { color: var(--cyan); font-weight: 900; letter-spacing: .14em; }
.promo-copy h3 { margin: 9px 0 10px; font-family: Georgia,serif; font-size: clamp(2rem,4vw,4.2rem); line-height: 1; }
.promo-copy p { color: #c7d0df; }
.promo-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.promo-dot { width: 34px; height: 7px; border: 0; border-radius: 99px; background: #344057; cursor: pointer; transition: .2s; }
.promo-dot.active { width: 55px; background: linear-gradient(90deg,var(--cyan),var(--gold)); }
.image-source { margin: 12px 0 0; color: #7f8aa0; font-size: .65rem; text-align: center; }

.sub-hero { position: relative; padding: 88px 0 76px; overflow: hidden; background: radial-gradient(circle at 85% 20%,rgba(92,231,239,.15),transparent 28%),radial-gradient(circle at 10% 0%,rgba(242,196,87,.15),transparent 25%),#0a1122; color: #fff; }
.sub-hero::after { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size: 44px 44px; content: ""; mask-image: linear-gradient(to bottom,#000,transparent); }
.sub-hero .container { position: relative; z-index: 1; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; color: #91a0b8; font-size: .7rem; }
.sub-hero h1 { max-width: 930px; font-size: clamp(3rem,6vw,5.9rem); }
.sub-hero p { max-width: 760px; margin: 22px 0 0; color: #bcc8da; font-size: 1rem; }

.flying-dragon { position: fixed; z-index: 1; left: -210px; bottom: 8%; width: 150px; height: auto; pointer-events: none; filter: drop-shadow(0 0 16px rgba(73,231,244,.24)); animation: dragonFlight 27s linear infinite; opacity: .46; }
.cursor-glow { position: fixed; z-index: 4; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; background: radial-gradient(circle,rgba(92,231,239,.09),transparent 65%); pointer-events: none; transition: transform .08s linear; }

.site-footer { position: relative; padding-top: 68px; overflow: hidden; background: #111928; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .9fr .95fr 1.08fr; gap: 44px; padding-bottom: 48px; }
.footer-brand img { width: 190px; height: auto; }
.footer-brand p { max-width: 300px; margin: 18px 0; color: #aab4c5; font-size: .79rem; }
.footer-heading { margin: 0 0 14px; font-size: .82rem; }
.footer-col a { display: block; padding: 5px 0; color: #c3cbda; font-size: .76rem; transition: .2s; }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.age-note { display: inline-flex; align-items: center; gap: 8px; color: #ffb9c4; font-size: .7rem; font-weight: 800; }
.age-note i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--red); color: #fff; font-style: normal; }
.socials { display: flex; gap: 9px; margin-top: 20px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--social); box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.socials a:hover { transform: translateY(-4px) scale(1.04); }
.socials svg { width: 20px; height: 20px; fill: #fff; }
.apk-stack { display: grid; gap: 11px; }
.apk-card { position: relative; display: flex!important; align-items: center; gap: 11px; min-height: 70px; padding: 10px 12px!important; overflow: hidden; border: 1px solid rgba(92,231,239,.34); border-radius: 16px; background: linear-gradient(135deg,#093447,#10192c 62%,#41300c); color: #fff!important; box-shadow: 0 15px 30px rgba(0,0,0,.28); }
.apk-card::before { position: absolute; inset: -30% auto -30% -55%; width: 35%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); content: ""; transform: skewX(-20deg); transition: .6s; }
.apk-card:hover { transform: translateY(-3px)!important; border-color: var(--cyan); }
.apk-card:hover::before { left: 125%; }
.apk-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(145deg,var(--cyan),#2084ee); color: #061425; }
.apk-icon svg { width: 23px; height: 23px; fill: currentColor; }
.apk-copy small { display: block; color: #a7e8ee; font-size: .51rem; font-weight: 900; letter-spacing: .08em; }
.apk-copy b { display: block; font-size: .73rem; }
.apk-copy em { display: block; color: #9daabd; font-size: .56rem; font-style: normal; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 102px; border-top: 1px solid rgba(255,255,255,.1); color: #8995a9; font-size: .67rem; }

.livechat { position: fixed; z-index: 160; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 19px; background: linear-gradient(135deg,#172743,#0d7185 68%,#c58c26); color: #fff; box-shadow: 0 24px 50px rgba(0,0,0,.34),0 0 24px rgba(92,231,239,.12); animation: bob 4s ease-in-out infinite; }
.live-logo { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 15px; background: linear-gradient(145deg,#fff6ce,#f4bc3f); color: #172038; font-family: Georgia,serif; font-weight: 900; box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); }
.livechat b { display: block; font-size: .76rem; }
.livechat small { display: block; color: #caeff3; font-size: .62rem; }
.livechat i { position: absolute; right: 9px; top: 8px; width: 9px; height: 9px; border: 2px solid #185468; border-radius: 50%; background: #5bf49b; box-shadow: 0 0 0 0 rgba(91,244,155,.5); animation: pulse 1.8s infinite; }
.back-top { position: fixed; z-index: 130; left: 16px; bottom: 16px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #111a2e; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
.back-top.show { opacity: 1; pointer-events: auto; transform: none; }
.bottom-banner { position: fixed; z-index: 145; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 13px; width: min(550px,calc(100% - 230px)); padding: 10px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: linear-gradient(100deg,#15213c,#0d5e5f); color: #fff; box-shadow: 0 22px 50px rgba(0,0,0,.38); transform: translateX(-50%); }
.bottom-banner img { width: 58px; height: 34px; object-fit: contain; }
.bottom-banner b { display: block; font-size: .76rem; }
.bottom-banner span { color: #b6d9da; font-size: .62rem; }
.bottom-banner .circle-arrow { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border-radius: 50%; background: #fff; color: #0b5c61; font-weight: 900; }
.bottom-close { position: absolute; left: -12px; top: -12px; width: 27px; height: 27px; border: 0; border-radius: 50%; background: #fff; color: #111; cursor: pointer; }

.search-panel, .ad-modal { position: fixed; z-index: 300; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(4,8,17,.82); backdrop-filter: blur(13px); }
.search-panel.open, .ad-modal.open { display: grid; animation: fadeIn .25s; }
.search-box { width: min(720px,100%); max-height: 82vh; overflow: auto; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: #111a2d; color: #fff; box-shadow: 0 34px 90px rgba(0,0,0,.48); }
.search-top { display: flex; gap: 10px; }
.search-top input { flex: 1; min-width: 0; padding: 13px 15px; border: 1px solid #3b4962; border-radius: 13px; outline: 0; background: #0a1120; color: #fff; }
.search-top input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(92,231,239,.1); }
.close-button { width: 47px; border: 0; border-radius: 13px; background: #27334b; color: #fff; cursor: pointer; }
.search-results { display: grid; gap: 8px; margin-top: 15px; }
.search-result { display: block; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.04); }
.search-result:hover { border-color: rgba(92,231,239,.4); }
.search-result b { display: block; font-size: .83rem; }
.search-result small { color: #95a3ba; }

.ad-card { position: relative; width: min(760px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 28px; background: #111a2f; color: #fff; box-shadow: 0 36px 100px rgba(0,0,0,.56); animation: pop .34s; }
.ad-card img { width: 100%; aspect-ratio: 16/5.4; object-fit: cover; }
.ad-body { display: flex; align-items: center; gap: 20px; padding: 23px; }
.ad-body h2 { margin: 0 0 4px; font-family: Georgia,serif; font-size: 1.6rem; }
.ad-body p { margin: 0; color: #aab7cb; font-size: .76rem; }
.ad-body .button { margin-left: auto; white-space: nowrap; }
.ad-close { position: absolute; z-index: 2; right: 13px; top: 13px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(6,10,20,.75); color: #fff; cursor: pointer; backdrop-filter: blur(8px); }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 11px rgba(91,244,155,0); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes dragonFlight {
  0% { transform: translate3d(0,120px,0) rotate(-8deg) scale(.78); opacity: 0; }
  8% { opacity: .72; }
  48% { transform: translate3d(72vw,-110px,0) rotate(6deg) scale(1); opacity: .78; }
  76% { transform: translate3d(126vw,-38vh,0) rotate(-16deg) scale(.72); opacity: .58; }
  100% { transform: translate3d(154vw,-88vh,0) rotate(-28deg) scale(.42); opacity: 0; }
}

@media (max-width: 1040px) {
  .main-nav { display: none; position: absolute; left: 20px; right: 20px; top: 80px; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: #101a30; box-shadow: var(--shadow); }
  .main-nav.open { display: grid; }
  .main-nav a { padding: 10px; }
  .menu-button { display: grid; }
  .hero-grid { grid-template-columns: .55fr 1.2fr; }
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: auto; grid-template-columns: 1fr 1fr; }
  .article-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 700px) {
  .container { width: min(100% - 26px,1180px); }
  .age-strip .container { justify-content: center; text-align: center; }
  .age-strip span:last-child { display: none; }
  .header-row { min-height: 67px; gap: 9px; }
  .brand img { width: 148px; }
  .header-actions .button { display: none; }
  .hero { min-height: 700px; background-position: 24% center; }
  .hero::before { background: linear-gradient(0deg,#070d1b 1%,rgba(7,13,27,.76) 62%,rgba(7,13,27,.2)); }
  .hero-grid { display: block; min-height: 650px; }
  .hero-copy { padding: 290px 0 110px; }
  .hero h1 { font-size: clamp(3.15rem,14vw,4.8rem); }
  .hero-lead { font-size: .9rem; }
  .hero-facts { gap: 8px 13px; }
  .section { padding: 58px 0; }
  .section-head { align-items: start; flex-direction: column; }
  .article-card { padding: 25px 18px; border-radius: 22px; }
  .sidebar { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .rating-panel { grid-template-columns: 1fr; padding: 19px; }
  .rating-avatar { min-height: 260px; }
  .star { padding: 0 2px; font-size: 2rem; }
  .promo-stage { min-height: 330px; }
  .promo-slide img { object-position: 52% center; }
  .promo-slide::after { background: linear-gradient(90deg,rgba(5,9,18,.92),rgba(5,9,18,.45)); }
  .promo-copy { left: 20px; right: 20px; }
  .promo-copy p { font-size: .78rem; }
  .sub-hero { padding: 64px 0 55px; }
  .sub-hero h1 { font-size: clamp(2.8rem,13vw,4.5rem); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; padding-bottom: 118px; }
  .bottom-banner { left: 12px; right: 12px; bottom: 85px; width: auto; transform: none; }
  .bottom-banner span { display: none; }
  .livechat { right: 9px; bottom: 9px; padding: 8px; }
  .livechat div:not(.live-logo), .livechat i { display: none; }
  .back-top { left: 9px; bottom: 9px; }
  .flying-dragon { width: 105px; }
  .cursor-glow { display: none; }
  .ad-body { align-items: stretch; flex-direction: column; }
  .ad-body .button { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .flying-dragon, .cursor-glow { display: none; }
}

/* === MENARABET CORE LAYOUT === */
:root {
  --ink: #090711;
  --ink-2: #12101d;
  --ink-3: #1b1727;
  --paper: #f7f4ed;
  --gold: #e7b552;
  --gold-2: #ffe49a;
  --cyan: #63e4e3;
  --cyan-2: #168d8b;
  --shadow: 0 34px 100px rgba(16,8,25,.2);
  --radius: 30px;
}
body { background: var(--paper); }
.age-strip { background: #05040a; }
.site-header { background: rgba(8,6,13,.84); backdrop-filter: blur(26px) saturate(1.25); }
.header-row { min-height: 86px; }
.brand img { width: 225px; }
.main-nav a { padding-inline: 14px; font-size: .8rem; }
.header-actions .button { min-height: 50px; padding-inline: 21px; border-radius: 17px 9px 17px 9px; }

.hero {
  min-height: 880px;
  isolation: isolate;
  background: #050811 url("../images/hero-koi-gold.png") 50% 50% / cover no-repeat;
}
.hero::before {
  z-index: 0;
  background:
    linear-gradient(90deg,rgba(3,5,10,.06) 0%,rgba(4,6,12,.08) 33%,rgba(4,5,11,.68) 56%,rgba(4,5,11,.26) 100%),
    linear-gradient(0deg,#080612 0%,transparent 34%);
}
.hero::after { height: 155px; background: linear-gradient(transparent,var(--paper)); }
.hero-noise { position:absolute; z-index:1; inset:0; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.hero-grid { z-index: 3; grid-template-columns: .82fr 1.18fr; min-height: 795px; }
.hero-copy {
  position: relative;
  grid-column: 2;
  max-width: 800px;
  margin-left: auto;
  padding: 78px 50px 92px 64px;
}
.hero-copy::before {
  position: absolute;
  z-index: -1;
  inset: 34px 0 46px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 62px 18px 62px 18px;
  background: linear-gradient(132deg,rgba(18,21,35,.62),rgba(5,8,17,.2));
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 45px 110px rgba(0,0,0,.28);
  backdrop-filter: blur(15px);
  clip-path: polygon(6% 0,100% 0,94% 100%,0 100%);
  content: "";
}
.hero-copy::after { position:absolute; z-index:-1; right:-22px; top:4px; width:120px; height:120px; border:1px solid rgba(99,228,227,.3); border-radius:50%; content:""; box-shadow:0 0 50px rgba(99,228,227,.08),inset 0 0 35px rgba(99,228,227,.05); }
.hero-index { display:inline-block; margin-bottom:18px; color:rgba(255,255,255,.46); font-size:.62rem; font-weight:900; letter-spacing:.24em; }
.hero .eyebrow { margin-bottom: 24px; color:#b7ffff; font-size:.76rem; }
.hero h1 { max-width:760px; font-size:clamp(4.5rem,6.9vw,7.35rem); line-height:.87; letter-spacing:-.065em; }
.hero h1 span { color:var(--gold-2); text-shadow:0 0 44px rgba(231,181,82,.2); }
.hero-lead { max-width:700px; margin:30px 0 32px; color:#dae2ef; font-size:1.08rem; line-height:1.8; }
.hero-cta { gap:14px; }
.hero-cta .button { min-height:56px; padding:0 24px; border-radius:18px 7px 18px 7px; }
.hero-cta .button strong { font-size:1.2rem; }
.hero-facts { gap:10px; margin-top:34px; }
.hero-facts span { min-height:39px; padding:0 12px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(4,7,14,.33); backdrop-filter:blur(10px); }
.hero-facts b { color:#fff; font-size:.73rem; }
.hero-word { position:absolute; z-index:1; right:-14px; bottom:60px; color:transparent; font-family:Georgia,serif; font-size:clamp(5rem,11vw,12rem); font-weight:900; letter-spacing:-.05em; line-height:.75; -webkit-text-stroke:1px rgba(255,255,255,.055); pointer-events:none; }
.hero-stroke { position:absolute; z-index:2; border:1px solid rgba(255,226,154,.22); border-radius:50%; pointer-events:none; }
.hero-stroke.one { right:3%; top:10%; width:330px; height:330px; animation:abstractSpin 19s linear infinite; }
.hero-stroke.two { right:22%; bottom:9%; width:145px; height:145px; border-color:rgba(99,228,227,.24); animation:abstractSpin 12s linear infinite reverse; }
.hero-stroke::after { position:absolute; top:9%; left:12%; width:8px; height:8px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 24px var(--gold-2); content:""; }
.orb { opacity:.55; filter:drop-shadow(0 0 28px rgba(99,228,227,.14)); }

.section { padding:100px 0; }
.section-head { margin-bottom:44px; }
.section-head h2,.content-heading { font-size:clamp(2.6rem,4.5vw,4.7rem); }
.article-card { padding:52px; border-radius:38px 16px 38px 16px; }
.article-teaser { min-height:280px; padding:29px; border-radius:32px 11px 32px 11px; }
.article-teaser:hover { transform:translateY(-9px) rotate(-.35deg); }
.rating-panel { padding:34px; border-radius:42px 14px 42px 14px; }
.rating-avatar { min-height:390px; border-radius:34px 10px 34px 10px; background-image:url("../images/hero-koi-gold.png"); background-position:left center; }
.promo-stage { min-height:470px; border-radius:40px 14px 40px 14px; box-shadow:0 45px 110px rgba(0,0,0,.42); }
.promo-slide img { object-fit:cover; }
.site-footer { padding-top:86px; background:radial-gradient(circle at 84% 8%,rgba(231,181,82,.1),transparent 26%),#0a0810; }

.livechat {
  right: 24px;
  bottom: 22px;
  gap: 15px;
  min-width: 292px;
  min-height: 92px;
  padding: 13px 27px 13px 13px;
  overflow: hidden;
  border: 1px solid rgba(255,226,154,.55);
  border-radius: 34px 10px 34px 10px;
  background: linear-gradient(128deg,rgba(42,27,57,.97),rgba(17,23,40,.97) 60%,rgba(111,67,16,.96));
  box-shadow: 0 30px 80px rgba(0,0,0,.52),0 0 34px rgba(231,181,82,.12),inset 0 1px rgba(255,255,255,.12);
  animation: liveFloat 4.6s ease-in-out infinite;
  backdrop-filter: blur(22px);
}
.livechat::before { position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.13) 42%,transparent 60%); content:""; transform:translateX(-120%); animation:liveSweep 5s ease-in-out infinite; }
.live-logo { z-index:2; width:65px; height:65px; border-radius:24px 8px 24px 8px; background:linear-gradient(145deg,#fff4ca,#e8af3d); font-size:1.2rem; box-shadow:inset 0 0 0 2px rgba(255,255,255,.65),0 12px 26px rgba(0,0,0,.32); }
.livechat div { position:relative; z-index:2; }
.livechat div small { margin-bottom:3px; color:#7eeae6; font-size:.48rem; font-weight:900; letter-spacing:.16em; }
.livechat div b { font-family:Georgia,serif; font-size:1rem; letter-spacing:.02em; }
.livechat div em { display:block; color:#d7c7de; font-size:.55rem; font-style:normal; }
.livechat>i { right:14px; top:12px; width:11px; height:11px; border-color:#6c4210; background:#61f2ad; }
.live-shard { position:absolute; z-index:1; width:42px; height:42px; border:1px solid rgba(255,226,154,.2); background:rgba(255,255,255,.025); transform:rotate(45deg); }
.live-shard.a { right:-17px; bottom:-15px; }
.live-shard.b { right:52px; top:-29px; width:58px; height:58px; border-color:rgba(99,228,227,.17); }

.abstract-sigil { position:fixed; z-index:2; left:-160px; bottom:12%; width:130px; height:130px; border:1px solid rgba(99,228,227,.35); border-radius:48% 52% 64% 36%; pointer-events:none; animation:sigilFlight 22s cubic-bezier(.35,.04,.18,1) infinite; }
.abstract-sigil::before,.abstract-sigil::after { position:absolute; inset:15px; border:1px solid rgba(255,226,154,.4); border-radius:64% 36% 47% 53%; content:""; animation:abstractSpin 7s linear infinite; }
.abstract-sigil::after { inset:35px; border-color:rgba(99,228,227,.6); animation-direction:reverse; }
.abstract-sigil i { position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 25px var(--gold-2); animation:sigilPulse 2s ease-in-out infinite; }

@keyframes abstractSpin { to { transform:rotate(360deg); } }
@keyframes liveFloat { 50% { transform:translateY(-8px) rotate(-.4deg); } }
@keyframes liveSweep { 0%,52% { transform:translateX(-120%); } 78%,100% { transform:translateX(150%); } }
@keyframes sigilPulse { 50% { transform:scale(2.6); opacity:.2; } }
@keyframes sigilFlight { 0% { transform:translate3d(0,80px,0) rotate(0) scale(.7); opacity:0; } 9% { opacity:.72; } 52% { transform:translate3d(76vw,-70px,0) rotate(260deg) scale(1); opacity:.66; } 100% { transform:translate3d(145vw,-72vh,0) rotate(640deg) scale(.4); opacity:0; } }

@media (max-width:1040px) {
  .hero { min-height:830px; background-position:38% center; }
  .hero-grid { grid-template-columns:.58fr 1.42fr; }
  .hero-copy { padding-inline:38px; }
  .hero h1 { font-size:clamp(4.2rem,8.5vw,6.4rem); }
}
@media (max-width:700px) {
  .header-row { min-height:72px; }
  .brand img { width:158px; }
  .hero { min-height:850px; background-position:23% center; }
  .hero::before { background:linear-gradient(0deg,#070610 0%,rgba(5,7,14,.86) 64%,rgba(5,7,14,.12)); }
  .hero-grid { min-height:810px; }
  .hero-copy { margin:0; padding:335px 17px 115px; }
  .hero-copy::before { inset:305px -3px 78px; border-radius:34px 8px 34px 8px; clip-path:none; background:linear-gradient(180deg,rgba(8,10,19,.28),rgba(8,9,17,.78)); }
  .hero-index { display:none; }
  .hero .eyebrow { font-size:.61rem; }
  .hero h1 { font-size:clamp(3.5rem,15.5vw,5.2rem); }
  .hero-lead { margin:22px 0 25px; font-size:.88rem; line-height:1.65; }
  .hero-cta .button { min-height:50px; padding:0 16px; }
  .hero-facts span { min-height:34px; padding-inline:9px; font-size:.61rem; }
  .hero-word { display:none; }
  .section { padding:68px 0; }
  .article-card { padding:29px 19px; border-radius:28px 9px 28px 9px; }
  .article-teaser { min-height:auto; border-radius:26px 8px 26px 8px; }
  .promo-stage { min-height:350px; }
  .livechat { right:10px; bottom:10px; min-width:0; min-height:0; padding:8px; border-radius:24px 7px 24px 7px; }
  .livechat .live-logo { width:56px; height:56px; }
  .livechat div,.livechat>i,.live-shard { display:none; }
  .abstract-sigil { width:78px; height:78px; }
}
@media (prefers-reduced-motion:reduce) { .abstract-sigil { display:none; } }

/* === MENARABET KOI GOLD EDITION === */
:root {
  --ink:#05090f;
  --ink-2:#071722;
  --paper:#f5f1e7;
  --gold:#d7a63c;
  --gold-2:#ffe7a2;
  --cyan:#74e3df;
  --cyan-2:#197c80;
}

body {
  background:
    radial-gradient(circle at 10% 12%,rgba(215,166,60,.08),transparent 24%),
    radial-gradient(circle at 88% 36%,rgba(43,164,170,.07),transparent 22%),
    var(--paper);
}

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.site-header { background:rgba(4,10,15,.88); border-bottom-color:rgba(255,226,154,.16); }
.main-nav a::after { background:linear-gradient(90deg,#78eee6,#f2c55e); }

.hero {
  min-height:900px;
  background:#031019 url("../images/hero-koi-gold.png") 50% 50% / cover no-repeat;
}
.hero::before {
  background:
    linear-gradient(90deg,rgba(2,10,15,.03) 0%,rgba(2,10,15,.04) 35%,rgba(2,9,15,.5) 53%,rgba(1,7,13,.7) 100%),
    linear-gradient(0deg,#060a0f 0%,transparent 30%);
}
.hero-copy::before {
  inset:25px 0 45px 8px;
  border-color:rgba(255,231,162,.18);
  border-radius:70px 14px 70px 14px;
  background:linear-gradient(132deg,rgba(5,18,26,.64),rgba(3,11,18,.22));
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 45px 110px rgba(0,0,0,.32),0 0 90px rgba(23,118,128,.09);
  backdrop-filter:blur(18px) saturate(1.15);
}
.hero h1 { font-size:clamp(4.35rem,6.65vw,7.15rem); }
.hero .eyebrow { color:#c6fff9; }
.hero-word { right:-12px; bottom:56px; -webkit-text-stroke-color:rgba(255,226,154,.08); }
.hero-stroke { border-color:rgba(255,226,154,.26); }
.hero-stroke.one { width:390px; height:230px; border-radius:50%; transform:rotate(-14deg); animation:koiRipple 6.5s ease-in-out infinite; }
.hero-stroke.two { border-color:rgba(116,227,223,.3); animation:koiRipple 5s ease-in-out infinite reverse; }
.hero-facts span { border-color:rgba(255,231,162,.15); background:rgba(3,15,22,.45); }

.gold-wash {
  background:
    radial-gradient(circle at 8% 0%,rgba(215,166,60,.18),transparent 31%),
    linear-gradient(145deg,#fffdf7,#f2ede1)!important;
}
.article-card,.article-teaser,.side-card { border-color:rgba(26,73,79,.13); }
.article-card { box-shadow:0 34px 100px rgba(15,30,36,.13); }
.article-teaser::before { background:linear-gradient(90deg,#4fd7d3,#e5b44f); }
.reference-box { margin-top:34px; padding:22px 24px; border:1px solid rgba(35,137,143,.22); border-radius:24px 8px 24px 8px; background:linear-gradient(140deg,#effcfa,#fff9e9); color:#29474d; font-size:.76rem; }
.reference-box strong { color:#0b5d63; }
.reference-box ul { margin:10px 0; padding-left:19px; }
.reference-box p { margin:10px 0 0; color:#53686d; font-size:.7rem; }
.reference-box a { color:#087b83; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.source-note { margin-top:18px; }

.rating-panel {
  border-color:rgba(255,226,154,.18);
  background:
    radial-gradient(circle at 4% 0,rgba(116,227,223,.15),transparent 34%),
    radial-gradient(circle at 96% 100%,rgba(215,166,60,.13),transparent 30%),
    linear-gradient(135deg,#071a24,#050912 70%);
}
.rating-avatar { min-height:430px; background-image:url("../images/hero-koi-gold.png"); background-position:left center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.rating-avatar span { background:rgba(3,13,20,.77); color:#d8fffb; }
.star:hover,.star.active { color:#f5c85f; filter:drop-shadow(0 0 10px rgba(245,200,95,.5)); }

.promo-stage { min-height:0; aspect-ratio:2000/426; border-color:rgba(255,226,154,.18); }
.promo-slide::after { background:linear-gradient(0deg,rgba(2,8,12,.28),transparent 42%); }
.promo-copy { display:none; }
.site-footer { background:radial-gradient(circle at 84% 8%,rgba(215,166,60,.11),transparent 28%),linear-gradient(145deg,#07131d,#05070c); }

/* A large star-shaped, floating elite livechat badge. */
.livechat {
  right:22px;
  bottom:18px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  width:246px;
  height:246px;
  min-width:0;
  min-height:0;
  padding:42px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 48% 36%,#21424c 0,#0d2631 37%,#0a131d 63%,#8c621c 100%);
  clip-path:polygon(50% 0,61% 28%,88% 12%,75% 42%,100% 50%,73% 62%,91% 88%,60% 74%,50% 100%,40% 74%,9% 88%,27% 62%,0 50%,25% 42%,12% 12%,39% 28%);
  text-align:center;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.42)) drop-shadow(0 0 14px rgba(215,166,60,.2));
  animation:starFloat 5s ease-in-out infinite;
}
.livechat::before { position:absolute; inset:6px; background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.16) 42%,transparent 62%); content:""; transform:translateX(-140%); animation:liveSweep 5.6s ease-in-out infinite; }
.live-logo { z-index:2; width:52px; height:52px; border-radius:50%; background:linear-gradient(145deg,#fff5c9,#dea83d); font-size:1rem; }
.livechat div { z-index:2; width:145px; }
.livechat div small { color:#9ef4ee; font-size:.43rem; letter-spacing:.13em; }
.livechat div b { font-size:.94rem; }
.livechat div em { color:#e5d9c2; font-size:.5rem; }
.livechat>i { z-index:3; right:59px; top:57px; width:10px; height:10px; border-color:#5b3f13; }

.koi-school { position:fixed; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
.koi { position:absolute; left:-160px; width:92px; height:30px; border-radius:70% 38% 38% 70%; background:linear-gradient(90deg,#f6eee1 0 42%,#dca339 43% 67%,#f7f1e6 68%); box-shadow:inset -7px 0 8px rgba(93,50,8,.16); filter:drop-shadow(0 8px 9px rgba(14,99,107,.2)); opacity:.34; animation:koiSwim 24s cubic-bezier(.33,.03,.27,1) infinite; }
.koi::before { position:absolute; right:-22px; top:3px; width:28px; height:24px; background:linear-gradient(135deg,#f7efe2,#c78f2e); clip-path:polygon(0 50%,100% 0,70% 50%,100% 100%); content:""; }
.koi::after { position:absolute; left:15px; top:8px; width:7px; height:7px; border-radius:50%; background:#c8811d; box-shadow:31px -3px 0 #d99c34; content:""; }
.koi.k1 { bottom:13%; animation-duration:25s; }
.koi.k2 { bottom:34%; width:68px; height:23px; opacity:.22; animation-delay:-9s; animation-duration:29s; }
.koi.k3 { bottom:6%; width:54px; height:19px; opacity:.18; animation-delay:-17s; animation-duration:21s; }

@keyframes koiRipple { 0%,100% { opacity:.35; transform:rotate(-14deg) scale(.86); } 50% { opacity:.75; transform:rotate(-10deg) scale(1.08); } }
@keyframes starFloat { 50% { transform:translateY(-12px) rotate(1.8deg); } }
@keyframes koiSwim { 0% { transform:translate3d(0,60px,0) rotate(-4deg) scale(.76); } 34% { transform:translate3d(42vw,-55px,0) rotate(7deg) scale(1); } 70% { transform:translate3d(91vw,25px,0) rotate(-5deg) scale(.88); } 100% { transform:translate3d(132vw,-52vh,0) rotate(-22deg) scale(.56); } }

@media (max-width:1040px) {
  .hero { background-position:39% center; }
  .livechat { width:210px; height:210px; padding:36px; }
  .bottom-banner { display:none; }
}
@media (max-width:700px) {
  .hero { min-height:860px; background-position:25% center; }
  .hero::before { background:linear-gradient(0deg,#050b10 0%,rgba(3,12,18,.9) 62%,rgba(3,12,18,.08)); }
  .hero-copy::before { background:linear-gradient(180deg,rgba(3,13,19,.3),rgba(3,12,18,.84)); }
  .rating-avatar { min-height:300px; background-position:8% center; }
  .promo-stage { min-height:190px; aspect-ratio:auto; border-radius:24px 8px 24px 8px; }
  .livechat { right:7px; bottom:7px; display:grid; width:96px; height:96px; padding:20px; clip-path:polygon(50% 0,61% 28%,88% 12%,75% 42%,100% 50%,73% 62%,91% 88%,60% 74%,50% 100%,40% 74%,9% 88%,27% 62%,0 50%,25% 42%,12% 12%,39% 28%); }
  .livechat .live-logo { display:grid; width:42px; height:42px; font-size:.82rem; }
  .livechat div,.livechat>i { display:none; }
  .koi { opacity:.2; }
}
@media (prefers-reduced-motion:reduce) { .koi-school { display:none; } }