:root {
    --header-height: 108px;
    --ink: #13201b;
    --muted: #61706a;
    --soft: #f5f8f6;
    --line: #dce7e1;
    --green: #17633f;
    --green-2: #0f3f2a;
    --mint: #dff5e9;
    --gold: #c99a2e;
    --gold-soft: #fff4d8;
    --blue: #2563eb;
    --white: #fff;
    --shadow: 0 20px 60px rgba(19, 32, 27, .12);
    --shadow-sm: 0 10px 28px rgba(19, 32, 27, .08);
    --radius: 8px;
    --radius-lg: 16px;
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}
body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
    padding-top: var(--header-height);
}
body.lightbox-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.container { width: min(1680px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(220,231,225,.72);
    backdrop-filter: blur(22px);
    transition: box-shadow .26s ease, background .26s ease, transform .26s ease;
}
.site-header.is-scrolled {
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(19,32,27,.1);
}
.header-top {
    background:
        linear-gradient(90deg, #0c1d16, #123525 55%, #0c1d16);
    color: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.header-top-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.top-contact, .top-social {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .76rem;
    font-weight: 750;
}
.top-contact a, .top-contact span, .top-social a, .top-social span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.top-contact i { color: var(--gold); }
.top-social span { color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 900; }
.top-social a {
    width: 24px;
    height: 24px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: var(--white);
}
.top-social a:hover { background: var(--gold); color: var(--ink); transform: translateY(-1px); }
.header-inner {
    min-height: 74px;
    display: grid;
    grid-template-columns: auto minmax(420px, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 3vw, 34px);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
}
.brand-logo { height: 52px; width: auto; max-width: min(260px, 28vw); object-fit: contain; }
.brand-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--green);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.main-nav {
    justify-self: center;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 6px;
    border: 1px solid rgba(23,99,63,.1);
    border-radius: 999px;
    background: rgba(245,248,246,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 999px;
    color: #41504a;
    font-weight: 850;
    font-size: .86rem;
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.main-nav a i { color: var(--green); font-size: .82rem; opacity: .82; }
.main-nav a:hover, .main-nav a.active {
    color: var(--green);
    background: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(19,32,27,.08);
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active i { opacity: 1; }
.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid rgba(23,99,63,.1);
    border-radius: 999px;
    background: rgba(245,248,246,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.link-action { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--muted); font-weight: 800; }
.connect-btn { background: #10231b; color: var(--white); border-color: #10231b; box-shadow: 0 12px 26px rgba(16,35,27,.14); }
.call-sales-btn {
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--white);
    color: var(--green);
    border-color: rgba(23,99,63,.14);
    box-shadow: 0 10px 22px rgba(19,32,27,.08);
}
.call-sales-btn i {
    color: var(--gold);
}
.demo-btn {
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--green), #1d784c);
    box-shadow: 0 14px 30px rgba(23,99,63,.22);
}
.call-sales-btn:hover,
.demo-btn:hover {
    transform: translateY(-2px);
}
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid rgba(23,99,63,.14); border-radius: 14px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--green); color: var(--white); box-shadow: 0 10px 24px rgba(23,99,63,.22); }
.btn-primary:hover { background: var(--green-2); }
.btn-secondary { background: var(--ink); color: var(--white); }
.btn-outline { border-color: var(--line); background: var(--white); color: var(--green); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-glass { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.12); color: var(--white); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255,255,255,.22); }
.btn-full { width: 100%; }

.hero {
    min-height: calc(100vh - 116px);
    display: grid;
    align-items: center;
    padding: 66px 0 42px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 24% 30%, rgba(201,154,46,.22), transparent 24%),
        radial-gradient(circle at 24% 30%, rgba(201,154,46,.22), transparent 24%),
        linear-gradient(90deg, rgba(9,23,17,.94) 0 42%, rgba(9,23,17,.72) 62%, rgba(9,23,17,.12) 100%),
        linear-gradient(180deg, rgba(9,23,17,.12), rgba(9,23,17,.7));
}
.hero::after {
    content: "";
    position: absolute;
    inset: 24px 24px auto auto;
    width: min(38vw, 560px);
    height: min(38vw, 560px);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: radial-gradient(circle, rgba(255,255,255,.13), transparent 60%);
    z-index: -1;
    animation: orbitPulse 6s ease-in-out infinite;
}
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .75s ease, transform 4.5s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-grid { display: block; max-width: 1680px; }
.hero-copy { max-width: 930px; animation: heroTextIn .85s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.14); color: var(--white); font-size: .78rem; font-weight: 800; backdrop-filter: blur(12px); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #13b981; box-shadow: 0 0 0 6px rgba(19,185,129,.14); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { color: var(--white); font-size: clamp(3rem, 5.2vw, 5.9rem); line-height: .98; letter-spacing: 0; margin: 18px 0 22px; text-wrap: balance; }
.page-hero h1 { font-size: clamp(3.1rem, 5.7vw, 6.25rem); line-height: .96; letter-spacing: 0; margin: 18px 0 20px; }
.lead { font-size: clamp(1.03rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 680px; }
.hero .lead { color: rgba(255,255,255,.82); max-width: 760px; font-size: clamp(1.05rem, 1.35vw, 1.25rem); }
.hero-lead-mobile { display: none; }
.hero-actions, .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 820px;
    margin-top: 26px;
}
.hero-insight {
    min-height: 86px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    color: var(--white);
    backdrop-filter: blur(14px);
    animation: heroCardsIn .7s cubic-bezier(.2,.8,.2,1) both;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-insight:nth-child(1) { animation-delay: .18s; }
.hero-insight:nth-child(2) { animation-delay: .28s; }
.hero-insight:nth-child(3) { animation-delay: .38s; }
.hero-insight i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(201,154,46,.22);
    color: var(--gold);
    margin-bottom: 10px;
}
.hero-insight span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.56);
    font-weight: 900;
}
.hero-insight strong {
    display: block;
    font-size: .9rem;
    line-height: 1.25;
}
.hero-insight.active {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.3);
}
.hero-insight:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.2);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 34px; max-width: 820px; }
.proof-card { padding: 17px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); box-shadow: none; backdrop-filter: blur(14px); }
.proof-card { animation: heroCardsIn .7s cubic-bezier(.2,.8,.2,1) both; transition: transform .25s ease, background .25s ease; }
.proof-card:nth-child(1) { animation-delay: .42s; }
.proof-card:nth-child(2) { animation-delay: .5s; }
.proof-card:nth-child(3) { animation-delay: .58s; }
.proof-card:nth-child(4) { animation-delay: .66s; }
.proof-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.18); }
.proof-card strong { display: block; font-size: 1.45rem; line-height: 1; color: var(--white); }
.proof-card span { color: rgba(255,255,255,.72); font-size: .77rem; font-weight: 700; }

.dashboard {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.85);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.dash-top { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #f0f5f2; border-bottom: 1px solid var(--line); }
.dash-dots { display: flex; gap: 7px; }
.dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: #91a39a; }
.dash-dots span:nth-child(1) { background: #ef4444; }
.dash-dots span:nth-child(2) { background: #f59e0b; }
.dash-dots span:nth-child(3) { background: #10b981; }
.dash-top small { font-weight: 800; color: var(--muted); }
.dash-body { padding: 18px; display: grid; gap: 14px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-kpi { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.dash-kpi strong { display: block; font-size: 1.4rem; color: var(--green); }
.calendar { display: grid; grid-template-columns: 74px repeat(5, 1fr); gap: 7px; font-size: .74rem; }
.calendar span { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); padding: 7px; font-weight: 700; color: var(--muted); }
.calendar .booked { background: var(--mint); color: var(--green); }
.calendar .hold { background: var(--gold-soft); color: #94680f; }
.guest-list { display: grid; gap: 8px; }
.guest-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-weight: 700; }
.status { padding: 4px 8px; border-radius: 999px; background: var(--mint); color: var(--green); font-size: .72rem; }
.hero-carousel-controls {
    position: absolute;
    right: max(20px, calc((100vw - 1680px) / 2 + 20px));
    bottom: 34px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: rgba(12,30,22,.58);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    overflow: hidden;
}
.hero-carousel-controls button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: var(--white);
    cursor: pointer;
}
.hero-carousel-controls button:hover { background: var(--white); color: var(--green); }
.hero-dots { display: inline-flex; gap: 7px; align-items: center; }
.hero-dots button {
    width: 9px;
    height: 9px;
    min-width: 9px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.42);
}
.hero-dots button.active { width: 28px; background: var(--white); }
.hero-progress {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
}
.hero-progress.running { animation: heroProgress 5.2s linear both; }
.hero-orbit {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    z-index: -1;
}
.hero-orbit-one {
    width: min(42vw, 640px);
    height: min(42vw, 640px);
    right: 2vw;
    top: 10%;
    animation: orbitSpin 18s linear infinite;
}
.hero-orbit-two {
    width: 260px;
    height: 260px;
    right: 23vw;
    bottom: 12%;
    border-color: rgba(201,154,46,.22);
    animation: orbitSpin 12s linear infinite reverse;
}
.hero-cursor-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(201,154,46,.18), transparent 64%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
}
.hero:hover .hero-cursor-glow { opacity: 1; }
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(9px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1), filter .85s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.reveal-rise { transform: translateY(46px) scale(.985); }
.reveal-on-scroll.reveal-slide-left { transform: translateX(-56px) rotateY(-5deg); }
.reveal-on-scroll.reveal-slide-right { transform: translateX(56px) rotateY(5deg); }
.reveal-on-scroll.reveal-zoom { transform: translateY(26px) scale(.9); }
.reveal-on-scroll.reveal-pop { transform: translateY(38px) rotateX(10deg) scale(.92); transform-origin: center bottom; }
.reveal-on-scroll.reveal-unfold { clip-path: inset(18% 0 18% 0 round 20px); transform: translateY(36px) scale(.98); }
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 0);
}

