/* ZED WEBTECH — v4 design system (bolder light: gradient navy, family glows, key-vault motif) ("Swiss financial precision": light, slate, navy, blue, emerald) */
:root {
  --canvas: #F8FAFC; --surface: #FFFFFF; --elev: #F1F5F9; --subtle: #E2E8F0;
  --ink: #0F172A; --ink-2: #475569; --muted: #64748B;
  --line: #E2E8F0; --line-2: #CBD5E1;
  --navy: #0A2540; --navy-2: #031B33; --navy-3: #13365C;
  --blue: #2563EB; --blue-2: #1D4ED8; --blue-soft: #EFF6FF; --blue-ring: #BFDBFE;
  --green: #059669; --green-soft: #ECFDF5; --green-line: #A7F3D0;
  --amber: #D97706; --amber-soft: #FFFBEB; --amber-line: #FDE68A;
  --red: #DC2626; --red-soft: #FEF2F2; --red-line: #FECACA;
  --key-bg: #0F172A; --key-text: #38BDF8; --key-line: #1E293B;
  --office: #E11D48; --windows: #2563EB; --project: #059669; --visio: #7C3AED;
  --f-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --sh-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.08);
  --sh-md: 0 12px 32px -14px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.05);
  --sh-lg: 0 36px 70px -32px rgba(10,37,64,.35), 0 8px 20px -10px rgba(15,23,42,.1);
  --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --t: .2s var(--ease); --t-slow: .55s var(--ease);
  --grad-navy: linear-gradient(135deg, #0A2540 0%, #13365C 45%, #2563EB 100%); --grad-text: linear-gradient(135deg, #0A2540 0%, #2563EB 55%, #06B6D4 100%);
  --glass: rgba(255,255,255,.86); --glass-line: rgba(255,255,255,.7); --sh-glow: 0 24px 60px -20px rgba(37,99,235,.35);
  --office-soft: #FFF1F2; --windows-soft: #EFF6FF; --project-soft: #ECFDF5; --visio-soft: #F5F3FF;
  --wrap: 1240px; --nav-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 var(--f-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-head); letter-spacing: -0.025em; margin: 0; color: var(--ink); line-height: 1.15; }
h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; }
h4 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--navy); color: #fff; }
html { scrollbar-color: var(--line-2) transparent; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .grad { color: var(--blue); } }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; font-weight: 500; }
.eyebrow { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.muted { color: var(--muted); }
.ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color var(--t), color var(--t); }
.ul:hover { color: var(--blue); text-decoration-color: var(--blue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 200; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 48px); }
.section { padding: clamp(60px, 8vw, 110px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.section--alt { background: var(--canvas); }
.section--line { border-top: 1px solid var(--line); }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; }
.shead__n { font: 700 11px var(--f-mono); color: var(--muted); letter-spacing: .1em; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--line-2); }
.section--dots { background-image: radial-gradient(rgba(15,23,42,.08) 1px, transparent 1px); background-size: 18px 18px; }
.shead > div { max-width: 640px; }
.shead p:not(.eyebrow) { color: var(--ink-2); margin: 12px 0 0; font-size: 17px; }
.link-arrow { font-weight: 600; color: var(--blue); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.link-arrow span { transition: transform var(--t); }
.link-arrow:hover span { transform: translateX(4px); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 1; border: 1px solid transparent; white-space: nowrap; transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t); position: relative; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--blue-ring); }
.btn--primary { background: var(--grad-navy); background-size: 160% 160%; background-position: 0 0; color: #fff; box-shadow: 0 10px 24px -14px rgba(10,37,64,.8); transition: background-position .5s var(--ease), box-shadow var(--t), transform var(--t); }
.btn--primary:hover { background-position: 100% 100%; box-shadow: 0 16px 32px -14px rgba(37,99,235,.6); transform: translateY(-1px); }
.btn--shine { overflow: hidden; isolation: isolate; }
.btn--shine::before { content: ''; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 35%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform: translateX(-180%) skewX(-18deg); transition: transform .8s var(--ease); z-index: -1; }
.btn--shine:hover::before { transform: translateX(520%) skewX(-18deg); }
.btn--accent { background: var(--blue); color: #fff; box-shadow: 0 12px 28px -12px rgba(37,99,235,.8); }
.btn--accent:hover { background: var(--blue-2); transform: translateY(-1px); box-shadow: var(--sh-glow); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--elev); border-color: var(--ink-2); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--blue-soft); }
.btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.btn--lg { padding: 18px 32px; font-size: 16px; border-radius: 14px; }
.btn--block { width: 100%; }
.btn span[aria-hidden] { transition: transform var(--t); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading::after { content: ''; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--red); }
.linkbtn--blue:hover { color: var(--blue); }

