/* OmniView landing page styles — shared by landing.html (EN) and landing_nl.html (NL).
   Bump the ?v= query in those templates when editing this file. */


/* ── Shared glass recipe: one place for the blur pair (was repeated per card) ── */
.stats-bar, .ps-card, .tech-card, .step, .outcome-card,
.price-card, .path-card, .hybrid-box, .ms-map-demo, .api-code {
    backdrop-filter:blur(16px) saturate(1.3);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero { text-align:center; padding:100px 32px 48px; position:relative; }
.hero .eyebrow { font-family:var(--font-mono); font-size:0.72rem;
    color:var(--accent-2); letter-spacing:0.35em; text-transform:uppercase;
    margin-bottom:24px;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero h1 { font-size:clamp(2.4rem,6vw,4.2rem); font-weight:700; line-height:1.06;
    margin-bottom:24px; color:var(--text-hi); letter-spacing:-0.035em;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.hero h1 .grad {
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 50%,var(--accent) 100%);
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.35s both, shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position:200% center; } }
.hero .sub { font-size:1.1rem; color:#7A8090; max-width:580px; margin:0 auto 20px;
    line-height:1.7; font-weight:300;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.hero .sub-b2b { font-family:var(--font-mono); font-size:0.78rem; color:var(--text-low);
    letter-spacing:0.04em; margin-bottom:40px;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hero .sub-b2b span { color:var(--accent); }
.hero .ctas { display:flex; gap:14px; justify-content:center;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s both; }
.hero-line { height:1px; max-width:400px; margin:56px auto 0;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,0.3),rgba(123,97,255,0.3),transparent);
    animation:lineGrow 1.2s cubic-bezier(0.16,1,0.3,1) 0.9s both; }

@keyframes fadeSlideUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes lineGrow { from{max-width:0;opacity:0} to{max-width:400px;opacity:1} }

/* ══════════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════════ */
.stats-bar { display:flex; justify-content:center; gap:0; margin:48px auto 0;
    max-width:600px; border-radius:16px; overflow:hidden;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06); }
.stats-bar .stat { flex:1; padding:28px 16px; text-align:center; position:relative;
    transition:background 0.3s; }
.stats-bar .stat:hover { background:rgba(255,255,255,0.02); }
.stats-bar .stat+.stat::before { content:''; position:absolute; left:0; top:20%; height:60%;
    width:1px; background:rgba(255,255,255,0.06); }
.stats-bar .val { font-family:var(--font-mono);
    font-size:1.6rem; font-weight:700; color:var(--accent); transition:text-shadow 0.3s; }
.stats-bar .stat:hover .val { text-shadow:0 0 20px rgba(0,229,255,0.4); }
.stats-bar .lbl { font-size:0.7rem; color:var(--text-low); margin-top:4px; }

/* ══════════════════════════════════════════════════════════════
   PROBLEM → SOLUTION
   ══════════════════════════════════════════════════════════════ */
.ps-section { padding:80px 0 20px; max-width:880px; margin:0 auto; }
.ps-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.ps-card { padding:36px 32px; border-radius:20px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06); }
.ps-card.problem { border-color:rgba(245,101,101,0.15); }
.ps-card.solution { border-color:rgba(0,229,255,0.15); }
.ps-label { font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.2em;
    text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.ps-card.problem .ps-label { color:var(--err); }
.ps-card.solution .ps-label { color:var(--accent); }
.ps-card h3 { font-size:1.1rem; color:var(--text-bright); font-weight:700; margin-bottom:14px; line-height:1.3; }
.ps-card p { font-size:0.9rem; color:var(--text-dim); line-height:1.75; margin-bottom:12px; }
.ps-card p:last-child { margin-bottom:0; }
.ps-card .hl { color:var(--accent); font-weight:500; }
.ps-card .hl-warm { color:#F6AD55; font-weight:500; }
.ps-tagline { text-align:center; margin-top:36px; padding:24px;
    font-size:1rem; color:var(--text-mid); font-weight:300; line-height:1.7; }
.ps-tagline strong { color:var(--text-bright); font-weight:600; }
.ps-features { list-style:none; margin:16px 0 0; }
.ps-features li { font-size:0.88rem; color:var(--text); padding:6px 0;
    display:flex; align-items:center; gap:10px; }
.ps-features li::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); }