@keyframes heroTextIn {
    from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroCardsIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes floatPanelIn {
    from { opacity: 0; transform: translateY(-28%) translateX(24px) scale(.96); }
    to { opacity: 1; transform: translateY(-38%) translateX(0) scale(1); }
}
@keyframes softFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -12px; }
}
@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes orbitPulse {
    0%, 100% { opacity: .7; transform: scale(1); }
    50% { opacity: .35; transform: scale(1.05); }
}
@keyframes heroProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.section { padding: 88px 0; }
.section-soft { background: var(--soft); }
.insight-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 20%, rgba(201,154,46,.18), transparent 26%),
        radial-gradient(circle at 92% 6%, rgba(37,99,235,.12), transparent 28%),
        linear-gradient(180deg, #f7faf8 0%, #eaf2ee 100%);
}
.insight-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(23,99,63,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(23,99,63,.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}
.insight-section .container { position: relative; z-index: 1; }
.insight-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr);
    gap: 44px;
    align-items: end;
    margin-bottom: 30px;
}
.insight-head h2 {
    font-size: clamp(2.4rem, 4.5vw, 4.7rem);
    line-height: .98;
    max-width: 900px;
}
.insight-head p {
    color: var(--muted);
    font-size: 1.08rem;
    margin-bottom: 8px;
}
.ops-board {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .82fr);
    gap: 16px;
}
.ops-main-panel,
.ops-card,
.ops-sync-strip {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23,99,63,.14);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(19,32,27,.1);
    backdrop-filter: blur(18px);
}
.ops-main-panel {
    min-height: 620px;
    padding: clamp(26px, 3vw, 46px);
    color: var(--white);
    background:
        linear-gradient(145deg, rgba(13,25,20,.94), rgba(23,99,63,.86)),
        url("https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?auto=format&fit=crop&w=1200&q=80") center/cover;
    isolation: isolate;
}
.ops-main-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 78% 12%, rgba(201,154,46,.28), transparent 28%),
        linear-gradient(180deg, rgba(13,25,20,.15), rgba(13,25,20,.82));
}
.ops-panel-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 38px;
    color: rgba(255,255,255,.72);
    font-weight: 800;
}
.ops-panel-top span { display: inline-flex; align-items: center; gap: 8px; }
.ops-panel-top i { color: #34d399; }
.ops-main-panel h3 {
    max-width: 760px;
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    line-height: .98;
    margin-bottom: 18px;
}
.ops-main-panel p {
    max-width: 700px;
    color: rgba(255,255,255,.72);
    font-size: 1.05rem;
}
.ops-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 34px;
}
.ops-metrics div {
    min-height: 132px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(255,255,255,.1);
    transition: transform .25s ease, background .25s ease;
}
.ops-metrics div:hover { transform: translateY(-6px); background: rgba(255,255,255,.16); }
.ops-metrics div.reveal-on-scroll {
    transform: translateY(34px) scale(.9) rotateX(10deg);
}
.ops-metrics div.reveal-on-scroll.is-visible {
    transform: translateY(0) scale(1) rotateX(0);
}
.ops-metrics span,
.ops-metrics small {
    display: block;
    color: rgba(255,255,255,.58);
    font-weight: 800;
    font-size: .75rem;
}
.ops-metrics strong {
    display: block;
    margin: 16px 0 8px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
}
.ops-timeline {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}
.ops-timeline div {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.09);
}
.ops-timeline div.reveal-on-scroll {
    transform: translateX(42px);
}
.ops-timeline div.reveal-on-scroll.is-visible {
    transform: translateX(0);
}
.ops-timeline div.is-visible:nth-child(1) i,
.ops-timeline div.is-visible:nth-child(2) i,
.ops-timeline div.is-visible:nth-child(3) i {
    animation: timelinePing 2.6s ease-in-out infinite;
}
.ops-timeline i { color: #34d399; }
.ops-timeline span { color: rgba(255,255,255,.78); font-weight: 750; }
.ops-timeline em { color: rgba(255,255,255,.48); font-style: normal; font-size: .78rem; }
.ops-side-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ops-card {
    min-height: 252px;
    padding: 24px;
    background: rgba(255,255,255,.78);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ops-card.reveal-on-scroll {
    transform: translateY(32px) scale(.92);
}
.ops-card.reveal-on-scroll.is-visible {
    transform: translateY(0) scale(1);
}
.ops-card:hover {
    transform: translateY(-7px);
    border-color: rgba(23,99,63,.3);
    box-shadow: 0 36px 90px rgba(19,32,27,.16);
}
.ops-card i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--mint);
    color: var(--green);
    margin-bottom: 20px;
}
.ops-card h3 { font-size: 1.2rem; line-height: 1.18; margin-bottom: 10px; }
.ops-card p { color: var(--muted); margin-bottom: 0; }
.ops-side-grid .ops-card:last-child {
    grid-column: span 2;
}
.ops-card-dark {
    grid-column: span 2;
    color: var(--white);
    background: linear-gradient(145deg, #10231b, #17633f);
}
.ops-card-dark p { color: rgba(255,255,255,.72); }
.ops-card-dark i { background: rgba(255,255,255,.14); color: var(--gold); }
.ops-card-gold { background: linear-gradient(145deg, rgba(255,244,216,.98), rgba(255,255,255,.8)); }
.ops-card-gold strong {
    display: inline-flex;
    margin-top: 18px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: #835d0f;
    font-size: .78rem;
}
.ops-progress {
    height: 10px;
    border-radius: 999px;
    background: #e6eee9;
    overflow: hidden;
    margin-top: 22px;
}
.ops-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), var(--gold), var(--blue));
    animation: progressPulse 2.6s ease-in-out infinite;
}
.ops-sync-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 22px 24px;
    background: rgba(255,255,255,.84);
}
.ops-sync-strip > div:first-child {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 4px 14px;
    align-items: center;
}
.ops-sync-strip > div:first-child i {
    grid-row: span 2;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--mint);
    color: var(--green);
}
.ops-sync-strip strong { font-size: 1.1rem; }
.ops-sync-strip span { color: var(--muted); }
.device-stack, .sync-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.device-stack span, .sync-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.86);
    font-weight: 850;
    font-size: .82rem;
}
.sync-list span {
    background: var(--mint);
    color: var(--green);
}
.mini-progress {
    height: 10px;
    border-radius: 999px;
    background: #e6eee9;
    overflow: hidden;
    margin-top: 22px;
}
.mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), var(--gold));
}
@keyframes progressPulse {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.6) brightness(1.08); }
}
.section-dark { background: #10231b; color: var(--white); }
.section-dark .lead, .section-dark p { color: rgba(255,255,255,.72); }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-kicker { color: var(--green); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 900; margin-bottom: 10px; }
.section-dark .section-kicker { color: var(--gold); }
.section h2, .page-section h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06; letter-spacing: 0; margin-bottom: 14px; }
.text-accent { color: var(--green); }
.section-dark .text-accent { color: var(--gold); }

.module-rail {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 20% 0%, rgba(201,154,46,.22), transparent 28%),
        linear-gradient(90deg, #0d1914, #143827 48%, #0d1914);
}
.module-rail::before,
.module-rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 140px;
    z-index: 2;
    pointer-events: none;
}
.module-rail::before { left: 0; background: linear-gradient(90deg, #0d1914, transparent); }
.module-rail::after { right: 0; background: linear-gradient(270deg, #0d1914, transparent); }
.module-rail-track {
    width: max-content;
    display: flex;
    gap: 14px;
    padding: 18px 0;
    animation: marquee 42s linear infinite;
}
.module-rail:hover .module-rail-track { animation-play-state: paused; }
.module-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 245px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    color: var(--white);
    overflow: hidden;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    transition: transform .28s ease, background .28s ease, border-color .28s ease;
}
.module-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.18) 48%, transparent 58% 100%);
    transform: translateX(-120%);
    transition: transform .65s ease;
}
.module-tile:hover {
    transform: translateY(-5px) scale(1.015);
    background: rgba(255,255,255,.14);
    border-color: rgba(201,154,46,.42);
}
.module-tile:hover::after { transform: translateX(120%); }
.module-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--gold), #f4d37b);
    color: #10231b;
    box-shadow: 0 10px 24px rgba(201,154,46,.24);
}
.module-copy { display: grid; gap: 2px; min-width: 0; }
.module-copy strong {
    font-size: .92rem;
    line-height: 1.1;
    white-space: nowrap;
}
.module-copy small {
    color: rgba(255,255,255,.62);
    font-size: .75rem;
    font-weight: 650;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.card i, .icon-box { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--mint); color: var(--green); margin-bottom: 18px; }
.card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.card p { color: var(--muted); margin-bottom: 0; }
.section-dark .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: none; }
.section-dark .card p { color: rgba(255,255,255,.68); }
.section-dark .card i { background: rgba(201,154,46,.16); color: var(--gold); }

