/* Smart Bookmarking | shared styles
   Tokens: ice #F4F6FB, navy #0B1437, cobalt #2F4BFF, DM Sans */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,400..600&display=swap');

:root {
  --bg: #F4F6FB; --bg2: #FFFFFF; --bg3: #E7EBF5; --bg4: #CFD6E8;
  --line: rgba(11,20,55,.1); --line2: rgba(11,20,55,.2);
  --tx: #0B1437; --mut: #4A557A; --dim: #8089A8;
  --acc: #2F4BFF; --acc2: #A9B4FF; --on-acc: #fff;
  --glass: rgba(11,20,55,.06);
  --ff: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1360px; --pad: clamp(18px, 3vw, 40px);
  --r: 14px; --r-lg: 22px;
  --ease: cubic-bezier(.22,.8,.2,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1437; --bg2: #111C48; --bg3: #1A2760; --bg4: #2A3878;
  --line: rgba(255,255,255,.1); --line2: rgba(255,255,255,.2);
  --tx: #FEFEFE; --mut: #B8C0E0; --dim: #7480AE;
  --glass: rgba(255,255,255,.1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ff); font-size: 16px; line-height: 1.55; color: var(--tx);
  background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: background-color .4s, color .4s;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--acc); color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec { padding-block: clamp(70px, 9vw, 140px); }
.ico { width: 1em; height: 1em; flex: none; }

/* ---------- labels, buttons, chips ---------- */
.label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--mut); margin-bottom: 18px; }
.label .ico { color: var(--acc); font-size: 12px; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;
  padding: 13px 22px; border-radius: 100px; background: var(--bg3); color: var(--tx);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; isolation: isolate;
  transition: color .35s var(--ease), transform .3s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--acc); border-radius: inherit;
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn:hover { color: #fff; }
.btn:hover::before { transform: none; }
.btn .ico { transition: transform .35s var(--ease); }
.btn:hover .ico { transform: translate(3px,-3px); }
.btn--light { background: #fff; color: #111; }
.btn--glass { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); }
.btn--ink { background: #0B1437; color: #fff; }
.btn--ink::before { background: #fff; }
.btn--ink:hover { color: #0B1437; }
.btn--sq { border-radius: 4px; padding: 15px 24px; }
.chip {
  display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid var(--line2); border-radius: 100px;
  font-size: 12px; font-weight: 500; color: var(--mut); transition: .3s var(--ease);
}
.chip:hover, .chip.is-on { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ---------- curtain (page load + page change) ---------- */
.curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
.js .curtain { display: grid; place-items: center; background: var(--acc); transform-origin: top; animation: curtainOut .8s .25s var(--ease) forwards; }
.curtain svg { width: 54px; height: 54px; animation: markPop .7s var(--ease) both; }
.js .curtain.is-leaving { animation: curtainIn .5s var(--ease) forwards; transform-origin: bottom; }
@keyframes curtainOut { to { transform: scaleY(0); } }
@keyframes curtainIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes markPop { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- cursor ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 190; pointer-events: none; display: none; opacity: 0; transition: opacity .3s; }
.cur.is-live { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .js .cur { display: block; } }
.cur__ring {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: transparent;
  transition: width .3s var(--ease), height .3s var(--ease), left .3s var(--ease), top .3s var(--ease), background .3s, border-color .3s, color .2s;
}
.cur__dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.cur.is-link .cur__ring { width: 54px; height: 54px; left: -27px; top: -27px; border-color: var(--acc); }
.cur.is-label .cur__ring { width: 76px; height: 76px; left: -38px; top: -38px; background: var(--acc); border-color: var(--acc); color: #fff; }
.cur.is-label .cur__dot { opacity: 0; }

/* ---------- header ---------- */
.hdr { position: absolute; inset: 0 0 auto 0; z-index: 60; padding-block: 16px; color: #fff; }
.hdr--solid { color: var(--tx); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.045em; white-space: nowrap; }
.logo svg { width: 30px; height: 30px; flex: none; transition: transform .5s var(--ease); }
.logo:hover svg { transform: rotate(-10deg) scale(1.08); }
.nav { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 100px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); }
.hdr--solid .nav { border-color: var(--line); }
.nav > li { position: relative; }
.nav a, .nav button { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: background .3s, color .3s; }
.nav > li > a:hover, .nav > li > button:hover, .nav a[aria-current] { background: #fff; color: #111; }
.nav .ico { font-size: 10px; transition: transform .3s; }
.nav li:hover > button .ico { transform: rotate(180deg); }
.drop {
  position: absolute; left: 50%; top: calc(100% + 10px); min-width: 250px; padding: 8px; border-radius: var(--r);
  background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: .3s var(--ease);
  box-shadow: 0 24px 60px -20px rgba(11,20,55,.3);
}
.drop::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav li:hover > .drop, .nav li:focus-within > .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop a { border-radius: 8px; padding: 9px 12px; justify-content: space-between; }
.drop a:hover { background: var(--acc); color: #fff; }
.hdr__tools { display: flex; align-items: center; gap: 4px; }
.tool { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; transition: background .3s, transform .3s var(--ease); }
.tool:hover { background: var(--glass); transform: rotate(12deg); }
.tool .i-moon, [data-theme="light"] .tool .i-sun { display: none; }
[data-theme="light"] .tool .i-moon { display: block; }

.fab {
  position: fixed; right: var(--pad); top: 18px; z-index: 120; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 12px; background: #0B1437; color: #fff; border: 1px solid rgba(255,255,255,.14);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  transform: translateY(-90px); transition: transform .5s var(--ease), background .3s;
  box-shadow: 0 14px 30px -12px rgba(11,20,55,.3);
}
.fab.is-on, .menu-open .fab { transform: none; }
.fab:hover { background: var(--acc); }
.fab .ico { font-size: 16px; transition: transform .4s var(--ease); }
.menu-open .fab .ico { transform: rotate(45deg); }

/* overlay menu */
.ovl {
  position: fixed; inset: 0; z-index: 110; background: var(--bg2); color: var(--tx); overflow-y: auto;
  clip-path: circle(0 at calc(100% - 60px) 40px); visibility: hidden;
  transition: clip-path .7s var(--ease), visibility 0s .7s;
}
.menu-open .ovl { clip-path: circle(150% at calc(100% - 60px) 40px); visibility: visible; transition: clip-path .8s var(--ease); }
.ovl__in { min-height: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; padding-block: 110px 50px; }
.ovl__big a { display: block; font-size: clamp(2.4rem, 7vw, 5.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; color: var(--dim); transition: color .3s, transform .4s var(--ease); }
.ovl__big a:hover, .ovl__big a[aria-current] { color: var(--tx); transform: translateX(14px); }
.ovl__big li, .ovl__side > * { opacity: 0; transform: translateY(30px); transition: .6s var(--ease); }
.menu-open .ovl__big li, .menu-open .ovl__side > * { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i, 0) * .06s); }
.ovl__side h4 { font-size: 13px; color: var(--mut); font-weight: 500; letter-spacing: 0; margin-bottom: 14px; }
.ovl__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.search { display: flex; border: 1px solid var(--line2); border-radius: 100px; padding: 5px; background: var(--bg); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 8px 16px; font-size: 15px; }
.search button { width: 44px; height: 44px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-size: 18px; transition: transform .3s var(--ease); flex: none; }
.search button:hover { transform: scale(1.08) rotate(-10deg); }
.search:focus-within { border-color: var(--acc); }

/* ---------- hero (home) ---------- */
.hero { --glass: rgba(255,255,255,.14); position: relative; min-height: min(100vh, 940px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; background: #1F35C4; }
.hero__bg { position: absolute; inset: -6% 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.82); }
.js .hero__bg img { animation: heroZoom 2.4s var(--ease) both; }
@keyframes heroZoom { from { transform: scale(1.18); } to { transform: scale(1); } }
.hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--acc); mix-blend-mode: multiply; }
.hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(11,20,55,.35) 0%, rgba(11,20,55,0) 28%, rgba(11,20,55,.55) 70%, rgba(11,20,55,.92) 100%); }
.hero__in { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 6vw, 110px); align-items: end; padding-top: 150px; padding-bottom: 46px; }
.hero__side { display: flex; gap: 18px; align-items: flex-end; }
.hero__card { width: 150px; flex: none; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.16); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); transition: transform .5s var(--ease); }
.hero__card:hover { transform: translateY(-6px) rotate(-2deg); }
.hero__card img { border-radius: 9px; aspect-ratio: 1; object-fit: cover; }
.hero__card span { display: flex; align-items: center; gap: 6px; padding: 9px 4px 3px; font-size: 13px; font-weight: 600; }
.hero__note { font-size: 14px; line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.35); max-width: 190px; }
.hero__note svg { display: block; width: 34px; height: 34px; margin-bottom: 12px; }
.hero__kicker { font-style: italic; font-size: 15px; margin-bottom: 14px; opacity: .92; }
.hero h1 { font-size: clamp(2.5rem, 6.1vw, 5.5rem); font-weight: 700; line-height: .98; letter-spacing: -.055em; text-transform: uppercase; max-width: 12.5em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.hero__row { position: relative; z-index: 3; }
.hero__row ul { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.25); }
.hero__row a { display: flex; align-items: center; gap: 10px; padding: 20px 4px 26px; font-size: 14px; font-weight: 600; transition: gap .3s var(--ease), color .3s; }
.hero__row a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.hero__row a:hover { gap: 16px; }
.badge { position: absolute; z-index: 4; left: clamp(20px, 6vw, 90px); top: 120px; width: 132px; height: 132px; display: grid; place-items: center; color: #fff; }
.badge svg.badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; }
.badge__core { width: 58px; height: 58px; border-radius: 50%; background: #0B1437; display: grid; place-items: center; font-size: 20px; transition: transform .4s var(--ease), background .3s; }
.badge:hover .badge__core { transform: scale(1.15); background: #fff; color: #0B1437; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- page head (inner pages) ---------- */
.phead { position: relative; padding: 150px 0 clamp(80px, 10vw, 150px); overflow: hidden; }
.phead__ghost { position: absolute; left: 0; bottom: -0.2em; white-space: nowrap; font-size: clamp(5rem, 12vw, 11rem); font-weight: 700; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; animation: ghost 40s linear infinite; }
@keyframes ghost { to { transform: translateX(-50%); } }
.phead__orb { position: absolute; right: -8%; top: -30%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(47,75,255,.5), rgba(47,75,255,0) 65%); filter: blur(20px); animation: orb 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes orb { to { transform: translate(-70px, 60px) scale(1.15); } }
.phead .wrap { position: relative; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mut); margin-bottom: 22px; }
.crumb a:hover { color: var(--acc); }
.crumb li + li::before { content: "/"; margin-right: 8px; color: var(--dim); }
.phead h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.phead p { max-width: 560px; margin-top: 20px; color: var(--mut); font-size: 17px; }
.phead__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* ---------- statement / about ---------- */
.state { font-size: clamp(1.7rem, 3.7vw, 3.3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; max-width: 21em; }
.about__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 38px; }
.about__foot p { color: var(--mut); max-width: 430px; font-size: 15px; }

/* ---------- marquee ---------- */
.mq { border-block: 1px solid var(--line); overflow: hidden; padding-block: 26px; }
.mq__track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq:hover .mq__track { animation-play-state: paused; }
.mq__track a { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.03em; color: var(--dim); white-space: nowrap; transition: color .3s; }
.mq__track a:hover { color: var(--tx); }
.mq__track a::after { content: ""; width: 14px; height: 14px; background: var(--acc); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- features (rows) ---------- */
.feat { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); }
.feat__side { position: sticky; top: 110px; align-self: start; }
.feat__side h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.feat__side p { color: var(--mut); margin: 18px 0 26px; font-size: 15px; }
.rows { border-top: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.15fr) 28px; gap: 20px; align-items: center; padding: 26px 18px; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: color .35s, padding .45s var(--ease); }
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--acc); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.row:hover { color: #fff; padding-inline: 28px 18px; }
.row:hover::before { transform: none; }
.row__ico { font-size: 26px; color: var(--acc); transition: color .3s, transform .5s var(--ease); }
.row:hover .row__ico { color: #fff; transform: rotate(-10deg) scale(1.1); }
.row h3 { font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 500; color: var(--mut); transition: color .3s; }
.row:hover h3 { color: #fff; }
.row p { font-size: 15px; color: var(--mut); transition: color .3s; }
.row:hover p { color: rgba(255,255,255,.92); }
.row__arr { font-size: 20px; opacity: .4; transition: transform .4s var(--ease), opacity .3s; }
.row:hover .row__arr { transform: rotate(45deg); opacity: 1; }

/* ---------- stack (why individuals love us) ---------- */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); }
.why__side { position: sticky; top: 100px; align-self: start; }
.why__side h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 28px; }
.frame { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.js .frame[data-reveal] { opacity: 1; transform: none; }
.js .frame[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.35); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease); }
.js .frame[data-reveal].is-in img { clip-path: inset(0 0 0 0); transform: scale(1.18); }
.why__side .frame { aspect-ratio: 7/5; }
.stack__card { position: sticky; top: calc(100px + var(--i) * 20px); padding: clamp(24px, 3vw, 40px); margin-bottom: 26px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 -18px 40px -24px rgba(11,20,55,.2); }
.stack__card:nth-child(even) { background: var(--bg3); }
.stack__card .row__ico { display: block; margin-bottom: 40px; font-size: 30px; }
.stack__card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
.stack__card p { color: var(--mut); }

