/* generato da _pagine/build.py: non modificarlo, modifica i file di origine */
/* pages.css */
:root {
--bg: #ffffff;
--ink: #12172f;
--ink-2: #646a7d;
--ink-3: #9da1ae;
--text: #2b3048;
--line: rgba(18, 23, 47, 0.08);
--navy: #242e57;
--tile: #f4f5f8;
--accent: #ef5b3d;
--accent-ink: #d4452a;
--accent-soft: rgba(239, 91, 61, 0.1);
--ok: #1f9d55;
--ok-soft: rgba(31, 157, 85, 0.1);
--warn: #9a5c00;
--warn-soft: rgba(227, 155, 45, 0.16);
--card-shadow: 0 0 0 1px rgba(18, 23, 47, 0.06), 0 1px 2px rgba(18, 23, 47, 0.04), 0 18px 40px -18px rgba(18, 23, 47, 0.22);
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
--display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
--max: 1280px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
font-size: 17px; line-height: 1.5; letter-spacing: -0.016em;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@keyframes rise { from { transform: translate3d(0, 18px, 0); } }
.nav {
position: fixed; inset: 0 0 auto; z-index: 50;
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 1px 0 var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-logo { display: grid; }
.nav-logo img { grid-area: 1 / 1; height: 24px; width: auto; transition: opacity 300ms ease; }
.nav .logo-on-dark { opacity: 0; }
.nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--ink-2); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-login { font-size: 13px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .nav-links > a:hover, .nav-drop > a:hover, .nav-login:hover { opacity: 0.65; } }
@media (max-width: 900px) { .nav-links, .nav-login { display: none; } }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px;
font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; border: 0; cursor: pointer; text-align: center;
transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
-webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-ghost { background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-light { background: #fff; color: var(--ink); }
.btn-glass { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.btn-sm { min-height: 32px; padding: 0 16px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { background: #2d3a6d; }
.btn-ghost:hover { background: #eceef3; }
.btn-light:hover { background: #e8e8ed; }
.btn-glass:hover { background: rgba(255, 255, 255, 0.2); }
}
.crumbs { padding-top: 84px; font-size: 13px; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs [aria-current] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); } }
.p-hero { padding: 28px 0 72px; }
.p-hero .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 52px; align-items: center; }
.p-hero.solo .wrap { grid-template-columns: minmax(0, 820px); justify-content: center; text-align: center; }
.p-hero-copy { animation: rise 800ms var(--ease-out); }
.eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.01em; }
h1 {
margin: 0; font-family: var(--display);
font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -0.038em; text-wrap: balance;
}
h1 .dim, h2 .dim { color: #8b90a0; }
.lead { margin: 20px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.p-hero.solo .lead { margin-left: auto; margin-right: auto; max-width: 36em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.p-hero.solo .actions { justify-content: center; }
.brief { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.brief li { display: flex; gap: 10px; align-items: baseline; }
.brief li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
.p-hero-shot { animation: rise 900ms var(--ease-out) 120ms backwards; }
@media (max-width: 900px) {
.p-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.p-hero { padding-bottom: 56px; }
}
.sec { padding: 88px 0; }
.sec.gray { background: var(--tile); }
.sec-head { max-width: 46em; margin-bottom: 40px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2 {
margin: 0; font-family: var(--display);
font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.034em; text-wrap: balance;
}
.sec-head p { margin: 16px 0 0; font-size: 18px; color: var(--ink-2); text-wrap: pretty; }
h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.022em; }
.prose { max-width: 42em; color: var(--text); }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--ink); }
.inline-link, .prose a, .faq a, .facts a, .note a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: rgba(212, 69, 42, 0.3); text-underline-offset: 3px; }
@media (max-width: 700px) { .sec { padding: 64px 0; } }
.problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.quote {
margin: 0; padding: 28px 30px; border-radius: 24px; background: #fff; box-shadow: var(--card-shadow);
font-family: var(--display); font-size: clamp(21px, 2.1vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em;
}
.quote footer { margin-top: 14px; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); }
.pains { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pains li { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.pains b { display: block; margin-bottom: 4px; color: var(--ink); }
@media (max-width: 860px) { .problem { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.flow { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.flow li { position: relative; padding: 24px 22px 22px; border-radius: 22px; background: #fff; box-shadow: var(--card-shadow); counter-increment: f; }
.flow li::before {
content: counter(f); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 16px; border-radius: 50%;
background: var(--navy); color: #fff; font-size: 14px; font-weight: 700;
}
.flow p { margin: 8px 0 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 960px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.facts > div { padding: 26px 24px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.facts h3 { font-size: 17px; }
.facts ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15.5px; color: var(--text); }
.facts li { position: relative; padding-left: 22px; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.facts .need li::before { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--navy); transform: none; top: 0.55em; }
@media (max-width: 900px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.example { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.note-demo { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.timeline { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 22px 24px; color: var(--text); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--accent); }
.timeline time { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.timeline b { color: var(--ink); }
@media (max-width: 860px) { .example { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.faq { max-width: 50em; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0;
cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; color: var(--ink-3); transition: transform 300ms var(--ease-apple); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--text); max-width: 42em; }
.faq details > div p { margin: 0 0 10px; }
.next-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.next-grid a {
display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: #fff;
box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms ease, transform 200ms var(--ease-out);
}
.next-grid small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.next-grid b { font-size: 17px; letter-spacing: -0.02em; }
.next-grid span { font-size: 14.5px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .next-grid a:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); } }
@media (max-width: 960px) { .next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .next-grid { grid-template-columns: minmax(0, 1fr); } }
.cta-band { padding: 96px 0; background: radial-gradient(120% 70% at 50% 120%, rgba(239, 91, 61, 0.38), rgba(239, 91, 61, 0) 60%), linear-gradient(160deg, #141c44, #0b1230); color: #fff; text-align: center; }
.cta-band h2 { max-width: 18em; margin: 0 auto; }
.cta-band p { max-width: 34em; margin: 16px auto 0; font-size: 18px; color: rgba(255, 255, 255, 0.72); }
.cta-band .actions { justify-content: center; }
.phases { display: grid; gap: 56px; }
.phase-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.phase-head span { font-size: 13px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.phase-head h2 { font-size: clamp(24px, 2.6vw, 32px); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card-link {
display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 24px; border-radius: 22px; background: #fff;
box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms ease, transform 200ms var(--ease-out);
}
.card-link .ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; background: var(--tile); color: var(--navy); }
.card-link .ico svg { width: 21px; height: 21px; }
.card-link p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.card-link .go { margin-top: auto; padding-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .card-link:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); } }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.table-wrap { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
th, td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
thead th { border-top: 0; background: var(--tile); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); }
td:first-child { font-weight: 600; color: var(--ink); }
td { color: var(--text); }
.price-box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.price-main { padding: 40px; background: linear-gradient(160deg, #141c44, #0b1230); color: #fff; }
.plans { display: grid; gap: 12px; margin: 24px 0 28px; }
.plan { padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.plan b { display: block; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.plan .big { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; }
.plan .per { margin-left: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.plan p { margin: 4px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.7); }
.price-incl { padding: 40px; }
.price-incl ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.price-incl li { position: relative; padding-left: 26px; color: var(--text); }
.price-incl li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.price-incl small { display: block; color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 860px) { .price-box { grid-template-columns: minmax(0, 1fr); } .price-main, .price-incl { padding: 28px 22px; } }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.form-card { padding: 32px; border-radius: 26px; background: #fff; box-shadow: var(--card-shadow); }
.form-card h2 { font-size: 26px; }
.field { display: grid; gap: 7px; margin-top: 18px; }
.field label { font-size: 14.5px; font-weight: 600; }
.field label em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.field input, .field select, .field textarea {
width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 0;
box-shadow: inset 0 0 0 1px rgba(18, 23, 47, 0.14); background: #fff;
font: inherit; font-size: 16px; color: var(--ink); letter-spacing: -0.01em;
transition: box-shadow 150ms ease;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--navy); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .split { grid-template-columns: 1fr; } }
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips-pick label { position: relative; }
.chips-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips-pick span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.chips-pick input:checked + span { background: var(--navy); color: #fff; box-shadow: none; }
.chips-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-card .btn { width: 100%; margin-top: 24px; }
.form-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
.form-error { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 14.5px; }
.form-done { padding: 24px 0 8px; text-align: center; }
.form-done .ok-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.form-done .ok-ico svg { width: 26px; height: 26px; }
.form-done p { color: var(--ink-2); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.after { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: a; }
.after li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; counter-increment: a; }
.after li::before { content: counter(a); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tile); font-weight: 700; color: var(--navy); }
.after b { display: block; }
.after span { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .form-card { padding: 24px 20px; } }
.shot { margin: 0; }
.shot figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }
.num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.p-hero-copy, .p-hero-shot { animation: none; }
.btn, .card-link, .next-grid a { transition: none; }
}
/* mock.css */
:root { --m-ease: cubic-bezier(0.32, 0.72, 0, 1); }
.m-app {
--m-bg: #f3f6fc; --m-s1: #fff; --m-s2: #f2f5fb; --m-s3: #e8edf7;
--m-ink: #14233f; --m-muted: #5b6b86; --m-subtle: #93a1bb; --m-line: #e5eaf3; --m-line2: #d6deec;
--m-navy: #1b2b4d; --m-navy2: #2e4675; --m-navy-soft: #ebeff8; --m-steel: #5b7fb0; --m-steel-soft: #eaf0f9;
--m-coral: #ff6b5b; --m-coral2: #ff8c6b; --m-coral-strong: #ef5340; --m-coral-soft: #ffece9;
container-type: inline-size;
position: relative; overflow: hidden; border-radius: 16px; background: var(--m-bg);
box-shadow: 0 0 0 1px rgba(20, 35, 63, 0.07), 0 2px 4px rgba(20, 35, 63, 0.04), 0 28px 64px -28px rgba(20, 35, 63, 0.32);
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
font-size: 12px; line-height: 1.4; letter-spacing: -0.005em; color: var(--m-ink); text-align: left;
-webkit-font-smoothing: antialiased;
}
.m-app svg { display: block; flex: none; }
.m-app .n { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.app-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--m-s1); border-bottom: 1px solid var(--m-line); }
.app-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #e2e6ee; }
.app-bar > i:nth-child(1) { background: #ff5f57; } .app-bar > i:nth-child(2) { background: #febc2e; } .app-bar > i:nth-child(3) { background: #28c840; }
.app-url { display: inline-flex; align-items: center; gap: 5px; margin: 0 auto; transform: translateX(-21px); padding: 3px 12px; border-radius: 7px; background: var(--m-s2); font-size: 10.5px; font-weight: 600; color: var(--m-muted); }
.app-url svg { width: 9px; height: 9px; color: var(--m-subtle); }
.app-body { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; background: var(--m-s1); border-right: 1px solid var(--m-line); }
.app-rail span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--m-subtle); }
.app-rail span svg { width: 15px; height: 15px; }
.app-rail span.on { background-image: linear-gradient(135deg, var(--m-navy), var(--m-navy2)); color: #fff; box-shadow: 0 4px 10px -4px rgba(27, 43, 77, 0.6); }
.app-rail hr { width: 18px; margin: 4px 0; border: 0; border-top: 1px solid var(--m-line); }
.app-main { min-width: 0; padding: 14px 16px 16px; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.app-crumb { font-size: 10.5px; font-weight: 600; color: var(--m-subtle); }
.app-title { margin-top: 2px; font-size: 16px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.app-title small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--m-muted); }
.m-card { padding: 12px 14px; border-radius: 14px; background: var(--m-s1); border: 1px solid var(--m-line); box-shadow: 0 1px 2px rgba(20, 35, 63, 0.04), 0 4px 14px rgba(20, 35, 63, 0.05); }
.m-card + .m-card, .m-stack > * + * { margin-top: 10px; }
.m-card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.m-ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--m-navy-soft); color: var(--m-navy); }
.m-ico svg { width: 14px; height: 14px; }
.m-ico.coral { background: var(--m-coral-soft); color: var(--m-coral-strong); }
.m-card-h b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.m-card-h small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 600; color: var(--m-subtle); }
.m-card-h > :nth-child(3) { margin-left: auto; }
.m-eyb { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-subtle); }
.m-row { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 0; }
.m-row + .m-row { border-top: 1px solid var(--m-line); }
.m-row .k { flex: none; font-size: 11.5px; font-weight: 600; color: var(--m-muted); white-space: nowrap; }
.m-row .v { margin-left: auto; font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; }
.m-row .v small, .m-row .t small { display: block; font-size: 10.5px; font-weight: 600; color: var(--m-subtle); }
.m-row .t { min-width: 0; font-size: 12px; font-weight: 700; }
.m-row .t, .m-row .t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-chip { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; background: var(--m-navy-soft); color: var(--m-navy); }
.m-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.m-chip svg { width: 10px; height: 10px; }
.m-chip.coral { background: var(--m-coral-soft); color: var(--m-coral-strong); }
.m-chip.steel { background: var(--m-steel-soft); color: var(--m-steel); }
.m-chip.mute { background: var(--m-s3); color: var(--m-muted); }
.m-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #fff; background-image: linear-gradient(135deg, var(--m-coral), var(--m-coral2)); box-shadow: 0 4px 12px -6px rgba(255, 107, 91, 0.9); }
.m-btn svg { width: 12px; height: 12px; }
.m-btn.navy { background-image: linear-gradient(135deg, var(--m-navy), var(--m-navy2)); box-shadow: 0 4px 12px -6px rgba(27, 43, 77, 0.8); }
.m-btn.ghost { background: var(--m-s1); background-image: none; color: var(--m-ink); box-shadow: inset 0 0 0 1px var(--m-line2); }
.m-lab { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: var(--m-muted); }
.m-field { display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 10px; background: var(--m-s2); border: 1px solid var(--m-line); font-size: 12px; font-weight: 700; white-space: nowrap; }
.m-field .u { margin-left: auto; font-weight: 600; color: var(--m-subtle); }
.m-grid { display: grid; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); gap: 10px; }
.m-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-tot b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.m-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.m-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 11px; background: var(--m-navy-soft); color: var(--m-navy); font-size: 11px; font-weight: 600; }
.m-note svg { width: 13px; height: 13px; margin-top: 1px; }
.m-note.coral { background: var(--m-coral-soft); color: var(--m-coral-strong); }
.m-steps { display: flex; align-items: center; margin-bottom: 12px; }
.m-steps span { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--m-ink); white-space: nowrap; counter-increment: s; }
.m-steps span:last-child { flex: none; }
.m-steps { counter-reset: s; }
.m-steps span::before { content: counter(s); display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--m-s3); color: var(--m-subtle); font-size: 10px; }
.m-steps span:not(:last-child)::after { content: ""; flex: 1; min-width: 8px; height: 2px; margin-right: 6px; border-radius: 2px; background: var(--m-line2); }
.m-steps span.done::before { content: "✓"; background: var(--m-navy); color: #fff; }
.m-steps span.done::after { background: var(--m-navy); }
.m-steps span.on::before { background-image: linear-gradient(135deg, var(--m-coral), var(--m-coral2)); color: #fff; box-shadow: 0 0 0 3px var(--m-coral-soft); }
.m-steps em { display: none; font-style: normal; }
.m-steps span.on em { display: inline; }
.m-tog { position: relative; flex: none; width: 28px; height: 16px; border-radius: 999px; background: var(--m-line2); transition: background-color 300ms ease var(--d, 0ms); }
.m-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20, 35, 63, 0.25); transition: transform 420ms var(--m-ease) var(--d, 0ms); }
.m-tog.on { background: var(--m-navy); }
.m-tog.on::after { transform: translateX(12px); }
.m-seg { display: grid; grid-template-columns: repeat(var(--c, 5), minmax(0, 1fr)); padding: 2px; border-radius: 10px; background: var(--m-s2); border: 1px solid var(--m-line); }
.m-seg span { display: grid; place-items: center; height: 24px; border-radius: 8px; font-size: 10.5px; font-weight: 700; color: var(--m-muted); white-space: nowrap; }
.m-seg span.on { background: var(--m-s1); color: var(--m-ink); box-shadow: 0 1px 3px rgba(20, 35, 63, 0.14); }
.duo { display: grid; }
.duo > .m-app, .duo > .phone-m { grid-area: 1 / 1; }
.duo > .m-app { width: 61%; align-self: start; }
.phone-m {
position: relative; z-index: 2; justify-self: end; align-self: start; margin-top: 34px; width: 36%; max-width: 214px;
padding: 6px; border-radius: 34px; background: linear-gradient(160deg, #2b3350, #0e1428);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -24px rgba(11, 18, 48, 0.6);
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; color: #14233f; text-align: left; -webkit-font-smoothing: antialiased;
}
.phone-s { position: relative; overflow: hidden; aspect-ratio: 9 / 18.5; border-radius: 28px; background: #fff; padding: 30px 13px 14px; font-size: 10.5px; line-height: 1.35; }
.phone-s::before { content: ""; position: absolute; top: 9px; left: 50%; width: 30%; height: 15px; border-radius: 999px; background: #0e1428; transform: translateX(-50%); }
.ph-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.ph-h img { height: 12px; width: auto; }
.ph-tag { padding: 2px 7px; border-radius: 999px; background: #ebeff8; color: #1b2b4d; font-size: 8.5px; font-weight: 700; white-space: nowrap; }
.ph-t { font-size: 13px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ph-sub { margin-top: 2px; font-size: 9.5px; font-weight: 600; color: #93a1bb; }
.ph-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0; }
.ph-steps span { padding-top: 5px; border-top: 2.5px solid #e8edf7; font-size: 8.5px; font-weight: 700; color: #93a1bb; }
.ph-steps span.done { border-color: #1b2b4d; color: #1b2b4d; }
.ph-steps span.on { border-color: #ff6b5b; color: #14233f; }
.ph-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 8px 0 6px; }
.ph-otp b { display: grid; place-items: center; height: 26px; border-radius: 7px; background: #f2f5fb; border: 1px solid #e5eaf3; font-size: 13px; font-weight: 800; }
.ph-pad { position: relative; height: 54px; margin-top: 6px; border-radius: 10px; border: 1.5px dashed #d6deec; background: #fff; }
.ph-pad svg { position: absolute; inset: 4px 10px 8px; width: calc(100% - 20px); height: calc(100% - 12px); color: #1b2b4d; }
.ph-pad::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; border-bottom: 1px solid #e5eaf3; }
.ph-btn { display: grid; place-items: center; height: 30px; margin-top: 10px; border-radius: 10px; background-image: linear-gradient(135deg, #1b2b4d, #2e4675); color: #fff; font-size: 10.5px; font-weight: 700; }
.ph-foot { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 8px; font-weight: 600; color: #93a1bb; }
.ph-doc { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.ph-doc + .ph-doc { border-top: 1px solid #e5eaf3; }
.ph-doc i { display: grid; place-items: center; flex: none; width: 24px; height: 18px; border-radius: 4px; background: #e8edf7; }
.ph-doc i::after { content: ""; width: 12px; height: 2px; border-radius: 2px; background: #93a1bb; box-shadow: 0 -4px 0 #c3cde0; }
.ph-doc > div { flex: 1; min-width: 0; }
.ph-doc b { display: block; font-size: 10px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-ok { display: block; margin-top: 1px; font-size: 9px; font-weight: 700; color: #1b2b4d; white-space: nowrap; }
.ph-doc .m-sw { display: grid; }
.ph-ok.wait { color: #ef5340; }
.m-sw { display: inline-grid; flex: none; vertical-align: top; white-space: nowrap; }
.m-sw > * { grid-area: 1 / 1; transition: opacity 260ms ease var(--d, 0ms), transform 520ms var(--m-ease) var(--d, 0ms); }
.m-sw > :first-child { opacity: 0; transform: translateY(-4px); }
.m-sw.block { display: grid; }
.m-row .v > .m-sw, .m-tot b > .m-sw { display: grid; justify-items: end; }
.gantt-m { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; row-gap: 6px; }
.gantt-m .days { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 9.5px; font-weight: 700; color: var(--m-subtle); text-align: center; }
.gantt-m .days span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gantt-m .days b { display: grid; place-items: center; width: 20px; height: 20px; font-size: 11.5px; color: var(--m-ink); }
.gantt-m .days .today b { border-radius: 50%; background: var(--m-coral); color: #fff; }
.gantt-m .car { min-width: 0; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-m .car small { display: block; font-size: 9.5px; font-weight: 600; color: var(--m-subtle); }
.gantt-m .lane { position: relative; height: 28px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--m-line) calc(100% / 7 - 1px) calc(100% / 7)); }
.gantt-m .lane i {
position: absolute; top: 3px; bottom: 3px; left: calc(var(--s) / 7 * 100% + 1px); width: calc(var(--l) / 7 * 100% - 3px);
display: flex; align-items: center; padding: 0 7px; border-radius: 7px; font-style: normal; font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden;
transform-origin: 0 50%; transition: transform 700ms var(--m-ease) var(--d, 0ms), opacity 300ms ease var(--d, 0ms);
}
.gantt-m .con { background-image: linear-gradient(135deg, var(--m-navy), var(--m-navy2)); color: #fff; }
.gantt-m .pre { background: var(--m-coral-soft); color: var(--m-coral-strong); box-shadow: inset 0 0 0 1px rgba(255, 107, 91, 0.35); }
.gantt-m .end { background: var(--m-s3); color: var(--m-muted); }
.gantt-m .off { background: repeating-linear-gradient(135deg, var(--m-s3) 0 5px, var(--m-s2) 5px 10px); color: var(--m-muted); }
.gantt-m .ghost { justify-content: center; background: rgba(255, 255, 255, 0.92); color: var(--m-coral-strong); box-shadow: inset 0 0 0 1.5px var(--m-coral), 0 4px 12px -6px rgba(239, 83, 64, 0.6); border-radius: 7px; }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 10.5px; font-weight: 600; color: var(--m-muted); }
.m-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m-legend i { width: 10px; height: 10px; border-radius: 3px; }
.m-tabs { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--m-s2); border: 1px solid var(--m-line); }
.m-tabs span { padding: 3px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: var(--m-muted); }
.m-tabs span.on { background: var(--m-s1); color: var(--m-ink); box-shadow: 0 1px 3px rgba(20, 35, 63, 0.14); }
.m-pop { position: absolute; z-index: 2; padding: 7px 10px; border-radius: 10px; background: var(--m-ink); color: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(20, 35, 63, 0.7); transition: opacity 300ms ease var(--d, 0ms), transform 520ms var(--m-ease) var(--d, 0ms); }
.m-pop b { color: #ffb4aa; }
.bp { position: relative; overflow: hidden; border-radius: 11px; border: 1px solid var(--m-line); background: #fff; }
.bp img { display: block; width: 100%; height: auto; }
.bp-x { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px #fff, 0 6px 14px -4px rgba(20, 35, 63, 0.45); transition: transform 520ms var(--m-ease) var(--d, 0ms), opacity 200ms ease var(--d, 0ms); }
.bp-x.old { background: var(--m-coral); }
.bp-x.new { background: var(--m-navy); font-size: 11px; }
.chart-m { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 8px; height: 96px; padding-top: 6px; }
.chart-m div { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.chart-m i { width: 9px; border-radius: 4px 4px 2px 2px; height: calc(var(--h) * 100%); transform-origin: 50% 100%; transition: transform 800ms var(--m-ease) var(--d, 0ms); }
.chart-m i:first-child { background-image: linear-gradient(180deg, var(--m-navy2), var(--m-navy)); }
.chart-m i:last-child { background: var(--m-coral2); opacity: 0.55; }
.chart-x { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 5px; text-align: center; font-size: 9.5px; font-weight: 700; color: var(--m-subtle); }
.kpi-m { padding: 10px 12px; border-radius: 12px; background: var(--m-s1); border: 1px solid var(--m-line); }
.kpi-m .m-eyb { display: block; margin-bottom: 4px; }
.kpi-m b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.kpi-m.dark { border: 0; background-image: linear-gradient(135deg, var(--m-navy), var(--m-navy2)); color: #fff; }
.kpi-m.dark .m-eyb { color: rgba(255, 255, 255, 0.6); }
.scan { position: relative; overflow: hidden; height: 100%; min-height: 150px; padding: 12px; border-radius: 11px; background: #fbfaf7; border: 1px solid var(--m-line); }
.scan p { margin: 0 0 7px; height: 5px; border-radius: 3px; background: #e6e3dc; }
.scan p.w { width: 60%; } .scan p.s { width: 40%; } .scan p.h { height: 8px; width: 70%; background: #d5d0c6; margin-bottom: 11px; }
.scan mark { display: block; height: 7px; margin: 0 0 7px; border-radius: 3px; background: rgba(255, 107, 91, 0.32); transition: opacity 300ms ease var(--d, 0ms); }
.scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, rgba(91, 127, 176, 0), rgba(91, 127, 176, 0.22)); border-bottom: 1.5px solid var(--m-steel); transform: translateY(-40px); opacity: 0; }
.m-pre { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--m-s2); border: 1px solid var(--m-line); font: inherit; font-size: 10.5px; font-weight: 500; line-height: 1.5; white-space: pre-line; color: var(--m-muted); }
.m-pre b { color: var(--m-ink); font-weight: 700; }
.m-qr { display: block; width: 100%; max-width: 104px; margin: 2px auto 8px; }
@media (prefers-reduced-motion: no-preference) {
.mock-anim [data-play]:not(.play) .a { opacity: 0; transform: translateY(8px); }
.mock-anim [data-play] .a { transition: opacity 420ms ease var(--d, 0ms), transform 680ms var(--m-ease, cubic-bezier(0.32, 0.72, 0, 1)) var(--d, 0ms); }
.mock-anim [data-play]:not(.play) .m-sw > :first-child { opacity: 1; transform: none; }
.mock-anim [data-play]:not(.play) .m-sw > :last-child { opacity: 0; transform: translateY(4px); }
.mock-anim [data-play]:not(.play) .m-tog.on { background: var(--m-line2); }
.mock-anim [data-play]:not(.play) .m-tog.on::after { transform: none; }
.mock-anim [data-play]:not(.play) .gantt-m .lane i { transform: scaleX(0.04); opacity: 0; }
.mock-anim [data-play]:not(.play) .bp-x { transform: scale(0.2); opacity: 0; }
.mock-anim [data-play]:not(.play) .chart-m i { transform: scaleY(0.02); }
.mock-anim [data-play]:not(.play) .scan mark { opacity: 0; }
.mock-anim [data-play]:not(.play) .m-pop { opacity: 0; transform: translateY(6px); }
.mock-anim [data-play].play .scan::after { animation: scan 1400ms cubic-bezier(0.45, 0, 0.55, 1) 150ms 1 both; }
.mock-anim [data-play]:not(.play) .ph-otp b span { opacity: 0; transform: scale(0.6); }
.mock-anim [data-play] .ph-otp b span { display: inline-block; transition: opacity 200ms ease var(--d), transform 420ms var(--m-ease, ease) var(--d); }
.mock-anim [data-play] .sig { stroke-dasharray: 420; transition: stroke-dashoffset 1300ms cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0ms); }
.mock-anim [data-play]:not(.play) .sig { stroke-dashoffset: 420; }
.mock-anim [data-play].play .sig { stroke-dashoffset: 0; }
}
@keyframes scan { 0% { opacity: 0; transform: translateY(-40px); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px); } }
@container (max-width: 430px) {
.app-body { grid-template-columns: minmax(0, 1fr); }
.app-rail { display: none; }
.app-main { padding: 12px; }
.m-grid.fold { grid-template-columns: minmax(0, 1fr) !important; }
.hide-s { display: none !important; }
.gantt-m { grid-template-columns: 64px minmax(0, 1fr); }
.gantt-m .car { white-space: normal; font-size: 10.5px; line-height: 1.15; }
}
@media (max-width: 560px) {
.duo > .m-app { display: none; }
.duo > .phone-m { justify-self: center; width: 64%; margin-top: 0; border-radius: 30px; }
.phone-s { border-radius: 25px; }
}
/* site.css */
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: #242e57; color: #fff; font-size: 14px; font-weight: 600; transition: top 200ms ease; }
.skip:focus { top: 12px; }
.nav-drop { display: flex; align-items: center; }
.nav-drop > a::after {
content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg); opacity: 0.6; transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.nav-mega {
position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
background: #fff; color: #12172f;
box-shadow: 0 1px 0 rgba(18, 23, 47, 0.06), 0 40px 80px -40px rgba(18, 23, 47, 0.4);
font-size: 14px; letter-spacing: -0.01em; text-align: left;
visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
transition: clip-path 320ms cubic-bezier(0.77, 0, 0.175, 1), opacity 200ms ease 80ms, visibility 0s linear 320ms;
}
.nav-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; }
.nav-drop.is-open .nav-mega {
visibility: visible; opacity: 1; clip-path: inset(0 0 -100px 0);
transition: clip-path 560ms cubic-bezier(0.32, 0.72, 0, 1), opacity 160ms ease, visibility 0s;
}
.nav-drop.is-open > a::after { transform: translateY(3px) rotate(225deg); }
.nav:has(.nav-drop.is-open) { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav::after {
content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: 55; height: 100vh;
background: rgba(8, 12, 32, 0.3); pointer-events: none;
opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.nav:has(.nav-drop.is-open)::after { opacity: 1; visibility: visible; pointer-events: auto; cursor: default; transition: opacity 420ms ease, visibility 0s; }
.mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; max-width: var(--max, 1120px); margin: 0 auto; padding: 34px 24px 36px; }
.mega-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; align-content: start; }
.mega-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #9da1ae; }
.mega-label span { margin-right: 8px; color: #ef5b3d; font-variant-numeric: tabular-nums; }
.mega-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mega-list a {
display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: center;
margin: 0 -10px; padding: 9px 10px; border-radius: 14px; font-weight: 400;
opacity: 1 !important; transition: background-color 160ms ease;
}
.mega-ico {
grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
background: #f4f5f8; color: #242e57;
transition: background-color 220ms ease, color 220ms ease, transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mega-ico svg { width: 19px; height: 19px; }
.mega-list b { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: #12172f; }
.mega-list small { font-size: 12.5px; line-height: 1.35; color: #646a7d; }
.mega-list a:hover, .mega-list a:focus-visible { background: #f4f5f8; outline: none; }
.mega-list a:hover .mega-ico, .mega-list a:focus-visible .mega-ico { background: #242e57; color: #fff; transform: scale(1.06); }
.nav-mega .mega-list a[aria-current="page"] { font-weight: 400; }
.nav-mega .mega-list a[aria-current="page"] b { color: #d4452a; }
.mega-all {
grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(18, 23, 47, 0.08);
font-size: 14px; font-weight: 600; color: #d4452a !important; opacity: 1 !important;
}
.mega-all::after { content: " →"; }
.mega-card {
display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
background: linear-gradient(160deg, #141c44, #0b1230); color: #fff;
box-shadow: 0 24px 50px -28px rgba(11, 18, 48, 0.7);
}
.mega-media { position: relative; display: block; aspect-ratio: 680 / 500; overflow: hidden; opacity: 1 !important; }
.mega-scene { position: absolute; inset: 0; transition: transform 900ms cubic-bezier(0.32, 0.72, 0, 1); }
.mega-scene img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mega-scene .mega-screen { inset: auto; left: 25.6%; top: 38%; width: 48.8%; height: 37.6%; object-fit: cover; object-position: left top; }
.mega-card:hover .mega-scene { transform: scale(1.05); }
.mega-cap { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.mega-eyebrow { margin: 0; font-size: 12px; font-weight: 600; color: #ff8a70; }
.mega-title { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.022em; }
.mega-desc { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.mega-cta {
align-self: flex-start; display: inline-flex; align-items: center; height: 36px; margin-top: 10px; padding: 0 16px;
border-radius: 999px; background: #fff; color: #12172f !important; font-size: 13.5px; font-weight: 600;
opacity: 1 !important; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease;
}
.mega-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mega-cta:hover { background: #e8e8ed; } }
.mega-cap.swap > * { animation: mega-swap 300ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes mega-swap { from { opacity: 0.25; transform: translate3d(0, 5px, 0); } }
.mega-label, .mega-list li, .mega-all, .mega-card { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 150ms ease, transform 150ms ease; }
.nav-drop.is-open :is(.mega-label, .mega-list li, .mega-all, .mega-card) {
opacity: 1; transform: none;
transition: opacity 420ms ease calc(150ms + var(--n, 0) * 24ms), transform 620ms cubic-bezier(0.32, 0.72, 0, 1) calc(150ms + var(--n, 0) * 24ms);
}
.mega-card { --n: 3; }
.mega-all { --n: 9; }
.nav.is-dark:has(.nav-drop.is-open) { background: #090d24; }
.nav.is-dark .nav-mega { background: #090d24; color: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.nav.is-dark .mega-label { color: rgba(255, 255, 255, 0.5); }
.nav.is-dark .mega-list b { color: #fff; }
.nav.is-dark .mega-list small { color: rgba(255, 255, 255, 0.58); }
.nav.is-dark .mega-ico { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav.is-dark .mega-list a:hover, .nav.is-dark .mega-list a:focus-visible { background: rgba(255, 255, 255, 0.06); }
.nav.is-dark .mega-list a:hover .mega-ico, .nav.is-dark .mega-list a:focus-visible .mega-ico { background: #fff; color: #0b1230; }
.nav.is-dark .mega-all { border-color: rgba(255, 255, 255, 0.1); color: #ff8a70 !important; }
.nav.is-dark .mega-card { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
html:not(.nav-js) .nav-drop:is(:hover, :focus-within) .nav-mega { visibility: visible; opacity: 1; clip-path: inset(0 0 -100px 0); }
html:not(.nav-js) .nav-drop:is(:hover, :focus-within) :is(.mega-label, .mega-list li, .mega-all, .mega-card) { opacity: 1; transform: none; }
.nav-drop > a { cursor: pointer; }
@media (max-width: 1060px) { .mega-in { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; } }
@media (prefers-reduced-motion: reduce) {
.nav-mega, .nav-drop.is-open .nav-mega { clip-path: none; }
.mega-label, .mega-list li, .mega-all, .mega-card, .mega-scene, .mega-cap.swap > * { transform: none !important; animation: none; }
}
.nav-links a[aria-current="page"] { color: #12172f; font-weight: 600; }
.nav.is-dark .nav-links a[aria-current="page"] { color: #fff; }
.site-foot { padding: 56px 0 44px; font-size: 13px; color: #646a7d; border-top: 1px solid rgba(18, 23, 47, 0.08); }
.site-foot .wrap { display: block; }
.site-foot .foot-top { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; }
.site-foot .foot-brand img { height: 20px; width: auto; }
.site-foot .foot-brand p { margin: 14px 0 0; max-width: 24em; line-height: 1.5; color: #646a7d; }
.site-foot h2 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #12172f; }
.site-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.site-foot a, .site-foot button { color: #646a7d; transition: color 150ms ease; }
.site-foot a[aria-current="page"] { color: #12172f; font-weight: 600; }
.site-foot .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(18, 23, 47, 0.08); }
.site-foot .foot-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .site-foot a:hover, .site-foot button:hover { color: #12172f; } }
@media (max-width: 760px) {
.site-foot .foot-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.site-foot .foot-brand { grid-column: 1 / -1; }
}
/* menu.css */
.nav-burger { display: none; }
@media (max-width: 900px) {
.nav-right { gap: 8px; }
.nav-burger {
display: block; position: relative; flex: none;
width: 44px; height: 44px; margin-right: -10px; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: var(--ink);
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: color 300ms ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.nav-burger:active { transform: scale(0.88); background: rgba(127, 127, 127, 0.16); }
.nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-burger span {
position: absolute; left: 13px; top: 21.25px; width: 18px; height: 1.5px; border-radius: 2px;
background: currentColor;
transition: transform 520ms var(--ease-apple);
}
.nav-burger span:first-child { transform: translateY(-3.5px); }
.nav-burger span:last-child { transform: translateY(3.5px); }
.nav.is-dark .nav-burger, html.menu-open .nav-burger { color: #fff; }
html.menu-open .nav-burger span:first-child { transform: rotate(45deg); }
html.menu-open .nav-burger span:last-child { transform: rotate(-45deg); }
}
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.menu-open .nav .logo-on-light { opacity: 0; }
html.menu-open .nav .logo-on-dark { opacity: 1; }
.nav .btn-primary { transition: transform 160ms var(--ease-out), background-color 300ms ease, color 300ms ease, opacity 250ms ease; }
html.menu-open .nav .btn-primary { opacity: 0; pointer-events: none; }
.menu { position: fixed; inset: 0; z-index: 49; color: #fff; --drag: 0; }
.menu[hidden] { display: none; }
.menu:focus { outline: none; }
.menu-bg {
position: absolute; inset: 0;
background:
radial-gradient(130% 55% at 50% 114%, rgba(239, 91, 61, 0.5), rgba(239, 91, 61, 0) 62%),
radial-gradient(90% 46% at 100% -4%, rgba(72, 108, 222, 0.34), rgba(72, 108, 222, 0) 70%),
#0b1230;
clip-path: circle(0px at var(--mx, 100%) var(--my, 0));
opacity: calc(1 - var(--drag) * 0.55);
transition: clip-path 460ms var(--ease-in-out) 60ms;
}
.menu.is-open .menu-bg {
clip-path: circle(var(--mr, 150vmax) at var(--mx, 100%) var(--my, 0));
transition: clip-path 680ms var(--ease-apple);
}
.menu-sheet {
position: absolute; inset: 0;
display: flex; flex-direction: column;
padding: 84px 24px max(26px, env(safe-area-inset-bottom));
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
transform-origin: 50% 0;
}
.menu-sheet.is-drag { will-change: transform; }
.menu-list { display: flex; flex-direction: column; }
.menu-row {
position: relative; width: 100%; margin: 0; border: 0; background: none; color: inherit;
font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
display: grid; grid-template-columns: 34px 1fr 22px; grid-template-areas: "n t go" ". s go";
align-items: baseline; column-gap: 0;
padding: 17px 0 18px;
-webkit-tap-highlight-color: transparent;
transition: opacity 120ms ease;
}
.menu-row:active { opacity: 0.55; }
.menu-row::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: rgba(255, 255, 255, 0.1);
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 300ms ease;
}
.menu-n {
grid-area: n; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent);
font-variant-numeric: tabular-nums;
}
.menu-t {
grid-area: t; display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
font-size: clamp(30px, 8.6vw, 42px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em;
}
.menu-t > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 260ms ease; }
.menu-s {
grid-area: s; margin-top: 5px;
font-size: 14px; line-height: 1.35; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.56);
}
.menu-go {
grid-area: go; align-self: center; width: 22px; height: 22px;
fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.menu-here {
display: inline-block; vertical-align: 0.32em; margin-left: 10px; padding: 3px 9px 4px;
border-radius: 999px; background: rgba(239, 91, 61, 0.18); color: #ff8a70;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.menu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.menu-group .menu-go path { transform-box: fill-box; transform-origin: center; transition: transform 420ms var(--ease-apple); }
.menu-group.is-open .menu-go path { transform: rotate(90deg); }
.menu-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-apple); }
.menu-group.is-open .menu-sub { grid-template-rows: 1fr; }
.menu-sub ul { min-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 34px; list-style: none; }
.menu-sub li { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 160ms ease, transform 160ms ease; }
.menu-group.is-open .menu-sub li {
opacity: 1; transform: none;
transition: opacity 360ms var(--ease-out) calc(60ms + var(--j) * 28ms), transform 480ms var(--ease-apple) calc(60ms + var(--j) * 28ms);
}
.menu-sub li:first-child a { padding-top: 14px; }
.menu-sub a {
display: block; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-webkit-tap-highlight-color: transparent; transition: opacity 120ms ease;
}
.menu-sub a:active { opacity: 0.55; }
.menu-sub b { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.menu-sub-s { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.5); }
.menu-sub a[aria-current="page"] b { color: #ff8a70; }
.menu-sub .menu-here { vertical-align: 0.15em; }
.menu-sub .menu-sub-all { padding: 14px 0 18px; border-bottom: 0; }
.menu-sub .menu-sub-all b { font-size: 15px; color: #ff8a70; }
.menu-sub .menu-sub-all b::after { content: " →"; }
.menu-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: auto; padding-top: 34px; }
.menu-cta, .menu-login {
display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 999px;
font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
-webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out);
}
.menu-cta { background: #fff; color: var(--ink); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6); }
.menu-login { padding: 0 26px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: #fff; }
.menu-cta:active, .menu-login:active { transform: scale(0.97); }
.menu-foot {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px;
font-size: 13px; color: rgba(255, 255, 255, 0.5);
}
.menu-foot a, .menu-foot button { padding: 4px 0; }
.menu-foot button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.menu-n, .menu-s, .menu-go, .menu-actions, .menu-foot {
opacity: 0; transform: translate3d(0, 14px, 0);
transition: opacity 200ms ease, transform 200ms ease;
}
.menu.is-open .menu-t > span { transform: none; transition: transform 900ms var(--ease-apple) calc(120ms + var(--i) * 70ms); }
.menu.is-open .menu-row::after { transform: none; transition: transform 1000ms var(--ease-apple) calc(160ms + var(--i) * 70ms); }
.menu.is-open .menu-n, .menu.is-open .menu-s, .menu.is-open .menu-go,
.menu.is-open .menu-actions, .menu.is-open .menu-foot {
opacity: 1; transform: none;
transition: opacity 700ms var(--ease-out) calc(220ms + var(--i) * 70ms), transform 900ms var(--ease-apple) calc(220ms + var(--i) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
.menu-bg, .menu.is-open .menu-bg { clip-path: none; transition: opacity 250ms ease; }
.menu:not(.is-open) .menu-bg { opacity: 0; }
.menu-t > span, .menu.is-open .menu-t > span { transform: none; }
.menu-row::after { transform: none; }
.menu-n, .menu-s, .menu-go, .menu-actions, .menu-foot,
.menu.is-open .menu-n, .menu.is-open .menu-s, .menu.is-open .menu-go, .menu.is-open .menu-actions, .menu.is-open .menu-foot { transform: none; }
.menu-sub, .menu-sub li, .menu-group.is-open .menu-sub li, .menu-group .menu-go path { transition: none; transform: none; }
.menu:not(.is-open) .menu-t { opacity: 0; }
.menu-t { transition: opacity 250ms ease; }
}
/* consent.css */
.cc, .ccp, .cc-toast {
--cc-glass: rgba(16, 23, 54, 0.82);
--cc-line: rgba(255, 255, 255, 0.12);
--cc-ink: #fff;
--cc-ink-2: rgba(255, 255, 255, 0.66);
--cc-ink-3: rgba(255, 255, 255, 0.46);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
letter-spacing: -0.012em; -webkit-font-smoothing: antialiased;
}
.cc button, .ccp button { font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.cc {
position: fixed; z-index: 48; left: 20px; bottom: 20px; width: min(408px, calc(100vw - 40px));
color: var(--cc-ink);
opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); filter: blur(10px);
transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease;
pointer-events: none;
}
.cc.is-in { opacity: 1; transform: none; filter: none; pointer-events: auto; transition: opacity 600ms var(--ease-out, ease), transform 800ms var(--ease-apple, ease), filter 600ms ease; }
.cc-card {
position: relative; padding: 22px 22px 18px; border-radius: 26px;
background: var(--cc-glass);
-webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px var(--cc-line), 0 30px 60px -24px rgba(4, 7, 20, 0.6);
}
.cc-head { display: flex; align-items: center; gap: 12px; margin: 0 40px 10px 0; }
.cc-icon {
flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
background: linear-gradient(160deg, #ff8a5c, #ef5b3d); box-shadow: 0 6px 16px -6px rgba(239, 91, 61, 0.7);
}
.cc-icon svg { width: 20px; height: 20px; }
.cc-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.cc-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cc-ink-2); }
.cc-text strong { color: #fff; font-weight: 600; }
.cc-text a, .ccp a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 2px; }
.cc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cc-btn {
height: 46px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(255, 255, 255, 0.13); color: #fff; font-size: 15px; font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
transition: transform 160ms var(--ease-out, ease), background-color 200ms ease;
}
.cc-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cc-btn:hover { background: rgba(255, 255, 255, 0.2); } }
.cc-more {
display: block; width: 100%; margin-top: 8px; padding: 10px 0 2px; border: 0; background: none; cursor: pointer;
color: var(--cc-ink-2); font-size: 14px; font-weight: 500;
}
.cc-more span { color: #fff; }
.cc-x {
position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8);
transition: transform 160ms var(--ease-out, ease), background-color 200ms ease;
}
.cc-x:active { transform: scale(0.9); }
.cc-x svg { width: 12px; height: 12px; }
.cc :focus-visible, .ccp :focus-visible, .cc-toast :focus-visible { outline: 2px solid #ff8a70; outline-offset: 2px; }
@media (max-width: 600px) {
.cc { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; }
.cc-card { padding: 20px 18px 14px; border-radius: 24px; }
}
.ccp { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; color: var(--cc-ink); }
.ccp[hidden] { display: none; }
.ccp-scrim { position: absolute; inset: 0; background: rgba(4, 7, 20, 0.5); opacity: 0; transition: opacity 300ms ease; }
.ccp.is-in .ccp-scrim { opacity: 1; transition-duration: 450ms; }
.ccp-sheet {
position: relative; width: min(560px, calc(100vw - 40px)); max-height: min(760px, calc(100dvh - 40px));
display: flex; flex-direction: column; border-radius: 30px; overflow: hidden;
background: rgba(14, 20, 48, 0.9);
-webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px var(--cc-line), 0 40px 90px -30px rgba(0, 0, 0, 0.7);
opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); filter: blur(8px);
transition: opacity 260ms ease, transform 300ms ease, filter 260ms ease;
}
.ccp.is-in .ccp-sheet { opacity: 1; transform: none; filter: none; transition: opacity 500ms var(--ease-out, ease), transform 700ms var(--ease-apple, ease), filter 500ms ease; }
.ccp-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 8px; }
.ccp-title { margin: 0 44px 8px 0; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif; }
.ccp-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cc-ink-2); }
.ccp-status {
display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; padding: 10px 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--cc-ink-2);
}
.ccp-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-ink-3); }
.ccp-status.is-set i { background: #34c759; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18); }
.ccp-cat { padding: 18px 0; border-bottom: 1px solid var(--cc-line); }
.ccp-cat:last-child { border-bottom: 0; }
.ccp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ccp-cat h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.ccp-cat p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cc-ink-2); }
.ccp-always { flex: none; margin-top: 2px; font-size: 13px; font-weight: 600; color: #34c759; }
.ccp-cat details { margin-top: 10px; }
.ccp-cat summary {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
font-size: 13px; font-weight: 600; color: #ff8a70;
}
.ccp-cat summary::-webkit-details-marker { display: none; }
.ccp-cat summary svg { width: 12px; height: 12px; transition: transform 300ms var(--ease-apple, ease); }
.ccp-cat details[open] summary svg { transform: rotate(90deg); }
.ccp-tools { margin: 10px 0 0; padding: 0; list-style: none; border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.ccp-tools li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ccp-tools li:first-child { border-top: 0; }
.ccp-tools b { font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #fff; }
.ccp-tools span { color: var(--cc-ink-3); }
.ccp-tools em { grid-column: 1 / -1; font-style: normal; color: var(--cc-ink-2); }
.ccp-none { margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 13px; color: var(--cc-ink-2); }
.ccp-sw { position: relative; flex: none; width: 51px; height: 31px; margin-top: -2px; cursor: pointer; }
.ccp-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ccp-sw i {
position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
transition: background-color 250ms ease; pointer-events: none;
}
.ccp-sw i::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.12);
transition: transform 420ms var(--ease-apple, ease), width 200ms var(--ease-out, ease);
}
.ccp-sw input:checked + i { background: #34c759; }
.ccp-sw input:checked + i::after { transform: translateX(20px); }
.ccp-sw input:active + i::after { width: 33px; }
.ccp-sw input:checked:active + i::after { transform: translateX(14px); }
.ccp-sw input:focus-visible + i { outline: 2px solid #ff8a70; outline-offset: 2px; }
.ccp-foot { padding: 14px 28px 22px; border-top: 1px solid var(--cc-line); background: rgba(255, 255, 255, 0.02); }
.ccp-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ccp-btns .cc-btn { height: 46px; font-size: 14px; padding: 0 10px; }
.ccp-btns .cc-btn.is-save { background: #fff; color: #12172f; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ccp-btns .cc-btn.is-save:hover { background: #e8e8ed; } }
.ccp-revoke {
display: block; margin: 12px auto 0; padding: 4px 0; border: 0; background: none; cursor: pointer;
font-size: 13px; color: var(--cc-ink-3); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); text-underline-offset: 2px;
}
.ccp-revoke[hidden] { display: none; }
@media (max-width: 600px) {
.ccp { place-items: end stretch; }
.ccp-sheet {
width: 100%; max-height: calc(100dvh - 24px); border-radius: 28px 28px 0 0;
transform: translate3d(0, 100%, 0); filter: none;
}
.ccp.is-in .ccp-sheet { transform: none; }
.ccp-scroll { padding: 26px 20px 6px; }
.ccp-title { font-size: 24px; }
.ccp-foot { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
.ccp-btns { grid-template-columns: 1fr 1fr; }
.ccp-btns .is-save { grid-column: 1 / -1; order: -1; }
}
.cc-toast {
position: fixed; z-index: 80; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px;
background: var(--cc-glass); color: #fff; font-size: 14px; font-weight: 600;
-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
box-shadow: inset 0 0 0 1px var(--cc-line), 0 20px 40px -18px rgba(4, 7, 20, 0.6);
opacity: 0; transform: translate3d(-50%, 16px, 0) scale(0.94); filter: blur(6px);
transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease; pointer-events: none;
}
.cc-toast.is-in { opacity: 1; transform: translate3d(-50%, 0, 0); filter: none; transition: opacity 450ms var(--ease-out, ease), transform 650ms var(--ease-apple, ease), filter 450ms ease; }
.cc-toast svg { width: 20px; height: 20px; }
.consent-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.consent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #f1f2f6; color: #646a7d; }
.consent-chip i { width: 7px; height: 7px; border-radius: 50%; background: #b8bcc8; }
.consent-chip.on { background: rgba(31, 157, 85, 0.1); color: #1f7a45; }
.consent-chip.on i { background: #1f9d55; }
@media (prefers-reduced-motion: reduce) {
.cc, .cc.is-in, .ccp-sheet, .ccp.is-in .ccp-sheet, .cc-toast, .cc-toast.is-in { transform: none; filter: none; }
.cc-toast, .cc-toast.is-in { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-transparency: reduce) {
.cc-card, .ccp-sheet, .cc-toast { background: #101736; -webkit-backdrop-filter: none; backdrop-filter: none; }
}