/* =========================================================
   TalkAccel – Global stylesheet
   All colours, fonts, radii and spacing are CSS variables.
   Change a value in :root and it updates on every page.
   ========================================================= */

:root {
    /* Brand */
    --primary: #8b0f18;
    --primary-mid: #bf545c;
    --primary-tint: #fffafb;
    --primary-soft: rgba(247, 203, 206, .26);
    --primary-rgb: 139, 15, 24;

    /* Neutrals / text */
    --ink: #15182a;
    --ink-2: #23264a;
    --text: #15182a;
    --text-soft: #394052;
    --muted: #667085;
    --muted-2: #7b8094;
    --white: #fff;
    --black: #000;

    /* Dark panels (platform card, security panel, CTA, modal) */
    --panel-1: #2b2665;
    --panel-2: #171b3d;
    --panel-card: #151832;
    --panel-text: #fff;
    --panel-muted: #e9e6ff;
    --modal-bg: #0e2338;
    --overlay: rgba(7, 19, 33, .72);

    /* Accents */
    --accent: #46d7b8;
    --accent-text: #7de7d2;
    --success: #087565;
    --error: #b42318;
    --error-on-dark: #ff8080;
    --success-on-dark: #43e6c7;
    --dot-red: #ff5c60;
    --dot-green: #35c759;
    --dot-gray: #d0d7da;

    /* Lines, backgrounds */
    --line: rgba(35, 39, 76, .12);
    --border: #e5e3ef;
    --border-input: #dfe3ea;
    --bg: #fff;
    --bg-hero: #fbfaff;
    --bg-soft: linear-gradient(135deg, #f6f4ff, #fff7f1);
    --hero-grid: rgba(78, 65, 190, .055);
    --hero-glow-1: rgba(91, 76, 240, .12);
    --hero-glow-2: rgba(255, 103, 23, .10);
    --nav-bg: rgba(255, 255, 255, .9);

    /* Shadows */
    --shadow: 0 28px 80px rgba(42, 38, 100, .14);
    --shadow-card: 0 12px 35px rgba(44, 39, 93, .05);
    --shadow-card-hover: 0 20px 50px rgba(15, 44, 65, .09);
    --shadow-form: 0 18px 50px rgba(35, 39, 76, .08);

    /* Typography */
    --font-body: "DM Sans", sans-serif;
    --font-head: "Manrope", sans-serif;

    /* Layout */
    --radius: 22px;
    --radius-lg: 30px;
    --radius-pill: 999px;
    --max: 1180px;
    --nav-h: 78px;
    --section-y: 110px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden
}
body.menu-open, body.modal-open { overflow: hidden }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit }
button { cursor: pointer }
p { margin: 0 }
.p-0 { margin: 0 !important }
.muted { color: var(--muted) }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; margin: 0 }
h1 { font-size: clamp(2.75rem, 6vw, 5.8rem); letter-spacing: -.055em; max-width: 920px }
h2 { font-size: clamp(2rem, 4.3vw, 3.7rem); letter-spacing: -.04em }
h3 { font-size: 1.25rem; letter-spacing: -.02em }

.container { width: min(calc(100% - 40px), var(--max)); margin: auto }
.section { padding: var(--section-y) 0 }
.section-head {
    display: grid;
    grid-template-columns: 1.05fr .75fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 52px
}
.section-head p { font-size: 1.1rem; color: var(--muted) }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}
.eyebrow:before { content: ""; width: 24px; height: 1px; background: var(--primary) }