/* ---------- stories ---------- */
.stories { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); }
.stories__side { position: sticky; top: 110px; align-self: start; }
.stories__side h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.stories__side p { color: var(--mut); margin: 18px 0 26px; font-size: 15px; }
.stories__mark { width: 30px; height: 30px; margin-bottom: 20px; }
.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--stag > :nth-child(even) { margin-top: 70px; }

.bm { display: flex; flex-direction: column; }
.bm__shot { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--bg2); border: 1px solid var(--line); transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.bm:hover .bm__shot { border-color: var(--acc); transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(47,75,255,.55); }
.bm__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--bg3); border-bottom: 1px solid var(--line); }
.bm__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg4); transition: background .3s; }
.bm:hover .bm__bar i:first-child { background: var(--acc); }
.bm__url { flex: 1; min-width: 0; margin-left: 8px; padding: 3px 12px; border-radius: 100px; background: var(--bg); font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm__img { display: block; aspect-ratio: 16/10; overflow: hidden; }
.bm__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease), filter .5s; filter: saturate(.85); }
.bm:hover .bm__img img { transform: scale(1.07); filter: none; }
.bm__ph { display: grid; place-items: center; aspect-ratio: 16/10; padding: 20px; text-align: center; font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.04em; color: var(--mut); background: repeating-linear-gradient(135deg, var(--bg2) 0 14px, var(--bg3) 14px 28px); word-break: break-word; }
.bm__body { padding: 18px 2px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bm h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.22; letter-spacing: -.03em; font-weight: 600; }
.bm h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.bm:hover h3 a { background-size: 100% 1px; }
.bm p { font-size: 14.5px; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--dim); }
.meta span { display: inline-flex; align-items: center; gap: 5px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: clamp(40px, 5vw, 70px); }
.pager a, .pager span { white-space: nowrap; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding-inline: 14px; display: grid; place-items: center; border-radius: 100px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; transition: .3s var(--ease); }
.pager a:hover, .pager [aria-current] { background: var(--acc); border-color: var(--acc); color: #fff; }
.pager .gap { border: 0; min-width: 20px; padding: 0; color: var(--dim); }
.pager__info { margin-right: auto; border: 0 !important; padding: 0 !important; color: var(--mut); }

/* ---------- ember band ---------- */
.band { border-radius: var(--r-lg); background: var(--acc); color: #fff; padding: clamp(28px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 5vw, 70px); align-items: center; overflow: hidden; position: relative; }
.band h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.055em; line-height: .98; margin-bottom: 26px; }
.band p { max-width: 560px; margin-bottom: 14px; color: rgba(255,255,255,.95); }
.band .btn { margin-top: 14px; }
.band .frame { aspect-ratio: 7/6; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg2); }
.stat { padding: clamp(22px, 3vw, 44px); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 12px; font-size: 14px; color: var(--mut); }