@media (max-width:768px) {
    .ps-grid { grid-template-columns:1fr; }
    .ps-section { padding:60px 0 20px; }
}

/* ══════════════════════════════════════════════════════════════
   SOCIAL PROOF
   ══════════════════════════════════════════════════════════════ */
.proof-label { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-faint);
    letter-spacing:0.2em; text-transform:uppercase; text-align:center; margin-bottom:24px; }
.proof-grid { display:flex; justify-content:center; gap:48px; margin-bottom:36px; }
.proof-item { text-align:center; }
.proof-val { font-family:var(--font-mono); font-size:1.8rem; font-weight:700;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.proof-desc { font-size:0.72rem; color:var(--text-low); margin-top:4px; }
.proof-quotes { display:grid; grid-template-columns:1fr 1fr; gap:20px;
    max-width:800px; margin:0 auto; }
.proof-quote { padding:24px 28px; border-radius:16px;
    background:rgba(255,255,255,0.03); backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 4px 20px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.04);
    position:relative; }
.proof-quote::before { content:'\201C'; position:absolute; top:12px; left:16px;
    font-size:2.5rem; color:rgba(0,229,255,0.12); font-family:Georgia,serif; line-height:1; }
.proof-quote p { font-size:0.86rem; color:var(--text-mid); line-height:1.7; font-style:italic;
    padding-left:8px; }
.proof-author { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-low);
    margin-top:12px; padding-left:8px; }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════ */
.sec { padding:100px 0 20px; }
.sec-tag { font-family:var(--font-mono); font-size:0.65rem;
    color:var(--accent-2); letter-spacing:0.25em; text-transform:uppercase;
    text-align:center; margin-bottom:14px; }
.sec h2 { font-size:clamp(1.5rem,3.5vw,2.2rem); text-align:center; color:var(--text-hi);
    margin-bottom:16px; font-weight:700; letter-spacing:-0.025em; }
.sec h2 .grad { background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.sec .sec-sub { font-size:1rem; color:var(--text-dim); text-align:center;
    max-width:520px; margin:0 auto 56px; line-height:1.65; }

/* ══════════════════════════════════════════════════════════════
   SHOWCASE — Live Demo Embed
   ══════════════════════════════════════════════════════════════ */
.showcase { padding:40px 0 0; }

.live-demo-wrap { max-width:100%; }
.live-demo-badge { display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:0.6rem; color:var(--ok);
    padding:5px 14px; border-radius:8px; margin-bottom:16px;
    background:rgba(104,211,145,0.06); border:1px solid rgba(104,211,145,0.12); }
.ldb-dot { width:6px; height:6px; border-radius:50%; background:var(--ok);
    box-shadow:0 0 6px rgba(104,211,145,0.5);
    animation:livePulse 1.5s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1;box-shadow:0 0 4px rgba(104,211,145,0.5)} 50%{opacity:0.5;box-shadow:none} }

.demo-stage-tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.demo-stage-tab { padding:6px 16px; border-radius:8px; font-size:0.65rem;
    font-family:var(--font-mono); color:var(--text-dim); background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:all 0.2s; }
.demo-stage-tab:hover { color:var(--text-bright); border-color:rgba(255,255,255,0.12); }
.demo-stage-tab.active { color:var(--accent); border-color:rgba(0,229,255,0.3);
    background:rgba(0,229,255,0.06); }
.demo-stage-tab .tab-count { color:var(--text-low); margin-left:4px; }

.live-demo-frame { border-radius:20px; overflow:hidden;
    background:rgba(10,12,16,0.85); backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 40px 100px rgba(0,0,0,0.5), 0 0 80px rgba(0,229,255,0.04),
               inset 0 1px 2px rgba(255,255,255,0.06); }
.live-demo-frame iframe { display:block; width:100%; height:1000px; border:0; }

.live-demo-footer { display:flex; align-items:center; justify-content:space-between;
    margin-top:16px; flex-wrap:wrap; gap:12px; }
.ldf-stats { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-low); }

/* ══════════════════════════════════════════════════════════════
   TECHNOLOGY
   ══════════════════════════════════════════════════════════════ */
.tech-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
    max-width:840px; margin:0 auto; }