.reveal { opacity: 0; transform: translateY(20px); transition: .65s ease }
.reveal.visible { opacity: 1; transform: none }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-weight: 700;
    transition: .25s ease
}
.btn svg { width: 18px }
.btn-primary { background: var(--primary); color: var(--white) }
.btn-primary:hover { background: var(--primary-tint); color: var(--primary); border-color: var(--primary) }
.btn-ghost { background: var(--white); border-color: #e3e0f1; color: var(--primary) }
.btn-ghost:hover { background: var(--primary-tint); border-color: var(--primary) }

/* ---------- Navigation ---------- */
.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    box-shadow: 0 8px 30px rgba(31, 35, 70, .04);
    border-bottom: 1px solid transparent;
    transition: .25s
}
.nav:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.nav.scrolled { border-color: var(--border) }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between }
.logo { display: flex; align-items: center; gap: 11px; font: 800 1.22rem var(--font-head) }
.logo img { width: 100%; height: 32px }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: .92rem; color: var(--text-soft) }
.nav-links a:hover, .nav-links a.active { color: var(--primary) }
.nav-actions { display: flex; align-items: center; gap: 12px }
.menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink)
}
.menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px auto }


/* ---------- Channels dropdown ---------- */
.has-sub { position: relative }
.has-sub > a { display: inline-flex; align-items: center; gap: 6px }
.caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: .2s }
.submenu {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 240px;
    margin-top: 14px;
    padding: 10px;
    display: grid;
    gap: 2px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s ease
}
.submenu:before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px }
.submenu a { padding: 10px 14px; border-radius: 10px; white-space: nowrap; color: var(--text-soft) }
.submenu a:hover, .submenu a.active { background: var(--primary-soft); color: var(--primary) }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(225deg) translateY(-2px) }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 880px;
    padding: 150px 0 100px;
    background-color: var(--bg-hero);
    background-image:
        linear-gradient(var(--hero-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px),
        radial-gradient(circle at 18% 25%, var(--hero-glow-1), transparent 28%),
        radial-gradient(circle at 85% 20%, var(--hero-glow-2), transparent 30%);
    background-size: 32px 32px, 32px 32px, auto, auto
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 52px; text-align: center; position: relative; z-index: 1 }
.hero-copy { display: flex; flex-direction: column; align-items: center }
.hero .eyebrow { margin-bottom: 22px }
.hero h1 { max-width: 1000px }
.hero h1 span {
    background: linear-gradient(90deg, var(--primary-mid), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}
.hero-copy > p { font-size: 1.18rem; color: var(--muted); max-width: 780px; margin: 28px 0 34px }
.hero-actions, .trust-line { justify-content: center }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px }
.trust-line { display: flex; align-items: center; gap: 20px; margin-top: 32px; color: var(--muted-2); font-size: .88rem }
.avatars { display: flex }
.avatar {
    width: 30px;
    height: 30px;
    margin-left: -7px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: linear-gradient(135deg, #315375, #14283c);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: .65rem
}
.avatar:first-child { margin-left: 0 }
.hero-visual { width: min(820px, 100%); margin: auto; position: relative }

/* Platform (dashboard) card */
.platform-card {
    padding: 22px;
    text-align: left;
    color: var(--panel-text);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--panel-1), var(--panel-2));
    box-shadow: var(--shadow)
}
.platform-card strong { color: var(--panel-text) }
.dash-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 22px }
.dash-dots { display: flex; gap: 6px }
.dash-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-gray) }
.dash-dots i:first-child { background: var(--dot-red) }
.dash-dots i:last-child { background: var(--dot-green) }
.live { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--accent-text) }
.live:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(70, 215, 184, .1) }
.flow { display: grid; gap: 12px }
.channel-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .05)
}
.channel-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 103, 23, .15);
    color: #ff8c4c;
    display: grid;
    place-items: center
}
.channel-icon svg { width: 21px; height: 21px }
.channel-row strong { display: block; font: 700 .92rem var(--font-head) }
.channel-row small { color: #a9b4d0 }
.channel-row b { font-size: .75rem; color: var(--accent-text); background: rgba(70, 215, 184, .1); padding: 5px 9px; border-radius: 20px }
.insight { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px }
.mini-card { padding: 16px; border-radius: 16px; background: var(--panel-card); border: 1px solid rgba(255, 255, 255, .1) }
.mini-card span { font-size: .72rem; color: #a9b4d0 }
.mini-card strong { display: block; margin-top: 5px; font: 800 1.5rem var(--font-head) }
.wave { display: flex; align-items: center; gap: 3px; height: 25px; margin-top: 8px }
.wave i { width: 3px; border-radius: 4px; background: var(--accent); animation: wave 1.2s ease-in-out infinite }
.wave i:nth-child(2n) { animation-delay: .18s }
.wave i:nth-child(3n) { animation-delay: .34s }
@keyframes wave { 0%, 100% { height: 5px } 50% { height: 22px } }

/* ---------- Logo strip ---------- */
.logo-strip { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.logo-strip .container { padding: 25px 0; display: flex; justify-content: space-between; align-items: center; gap: 25px; flex-wrap: wrap }
.logo-strip span { color: var(--muted-2); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700 }
.industries-mini { display: flex; gap: 28px; flex-wrap: wrap; color: var(--text-soft); font: 600 .9rem var(--font-head) }

/* ---------- Soft gradient sections ---------- */
.channels, .integrations, .faq, .impact, footer { background: var(--bg-soft) }
.journey { background: var(--white) }

/* ---------- Feature cards ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px }
.feature-card {
    grid-column: span 4;
    min-height: 292px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: .25s
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: #c9c1ff }
.feature-card.wide { grid-column: span 6; min-height: 250px }
.feature-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 30px;
    border-radius: 15px;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid;
    place-items: center
}
.feature-icon svg { width: 25px; height: 25px }
.feature-card p { color: var(--muted); margin-top: 12px }
.feature-card a { margin-top: auto; padding-top: 25px; color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 7px }
.feature-card a span { transition: .2s }
.feature-card a:hover span { transform: translateX(4px) }

/* ---------- Journey / steps ---------- */
.journey-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start }
.sticky { position: sticky; top: 125px }
.sticky p { color: var(--muted); margin: 22px 0 28px }
.steps { position: relative }
.steps:before { content: ""; position: absolute; left: 25px; top: 45px; bottom: 45px; width: 1px; background: linear-gradient(var(--primary-tint), var(--primary)) }
.step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 24px 0 }
.step-no {
    width: 52px;
    height: 52px;
    z-index: 1;
    border-radius: 50%;
    background: var(--primary-tint);
    border: 1px solid var(--primary-mid);
    color: var(--primary);
    display: grid;
    place-items: center;
    font: 700 .86rem var(--font-head)
}
.step h3 { margin: 5px 0 10px }
.step p { color: var(--muted) }

/* ---------- Impact metrics ---------- */
.impact { padding: 70px 0; color: var(--black) }
.impact-grid { display: grid; grid-template-columns: 1.25fr repeat(3, .65fr); gap: 28px; align-items: center }
.impact h2 { font-size: clamp(2rem, 3.3vw, 3rem) }
.metric { border-left: 1px solid var(--line); padding-left: 28px }
.metric strong { display: block; font: 800 clamp(2rem, 4vw, 3.2rem) var(--font-head); letter-spacing: -.05em }
.metric span { font-size: .9rem; font-weight: 600; opacity: .7 }

/* ---------- Industries ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px }
.industry {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(35, 39, 76, .045)
}
.industry > span { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center }
.industry svg { width: 26px }
.industry p { color: var(--muted); margin-top: 9px }

/* ---------- Integrations ---------- */
.integration-wrap {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
    padding: 55px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg)
}
.integration-wrap p { color: var(--muted); margin: 20px 0 28px }
.orbit { height: 360px; position: relative; display: grid; place-items: center }
.orbit:before, .orbit:after { content: ""; position: absolute; border: 1px solid #d7e4e7; border-radius: 50% }
.orbit:before { width: 310px; height: 310px }
.orbit:after { width: 205px; height: 205px }
.orbit-core {
    width: 100px;
    height: 100px;
    z-index: 2;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--primary-tint), var(--primary));
    color: var(--white);
    display: grid;
    place-items: center;
    font: 800 1.8rem var(--font-head);
    box-shadow: 0 15px 45px rgba(7, 19, 33, .22)
}
.app {
    position: absolute;
    z-index: 3;
    width: 54px;
    height: 54px;
    background: var(--white);
    border: 1px solid #dce6eb;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font: 800 .72rem var(--font-head);
    box-shadow: 0 10px 25px rgba(24, 54, 73, .1)
}
.app.a { top: 8px; left: calc(50% - 27px) }
.app.b { right: 20px; top: 94px }
.app.c { right: 43px; bottom: 35px }
.app.d { left: 43px; bottom: 35px }
.app.e { left: 20px; top: 94px }
.app.f { left: calc(50% - 27px); bottom: 74px; background: var(--primary-soft); color: var(--primary) }