.why-choice-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(255,244,216,.58), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(23,99,63,.12), transparent 26%),
        var(--soft);
}
.why-choice-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(23,99,63,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,99,63,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.why-choice-section .container {
    position: relative;
    z-index: 1;
}
.why-choice-grid {
    perspective: 1200px;
}
.why-choice-card {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    isolation: isolate;
    padding: 28px 24px 24px;
    border-color: rgba(23,99,63,.13);
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,251,248,.9)),
        var(--white);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1), filter .65s ease, box-shadow .32s ease, border-color .32s ease;
    transition-delay: var(--reveal-delay, var(--delay, 0ms));
}
.why-choice-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(220px circle at 82% 18%, rgba(201,154,46,.18), transparent 68%),
        linear-gradient(120deg, transparent 0 42%, rgba(223,245,233,.8) 100%);
    opacity: .7;
}
.why-choice-card::after {
    content: "";
    position: absolute;
    left: -24%;
    right: -24%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,154,46,.82), transparent);
    transform: translateX(-42%);
    animation: ticketScan 4.8s ease-in-out infinite;
}
.why-choice-card:hover {
    transform: translateY(-9px) rotateX(2deg);
    border-color: rgba(23,99,63,.34);
    box-shadow: 0 28px 76px rgba(19,32,27,.14);
}
.why-choice-card .card-main-icon {
    position: relative;
    z-index: 2;
    background: linear-gradient(145deg, var(--mint), #fff8e8);
    color: var(--green);
    box-shadow: 0 12px 24px rgba(23,99,63,.12);
    animation: serviceBounce 3.4s ease-in-out infinite;
}
.why-choice-card h3,
.why-choice-card p,
.restaurant-chip {
    position: relative;
    z-index: 2;
}
.why-choice-card p {
    padding-right: 72px;
}
.card-orbit {
    position: absolute;
    right: 20px;
    top: 18px;
    width: 62px;
    height: 62px;
    border: 1px dashed rgba(23,99,63,.2);
    border-radius: 50%;
    animation: cardOrbit 8s linear infinite;
}
.card-orbit i {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: 0;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--gold-soft);
    color: #8a620d;
    box-shadow: 0 10px 24px rgba(201,154,46,.18);
}
.order-ticket {
    position: absolute;
    right: 22px;
    bottom: 20px;
    display: grid;
    place-items: center;
    width: 54px;
    min-height: 58px;
    padding: 8px;
    border-radius: 7px;
    background:
        linear-gradient(135deg, #fff, #fff8e8);
    border: 1px solid rgba(201,154,46,.3);
    box-shadow: 0 14px 36px rgba(19,32,27,.09);
    transform: rotate(4deg);
    animation: ticketFloat 3.8s ease-in-out infinite;
}
.order-ticket::before,
.order-ticket::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--soft);
    border: 1px solid rgba(201,154,46,.18);
}
.order-ticket::before { left: -5px; }
.order-ticket::after { right: -5px; }
.order-ticket small {
    color: var(--green);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.order-ticket strong {
    color: #8a620d;
    font-size: 1rem;
    line-height: 1;
}
.restaurant-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(223,245,233,.72);
    color: var(--green);
    font-size: .74rem;
    font-weight: 900;
}
.restaurant-chip span,
.restaurant-chip i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--green);
    box-shadow: none;
}

@keyframes cardOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes ticketFloat {
    0%, 100% { transform: translateY(0) rotate(4deg); }
    50% { transform: translateY(-8px) rotate(-2deg); }
}
@keyframes serviceBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes ticketScan {
    0%, 72%, 100% { transform: translateX(-42%); opacity: 0; }
    18%, 44% { opacity: 1; }
    58% { transform: translateX(42%); opacity: 0; }
}

.tabs-shell { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
.tab-list { display: grid; gap: 9px; align-content: start; }
.tab-button { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: 14px; text-align: left; font-weight: 900; color: var(--ink); cursor: pointer; }
.tab-button span { display: block; color: var(--muted); font-weight: 600; font-size: .82rem; margin-top: 4px; }
.tab-button.active { border-color: rgba(23,99,63,.35); background: var(--mint); color: var(--green); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.product-panel { min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.panel-copy, .panel-visual { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.panel-copy ul, .check-list { padding: 0; margin: 18px 0 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.panel-copy li, .check-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-weight: 700; font-size: .9rem; }
.panel-copy li::before, .check-list li::before { content: "✓"; color: var(--green); font-weight: 900; }
.panel-visual { background: #10231b; color: var(--white); overflow: hidden; }
.mini-chart { height: 160px; display: flex; align-items: end; gap: 10px; padding-top: 30px; }
.mini-chart span { flex: 1; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--gold), var(--green)); min-height: 32px; }
.channel-tags, .pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-tags span, .pill-grid span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.8); font-weight: 800; font-size: .78rem; }

.journey-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 24%, rgba(201,154,46,.13), transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(23,99,63,.14), transparent 30%),
        linear-gradient(180deg, #fff 0%, #f4f8f6 100%);
}
.journey-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(23,99,63,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,99,63,.045) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.journey-section .container { position: relative; z-index: 1; }
.journey-head {
    max-width: 900px;
    display: block;
}
.journey-head h2 { max-width: 820px; }
.journey-head .lead { max-width: 760px; margin-bottom: 8px; }
.journey-shell {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}
.journey-steps {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(23,99,63,.12);
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 24px 70px rgba(19,32,27,.08);
    backdrop-filter: blur(18px);
}
.journey-steps::before {
    content: "";
    position: absolute;
    left: 50px;
    top: 38px;
    bottom: 38px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--green), var(--gold), var(--blue));
    opacity: .24;
}
.journey-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42px 46px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(23,99,63,.11);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    text-align: left;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.journey-step:hover {
    transform: translateX(5px);
    border-color: rgba(23,99,63,.26);
    box-shadow: 0 18px 44px rgba(19,32,27,.1);
}
.journey-step.active {
    background: linear-gradient(145deg, rgba(223,245,233,.98), rgba(255,255,255,.9));
    border-color: rgba(23,99,63,.34);
}
.journey-step.reveal-on-scroll {
    transform: translateX(-34px) scale(.96);
}
.journey-step.reveal-on-scroll.is-visible {
    transform: translateX(0) scale(1);
}
.journey-step.active::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 14px;
    border: 1px solid rgba(23,99,63,.16);
    animation: journeyStepPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
.step-index {
    color: rgba(23,99,63,.46);
    font-weight: 900;
    font-size: .8rem;
}
.step-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--mint);
    color: var(--green);
}
.journey-step.active .step-icon {
    background: linear-gradient(145deg, var(--green), var(--green-2));
    color: var(--white);
    box-shadow: 0 12px 28px rgba(23,99,63,.24);
}
.journey-step strong,
.journey-step small { display: block; }
.journey-step strong { font-size: .98rem; color: var(--ink); line-height: 1.15; }
.journey-step small { margin-top: 4px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.journey-panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, .78fr);
    gap: 18px;
    min-height: 438px;
}
.journey-copy,
.journey-visual {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(23,99,63,.13);
    box-shadow: 0 28px 84px rgba(19,32,27,.1);
}
.journey-copy {
    padding: clamp(26px, 3vw, 42px);
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(18px);
}
.journey-copy > span {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: #835d0f;
    font-size: .78rem;
    font-weight: 900;
}
.journey-copy h3 {
    font-size: clamp(1.8rem, 2.7vw, 3rem);
    line-height: 1.02;
    margin-bottom: 14px;
}
.journey-copy p {
    color: var(--muted);
    font-size: 1rem;
}
.journey-copy ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}
.journey-copy li {
    display: flex;
    gap: 9px;
    color: #40524a;
    font-size: .9rem;
    font-weight: 780;
}
.journey-copy li.reveal-on-scroll {
    transform: translateX(34px);
}
.journey-copy li.reveal-on-scroll.is-visible {
    transform: translateX(0);
}
.journey-copy li::before {
    content: "✓";
    color: var(--green);
    font-weight: 900;
}
.journey-visual {
    padding: 24px;
    color: var(--white);
    background:
        radial-gradient(circle at 82% 12%, rgba(201,154,46,.26), transparent 32%),
        linear-gradient(145deg, #10231b, #143827);
}
.journey-visual::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    pointer-events: none;
}
.journey-visual-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}
.journey-visual-top small {
    color: rgba(255,255,255,.66);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.journey-flow {
    display: grid;
    grid-template-columns: 1fr 70px 1fr 70px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.flow-node {
    min-height: 118px;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    text-align: center;
    transition: transform .25s ease, background .25s ease;
}
.flow-node:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); }
.flow-node.reveal-on-scroll {
    transform: translateY(28px) scale(.88);
}
.flow-node.reveal-on-scroll.is-visible {
    transform: translateY(0) scale(1);
}
.flow-node.is-visible i {
    animation: nodeGlow 3s ease-in-out infinite;
}
.flow-node i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(201,154,46,.2);
    color: var(--gold);
}
.flow-node span { font-weight: 900; }
.flow-line {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--gold));
    position: relative;
    overflow: hidden;
}
.flow-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    animation: flowPulse 2.2s linear infinite;
}
.flow-line.reveal-on-scroll {
    transform: scaleX(0);
    transform-origin: left;
    filter: none;
}
.flow-line.reveal-on-scroll.is-visible {
    transform: scaleX(1);
}
.journey-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.journey-stats div {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.09);
}
.journey-stats div.reveal-on-scroll {
    transform: translateY(26px) scale(.9);
}
.journey-stats div.reveal-on-scroll.is-visible {
    transform: translateY(0) scale(1);
}
.journey-stats span {
    display: block;
    color: rgba(255,255,255,.56);
    font-size: .72rem;
    font-weight: 900;
}
.journey-stats strong {
    display: block;
    margin-top: 8px;
    font-size: 1.6rem;
}
.journey-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.journey-pills span {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.72);
    font-size: .76rem;
    font-weight: 850;
}
.journey-pills span.reveal-on-scroll {
    transform: translateY(18px) scale(.9);
}
.journey-pills span.reveal-on-scroll.is-visible {
    transform: translateY(0) scale(1);
}
.tab-panel .journey-panel {
    animation: journeyIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes flowPulse {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@keyframes timelinePing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.22); }
    50% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
}
@keyframes journeyStepPulse {
    0%, 100% { opacity: .3; transform: scale(.98); }
    50% { opacity: .85; transform: scale(1); }
}
@keyframes nodeGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,154,46,.18); }
    50% { box-shadow: 0 0 0 10px rgba(201,154,46,0); }
}
@keyframes journeyIn {
    from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; }
