:root {
    --ink: #0e1512;
    --ink-soft: #2f3f38;
    --muted: #65736b;
    --line: #dbe5df;
    --paper: #fbfaf6;
    --paper-strong: #ffffff;
    --mint: #3bffb6;
    --green: #246b5b;
    --green-dark: #143f36;
    --amber: #ffb84d;
    --coral: #ff6b4a;
    --cream: #f1eadb;
    --shadow: 0 24px 70px rgba(14, 21, 18, 0.13);
    --radius: 8px;
    --max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(135deg, rgba(59, 255, 182, 0.08), transparent 30%),
        linear-gradient(315deg, rgba(255, 184, 77, 0.14), transparent 28%),
        var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    max-width: 100%;
    display: block;
}

button,
input,
select {
    font: inherit;
}

[hidden] {
    display: none !important;
}

.site-motion-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 18%, rgba(59, 255, 182, 0.08) 18.2%, transparent 31%),
        linear-gradient(295deg, transparent 0 30%, rgba(255, 184, 77, 0.1) 30.2%, transparent 44%),
        repeating-linear-gradient(90deg, transparent 0 78px, rgba(36, 107, 91, 0.04) 79px, transparent 80px),
        repeating-linear-gradient(0deg, transparent 0 92px, rgba(36, 107, 91, 0.035) 93px, transparent 94px);
    background-size: 160% 160%, 180% 180%, auto, auto;
    animation: backdropDrift 24s linear infinite;
}

.site-motion-backdrop::before,
.site-motion-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.55;
}

.site-motion-backdrop::before {
    background:
        linear-gradient(90deg, transparent, rgba(59, 255, 182, 0.12), transparent),
        linear-gradient(90deg, transparent, rgba(255, 184, 77, 0.1), transparent);
    background-size: 460px 1px, 620px 1px;
    background-position: -460px 28%, -620px 74%;
    background-repeat: no-repeat;
    animation: ambientSignals 8s linear infinite;
}

.site-motion-backdrop::after {
    background-image:
        radial-gradient(circle at 15% 22%, rgba(59, 255, 182, 0.08) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(255, 184, 77, 0.1) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 78%, rgba(36, 107, 91, 0.08) 0 1px, transparent 2px);
    background-size: 180px 180px, 220px 220px, 260px 260px;
    animation: nodeTwinkle 9s ease-in-out infinite;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--mint), var(--amber), var(--coral));
    box-shadow: 0 0 22px rgba(59, 255, 182, 0.45);
    transform-origin: left;
    transform: scaleX(var(--scroll-progress, 0));
}

.site-header,
main,
.site-footer {
    position: relative;
    z-index: 1;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 32px), var(--max));
    margin: 14px auto 0;
    padding: 10px 12px;
    border: 1px solid rgba(219, 229, 223, 0.9);
    border-radius: 999px;
    background: rgba(251, 250, 246, 0.86);
    box-shadow: 0 14px 50px rgba(14, 21, 18, 0.08);
    backdrop-filter: blur(18px);
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 60px rgba(14, 21, 18, 0.11);
}

.brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.brand span {
    display: none;
}

.brand-logo {
    width: clamp(164px, 19vw, 214px);
    height: auto;
}

.footer-brand .brand-logo {
    width: 210px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link,
.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.94rem;
    font-weight: 700;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--green-dark);
    background: rgba(36, 107, 91, 0.1);
}

.nav-button {
    color: #07110d;
    background: var(--mint);
    box-shadow: 0 8px 20px rgba(36, 107, 91, 0.18);
    position: relative;
    overflow: hidden;
}

.nav-button:hover,
.btn:hover {
    transform: translateY(-2px);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: white;
}

main {
    overflow: hidden;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: 58px;
    align-items: center;
    width: min(calc(100% - 40px), var(--max));
    min-height: calc(100vh - 92px);
    margin: 0 auto;
    padding: 74px 0 56px;
}

.hero-copy {
    max-width: 680px;
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 22px;
    font-size: clamp(2.75rem, 5.8vw, 5.65rem);
    line-height: 0.98;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 18px;
    font-size: clamp(1.8rem, 3.4vw, 3.15rem);
    line-height: 1.04;
    letter-spacing: 0;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.18rem;
    line-height: 1.2;
}