.tech-card { padding:32px; border-radius:20px; position:relative; overflow:hidden;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.tech-card::before { content:''; position:absolute; inset:-1px; border-radius:21px; z-index:-1;
    background:linear-gradient(160deg,rgba(0,229,255,0.12),transparent 40%);
    opacity:0; transition:opacity 0.4s; }
.tech-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.15);
    box-shadow:0 20px 60px rgba(0,0,0,0.35), inset 0 1px 2px rgba(255,255,255,0.08), 0 0 40px rgba(0,229,255,0.04); }
.tech-card:hover::before { opacity:1; }
.tech-card .tc-icon { font-size:1.4rem; margin-bottom:16px;
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:14px;
    background:rgba(0,229,255,0.06); border:1px solid rgba(0,229,255,0.1); }
.tech-card h4 { font-size:0.92rem; color:var(--text-bright); margin-bottom:8px; font-weight:600; }
.tech-card p { font-size:0.88rem; color:var(--text-dim); line-height:1.7; }
.tech-card .tc-tag { font-family:var(--font-mono); font-size:0.55rem;
    color:var(--accent); margin-top:12px; opacity:0.7; }

/* ══════════════════════════════════════════════════════════════
   STEPS
   ══════════════════════════════════════════════════════════════ */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    max-width:920px; margin:0 auto; position:relative; }
.steps::before { content:''; position:absolute; top:48px; left:20%; right:20%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,0.15),rgba(123,97,255,0.15),transparent); }
.step { padding:36px 28px; border-radius:20px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative; overflow:hidden; z-index:1; }
.step::before { content:''; position:absolute; inset:-1px; border-radius:20px; z-index:-1;
    background:linear-gradient(160deg,rgba(0,229,255,0.15),transparent 40%);
    opacity:0; transition:opacity 0.4s; }
.step:hover { transform:translateY(-6px); border-color:rgba(0,229,255,0.12);
    box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 40px rgba(0,229,255,0.05); }
.step:hover::before { opacity:1; }
.step .num { font-family:var(--font-mono); font-size:4rem;
    font-weight:700; line-height:1;
    background:linear-gradient(180deg,rgba(0,229,255,0.1) 0%,transparent 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    position:absolute; top:-2px; right:16px; }
.step .icon { font-size:1.6rem; margin-bottom:18px;
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:14px;
    background:rgba(0,229,255,0.06); border:1px solid rgba(0,229,255,0.1); }
.step h3 { font-size:0.95rem; color:var(--text-bright); margin-bottom:10px; font-weight:600; }
.step p { font-size:0.88rem; color:var(--text-dim); line-height:1.65; }

/* ══════════════════════════════════════════════════════════════
   MULTI-STAGE
   ══════════════════════════════════════════════════════════════ */
.ms-section { position:relative; overflow:hidden; }
.ms-section::before { content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 0%,rgba(123,97,255,0.02) 50%,transparent 100%);
    pointer-events:none; }
.ms-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px;
    align-items:center; max-width:960px; margin:0 auto; position:relative; z-index:1; }
.ms-text .sec-tag { text-align:left; }
.ms-text h2 { text-align:left; font-size:clamp(1.4rem,3vw,2rem); }
.ms-text p { font-size:0.92rem; color:var(--text-dim); line-height:1.75; margin-bottom:14px; }
.ms-text .hl { color:var(--accent-2); font-weight:500; }
.ms-features { list-style:none; margin:20px 0 0; }
.ms-features li { font-size:0.88rem; color:var(--text); padding:8px 0;
    display:flex; align-items:flex-start; gap:10px;
    border-bottom:1px solid rgba(255,255,255,0.03); }
.ms-features li::before { content:''; width:6px; height:6px; border-radius:50%;
    margin-top:7px; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent-2),var(--accent)); }

.ms-visual { position:relative; }
.ms-map-demo { border-radius:20px; padding:32px 28px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(123,97,255,0.12);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06); }
.ms-map-header { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.ms-map-header .ms-dot { width:8px; height:8px; border-radius:50%;
    background:var(--accent-2); box-shadow:0 0 8px rgba(123,97,255,0.5); }
.ms-map-header span { font-family:var(--font-mono); font-size:0.65rem;
    color:var(--accent-2); letter-spacing:0.1em; text-transform:uppercase; }
.ms-pins { display:flex; flex-direction:column; gap:12px; }
.ms-pin { display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-radius:12px; background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.04);
    transition:all 0.3s; }