.image-panel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 390px; }
.image-panel img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.impact-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 44px; }
.impact-stat {
    position: relative;
    padding: 26px 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
    animation: heroCardsIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.impact-stat:nth-child(1) { animation-delay: .1s; }
.impact-stat:nth-child(2) { animation-delay: .18s; }
.impact-stat:nth-child(3) { animation-delay: .26s; }
.impact-stat:nth-child(4) { animation-delay: .34s; }
.impact-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--x, 50%) var(--y, 50%), rgba(201,154,46,.24), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.impact-stat:hover { transform: translateY(-6px); border-color: rgba(201,154,46,.45); background: rgba(255,255,255,.09); }
.impact-stat:hover::before { opacity: 1; }
.impact-stat-icon { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(201,154,46,.16); color: var(--gold); font-size: 1.05rem; }
.impact-stat-value { position: relative; font-size: 2.3rem; font-weight: 900; line-height: 1; background: linear-gradient(120deg, #fff, var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.impact-stars { position: relative; margin-top: 9px; color: var(--gold); font-size: .78rem; letter-spacing: 3px; }
.impact-stat-label { position: relative; display: block; margin-top: 10px; color: rgba(255,255,255,.68); font-size: .82rem; font-weight: 700; }

.property-card { min-height: 230px; position: relative; overflow: hidden; border-radius: var(--radius); color: var(--white); padding: 20px; display: flex; align-items: end; isolation: isolate; }
.property-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.74)); z-index: -1; }
.property-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.property-card:hover img { transform: scale(1.05); }
.property-card h3 { margin-bottom: 4px; }
.property-card p { color: rgba(255,255,255,.75); margin-bottom: 0; }

.stats-section {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 12% 24%, rgba(201,154,46,.2), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(37,99,235,.13), transparent 30%),
        linear-gradient(145deg, #0b1b14, #113422 54%, #0b1b14);
}
.stats-section::before {
    content: "";
    position: absolute;
    inset: -20% -8% auto auto;
    width: min(46vw, 720px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 64%);
    animation: statsHalo 12s ease-in-out infinite;
}
.stats-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 84%, transparent);
}
.stats-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
}
.stats-copy h2 {
    max-width: 720px;
    color: var(--white);
    font-size: clamp(2.4rem, 4.8vw, 5rem);
    line-height: .98;
}
.stats-copy .lead {
    color: rgba(255,255,255,.68);
}
.stats-section .section-kicker {
    color: var(--gold);
}
.stats-showcase {
    margin: 0;
    align-items: stretch;
}
.stat-orb {
    min-height: 250px;
    padding: 24px;
    display: grid;
    align-content: center;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
        radial-gradient(circle at 78% 18%, rgba(201,154,46,.2), transparent 44%);
    box-shadow: 0 28px 80px rgba(0,0,0,.18);
    backdrop-filter: blur(18px);
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: opacity .65s ease, filter .65s ease, transform .28s ease, border-color .28s ease, background .28s ease;
}
.stat-orb::after {
    content: "";
    position: absolute;
    inset: auto 18px 18px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: statPulseLine 3.2s ease-in-out infinite;
}
.stat-tag {
    position: absolute;
    left: 18px;
    top: 18px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.1);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.stat-orb .impact-stat-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    background: linear-gradient(145deg, rgba(201,154,46,.28), rgba(255,255,255,.08));
    animation: serviceBounce 3.3s ease-in-out infinite;
}
.stat-orb .impact-stat-value {
    font-size: clamp(2.25rem, 4vw, 3.35rem);
}
.stat-orb:hover {
    border-color: rgba(201,154,46,.55);
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)),
        radial-gradient(circle at 78% 18%, rgba(201,154,46,.28), transparent 48%);
}

.property-showcase-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, #fff 0%, #f4f8f6 100%);
}
.property-showcase-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 10%, rgba(201,154,46,.16), transparent 26%),
        radial-gradient(circle at 88% 20%, rgba(23,99,63,.12), transparent 28%);
}
.property-showcase-section .container {
    position: relative;
    z-index: 1;
}
.property-showcase-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .55fr);
    gap: 36px;
    align-items: end;
    margin-bottom: 34px;
}
.property-showcase-head h2 {
    max-width: 860px;
}
.property-showcase-head .lead {
    margin-bottom: 8px;
}
.property-showcase-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}
.property-feature-card {
    min-height: 300px;
    grid-column: span 4;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 28px 80px rgba(19,32,27,.12);
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: opacity .65s ease, filter .65s ease, transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease;
}
.property-feature-card:nth-child(1),
.property-feature-card:nth-child(2) {
    grid-column: span 6;
    min-height: 340px;
}
.property-feature-card:nth-child(6),
.property-feature-card:nth-child(7) {
    grid-column: span 6;
    min-height: 320px;
}
.property-feature-card::before {
    background:
        linear-gradient(180deg, rgba(8,22,16,.04), rgba(8,22,16,.78)),
        radial-gradient(circle at 84% 18%, rgba(201,154,46,.3), transparent 32%);
}
.property-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.24) 48%, transparent 60% 100%);
    transform: translateX(-120%);
    transition: transform .8s ease;
}
.property-feature-card:hover {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-10px);
    box-shadow: 0 38px 100px rgba(19,32,27,.18);
}
.property-feature-card:hover::after {
    transform: translateX(120%);
}
.property-feature-card:hover img {
    transform: scale(1.08);
}
.property-feature-card > div {
    position: relative;
    z-index: 2;
    max-width: 560px;
}
.property-card-icon,
.property-card-tag {
    position: absolute;
    z-index: 2;
}
.property-card-icon {
    top: 18px;
    left: 18px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    color: var(--green);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    animation: serviceBounce 3.6s ease-in-out infinite;
}
.property-card-tag {
    top: 20px;
    right: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(12,30,22,.62);
    color: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    font-size: .72rem;
    font-weight: 900;
}
.property-feature-card h3 {
    font-size: clamp(1.25rem, 2vw, 1.9rem);
}
.stat-orb.reveal-on-scroll,
.property-feature-card.reveal-on-scroll,
.growth-visual.reveal-on-scroll {
    transform: translateY(30px) rotateX(8deg) scale(.94);
}
.stat-orb.reveal-on-scroll.is-visible {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.property-feature-card.reveal-on-scroll.is-visible {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.growth-visual.reveal-on-scroll.is-visible {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.feature-ui-panel.reveal-on-scroll.is-visible,
.origin-card.reveal-on-scroll.is-visible,
.partner-sync-board.reveal-on-scroll.is-visible,
.support-response-board.reveal-on-scroll.is-visible {
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.property-feature-card.reveal-on-scroll.is-visible:hover {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-10px);
}

@keyframes statsHalo {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
    50% { transform: translate3d(-5%, 6%, 0) scale(1.06); opacity: .38; }
}
@keyframes statPulseLine {
    0%, 100% { opacity: .22; transform: scaleX(.32); }
    50% { opacity: .95; transform: scaleX(1); }
}

.page-hero { padding: 92px 0 70px; background: linear-gradient(135deg, #10231b, #17633f); color: var(--white); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: auto -10% -35% 42%; height: 360px; background: rgba(201,154,46,.22); filter: blur(70px); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero p { max-width: 760px; color: rgba(255,255,255,.74); font-size: 1.14rem; }
.page-links { position: sticky; top: 108px; z-index: 20; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.page-links .container { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; }
.page-links a { white-space: nowrap; padding: 8px 12px; border-radius: 999px; background: var(--soft); color: var(--green); font-weight: 800; font-size: .84rem; }
.feature-detail-section { scroll-margin-top: 176px; }

.page-hero-feature,
.page-hero-about,
.page-hero-pricing,
.page-hero-partners,
.page-hero-support,
.page-hero-contact {
    isolation: isolate;
}
.page-hero-feature::before,
.page-hero-about::before,
.page-hero-pricing::before,
.page-hero-partners::before,
.page-hero-support::before,
.page-hero-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
}
.page-hero-insights {
    margin-top: 30px;
}
.page-hero-insights .hero-insight strong {
    font-weight: 400;
}

.feature-map-head,
.product-view-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .55fr);
    gap: 34px;
    align-items: end;
}
.feature-map-grid,
.included-grid,
.partner-grid,
.support-service-grid,
.module-choice-grid,
.why-cloud-grid {
    display: grid;
    gap: 16px;
}
.feature-map-grid { grid-template-columns: repeat(3, 1fr); }
.included-grid { grid-template-columns: repeat(4, 1fr); }
.partner-grid { grid-template-columns: repeat(4, 1fr); }
.support-service-grid { grid-template-columns: repeat(4, 1fr); }
.module-choice-grid { grid-template-columns: repeat(3, 1fr); }
.why-cloud-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.feature-map-card,
.included-card,
.partner-card,
.support-service-card,
.module-choice-card,
.why-cloud-card,
.partner-cta-card,
.contact-info-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 170px;
    padding: 22px;
    border: 1px solid rgba(23,99,63,.13);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(246,251,248,.92)),
        var(--white);
    box-shadow: 0 16px 42px rgba(19,32,27,.08);
    transition: opacity .65s ease, filter .65s ease, transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.feature-map-card::before,
.included-card::before,
.partner-card::before,
.support-service-card::before,
.module-choice-card::before,
.why-cloud-card::before,
.partner-cta-card::before,
.contact-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(180px circle at 86% 18%, rgba(201,154,46,.16), transparent 68%),
        linear-gradient(120deg, transparent 0 42%, rgba(223,245,233,.78) 100%);
    opacity: .72;
}
.feature-map-card::after,
.included-card::after,
.partner-card::after,
.support-service-card::after,
.module-choice-card::after,
.why-cloud-card::after,
.partner-cta-card::after,
.contact-info-card::after {
    content: "";
    position: absolute;
    left: -24%;
    right: -24%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,154,46,.82), transparent);
    transform: translateX(-42%);
    animation: ticketScan 5.2s ease-in-out infinite;
}
.feature-map-card:hover,
.included-card:hover,
.partner-card:hover,
.support-service-card:hover,
.module-choice-card:hover,
.why-cloud-card:hover,
.partner-cta-card:hover,
.contact-info-card:hover {
    transform: translateY(-9px) rotateX(2deg);
    border-color: rgba(23,99,63,.34);
    box-shadow: 0 28px 76px rgba(19,32,27,.14);
}
.feature-map-card i,
.included-card i,
.partner-card i,
.support-service-card i,
.module-choice-card i,
.why-cloud-card i,
.contact-info-card i {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--mint), #fff8e8);
    color: var(--green);
    margin-bottom: 18px;
    box-shadow: 0 12px 24px rgba(23,99,63,.12);
    animation: serviceBounce 3.6s ease-in-out infinite;
}
.feature-map-card strong,
.included-card strong {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.2;
}
.feature-map-card span {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 650;
}
.partner-card h3,
.support-service-card h3,
.module-choice-card h3,
.why-cloud-card h3,
.partner-cta-card h3,
.contact-info-card h3,
.partner-card p,
.support-service-card p,
.module-choice-card p,
.why-cloud-card p,
.partner-cta-card p,
.contact-info-card p,
.partner-cta-card .btn {
    position: relative;
    z-index: 2;
}