.hero-lead,
.section-heading p,
.feature-copy p,
.page-hero p {
    color: var(--muted);
    font-size: 1.08rem;
}

.hero-lead {
    max-width: 620px;
    margin-bottom: 28px;
}

.hero-actions,
.modal-actions,
.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.btn::after,
.nav-button::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -55%;
    width: 48%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
    transform: skewX(-18deg) translateX(0);
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.btn:hover::after,
.nav-button:hover::after {
    transform: skewX(-18deg) translateX(360%);
}

.btn-primary {
    color: #07110d;
    background: var(--mint);
    box-shadow: 0 14px 36px rgba(36, 107, 91, 0.22);
}

.btn-secondary {
    color: var(--ink);
    background: var(--paper-strong);
    border-color: var(--line);
}

.btn-ghost {
    color: var(--green-dark);
    background: rgba(36, 107, 91, 0.08);
}

.btn-light {
    color: var(--ink);
    background: white;
}

.full-width {
    width: 100%;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.trust-strip span,
.auth-highlights span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(36, 107, 91, 0.16);
    border-radius: 999px;
    color: var(--green-dark);
    background: rgba(255, 255, 255, 0.66);
    font-size: 0.88rem;
    font-weight: 800;
}

.hero-visual {
    position: relative;
    min-height: 580px;
    border: 1px solid rgba(219, 229, 223, 0.9);
    border-radius: 28px;
    background:
        linear-gradient(160deg, rgba(14, 21, 18, 0.97), rgba(20, 63, 54, 0.96)),
        var(--ink);
    box-shadow: var(--shadow);
    isolation: isolate;
    transform:
        perspective(1100px)
        rotateX(calc(var(--parallax-y, 0) * -0.55deg))
        rotateY(calc(var(--parallax-x, 0) * 0.65deg))
        translate3d(calc(var(--parallax-x, 0) * 6px), calc(var(--parallax-y, 0) * 6px), 0);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual.reveal {
    clip-path: inset(-32px);
}

.hero-visual::before,
.hero-visual::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hero-visual::before {
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59, 255, 182, 0.36), transparent 28%, rgba(255, 184, 77, 0.28) 72%, transparent);
    opacity: 0.62;
    z-index: -1;
    filter: blur(18px);
    animation: panelGlow 5.8s ease-in-out infinite;
}

.hero-visual::after {
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, 0.14) 22%, transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%);
    transform: translateX(-120%);
    animation: panelSweep 7.2s ease-in-out infinite;
    z-index: 4;
    mix-blend-mode: screen;
}

.hero-signal-nodes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-signal-nodes span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 0 rgba(59, 255, 182, 0.48), 0 0 28px rgba(59, 255, 182, 0.66);
    animation: nodePulse 3.6s ease-out infinite;
    animation-delay: var(--d);
}

.signal-grid {
    position: absolute;
    inset: 24px;
    overflow: hidden;
    border-radius: 22px;
    opacity: 0.7;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
}

.signal-grid span {
    position: absolute;
    width: 210px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--mint), transparent);
    animation: signalMove 4.8s linear infinite;
}

.signal-grid span:nth-child(1) { top: 15%; left: -40%; animation-delay: 0s; }
.signal-grid span:nth-child(2) { top: 32%; left: -55%; animation-delay: 1s; }
.signal-grid span:nth-child(3) { top: 49%; left: -45%; animation-delay: 1.7s; }
.signal-grid span:nth-child(4) { top: 66%; left: -50%; animation-delay: 2.4s; }
.signal-grid span:nth-child(5) { top: 81%; left: -35%; animation-delay: 3.1s; }
.signal-grid span:nth-child(6) { top: 25%; left: -60%; animation-delay: 3.8s; }
.signal-grid span:nth-child(7) { top: 39%; left: -62%; animation-delay: 4.4s; }
.signal-grid span:nth-child(8) { top: 58%; left: -58%; animation-delay: 5.1s; }

.dashboard-card {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    color: white;
    backdrop-filter: blur(22px);
}

.main-card {
    inset: 70px 52px auto 52px;
    padding: 26px;
    animation: cardFloat 6.4s ease-in-out infinite;
}