/* pills, badges, chips */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-weight: 500; font-size: 14px; transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }
.pill:hover { border-color: var(--ink-2); color: var(--ink); }
.pill.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill--sm { padding: 7px 12px; font-size: 13px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; }
.badge--save { background: var(--red-soft); color: #B91C1C; border-color: var(--red-line); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.badge--plat { background: var(--elev); color: var(--ink-2); border-color: var(--line); border-radius: 8px; }
.badge--ok { background: var(--green-soft); color: #047857; border-color: var(--green-line); }
.badge--warn { background: var(--amber-soft); color: #B45309; border-color: var(--amber-line); }
.badge--info { background: var(--blue-soft); color: var(--blue-2); border-color: var(--blue-ring); }
.badge--muted { background: var(--elev); color: var(--muted); border-color: var(--line); }
.badge--paid { background: var(--green-soft); color: #047857; border-color: var(--green-line); }
.badge--initiated { background: var(--blue-soft); color: var(--blue-2); border-color: var(--blue-ring); }
.badge--failed, .badge--expired, .badge--refunded { background: var(--red-soft); color: #B91C1C; border-color: var(--red-line); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: var(--elev); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.tag b { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; font: 700 12px var(--f-head); background: var(--navy); }

/* header */
.nav { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t); }
.nav.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(15,23,42,.3); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 28px; width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-head); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--navy); }
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__word span { color: var(--blue); font-weight: 600; }
.nav__links { display: flex; gap: 4px; margin-left: 8px; }
.nav__links a { padding: 9px 13px; border-radius: 10px; font-weight: 500; font-size: 14.5px; color: var(--ink-2); transition: background-color var(--t), color var(--t); }
.nav__links a:hover { color: var(--ink); background: var(--elev); }
.nav__links a.is-active { color: var(--navy); font-weight: 600; background: var(--blue-soft); }
.nav__links .nav__track { display: inline-flex; align-items: center; gap: 8px; }
.nav__links .nav__track svg { color: var(--blue); }
/* "Microsoft Products" mega menu */
.nav__dd { position: static; }
.nav__dd-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; border: 0; background: none; font: 500 14.5px var(--f-body); color: var(--ink-2); cursor: pointer; transition: background-color var(--t), color var(--t); }
.nav__dd-btn svg { transition: transform var(--t); }
.nav__dd-btn:hover, .nav__dd.is-open .nav__dd-btn { color: var(--ink); background: var(--elev); }
.nav__dd.is-active .nav__dd-btn { color: var(--navy); font-weight: 600; background: var(--blue-soft); }
.nav__dd.is-open .nav__dd-btn svg { transform: rotate(180deg); }
.mega { position: absolute; left: 50%; top: calc(var(--nav-h) + 8px); transform: translate(-50%, 6px); width: min(1260px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(10,37,64,.35), 0 10px 30px -20px rgba(10,37,64,.2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; z-index: 95; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__dd.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.mega__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 236px; gap: 0; }
.mega__col { padding: 24px 20px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mega__head { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 2px solid var(--navy); margin-bottom: 4px; }
.mega__head strong { font: 700 15px var(--f-head); color: var(--navy); letter-spacing: -.01em; }
.mega__head small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__head:hover strong { color: var(--blue); }
.mega__group { margin: 8px 0 0; font: 600 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 8px; margin: 0 -8px; border-radius: 10px; font-size: 13.5px; white-space: nowrap; font-weight: 500; color: var(--ink-2); transition: background-color var(--t), color var(--t); }
.mega__list a small { font: 600 12px var(--f-mono); color: var(--muted); white-space: nowrap; }
.mega__list a:hover { background: var(--blue-soft); color: var(--navy); }
.mega__list a:hover small { color: var(--blue); }
.mega__all { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.mega__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega__aside { padding: 26px 24px; background: var(--elev); border-radius: 0 22px 22px 0; display: grid; gap: 12px; align-content: start; }
.mega__aside .eyebrow { color: var(--muted); }
.mega__aside-link { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.mega__aside-link:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(37,99,235,.6); }
.mega__aside-link strong { font: 700 14px var(--f-head); color: var(--navy); }
.mega__aside-link small { font-size: 12.5px; color: var(--muted); }
.mega__note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 1280px) { .mega__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mega__aside { display: none; } .mega__col:last-of-type { border-right: 0; } }
.nav__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__call { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--navy); padding: 9px 12px; border-radius: 10px; transition: background-color var(--t); }
.nav__call:hover { background: var(--elev); }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav__burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.cur select { appearance: none; -webkit-appearance: none; font: 500 13.5px var(--f-body); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 12px no-repeat; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 30px 9px 12px; cursor: pointer; transition: border-color var(--t), box-shadow var(--t); }
.cur select:hover { border-color: var(--ink-2); }
.cur select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-ring); }
.menu { display: none; border-top: 1px solid var(--line); background: #fff; padding: 12px 24px 24px; }
.menu.is-open { display: block; animation: fadeDown .35s var(--ease); }
.menu a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-family: var(--f-head); font-weight: 700; font-size: 20px; color: var(--navy); }
.menu__acc { border-bottom: 1px solid var(--line); }
.menu__acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; font: 700 20px var(--f-head); color: var(--navy); cursor: pointer; list-style: none; }
.menu__acc summary::-webkit-details-marker { display: none; }
.menu__acc summary svg { transition: transform var(--t); color: var(--blue); }
.menu__acc[open] summary svg { transform: rotate(180deg); }
.menu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 0 4px 16px; }
.menu__col { display: grid; align-content: start; gap: 1px; }
.menu .menu__colhead { border: 0; padding: 10px 0 6px; font: 700 14px var(--f-head); color: var(--navy); border-bottom: 2px solid var(--navy); margin-bottom: 6px; }
.menu__grp { margin: 8px 0 2px; font: 600 10.5px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu .menu__item { display: flex; justify-content: space-between; gap: 8px; border: 0; padding: 7px 0; font: 500 14.5px var(--f-body); color: var(--ink-2); }
.menu .menu__item small { font: 600 12px var(--f-mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) { .menu__cols { grid-template-columns: 1fr; } }
.menu__foot { display: grid; gap: 10px; padding-top: 18px; }
.menu__more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 6px; }
.menu__more a { font: 600 15px var(--f-body); color: var(--ink-2); padding: 12px 4px; }
.menu__foot a { border: 0; font: 500 15px var(--f-body); color: var(--ink-2); padding: 6px 0; }
.menu__foot .cur select { width: 100%; font-size: 15px; padding: 12px 36px 12px 14px; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F1F5F9 0%, #FFFFFF 55%, var(--canvas) 100%); }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .8; animation: drift 18s ease-in-out infinite alternate; }
.hero__blob--a { width: 620px; height: 620px; right: -140px; top: -200px; background: radial-gradient(circle, rgba(37,99,235,.28), rgba(37,99,235,0) 68%); }
.hero__blob--b { width: 520px; height: 520px; left: 30%; bottom: -320px; background: radial-gradient(circle, rgba(6,182,212,.22), rgba(6,182,212,0) 68%); animation-delay: -9s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-40px, 30px, 0) scale(1.08); } }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 65% 35%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 35%, #000 10%, transparent 72%); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 7vw, 96px); }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 26px; }
.hero__badge b { display: inline-flex; align-items: center; gap: 5px; background: var(--green-soft); color: #047857; border: 1px solid var(--green-line); border-radius: 999px; padding: 3px 9px 3px 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero__title { font-size: clamp(42px, 6vw, 82px); max-width: 12ch; letter-spacing: -0.045em; }
.hero__title em { font-style: normal; display: inline-block; padding-right: .08em; }
.hero__lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); max-width: 54ch; margin: 24px 0 32px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero__trust li { list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.hero__trust svg { color: var(--green); flex: none; }
.hero__trust ul, ul.hero__trust { padding: 0; margin: 34px 0 0; }
.hero__stage { position: relative; min-height: 560px; }
.stage__glow { position: absolute; inset: 10% 0 0; background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(37,99,235,.16), transparent 70%); filter: blur(10px); }
.stage__tile { --c: var(--blue); position: absolute; width: 47%; background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--sh-lg); padding: 12px; display: grid; gap: 4px; animation: float 7s ease-in-out infinite; transform-style: preserve-3d; overflow: hidden; }
.stage__tile--office { --c: var(--office); } .stage__tile--windows { --c: var(--windows); } .stage__tile--project { --c: var(--project); } .stage__tile--visio { --c: var(--visio); }
.stage__sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%); transform: translateX(-120%); transition: transform .9s var(--ease); pointer-events: none; z-index: 2; }
.stage__tile:hover .stage__sheen { transform: translateX(120%); }
.stage__tile::after { content: ''; position: absolute; left: 12px; right: 12px; top: 12px; height: 46%; border-radius: 12px; background: radial-gradient(ellipse 60% 50% at 50% 60%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); pointer-events: none; }
.stage__tile img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, var(--elev)); padding: 10px; margin-bottom: 8px; filter: drop-shadow(0 18px 22px rgba(10,37,64,.16)); position: relative; z-index: 1; }
.stage__tile .tile-fb { aspect-ratio: 1; border-radius: 12px; margin-bottom: 8px; }
.stage__tile strong { font-family: var(--f-head); font-size: 14px; letter-spacing: -0.01em; display: block; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__tile small { color: var(--muted); font-size: 12px; }
.stage__tile em { font-style: normal; font-family: var(--f-head); font-weight: 800; color: var(--navy); font-size: 17px; margin-top: 4px; }
.stage__tile--a { left: 0; top: 0; z-index: 2; animation-delay: -1s; }
.stage__tile--b { right: 0; top: 11%; animation-delay: -3.5s; }
.stage__receipt { position: absolute; left: 8%; right: 8%; bottom: 0; z-index: 3; background: var(--navy); color: #fff; border-radius: 18px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; box-shadow: var(--sh-lg); animation: float 8s ease-in-out infinite; animation-delay: -5s; overflow: hidden; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 14px 14px; }
.vault__key { position: relative; }
.vault__key span { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; animation: typeKey 2.4s steps(29, end) 1s both; border-right: 2px solid #38BDF8; }
@keyframes typeKey { from { width: 0; } to { width: 100%; } }
.vault__beam { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #38BDF8 40%, #6EE7B7 60%, transparent); transform: translateX(-100%); animation: beam 3.6s var(--ease) 1.2s infinite; }
@keyframes beam { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.stage__receipt .mono { color: #B8C4E0; }
.stage__receipt code { grid-column: 1 / -1; font: 700 15px var(--f-mono); letter-spacing: .12em; color: #DDE6FF; }
.stage__receipt b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #6EE7B7; white-space: nowrap; }
.stage__pill { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: var(--sh-md); z-index: 4; animation: float 6s ease-in-out infinite; }
.stage__pill svg { color: var(--green); }
.stage__pill--b { left: 0; top: 76%; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-md); margin-top: -36px; position: relative; z-index: 2; }
.stats__item { padding: 26px 28px; border-right: 1px solid var(--line); display: grid; gap: 6px; }
.stats__item:last-child { border-right: 0; }
.stats__item strong { font-family: var(--f-head); font-size: clamp(30px, 3vw, 42px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; align-items: baseline; }
.stats__item strong small { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.stats__item > span { color: var(--ink-2); font-size: 14px; }
.stats__item strong span { font-size: inherit; color: inherit; }

/* family cards */
.fams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fam { --c: var(--blue); display: grid; gap: 14px; padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); }
.fam::before { content: ''; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); opacity: 0; transition: opacity var(--t-slow), transform var(--t-slow); }
.fam:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.fam:hover::before { opacity: 1; transform: translate(-20px, -20px); }
.fam__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font: 800 18px var(--f-head); }
.fam h3 { font-size: 19px; }
.fam p { color: var(--ink-2); font-size: 14.5px; }
.fam .link-arrow { font-size: 14px; }
.fam--office { --c: var(--office); } .fam--windows { --c: var(--windows); } .fam--project { --c: var(--project); } .fam--visio { --c: var(--visio); }

/* product cards */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.pcard { --c: var(--blue); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; position: relative; transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); transform-style: preserve-3d; }
.pcard--office { --c: var(--office); } .pcard--windows { --c: var(--windows); } .pcard--project { --c: var(--project); } .pcard--visio { --c: var(--visio); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg), 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.pcard::after { content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: 0; transition: opacity var(--t); }
.pcard:hover::after { opacity: 1; animation: beamTop 1.4s var(--ease) infinite; }
@keyframes beamTop { to { left: 110%; } }
.pcard__glow { position: absolute; inset: 20% 15% 10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); filter: blur(18px); opacity: .7; transition: opacity var(--t-slow), transform var(--t-slow); }
.pcard:hover .pcard__glow { opacity: 1; transform: scale(1.15); }
.pcard__save { position: absolute; top: 14px; left: 14px; background: var(--navy); color: #fff; border-radius: 8px; padding: 4px 8px; font: 700 11px var(--f-mono); letter-spacing: .04em; }
.pcard__sku { color: var(--muted); font-size: 11px; margin-top: 4px; }
.pcard__fam b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 8px; vertical-align: 1px; }
.pcard__price em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; width: 100%; }
.pcard__media { position: relative; padding: 24px; background: linear-gradient(180deg, var(--canvas) 0%, #fff 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.pcard__media img, .pcard__media .tile-fb { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; filter: drop-shadow(0 10px 15px rgba(15,23,42,.08)) drop-shadow(0 25px 25px rgba(15,23,42,.14)); transition: transform var(--t-slow), filter var(--t-slow); }
.pcard:hover .pcard__media img, .pcard:hover .tile-fb { transform: translateY(-6px) scale(1.02); filter: drop-shadow(0 20px 30px rgba(10,37,64,.18)); }
.pcard__plat { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pcard__body { padding: 20px 22px 22px; display: grid; gap: 8px; flex: 1; align-content: start; }
.pcard__fam { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pcard__name { font-family: var(--f-head); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.pcard__line { color: var(--ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__foot { margin-top: auto; padding: 16px 22px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard__price strong { font-family: var(--f-head); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.pcard__price s { color: var(--muted); font-size: 13px; }
.pcard__cta { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; transition: background-color var(--t), transform var(--t); flex: none; }
.pcard:hover .pcard__cta { background: var(--blue); transform: translateX(2px); }
.tile-fb { --c: var(--navy); display: grid; align-content: end; gap: 6px; padding: 10%; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 92%, #000) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #fff) 100%); color: #fff; }
.tile-fb b { font: 800 clamp(12px, 1.6vw, 16px) var(--f-head); letter-spacing: -0.01em; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tile-fb span { font: 500 clamp(10px, 1.1vw, 12px) var(--f-body); opacity: .85; }
.tile-fb i { display: block; width: 34%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.7); margin-bottom: 6px; }
.tile-fb--office { --c: var(--office); } .tile-fb--windows { --c: var(--windows); } .tile-fb--project { --c: var(--project); } .tile-fb--visio { --c: var(--visio); }

/* how it works */
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.how__item { padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); display: grid; gap: 12px; position: relative; }
.how__n { width: 44px; height: 44px; border-radius: 13px; background: var(--grad-navy); color: #fff; display: grid; place-items: center; font: 700 14px var(--f-mono); box-shadow: 0 10px 20px -12px rgba(37,99,235,.8); }
.how__item { transition: transform var(--t-slow), box-shadow var(--t-slow); }
.how__item:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.how__item:not(:last-child)::after { content: ''; position: absolute; right: -18px; top: 44px; width: 18px; height: 1px; background: var(--line-2); }
.how__item h3 { font-size: 18px; }
.how__item p { color: var(--ink-2); font-size: 14.5px; }

/* guide cards */
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gcards--2 { grid-template-columns: repeat(2, 1fr); }
.gcard { --c: var(--blue); display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); }
.gcard { position: relative; overflow: hidden; }
.gcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); transform: scaleY(0); transform-origin: top; transition: transform var(--t-slow); }
.gcard:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.gcard:hover::before { transform: scaleY(1); }
.gcard--office { --c: var(--office); } .gcard--windows { --c: var(--windows); } .gcard--project { --c: var(--project); } .gcard--visio { --c: var(--visio); }
.gcard__top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gcard__top .mono { font-size: 12px; color: var(--c); }
.gcard__title { font-family: var(--f-head); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.gcard__desc { color: var(--ink-2); font-size: 14.5px; flex: 1; }
.gcard__foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.gcard__foot .link-arrow { font-size: 14px; }

/* FAQ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.qa { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 22px; transition: border-color var(--t), box-shadow var(--t); }
.qa[open] { border-color: var(--line-2); box-shadow: var(--sh-sm); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; position: relative; transition: transform var(--t-slow), background-color var(--t), border-color var(--t); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: background-color var(--t); }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa > p { padding: 0 0 20px; color: var(--ink-2); animation: fadeDown .35s var(--ease); }

/* navy band */
.band { background: linear-gradient(135deg, #0B1E36 0%, #0A2540 50%, #0F2F6B 100%); color: #fff; padding: clamp(56px, 7vw, 96px) 0; position: relative; overflow: hidden; }
.band::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); pointer-events: none; }
.band::before { content: ''; position: absolute; width: 640px; height: 640px; right: -200px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.45), transparent 65%); }
.band__inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.band h2 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); max-width: 16ch; }
.band h2 span { color: #93C5FD; }
.band p { color: #C7D2E0; margin-top: 12px; max-width: 48ch; }
.band__row { display: flex; gap: 12px; flex-wrap: wrap; }

/* footer */
.foot { background: var(--navy-2); color: #B6C2D3; padding: clamp(56px, 6vw, 80px) 0 32px; position: relative; overflow: hidden; }
.foot__mark { position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%); font: 800 clamp(80px, 13vw, 220px)/1 var(--f-head); letter-spacing: -0.05em; color: rgba(255,255,255,.035); white-space: nowrap; pointer-events: none; user-select: none; }
.foot__grid, .foot__legal { position: relative; }
.foot__seals { list-style: none; padding: 0; margin: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.foot__seals li { font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); color: #DDE6FF; }
.foot__cur { margin-top: 14px; }
.foot__cur .cur select { background-color: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot__brand .brand { color: #fff; }
.foot__brand .brand__word span { color: #93C5FD; }
.foot__brand p { font-size: 14.5px; margin: 18px 0 0; max-width: 36ch; }
.foot h4 { color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--f-body); }
.foot__col a { display: block; padding: 6px 0; font-size: 15px; transition: color var(--t); }
.foot__col a:hover { color: #fff; }
.foot__contact p { font-size: 14.5px; margin-bottom: 10px; }
.foot__contact strong { color: #fff; display: block; font-weight: 600; }
.foot__legal { display: grid; gap: 14px; padding-top: 22px; font-size: 13px; }
.foot__legal p { margin: 0; max-width: 110ch; }
.foot__trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); }
.foot__trust svg { color: var(--green); flex: none; }
.foot__trust a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
/* Security & PCI DSS page: text badge + certificate table (no image) */
.pci { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-sm); margin: 10px 0 18px; }
.pci__shield { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--green-soft, #e9f8ef); color: var(--green); flex: none; }
.pci__text { display: grid; gap: 4px; }
.pci__text strong { font-size: 18px; letter-spacing: -0.01em; }
.pci__text span { color: var(--ink-2); font-size: 14px; }
.pci__text small { color: var(--muted); font-size: 12px; }
.pci__cert { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 18px; margin: 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #F8FAFC; font-size: 15px; }
.pci__cert dt { font-weight: 700; color: var(--ink); }
.pci__cert dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .pci { flex-direction: column; align-items: flex-start; } .pci__cert { grid-template-columns: 1fr; gap: 2px 0; } .pci__cert dd { margin-bottom: 10px; } }
.foot__grid--5 { grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1.1fr; gap: 32px; }
.foot__col a.foot__more { color: #fff; font-weight: 600; margin-top: 4px; }
.foot__contact { margin-top: 22px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 6px; }
.foot__links a { font-size: 13px; color: #B6C2D3; padding: 4px 12px; border-right: 1px solid rgba(255,255,255,.14); transition: color var(--t); }
.foot__links a:first-child { padding-left: 0; }
.foot__links a:last-child { border-right: 0; }
.foot__links a:hover { color: #fff; }
@media (max-width: 1100px) { .foot__grid--5 { grid-template-columns: 1fr 1fr 1fr; } .foot__grid--5 .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot__grid--5 { grid-template-columns: 1fr 1fr; } .foot__links a { border-right: 0; padding: 6px 12px 6px 0; } }

/* page head & crumbs */
.phead { padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3.5vw, 44px); background: linear-gradient(180deg, #fff, var(--canvas)); border-bottom: 1px solid var(--line); }
.phead__title { max-width: 18ch; }
.phead__lede { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin: 18px 0 0; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--blue); }
.crumbs span { color: var(--line-2); }

/* shop */
.filters { display: flex; gap: 12px 14px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filters__group { display: flex; gap: 8px; flex-wrap: wrap; }
.filters__sep { width: 1px; height: 28px; background: var(--line-2); }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); min-width: 260px; transition: border-color var(--t), box-shadow var(--t); }
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-ring); }
.search input { border: 0; outline: 0; background: transparent; font: 400 15px var(--f-body); color: var(--ink); width: 100%; }
.filters__count { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.empty { text-align: center; padding: 60px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-2); }
.empty h3 { margin-bottom: 8px; }
.request { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 60px); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--blue-soft); border: 1px solid var(--blue-ring); }
.request > div { max-width: 620px; }
.request .eyebrow { margin-bottom: 8px; }
.request h3 { margin-bottom: 8px; }
.request p { color: var(--ink-2); font-size: 15px; }

/* product detail */
.pdp { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }
.pdp__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pdp__gallery { position: relative; border-radius: var(--r-xl); border: 1px solid var(--line); background: radial-gradient(ellipse 70% 60% at 50% 85%, #fff 0%, var(--elev) 75%); padding: clamp(28px, 4vw, 56px); display: grid; place-items: center; }
.pdp__gallery img, .pdp__gallery .tile-fb { width: min(100%, 460px); aspect-ratio: 1; object-fit: cover; border-radius: 22px; filter: drop-shadow(0 20px 25px rgba(15,23,42,.12)) drop-shadow(0 40px 50px rgba(15,23,42,.14)); }
.pdp__gallery .badge--plat { position: absolute; top: 18px; left: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.pdp__gallery .badge--save { position: absolute; top: 18px; right: 18px; }
.pdp__title { margin: 10px 0 10px; font-size: clamp(30px, 3.4vw, 44px); }
.pdp__title span { display: block; font-size: .5em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-top: 6px; font-family: var(--f-body); }
.pdp__line { font-size: 17px; color: var(--ink-2); max-width: 60ch; }
.pdp__section { margin-top: 36px; }
.pdp__section h2 { font-size: 20px; margin-bottom: 16px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; }
.ticks li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; border: 1px solid var(--green-line); margin-top: 1px; }
.apps { display: flex; gap: 10px; flex-wrap: wrap; }
.spec { display: grid; grid-template-columns: 180px 1fr; gap: 12px 20px; margin: 0; font-size: 15px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; color: var(--ink); font-weight: 500; }
.pdp__alt { margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.pdp__alt summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.pdp__alt summary::-webkit-details-marker { display: none; }
.pdp__alt summary small { display: block; font: 400 14px var(--f-body); color: var(--ink-2); margin-top: 4px; }
.pdp__alt summary i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; position: relative; transition: transform var(--t-slow), background-color var(--t); }
.pdp__alt summary i::before, .pdp__alt summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.pdp__alt summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.pdp__alt[open] summary i { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); }
.pdp__alt[open] summary i::before, .pdp__alt[open] summary i::after { background: #fff; }
.pdp__alt-body { padding: 0 24px 24px; animation: fadeDown .35s var(--ease); }
.pdp__alt-body > p { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }
.pdp__guide { display: grid; gap: 6px; margin-top: 20px; padding: 20px 22px; border-radius: 18px; background: var(--blue-soft); border: 1px solid var(--blue-ring); transition: transform var(--t-slow), box-shadow var(--t-slow); }
.pdp__guide:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.pdp__guide .eyebrow { margin: 0; font-size: 11px; }
.pdp__guide strong { font-family: var(--f-head); font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; }
.pdp__guide .link-arrow { font-size: 14px; }

/* checkout panel */
.pdp__side { position: sticky; top: calc(var(--nav-h) + 20px); }
.pay { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(15,23,42,.1); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(10,37,64,.12); overflow: hidden; position: relative; }
.pay::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-navy); }
.ids { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.ids > div { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 9px; background: var(--elev); border: 1px solid var(--line); font-size: 12.5px; }
.ids dt { color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ids dd { margin: 0; color: var(--ink); font-weight: 600; }
.ids dd.mono { font-size: 12px; letter-spacing: .06em; }
.pdp__desc { color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }
.pay__head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.pay__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pay__price strong { font-family: var(--f-head); font-size: 36px; font-weight: 800; letter-spacing: -0.04em; color: var(--navy); line-height: 1; }
.pay__price s { color: var(--muted); font-size: 15px; }
.pay__guide-price { font-size: 13px; color: var(--muted); }
.pay__guide-price b { color: var(--ink-2); font-weight: 600; }
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.stock--in { color: #047857; }
.stock--in i { background: var(--green); box-shadow: 0 0 0 0 rgba(5,150,105,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(5,150,105,.45); } 70% { box-shadow: 0 0 0 9px rgba(5,150,105,0); } 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); } }
.pay__body { padding: 20px 24px 24px; display: grid; gap: 16px; }
.pay__row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: end; }
.pay__total { text-align: right; display: grid; gap: 2px; padding-bottom: 4px; }
.pay__total .eyebrow { margin: 0; color: var(--muted); font-size: 11px; }
.pay__total strong { font-family: var(--f-head); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.pay__total small { color: var(--muted); font-size: 12px; }
.pay__sep { height: 1px; background: var(--line); margin: 2px 0; }
.pay__label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.pay__label .mono { color: var(--muted); font-weight: 500; font-size: 11px; display: inline-flex; gap: 6px; align-items: center; }
.hosted { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hosted > div { min-height: 48px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--canvas); padding: 0 6px; transition: border-color var(--t), box-shadow var(--t), background-color var(--t); }
.hosted > div.is-focus { background: #fff; }
.hosted > div:first-child { grid-column: 1 / -1; }
.hosted > div.is-focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-ring); }
.hosted > div.is-invalid { border-color: var(--red); }
.hosted > div.is-valid { border-color: var(--green); }
.hosted iframe { height: 46px !important; }
.pay__btn { padding: 18px 24px; font-size: 16.5px; border-radius: 14px; font-weight: 700; overflow: hidden; isolation: isolate; }
.pay__btn::before { content: ''; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .8s var(--ease); z-index: -1; }
.pay__btn:hover::before { transform: translateX(520%) skewX(-18deg); }
.pay__trust { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pay__trust li { display: inline-flex; align-items: center; gap: 6px; }
.pay__trust svg { color: var(--green); }
.pay__status { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; display: none; }
.pay__status.is-err { display: block; background: var(--red-soft); color: #B91C1C; border: 1px solid var(--red-line); }
.pay__status.is-ok { display: block; background: var(--green-soft); color: #047857; border: 1px solid var(--green-line); }
.pay__status.is-info { display: block; background: var(--blue-soft); color: var(--blue-2); border: 1px solid var(--blue-ring); }
.pay__hint { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pay__hint.is-err { color: #B91C1C; }
.pay__or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pay__or::before, .pay__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay__paypal { min-height: 48px; }
.pay__paypal .pay__hint { text-align: center; padding: 14px 0; }
.field [hidden] { display: none !important; }
.field select:disabled { color: var(--muted); }
.pay__off { padding: 24px; color: var(--ink-2); font-size: 15px; }
.pay__methods { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--muted); align-items: center; }
.pay__methods-stmt { flex-basis: 100%; color: var(--ink-2); }
.pay__methods-stmt b { color: var(--navy); font-weight: 700; }
.pay__pci { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pay__pci:hover { color: var(--navy); }
.hosted--wide > div:first-child { grid-column: 1 / -1; }

/* ---------- checkout page ---------- */
.co { padding: 28px 0 80px; background: var(--canvas); }
.co__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.co__main { display: grid; gap: 22px; }
.co__head { display: grid; gap: 6px; margin-bottom: 4px; }
.co__head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--green); margin: 0; }
.co__title { font-family: var(--f-head); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.035em; color: var(--navy); margin: 0; line-height: 1.05; }
.co__lede { color: var(--ink-2); font-size: 15.5px; max-width: 62ch; margin: 0; }
.co__block { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px 28px; display: grid; gap: 16px; box-shadow: var(--sh-sm); }
.co__h2 { display: flex; align-items: center; gap: 12px; font-family: var(--f-head); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; flex-wrap: wrap; }
.co__h2 span { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-family: var(--f-mono); }
.co__h2 small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: auto; }
.methods { display: grid; gap: 10px; }
.method { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; cursor: pointer; background: #fff; transition: border-color var(--t), box-shadow var(--t), background-color var(--t); }
.method:hover { border-color: var(--blue-ring); }
.method.is-on { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-ring); background: var(--blue-soft); }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--elev); color: var(--navy); }
.method__icon--paypal { background: #FFC439; color: #003087; font-family: var(--f-head); font-weight: 800; font-size: 20px; }
.method__text { display: grid; gap: 2px; min-width: 0; }
.method__text b { font-size: 15px; color: var(--ink); }
.method__text small { font-size: 12.5px; color: var(--muted); }
.method__check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; transition: border-color var(--t), background-color var(--t); }
.method.is-on .method__check { border-color: var(--blue); background: var(--blue) radial-gradient(circle, #fff 0 4px, transparent 4.5px); }
.method__panel { display: grid; gap: 14px; padding-top: 4px; }
.method__panel[hidden] { display: none; }
.co__assure { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.co__assure li { display: flex; gap: 8px; align-items: flex-start; }
.co__assure svg { flex: none; margin-top: 2px; color: var(--green); }
.co__assure b { color: var(--ink-2); }
.co__side { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 14px; }
.co__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 20px; display: grid; gap: 16px; box-shadow: var(--sh-md); position: relative; overflow: hidden; }
.co__card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-navy); }
.co__secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 999px; padding: 5px 10px; width: max-content; }
.co__stmt { background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.co__stmt .eyebrow { color: #93C5FD; margin: 0; font-size: 11px; }
.co__stmt strong { font-family: var(--f-head); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; word-break: break-word; }
.co__stmt small { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.45; }
.co__item { display: flex; gap: 14px; align-items: flex-start; }
.co__item img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: var(--elev); flex: none; }
.co__item > div { display: grid; gap: 4px; min-width: 0; }
.co__item b { font-size: 15px; color: var(--ink); }
.co__item small { color: var(--muted); font-size: 12.5px; }
.co__qty { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.co__qty input { width: 70px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; font: 500 14px var(--f-body); }
.co__totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.co__totals dt { color: var(--muted); }
.co__totals dd { margin: 0; text-align: right; color: var(--ink-2); }
.co__totals .co__grand { font-family: var(--f-head); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.co__totals dt:last-of-type { align-self: center; font-weight: 600; color: var(--ink); }
.co__usd { margin: -6px 0 0; font-size: 12px; color: var(--muted); }
.co__restock { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); border: 1px solid var(--amber-line); color: #92400E; font-size: 13px; line-height: 1.5; }
.co__help { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 18px 20px; display: grid; gap: 4px; }
.co__help .eyebrow { color: #93C5FD; margin: 0; }
.co__phone { color: #fff; text-decoration: none; font-family: var(--f-head); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.co__help small { color: rgba(255,255,255,.72); font-size: 12.5px; }
.co__help small a { color: #fff; }
.co__pci { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); transition: border-color var(--t), transform var(--t); }
.co__pci:hover { border-color: var(--green-line); transform: translateY(-1px); }
.co__pci svg { width: 26px; height: 26px; color: var(--green); flex: none; }
.co__pci span { display: grid; gap: 2px; }
.co__pci b { font-size: 14px; }
.co__pci small { color: var(--muted); font-size: 12px; }
.co__policies { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.co__policies a { color: var(--ink-2); }
@media (max-width: 980px) {
  .co__grid { grid-template-columns: 1fr; }
  .co__side { position: static; order: -1; }
  .co__block { padding: 20px 18px 22px; }
  .form__row--3 { grid-template-columns: 1fr; }
}
.pay__logos { display: flex; gap: 8px; align-items: center; }
.pay__logos span { font: 700 10px var(--f-mono); letter-spacing: .06em; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); background: var(--elev); }

/* forms */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field > span em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: 400 15px var(--f-body); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; width: 100%; transition: border-color var(--t), box-shadow var(--t); }
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-ring); }
.field input::placeholder, .field textarea::placeholder { color: #94A3B8; }
.field.is-invalid input { border-color: var(--red); }
.form__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__note { font-size: 13px; color: var(--muted); margin: 0; }
.form__status { margin: 0; font-size: 14px; font-weight: 500; }
.form__status.is-ok { color: #047857; }
.form__status.is-err { color: #B91C1C; }
.form__status:empty { display: none; }
.hp { position: absolute; left: -9999px; }

/* contact / about / legal */
.contact { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact__form { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.contact__side { display: grid; gap: 14px; }
.ccard { display: grid; gap: 6px; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); }
a.ccard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.ccard .eyebrow { margin: 0; font-size: 11px; }
.ccard strong { font-family: var(--f-head); font-size: 19px; letter-spacing: -0.02em; line-height: 1.3; }
.ccard > span:last-child { color: var(--ink-2); font-size: 14px; }
.ccard--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.ccard--navy .eyebrow { color: #93C5FD; }
.ccard--navy strong { color: #fff; }
.ccard--teal { background: #0F766E; border-color: #0F766E; color: #fff; }
.ccard--teal .eyebrow { color: #99F6E4; }
.ccard--teal strong { color: #fff; }
.ccard--navy > span:last-child { color: #C7D2E0; }
.map { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.7); }
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about__photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__lead { font-family: var(--f-head); font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; color: var(--navy); margin-bottom: 22px; }
.about__copy p:not(.about__lead) { color: var(--ink-2); font-size: 16.5px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.principles article { padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); display: grid; gap: 12px; }
.principles .mono { color: var(--blue); font-size: 13px; }
.principles p { color: var(--ink-2); font-size: 15px; }
.record-block { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); border: 1px solid var(--line); background: #fff; }
.record-block p:not(.eyebrow) { color: var(--ink-2); margin-top: 12px; }
.record { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; margin: 0; font-size: 15px; }
.record dd { min-width: 0; overflow-wrap: anywhere; }
.record dt { color: var(--muted); }
.record dd { margin: 0; font-weight: 500; }
.record--lg { font-size: 16px; }
.legal { max-width: 760px; }
.legal h2 { font-size: 22px; margin: 36px 0 12px; }
.legal p { color: var(--ink-2); font-size: 16px; }

/* help tabs */
.tabs { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.tabs__bar { display: grid; gap: 8px; }
.tabs__bar .pill { justify-content: flex-start; padding: 14px 18px; border-radius: 14px; font-size: 15px; }
.hsteps { display: none; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.hsteps.is-on { display: grid; gap: 0; animation: fadeDown .4s var(--ease); }
.hsteps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); align-items: start; }
.hsteps li:last-child { border-bottom: 1px solid var(--line); }
.hsteps li .mono { color: var(--blue); font-size: 14px; padding-top: 2px; }
.hsteps li p { color: var(--ink); font-size: 16px; }

/* guides */
.gpage__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.gnav { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 4px; }
.gnav .eyebrow { margin-bottom: 10px; color: var(--muted); }
.gnav a { padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; transition: background-color var(--t), color var(--t); }
.gnav a:hover, .gnav a.is-on { background: var(--blue-soft); color: var(--navy); }
.gpage__title { font-size: clamp(30px, 3.6vw, 48px); max-width: 22ch; }
.gneeds { padding: 22px 26px; border-radius: 18px; background: var(--canvas); border: 1px solid var(--line); margin-bottom: 36px; }
.gneeds .eyebrow { margin-bottom: 12px; color: var(--muted); }
.gsteps { list-style: none; padding: 0; margin: 0 0 48px; display: grid; gap: 16px; }
.gsteps li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: #fff; scroll-margin-top: 110px; transition: border-color var(--t), box-shadow var(--t); }
.gsteps li:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); }
.gsteps li > .mono { width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; }
.gsteps h2 { font-size: 19px; margin-bottom: 8px; }
.gsteps p { color: var(--ink-2); font-size: 15.5px; }
.gsteps--compact { gap: 8px; margin: 0; }
.gsteps--compact li { padding: 12px 14px; grid-template-columns: 32px 1fr; align-items: center; }
.gsteps--compact li > .mono { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.gsteps--compact p { font-size: 15px; color: var(--ink); font-weight: 500; }
.gtips .shead { margin-bottom: 18px; }
.gside { display: grid; gap: 14px; position: sticky; top: calc(var(--nav-h) + 20px); }
.gside__box { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.gside__box .eyebrow { margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.toc { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.toc a:hover { color: var(--blue); }
.gside__prod { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; transition: color var(--t); }
.gside__prod:hover { color: var(--blue); }
.gside__prod small { color: var(--muted); margin-left: 4px; }
.gside__prod strong { font-family: var(--f-head); color: var(--navy); }

/* order page */
.order { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.order__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.order__ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; position: relative; color: #fff; }
.order__notice { margin: 6px 0 22px; padding: 20px 22px; border-radius: var(--r); background: var(--amber-soft); border: 1.5px solid var(--amber-line); color: #78350F; display: grid; gap: 10px; font-size: 15px; line-height: 1.55; box-shadow: 0 12px 30px -18px rgba(217,119,6,.45); }
.order__notice p { margin: 0; }
.order__notice strong { color: #92400E; font-weight: 700; }
.order__notice-head { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 800; font-size: 17px; color: #065F46; }
.order__notice-head svg { width: 22px; height: 22px; flex: none; color: var(--green); }
.order__notice a { color: inherit; }
.order__ring--ok { background: var(--green); animation: pop .6s var(--ease); }
.order__ring--ok::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--green-line); animation: ring 1.6s var(--ease) infinite; }
.order__ring--wait { background: var(--blue); }
.order__ring--wait::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--blue-ring); border-top-color: var(--blue); animation: spin 1s linear infinite; }
.order__ring--bad { background: var(--muted); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.order__title { font-size: clamp(32px, 4vw, 52px); max-width: 16ch; }
.order__lede { font-size: 17px; color: var(--ink-2); max-width: 56ch; margin: 18px 0 30px; }
.keys { display: grid; gap: 12px; margin-bottom: 32px; }
.keybox { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 20px; border-radius: 16px; background: var(--key-bg); border: 1px solid var(--key-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.keybox .mono { color: #94A3B8; grid-column: 1 / -1; font-size: 11px; }
.keybox code { font-family: var(--f-mono); font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; letter-spacing: .1em; color: var(--key-text); word-break: break-all; align-self: center; }
.copy { font: 600 13px var(--f-body); padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; transition: background-color var(--t), transform var(--t); align-self: center; }
.copy:hover { background: rgba(255,255,255,.14); }
.copy:active { transform: scale(.96); }
.copy.is-done { background: var(--green); border-color: var(--green); }
.order__next { padding: 22px 24px; border-radius: 18px; background: var(--canvas); border: 1px solid var(--line); }
.order__next .eyebrow { margin-bottom: 12px; color: var(--muted); }
.order__next .btn { margin-top: 16px; }
.order__side { display: grid; gap: 14px; }
.order__side .ccard .record { margin-top: 10px; }
.order__fine { color: var(--muted); font-size: 14px; }
.order__lookup { max-width: 720px; }
.order__lookup .form { margin-top: 26px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* admin */
.adm { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 6vw, 80px); }
.adm__side { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 4px; }
.adm__side .eyebrow { color: var(--muted); margin-bottom: 8px; }
.adm__side a { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 14.5px; color: var(--ink-2); transition: background-color var(--t), color var(--t); }
.adm__side a:hover { background: var(--elev); color: var(--ink); }
.adm__side a.is-on { background: var(--grad-navy); color: #fff; box-shadow: 0 10px 20px -12px rgba(37,99,235,.8); }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
.form__row--3 { grid-template-columns: repeat(3, 1fr); }
.tile-mini { display: block; width: 44px; height: 44px; border-radius: 8px; background: var(--c, var(--navy)); }
.field input.mono { font-family: var(--f-mono); font-size: 13.5px; letter-spacing: .04em; }
.adm__side a b { font: 600 11px var(--f-mono); background: var(--red); color: #fff; border-radius: 999px; padding: 2px 7px; }
.adm__side a.is-on b { background: #fff; color: var(--navy); }
.adm__side .adm__out { margin-top: 14px; color: var(--muted); font-size: 13px; }
.adm__who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; display: grid; gap: 2px; }
.adm__who b { font-size: 14px; }
.adm__who small { color: var(--muted); font-size: 12px; }
.adm__who small a { color: var(--blue); text-decoration: none; }
.adm__group { font: 700 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px 12px; }
.adm__side a svg { flex: none; color: var(--muted); }
.adm__side a.is-on svg { color: #fff; }
.adm__side a span { flex: 1; }
.adm__auto { font: 700 9.5px var(--f-mono); letter-spacing: .08em; background: #7C3AED; color: #fff; border-radius: 999px; padding: 2px 7px; font-style: normal; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 14px 16px; display: grid; gap: 4px; box-shadow: var(--sh-sm); }
.kpi small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.kpi b { font-size: 24px; letter-spacing: -0.02em; font-family: var(--f-head); }
.kpi span { color: var(--ink-2); font-size: 12.5px; }
.kpi--warn b { color: var(--amber); } .kpi--bad b { color: var(--red); } .kpi--good b { color: var(--green); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; }
.perm-grid label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.toggle input { position: absolute; opacity: 0; }
.toggle i { width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); position: relative; transition: background-color var(--t); flex: none; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--t); }
.toggle input:checked + i { background: var(--green); }
.toggle input:checked + i::after { transform: translateX(18px); }
.region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.region { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 18px 20px; display: grid; gap: 12px; border-left: 4px solid var(--blue); }
.region.is-off { border-left-color: var(--line-2); opacity: .92; }
.region__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.region__head h3 { font-size: 17px; margin: 0; }
.region__flag { font-size: 22px; margin-right: 6px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 9px; font-weight: 700; color: var(--muted); cursor: pointer; font-size: 13.5px; }
.seg button.is-on--good { background: var(--green); color: #fff; border-radius: 999px; }
.seg button.is-on--bad { background: var(--red); color: #fff; border-radius: 999px; }
.chat-log { max-height: 420px; overflow: auto; font-size: 13px; }
.bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); }
.preset { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.preset button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.preset button.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.dns dt { font: 700 11px var(--f-mono); color: var(--muted); margin-top: 8px; }
.dns dd { margin: 2px 0 0; font: 12px var(--f-mono); background: var(--elev); padding: 6px 8px; border-radius: 6px; word-break: break-all; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.slots label { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; font-weight: 600; font-size: 14px; }
.slots input { position: absolute; opacity: 0; }
.slots label:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }
.slots label.is-taken { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.tpl-vars code { display: inline-block; margin: 2px 4px 2px 0; background: var(--elev); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.adm__main { min-width: 0; }
.adm__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.adm__head h1 { font-size: clamp(26px, 3vw, 34px); }
.adm__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.adm__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.adm__stat { color: var(--muted); font-size: 13px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; min-width: 0; overflow-wrap: anywhere; }
.grid > * { min-width: 0; }
.panel.tbl--wrap .tbl { min-width: 760px; }
.panel + .panel { margin-top: 16px; }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel__head h3 { font-size: 17px; }
.flash { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; margin-bottom: 18px; background: var(--green-soft); color: #047857; border: 1px solid var(--green-line); }
.flash--err { background: var(--red-soft); color: #B91C1C; border-color: var(--red-line); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 600 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td small { color: var(--muted); }
.tbl .billing { font-style: normal; font-size: 12.5px; color: var(--ink-2); margin: 6px 0 2px; padding: 6px 8px; background: var(--bg-2, #F8FAFC); border: 1px solid var(--line); border-radius: 8px; line-height: 1.45; max-width: 240px; }
.preflight { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.preflight li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.preflight li b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.preflight li div { display: grid; gap: 2px; }
.preflight li span { color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.preflight li.is-ok b { background: var(--green-soft); color: #047857; border: 1px solid var(--green-line); }
.preflight li.is-warn b { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.preflight li.is-fail b { background: var(--red-soft); color: #B91C1C; border: 1px solid var(--red-line); }
.preflight li.is-fail { border-color: var(--red-line); }
.tbl .mono { font-size: 12.5px; }
.tbl code { font: 600 12.5px var(--f-mono); background: var(--key-bg); color: var(--key-text); padding: 4px 8px; border-radius: 7px; letter-spacing: .05em; display: inline-block; margin: 2px 4px 2px 0; }
.tbl form { display: inline; }
.tbl textarea { font: 400 13px var(--f-mono); width: 100%; min-width: 220px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); resize: vertical; }
.tbl select { font: 500 13px var(--f-body); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; background: #fff; }
.tbl .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tbl--wrap { overflow-x: auto; }

/* long-form documents */
.phead--doc .phead__lede { max-width: 760px; }
.doc__meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font: 600 12.5px var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.doc__meta span + span::before { content: "·"; margin-right: 14px; }
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.doc--plain { grid-template-columns: minmax(0, 1fr); }
.doc--plain .doc__body { max-width: 820px; }
.doc__toc { position: sticky; top: 92px; display: grid; gap: 10px; }
.doc__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--line-2); }
.doc__toc li a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--ink-2); transition: color var(--t), border-color var(--t); }
.doc__toc li a:hover, .doc__toc li a.is-on { color: var(--blue); border-left-color: var(--blue); }
.doc__aside { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--elev); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 8px; }
.doc__aside a { color: var(--blue); font-weight: 600; }
.doc__body { max-width: 760px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.doc__body > :first-child { margin-top: 0; }
.doc__body h2 { font-size: clamp(24px, 2.4vw, 30px); color: var(--ink); margin: 48px 0 14px; scroll-margin-top: 96px; letter-spacing: -.02em; }
.doc__body h3 { font-size: 19px; color: var(--ink); margin: 30px 0 10px; scroll-margin-top: 96px; }
.doc__body p { margin: 0 0 16px; }
.doc__body ul, .doc__body ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.doc__body li::marker { color: var(--blue); font-weight: 700; }
.doc__body a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc__body a:not(.btn):hover { color: var(--blue-2); }
.doc__body strong { color: var(--ink); }
.doc__body blockquote { margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--blue); background: var(--blue-soft); border-radius: 0 16px 16px 0; font-size: 17px; color: var(--navy); }
.doc__body blockquote p { margin: 0; }
.doc__body code { font: 600 13.5px var(--f-mono); background: var(--key-bg); color: var(--key-text); padding: 2px 7px; border-radius: 6px; }
.doc__body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.doc__body .lead { font-size: 19px; color: var(--ink); }
.callout { display: grid; gap: 6px; margin: 22px 0; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-size: 15px; }
.callout strong { color: var(--ink); font-size: 14px; letter-spacing: .02em; }
.callout div > :last-child { margin-bottom: 0; }
.callout--info { background: var(--blue-soft); border-color: var(--blue-ring); }
.callout--warn { background: #FFFBEB; border-color: #FDE68A; }
.callout--ok { background: var(--green-soft); border-color: var(--green-line); }
.doc__tablewrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 16px; }
.doc__table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.doc__table th, .doc__table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc__table thead th { background: var(--elev); font: 600 11.5px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc__table tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.doc__table tr:last-child td, .doc__table tr:last-child th { border-bottom: 0; }
.doc__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.doc__card { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-size: 15px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.doc__card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--blue-ring); }
.doc__card strong { color: var(--ink); font-size: 16px; }
.doc__card span { color: var(--ink-2); }
.doc__card .mono { font-size: 12px; color: var(--blue); }
.steps { counter-reset: step; display: grid; gap: 14px; margin: 22px 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font: 800 15px var(--f-mono); color: var(--blue); }
.steps li strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* FAQ accordions */
.qa-list { display: grid; gap: 10px; margin: 20px 0; }
.qa-list details { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 0 20px; transition: border-color var(--t), box-shadow var(--t); }
.qa-list details[open] { border-color: var(--blue-ring); box-shadow: var(--sh-sm); }
.qa-list summary { cursor: pointer; list-style: none; padding: 17px 0; font: 600 16px var(--f-body); color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.qa-list summary::-webkit-details-marker { display: none; }
.qa-list summary::after { content: "+"; font: 500 22px var(--f-head); color: var(--blue); flex: none; transition: transform var(--t); }
.qa-list details[open] summary::after { transform: rotate(45deg); }
.qa-list details > div { padding: 0 0 18px; font-size: 15.5px; }
.qa-list details > div > :last-child { margin-bottom: 0; }

/* reviews */
.stars { display: inline-flex; gap: 2px; }
.stars i { width: 16px; height: 16px; background: #CBD5E1; clip-path: polygon(50% 2%, 61% 36%, 98% 38%, 68% 60%, 79% 96%, 50% 74%, 21% 96%, 32% 60%, 2% 38%, 39% 36%); }
.stars i.is-on { background: #F59E0B; }
.stars--lg i { width: 24px; height: 24px; }
.rev { padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: #fff; display: grid; gap: 10px; }
.rev__head { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; }
.rev__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 800 16px var(--f-head); }
.rev__head strong { display: block; color: var(--ink); }
.rev__meta { font-size: 12.5px; color: var(--muted); }
.rev__verified { color: #047857; font-weight: 600; }
.rev h3 { font-size: 17px; }
.rev p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.rev__reply { margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: var(--elev); font-size: 14.5px; display: grid; gap: 4px; }
.rev__reply strong { font-size: 13px; color: var(--navy); }
.rev-summary { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 20px; background: var(--navy); color: #fff; margin: 0 0 22px; }
.rev-summary strong { font: 800 44px/1 var(--f-head); }
.rev-summary p { margin: 6px 0 0; color: #BFDBFE; font-size: 14px; }
.rating-input { display: flex; gap: 6px; flex-direction: row-reverse; justify-content: flex-end; }
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input label { cursor: pointer; width: 34px; height: 34px; background: #CBD5E1; clip-path: polygon(50% 2%, 61% 36%, 98% 38%, 68% 60%, 79% 96%, 50% 74%, 21% 96%, 32% 60%, 2% 38%, 39% 36%); transition: background-color .15s; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { background: #F59E0B; }

/* blog */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-card { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: #fff; transition: transform var(--t), box-shadow var(--t), border-color var(--t); position: relative; overflow: hidden; }
.post-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--blue)); opacity: 0; transition: opacity var(--t); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--blue-ring); }
.post-card:hover::before { opacity: 1; }
.post-card .eyebrow { margin: 0; }
.post-card h2, .post-card h3 { font-size: 19px; line-height: 1.3; }
.post-card h2 a, .post-card h3 a { color: var(--ink); }
.post-card p { color: var(--ink-2); font-size: 14.5px; }
.post-card__meta { font: 600 12px var(--f-mono); color: var(--muted); letter-spacing: .04em; display: flex; gap: 10px; }
.post-card--lead { grid-column: 1 / -1; grid-template-columns: 1.1fr .9fr; grid-template-rows: none; gap: 28px; padding: 32px; background: var(--navy); color: #fff; border-color: transparent; }
.post-card--lead h2 { font-size: clamp(26px, 3vw, 36px); }
.post-card--lead h2 a, .post-card--lead p { color: #fff; }
.post-card--lead p { color: #CBD5E1; font-size: 16px; }
.post-card--lead .post-card__meta { color: #93C5FD; }
.post-card__art { border-radius: 16px; background: linear-gradient(135deg, #1D4ED8, #0A2540); min-height: 180px; display: grid; place-items: center; font: 800 clamp(40px, 6vw, 72px) var(--f-head); color: rgba(255,255,255,.14); letter-spacing: -.04em; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.post-nav a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.post-nav a span { font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-nav a:last-child { text-align: right; }
.post-nav a:hover { border-color: var(--blue-ring); background: var(--blue-soft); }

/* account */
.acct { display: grid; gap: 16px; }
.acct__order { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; align-items: center; }
.acct__order strong { color: var(--ink); display: block; }
.acct__order small { color: var(--muted); font: 500 12.5px var(--f-mono); }
.acct__order .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.otp { max-width: 440px; display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-md); }
.otp input[name=code] { font: 700 30px var(--f-mono); letter-spacing: .4em; text-align: center; }

/* receipt */
.receipt { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.receipt__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.receipt__head h1 { font-size: 26px; }
.receipt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0; font-size: 14.5px; }
.receipt__grid p { margin: 0; color: var(--ink-2); }
.receipt__grid strong { display: block; color: var(--ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.receipt table { width: 100%; border-collapse: collapse; font-size: 15px; }
.receipt th, .receipt td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.receipt td:last-child, .receipt th:last-child { text-align: right; }
.receipt tfoot td { font-weight: 700; color: var(--ink); border-bottom: 0; font-size: 17px; }
.receipt__fine { margin-top: 22px; font-size: 12.5px; color: var(--muted); }
@media print { .nav, .foot, .band, .no-print, .skip { display: none !important; } .receipt { border: 0; } body { background: #fff; } }

/* free tools */
.tool { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.tool__panel { padding: clamp(22px, 3vw, 32px); border-radius: 22px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-md); display: grid; gap: 16px; position: sticky; top: 92px; }
.tool__result { padding: 20px 22px; border-radius: 16px; background: var(--navy); color: #fff; display: grid; gap: 8px; }
.tool__result h3 { color: #fff; font-size: 20px; }
.tool__result p { color: #CBD5E1; font-size: 14.5px; margin: 0; }
.tool__result .mono { color: #93C5FD; }
.tool__result--ok { background: #064E3B; }
.tool__result--warn { background: #78350F; }
.tool__result a { color: #fff; text-decoration: underline; }
.tool__opts { display: grid; gap: 8px; }
.tool__opts label { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14.5px; transition: border-color var(--t), background-color var(--t); }
.tool__opts label:hover { border-color: var(--blue-ring); background: var(--blue-soft); }
.tool__opts input { accent-color: var(--blue); width: 16px; height: 16px; }
.tool__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tool__kpis div { padding: 12px; border-radius: 12px; background: var(--elev); display: grid; gap: 2px; }
.tool__kpis b { font: 800 22px var(--f-head); color: var(--navy); }
.tool__kpis span { font-size: 12px; color: var(--muted); }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-card { display: grid; gap: 10px; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: #fff; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--blue-ring); }
.tool-card h2 { font-size: 20px; }
.tool-card p { color: var(--ink-2); font-size: 15px; }
.tool-card__n { font: 800 13px var(--f-mono); color: var(--blue); letter-spacing: .1em; }

/* press kit */
.kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.kit__item { display: grid; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.kit__preview { height: 120px; border-radius: 12px; display: grid; place-items: center; border: 1px dashed var(--line-2); }
.kit__preview--dark { background: var(--navy); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.swatches div { border-radius: 14px; padding: 14px; color: #fff; font: 600 12px var(--f-mono); min-height: 84px; display: grid; align-content: end; gap: 2px; }
.embed { position: relative; margin: 14px 0; }
.embed textarea { width: 100%; font: 500 12.5px var(--f-mono); padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--elev); resize: vertical; min-height: 110px; }
.embed button { position: absolute; top: 10px; right: 10px; }
.badge-embed { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #0A2540; color: #fff; font: 600 13px var(--f-body); text-decoration: none; }

/* site map page */
.smap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin-top: 10px; }
.smap h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.smap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.smap a { font-size: 15px; color: var(--ink-2); }
.smap a:hover { color: var(--blue); }

@media (max-width: 960px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc > * { min-width: 0; }
  .doc__toc { position: static; }
  .doc__toc ol { display: flex; flex-wrap: wrap; gap: 4px 8px; border-left: 0; }
  .doc__toc li a { border-left: 0; padding: 6px 10px; border-radius: 999px; background: var(--elev); margin: 0; }
  .posts { grid-template-columns: 1fr 1fr; }
  .post-card--lead { grid-template-columns: 1fr; }
  .tool { grid-template-columns: 1fr; }
  .tool__panel { position: static; }
  .smap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .doc__cards, .posts, .tools, .kit, .receipt__grid, .post-nav { grid-template-columns: 1fr; }
  .acct__order { grid-template-columns: 1fr; }
  .acct__order .actions { justify-content: flex-start; }
  .smap { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr 1fr; }
  .tool__kpis { grid-template-columns: 1fr; }
  .rev__head { grid-template-columns: 42px 1fr; }
  .rev__head .stars { grid-column: 2; }
}

/* version comparison tables */
.cmp { margin-top: 8px; }
.cmp__intro { color: var(--ink-2); font-size: 16px; max-width: 760px; margin-bottom: 22px; }
.cmp__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--sh-sm); }
.cmp__table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.cmp__table th, .cmp__table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp__table thead th { background: var(--elev); font: 700 14px var(--f-head); color: var(--navy); letter-spacing: -.01em; position: sticky; top: 0; }
.cmp__table thead th small { display: block; margin-top: 4px; font: 700 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.cmp__table thead th:first-child { border-top-left-radius: 20px; }
.cmp__table thead th:last-child { border-top-right-radius: 20px; }
.cmp__table tbody th { font: 600 13.5px var(--f-body); color: var(--ink-2); width: 22%; background: #fff; }
.cmp__table tbody td { color: var(--ink); }
.cmp__table td.is-yes::before, .cmp__table td.is-no::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--green); }
.cmp__table td.is-no::before { background: #CBD5E1; }
.cmp__table .is-current { background: var(--blue-soft); box-shadow: inset 2px 0 0 var(--blue), inset -2px 0 0 var(--blue); }
.cmp__table thead th.is-current { box-shadow: inset 2px 2px 0 var(--blue), inset -2px 0 0 var(--blue); }
.cmp__table tr:last-child td.is-current { box-shadow: inset 2px 0 0 var(--blue), inset -2px -2px 0 var(--blue); }
.cmp__table tr:last-child th, .cmp__table tr:last-child td { border-bottom: 0; }
.cmp__price th, .cmp__price td { background: var(--elev); }
.cmp__buy { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--navy); color: #fff; margin: 2px 0; transition: transform var(--t), background-color var(--t); }
.cmp__buy strong { font: 800 16px var(--f-head); }
.cmp__buy span { font-size: 12px; color: #BFDBFE; }
.cmp__buy:hover { transform: translateY(-2px); background: var(--blue); }
.cmp__ask { color: var(--blue); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.cmp__note { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 820px; }
.cmp--compact .cmp__table { font-size: 13.5px; }
@media (max-width: 760px) { .cmp__table th, .cmp__table td { padding: 11px 12px; } .cmp__table tbody th { width: 30%; } }
.enq { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: grid; gap: 8px; }
.enq + .enq { margin-top: 10px; }
.enq header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.enq header > div { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.enq header strong { font-family: var(--f-head); }
.enq__meta { font-size: 12.5px; color: var(--muted); }
.enq__msg { color: var(--ink-2); font-size: 15px; white-space: pre-line; }
.enq footer { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.enq--new { border-left: 3px solid var(--blue); }
.enq--done { opacity: .7; }
.seo-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.ticks--2col { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.ticks--2col li { font-size: 14.5px; }
@media (max-width: 1100px) { .seo-grid, .ticks--2col { grid-template-columns: 1fr; } }
.rev-adm { padding: 18px 20px; display: block; }
.rev-adm + .rev-adm { margin-top: 12px; }
.rev-adm__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.rev-adm__head strong { font-family: var(--f-head); }
.rev-adm__form .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.md-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.md-editor__src { min-height: 480px; font-size: 13.5px; line-height: 1.55; resize: vertical; }
.md-editor__preview { border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; background: var(--elev); max-height: 560px; overflow: auto; }
.md-editor__out { font-size: 15px; }
.md-editor__out h2 { font-size: 20px; margin: 18px 0 8px; }
.md-editor__out h3 { font-size: 16px; margin: 14px 0 6px; }
@media (max-width: 960px) { .md-editor { grid-template-columns: 1fr; } .md-editor__preview { max-height: 360px; } }

.gw { display: grid; gap: 14px; }
.gwcard { display: grid; grid-template-columns: 28px 1fr auto; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; align-items: start; transition: border-color var(--t), box-shadow var(--t); }
.gwcard.is-active { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-ring); }
.gwcard input[type=radio] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.gwcard h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 18px; }
.gwcard > div { min-width: 0; }
.gwcard p { color: var(--ink-2); font-size: 14.5px; margin: 6px 0 0; overflow-wrap: anywhere; }
.gwcard .keys-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gwcard .keys-list span { font: 500 11.5px var(--f-mono); padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--elev); color: var(--ink-2); }
.gwcard .keys-list span.is-ok { background: var(--green-soft); border-color: var(--green-line); color: #047857; }
.gwcard .keys-list span.is-missing { background: var(--red-soft); border-color: var(--red-line); color: #B91C1C; }
.gwcard__side { display: grid; gap: 8px; justify-items: end; }
.gwcard__pick { display: contents; }
.gwkeys { margin-top: 14px; border-top: 1px dashed var(--line-2); padding-top: 12px; }
.gwkeys > summary { cursor: pointer; font: 600 14px var(--f-body); color: var(--blue); list-style: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gwkeys > summary::-webkit-details-marker { display: none; }
.gwkeys > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--t); }
.gwkeys[open] > summary::before { transform: rotate(45deg); }
.gwkeys > summary small { font-weight: 500; color: var(--muted); }
.gwkeys__form { margin-top: 14px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gwkeys__form .form__note, .gwkeys__form .form__foot { grid-column: 1 / -1; }
.gwkeys__form .field input, .gwkeys__form .field select { font: 500 13.5px var(--f-mono); }
.gwkeys__form .field small { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.gwkeys__form .field em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.gwkeys__clear { display: inline-flex; gap: 5px; align-items: center; color: #B91C1C; cursor: pointer; }
.gwkeys__clear input { width: 13px; height: 13px; margin: 0; accent-color: #B91C1C; }
@media (max-width: 760px) { .gwkeys__form { grid-template-columns: 1fr; } }
.login { max-width: 420px; margin: clamp(40px, 6vw, 80px) auto; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); display: grid; gap: 16px; }
.login h1 { font-size: 28px; }

/* motion */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
.fade-up { animation: fadeUp .8s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* trust marquee */
.marquee { background: var(--navy); color: #DDE6FF; overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); position: relative; }
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--navy), transparent); }
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; font: 600 13px var(--f-body); letter-spacing: .04em; white-space: nowrap; }
.marquee__track span i { width: 6px; height: 6px; border-radius: 50%; background: #38BDF8; box-shadow: 0 0 12px #38BDF8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 3D tilt (JS sets --rx/--ry) */
[data-tilt] { transition: transform .25s var(--ease), box-shadow var(--t-slow), border-color var(--t); }
[data-tilt].is-tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-6px); transition: box-shadow var(--t-slow), border-color var(--t); }

/* responsive */
@media (max-width: 1100px) {
  .nav__links a { padding: 9px 10px; font-size: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: 0; }
  .stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fams, .how, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .how__item:nth-child(2)::after { display: none; }
  .grid--3, .gcards { grid-template-columns: repeat(2, 1fr); }
  .gpage__grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .gnav { display: none; }
}
@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  .nav__links, .nav__tools .cur, .nav__tools .nav__call, .nav__shop { display: none; }
  .nav__burger { display: flex; margin-left: auto; }
  .nav__tools { margin-left: 0; }
  .hero__grid, .pdp__grid, .order__grid, .faq, .contact, .about, .record-block, .tabs, .adm { grid-template-columns: 1fr; }
  .hero__stage { min-height: 460px; margin-top: 12px; }
  .pdp__side, .gside, .adm__side, .gnav { position: static; }
  .adm__side { display: flex; flex-wrap: wrap; gap: 6px; }
  .gpage__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .tabs__bar { display: flex; flex-wrap: wrap; }
  .principles { grid-template-columns: 1fr; }
  .search { margin-left: 0; width: 100%; }
  .spec { grid-template-columns: 1fr; gap: 4px 0; }
  .spec dd { margin-bottom: 10px; }
}
@media (max-width: 600px) {
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .grid--3, .grid--2, .gcards, .gcards--2, .fams, .how, .grid--4, .stats { grid-template-columns: 1fr; }
  .stats__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats__item:last-child { border-bottom: 0; }
  .form__row, .hosted { grid-template-columns: 1fr; }
  .hosted > div:first-child { grid-column: auto; }
  .pay__row { grid-template-columns: 1fr; }
  .pay__total { text-align: left; }
  .hero__stage { min-height: 400px; }
  .stage__receipt { left: 0; right: 0; }
  .stage__pill--b { right: 0; }
  .stats { margin-top: 0; }
  .form__row--3 { grid-template-columns: 1fr; }
  .how__item:not(:last-child)::after { display: none; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .keybox { grid-template-columns: 1fr; }
  .gsteps li { grid-template-columns: 36px 1fr; gap: 12px; padding: 18px; }
  .gsteps li > .mono { width: 32px; height: 32px; }
  .gwcard { grid-template-columns: 24px 1fr; }
  .gwcard__side { grid-column: 1 / -1; justify-items: start; }
  .btn--lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .vault__key span { width: 100%; border-right: 0; }
  [data-tilt].is-tilting { transform: none; }
}
.kpi .ok { color: var(--green); } .kpi .bad { color: var(--red); } .kpi b.ok, .kpi b.bad { font-size: 16px; }
a.kpi { text-decoration: none; color: inherit; } a.kpi:hover { border-color: var(--blue-ring); }
.adm__cols { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.adm__listitem { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.adm__listitem:hover { background: var(--elev); } .adm__listitem.is-on { background: var(--blue-soft); color: var(--blue-2); font-weight: 600; }
.linkbtn--green:hover { color: #047857; } .linkbtn--red:hover { color: #B91C1C; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 8px 4px 0; overflow-x: auto; }
.bar { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar i { display: block; width: 100%; max-width: 34px; background: var(--blue); border-radius: 6px 6px 2px 2px; transition: background-color .15s; }
.bar:hover i { background: var(--navy); } .bar small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.is-late td { background: #FFFBEB; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---- AI Auto-Blogger ---- */
.autocard { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-left: 4px solid var(--amber); }
.autocard.is-on { border-left-color: var(--green); }
.switch { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--elev); border-radius: 999px; padding: 6px 14px 6px 6px; font: 600 13px/1 var(--f-body); color: var(--muted); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.switch span { width: 34px; height: 20px; border-radius: 999px; background: #CBD5E1; position: relative; transition: background-color .15s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch.is-on { color: #047857; background: #ECFDF5; border-color: #A7F3D0; } .switch.is-on span { background: var(--green); } .switch.is-on span::after { transform: translateX(14px); }
.actioncards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.actioncard { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--elev); }
.actioncard strong { font-size: 15px; } .actioncard span { color: var(--muted); font-size: 13px; flex: 1; }
.actioncard input { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.actioncard--amber { background: #FFFBEB; border-color: #FDE68A; }
.llmsrow { display: flex; flex-direction: column; gap: 10px; }
.llmsrow__item { display: flex; align-items: center; gap: 12px; } .llmsrow__item div { flex: 1; min-width: 0; }
.chip { display: inline-block; background: var(--elev); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: var(--ink-2); margin: 1px 2px 1px 0; }
details.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary h3 { font-size: 16px; } details.acc summary::before { content: "▸"; color: var(--muted); margin-right: 8px; font-size: 13px; }
details.acc[open] summary::before { content: "▾"; } details.acc summary h3 { display: inline; }
details.acc summary > :first-child { flex: 1; }
.rtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rtab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--elev); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600; }
.rtab small { color: var(--muted); font-weight: 500; margin-left: 4px; } .rtab.is-on { background: var(--navy); color: #fff; border-color: var(--navy); } .rtab.is-on small { color: #BFDBFE; }
.studio { display: grid; grid-template-columns: 2fr 1fr auto; gap: 12px; align-items: end; border: 1px solid #DDD6FE; background: #F5F3FF; border-radius: 14px; padding: 14px; margin-top: 10px; }
.studio .field { margin: 0; }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } .autocard { flex-direction: column; align-items: flex-start; } }
.checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
.checks li { display: grid; grid-template-columns: 14px 1fr; gap: 4px 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.checks li i { width: 10px; height: 10px; border-radius: 50%; display: block; } .checks li span { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.checks .check-ok i { background: var(--green); } .checks .check-warn i { background: var(--amber); } .checks .check-fail i { background: var(--red); }
/* ---- Regions cards ---- */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.region { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--green); }
.region.is-off { border-top-color: var(--amber); background: #FFFDF7; }
.region__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .region__head h3 { font-size: 17px; }
.region__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin: 0; }
.region__facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .region__facts dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.region__note { font-size: 13px; color: #047857; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 10px; padding: 8px 10px; margin: 0; }
.region__note.is-off { color: #B45309; background: var(--amber-soft); border-color: var(--amber-line); }
.region__charge { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .region__charge small { line-height: 1.4; }
.region__links { font-size: 13px; } .region__actions { display: flex; justify-content: flex-end; align-items: center; margin-top: auto; }
.kpis--6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dns { margin: 0; display: grid; gap: 8px; } .dns dt { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; } .dns dd { margin: 2px 0 0; }
.dns code, .codebox { display: block; font: 12px/1.5 var(--f-mono); background: var(--elev); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; word-break: break-all; white-space: pre-wrap; margin: 0; }
/* ---- Company Info ---- */
.company__id { display: flex; align-items: center; gap: 12px; } .company__mark { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 20px/1 var(--f-head); }
.trackgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 16px; } .trackgrid .field small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; }
.health.is-ok { border-left: 4px solid var(--green); } .health.is-warn { border-left: 4px solid var(--amber); }