.feature-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr);
    gap: 22px;
    align-items: stretch;
}
.feature-detail.reverse {
    grid-template-columns: minmax(420px, .78fr) minmax(0, 1fr);
}
.feature-detail.reverse .feature-copy-panel { order: 2; }
.feature-detail.reverse .feature-ui-panel { order: 1; }
.feature-copy-panel,
.feature-ui-panel,
.origin-story,
.partner-sync-board,
.support-response-board,
.contact-form-card,
.contact-direct-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23,99,63,.13);
    border-radius: 24px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 28px 84px rgba(19,32,27,.1);
    backdrop-filter: blur(18px);
}
.feature-copy-panel {
    padding: clamp(26px, 3vw, 42px);
}
.feature-copy-panel h2 {
    font-size: clamp(1.9rem, 3vw, 3.3rem);
    line-height: 1;
}
.feature-copy-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}
.feature-copy-panel li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #40524a;
    font-size: .88rem;
    font-weight: 750;
}
.feature-copy-panel li::before,
.support-steps div::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(23,99,63,.1);
}
.feature-ui-panel {
    min-height: 440px;
    padding: 24px;
    color: var(--white);
    background:
        radial-gradient(circle at 82% 14%, rgba(201,154,46,.28), transparent 34%),
        linear-gradient(145deg, #10231b, #143827);
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: transform .32s ease;
}
.feature-ui-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255,255,255,.68);
    font-weight: 900;
}
.feature-ui-top span { display: inline-flex; align-items: center; gap: 8px; }
.feature-ui-top strong { color: #34d399; }
.feature-ui-screen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 52px;
}
.feature-ui-stat {
    min-height: 150px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.09);
}
.feature-ui-stat span {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: .76rem;
    font-weight: 900;
}
.feature-ui-stat strong {
    display: block;
    margin-top: 22px;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1;
}
.feature-ui-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 28px 0 18px;
}
.feature-ui-flow span {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.2));
    animation: progressPulse 2.8s ease-in-out infinite;
}

.origin-grid,
.partner-sync-grid,
.support-flow-grid,
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr);
    gap: 28px;
    align-items: stretch;
}
.origin-story { padding: clamp(28px, 4vw, 52px); }
.origin-card {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: var(--shadow);
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.origin-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.origin-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(13,25,20,.78));
}
.origin-card div {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(13,25,20,.72);
    color: var(--white);
    backdrop-filter: blur(16px);
}
.origin-card span,
.origin-card strong {
    display: block;
}
.origin-card span {
    color: var(--gold);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem;
}
.origin-card strong {
    margin-top: 8px;
    font-size: 1.35rem;
    line-height: 1.15;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.value-card {
    min-height: 260px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: rgba(255,255,255,.06);
}
.value-card i {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(201,154,46,.16);
    color: var(--gold);
    margin-bottom: 24px;
}
.value-card p { color: rgba(255,255,255,.68); }
.why-cloud-card { min-width: 0; }

.modern-price-card {
    border-radius: 24px;
    padding: 30px;
}
.modern-price-card.featured {
    transform: translateY(-14px);
    background:
        radial-gradient(circle at 82% 12%, rgba(201,154,46,.14), transparent 30%),
        var(--white);
}
.pricing-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(23,99,63,.12);
    border-radius: 16px;
    background: var(--soft);
    color: var(--muted);
    font-weight: 750;
}
.pricing-note i { color: var(--green); }
.module-choice-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
    border-color: rgba(255,255,255,.12);
    box-shadow: none;
    color: var(--white);
}
.module-choice-card::before {
    background:
        radial-gradient(180px circle at 86% 18%, rgba(201,154,46,.18), transparent 68%),
        linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.06) 100%);
}
.module-choice-card p { color: rgba(255,255,255,.68); }
.module-choice-card i {
    background: rgba(201,154,46,.16);
    color: var(--gold);
}

.partner-sync-grid,
.support-flow-grid {
    align-items: center;
}
.partner-sync-board,
.support-response-board {
    min-height: 360px;
    background: rgba(255,255,255,.08);
    color: var(--white);
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.partner-sync-board .dash-top,
.support-response-board .dash-top {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
}
.partner-sync-board .guest-item,
.support-response-board .guest-item {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
}
.partner-cta-card .btn { margin-top: 16px; }
.support-steps {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}
.support-steps div {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(23,99,63,.12);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.support-steps div::before { display: none; }
.support-steps span {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--mint);
    color: var(--green);
    font-weight: 900;
}

.contact-section {
    background:
        radial-gradient(circle at 12% 16%, rgba(201,154,46,.13), transparent 28%),
        linear-gradient(180deg, #f8fbf9, #eef5f1);
}
.contact-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .72fr);
}
.contact-form-card {
    padding: clamp(26px, 3vw, 42px);
}
.contact-form-card h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1;
}
.contact-side {
    display: grid;
    gap: 14px;
    align-content: start;
}
.contact-info-card {
    min-height: 0;
}
.contact-direct-card {
    padding: 24px;
    background: linear-gradient(145deg, #10231b, #17633f);
    color: var(--white);
}
.contact-direct-card a,
.contact-direct-card span {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: rgba(255,255,255,.76);
    font-weight: 800;
}
.contact-direct-card i { color: var(--gold); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.price-card.featured { border-color: rgba(23,99,63,.4); transform: translateY(-10px); box-shadow: var(--shadow); }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--gold-soft); color: #8a620d; font-weight: 900; font-size: .75rem; }
.price { font-size: 1.8rem; font-weight: 900; color: var(--green); margin: 14px 0 4px; }
.price-card ul { padding: 0; margin: 22px 0; list-style: none; display: grid; gap: 10px; color: var(--muted); font-weight: 700; }
.price-card li::before { content: "✓"; color: var(--green); margin-right: 8px; font-weight: 900; }

.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 20px; font-weight: 900; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--green); font-size: 1.25rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p, .faq-item div { padding: 0 20px 18px; color: var(--muted); margin: 0; }

.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: start; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: grid; gap: 7px; margin-bottom: 14px; }
.form-group label { color: var(--green); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; background: var(--soft); color: var(--ink); outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--green); background: var(--white); box-shadow: 0 0 0 4px rgba(23,99,63,.1); }
.info-stack { display: grid; gap: 14px; }