.card-topline,
.footer-bottom,
.consent-row,
.pipeline-step {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.card-topline span,
.mini-card span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.card-topline strong {
    color: var(--mint);
}

.score-ring {
    display: grid;
    place-items: center;
    width: 210px;
    height: 210px;
    margin: 34px auto;
    border: 18px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--mint);
    border-right-color: var(--amber);
    border-radius: 50%;
    animation: slowSpin 11s linear infinite;
}

.score-ring span,
.score-ring small {
    animation: counterSpin 11s linear infinite;
}

.score-ring span {
    display: block;
    font-size: 4rem;
    font-weight: 950;
    line-height: 1;
}

.score-ring small {
    color: rgba(255, 255, 255, 0.64);
    font-weight: 800;
}

.signal-bars {
    display: grid;
    gap: 12px;
}

.signal-bars span {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
}

.signal-bars span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bar);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--amber));
    animation: barPulse 2.8s ease-in-out infinite;
}

.mini-card {
    width: 190px;
    padding: 18px;
    transition: transform 260ms ease, box-shadow 260ms ease;
}

.mini-card strong {
    display: block;
    margin: 8px 0 2px;
    font-size: 2rem;
    line-height: 1;
}

.mini-card small {
    color: rgba(255, 255, 255, 0.62);
}

.card-a {
    right: -18px;
    bottom: 150px;
    animation: miniCardFloat 5.8s ease-in-out infinite;
}

.card-b {
    left: -28px;
    bottom: 90px;
    animation: miniCardFloat 6.5s ease-in-out infinite reverse;
}

.card-c {
    right: 66px;
    bottom: 34px;
    animation: miniCardFloat 6s ease-in-out infinite;
}

.metric-band,
.section,
.feature-section,
.faq-section,
.auth-page,
.page-hero,
.policy-layout {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto;
}

.metric-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 50px rgba(14, 21, 18, 0.06);
}

.metric-band div {
    position: relative;
    padding: 24px;
    border-radius: 18px;
    background: var(--paper-strong);
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.metric-band div::after {
    content: "";
    position: absolute;
    inset: auto 18px 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mint), var(--amber));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-band div:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 52px rgba(14, 21, 18, 0.1);
}

.metric-band div:hover::after {
    transform: scaleX(1);
}

.metric-band strong {
    display: block;
    margin-bottom: 6px;
    font-size: 2rem;
    line-height: 1;
}

.metric-band span {
    color: var(--muted);
    font-weight: 700;
}

.section,
.feature-section,
.faq-section {
    padding: 104px 0 0;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 38px;
}

.service-grid,
.process-grid,
.package-grid,
.faq-grid {
    display: grid;
    gap: 18px;
}

.service-grid {
    grid-template-columns: repeat(3, 1fr);
}

.service-card,
.process-card,
.package-card,
.auth-card,
.policy-content,
.policy-aside,
.faq-grid details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 50px rgba(14, 21, 18, 0.06);
}

.service-card,
.process-card,
.package-card {
    position: relative;
    min-height: 250px;
    padding: 24px;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease;
}

.service-card:hover,
.process-card:hover,
.package-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(36, 107, 91, 0.3);
    box-shadow: 0 26px 70px rgba(14, 21, 18, 0.12);
}

.service-card::before,
.process-card::before,
.package-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(59, 255, 182, 0.24), transparent 34%);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.service-card:hover::before,
.process-card:hover::before,
.package-card:hover::before {
    opacity: 1;
}

.service-card > *,
.process-card > *,
.package-card > * {
    position: relative;
    z-index: 1;
}

.service-card::after,
.package-card::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 62px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mint), var(--amber), var(--coral));
    transform: scaleX(0.58);
    transform-origin: right;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover::after,
.package-card:hover::after {
    width: 92px;
    transform: scaleX(1);
}

