:root {
  color-scheme: light;
  --canvas: #edf1f7;
  --surface: rgba(255, 255, 255, .82);
  --surface-solid: #fff;
  --ink: #10182c;
  --muted: #65718a;
  --line: rgba(27, 42, 70, .13);
  --primary: #5966ef;
  --primary-deep: #3f4bd1;
  --violet: #765fe8;
  --teal: #0ca995;
  --navy: #081123;
  --navy-2: #111d35;
  --danger: #cc3e5a;
  --warning: #c47c1d;
  --shadow: 0 30px 80px rgba(25, 38, 68, .14);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 170ms;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font: 15px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
::selection { background: rgba(89, 102, 239, .2); }
.hidden { display: none !important; }
.ambient { position: fixed; z-index: -2; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(90px); opacity: .17; pointer-events: none; }
.ambient-a { top: -19rem; left: -15rem; background: #7460ed; }
.ambient-b { right: -20rem; top: 9rem; background: #21b9a5; }
.noise { position: fixed; z-index: -1; inset: 0; opacity: .17; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E"); }

.topbar { position: sticky; z-index: 30; top: 14px; width: min(calc(100% - 36px), var(--max)); min-height: 68px; margin: 14px auto 0; padding: 10px 12px 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px; background: rgba(255, 255, 255, .72); box-shadow: 0 18px 55px rgba(31, 43, 72, .1), inset 0 0 0 1px rgba(31, 43, 72, .05); backdrop-filter: blur(24px) saturate(160%); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img, .auth-brand img { border-radius: 13px; box-shadow: 0 9px 24px rgba(36, 43, 89, .2); }
.brand > span, .auth-brand > span { display: grid; line-height: 1; }
.brand strong, .auth-brand strong { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-size: 1.05rem; letter-spacing: -.03em; }
.brand small, .auth-brand small { margin-top: 6px; color: var(--primary); font-size: .56rem; font-weight: 850; letter-spacing: .14em; }
.topbar nav { display: flex; align-items: center; gap: 8px; }
.topbar nav > a { padding: 9px 10px; color: #58657d; font-size: .8rem; font-weight: 680; text-decoration: none; transition: color var(--fast), transform var(--fast); }
.topbar nav > a:hover { color: var(--ink); transform: translateY(-1px); }
.identity { padding-right: 8px; display: flex; align-items: center; gap: 8px; color: #526079; font-size: .78rem; font-weight: 700; }
.identity i, .secure-note i, .approved-badge i { width: 8px; height: 8px; border-radius: 50%; background: #13b69f; box-shadow: 0 0 0 5px rgba(19, 182, 159, .11); }

.button { min-height: 42px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 12px; background: var(--navy); color: #fff; cursor: pointer; font-weight: 760; text-decoration: none; transition: transform var(--fast) var(--ease), box-shadow var(--fast), background var(--fast), border-color var(--fast), opacity var(--fast); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.975); }
.button:disabled { cursor: wait; opacity: .52; transform: none; }
.button.primary { background: linear-gradient(120deg, var(--primary), #6c57e8); box-shadow: 0 16px 34px rgba(73, 85, 220, .25); }
.button.primary:hover { box-shadow: 0 22px 42px rgba(73, 85, 220, .34); }
.button.ghost { border-color: var(--line); background: rgba(255, 255, 255, .48); color: #48556d; }
.button.glass { border-color: rgba(27, 42, 70, .13); background: rgba(255, 255, 255, .76); color: var(--ink); box-shadow: 0 10px 28px rgba(29, 42, 71, .08); }
.button.large { min-height: 54px; padding: 13px 21px; border-radius: 14px; }
.button.compact { min-height: 40px; padding: 8px 15px; }
.button.full { width: 100%; }
.button.danger { border-color: rgba(204, 62, 90, .22); background: rgba(204, 62, 90, .07); color: var(--danger); }
.button.warn { border-color: rgba(196, 124, 29, .22); background: rgba(196, 124, 29, .08); color: #9b5e10; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(73, 85, 220, .28); outline-offset: 3px; }

main { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.hero { min-height: 745px; padding: 108px 0 90px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 52px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { color: var(--primary); font-size: .68rem; font-weight: 850; letter-spacing: .15em; }
.hero-copy > .eyebrow { width: max-content; margin-bottom: 24px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .63); color: #55627a; box-shadow: 0 8px 28px rgba(40, 54, 84, .06); }
.hero-copy > .eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(12, 169, 149, .12); animation: pulse 2.6s ease-in-out infinite; }
h1, h2, h3 { margin-top: 0; font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; letter-spacing: -.055em; line-height: 1.03; }
.hero h1 { margin-bottom: 25px; font-size: clamp(3.8rem, 6vw, 6.2rem); font-weight: 670; }
h1 em { background: linear-gradient(105deg, var(--primary-deep), var(--violet) 48%, var(--teal)); background-clip: text; -webkit-background-clip: text; color: transparent; font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 0 0 32px; color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px 20px; color: #717d92; font-size: .75rem; font-weight: 650; }
.trust-row b { margin-right: 5px; color: var(--teal); }

.hero-stage { position: relative; min-height: 525px; margin-right: -84px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); border-radius: 32px 0 0 32px; background: var(--navy); box-shadow: 0 42px 90px rgba(17, 31, 66, .29), inset 0 0 0 1px rgba(91, 102, 239, .18); }
.hero-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 13, 29, .4), transparent 38%), linear-gradient(0deg, rgba(6, 13, 29, .34), transparent 45%); }
.hero-stage > img { width: 100%; height: 525px; display: block; object-fit: cover; object-position: 52% center; transform: scale(1.025); animation: breathe 9s ease-in-out infinite alternate; }
.stage-top { position: absolute; z-index: 3; inset: 18px 20px auto; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(7, 15, 32, .68); color: #a9b4c9; font-size: .62rem; font-weight: 800; letter-spacing: .08em; backdrop-filter: blur(16px); }
.stage-top b { margin-left: auto; color: #c3c9ff; }
.stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.floating-card { position: absolute; z-index: 4; min-width: 183px; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(9, 18, 38, .75); color: #fff; box-shadow: 0 20px 48px rgba(0, 0, 0, .3); backdrop-filter: blur(18px); animation: float 6s ease-in-out infinite; }
.floating-card small, .floating-card span { display: block; color: #9ca9c2; font-size: .58rem; font-weight: 800; letter-spacing: .07em; }
.floating-card strong { display: block; margin: 3px 0; font-size: 1.25rem; }
.rate-card { left: 23px; top: 84px; }
.payment-card { right: 26px; bottom: 26px; animation-delay: .8s; animation-direction: reverse; }

.signal-strip { padding: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-strip div { display: grid; text-align: center; }
.signal-strip div + div { border-left: 1px solid var(--line); }
.signal-strip strong { font: 650 1.9rem/1 "Segoe UI Variable Display", "Segoe UI"; letter-spacing: -.05em; }
.signal-strip span { margin-top: 5px; color: var(--muted); font-size: .74rem; }
.section { padding: 135px 0 120px; }
.section-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; }
.section-heading h2, .security-section h2 { margin: 13px 0 18px; font-size: clamp(2.8rem, 5vw, 5rem); }
.feature-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.feature { position: relative; min-height: 360px; padding: 32px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .78); border-radius: 26px; background: rgba(255, 255, 255, .76); box-shadow: 0 20px 55px rgba(35, 49, 80, .08); transition: transform .28s var(--ease), box-shadow .28s; }
.feature:hover { transform: translateY(-6px); box-shadow: 0 31px 70px rgba(35, 49, 80, .13); }
.feature::after { content: ""; position: absolute; right: -6rem; bottom: -8rem; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(89, 102, 239, .13), transparent 67%); }
.feature-dark { grid-row: span 2; min-height: 738px; border-color: rgba(255, 255, 255, .09); background: linear-gradient(145deg, #111c34, #091225 60%, #14264b); color: #fff; }
.feature small { color: var(--primary); font-weight: 850; letter-spacing: .13em; }
.feature-dark small { color: #aeb6ff; }
.feature h3 { max-width: 480px; margin: 58px 0 14px; font-size: clamp(2rem, 3.5vw, 3.4rem); }
.feature p { max-width: 540px; color: var(--muted); }
.feature-dark p { color: #a6b1c8; }
.feature-icon { position: absolute; top: 27px; right: 27px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(89, 102, 239, .18); border-radius: 13px; background: #edf0ff; color: var(--primary-deep); font-size: .78rem; font-weight: 850; }
.feature-dark .feature-icon { border-color: rgba(255, 255, 255, .12); background: rgba(104, 94, 236, .2); color: #c1c6ff; }
.feature-demo { position: absolute; left: 32px; right: 32px; bottom: 32px; padding: 26px; display: grid; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(255, 255, 255, .06); }
.feature-demo span { color: #99a7bf; font-size: .7rem; }
.feature-demo strong { margin: 8px 0 18px; font-size: 3.4rem; line-height: 1; }
.feature-demo b { padding: 12px 14px; border-radius: 12px; background: rgba(103, 91, 236, .22); color: #c1c6ff; font-size: .74rem; }
.security-section { margin-bottom: 120px; padding: 68px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; border-radius: 30px; background: var(--navy); color: white; box-shadow: 0 36px 90px rgba(16, 30, 62, .27); }
.security-section p { max-width: 620px; color: #a9b4c8; font-size: 1.02rem; }
.security-stack { display: grid; gap: 10px; align-content: center; }
.security-stack span { padding: 16px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .045); color: #d7deec; font-weight: 680; }
.security-stack b { color: #aeb6ff; font-size: .7rem; }

.account-shell { min-height: calc(100vh - 120px); padding: 48px 0 80px; display: grid; grid-template-columns: 250px 1fr; gap: 30px; }
.account-sidebar { height: calc(100vh - 150px); min-height: 590px; padding: 26px 18px; position: sticky; top: 102px; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .78); border-radius: 22px; background: rgba(255, 255, 255, .7); box-shadow: 0 20px 55px rgba(35, 49, 80, .08); backdrop-filter: blur(20px); }
.account-sidebar h2 { margin: 9px 0 5px; font-size: 1.85rem; }
.account-sidebar p { margin: 0; color: var(--muted); font-size: .8rem; }
.account-nav-list { margin-top: 28px; display: grid; gap: 7px; }
.account-tab { width: 100%; padding: 12px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #65718a; cursor: pointer; text-align: left; font-weight: 700; transition: background var(--fast), color var(--fast), transform var(--fast); }
.account-tab:hover { background: rgba(89, 102, 239, .06); color: var(--ink); transform: translateX(2px); }
.account-tab.active { border-color: rgba(89, 102, 239, .14); background: rgba(89, 102, 239, .1); color: var(--primary-deep); }
.account-tab > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(89, 102, 239, .08); }
.account-tab i { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--primary); color: white; font-size: .68rem; font-style: normal; text-align: center; }
.secure-note { margin-top: auto; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .6); }
.secure-note > div { display: grid; }
.secure-note strong { font-size: .76rem; }
.secure-note span { color: var(--muted); font-size: .65rem; }
.account-content { min-width: 0; }
.account-panel { animation: panel-in .48s var(--ease) both; }
.panel-heading { min-height: 116px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; }
.panel-heading h1 { margin: 9px 0 8px; font-size: clamp(2.8rem, 5vw, 4.7rem); }
.panel-heading h1 em { font-size: .42em; vertical-align: super; }
.panel-heading p { margin: 0; color: var(--muted); }
.approved-badge { margin-top: 11px; padding: 9px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(12, 169, 149, .18); border-radius: 999px; background: rgba(12, 169, 149, .08); color: #078876; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.approved-badge i { width: 7px; height: 7px; }
.download-card { min-height: 220px; padding: 30px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 25px; overflow: hidden; background: linear-gradient(135deg, #111c34, #091225 60%, #172850); color: white; box-shadow: 0 30px 70px rgba(15, 29, 60, .25); }
.download-art { position: relative; width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 27px; background: rgba(255, 255, 255, .06); }
.download-art img { position: relative; z-index: 1; border-radius: 20px; }
.download-art span { position: absolute; inset: 20px; border-radius: 50%; background: var(--primary); filter: blur(25px); opacity: .45; }
.download-card small { color: #aeb6ff; font-weight: 800; letter-spacing: .11em; }
.download-card h2 { margin: 8px 0 7px; font-size: 2rem; }
.download-card p { margin: 0; color: #a9b4c8; }
.download-meta { margin-top: 13px; display: flex; gap: 18px; color: #7f8ca5; font-size: .68rem; }
.account-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.account-cards article { min-height: 178px; padding: 22px; display: flex; gap: 15px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 20px; background: rgba(255, 255, 255, .7); box-shadow: 0 18px 45px rgba(35, 49, 80, .07); }
.account-cards article > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(89, 102, 239, .15); border-radius: 12px; background: #edf0ff; color: var(--primary-deep); font-weight: 850; }
.account-cards small { color: var(--primary); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.account-cards strong { display: block; margin: 8px 0 5px; }
.account-cards p { margin: 0; color: var(--muted); font-size: .78rem; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.surface-card { padding: 28px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 22px; background: rgba(255, 255, 255, .75); box-shadow: 0 20px 55px rgba(35, 49, 80, .08); }
.surface-card h2 { margin-bottom: 23px; font-size: 1.6rem; }
dl { margin: 0; display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
dl div { padding: 14px 16px; display: grid; grid-template-columns: 100px 1fr; background: rgba(255, 255, 255, .72); }
dt { color: var(--muted); font-size: .74rem; }
dd { margin: 0; font-weight: 680; word-break: break-word; }
.filter-row { margin-bottom: 17px; padding: 4px; width: max-content; display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .58); }
.filter { padding: 8px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.filter.active { background: white; color: var(--primary-deep); box-shadow: 0 5px 14px rgba(29, 42, 71, .09); }
.user-list { display: grid; gap: 11px; }
.user-card { padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 17px; background: rgba(255, 255, 255, .75); box-shadow: 0 14px 38px rgba(35, 49, 80, .06); }
.user-card h3 { margin: 0 0 4px; font-size: 1.13rem; letter-spacing: -.025em; }
.user-heading { margin-bottom: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.user-heading h3 { margin: 0; }
.protected-account, .account-lock { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(72, 86, 214, .18); border-radius: 999px; background: rgba(72, 86, 214, .08); color: var(--primary-deep); font-size: .64rem; font-weight: 850; letter-spacing: .055em; }
.protected-account { padding: 4px 8px; text-transform: uppercase; }
.protected-account::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(72, 86, 214, .1); }
.account-lock { min-height: 36px; padding: 7px 11px; cursor: default; }
.account-lock::before { content: "\1F512"; font-size: .72rem; }
.user-card p { margin: 0; color: var(--muted); font-size: .77rem; }
.user-card p + p { margin-top: 3px; }
.user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.user-actions .button { min-height: 36px; padding: 7px 11px; font-size: .72rem; }
.empty-state { padding: 60px 20px; border: 1px dashed rgba(27, 42, 70, .2); border-radius: 20px; color: var(--muted); text-align: center; }

#site-footer { width: min(calc(100% - 36px), var(--max)); margin: 0 auto 30px; padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: #7a8598; font-size: .72rem; }
#site-footer a { text-decoration: none; }
.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; }
.modal-scrim { position: absolute; inset: 0; border: 0; background: rgba(6, 12, 25, .66); backdrop-filter: blur(16px); cursor: pointer; animation: fade-in .25s ease both; }
.modal-scrim.locked { cursor: default; }
.auth-card { position: relative; z-index: 1; width: min(100%, 555px); max-height: calc(100vh - 48px); padding: 30px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .85); border-radius: 26px; background: rgba(249, 251, 255, .96); box-shadow: 0 40px 100px rgba(4, 10, 24, .35); animation: modal-in .45s var(--ease) both; }
.compact-card { width: min(100%, 510px); }
.modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .7); color: var(--muted); cursor: pointer; font-size: 1.3rem; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-form { margin-top: 28px; display: grid; gap: 15px; }
.auth-heading { margin-bottom: 4px; }
.auth-heading h2 { margin: 9px 0 8px; font-size: 2.65rem; }
.auth-heading p { margin: 0; color: var(--muted); }
.auth-form label, .form-stack label { display: grid; gap: 6px; color: #4d5a72; font-size: .75rem; font-weight: 740; }
.auth-form input, .form-stack input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .82); color: var(--ink); outline: 0; transition: border-color var(--fast), box-shadow var(--fast), background var(--fast); }
.auth-form input:focus, .form-stack input:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 4px rgba(89, 102, 239, .1); }
label small { color: #8490a3; font-size: .65rem; font-weight: 550; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.turnstile-slot { min-height: 4px; }
.form-status { min-height: 20px; margin: 0; color: var(--muted); font-size: .75rem; text-align: center; }
.form-status.error { color: var(--danger); }
.form-status.success { color: #078876; }
.auth-switch { display: flex; justify-content: center; gap: 8px; color: var(--muted); font-size: .74rem; }
.auth-switch button { padding: 0; border: 0; background: transparent; color: var(--primary-deep); cursor: pointer; font-weight: 750; }
.form-stack { display: grid; gap: 15px; }
.toast-region { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: grid; gap: 10px; }
.toast { max-width: 390px; padding: 14px 17px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 13px; background: rgba(8, 17, 35, .94); color: white; box-shadow: 0 20px 50px rgba(3, 8, 20, .3); animation: toast-in .4s var(--ease) both; }

.reveal { opacity: 0; transform: translateY(20px); }
.reveal.visible { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform .75s var(--ease); }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(12, 169, 149, .04); } }
@keyframes breathe { to { transform: scale(1.055); } }
@keyframes float { 50% { transform: translateY(-9px); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 980px) {
  .topbar nav > a { display: none; }
  .hero { padding-top: 80px; grid-template-columns: 1fr; }
  .hero-stage { margin: 0 -18px; border-radius: 28px; }
  .feature-grid, .security-section, .profile-grid { grid-template-columns: 1fr; }
  .feature-dark { min-height: 650px; }
  .account-shell { grid-template-columns: 1fr; }
  .account-sidebar { position: static; height: auto; min-height: 0; }
  .account-nav-list { grid-template-columns: repeat(3, 1fr); }
  .secure-note { display: none; }
  .account-cards { grid-template-columns: 1fr; }
  .download-card { grid-template-columns: auto 1fr; }
  .download-card > .button { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .topbar { top: 8px; width: calc(100% - 16px); margin-top: 8px; }
  .brand small { display: none; }
  .topbar .button.ghost { display: none; }
  main { width: calc(100% - 24px); }
  .hero { min-height: 0; padding: 70px 0; }
  .hero h1 { font-size: 3.25rem; }
  .hero-stage { min-height: 420px; }
  .hero-stage > img { height: 420px; }
  .floating-card { min-width: 145px; padding: 12px; }
  .signal-strip { grid-template-columns: 1fr 1fr; }
  .signal-strip div { padding: 18px 0; }
  .signal-strip div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .signal-strip div:nth-child(4) { border-top: 1px solid var(--line); }
  .section { padding: 90px 0; }
  .feature { min-height: 390px; padding: 25px; }
  .feature-dark { min-height: 620px; }
  .feature-demo { left: 25px; right: 25px; bottom: 25px; }
  .security-section { margin-bottom: 80px; padding: 34px 25px; gap: 30px; }
  .account-shell { padding-top: 35px; }
  .account-nav-list { grid-template-columns: 1fr; }
  .panel-heading { display: block; }
  .approved-badge { width: max-content; }
  .download-card { grid-template-columns: 1fr; text-align: center; }
  .download-art { margin: 0 auto; }
  .download-meta { justify-content: center; }
  .user-card { grid-template-columns: 1fr; }
  .user-actions { justify-content: flex-start; }
  .filter-row { width: 100%; overflow-x: auto; }
  .auth-card { padding: 24px 20px; }
  .two-column { grid-template-columns: 1fr; }
  #site-footer { width: calc(100% - 24px); flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}