.growth-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(201,154,46,.14), transparent 26%),
        radial-gradient(circle at 88% 22%, rgba(23,99,63,.12), transparent 30%),
        linear-gradient(180deg, #f8fbf9 0%, #eef5f1 100%);
}
.growth-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(420px, 1fr);
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
}
.growth-copy {
    position: relative;
    padding: clamp(24px, 3vw, 44px);
    border-left: 3px solid rgba(201,154,46,.7);
}
.growth-copy h2 {
    max-width: 760px;
    font-size: clamp(2.3rem, 4.6vw, 4.8rem);
    line-height: .98;
}
.growth-copy .lead {
    max-width: 720px;
}
.growth-copy .check-list {
    margin-top: 30px;
    gap: 14px 24px;
}
.growth-copy .check-list li {
    min-height: 46px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(23,99,63,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 12px 32px rgba(19,32,27,.06);
}
.growth-visual {
    position: relative;
    min-height: 520px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.9);
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: opacity .85s ease, filter .85s ease, transform .32s ease;
}
.growth-visual img {
    min-height: 520px;
    transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.growth-visual:hover img {
    transform: scale(1.06);
}
.growth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 38%, rgba(11,27,20,.4)),
        radial-gradient(circle at 82% 16%, rgba(201,154,46,.22), transparent 30%);
}
.growth-dashboard {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 24px;
    width: min(260px, calc(100% - 48px));
    padding: 18px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    background: rgba(13,25,20,.68);
    color: var(--white);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 58px rgba(0,0,0,.18);
    animation: dashboardFloat 4.2s ease-in-out infinite;
}
.growth-dashboard span,
.growth-dashboard small {
    display: block;
    color: rgba(255,255,255,.68);
    font-weight: 850;
    font-size: .76rem;
}
.growth-dashboard strong {
    display: block;
    margin: 10px 0 4px;
    font-size: 2.4rem;
    line-height: 1;
}

.product-view-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f8f6 100%);
}
.product-view-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(23,99,63,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,99,63,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.product-view-section .container {
    position: relative;
    z-index: 1;
}
.product-view-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .56fr);
    gap: 36px;
    align-items: end;
}
.product-view-head h2 {
    max-width: 940px;
}
.product-view-head .lead {
    margin-bottom: 8px;
}
.product-screens-layout {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    align-items: stretch;
}
.screen-connections {
    position: absolute;
    inset: -28px -18px;
    width: calc(100% + 36px);
    height: calc(100% + 56px);
    pointer-events: none;
    z-index: 0;
    opacity: .62;
}
.screen-connections path {
    fill: none;
    stroke: rgba(201,154,46,.48);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 12 16;
    filter: drop-shadow(0 8px 18px rgba(201,154,46,.18));
    animation: connectionFlow 6s linear infinite;
}
.screen-connections path:nth-child(2) {
    stroke: rgba(23,99,63,.34);
    animation-duration: 7.4s;
    animation-direction: reverse;
}
.screen-connections path:nth-child(3) {
    stroke: rgba(37,99,235,.24);
    animation-duration: 8s;
}
.screen-card {
    position: relative;
    z-index: 1;
    min-height: 330px;
    display: grid;
    align-content: end;
    border-radius: 26px;
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: opacity .85s ease, filter .85s ease, transform .34s cubic-bezier(.16,1,.3,1);
}
.screen-card-1 {
    grid-column: span 7;
    grid-row: span 2;
    min-height: 620px;
}
.screen-card-2,
.screen-card-3 {
    grid-column: span 5;
    min-height: 300px;
}
.screen-card-4,
.screen-card-5,
.screen-card-6 {
    grid-column: span 4;
    min-height: 330px;
}
.screen-browser {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(23,99,63,.14);
    border-radius: inherit;
    background: #10231b;
    box-shadow: 0 32px 90px rgba(19,32,27,.16);
}
.screen-full-btn {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    background: rgba(13,25,20,.72);
    color: var(--white);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}
.screen-full-btn:hover {
    transform: translateY(-3px) scale(1.04);
    background: var(--gold);
    color: #10231b;
}
.screen-browser::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(8,18,14,.24)),
        linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.2) 49%, transparent 58% 100%);
    transform: translateX(-115%);
    transition: transform .9s ease;
}
.screen-card:hover .screen-browser::after {
    transform: translateX(115%);
}
.screen-browser img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    padding-top: 42px;
    background: #eff5f1;
    transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.screen-card:hover .screen-browser img {
    transform: scale(1.045);
}
.screen-topbar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    background: linear-gradient(180deg, #10231b, #132d22);
    color: rgba(255,255,255,.58);
}
.screen-topbar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.28);
}
.screen-topbar span:nth-child(1) { background: #ef4444; }
.screen-topbar span:nth-child(2) { background: #f59e0b; }
.screen-topbar span:nth-child(3) { background: #22c55e; }
.screen-topbar small {
    margin-left: 8px;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.screen-caption {
    position: relative;
    z-index: 3;
    width: min(88%, 420px);
    margin: auto 18px 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(13,25,20,.72);
    color: var(--white);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 46px rgba(0,0,0,.18);
}
.screen-caption strong,
.screen-caption span {
    display: block;
}
.screen-caption strong {
    font-size: 1rem;
    line-height: 1.15;
}
.screen-caption span {
    margin-top: 4px;
    color: rgba(255,255,255,.66);
    font-size: .82rem;
    font-weight: 750;
}
.screen-card.reveal-on-scroll {
    transform: translateY(38px) rotateX(10deg) scale(.93);
}
.screen-card.reveal-on-scroll.is-visible {
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.product-tour {
    position: relative;
}
.tour-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(23,99,63,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 18px 50px rgba(19,32,27,.07);
    backdrop-filter: blur(14px);
}
.tour-tab {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
    cursor: pointer;
    transition: transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
}
.tour-tab i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mint);
    color: var(--green);
}
.tour-tab:hover {
    transform: translateY(-2px);
    color: var(--green);
}
.tour-tab.active {
    color: var(--white);
    border-color: rgba(23,99,63,.34);
    background: linear-gradient(145deg, var(--green), var(--green-2));
    box-shadow: 0 16px 34px rgba(23,99,63,.22);
}
.tour-tab.active i {
    background: rgba(255,255,255,.14);
    color: var(--gold);
}
.tour-stage {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(23,99,63,.12);
    border-radius: 30px;
    background:
        radial-gradient(circle at 18% 18%, rgba(201,154,46,.16), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,245,241,.9));
    box-shadow: 0 32px 90px rgba(19,32,27,.12);
}
.tour-lines {
    position: absolute;
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    pointer-events: none;
    opacity: .5;
}
.tour-lines path {
    fill: none;
    stroke: rgba(201,154,46,.5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 10 14;
    animation: connectionFlow 6s linear infinite;
}
.tour-lines path:nth-child(2) {
    stroke: rgba(23,99,63,.35);
    animation-direction: reverse;
    animation-duration: 7.6s;
}
.tour-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .52fr);
    gap: clamp(18px, 2.2vw, 30px);
    align-items: start;
    padding: clamp(18px, 2.4vw, 32px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) scale(.98);
    transition: opacity .42s ease, visibility .42s ease, transform .42s cubic-bezier(.16,1,.3,1);
}
.tour-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.tour-media-stack {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
}
.tour-screen {
    position: relative;
    height: 430px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(23,99,63,.16);
    border-radius: 24px;
    background: #10231b;
    box-shadow: 0 32px 90px rgba(19,32,27,.18);
    transform: perspective(1000px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: transform .32s ease;
    cursor: pointer;
}
.tour-screen img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: top left;
    padding-top: 42px;
    background: #eef5f1;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.tour-thumb-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.tour-thumb {
    position: relative;
    min-height: 128px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(23,99,63,.14);
    border-radius: 18px;
    background: #10231b;
    appearance: none;
    box-shadow: 0 18px 48px rgba(19,32,27,.12);
    cursor: pointer;
    transform: translateY(0) rotate(var(--thumb-tilt, -1deg));
    transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.tour-thumb:nth-child(even) {
    --thumb-tilt: 1deg;
}
.tour-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(8,18,14,.76)),
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.2) 50%, transparent 58% 100%);
    transform: translateX(-105%);
    transition: transform .7s ease;
}
.tour-thumb:hover {
    transform: translateY(-5px) rotate(0deg);
    border-color: rgba(201,154,46,.46);
    box-shadow: 0 24px 60px rgba(19,32,27,.18);
}
.tour-thumb:hover::after {
    transform: translateX(105%);
}
.tour-thumb img {
    width: 100%;
    height: 100%;
    min-height: 128px;
    object-fit: cover;
    object-position: top left;
    display: block;
    opacity: .92;
    transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.tour-thumb:hover img {
    transform: scale(1.05);
    opacity: 1;
}
.tour-thumb span,
.tour-thumb i {
    position: absolute;
    z-index: 2;
}
.tour-thumb span {
    left: 12px;
    bottom: 11px;
    max-width: calc(100% - 56px);
    color: var(--white);
    font-size: .82rem;
    font-weight: 900;
    text-align: left;
}
.tour-thumb i {
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.9);
    color: var(--green);
    font-size: .78rem;
}
.tour-screen:hover img {
    transform: scale(1.035);
}
.tour-copy {
    position: relative;
    z-index: 2;
    align-self: start;
    margin-top: clamp(20px, 4vw, 64px);
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid rgba(23,99,63,.12);
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 24px 70px rgba(19,32,27,.1);
    backdrop-filter: blur(18px);
}
.tour-copy > span {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: #835d0f;
    font-size: .75rem;
    font-weight: 900;
}
.tour-copy h3 {
    font-size: clamp(1.7rem, 2.35vw, 2.7rem);
    line-height: 1.03;
    margin-bottom: 12px;
}
.tour-copy p {
    color: var(--muted);
}
.tour-copy ul {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}
.tour-copy li {
    display: flex;
    gap: 9px;
    align-items: center;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(223,245,233,.62);
    color: #40524a;
    font-weight: 800;
}
.tour-copy li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(23,99,63,.1);
}
.product-tour.reveal-on-scroll {
    transform: translateY(38px) scale(.97);
}
.product-tour.reveal-on-scroll.is-visible {
    transform: translateY(0) scale(1);
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7,15,11,.84);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.image-lightbox figure {
    width: min(1500px, 96vw);
    max-height: 92vh;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: #10231b;
    box-shadow: 0 44px 120px rgba(0,0,0,.48);
    transform: translateY(18px) scale(.96);
    transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.image-lightbox.is-open figure {
    transform: translateY(0) scale(1);
}
.lightbox-topbar {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    color: rgba(255,255,255,.74);
    background: linear-gradient(180deg, #10231b, #132d22);
}
.lightbox-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.28);
}
.lightbox-topbar span:nth-child(1) { background: #ef4444; }
.lightbox-topbar span:nth-child(2) { background: #f59e0b; }
.lightbox-topbar span:nth-child(3) { background: #22c55e; }
.lightbox-topbar strong {
    margin-left: 8px;
    font-size: .86rem;
}
.image-lightbox img {
    width: 100%;
    max-height: calc(92vh - 46px);
    object-fit: contain;
    background: #eef5f1;
}
.lightbox-close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: var(--white);
    cursor: pointer;
}
.lightbox-close:hover {
    background: var(--gold);
    color: #10231b;
}

@keyframes connectionFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -140; }
}