.ms-pin:hover { border-color:rgba(123,97,255,0.15);
    background:rgba(123,97,255,0.04); transform:translateX(4px); }
.ms-pin-icon { width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
    background:rgba(123,97,255,0.08); border:1px solid rgba(123,97,255,0.12); }
.ms-pin-info h5 { font-size:0.82rem; color:var(--text-bright); font-weight:600; margin-bottom:2px; }
.ms-pin-info p { font-size:0.65rem; color:var(--text-low); font-family:var(--font-mono); }
.ms-pin-count { margin-left:auto; font-family:var(--font-mono); font-size:0.7rem;
    color:var(--accent-2); white-space:nowrap; }
.ms-map-footer { margin-top:16px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.04);
    font-size:0.68rem; color:var(--text-faint); text-align:center;
    font-family:var(--font-mono); }
.ms-map-footer span { color:var(--accent-2); }

@media (max-width:900px) {
    .ms-layout { grid-template-columns:1fr; gap:40px; }
    .ms-text .sec-tag, .ms-text h2 { text-align:center; }
    .ms-text p { text-align:center; }
    .ms-features li { justify-content:center; }
}
@media (max-width:700px) {
    .ms-map-demo { padding:24px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   OUTCOMES
   ══════════════════════════════════════════════════════════════ */
.outcomes { display:grid; grid-template-columns:1fr 1fr; gap:20px;
    max-width:960px; margin:0 auto; }
.outcome-card { padding:36px 32px; border-radius:20px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative; overflow:hidden; }
.outcome-card::before { content:''; position:absolute; inset:-1px; border-radius:20px; z-index:-1;
    opacity:0; transition:opacity 0.4s; }
.outcome-card:nth-child(1)::before { background:linear-gradient(160deg,rgba(123,97,255,0.15),transparent 40%); }
.outcome-card:nth-child(2)::before { background:linear-gradient(160deg,rgba(0,229,255,0.15),transparent 40%); }
.outcome-card:nth-child(3)::before { background:linear-gradient(160deg,rgba(104,211,145,0.15),transparent 40%); }
.outcome-card:nth-child(4)::before { background:linear-gradient(160deg,rgba(246,173,85,0.15),transparent 40%); }
.outcome-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,0.1);
    box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 40px rgba(0,229,255,0.04); }
.outcome-card:hover::before { opacity:1; }
.outcome-card .oc-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.outcome-card .oc-icon { font-size:1.6rem;
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:14px; flex-shrink:0; }
.outcome-card:nth-child(1) .oc-icon { background:rgba(123,97,255,0.08); border:1px solid rgba(123,97,255,0.12); }
.outcome-card:nth-child(2) .oc-icon { background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.12); }
.outcome-card:nth-child(3) .oc-icon { background:rgba(104,211,145,0.08); border:1px solid rgba(104,211,145,0.12); }
.outcome-card:nth-child(4) .oc-icon { background:rgba(246,173,85,0.08); border:1px solid rgba(246,173,85,0.12); }
.outcome-card .oc-label { font-family:var(--font-mono); font-size:0.6rem;
    letter-spacing:0.15em; text-transform:uppercase; }
.outcome-card:nth-child(1) .oc-label { color:var(--accent-2); }
.outcome-card:nth-child(2) .oc-label { color:var(--accent); }
.outcome-card:nth-child(3) .oc-label { color:var(--ok); }
.outcome-card:nth-child(4) .oc-label { color:#F6AD55; }
.outcome-card h4 { font-size:1.05rem; color:var(--text-bright); font-weight:700; margin-bottom:10px; line-height:1.3; }
.outcome-card > p { font-size:0.88rem; color:var(--text-dim); line-height:1.7; margin-bottom:14px; }
.outcome-uses { list-style:none; margin:0; }
.outcome-uses li { font-size:0.84rem; color:var(--text); padding:5px 0;
    display:flex; align-items:flex-start; gap:9px; }
.outcome-uses li::before { content:''; width:5px; height:5px; border-radius:50%;
    margin-top:6px; flex-shrink:0; }
.outcome-card:nth-child(1) .outcome-uses li::before { background:var(--accent-2); }
.outcome-card:nth-child(2) .outcome-uses li::before { background:var(--accent); }
.outcome-card:nth-child(3) .outcome-uses li::before { background:var(--ok); }
.outcome-card:nth-child(4) .outcome-uses li::before { background:#F6AD55; }

@media (max-width:768px) {
    .outcomes { grid-template-columns:1fr; max-width:480px; }
    .outcome-card { padding:28px 24px; }
}

/* ══════════════════════════════════════════════════════════════
   USE CASES
   ══════════════════════════════════════════════════════════════ */
.cases { display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
    max-width:960px; margin:0 auto; }
.case-card { padding:28px 22px; border:1px solid rgba(255,255,255,0.04);
    border-radius:20px; background:rgba(255,255,255,0.01);
    text-align:center; transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    position:relative; overflow:hidden; }
.case-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px;
    opacity:0; transition:opacity 0.4s; }
.case-card:nth-child(1)::after { background:linear-gradient(90deg,transparent,var(--accent-2),transparent); }
.case-card:nth-child(2)::after { background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.case-card:nth-child(3)::after { background:linear-gradient(90deg,transparent,var(--ok),transparent); }
.case-card:nth-child(4)::after { background:linear-gradient(90deg,transparent,var(--warn),transparent); }
.case-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,0.08);
    box-shadow:0 20px 48px rgba(0,0,0,0.3); }
