/* ── Local Fonts ── */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/public/assets/fonts/outfit.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/public/assets/fonts/manrope.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Protivar UG Managed Services – v3 Modern & Engaging
   CI: #a6d500 lime | #26c2ff sky | #2b2b2b charcoal
   Outfit 700–800 headings / Manrope 400–600 body
   ========================================================= */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ── */
:root {
    --lime:      #a6d500;
    --lime-dk:   #8fba00;
    --lime-lt:   rgba(166,213,0,.1);
    --sky:       #26c2ff;
    --sky-lt:    rgba(38,194,255,.1);
    --charcoal:  #2b2b2b;
    --graphite:  #4a4a4a;
    --muted:     #7e8a93;
    --white:     #ffffff;
    --surface:   #f6f8f4;
    --border:    #e4ead8;

    --color-primary:    var(--lime);
    --color-primary-dk: var(--lime-dk);
    --color-accent:     var(--sky);
    --color-text:       var(--charcoal);
    --color-secondary:  var(--graphite);
    --color-muted:      var(--muted);
    --color-bg:         var(--white);
    --color-surface:    var(--surface);
    --color-border:     var(--border);

    --font-head: 'Outfit', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;

    --r-sm:   8px;
    --r-md:  14px;
    --r-lg:  22px;
    --r-xl:  36px;
    --r-pill: 999px;

    --sh-sm: 0 2px 10px rgba(0,0,0,.06);
    --sh-md: 0 6px 28px rgba(0,0,0,.09);
    --sh-lg: 0 16px 60px rgba(0,0,0,.13);
    --sh-xl: 0 32px 80px rgba(0,0,0,.16);

    --gap: clamp(1.25rem, 3vw, 1.75rem);
    --container: 1240px;
    --gutter: clamp(1.25rem, 5vw, 2.5rem);
    --section: clamp(5rem, 10vw, 9rem);
}

/* ── Base ── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--charcoal);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Typography ── */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 1.12;
    color: var(--charcoal);
    letter-spacing: -.03em;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.04rem; font-weight: 700; letter-spacing: -.015em; }
p  { color: var(--graphite); line-height: 1.75; }

/* ── Layout ── */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section-alt { background: var(--surface); }

.section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-header h2 { margin-bottom: 1rem; }
.section-sub { font-size: 1.05rem; color: var(--muted); font-weight: 400; }

.content-container {
    max-width: 860px;
    width: 100%;
    margin-inline: auto;
}

.content-title {
    margin-bottom: 1rem;
}

.content-intro {
    font-size: 1.05rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.content-richtext {
    display: grid;
    gap: 1rem;
}

.content-html {
    overflow-wrap: anywhere;
}

.content-actions {
    margin-top: 1.5rem;
}

.section-contact .container {
    display: flex;
    justify-content: center;
}

.contact-layout,
.contact-layout-item {
    width: 100%;
}

.contact-container {
    width: min(100%, 1080px);
    max-width: 1080px;
    margin-inline: auto;
}

.simple-contact-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
    width: 100%;
}

.simple-contact-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field {
    display: grid;
    gap: .45rem;
}

.contact-field label {
    display: grid;
    gap: .25rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--graphite);
}

.contact-field label small {
    font-weight: 500;
    color: var(--slate);
}

.contact-field-textarea,
.contact-field-select {
    grid-column: 1 / -1;
}

.simple-contact-form input,
.simple-contact-form textarea,
.simple-contact-form select {
    width: 100%;
    padding: .95rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--charcoal);
    background: var(--white);
}

.simple-contact-form input:focus,
.simple-contact-form textarea:focus,
.simple-contact-form select:focus {
    outline: 2px solid rgba(166,213,0,.25);
    border-color: var(--lime);
}

.contact-consent {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .92rem;
    color: var(--graphite);
}

.contact-consent input {
    width: 18px;
    height: 18px;
    margin-top: .2rem;
    flex-shrink: 0;
}

.contact-recaptcha {
    margin-top: .25rem;
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
}

.contact-form-message {
    padding: .9rem 1rem;
    border-radius: var(--r-md);
    font-weight: 600;
}

.contact-form-message-success {
    background: rgba(166,213,0,.12);
    color: #587100;
}

.contact-form-message-error {
    background: rgba(220,38,38,.08);
    color: #b91c1c;
}

@media (max-width: 720px) {
    .simple-contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-field-textarea,
    .contact-field-select {
        grid-column: auto;
    }
}