/* ---------- business ---------- */
.biz { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.biz .frame { aspect-ratio: 7/6; }
.biz h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); margin-bottom: 24px; }
.biz p { color: var(--mut); margin-bottom: 14px; max-width: 600px; }

/* ---------- post ---------- */
.pthero { --glass: rgba(255,255,255,.14); position: relative; padding: 170px 0 70px; color: #fff; overflow: hidden; background: #0B1437; }
.pthero__bg { position: absolute; inset: -8% 0; }
.pthero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.9) blur(5px); }
.js .pthero__bg img { animation: heroZoom 2.4s var(--ease) both; }
.pthero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,55,.7) 0%, rgba(11,20,55,.6) 30%, rgba(11,20,55,.76) 70%, #0B1437 100%), linear-gradient(90deg, rgba(47,75,255,.45), rgba(47,75,255,0) 65%); }
.pthero .wrap { position: relative; }
.pthero .crumb { color: rgba(255,255,255,.75); }
.pthero h1 { font-size: clamp(2.1rem, 4.8vw, 4.2rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.02; max-width: 17em; }
.pthero .meta { margin-top: 26px; color: rgba(255,255,255,.8); font-size: 14px; }
.pthero .meta img { width: 28px; height: 28px; border-radius: 50%; }
.pthero .chip { color: #fff; border-color: rgba(255,255,255,.4); }
.sb-post { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(30px, 5vw, 80px); align-items: start; padding-block: 50px clamp(60px, 8vw, 110px); }
.src { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border: 1px solid var(--line2); border-radius: 100px; background: var(--bg2); font-size: 15px; transition: border-color .3s; }
.src:hover { border-color: var(--acc); }
.src > .ico { color: var(--acc); font-size: 18px; }
.src__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; user-select: all; }
.src button { padding: 9px 16px; border-radius: 100px; background: var(--bg3); font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; transition: background .3s, color .3s; flex: none; }
.src button:hover, .src button.is-done { background: var(--acc); color: #fff; }
.post__body { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.5; letter-spacing: -.02em; margin-block: 34px; max-width: 34em; }
.post__tax { display: grid; gap: 14px; padding-block: 24px; border-block: 1px solid var(--line); }
.post__tax div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post__tax dt { font-size: 13px; color: var(--mut); width: 92px; }
.post__tax dd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 13px; color: var(--mut); }
.share a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 15px; color: var(--tx); transition: .35s var(--ease); }
.share a:hover { background: var(--acc); border-color: var(--acc); color: #fff; transform: translateY(-4px); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.pn a { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); transition: .4s var(--ease); }
.pn a:hover { border-color: var(--acc); transform: translateY(-4px); }
.pn small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--acc); margin-bottom: 8px; font-weight: 600; }
.pn b { font-weight: 600; letter-spacing: -.02em; line-height: 1.3; display: block; }
.pn a:last-child { text-align: right; }
.pn a:last-child small { justify-content: flex-end; }
.side { position: sticky; top: 84px; display: grid; gap: 14px; }
.box { padding: 20px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }
.box h2 { font-size: 15px; letter-spacing: -.01em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.box h2::before { content: ""; width: 8px; height: 8px; background: var(--acc); border-radius: 2px; transform: rotate(45deg); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: rotate(225deg) scale(1.35); } }
.recent li + li { border-top: 1px solid var(--line); }
.recent a { display: block; padding: 9px 0; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--mut); transition: color .3s, padding .35s var(--ease); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent a:hover { color: var(--tx); padding-left: 8px; }
.box .ovl__cats { margin: 0; gap: 6px; }