.case-card:hover::after { opacity:1; }
.case-card .cc-icon { font-size:2rem; margin-bottom:14px; }
.case-card h4 { font-size:0.88rem; color:var(--text-bright); margin-bottom:8px; font-weight:600; }
.case-card p { font-size:0.82rem; color:var(--text-dim); line-height:1.65; }

/* ══════════════════════════════════════════════════════════════
   API MODEL
   ══════════════════════════════════════════════════════════════ */
.api-section { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
    max-width:960px; margin:0 auto; padding-bottom:40px; }
.api-left h3 { font-size:1.3rem; color:var(--text-hi); margin-bottom:16px; font-weight:600; }
.api-left p { font-size:0.92rem; color:var(--text-dim); line-height:1.7; margin-bottom:20px; }
.api-features { list-style:none; }
.api-features li { font-size:0.88rem; color:var(--text); padding:6px 0; display:flex; align-items:flex-start; gap:8px; }
.api-features li::before { content:''; width:6px; height:6px; border-radius:50%; margin-top:6px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex-shrink:0; }

.api-code { border-radius:16px; overflow:hidden;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 20px 60px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.05); }
.api-code-chrome { display:flex; align-items:center; gap:8px; padding:10px 16px;
    background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.04); }
.api-code-chrome .acd { display:flex; gap:5px; }
.api-code-chrome .acd span { width:7px; height:7px; border-radius:50%; }
.api-code-chrome .acd span:nth-child(1) { background:#FF5F57; }
.api-code-chrome .acd span:nth-child(2) { background:#FFBD2E; }
.api-code-chrome .acd span:nth-child(3) { background:#28CA41; }
.api-code-chrome .acf { font-family:var(--font-mono); font-size:0.5rem;
    color:var(--text-low); margin-left:auto; }
.api-code pre { margin:0; padding:20px; background:#0A0C10; overflow-x:auto;
    font-family:var(--font-mono); font-size:0.65rem; line-height:1.8; color:var(--text); }
.api-code .cm { color:var(--text-faint); }
.api-code .kw { color:var(--accent-2); }
.api-code .fn { color:var(--accent); }
.api-code .str { color:var(--ok); }
.api-code .prop { color:var(--warn); }
.api-code .num { color:#FF7B72; }
.api-code .del { color:var(--err); font-weight:600; }

.api-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
    font-size:0.6rem; padding:3px 10px; border-radius:4px; margin-bottom:12px; }
.api-badge.post { background:rgba(0,229,255,0.1); color:var(--accent); }
.api-badge.delete { background:rgba(245,101,101,0.1); color:var(--err); }

/* Hybrid flow */
.hybrid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px;
    align-items:center; max-width:840px; margin:48px auto 0; }
.hybrid-box { padding:24px 20px; border-radius:16px; text-align:center;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.06); }
.hybrid-box h5 { font-size:0.78rem; color:var(--text-bright); margin-bottom:8px; font-weight:600; }
.hybrid-box p { font-size:0.7rem; color:var(--text-low); line-height:1.5; }
.hybrid-box.engine { border-color:rgba(0,229,255,0.12); background:rgba(0,229,255,0.04);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,229,255,0.08), 0 0 20px rgba(0,229,255,0.04); }
.hybrid-box.engine h5 { color:var(--accent); }
.hybrid-arrow { font-size:1.2rem; color:var(--text-faint); text-align:center; }