.service-card span,
.process-card span,
.package-card span {
    display: inline-flex;
    margin-bottom: 42px;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-card p,
.process-card p,
.package-card p,
.policy-content p,
.faq-grid p,
.auth-copy p,
.form-note {
    color: var(--muted);
}

.feature-section {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
    gap: 42px;
    align-items: center;
}

.feature-copy {
    max-width: 600px;
}

.check-list {
    display: grid;
    gap: 12px;
    margin: 24px 0 30px;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 34px;
    color: var(--ink-soft);
    font-weight: 750;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: inset 0 0 0 6px var(--green-dark);
}

.pipeline-card {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(14, 21, 18, 0.1);
    border-radius: 28px;
    background: var(--ink);
    color: white;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pipeline-card::before {
    content: "";
    position: absolute;
    inset: -30% -10%;
    background: linear-gradient(90deg, transparent, rgba(59, 255, 182, 0.16), transparent);
    transform: rotate(18deg) translateX(-65%);
    animation: pipelineSweep 6s ease-in-out infinite;
    pointer-events: none;
}

.pipeline-step {
    position: relative;
    align-items: center;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 1;
}

.pipeline-step::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(59, 255, 182, 0.22);
    border-radius: inherit;
    opacity: 0;
    animation: pipelineStepPulse 4.8s ease-in-out infinite;
}

.pipeline-step:nth-of-type(1)::after { animation-delay: 0s; }
.pipeline-step:nth-of-type(3)::after { animation-delay: 1.1s; }
.pipeline-step:nth-of-type(5)::after { animation-delay: 2.2s; }
}

.pipeline-step span {
    color: var(--mint);
    font-weight: 950;
}

.pipeline-step strong {
    font-size: 1.14rem;
}

.pipeline-step small {
    max-width: 180px;
    color: rgba(255, 255, 255, 0.62);
    text-align: right;
}

.pipeline-line {
    position: relative;
    width: 2px;
    height: 44px;
    margin: 0 0 0 34px;
    background: linear-gradient(var(--mint), var(--amber));
    overflow: hidden;
}

.pipeline-line::after {
    content: "";
    position: absolute;
    inset: -45% 0 auto;
    height: 45%;
    border-radius: 999px;
    background: white;
    box-shadow: 0 0 18px rgba(59, 255, 182, 0.72);
    animation: pipelineDot 1.7s ease-in-out infinite;
}

.process-grid {
    grid-template-columns: repeat(4, 1fr);
}

.process-card {
    min-height: 300px;
    background: linear-gradient(180deg, white, rgba(241, 234, 219, 0.34));
}

.package-grid {
    grid-template-columns: repeat(3, 1fr);
}

.package-card {
    min-height: 310px;
}

.package-card.is-featured {
    color: white;
    background: linear-gradient(145deg, var(--ink), var(--green-dark));
}

.package-card.is-featured p,
.package-card.is-featured span {
    color: rgba(255, 255, 255, 0.72);
}

.package-card a {
    position: absolute;
    left: 24px;
    bottom: 22px;
    color: var(--green-dark);
    font-weight: 950;
}

.package-card.is-featured a {
    color: var(--mint);
}

.faq-section {
    padding-bottom: 104px;
}

.faq-grid {
    grid-template-columns: repeat(2, 1fr);
}

.faq-grid details {
    overflow: hidden;
    padding: 22px 24px;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.faq-grid details[open] {
    border-color: rgba(36, 107, 91, 0.26);
    box-shadow: 0 24px 70px rgba(14, 21, 18, 0.1);
    transform: translateY(-3px);
}

.faq-grid summary {
    position: relative;
    padding-right: 34px;
    cursor: pointer;
    font-size: 1.04rem;
    font-weight: 900;
}

.faq-grid summary::marker,
.faq-grid summary::-webkit-details-marker {
    display: none;
    content: "";
}

.faq-grid summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--green-dark);
    background: rgba(59, 255, 182, 0.22);
    transform: translateY(-50%) rotate(0deg);
    transition: transform 220ms ease, background 220ms ease;
}

.faq-grid details[open] summary::after {
    background: var(--mint);
    transform: translateY(-50%) rotate(45deg);
}

.faq-grid p {
    margin: 14px 0 0;
    animation: detailsIn 280ms ease;
}

.page-hero {
    padding: 86px 0 30px;
}

.page-hero.compact {
    max-width: 860px;
    margin-left: max(20px, calc((100% - var(--max)) / 2));
}

.page-hero h1 {
    font-size: clamp(2.35rem, 5vw, 4.35rem);
}

.auth-page {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.7fr);
    gap: 48px;
    align-items: center;
    min-height: calc(100vh - 92px);
    padding: 76px 0;
}

.auth-copy h1 {
    font-size: clamp(2.45rem, 5.2vw, 4.8rem);
}

.auth-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.auth-card {
    display: grid;
    gap: 18px;
    padding: 28px;
}

.auth-card h2 {
    margin: 0;
    font-size: 2rem;
}

.auth-card label {
    display: grid;
    gap: 8px;
    color: var(--ink-soft);
    font-weight: 850;
}

.auth-card input,
.auth-card select {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    color: var(--ink);
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.auth-card input:focus,
.auth-card select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(59, 255, 182, 0.18);
}

.form-alert {
    padding: 12px 14px;
    border-radius: var(--radius);
    font-weight: 900;
}

.form-alert.error {
    color: #7a1d13;
    background: rgba(255, 107, 74, 0.16);
}

.form-alert.success {
    color: #103c31;
    background: rgba(59, 255, 182, 0.18);
}

.form-note {
    margin: 0;
    font-size: 0.94rem;
}

.form-note a,
.policy-content a {
    color: var(--green);
    font-weight: 900;
}

.policy-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0 104px;
    align-items: start;
}

.policy-aside {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 10px;
    padding: 20px;
}

.policy-aside strong {
    margin-bottom: 8px;
}

.policy-aside a {
    color: var(--muted);
    font-weight: 800;
}

.policy-content {
    padding: 34px;
}

.policy-content section + section {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.policy-content h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.policy-table {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.policy-table div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
}

.site-footer {
    color: white;
    background: var(--ink);
}

.footer-cta,
.footer-grid,
.footer-bottom {
    width: min(calc(100% - 40px), var(--max));
    margin: 0 auto;
}

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 54px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-cta h2 {
    max-width: 740px;
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.8rem);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(3, 1fr);
    gap: 28px;
    padding: 48px 0;
}

.footer-grid p,
.footer-grid a,
.footer-grid span {
    color: rgba(255, 255, 255, 0.68);
}

.footer-grid h3 {
    color: white;
    font-size: 1rem;
}

.footer-grid div {
    display: grid;
    align-content: start;
    gap: 10px;
}

.footer-grid .brand {
    margin-bottom: 8px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

.footer-bottom {
    align-items: center;
    padding: 22px 0 34px;
    color: rgba(255, 255, 255, 0.62);
}

.text-button {
    border: 0;
    color: var(--mint);
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}

.cookie-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
    width: min(calc(100% - 32px), 520px);
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
    animation: bannerIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.cookie-banner p {
    margin-bottom: 0;
    color: var(--muted);
}

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(14, 21, 18, 0.55);
}

.modal-card {
    position: relative;
    width: min(100%, 620px);
    padding: 28px;
    border-radius: 18px;
    background: var(--paper-strong);
    box-shadow: var(--shadow);
    animation: modalIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card h2 {
    font-size: 2rem;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(14, 21, 18, 0.08);
    cursor: pointer;
}

.consent-row {
    align-items: center;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.consent-row small {
    display: block;
    color: var(--muted);
}

.consent-row input {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}

.is-locked {
    background: rgba(36, 107, 91, 0.06);
}

.modal-actions {
    justify-content: flex-end;
    margin-top: 20px;
}

.reveal {
    opacity: 0;
    clip-path: inset(0 0 10% 0);
    filter: blur(3px);
    transition:
        opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, clip-path, filter;
}

.reveal.is-visible {
    opacity: 1;
    clip-path: inset(0);
    filter: blur(0);
}

@keyframes floatPanel {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes signalMove {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translateX(660px); opacity: 0; }
}

@keyframes slowSpin {
    to { transform: rotate(360deg); }
}

@keyframes counterSpin {
    to { transform: rotate(-360deg); }
}

@keyframes barPulse {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.5) brightness(1.15); }
}

@keyframes backdropDrift {
    0% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
    100% { background-position: 100% 100%, 0% 0%, 160px 0, 0 188px; }
}

@keyframes ambientSignals {
    0% {
        background-position: -460px 28%, -620px 74%;
        opacity: 0.1;
    }
    18%, 74% { opacity: 0.7; }
    100% {
        background-position: calc(100% + 460px) 28%, calc(100% + 620px) 74%;
        opacity: 0.1;
    }
}

@keyframes nodeTwinkle {
    0%, 100% { opacity: 0.28; transform: translate3d(0, 0, 0); }
    50% { opacity: 0.62; transform: translate3d(0, -12px, 0); }
}

