/* Quadra – sito pubblico. Caratteri ospitati sul sito (nessuna richiesta a server esterni). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-latin-800-normal.woff2") format("woff2"); }

:root {
  --ink: #0d2236; --text: #3a4f62; --muted: #4b5d6e; --line: #dde7f0; --line-2: #cdd9e4;
  --bg-soft: #f2f7fc; --bg-card: #f7fafd; --accent: #0a64b2; --accent-soft: #e6f1fb;
  --sky: #14a2ee; --navy: #023166; --cyan: #02dff2; --ok: #187455; --ok-soft: #e9f8ef; --warn: #946200; --warn-soft: #f8ecd0; --danger: #b42318;
  --f-display: "Sora", "Inter", system-ui, sans-serif; --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow-lg: 0 30px 60px -30px rgba(2, 49, 102, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); background: #fff; line-height: 1.5; overflow-x: hidden; }
img, svg { display: block; }
a { color: var(--accent); }
a:hover { color: var(--navy); }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 8vw, 104px); }
.soft { background: var(--bg-soft); border-block: 1px solid #e3eaf1; }
.eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -.025em; }
.lead { margin: 0; font-size: 18px; color: var(--text); }
.head { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.stack { display: flex; flex-direction: column; }
.check-ic { flex: none; margin-top: 2px; color: var(--ok); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 600; border-radius: 12px; padding: 16px 24px; font-size: 17px; border: 1px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(10, 100, 178, .6); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--ink); transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-sm { padding: 11px 16px; font-size: 15px; border-radius: 10px; }
.arr { display: inline-flex; width: 18px; height: 18px; overflow: hidden; }
a:hover > .arr svg, a:focus-visible > .arr svg { animation: arrow .5s cubic-bezier(.4, 0, .2, 1); }
.ul { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat; transition: background-size .3s; }
.ul:hover, .ul:focus-visible { background-size: 100% 1.5px; }

/* announcement */
.announce { background: var(--navy); color: #fff; font-size: 14px; animation: slide-down .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.announce .wrap { padding-block: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; }
.announce .tag { background: var(--cyan); color: var(--navy); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 99px; }
.announce a { color: #fff; font-weight: 600; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; }
.announce .x { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #c9daec; cursor: pointer; font-size: 22px; line-height: 1; }
.announce[hidden] { display: none; }

/* header */
.site-head { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #e3eaf1; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.nav-links { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 15px; font-weight: 500; }
.nav-links a { color: #334a5e; padding: 12px 0; }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* hero */
.hero { background: var(--bg-soft); border-bottom: 1px solid #e3eaf1; }
.hero .wrap { padding-block: clamp(48px, 7vw, 92px); display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-text > * { animation: up .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-text > :nth-child(2) { animation-delay: .08s } .hero-text > :nth-child(3) { animation-delay: .16s } .hero-text > :nth-child(4) { animation-delay: .24s } .hero-text > :nth-child(5) { animation-delay: .32s } .hero-text > :nth-child(6) { animation-delay: .4s }
.hero h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(42px, 6vw, 74px); line-height: 1.02; letter-spacing: -.035em; }
.hero .sub { margin: 0; font-size: clamp(18px, 1.6vw, 21px); color: var(--text); max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.promise { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: #24435e; font-weight: 500; }
.promise li { display: flex; gap: 6px; align-items: center; }
.hint { margin: 0; font-size: 14px; color: var(--muted); }
.mock { flex: 1 1 520px; min-width: 0; animation: up 1s .2s cubic-bezier(.2, .7, .2, 1) backwards; }
.mock-card { background: #fff; border: 1px solid #d8e3ee; border-radius: 20px; padding: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; animation: float 7s 1.4s ease-in-out infinite; }
.status-ok { display: flex; align-items: center; gap: 12px; background: var(--ok-soft); color: #135c3b; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; }
.status-ok path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s 1.1s ease-out forwards; }
.quads { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quad { border: 0; border-radius: 16px; padding: 18px; min-height: 140px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s, filter .2s; animation: pop .55s cubic-bezier(.2, .8, .3, 1.2) backwards; }
.quad:hover { filter: brightness(1.07); }
.quad[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--cyan); transform: scale(1.015); }
.quad .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.quad .v { font-family: var(--f-display); font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; }
.quad .s { font-size: 13px; opacity: .9; }
.q1 { background: var(--accent); color: #fff; animation-delay: .45s; }
.q2 { background: #e4f3fd; color: #0d2b44; align-items: flex-end; text-align: right; animation-delay: .55s; }
.q3 { background: #e4f3fd; color: #0d2b44; justify-content: flex-end; animation-delay: .65s; }
.q4 { background: var(--navy); color: #fff; justify-content: flex-end; align-items: flex-end; text-align: right; animation-delay: .75s; }
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; pointer-events: none; animation: ring .8s .95s cubic-bezier(.2, .8, .3, 1.2) backwards; }
.ring span { width: 74px; height: 74px; border-radius: 50%; background: var(--cyan); color: var(--navy); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 19px; }
.detail { background: var(--bg-soft); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.detail.anim { animation: fade .35s ease-out; }
.detail b { font-family: var(--f-display); font-size: 17px; }
.detail p { margin: 0; font-size: 15px; color: var(--text); }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #24435e; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.caption { margin: 0; font-size: 12px; color: #5a6b7b; text-align: center; }

/* marquee */
.strip { border-bottom: 1px solid #e3eaf1; }
.strip .wrap { padding-block: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.strip b { font-size: 15px; }
.marquee { flex: 1 1 400px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; width: max-content; animation: marquee 32s linear infinite; font-size: 15px; color: var(--text); }
.marquee:hover .track { animation-play-state: paused; }
.track span { display: flex; align-items: center; gap: 12px; padding: 0 22px; white-space: nowrap; }
.track span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }

/* tabs (per chi è) */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { position: relative; overflow: hidden; border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 99px; padding: 11px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .85); transform-origin: left; transform: scaleX(0); }
.tab[aria-selected="true"] .bar.run { animation: progress 6s linear forwards; }
.paused .tab .bar { animation-play-state: paused !important; }
.panel { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 40px); }
.panel[hidden] { display: none; }
.panel:not([hidden]) { animation: fade .35s ease-out; }
.panel .t { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel .t b { font-family: var(--f-display); font-size: 24px; line-height: 1.2; }
.panel .t p { margin: 0; font-size: 17px; color: var(--text); }
.panel .ticks { flex: 1 1 340px; min-width: 0; font-size: 16px; }

/* features with sticky title */
.feat { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.feat .head { flex: 1 1 340px; position: sticky; top: 96px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.feat .grid { flex: 999 1 560px; min-width: 0; }
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-family: var(--f-display); font-size: 19px; }
.card p { margin: 0; font-size: 15px; color: var(--text); }
.lift { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -24px rgba(2, 49, 102, .45); }

/* compare */
.table-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
thead tr { background: var(--bg-soft); text-align: left; }
th[scope="col"] { padding: 14px 18px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
th[scope="col"]:last-child { color: var(--accent); }
tbody tr { border-top: 1px solid #e3eaf1; }
tbody th { padding: 14px 18px; text-align: left; font-weight: 600; }
tbody td { padding: 14px 18px; color: var(--muted); }
tbody td:last-child { color: #135c3b; font-weight: 600; }
.note { margin: 0; font-size: 14px; color: var(--muted); }

/* migration */
.migr { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.migr .t { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.migr h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.025em; }
.migr ol { flex: 1 1 420px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.migr li { background: var(--bg-soft); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.migr li b { color: var(--accent); font-family: var(--f-display); }

/* try it */
.try { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.steps { flex: 1 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { background: #fff; border: 1px solid #d8e3ee; border-radius: 16px; padding: 20px; display: flex; gap: 16px; align-items: flex-start; transition: border-color .3s, box-shadow .3s, opacity .3s; opacity: .6; }
.step.current { border-color: var(--accent); box-shadow: 0 0 0 3px #cfe6fa; opacity: 1; }
.step.done { opacity: 1; }
.step .n { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 18px; background: #e4ebf2; color: var(--muted); }
.step.current .n { background: var(--accent); color: #fff; }
.step.done .n { background: var(--ok); color: #fff; }
.step .b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step .b b { font-family: var(--f-display); font-size: 18px; }
.step .b p { margin: 0; font-size: 15px; color: var(--text); }
.step .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.step button { border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 600; font-size: 15px; background: #e9eef3; color: #5a6b7b; cursor: default; transition: background .25s, transform .15s; }
.step.current button { background: var(--accent); color: #fff; cursor: pointer; }
.step.current button:active { transform: scale(.97); }
.step .ok { font-size: 14px; color: var(--ok); font-weight: 600; }
.box { flex: 1 1 420px; min-width: 0; background: #fff; border: 1px solid #d8e3ee; border-radius: 18px; box-shadow: 0 24px 50px -30px rgba(2, 49, 102, .35); overflow: hidden; display: flex; flex-direction: column; }
.box-status { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; background: #eef2f6; color: #24435e; transition: background .3s, color .3s; }
.box-status.ko { background: var(--warn-soft); color: #6e4a00; }
.box-status.ok { background: var(--ok-soft); color: #135c3b; }
.box-status b { font-family: var(--f-display); font-size: 18px; }
.box-status span { font-size: 14px; }
.box-body { padding: 8px 20px 18px; display: flex; flex-direction: column; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e3eaf1; }
.count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: #e4ebf2; color: var(--muted); }
.count.ko { background: var(--warn); color: #fff; }
.count.ok { background: var(--ok); color: #fff; }
.todo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #eef2f6; cursor: pointer; animation: fade .3s ease-out backwards; }
.todo input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.todo b { font-size: 15px; display: block; }
.todo span span { font-size: 14px; color: var(--muted); }
.todo input:checked + span b { text-decoration: line-through; color: #5a6b7b; }
.todo-empty { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.linkbtn { align-self: flex-start; margin-top: 14px; background: none; border: 0; padding: 10px 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* security, mobile */
.sec-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.card.plain { background: #fff; }
.mobile { background: var(--navy); color: #fff; }
.mobile .wrap { padding-block: clamp(56px, 7vw, 92px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.mobile .t { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mobile .eyebrow { color: #7fe9f5; }
.mobile h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.025em; }
.mobile p { margin: 0; font-size: 17px; color: #d6e4f3; }
.seg { display: inline-flex; align-self: flex-start; border: 1px solid #3b6a9b; border-radius: 12px; overflow: hidden; margin-top: 6px; }
.seg button { border: 0; padding: 11px 18px; font-weight: 600; font-size: 15px; cursor: pointer; background: transparent; color: #d6e4f3; }
.seg button[aria-selected="true"] { background: #fff; color: var(--navy); }
.mobile ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #e3eef9; }
.mobile ol[hidden] { display: none; }
.phone { flex: 0 1 300px; margin: 0 auto; width: 260px; height: 440px; border-radius: 40px; border: 10px solid var(--ink); background: #eef3f8; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; animation: float 6s ease-in-out infinite; }
.phone .s { background: var(--ok-soft); color: #135c3b; border-radius: 10px; padding: 9px 10px; font-size: 12px; font-weight: 700; }
.phone .g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex: 1 1 auto; }
.phone .g i { border-radius: 12px; background: #cfe9fb; }
.phone .g i:first-child { background: var(--accent); } .phone .g i:last-child { background: var(--navy); }
.phone .f { height: 36px; border-radius: 10px; background: #fff; border: 1px solid #d8e3ee; }

/* testimonials carousel */
.car-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.car-ctrl { display: flex; gap: 8px; align-items: center; }
.car-ctrl span { font-size: 14px; color: var(--muted); min-width: 48px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.round.dark { border: 0; background: var(--accent); color: #fff; }
.viewport { overflow: hidden; border-radius: 22px; }
.slides { display: flex; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.slide { flex: 0 0 100%; min-width: 0; margin: 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.slide blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.35; font-weight: 600; }
.slide figcaption { font-size: 15px; color: var(--muted); }
.slide figcaption b { color: var(--ink); }
.dots { display: flex; gap: 8px; justify-content: center; }
.dot { height: 10px; width: 10px; border-radius: 99px; border: 0; padding: 0; cursor: pointer; background: var(--line-2); transition: width .3s, background .3s; }
.dot[aria-current="true"] { width: 28px; background: var(--accent); }

/* pricing */
.price-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.toggle button { border: 0; padding: 12px 18px; font-weight: 600; font-size: 15px; cursor: pointer; background: transparent; color: var(--muted); }
.toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.plan { border: 1px solid #d8e3ee; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.plan.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.plan h3 { margin: 0; font-family: var(--f-display); font-size: 22px; }
.plan .who { font-size: 15px; color: var(--muted); }
.plan.dark .who, .plan.dark .per { color: #c9daec; }
.plan .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.plan .price b { font-family: var(--f-display); font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.plan .per { font-size: 15px; color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #24435e; }
.plan.dark ul { color: #e3eef9; }
.plan .btn { margin-top: auto; font-size: 16px; }
.btn-cyan { background: var(--cyan); color: var(--navy); font-weight: 700; }
.btn-cyan:hover { color: var(--navy); transform: translateY(-2px); }

/* faq */
.faq { max-width: 880px; }
.faq details { background: #fff; border: 1px solid #d8e3ee; border-radius: 14px; overflow: hidden; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 600; transition: transform .2s; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; font-size: 16px; color: var(--text); animation: fade .3s ease-out; }

/* contact */
.contact { background: var(--accent); color: #fff; }
.contact .wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.contact .t { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.contact h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.03em; }
.contact .t > p { margin: 0; font-size: 19px; color: #dcecfa; }
.btn-white { background: #fff; color: var(--navy); font-weight: 700; align-self: flex-start; }
.btn-white:hover { color: var(--navy); transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .4); }
.support { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #dcecfa; }
.support b { color: #fff; font-size: 17px; }
.support a { color: #fff; }
.form-card { flex: 1 1 440px; min-width: 0; background: #fff; color: var(--ink); border-radius: 20px; padding: 28px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form > b { font-family: var(--f-display); font-size: 20px; }
.form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.form input[type="text"], .form input[type="email"], .form textarea { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-weight: 400; font-size: 16px; min-width: 0; color: var(--ink); background: #fff; }
.form textarea { resize: vertical; }
.form .chk { flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text); }
.form .chk input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.err { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--danger); font-weight: 600; }
.form button[type="submit"] { background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 15px 20px; font-weight: 700; font-size: 16px; cursor: pointer; }
.form button[disabled] { opacity: .6; cursor: default; }
.sent { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; animation: fade .3s ease-out; }
.sent .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.sent b { font-family: var(--f-display); font-size: 22px; }
.sent p { margin: 0; font-size: 16px; color: var(--text); }

/* footer */
.foot { background: var(--navy); color: #c9daec; font-size: 14px; }
.foot .cols { padding-block: 48px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 28px; }
.foot .logo { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: #fff; }
.foot nav { display: flex; flex-direction: column; gap: 2px; }
.foot nav b { color: #fff; padding-bottom: 6px; }
.foot a { color: #c9daec; padding: 6px 0; align-self: flex-start; }
.foot .bottom { padding-block: 18px 32px; border-top: 1px solid #1f4d82; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; }
.foot .bottom div { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot .bottom a, .foot .bottom button { color: #fff; }
.foot button.ul { background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: 13px; }

/* cookie banner */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: var(--ink); border: 1px solid #d8e3ee; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(2, 49, 102, .45); padding: 22px; display: flex; flex-direction: column; gap: 14px; animation: cookie .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.cookie[hidden] { display: none; }
.cookie .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cookie .top b { font-family: var(--f-display); font-size: 18px; }
.cookie .top button { flex: none; width: 36px; height: 36px; margin: -6px -6px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; }
.cookie p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.cookie .prefs { display: flex; flex-direction: column; border: 1px solid #e3eaf1; border-radius: 12px; }
.cookie .prefs[hidden] { display: none; }
.cookie .prefs label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e3eaf1; cursor: pointer; }
.cookie .prefs label:last-child { border-bottom: 0; }
.cookie .prefs b { font-size: 14px; display: block; }
.cookie .prefs small { font-size: 13px; color: var(--muted); }
.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { background: #8fb6dc; cursor: default; }
.cookie .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie .acts button { flex: 1 1 120px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--accent); font-weight: 600; font-size: 15px; cursor: pointer; background: #fff; color: var(--accent); }
.cookie .acts .primary { background: var(--accent); color: #fff; }
.cookie .acts .save { flex-basis: 100%; border-color: var(--line-2); background: var(--bg-soft); color: var(--ink); }
.cookie .acts .more { flex-basis: 100%; border: 0; background: transparent; text-decoration: underline; font-size: 14px; padding: 10px 14px; }
.cookie .acts [hidden] { display: none; }

/* legal pages */
.legal { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; }
.legal h1 { font-family: var(--f-display); letter-spacing: -.02em; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.legal h2 { font-family: var(--f-display); font-size: 22px; margin-top: 36px; }
.legal p, .legal li { color: var(--text); }
.legal table { min-width: 0; font-size: 14px; }
.legal td, .legal th { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.ph { background: var(--warn-soft); color: #6e4a00; padding: 1px 6px; border-radius: 6px; }

/* scroll reveal */
@supports (animation-timeline: view()) {
  .rv { animation: up linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
@keyframes up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ring { from { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-40deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes arrow { 0% { transform: translateX(0); } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: translateX(0); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slide-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes cookie { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .status-ok path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}
@media (max-width: 720px) {
  .feat .head { position: static; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}