/* ══════════════════════════════════════════════════════════════
   API SANDBOX — Interactive console
   ══════════════════════════════════════════════════════════════ */
.api-sandbox { margin-top:20px; }
.api-sandbox-input {
    display:flex; gap:8px; margin-bottom:12px;
}
.api-sandbox-input input {
    flex:1; background:rgba(255,255,255,0.03); border:1px solid rgba(0,229,255,0.1);
    border-radius:8px; padding:10px 14px; color:var(--text-bright);
    font-family:var(--font-mono); font-size:0.65rem;
    outline:none; transition:border-color 0.3s;
}
.api-sandbox-input input::placeholder { color:var(--text-faint); }
.api-sandbox-input input:focus { border-color:rgba(0,229,255,0.3); }
.api-sandbox-input button {
    background:linear-gradient(135deg,rgba(0,229,255,0.15),rgba(123,97,255,0.15));
    border:1px solid rgba(0,229,255,0.2); border-radius:8px;
    padding:10px 20px; color:var(--accent); font-weight:600;
    font-family:var(--font-mono); font-size:0.65rem;
    cursor:pointer; transition:all 0.3s; white-space:nowrap;
}
.api-sandbox-input button:hover { background:linear-gradient(135deg,rgba(0,229,255,0.25),rgba(123,97,255,0.25));
    box-shadow:0 4px 20px rgba(0,229,255,0.15); }
.api-sandbox-input button:disabled { opacity:0.4; cursor:default; }

.api-console {
    background:#06080C; border:1px solid rgba(255,255,255,0.05);
    border-radius:10px; padding:16px; font-family:var(--font-mono);
    font-size:0.6rem; line-height:2; min-height:100px;
    overflow:hidden;
}
.api-console .ac-line { opacity:0; transform:translateX(-8px);
    transition:all 0.3s cubic-bezier(0.16,1,0.3,1); white-space:nowrap; }
.api-console .ac-line.visible { opacity:1; transform:translateX(0); }
.api-console .ac-prompt { color:var(--text-faint); }
.api-console .ac-step { color:var(--accent-2); }
.api-console .ac-info { color:var(--text-dim); }
.api-console .ac-ok { color:var(--ok); }
.api-console .ac-warn { color:var(--warn); }
.api-console .ac-del { color:var(--err); font-weight:600; }
.api-console .ac-val { color:var(--accent); }
.api-console .ac-cursor {
    display:inline-block; width:6px; height:12px; background:var(--accent);
    animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════════════════════════════════════════════════════════
   CHRONOSCAPING — Canvas Vision
   ══════════════════════════════════════════════════════════════ */
.vision { position:relative; padding:100px 0 80px; overflow:hidden; }
.vision::before { content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 0%,rgba(0,229,255,0.015) 50%,transparent 100%);
    pointer-events:none; }
.vision-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px;
    align-items:center; max-width:960px; margin:0 auto; position:relative; z-index:1; }
.vision-text .sec-tag { text-align:left; }
.vision-text h2 { text-align:left; font-size:clamp(1.4rem,3vw,2rem); }
.vision-text p { font-size:0.9rem; color:var(--text-dim); line-height:1.75; margin-bottom:16px; }
.vision-text .hl { color:var(--accent); font-weight:500; }
.chrono-canvas-wrap { position:relative; width:100%; aspect-ratio:1; border-radius:50%;
    overflow:hidden; border:1px solid rgba(0,229,255,0.08); }
.chrono-canvas-wrap canvas { position:absolute; inset:0; width:100%; height:100%; }
.chrono-canvas-wrap .chrono-glow { position:absolute; inset:-20%; border-radius:50%;
    background:radial-gradient(circle,rgba(0,229,255,0.04) 0%,transparent 70%);
    pointer-events:none; animation:orbFloat 20s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   REQUEST MODAL
   ══════════════════════════════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(5,5,7,0.85);
    backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s; }
.modal-overlay.visible { display:flex; opacity:1; }
.modal-card { background:#0D0F14; border:1px solid rgba(255,255,255,0.06);
    border-radius:24px; padding:40px; max-width:460px; width:90%;
    position:relative; overflow:hidden;
    animation:fadeSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.modal-card::after { content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,0.2),rgba(123,97,255,0.15),transparent); }