.cta {
    position: relative;
    overflow: hidden;
    padding: 46px 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(201,154,46,.24), transparent 27%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(135deg, #0b1b14, #1c663f);
    color: var(--white);
    text-align: left;
}
.cta-card {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 40px));
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 34px 90px rgba(0,0,0,.16);
    backdrop-filter: blur(20px);
}
.cta .section-kicker { color: var(--gold); }
.cta h2 {
    color: var(--white);
    max-width: 620px;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
    line-height: 1;
    margin-bottom: 12px;
}
.cta p { color: rgba(255,255,255,.72); max-width: 620px; margin-bottom: 0; }
.cta .cta-actions {
    flex: 0 0 auto;
    margin-top: 0;
    justify-content: flex-end;
}
.cta .btn-outline {
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.9);
}
.footer {
    position: relative;
    overflow: hidden;
    background: #0b1712;
    color: rgba(255,255,255,.72);
    padding: 86px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,154,46,.7), transparent);
}
.footer-outline-wrap {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 4;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}
.footer-outline-logo {
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
    font-size: clamp(3.4rem, 8vw, 8.6rem);
    line-height: .9;
    font-weight: 300;
    letter-spacing: .18em;
    font-style: normal;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1px rgba(255,255,255,.34);
    text-stroke: 1px rgba(255,255,255,.34);
    opacity: .78;
    white-space: nowrap;
    transition: color .75s cubic-bezier(.16,1,.3,1), -webkit-text-stroke-color .75s ease, opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1);
}
.footer-outline-glow {
    width: min(420px, 72%);
    height: 3px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), #2f8b57, transparent);
    box-shadow: 0 0 18px rgba(47,139,87,.45), 0 0 34px rgba(52,211,153,.16);
    animation: footerLogoGlow 3s ease-in-out infinite;
}
.footer-outline-wrap:hover .footer-outline-logo {
    background: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), rgba(23,99,63,.78) 0 30%, rgba(52,211,153,.38) 42%, transparent 68%);
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: rgba(23,99,63,.95);
    text-stroke-color: rgba(23,99,63,.95);
    opacity: 1;
    transform: scale(1.015);
}
.footer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(420px, .8fr);
    gap: clamp(24px, 4vw, 52px);
    justify-content: space-between;
    align-items: start;
}
.footer-grid > div {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}
.footer-brand-panel {
    max-width: 520px;
}
.footer-left {
    justify-self: start;
    max-width: 460px;
}
.footer-right {
    justify-self: end;
}
.footer-links-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: clamp(22px, 3vw, 46px);
    max-width: 460px;
}
.footer-wordmark {
    display: inline-grid !important;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    margin: 0 0 22px !important;
    color: var(--white) !important;
    transform: none !important;
}
.footer-wordmark-name {
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 300;
    line-height: .9;
    letter-spacing: .23em;
    white-space: nowrap;
}
.footer-wordmark-name > span { color: #50a274; }
.footer-wordmark small {
    padding-left: 3px;
    color: rgba(255,255,255,.58);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.footer p {
    max-width: 480px;
}
.footer h3 { color: var(--white); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.footer a { display: block; color: rgba(255,255,255,.62); margin: 10px 0; transition: color .22s ease, transform .22s ease; }
.footer a:hover { color: var(--gold); transform: translateX(3px); }
.footer-contact-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.footer-contact-pills a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    font-weight: 800;
}
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; margin: 0; }
.social-row a:hover { transform: translateY(-4px); background: var(--gold); color: #0d1914; }
.footer-bottom { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.1); margin-top: 52px; padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; }

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 48px rgba(37,211,102,.35);
    animation: whatsappPulse 2.8s ease-in-out infinite;
}
.whatsapp-float i {
    font-size: 1.45rem;
}
.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1px solid rgba(37,211,102,.42);
    animation: whatsappRing 2.8s ease-in-out infinite;
}
.whatsapp-float:hover {
    transform: translateY(-4px);
    background: #1ebe5b;
}

@keyframes dashboardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 18px 48px rgba(37,211,102,.35); }
    50% { box-shadow: 0 22px 60px rgba(37,211,102,.5); }
}
@keyframes whatsappRing {
    0%, 100% { opacity: .35; transform: scale(.92); }
    50% { opacity: 0; transform: scale(1.18); }
}
@keyframes footerLogoGlow {
    0%, 100% { opacity: .62; transform: scaleX(.72); transform-origin: left; }
    50% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 1180px) {
    .why-cloud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ops-board,
    .ops-side-grid,
    .ops-sync-strip {
        grid-template-columns: 1fr;
    }
    .ops-card,
    .ops-card-dark,
    .ops-side-grid .ops-card:last-child,
    .ops-sync-strip {
        grid-column: 1 / -1;
    }
}

/* Keep the full desktop navigation comfortable on standard laptop displays. */
@media (max-width: 1600px) and (min-width: 981px) {
    :root { --header-height: 100px; }
    .container { width: min(100% - 32px, 1680px); }
    .header-top-inner { min-height: 32px; }
    .header-inner {
        min-height: 68px;
        grid-template-columns: minmax(230px, auto) minmax(0, 1fr) auto;
        gap: 12px;
    }
    .brand { gap: 8px; }
    .brand-logo {
        height: 42px;
        max-width: 250px;
    }
    .brand-badge {
        height: 25px;
        padding: 0 8px;
        font-size: .61rem;
    }
    .main-nav {
        gap: 1px;
        padding: 4px;
    }
    .main-nav a {
        gap: 6px;
        min-height: 36px;
        padding: 8px 9px;
        font-size: .8rem;
    }
    .header-actions {
        gap: 5px;
        padding: 4px;
    }
    .call-sales-btn,
    .demo-btn {
        min-height: 36px;
        padding: 9px 12px;
        font-size: .8rem;
    }
    .page-links { top: var(--header-height); }
}

@media (max-width: 1180px) and (min-width: 981px) {
    .brand-badge,
    .main-nav a i { display: none; }
    .header-inner { grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto; }
    .main-nav a { padding-inline: 8px; }
}