/* eyebrow label */
.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lime-dk);
    background: var(--lime-lt);
    border: 1px solid rgba(166,213,0,.22);
    padding: .3rem .9rem;
    border-radius: var(--r-pill);
    margin-bottom: 1rem;
}

/* ── Grid ── */
.grid { display: grid; gap: var(--gap); }
.grid-2    { grid-template-columns: repeat(2, 1fr); }
.grid-3    { grid-template-columns: repeat(3, 1fr); }
.grid-4    { grid-template-columns: repeat(4, 1fr); }
.grid-md-2 { grid-template-columns: repeat(2, 1fr); }
.grid-md-3 { grid-template-columns: repeat(3, 1fr); }
.grid-md-4 { grid-template-columns: repeat(4, 1fr); }
/* Adapts automatically to the number of items — no empty ghost columns */
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

@media (max-width: 1020px) {
    .grid-4, .grid-md-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .grid-3, .grid-md-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .grid-2, .grid-3, .grid-4,
    .grid-md-2, .grid-md-3, .grid-md-4 { grid-template-columns: 1fr; }
    .grid-auto-fit { grid-template-columns: 1fr; }
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    padding: .875rem 1.9rem;
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--lime);
    color: #1c2300;
    border-color: var(--lime);
}
.btn-primary:hover {
    background: var(--lime-dk);
    border-color: var(--lime-dk);
    box-shadow: 0 8px 32px rgba(166,213,0,.42);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.3);
}
.btn-outline:hover {
    border-color: var(--white);
    background: rgba(255,255,255,.08);
}

.btn-outline-dark {
    background: transparent;
    color: var(--charcoal);
    border-color: var(--border);
}
.btn-outline-dark:hover {
    border-color: var(--graphite);
    background: var(--surface);
}

.btn-lg  { padding: 1.05rem 2.4rem; font-size: 1.05rem; }
.btn-sm  { padding: .5rem 1.1rem; font-size: .83rem; }

/* ── Badge ── */
.badge {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.badge-primary {
    background: var(--lime-lt);
    color: var(--lime-dk);
    border: 1px solid rgba(166,213,0,.25);
}

/* ────────────────────────────
   HEADER
──────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(228,234,216,.7);
    transition: box-shadow .3s;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 70px;
}
.logo { display: flex; align-items: center; gap: .5rem; }
.logo-svg { height: 42px; width: auto; display:block; object-fit:contain; }
.logo-svg-light {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.site-header .logo-svg { height: 64px; }
.logo-mark {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    background: var(--lime);
    color: #1c2300;
    border-radius: var(--r-sm);
    font-size: .82rem; font-weight: 800;
    font-family: var(--font-head);
}
.main-nav { display: flex; align-items: center; gap: 2.5rem; }
.main-nav a {
    font-size: .88rem; font-weight: 500;
    color: var(--graphite);
    transition: color .2s;
}
.main-nav a:hover { color: var(--charcoal); }
@media (max-width: 720px) { .main-nav { display: none; } }

/* ────────────────────────────
   KEYFRAMES
──────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes pulse  { 0%,100%{box-shadow:0 0 0 0 rgba(166,213,0,.5)} 70%{box-shadow:0 0 0 8px rgba(166,213,0,0)} }

/* ────────────────────────────
   HERO
──────────────────────────── */
.hero {
    position: relative;
    padding-block: clamp(5rem, 12vw, 10rem);
    overflow: hidden;
    background: var(--charcoal);
    color: var(--white);
}

/* BG image slot – swap gradient for url('/public/assets/img/hero-bg.jpg') center/cover */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(43,43,43,.97) 0%, rgba(43,43,43,.72) 55%, rgba(43,43,43,.9) 100%),
        radial-gradient(ellipse 70% 80% at 75% 40%, rgba(38,194,255,.1) 0%, transparent 65%);
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(166,213,0,.1) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    z-index: 0;
}

.hero-blob {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(166,213,0,.15) 0%, transparent 65%);
    border-radius: 50%;
    top: -100px; right: -80px;
    pointer-events: none;
    z-index: 0;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
    position: relative;
    z-index: 1;
}
.hero-content { max-width: 580px; }

.hero .badge      { animation: fadeUp .5s ease both; }
.hero-headline    { color: var(--white); margin-block: 1.25rem 1rem; animation: fadeUp .55s .1s ease both; text-wrap: balance; font-size: clamp(2rem, 3.8vw, 3.2rem); }
.hero-headline .hl { color: var(--lime); }
.hero-sub {
    font-size: 1.08rem;
    color: rgba(255,255,255,.58);
    max-width: 460px;
    margin-bottom: 2.5rem;
    animation: fadeUp .55s .2s ease both;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; animation: fadeUp .55s .3s ease both; }