/* ---------- Security ---------- */
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center }
.security-panel { padding: 34px; border-radius: 28px; color: var(--panel-text); background: linear-gradient(145deg, var(--panel-1), var(--panel-2)); border: 1px solid var(--line) }
.shield {
    width: 78px;
    height: 88px;
    margin: 5px auto 30px;
    clip-path: polygon(50% 0, 94% 17%, 85% 75%, 50% 100%, 15% 75%, 6% 17%);
    background: var(--primary);
    color: var(--white);
    display: grid;
    place-items: center
}
.shield svg { width: 34px }
.security-list { display: grid; gap: 10px }
.security-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; background: rgba(255, 255, 255, .06); border-radius: 13px }
.security-item svg, .check svg { width: 18px; color: #ff7a33; flex: 0 0 auto }
.security-copy p { margin: 22px 0 28px; color: var(--muted) }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.check { display: flex; gap: 9px; align-items: center; color: var(--text-soft); font-size: .92rem }

/* ---------- Certifications / ISO ---------- */
.iso-seal {
    position: relative;
    width: 34px;
    height: 34px;
    border: 2px solid var(--primary-mid);
    border-radius: 50%;
    color: var(--primary);
    display: grid;
    place-items: center;
    font: 800 .7rem var(--font-head)
}
.iso-seal:after {
    content: "✓";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background: #5d4aea;
    color: var(--white);
    font-size: .55rem;
    display: grid;
    place-items: center
}
.cert-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px }
.security-copy .cert-row { grid-template-columns: 1fr }
.security-copy .cert { max-width: 390px }
.cert { display: flex; align-items: center; gap: 11px; padding: 15px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 25px rgba(35, 39, 76, .04) }
.cert strong { font-size: .8rem }
.cert small { display: block; color: var(--muted); font-size: .69rem }
.iso-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px }
.iso-badge { display: flex; align-items: center; gap: 9px; min-width: 138px; padding: 9px 11px; background: var(--white); border: 1px solid var(--border); border-radius: 12px }
.iso-badge strong { display: block; font-size: .72rem }
.iso-badge small { display: block; color: var(--muted); font-size: .64rem; line-height: 1.2 }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px }
.faq-intro p { color: var(--muted); margin-top: 20px }
.faq-item { border-bottom: 1px solid var(--border) }
.faq-q { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; border: 0; background: none; color: var(--text); text-align: left; font: 700 1.03rem var(--font-head) }
.faq-q i { position: relative; flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--primary-soft) }
.faq-q i:before, .faq-q i:after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 1px; background: var(--primary) }
.faq-q i:after { transform: rotate(90deg); transition: .2s }
.faq-item.open .faq-q i:after { transform: rotate(0) }
.faq-a { max-height: 0; overflow: hidden; color: var(--muted); transition: max-height .3s ease }
.faq-a p { padding: 0 38px 22px 0 }