@media (max-width: 980px) {
    :root { --header-height: 70px; }
    .header-inner {
        min-height: 70px;
        grid-template-columns: auto 1fr auto;
    }
    .brand-badge { display: none; }
    .main-nav {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 78px;
        z-index: 90;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border-radius: 20px;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(23,99,63,.12);
        box-shadow: 0 28px 70px rgba(19,32,27,.16);
        backdrop-filter: blur(18px);
    }
    .main-nav.is-open { display: flex; }
    .main-nav a {
        justify-content: flex-start;
        border-radius: 14px;
        min-height: 46px;
    }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .header-top { display: none; }
    .page-links { top: 70px; }
    .feature-detail-section { scroll-margin-top: 126px; }
    .link-action { display: none; }
    .header-actions {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .hero-grid, .split, .growth-shell, .tabs-shell, .product-panel, .contact-grid, .journey-head, .journey-shell, .journey-panel { grid-template-columns: 1fr; }
    .insight-head, .ops-board, .ops-side-grid, .ops-sync-strip, .stats-layout, .property-showcase-head, .product-view-head, .feature-map-head, .feature-detail, .feature-detail.reverse, .origin-grid, .partner-sync-grid, .support-flow-grid, .contact-layout { grid-template-columns: 1fr; }
    .feature-detail.reverse .feature-copy-panel,
    .feature-detail.reverse .feature-ui-panel { order: initial; }
    .ops-card,
    .ops-card-dark,
    .ops-side-grid .ops-card:last-child,
    .ops-sync-strip {
        grid-column: 1 / -1;
    }
    .ops-card {
        min-height: auto;
    }
    .hero { min-height: auto; }
    .hero-carousel-controls { position: static; margin: 22px auto 0; width: max-content; }
    .hero-float-panel { display: none; }
    .hero-orbit, .hero-cursor-glow { display: none; }
    .proof-row, .grid-4, .impact-stats { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .pricing-grid, .footer-grid, .feature-map-grid, .partner-grid, .support-service-grid, .module-choice-grid, .values-grid { grid-template-columns: 1fr; }
    .why-cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-left,
    .footer-right { justify-self: stretch; }
    .footer-links-group { grid-template-columns: repeat(2, 1fr); max-width: none; }
    .included-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-ui-panel,
    .origin-card { min-height: 380px; }
    .growth-visual,
    .growth-visual img { min-height: 420px; }
    .screen-card,
    .screen-card-1,
    .screen-card-2,
    .screen-card-3,
    .screen-card-4,
    .screen-card-5,
    .screen-card-6 {
        grid-column: span 6;
        grid-row: auto;
        min-height: 330px;
    }
    .screen-connections { opacity: .28; }
    .tour-tabs {
        display: flex;
        overflow-x: auto;
    }
    .tour-tab { flex: 1 0 165px; }
    .tour-stage {
        min-height: 0;
        overflow: visible;
    }
    .tour-panel {
        position: relative;
        inset: auto;
        display: none;
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .tour-panel.active {
        display: grid;
    }
    .tour-screen,
    .tour-screen img {
        height: 430px;
    }
    .tour-copy { margin-top: 0; }
    .tour-thumb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .property-feature-card,
    .property-feature-card:nth-child(1),
    .property-feature-card:nth-child(2),
    .property-feature-card:nth-child(6),
    .property-feature-card:nth-child(7) {
        grid-column: span 6;
        min-height: 300px;
        transform: none;
    }
    .price-card.featured { transform: none; }
}
@media (max-width: 620px) {
    :root { --header-height: 66px; }
    .container { width: min(100% - 24px, 1680px); }
    .header-inner { min-height: 66px; gap: 10px; }
    .brand { overflow: hidden; }
    .brand-logo {
        height: 40px;
        max-width: min(210px, 45vw);
    }
    .header-actions { gap: 8px; }
    .demo-btn {
        min-height: 40px;
        padding: 10px 12px;
        font-size: .78rem;
    }
    .call-sales-btn {
        min-height: 40px;
        padding: 10px 12px;
        font-size: .78rem;
    }
    .call-sales-btn i,
    .demo-btn i { display: none; }
    .hero h1, .page-hero h1 { font-size: 2.5rem; }
    .hero h1 {
        max-width: 12ch;
        font-size: clamp(2.05rem, 9.8vw, 2.55rem);
        line-height: 1.04;
        margin: 16px 0 14px;
    }
    .hero .eyebrow {
        padding: 6px 10px;
        font-size: .72rem;
    }
    .hero-lead-full {
        display: none;
    }
    .hero-lead-mobile {
        display: block;
        max-width: 34ch;
        font-size: .98rem;
        line-height: 1.55;
        margin-bottom: 0;
    }
    .page-hero {
        padding: 56px 0 48px;
    }
    .page-hero p {
        font-size: 1rem;
    }
    .page-links { top: 66px; }
    .hero {
        min-height: auto;
        padding: 34px 0 26px;
    }
    .reveal-on-scroll,
    .reveal-on-scroll.reveal-rise,
    .reveal-on-scroll.reveal-slide-left,
    .reveal-on-scroll.reveal-slide-right,
    .reveal-on-scroll.reveal-zoom,
    .reveal-on-scroll.reveal-pop,
    .reveal-on-scroll.reveal-unfold {
        transform: none;
        filter: none;
        clip-path: none;
    }
    .proof-row, .dash-kpis, .panel-copy ul, .check-list, .form-row, .journey-copy ul, .journey-stats, .impact-stats, .included-grid, .feature-copy-panel ul, .feature-ui-screen { grid-template-columns: 1fr; }
    .why-cloud-grid { grid-template-columns: 1fr; }
    .feature-ui-panel,
    .origin-card { min-height: 320px; }
    .feature-copy-panel,
    .contact-form-card { padding: 24px; }
    .stats-layout { gap: 24px; }
    .stat-orb { min-height: 210px; }
    .property-showcase-grid { grid-template-columns: 1fr; }
    .property-feature-card,
    .property-feature-card:nth-child(1),
    .property-feature-card:nth-child(2),
    .property-feature-card:nth-child(6),
    .property-feature-card:nth-child(7) {
        grid-column: auto;
        min-height: 280px;
        transform: none;
    }
    .property-feature-card:hover {
        transform: translateY(-4px);
    }
    .hero-insights {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 18px;
    }
    .hero-insight {
        min-height: 72px;
        padding: 12px;
    }
    .hero-insight:nth-child(n+3) {
        display: none;
    }
    .hero-insight i {
        width: 26px;
        height: 26px;
        margin-bottom: 8px;
    }
    .hero-insight span {
        font-size: .66rem;
    }
    .hero-insight strong {
        font-size: .84rem;
    }
    .signal-board { grid-template-columns: repeat(2, 1fr); }
    .ops-metrics { grid-template-columns: repeat(2, 1fr); }
    .ops-main-panel {
        min-height: auto;
        padding: 24px;
    }
    .ops-side-grid {
        grid-template-columns: 1fr;
    }
    .ops-card,
    .ops-card-dark,
    .ops-side-grid .ops-card:last-child {
        grid-column: 1 / -1;
        min-height: auto;
        transform: none;
    }
    .ops-card:hover {
        transform: translateY(-4px);
    }
    .ops-sync-strip {
        grid-template-columns: 1fr;
    }
    .ops-sync-strip > div:first-child {
        grid-template-columns: 1fr;
    }
    .calendar { grid-template-columns: 58px repeat(3, 1fr); overflow: hidden; }
    .calendar span:nth-child(n+17) { display: none; }
    .section { padding: 64px 0; }
    .growth-copy { padding: 10px 0 10px 18px; }
    .growth-visual,
    .growth-visual img { min-height: 330px; }
    .growth-dashboard { left: 14px; bottom: 14px; width: calc(100% - 28px); }
    .product-screens-layout { grid-template-columns: 1fr; }
    .screen-card,
    .screen-card-1,
    .screen-card-2,
    .screen-card-3,
    .screen-card-4,
    .screen-card-5,
    .screen-card-6 {
        grid-column: auto;
        min-height: 300px;
    }
    .screen-browser img { padding-top: 38px; }
    .screen-caption { width: calc(100% - 28px); margin: auto 14px 14px; }
    .screen-connections { display: none; }
    .tour-tabs { padding: 6px; }
    .tour-tab {
        flex: 0 0 auto;
        min-width: 138px;
        min-height: 46px;
    }
    .tour-stage {
        min-height: 0;
        border-radius: 22px;
    }
    .tour-panel {
        padding: 14px;
        gap: 14px;
    }
    .tour-lines { display: none; }
    .tour-screen,
    .tour-screen img {
        height: 330px;
    }
    .tour-thumb-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tour-thumb,
    .tour-thumb img {
        min-height: 112px;
        transform: none;
    }
    .tour-thumb:hover {
        transform: translateY(-3px);
    }
    .tour-copy { padding: 20px; border-radius: 18px; }
    .image-lightbox { padding: 12px; }
    .image-lightbox figure { width: 100%; border-radius: 16px; }
    .lightbox-close { top: 12px; right: 12px; }
    .cta { padding: 34px 0; }
    .cta-card {
        width: min(100% - 24px, 920px);
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 18px;
    }
    .cta .cta-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .cta h2 { font-size: 2rem; }
    .footer { padding-top: 48px; }
    .footer-outline-wrap { top: 38%; opacity: .72; }
    .footer-outline-logo { font-size: clamp(2.7rem, 14vw, 5.2rem); letter-spacing: .04em; }
    .footer-outline-glow { width: min(280px, 70%); margin-top: 10px; }
    .footer-links-group { grid-template-columns: 1fr; }
    .footer-grid > div { padding: 20px; }
    .whatsapp-float { right: 14px; bottom: 16px; min-height: 52px; padding: 0 15px; }
    .whatsapp-float span { display: none; }
    .why-choice-card p { padding-right: 0; }
    .order-ticket { right: 18px; bottom: 18px; opacity: .62; }
    .journey-flow { grid-template-columns: 1fr; }
    .flow-line { height: 34px; width: 3px; margin: 0 auto; }
}

@media (max-width: 430px) {
    .brand-logo {
        max-width: min(176px, 47vw);
    }
    .call-sales-btn {
        display: none;
    }
    .demo-btn {
        min-width: 86px;
    }
}

@media (max-width: 360px) {
    .brand-logo {
        max-width: 142px;
    }
    .demo-btn {
        min-width: 76px;
        padding-inline: 10px;
    }
    .menu-toggle {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        filter: none;
    }
}