/* ---------- categories index ---------- */
.az { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-block: 1px solid var(--line); padding-block: 12px; }
.az__in { display: flex; align-items: center; gap: 18px; }
.az .search { flex: 0 1 330px; }
.az .search input { padding-block: 5px; }
.az__letters { display: flex; flex: 1; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-right: 120px; }
.az__letters a { min-width: 30px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--mut); transition: .25s; }
.az__letters a:hover, .az__letters a.is-on { background: var(--acc); color: #fff; }
.lgroup { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-block: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.lgroup > h2 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 500; color: var(--bg4); line-height: .9; position: sticky; top: 90px; align-self: start; transition: color .4s; }
.lgroup:hover > h2 { color: var(--acc); }
.lgroup ul { columns: 4 190px; column-gap: 26px; }
.lgroup li { break-inside: avoid; }
.lgroup li a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; color: var(--mut); transition: color .25s, gap .3s var(--ease); }
.lgroup li a::before { content: ""; width: 0; height: 1px; background: var(--acc); transition: width .3s var(--ease); }
.lgroup li a:hover { color: var(--tx); }
.lgroup li a:hover::before { width: 14px; }
.empty { display: none; padding: 60px 0; color: var(--mut); font-size: 18px; }

/* ---------- sitemap ---------- */
.smap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.smap__col { display: grid; gap: 20px; }
.smap .box { padding: clamp(20px, 2.6vw, 34px); }
.smap .box h2 { font-size: 20px; margin-bottom: 18px; }
.tree li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--mut); transition: color .3s, padding .35s var(--ease); }
.tree li a .ico { color: var(--acc); opacity: 0; transform: translate(-6px, 6px); transition: .35s var(--ease); }
.tree li a:hover { color: var(--tx); padding-left: 10px; }
.tree li a:hover .ico { opacity: 1; transform: none; }
.tree--cols { columns: 3 190px; column-gap: 30px; }
.tree--cols li { break-inside: avoid; }

/* ---------- footer ---------- */
.ftr { margin: 0 clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px); border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line); padding-top: clamp(40px, 6vw, 80px); overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.ftr__lead { display: flex; gap: 18px; }
.ftr__lead svg { width: 44px; height: 44px; flex: none; margin-top: 6px; }
.ftr__lead h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 500; }
.ftr__lead p { color: var(--mut); font-size: 14px; margin-top: 12px; max-width: 380px; }
.ftr__mid { display: grid; grid-template-columns: 160px 1fr; gap: 40px; margin-top: clamp(40px, 5vw, 70px); padding-top: 34px; border-top: 1px solid var(--line); }
.ftr__mid h3 { font-size: 12.5px; font-weight: 500; color: var(--dim); letter-spacing: 0; margin-bottom: 14px; }
.ftr__mid li a { display: inline-block; padding: 4px 0; color: var(--mut); position: relative; transition: color .3s; }
.ftr__mid li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.ftr__mid li a:hover { color: var(--tx); }
.ftr__mid li a:hover::after { transform: none; transform-origin: left; }
.ftr__cats { columns: 3 150px; }
.ftr__word { display: flex; justify-content: center; margin-top: clamp(20px, 4vw, 50px); font-size: clamp(2rem, 9.6vw, 9rem); font-weight: 700; letter-spacing: -.065em; line-height: .9; white-space: nowrap; overflow: hidden; padding-bottom: .08em; }
.ftr__word span { display: inline-block; }
.js .ftr__word span { transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 35ms); }
.js .ftr__word.is-in span { transform: none; }
.ftr__word span.sp { width: .22em; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 20px 64px 20px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--mut); }
.ftr__bot a:hover { color: var(--acc); }