@keyframes panelGlow {
    0%, 100% { opacity: 0.42; filter: blur(18px); }
    50% { opacity: 0.76; filter: blur(22px); }
}

@keyframes panelSweep {
    0%, 48% { transform: translateX(-125%); opacity: 0; }
    58% { opacity: 0.75; }
    72%, 100% { transform: translateX(125%); opacity: 0; }
}

@keyframes nodePulse {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(59, 255, 182, 0.5), 0 0 22px rgba(59, 255, 182, 0.58);
        opacity: 0.62;
    }
    70% {
        transform: scale(1.12);
        box-shadow: 0 0 0 18px rgba(59, 255, 182, 0), 0 0 28px rgba(255, 184, 77, 0.42);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(59, 255, 182, 0), 0 0 22px rgba(59, 255, 182, 0.5);
        opacity: 0.62;
    }
}

@keyframes cardFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

@keyframes miniCardFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -8px, 0); }
}

@keyframes pipelineSweep {
    0%, 46% { transform: rotate(18deg) translateX(-72%); opacity: 0; }
    58% { opacity: 1; }
    76%, 100% { transform: rotate(18deg) translateX(72%); opacity: 0; }
}

@keyframes pipelineStepPulse {
    0%, 100% { opacity: 0; transform: scale(0.98); }
    35%, 55% { opacity: 1; transform: scale(1); }
}

@keyframes pipelineDot {
    0% { transform: translateY(-55%); opacity: 0; }
    22%, 78% { opacity: 1; }
    100% { transform: translateY(265%); opacity: 0; }
}

@keyframes detailsIn {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bannerIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes modalIn {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 980px) {
    .site-header {
        width: min(calc(100% - 24px), var(--max));
        border-radius: 24px;
    }

    .nav-toggle {
        display: block;
    }

    .site-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 84px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: white;
        box-shadow: var(--shadow);
    }

    .site-nav.is-open {
        display: flex;
    }

    .nav-link,
    .nav-button {
        justify-content: flex-start;
        border-radius: var(--radius);
    }

    .hero,
    .feature-section,
    .auth-page,
    .policy-layout {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        padding-top: 56px;
    }

    .hero-visual {
        min-height: 520px;
    }

    .metric-band,
    .service-grid,
    .process-grid,
    .package-grid,
    .faq-grid,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .policy-aside {
        position: static;
    }

    .cookie-banner {
        right: 14px;
        bottom: 14px;
        width: calc(100% - 28px);
        max-height: 72vh;
        overflow: auto;
        padding: 16px;
    }

    .footer-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .brand-logo {
        width: 172px;
    }

    .hero,
    .metric-band,
    .section,
    .feature-section,
    .faq-section,
    .auth-page,
    .page-hero,
    .policy-layout,
    .footer-cta,
    .footer-grid,
    .footer-bottom {
        width: min(calc(100% - 28px), var(--max));
    }

    h1 {
        font-size: clamp(2.6rem, 13.2vw, 3.7rem);
    }

    .hero-actions,
    .cookie-actions,
    .modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .btn,
    .cookie-actions .btn {
        width: 100%;
    }

    .hero-visual {
        min-height: 470px;
        border-radius: 20px;
    }

    .main-card {
        inset: 36px 22px auto 22px;
    }

    .score-ring {
        width: 170px;
        height: 170px;
        margin: 24px auto;
    }

    .score-ring span {
        font-size: 3.1rem;
    }

    .mini-card {
        width: 160px;
    }

    .card-a {
        right: 12px;
        bottom: 132px;
    }

    .card-b {
        left: 12px;
        bottom: 72px;
    }

    .card-c {
        right: 26px;
        bottom: 16px;
    }

    .metric-band,
    .service-grid,
    .process-grid,
    .package-grid,
    .faq-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .service-card,
    .process-card,
    .package-card {
        min-height: auto;
    }

    .pipeline-step,
    .policy-table div {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .pipeline-step {
        display: grid;
    }

    .pipeline-step small {
        max-width: none;
        text-align: left;
    }

    .policy-content,
    .auth-card {
        padding: 22px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

    .reveal {
        opacity: 1;
        clip-path: none;
        filter: none;
        transition-delay: 0ms;
    }
}