.modal-close { position:absolute; top:16px; right:16px; background:none; border:none;
    color:var(--text-low); font-size:1.2rem; cursor:pointer; transition:color 0.2s;
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; }
.modal-close:hover { color:var(--text-bright); background:rgba(255,255,255,0.05); }
.modal-card h3 { font-size:1.2rem; color:var(--text-hi); margin-bottom:8px; font-weight:600; }
.modal-card .modal-sub { font-size:0.82rem; color:var(--text-dim); margin-bottom:24px; line-height:1.6; }
.modal-card .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Success state */
.modal-success { text-align:center; padding:20px 0; }
.modal-success .success-ring { width:72px; height:72px; margin:0 auto 24px; position:relative; }
.modal-success .success-ring::before { content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(0,229,255,0.2); animation:ringPulse 2s ease-in-out infinite; }
.modal-success .success-ring .check { position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; font-size:1.8rem;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:0.6} }
.modal-success h3 { font-size:1.1rem; color:var(--text-hi); margin-bottom:10px; }
.modal-success p { font-size:0.85rem; color:var(--text-dim); line-height:1.65; }
.modal-success .email-hl { color:var(--accent); font-weight:500; }

/* ══════════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════════ */
.pricing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
    max-width:1200px; margin:0 auto; align-items:stretch; }
.price-card { padding:28px 20px; border-radius:20px; position:relative;
    display:flex; flex-direction:column;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.04);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.price-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.12);
    box-shadow:0 20px 60px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.06); }
.price-card.featured { border-color:rgba(0,229,255,0.2);
    background:rgba(0,229,255,0.03);
    box-shadow:0 8px 32px rgba(0,0,0,0.2), 0 0 30px rgba(0,229,255,0.04),
               inset 0 1px 1px rgba(0,229,255,0.06); }
.price-card.featured:hover { border-color:rgba(0,229,255,0.3);
    box-shadow:0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(0,229,255,0.06); }
.price-popular { position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    font-family:var(--font-mono); font-size:0.5rem; color:var(--bg); font-weight:700;
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:4px 16px;
    border-radius:20px; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; }
.price-tag { font-family:var(--font-display); font-size:0.9rem; color:var(--text-bright);
    font-weight:600; margin-bottom:8px; }
.price-amount { font-family:var(--font-mono); font-size:2rem; font-weight:700; color:var(--text-bright);
    line-height:1; margin-bottom:4px; }
.price-currency { font-size:1.2rem; color:var(--text-low); vertical-align:top; margin-right:2px; }
.price-mo { font-size:0.7rem; color:var(--text-low); font-weight:400; }
.price-period { font-size:0.65rem; color:var(--text-low); margin-bottom:24px; }
.price-features { list-style:none; margin-bottom:28px; flex:1; }
.price-features li { font-size:0.84rem; color:var(--text-mid); padding:6px 0;
    display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.03); }
.price-features li::before { content:''; width:5px; height:5px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════
   TWO PATHS
   ══════════════════════════════════════════════════════════════ */
.paths-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:840px; margin:0 auto; }
.path-card { padding:36px 28px; border-radius:20px; position:relative;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.06);
    display:flex; flex-direction:column;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
.path-card:hover { transform:translateY(-4px);
    box-shadow:0 16px 48px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.08); }
.path-card.featured { border-color:rgba(123,97,255,0.25);
    box-shadow:0 8px 32px rgba(0,0,0,0.25), 0 0 40px rgba(123,97,255,0.06),
    inset 0 1px 1px rgba(255,255,255,0.06); }
.path-card.featured::before { content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:20px 20px 0 0; }
.path-badge { position:absolute; top:-10px; right:20px;
    font-family:var(--font-mono); font-size:0.5rem; letter-spacing:0.1em;
    padding:4px 12px; border-radius:6px;
    background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:var(--bg); font-weight:700; }
.path-icon { font-size:2rem; margin-bottom:12px; }
.path-label { font-family:var(--font-mono); font-size:0.6rem; color:var(--accent-2);
    letter-spacing:0.15em; text-transform:uppercase; margin-bottom:8px; }