.top { position: fixed; right: var(--pad); bottom: 22px; z-index: 100; width: 46px; height: 46px; border-radius: 50%; background: var(--bg3); color: var(--tx); display: grid; place-items: center; font-size: 16px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: .4s var(--ease); }
.top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.top:hover { background: var(--acc); color: #fff; }
.top svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.top svg.ring circle { fill: none; stroke: var(--acc); stroke-width: 2; stroke-dasharray: 138; stroke-dashoffset: calc(138 - 138 * var(--p, 0)); }

/* ---------- motion primitives (only when JS is on) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-split] .wi { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left top; transition: transform .95s var(--ease); transition-delay: calc(var(--k, 0) * 45ms + var(--delay, 0ms)); }
.js [data-split].is-in .wi { transform: none; }
.js [data-fill] .fw { opacity: .22; transition: opacity .35s; }
.js [data-fill] .fw.on { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat, .stories, .why, .sb-post, .smap { grid-template-columns: minmax(0, 1fr); }
  .feat__side, .stories__side, .why__side, .side { position: static; }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side .box:first-child { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .badge { display: none; }
}
@media (max-width: 760px) {
  .hero__in, .band, .biz, .ftr__top, .ovl__in, .ftr__mid { grid-template-columns: minmax(0, 1fr); }
  .hero__in { padding-top: 120px; }
  .hero__side { order: 2; }
  .hero__row ul { grid-template-columns: repeat(2, 1fr); }
  .hero__row a { padding-block: 14px; }
  .grid--2, .grid--3, .side, .pn { grid-template-columns: minmax(0, 1fr); }
  .grid--stag > :nth-child(even) { margin-top: 0; }
  .row { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .row p { grid-column: 2 / -1; grid-row: 2; }
  .lgroup { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lgroup > h2 { position: static; }
  .az__in { flex-direction: column; align-items: stretch; gap: 10px; }
  .az .search { flex: none; margin-right: 112px; }
  .az__letters { padding-right: 0; }
  .ovl__in { align-items: start; padding-top: 90px; }
  .src { flex-wrap: wrap; border-radius: var(--r); padding: 12px; }
  .src__url { flex-basis: 70%; }
  .post__tax dt { width: 100%; }
  .stack__card { position: static; }
  .phead { padding-top: 120px; }
  .pthero { padding-top: 130px; }
}
@media (max-width: 460px) {
  .logo span { font-size: 17px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .hero__card { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .mq__track, .phead__ghost { animation: none !important; }
  .cur { display: none !important; }
}

/* ---------- logo mark colors ---------- */
.m1 { fill: var(--acc); } .m2 { fill: #fff; }
.hdr:not(.hdr--solid) .logo .m1, .curtain .m1, .hero__note .m1, .band .m1 { fill: #fff; }
.hdr:not(.hdr--solid) .logo .m2, .curtain .m2, .hero__note .m2, .band .m2 { fill: var(--acc); }
.stories__side .logo svg { width: 34px; height: 34px; }

/* post title links to the bookmarked site */
.pthero__link { transition: color .3s; }
.pthero__link:hover { color: var(--acc2); }
.pthero__link .wi { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .12em; transition: transform .95s var(--ease), text-decoration-color .3s; transition-delay: calc(var(--k, 0) * 45ms + var(--delay, 0ms)), 0s; }
.pthero__link:hover .wi { text-decoration-color: currentColor; }

/* ---------- light-first palette adjustments ---------- */
.hdr--solid .nav { background: var(--bg2); }
.hdr--solid .nav > li > a:hover, .hdr--solid .nav > li > button:hover, .hdr--solid .nav a[aria-current] { background: var(--tx); color: var(--bg); }
.bm__shot, .box, .stats, .stack__card, .pn a, .src { box-shadow: 0 1px 2px rgba(11,20,55,.04), 0 18px 40px -28px rgba(11,20,55,.28); }

/* ---------- WordPress additions ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.admin-bar .fab { top: 50px; }
.admin-bar .az { top: 32px; }
.admin-bar .side { top: 116px; }
@media (max-width: 782px) { .admin-bar .fab { top: 64px; } .admin-bar .az { top: 46px; } }
@media (max-width: 600px) { .admin-bar .az { top: 0; } }
.logo--img img { max-height: 44px; width: auto; }
.pager .dots { border: 0; min-width: 20px; padding: 0; color: var(--dim); }
.pager .current { background: var(--acc); border-color: var(--acc); color: #fff; }
.pager .prev, .pager .next { font-size: 16px; }
.post__body > * + * { margin-top: .8em; }
.post__body a { color: var(--acc); text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.post__body img { border-radius: var(--r); }
.post__tax .pld-like-dislike-wrap { margin: 0 0 0 10px; }
.lgroup li a small { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.entry { max-width: 760px; font-size: 17px; }
.entry > * + * { margin-top: 1em; }
.entry h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 1.6em; }
.entry h3 { font-size: 1.35rem; margin-top: 1.4em; }
.entry a { color: var(--acc); text-decoration: underline; text-underline-offset: .15em; }
.entry ul { list-style: disc; padding-left: 1.2em; }
.entry ol { list-style: decimal; padding-left: 1.2em; }
.alignleft { float: left; margin: 0 1.2em 1em 0; } .alignright { float: right; margin: 0 0 1em 1.2em; } .aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; } .wp-caption-text { font-size: 13px; color: var(--mut); }

/* =====================================================================
   v1.1 visual refresh: second accent colours, richer hero, card panels,
   gradient list headers, framed story page
   ===================================================================== */
:root { --lime: #C8F169; --violet: #6B4BFF; --amber: #FFC857; --grad: linear-gradient(135deg, #2F4BFF 0%, #6B4BFF 100%); }

.prog { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 130; background: linear-gradient(90deg, var(--acc), var(--violet), var(--lime)); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; }
.admin-bar .prog { top: 32px; }
@media (max-width: 782px) { .admin-bar .prog { top: 46px; } }

.btn--lime { background: var(--lime); color: #0B1437; }
.btn--lime::before { background: #0B1437; }
.btn--lime:hover { color: #fff; }
.mq__track a::after { background: var(--violet); }

/* section header row */
.shead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 4vw, 50px); }
.shead h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
.shead p:not(.label) { color: var(--mut); max-width: 480px; margin-top: 12px; }
.sec--panel { background: var(--bg2); border-block: 1px solid var(--line); }

/* ---------- home hero ---------- */
.hero--v2 { min-height: 0; display: block; padding-bottom: 120px; background: #1F35C4; }
.hero--v2 .hero__bg::before { background: var(--grad); }
.hero--v2 .hero__bg::after { background: linear-gradient(100deg, rgba(11,20,55,.82) 0%, rgba(11,20,55,.45) 55%, rgba(11,20,55,.15) 100%); }
.hero__in2 { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding-top: 150px; padding-bottom: 30px; }
.hero__pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 100px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); font-size: 13.5px; font-weight: 500; margin-bottom: 22px; }
.hero__pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: ping 1.8s infinite; }
@keyframes ping { from { box-shadow: 0 0 0 0 rgba(200,241,105,.7); } to { box-shadow: 0 0 0 12px rgba(200,241,105,0); } }
.hero--v2 h1 { font-size: clamp(2.4rem, 5.2vw, 4.7rem); max-width: 11em; }
.hero__lead { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; max-width: 540px; margin-top: 22px; color: rgba(255,255,255,.92); }
.hero__search { max-width: 560px; margin-top: 30px; }
.hero__search .search { background: #fff; border: 0; padding: 7px; box-shadow: 0 30px 60px -24px rgba(5,10,40,.7); }
.hero__search .search input { color: #0B1437; padding: 12px 18px; font-size: 16px; }
.hero__search .search input::placeholder { color: #6A7396; }
.hero__search .search button { width: 50px; height: 50px; background: var(--grad); }
.hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.8); }
.hero__tags .chip, .ahero .chip { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.hero__tags .chip:hover, .ahero .chip:hover { background: #fff; border-color: #fff; color: #0B1437; }
.ahero .chip.is-on { background: var(--lime); border-color: var(--lime); color: #0B1437; }

.hstack { position: relative; height: clamp(360px, 35vw, 470px); }
.hcard { position: absolute; width: 74%; border-radius: 14px; overflow: hidden; background: #fff; color: #0B1437; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 80px -30px rgba(5,10,40,.75); transition: scale .5s var(--ease), rotate .5s var(--ease), box-shadow .5s; animation: floatA 7s ease-in-out infinite; }
.hcard:nth-of-type(1) { right: 0; top: 0; rotate: 5deg; z-index: 1; }
.hcard:nth-of-type(2) { left: 0; top: 17%; rotate: -5deg; z-index: 2; animation-delay: -2.4s; }
.hcard:nth-of-type(3) { left: 15%; top: 40%; rotate: 1deg; z-index: 3; animation-delay: -4.6s; }
.hcard:hover { scale: 1.05; rotate: 0deg; z-index: 6; box-shadow: 0 50px 90px -30px rgba(5,10,40,.9); }
.hcard .bm__bar { background: #EEF1F8; border-color: rgba(11,20,55,.08); }
.hcard .bm__bar i { background: #CFD6E8; }
.hcard .bm__bar i:first-child { background: var(--acc); }
.hcard .bm__url { background: #fff; color: #4A557A; }
.hcard__cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 13px; border-radius: 10px; background: rgba(11,20,55,.86); color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes floatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hstack .badge { display: grid; left: auto; right: -6px; top: auto; bottom: -34px; z-index: 7; }
.hstack .badge__core { background: var(--lime); color: #0B1437; }

.stats--float { position: relative; z-index: 5; margin-top: -72px; background: var(--bg2); box-shadow: 0 34px 70px -36px rgba(11,20,55,.45); }
.stats--float .stat b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

/* ---------- feature tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { --tc: #2F4BFF; --ti: #fff; position: relative; padding: 26px 24px 30px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: translate .5s var(--ease), box-shadow .5s, border-color .3s; }
.tile::after { content: ""; position: absolute; z-index: -1; right: -46px; top: -46px; width: 130px; height: 130px; border-radius: 50%; background: var(--tc); opacity: .16; transition: scale .7s var(--ease), opacity .4s; }
.tile:hover { translate: 0 -8px; border-color: var(--tc); box-shadow: 0 30px 50px -32px rgba(47,75,255,.55); }
.tile:hover::after { scale: 2.6; opacity: .1; }
.tile__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--tc); color: var(--ti); margin-bottom: 40px; transition: rotate .5s var(--ease), scale .5s var(--ease); }
.tile:hover .tile__ico, .stack__card:hover .tile__ico { rotate: -8deg; scale: 1.08; }
.tile h3 { font-size: 1.3rem; letter-spacing: -.03em; margin-bottom: 10px; }
.tile p { font-size: 14.5px; color: var(--mut); }
.tile:nth-child(4n+2), .stack__card:nth-child(4n+2) { --tc: #C8F169; --ti: #0B1437; }
.tile:nth-child(4n+3), .stack__card:nth-child(4n+3) { --tc: #6B4BFF; --ti: #fff; }
.tile:nth-child(4n+4), .stack__card:nth-child(4n+4) { --tc: #FFC857; --ti: #0B1437; }
.stack__card { --tc: #2F4BFF; --ti: #fff; background: var(--bg); border-top: 3px solid var(--tc); }
.stack__card:nth-child(even) { background: var(--bg); }
.stack__card .tile__ico { margin-bottom: 30px; }

/* ---------- story cards as panels ---------- */
.bm { position: relative; padding: 10px 10px 20px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); transition: opacity .9s var(--ease), transform .9s var(--ease), translate .5s var(--ease), box-shadow .5s, border-color .3s; }
.bm:hover { translate: 0 -8px; border-color: transparent; box-shadow: 0 0 0 1.5px var(--acc), 0 34px 60px -34px rgba(47,75,255,.6); }
.bm__media { position: relative; }
.bm__shot, .bm:hover .bm__shot { border-radius: 12px; transform: none; box-shadow: none; border-color: var(--line); }
.bm__fav { width: 16px; height: 16px; border-radius: 4px; margin-left: 8px; flex: none; }
.bm__fav + .bm__url { margin-left: 2px; }
.bm__cat { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: #fff; border-color: #fff; color: #0B1437; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(11,20,55,.5); }
.bm__go { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; background: var(--lime); color: #0B1437; display: grid; place-items: center; font-size: 18px; scale: 0; rotate: -45deg; transition: scale .45s var(--ease), rotate .45s var(--ease); }
.bm:hover .bm__go { scale: 1; rotate: 0deg; }
.bm__body { padding: 16px 10px 0; }
.grid--feature .bm--wide { grid-column: span 2; grid-row: span 2; }
.bm--wide .bm__img { aspect-ratio: 16/10.4; }
.bm--wide .bm__body { flex: 1; justify-content: center; gap: 14px; padding-top: 20px; }
.bm--wide h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.12; }
.bm--wide p { font-size: 16px; -webkit-line-clamp: 4; }

/* ---------- ember band becomes a gradient panel ---------- */
.band { background: var(--grad); }
.band::before { content: ""; position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; border: 70px solid rgba(255,255,255,.07); pointer-events: none; }
.band::after { content: ""; position: absolute; left: -60px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--lime); opacity: .22; filter: blur(50px); pointer-events: none; }
.band > * { position: relative; z-index: 1; }

/* ---------- gradient header for list pages ---------- */
.ahero { --glass: rgba(255,255,255,.14); position: relative; padding: 150px 0 clamp(54px, 6vw, 84px); color: #fff; background: var(--grad); overflow: hidden; border-radius: 0 0 34px 34px; }
.ahero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%); }
.ahero__blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: orb 10s ease-in-out infinite alternate; }
.ahero__blob--a { right: 4%; top: -120px; width: 380px; height: 380px; background: var(--lime); opacity: .32; }
.ahero__blob--b { left: -80px; bottom: -160px; width: 420px; height: 420px; background: #0B1437; opacity: .55; animation-delay: -4s; }
.ahero .wrap { position: relative; }
.ahero .crumb { color: rgba(255,255,255,.8); }
.ahero .crumb a:hover { color: var(--lime); }
.ahero .crumb li + li::before { color: rgba(255,255,255,.5); }
.ahero h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.ahero p { max-width: 580px; margin-top: 18px; font-size: 17px; color: rgba(255,255,255,.9); }
.ahero .phead__ghost { -webkit-text-stroke: 1px rgba(255,255,255,.13); }
.ahero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.apill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; }
.apill b { color: var(--lime); font-weight: 700; }
.apill .ico { font-size: 16px; }
.ahero .phead__meta { margin-top: 18px; }
.ahero .hero__search { margin-top: 24px; }

/* ---------- story page ---------- */
.pthero { padding: 150px 0 clamp(110px, 11vw, 150px); border-radius: 0 0 34px 34px; }
.pthero__bg img { filter: blur(10px) saturate(1.1); object-position: center; }
.pthero__bg::after { background: linear-gradient(115deg, rgba(11,20,55,.94) 0%, rgba(47,75,255,.84) 62%, rgba(107,75,255,.78) 100%); }
.pthero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.pthero h1 { font-size: clamp(1.9rem, 3.5vw, 3.2rem); line-height: 1.06; }
.pthero__link:hover { color: var(--lime); }
.pshot { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 50px 90px -30px rgba(5,10,40,.85); rotate: 2deg; animation: floatA 8s ease-in-out infinite; transition: opacity .9s var(--ease), transform .9s var(--ease), rotate .6s var(--ease); }
.pshot:hover { rotate: 0deg; }
.pshot .bm__bar { background: #EEF1F8; border-color: rgba(11,20,55,.08); }
.pshot .bm__bar i { background: #CFD6E8; }
.pshot .bm__bar i:first-child { background: var(--acc); }
.pshot .bm__url { background: #fff; color: #4A557A; }
.sb-post { position: relative; z-index: 3; margin-top: -64px; padding-top: 0; }
.pcard { background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 40px); box-shadow: 0 34px 70px -44px rgba(11,20,55,.45); }
.pcard .src { background: var(--bg); box-shadow: none; }
.pcard .post__body { margin-block: 28px; }
.pcard .pn a { background: var(--bg); box-shadow: none; }
.pcard .pn a:hover { background: var(--grad); border-color: transparent; color: #fff; }
.pcard .pn a:hover small { color: var(--lime); }
.side .box { border-radius: 20px; box-shadow: 0 34px 70px -44px rgba(11,20,55,.45); }
.box--search { background: var(--grad); border-color: transparent; color: #fff; }
.box--search h2::before { background: var(--lime); }
.box--search .search { background: #fff; border: 0; }
.box--search .search input { color: #0B1437; }
.box--search .search input::placeholder { color: #6A7396; }
.rlist li + li { border-top: 1px solid var(--line); }
.rlist a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; transition: translate .35s var(--ease); }
.rlist a:hover { translate: 6px 0; }
.rlist__img { display: block; aspect-ratio: 16/11; border-radius: 8px; overflow: hidden; background: var(--bg3); border: 1px solid var(--line); }
.rlist__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rlist__tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; transition: color .3s; }
.rlist a:hover b { color: var(--acc); }
.rlist__tx small { display: block; margin-top: 3px; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--feature .bm--wide { grid-row: span 1; }
  .hstack .badge { display: none; }
  .sb-post { margin-top: -40px; }
}
@media (max-width: 900px) {
  .hero__in2, .pthero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__in2 { padding-top: 120px; }
  .hstack { height: 300px; max-width: 520px; }
  .pshot { max-width: 520px; }
}
@media (max-width: 760px) {
  .grid--feature .bm--wide { grid-column: span 1; }
  .stats--float { margin-top: -50px; }
  .hero--v2 { padding-bottom: 90px; }
  .ahero, .pthero { border-radius: 0 0 22px 22px; padding-top: 120px; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile__ico { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hcard, .pshot { animation: none !important; } }


/* =====================================================================
   v1.2: equal story cards, lighter and smoother motion
   ===================================================================== */
/* first story is the same size as the rest */
.grid--feature .bm--wide { grid-column: auto; grid-row: auto; }
.bm__body { padding: 14px 10px 0; gap: 9px; }
.shead { margin-bottom: clamp(22px, 3vw, 36px); }

/* hero image is pre-tinted, so no live filters or blend modes */
.hero--v2 .hero__bg { inset: 0; }
.hero--v2 .hero__bg img { filter: none; animation: none; transform: none; }
.hero--v2 .hero__bg::before { display: none; }
.pthero__bg { inset: 0; }
.pthero__bg img, .js .pthero__bg img { animation: none; transform: translateZ(0) scale(1.08); }

/* page load: a quick fade instead of a sliding curtain */
.js .curtain { background: var(--bg); animation: curtainFade .45s .05s ease-out forwards; transform: none; }
.curtain svg { display: none; }
@keyframes curtainFade { to { opacity: 0; visibility: hidden; } }

/* reveals: shorter travel, shorter time, capped stagger, no word rotation */
.js [data-reveal] { transform: translate3d(0, 22px, 0); transition: opacity .7s cubic-bezier(.25,.6,.3,1), transform .7s cubic-bezier(.25,.6,.3,1); transition-delay: calc(min(var(--d, 0), 6) * 60ms); will-change: opacity, transform; }
.js [data-reveal].is-in { transform: none; }
.js [data-reveal].is-done { transition-delay: 0s !important; will-change: auto; }
.js [data-split] .wi { transform: translate3d(0, 105%, 0); transition: transform .75s cubic-bezier(.25,.6,.3,1); transition-delay: calc(var(--k, 0) * 28ms + var(--delay, 0ms)); }
.js .hero [data-split] .wi, .js .ahero [data-split] .wi, .js .pthero [data-split] .wi, .js .phead [data-split] .wi { transition-delay: calc(var(--k, 0) * 28ms + 150ms); }
.js .frame[data-reveal] img { transform: scale(1.22); transition: clip-path .9s cubic-bezier(.25,.6,.3,1), transform 1.2s cubic-bezier(.25,.6,.3,1); }
.bm { transition: opacity .7s cubic-bezier(.25,.6,.3,1), transform .7s cubic-bezier(.25,.6,.3,1), translate .4s var(--ease), box-shadow .4s, border-color .3s; }
.bm.is-done, .tile.is-done { transition-delay: 0s !important; }
.pshot { transition: opacity .7s, transform .7s, rotate .6s var(--ease); }
.frame img, .hcard, .pshot { will-change: transform; }

/* snapshots fade in over a soft shimmer instead of popping in */
.bm__img, .rlist__img { position: relative; background: linear-gradient(100deg, var(--bg3) 20%, var(--bg2) 40%, var(--bg3) 60%) 0 0 / 220% 100%; animation: shimmer 1.6s linear infinite; }
.bm__img.is-loaded, .rlist__img.is-loaded { animation: none; background: var(--bg2); }
.js .bm__img img, .js .rlist__img img { opacity: 0; transition: opacity .6s ease, transform 1.2s var(--ease), filter .5s; }
.js .bm__img.is-loaded img, .js .rlist__img.is-loaded img { opacity: 1; }
@keyframes shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .bm__img, .rlist__img { animation: none !important; } }