/* ---------- Contact section ---------- */
.contact-us { padding: var(--section-y) 0; background: var(--white) }
.contact-us-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start }
.contact-us-copy p { max-width: 560px; margin: 20px 0 28px; color: var(--muted) }
.contact-us-points { display: grid; gap: 12px }
.contact-us-point { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: .95rem }
.contact-us-point .feature-icon { margin-bottom: 0 }
.contact-us-form { padding: 34px; background: var(--white); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-form) }
.contact-us-form h3 { margin-bottom: 6px }
.contact-us-form .form-sub { color: var(--muted); font-size: .92rem; margin-bottom: 22px }

/* ---------- Forms ---------- */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px }
.form-row label { font-size: .85rem; color: var(--text-soft) }
.form-row label em { color: var(--primary); font-style: normal }
.form-row input, .form-row textarea { width: 100%; padding: 11px 13px; background: var(--white); border: 1px solid var(--border-input); border-radius: 10px; color: var(--text); resize: vertical }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--primary-mid) }
.form-row ::placeholder { color: #98a2b3 }
#contactForm .btn, #demoForm .btn { width: 100%; margin-top: 4px; border: 0 }
.contact-form-status, .form-status { min-height: 20px; font-size: .85rem; margin: 4px 0 12px }
.contact-form-status.error { color: var(--error) }
.contact-form-status.success { color: var(--success) }

/* ---------- CTA ---------- */
.cta { padding: 90px 0 }
.cta-box { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; padding: 70px; border-radius: 32px; background: linear-gradient(145deg, var(--panel-1), var(--panel-2)) }
.cta-box h2 { max-width: 760px; color: var(--panel-text) }
.cta-box .eyebrow { color: var(--panel-text) }
.cta-box .eyebrow:before { background: var(--primary) }
.cta-box p { margin-top: 18px; font-size: 1.08rem; color: var(--panel-muted) }
.cta-box .btn { position: relative; z-index: 2 }

/* ---------- Demo modal (dark) ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--overlay); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s ease }
.modal-overlay.open { opacity: 1; visibility: visible }
.modal-box { position: relative; width: 100%; max-width: 500px; max-height: 100%; overflow: auto; padding: 40px 34px; background: var(--modal-bg); border: 1px solid rgba(var(--primary-rgb), .5); border-radius: 24px; transform: translateY(16px) scale(.98); transition: transform .25s ease }
.modal-overlay.open .modal-box { transform: none }
.modal-box h3 { margin: 10px 0 6px; color: var(--white); font-size: 1.5rem }
.modal-box .eyebrow { color: var(--primary-mid) }
.modal-sub { color: #a9bdcf; font-size: .95rem; margin-bottom: 22px }
.modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: var(--white); font-size: 1.3rem; line-height: 1 }
.modal-close:hover { background: rgba(255, 255, 255, .12) }
.modal-box .form-row label { color: #cdd7e1 }
.modal-box .form-row label em { color: var(--success-on-dark) }
.modal-box .form-row input, .modal-box .form-row textarea { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: var(--white) }
.modal-box .form-row input:focus, .modal-box .form-row textarea:focus { border-color: var(--success-on-dark) }
.modal-box .form-row ::placeholder { color: #7c8ea0 }
.form-status.error { color: var(--error-on-dark) }
.form-status.success { color: var(--success-on-dark) }

/* ---------- Footer ---------- */
footer { padding: 55px 0 25px; color: var(--text) }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, .7fr); gap: 60px }
.footer-brand p { max-width: 340px; margin-top: 18px; color: var(--muted) }
.footer-brand .logo > img { width: 50%; height: 50px }
.footer-col h3 { font-size: .9rem; margin-bottom: 16px }
.footer-col a { display: block; padding: 5px 0; color: var(--muted); font-size: .9rem }
.footer-col a:hover { color: var(--primary) }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 45px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem }

/* ---------- Sub-page extras (same theme, reused components) ---------- */
.breadcrumb { display: flex; gap: 8px; margin-bottom: 20px; font-size: .85rem; color: var(--muted) }
.breadcrumb a:hover { color: var(--primary) }
.feature-card.no-link { min-height: 240px }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .nav-links { display: none }
    .nav-actions .btn-ghost { display: none }
    .menu-btn { display: block }
    .nav-links.open { display: flex; position: fixed; inset: var(--nav-h) 0 0; z-index: 60; padding: 20px 22px 40px; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); font-size: 1.15rem; overflow-y: auto; -webkit-overflow-scrolling: touch }
    .nav-links > a, .has-sub > a { padding: 14px 0; border-bottom: 1px solid var(--border) }
    .has-sub > a { display: flex }
    .has-sub .submenu { padding-bottom: 6px; border-bottom: 1px solid var(--border) }
    .nav-actions .btn-ghost { display: none }
    .caret { display: none }
    .submenu { position: static; border-radius: 0; min-width: 0; margin: 6px 0 0; padding: 0 0 0 14px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: transparent }
    .submenu:before { display: none }
    .submenu a { font-size: 1.05rem; padding: 6px 0 }
    .hero { min-height: auto }
    .section-head, .journey-grid, .integration-wrap, .security-grid, .faq-wrap, .contact-us-wrap { grid-template-columns: 1fr }
    .hero-grid { gap: 55px }
    .platform-card { max-width: 620px; margin: auto }
    .section-head { gap: 20px }
    .feature-card, .feature-card.wide { grid-column: span 6 }
    .sticky { position: static }
    .impact-grid { grid-template-columns: 1fr 1fr }
    .impact-grid h2 { grid-column: 1 / -1 }
    .metric { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0 }
    .integration-wrap, .faq-wrap { gap: 35px }
    .contact-us-wrap { gap: 40px }
    .cta-box { grid-template-columns: 1fr; padding: 50px }
    .footer-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 640px) {
    :root { --nav-h: 70px; --section-y: 78px }
    .container { width: min(calc(100% - 28px), var(--max)) }
    .nav-actions > .btn { display: none }
    .hero { padding: 125px 0 75px }
    .hero-grid { gap: 38px }
    .hero-copy > p { font-size: 1.05rem }
    .trust-line { align-items: flex-start }
    .platform-card { padding: 14px; border-radius: 22px }
    .channel-row { grid-template-columns: 40px 1fr }
    .channel-row > b { display: none }
    .insight, .checks, .cert-row, .impact-grid, .industry-grid { grid-template-columns: 1fr }
    .feature-card, .feature-card.wide { grid-column: span 12; min-height: 250px }
    .journey-grid { gap: 30px }
    .impact-grid h2 { grid-column: auto }
    .industry { grid-template-columns: 47px 1fr; padding: 23px }
    .industry > span { width: 47px; height: 47px }
    .integration-wrap { padding: 30px 20px }
    .orbit { height: 300px; transform: scale(.88) }
    .contact-us-form { padding: 24px 20px }
    .modal-box { padding: 32px 22px }
    .cta { padding: 70px 0 }
    .cta-box { padding: 38px 25px }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px }
    .footer-brand { grid-column: 1 / -1 }
    .footer-bottom { flex-direction: column }
    .logo-strip .container, .industries-mini { justify-content: center; text-align: center }
    .iso-badge { min-width: 0; flex: 1 1 145px }
}

@media (max-width: 400px) {
    h1 { font-size: 2.35rem }
    h2 { font-size: 1.85rem }
    .btn { padding: 13px 18px }
    .hero-actions { width: 100% }
    .hero-actions .btn { flex: 1 1 100% }
    .trust-line { flex-direction: column; align-items: center; gap: 10px; text-align: center }
    .cta-box .btn, .cta-actions .btn { width: 100% }
    .modal-overlay { padding: 12px }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    .reveal { opacity: 1; transform: none; transition: none }
    .wave i { animation: none; height: 12px }
    .btn, .feature-card { transition: none }
}