.path-card.featured .path-label { color:var(--accent); }
.path-card h4 { font-size:1.1rem; color:var(--text-bright); margin-bottom:10px; font-weight:700; }
.path-card > p { font-size:0.84rem; color:var(--text-dim); line-height:1.7; margin-bottom:20px; }
.path-features { list-style:none; margin-bottom:28px; flex:1; }
.path-features li { font-size:0.82rem; color:var(--text); padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,0.03);
    display:flex; align-items:center; gap:8px; }
.path-features li::before { content:''; width:6px; height:6px; border-radius:50%;
    background:var(--accent-2); flex-shrink:0; }
.path-card.featured .path-features li::before { background:var(--accent); }
@media (max-width:700px) { .paths-grid { grid-template-columns:1fr; max-width:400px; } }

/* ══════════════════════════════════════════════════════════════
   FINAL CTA
   ══════════════════════════════════════════════════════════════ */
.final-cta { text-align:center; padding:80px 56px; margin:20px 0;
    border-radius:24px; position:relative; overflow:hidden;
    background:rgba(255,255,255,0.03); backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 12px 48px rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.06); }
.final-cta::before { content:''; position:absolute; inset:0;
    background:linear-gradient(160deg,rgba(0,229,255,0.05) 0%,rgba(123,97,255,0.05) 50%,transparent 100%); }
.final-cta::after { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px;
    background:radial-gradient(circle,rgba(123,97,255,0.08) 0%,transparent 70%);
    animation:orbFloat 15s ease-in-out infinite; }
.final-cta h2 { font-size:clamp(1.5rem,3.5vw,2rem); color:var(--text-hi); margin-bottom:14px;
    font-weight:700; position:relative; z-index:1; letter-spacing:-0.02em; }
.final-cta p { font-size:1rem; color:var(--text-mid); max-width:480px;
    margin:0 auto 32px; line-height:1.7; position:relative; z-index:1; }
.final-cta .ctas { display:flex; gap:14px; justify-content:center; position:relative; z-index:1; }

/* ══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════════════════════ */
.lang-switch { position:absolute; top:16px; right:16px; font-family:var(--font-mono);
    font-size:0.65rem; letter-spacing:0.05em; z-index:10;
    animation:fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.lang-switch a { color:var(--text-low); text-decoration:none; transition:color 0.2s; padding:4px 6px; }
.lang-switch a:hover { color:var(--text-bright); }
.lang-switch a.active { color:var(--accent); }
.lang-switch .lang-sep { color:#2A2E38; margin:0 2px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    .cases { grid-template-columns:repeat(2,1fr); max-width:500px; }
    .api-section { grid-template-columns:1fr; gap:32px; }
    .vision-inner { grid-template-columns:1fr; gap:40px; }
    .vision-text .sec-tag, .vision-text h2 { text-align:center; }
    .vision-text p { text-align:center; }
    .hybrid { grid-template-columns:1fr; }
    .hybrid-arrow { transform:rotate(90deg); }
    .chrono-canvas-wrap { max-width:320px; margin:0 auto; }
    .proof-quotes { grid-template-columns:1fr; }
    .pricing-grid { grid-template-columns:repeat(2,1fr); max-width:600px; }
}
@media (min-width:901px) and (max-width:1100px) {
    .pricing-grid { grid-template-columns:repeat(3,1fr); max-width:800px; }
}
@media (max-width:700px) {
    .hero { padding:64px 20px 36px; }
    .hero h1 { font-size:2.2rem; }
    .proof-grid { gap:24px; }
    .live-demo-frame iframe { height:700px; }
    .hero .ctas { flex-direction:column; align-items:center; }
    .pricing-grid { grid-template-columns:1fr; max-width:360px; }
    .stats-bar { flex-direction:column; max-width:280px; }
    .stats-bar .stat+.stat::before { top:0; left:20%; width:60%; height:1px; }
    .steps { grid-template-columns:1fr; max-width:400px; }
    .steps::before { display:none; }
    .tech-grid { grid-template-columns:1fr; max-width:400px; }
    .cases { grid-template-columns:1fr; max-width:360px; }
    .final-cta { padding:48px 24px; }
    .final-cta .ctas { flex-direction:column; align-items:center; }
    nav .links { gap:16px; font-size:0.7rem; }
    .container { padding:0 20px; }
    .modal-card .row2 { grid-template-columns:1fr; }
    .modal-card { padding:24px; border-radius:18px; }
    .hero .sub { max-width:100%; }
}