.hero-proof {
    display: flex; align-items: center; gap: .75rem;
    margin-top: 2.5rem;
    animation: fadeUp .55s .4s ease both;
}
.hero-proof-dots { display: flex; }
.hero-proof-dots span {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(43,43,43,.8);
    background: linear-gradient(135deg,#c8d8a0,#8fba00);
    display: block; margin-left: -7px;
}
.hero-proof-dots span:first-child { margin-left:0; }
.hero-proof-dots span:nth-child(2) { background:linear-gradient(135deg,#9dd4f5,#26c2ff); }
.hero-proof-dots span:nth-child(3) { background:linear-gradient(135deg,#d0d0d0,#9b9b9b); }
.hero-proof-text { font-size:.8rem; color:rgba(255,255,255,.45); font-weight:500; }
.hero-proof-text strong { color:rgba(255,255,255,.75); }

/* ── Hero visual ── */
.hero-visual {
    display: flex; justify-content: flex-end; position: relative;
    animation: fadeUp .7s .25s ease both;
}
.hero-card-wrap { position: relative; }

.hero-card {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-xl);
    padding: 1.75rem;
    width: 300px;
    display: flex; flex-direction: column; gap: 1.25rem;
    animation: float 6s ease-in-out 1s infinite;
}
.hero-card-header { display:flex; align-items:center; justify-content:space-between; }
.hero-card-title {
    font-family: var(--font-head);
    font-size: .75rem; font-weight: 600;
    color: rgba(255,255,255,.45);
    text-transform: uppercase; letter-spacing: .07em;
}
.hero-card-status {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; color: var(--lime); font-weight: 600;
    font-family: var(--font-head);
}
.hero-card-status::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--lime);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.hero-stat-big .val {
    font-family: var(--font-head);
    font-size: 3.2rem; font-weight: 800;
    color: var(--white); letter-spacing: -.06em;
    display: block;
}
.hero-stat-big .lbl {
    font-size: .72rem; color: rgba(255,255,255,.4); font-weight: 500;
    text-transform: uppercase; letter-spacing: .07em;
    margin-top: .35rem; display: block;
}
.hero-bars { display:flex; flex-direction:column; gap:.65rem; }
.hero-bar-row { display:flex; flex-direction:column; gap:.3rem; }
.hero-bar-label {
    display: flex; justify-content: space-between;
    font-size: .7rem; color: rgba(255,255,255,.4); font-weight: 500;
}
.hero-bar-track { height:6px; background:rgba(255,255,255,.1); border-radius:var(--r-pill); overflow:hidden; }
.hero-bar-fill { height:100%; border-radius:var(--r-pill); }
.hero-bar-fill.lime { background:linear-gradient(90deg,var(--lime),var(--lime-dk)); }
.hero-bar-fill.sky  { background:linear-gradient(90deg,var(--sky),#1aaedd); }
.hero-bar-fill.w99  { width:99%; }
.hero-bar-fill.w97  { width:97%; }

/* Floating mini card */
.hero-badge-card {
    position: absolute;
    top: calc(100% + 1rem); left: -2rem;
    background: var(--white);
    border-radius: var(--r-lg);
    padding: .9rem 1.25rem;
    display: flex; align-items: center; gap: .75rem;
    box-shadow: var(--sh-xl);
    border: 1px solid var(--border);
    min-width: 188px;
    animation: float 5s ease-in-out 2.2s infinite;
}
.hero-badge-icon {
    width: 36px; height: 36px;
    background: var(--lime-lt); border-radius: var(--r-sm);
    display: grid; place-items: center; flex-shrink: 0;
    color: var(--lime-dk); border: 1px solid rgba(166,213,0,.2);
}
.hero-badge-icon svg { width:18px; height:18px; }
.hero-badge-label {
    font-family: var(--font-head); font-size:.75rem; font-weight:700;
    color:var(--charcoal); line-height:1.2;
}
.hero-badge-sub { font-size:.67rem; color:var(--muted); font-weight:400; }

@media (max-width: 800px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
}

/* ────────────────────────────
   KPI BAR
──────────────────────────── */
.kpi-bar { background:var(--white); border-block:1px solid var(--border); padding-block:3.25rem; }
.kpi-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:0; }
.kpi-item { text-align:center; padding:0 3.5rem; position:relative; }
.kpi-item:not(:last-child)::after {
    content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
    height:2.5rem; width:1px; background:var(--border);
}
.kpi-value {
    display:block;
    font-family:var(--font-head);
    font-size:clamp(2.2rem,4.5vw,3.2rem);
    font-weight:800; color:var(--charcoal);
    line-height:1; letter-spacing:-.05em;
}
.kpi-label {
    display:block; font-size:.73rem; font-weight:600; color:var(--muted);
    margin-top:.6rem; text-transform:uppercase; letter-spacing:.08em;
}
@media (max-width:680px) {
    .kpi-item { padding:1.25rem 2rem; }
    .kpi-item:not(:last-child)::after { display:none; }
}

/* ────────────────────────────
   CARDS
──────────────────────────── */
.card {
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow .3s, transform .3s, border-color .3s;
    display: flex;
    flex-direction: column;
}
.card:hover {
    box-shadow: var(--sh-lg);
    transform: translateY(-5px);
    border-color: rgba(166,213,0,.28);
}
.section-alt .card { background:var(--white); box-shadow:none; }
.section-alt .card:hover { box-shadow:var(--sh-md); border-color:rgba(166,213,0,.3); }

/* Image / Visual top area */
.card-img {
    height: 168px;
    width: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.card-img-service {
    background: linear-gradient(145deg, rgba(166,213,0,.18) 0%, rgba(166,213,0,.05) 100%);
}
.card-img img {
    width:100%; height:100%; object-fit:cover;
    transition: transform .5s ease;
}
.card:hover .card-img img { transform:scale(1.06); }

/* Gradient placeholders (until real images added) */
.card-img.pl-lime   { background:linear-gradient(145deg,rgba(166,213,0,.18) 0%,rgba(166,213,0,.05) 100%); }
.card-img.pl-sky    { background:linear-gradient(145deg,rgba(38,194,255,.15) 0%,rgba(38,194,255,.04) 100%); }
.card-img.pl-dark   { background:linear-gradient(145deg,#2b2b2b 0%,#3c3c3c 100%); }
.card-img.pl-moss   { background:linear-gradient(145deg,rgba(100,150,30,.18) 0%,rgba(166,213,0,.06) 100%); }

/* Centred icon overlay in image area */
.card-img-icon {
    position:absolute; inset:0;
    display:grid; place-items:center;
}
.card-img-icon--corner {
    inset: auto .85rem .85rem auto;
    width: auto;
    height: auto;
}
.card-img-icon .iw {
    width:52px; height:52px; border-radius:var(--r-md);
    display:grid; place-items:center;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);
    color:var(--lime-dk);
    border:1px solid rgba(166,213,0,.22);
    box-shadow:var(--sh-md);
}
.card-img-icon .iw.sky { color:var(--sky); border-color:rgba(38,194,255,.22); }
.card-img-icon .iw.dark { background:rgba(255,255,255,.12); color:var(--lime); border-color:rgba(166,213,0,.3); }
.card-img-icon svg { width:26px; height:26px; }

.card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.card-body h3 { margin-bottom:.5rem; }
.card-body p  { font-size:.87rem; color:var(--muted); line-height:1.65; flex:1; }

/* Plain cards (no image) */
.card-plain { padding:1.75rem; }
.card-plain h3 { margin-block:.8rem .45rem; }
.card-plain p  { font-size:.9rem; color:var(--muted); line-height:1.65; }

.card-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:var(--r-md); flex-shrink:0; }
.card-icon svg { width:22px; height:22px; }
.card-icon-lime   { background:var(--lime-lt); color:var(--lime-dk); }
.card-icon-sky    { background:var(--sky-lt); color:var(--sky); }
.card-icon-subtle { background:var(--surface); border:1px solid var(--border); color:var(--graphite); }
.card-icon-image {
    width: 58px;
    height: 58px;
    padding: .15rem;
    background: transparent;
    border-radius: 18px;
    overflow: hidden;
}
.card-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Accent border variants */
.card-challenge { padding:1.75rem; border-top:3px solid var(--sky); }
.card-challenge .card-icon { margin-bottom:.5rem; }
.card-benefit   { padding:1.75rem; border-top:3px solid var(--lime); }
.card-service   { /* uses .card + .card-img */ }

/* ────────────────────────────
   PROCESS
──────────────────────────── */
.process-steps {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width:900px) { .process-steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width:500px) { .process-steps { grid-template-columns: 1fr; } }

.process-step {
    position: relative;
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    padding: 2rem 1.75rem;
    transition: box-shadow .3s, transform .3s, border-color .3s;
}
.process-step:hover { box-shadow:var(--sh-md); transform:translateY(-4px); border-color:rgba(166,213,0,.3); }

@media (min-width:901px) {
    .process-step:not(:last-child)::after {
        content: '→';
        position: absolute;
        right: -1.2rem; top: 2.1rem;
        font-size: 1.1rem;
        color: rgba(166,213,0,.7);
        z-index: 1;
        pointer-events: none;
    }
}

.process-number {
    font-family: var(--font-head);
    font-size: 3rem; font-weight: 800;
    color: var(--lime); line-height: 1;
    letter-spacing: -.06em;
    margin-bottom: 1rem;
    opacity: .75;
}
.process-number-img {
    width: 76px;
    height: 76px;
    display: block;
    object-fit: contain;
    opacity: 1;
}
.process-body h3 { font-size:1rem; margin-bottom:.4rem; }
.process-body p  { font-size:.87rem; color:var(--muted); line-height:1.65; }
.process-arrow   { display:none; }

/* ────────────────────────────
   COMPARISON
──────────────────────────── */
.section-comparison {
    background: var(--charcoal);
    position: relative;
    overflow: hidden;
}
.section-comparison::before {
    content: '';
    position: absolute;
    inset: -4rem auto auto -10rem;
    width: 32rem; height: 32rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(38,194,255,.1) 0%, transparent 70%);
    pointer-events: none;
}
.section-comparison::after {
    content: '';
    position: absolute;
    inset: auto -8rem -4rem auto;
    width: 28rem; height: 28rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(166,213,0,.13) 0%, transparent 70%);
    pointer-events: none;
}
/* Section header on dark bg */
.section-comparison .eyebrow { border-color: rgba(166,213,0,.35); color: var(--lime); }
.comp-headline { color: var(--white); }
.comp-sub { color: rgba(255,255,255,.45); }

.comparison-showcase {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 1.5rem;
    align-items: center;
}

/* Alt cards (non-featured) */
.comparison-card--alt {
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 2rem 1.75rem;
    border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(14px);
    transition: border-color .25s;
}
.comparison-card--alt:hover { border-color: rgba(255,255,255,.2); }

/* Featured card */
.comparison-card--featured {
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 2.5rem 2rem;
    border-radius: var(--r-xl);
    background: var(--white);
    position: relative;
    box-shadow: 0 32px 72px rgba(0,0,0,.45), 0 0 0 1px rgba(166,213,0,.3);
    transform: translateY(-1.5rem) scale(1.02);
    transition: transform .3s ease, box-shadow .3s ease;
}
.comparison-card--featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--lime), var(--lime-dk));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.comparison-card--featured:hover {
    transform: translateY(-2rem) scale(1.02);
    box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(166,213,0,.4);
}

/* Recommended pill */
.comp-recommended {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .85rem;
    background: var(--lime);
    color: var(--charcoal);
    font-family: var(--font-head);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    border-radius: var(--r-pill);
}

/* Card head */
.comp-card-head { display: flex; flex-direction: column; gap: .3rem; }
.comp-kicker {
    font-family: var(--font-head);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}
.comparison-card--featured .comp-kicker { color: var(--lime-dk); }
.comp-title {
    font-family: var(--font-head);
    font-size: 1.15rem; font-weight: 700; line-height: 1.2;
    color: rgba(255,255,255,.82);
}
.comparison-card--featured .comp-title { color: var(--charcoal); }

/* Points */
.comp-points { list-style: none; display: flex; flex-direction: column; margin-top: auto; }
.comp-point {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .72rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .875rem; line-height: 1.5;
    color: rgba(255,255,255,.55);
}
.comp-point:first-child { border-top: none; }
.comparison-card--featured .comp-point {
    border-top-color: rgba(43,43,43,.09);
    color: var(--graphite);
}
.comparison-card--featured .comp-point:first-child { border-top: none; }
.comp-point-icon {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: .1em;
    font-size: .72rem; font-weight: 900;
}
.comp-point-icon img {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
}
.comp-point--neg .comp-point-icon { background: rgba(239,68,68,.18); color: #f87171; }
.comp-point--pos .comp-point-icon { background: rgba(166,213,0,.22); color: #587100; }

@media (max-width: 980px) {
    .comparison-showcase { grid-template-columns: 1fr; }
    .comparison-card--featured { transform: none; }
    .comparison-card--featured:hover { transform: translateY(-4px); }
}

/* ────────────────────────────
   FAQ
──────────────────────────── */
.faq-list { max-width:740px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-question {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.5rem 0;
    font-family:var(--font-head); font-weight:700; font-size:.98rem;
    cursor:pointer; list-style:none; gap:1.5rem;
    color:var(--charcoal); transition:color .2s;
}
.faq-question::-webkit-details-marker { display:none; }
.faq-question:hover { color:var(--lime-dk); }
.faq-question::after {
    content:'+'; font-size:1.6rem; font-weight:300;
    color:var(--lime); flex-shrink:0; line-height:1;
    transition:transform .3s ease;
}
.faq-item[open] .faq-question::after { transform:rotate(45deg); }
.faq-item[open] .faq-question { color:var(--lime-dk); }
.faq-answer { padding:0 0 1.5rem; font-size:.93rem; color:var(--muted); line-height:1.8; }

/* ────────────────────────────
   CTA BOTTOM
──────────────────────────── */
.section-cta-bottom {
    position: relative; overflow: hidden;
    background: var(--charcoal);
    padding-block: clamp(4.5rem, 10vw, 8rem);
}
.section-cta-bottom::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(43,43,43,.97) 0%, rgba(43,43,43,.8) 100%),
        radial-gradient(ellipse 60% 80% at 20% 50%, rgba(166,213,0,.12) 0%, transparent 65%);
    /* swap for: url('/public/assets/img/cta-bg.jpg') center/cover no-repeat */
    background-size: cover; background-position: center;
    z-index: 0;
}
.section-cta-bottom::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(166,213,0,.07) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    z-index: 0;
}
.cta-bottom-inner {
    text-align: center; max-width: 620px;
    position: relative; z-index: 1;
}
.section-cta-bottom h2 { color:var(--white); margin-block:1rem 1.25rem; }
.section-cta-bottom p  { color:rgba(255,255,255,.55); font-size:1.05rem; margin-bottom:2.5rem; }

/* ────────────────────────────
   FOOTER
──────────────────────────── */
.site-footer {
    background: #16181c;
    padding-block: 3.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    width: 100%;
}
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.footer-brand { display:flex; align-items:center; gap:.75rem; }
.site-footer .logo-svg {
    height: 56px;
    width: auto;
}
.footer-brand-text {
    color: rgba(255,255,255,.82);
    font-size: .95rem;
    line-height: 1.55;
    white-space: pre-line;
}
.footer-nav { display:flex; gap:2rem; }
.footer-nav a {
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
    transition: color .2s, opacity .2s;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: #ffffff;
}
.footer-copy {
    font-size: .84rem;
    color: rgba(255,255,255,.56);
}
@media (max-width:600px) { .footer-inner { flex-direction:column; align-items:flex-start; } }

/* ────────────────────────────
   REVEAL ANIMATION
──────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity:1; transform:none; }

/* ────────────────────────────
   GRID AUTO-FIT
──────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ────────────────────────────
   CONTACT DIALOG
──────────────────────────── */
.contact-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 20, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.contact-dialog-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
.contact-dialog {
    background: #fff;
    border-radius: var(--r-xl);
    padding: clamp(2rem, 6vw, 3.5rem);
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sh-xl);
    transform: translateY(28px) scale(.97);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    opacity: 0;
}
.contact-dialog-overlay.is-open .contact-dialog {
    transform: none;
    opacity: 1;
}
.contact-dialog-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.contact-dialog-icon--success {
    background: var(--lime-lt);
}
.contact-dialog-icon--success svg {
    color: var(--lime-dk);
    width: 36px; height: 36px;
}
.contact-dialog-icon--error {
    background: rgba(239,68,68,.1);
}
.contact-dialog-icon--error svg {
    color: #ef4444;
    width: 36px; height: 36px;
}
.contact-dialog h3 {
    font-size: 1.35rem;
    margin-bottom: .6rem;
    color: var(--charcoal);
}
.contact-dialog p {
    color: var(--graphite);
    font-size: .97rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
}
.contact-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 2rem;
    background: var(--lime);
    color: #1c2300;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.contact-dialog-close:hover { background: var(--lime-dk); transform: translateY(-1px); }

.contact-form-sending {
    opacity: .5;
    pointer-events: none;
}
.btn-submit-loading::after {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-left: .5rem;
    vertical-align: middle;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }