:root {
    --bg:#f7f9fc;
    --surface:#ffffff;
    --text:#0b1220;
    --muted:#64748b;
    --line:rgba(11,18,32,.09);

    --blue:#4f46e5;
    --violet:#7c3aed;
    --cyan:#06b6d4;
    --green:#10b981;

    --dark:#090d18;
    --dark2:#0e1628;

    --shadow:
        0 30px 90px rgba(20,29,54,.14);

    --radius:28px;

    --ease:
        cubic-bezier(.2,.8,.2,1);
}


* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {
    margin:0;

    color:var(--text);

    background:var(--bg);

    overflow-x:hidden;

    line-height:1.5;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


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


button,
input,
textarea,
select {
    font:inherit;
}


.public-shell {
    width:min(
        1240px,
        calc(100% - 40px)
    );

    margin:auto;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.public-nav-wrap {
    position:fixed;

    inset:
        14px
        0
        auto;

    z-index:100;

    pointer-events:none;
}


.public-nav {
    width:min(
        1240px,
        calc(100% - 32px)
    );

    min-height:68px;

    margin:auto;

    display:flex;
    align-items:center;

    gap:14px;

    padding:
        9px
        10px
        9px
        14px;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius:22px;

    background:
        rgba(255,255,255,.76);

    backdrop-filter:
        blur(22px)
        saturate(150%);

    box-shadow:
        0 16px 55px rgba(15,23,42,.08);

    pointer-events:auto;

    transition:
        .35s var(--ease);
}


.public-nav.scrolled {
    min-height:60px;

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 16px 45px rgba(15,23,42,.11);
}


.public-brand {
    display:flex;
    align-items:center;

    gap:11px;

    white-space:nowrap;

    font-weight:900;

    letter-spacing:-.04em;
}


.public-brand-mark {
    display:block;
    width:38px;
    height:38px;
    flex:0 0 auto;
    filter:drop-shadow(0 10px 14px rgba(79,70,229,.24));
}


.public-brand-text {
    font-size:16px;
}


.public-brand-text small {
    display:block;

    margin-top:-2px;

    color:#94a3b8;

    font-size:8px;
    font-weight:800;

    letter-spacing:.08em;
}


.public-nav-links {
    display:flex;
    align-items:center;

    margin-left:auto;

    gap:2px;
}


.public-nav-links a {
    padding:10px 11px;

    border-radius:12px;

    color:#334155;

    font-size:13px;
    font-weight:750;

    transition:.2s;
}


.public-nav-links a:hover {
    color:#111827;

    background:#f3f5f9;
}


.public-nav-actions {
    display:flex;
    align-items:center;

    gap:8px;
}


.public-start {
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:0 18px;

    border-radius:14px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );

    box-shadow:
        0 12px 28px rgba(79,70,229,.28);

    font-size:12px;
    font-weight:850;

    transition:
        .25s var(--ease);
}


.public-start:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 38px rgba(79,70,229,.3);
}


.public-menu-btn {
    width:44px;
    height:44px;

    display:none;

    place-items:center;

    border:
        1px solid var(--line);

    border-radius:13px;

    background:#fff;

    cursor:pointer;

    font-size:18px;
}


/* ==========================================================
   COMMON PAGE HERO
   ========================================================== */

.public-page-hero {
    position:relative;

    overflow:hidden;

    min-height:620px;

    display:flex;
    align-items:center;

    padding:
        150px
        0
        90px;

    background:

        radial-gradient(
            circle at 8% 5%,
            rgba(124,58,237,.13),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 15%,
            rgba(6,182,212,.12),
            transparent 27%
        ),

        linear-gradient(
            180deg,
            #fbfdff,
            #f4f7fc
        );
}


.public-page-hero::before {
    content:"";

    position:absolute;
    inset:0;

    background-image:

        linear-gradient(
            rgba(15,23,42,.025)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(15,23,42,.025)
            1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}


.page-hero-grid {
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap:70px;

    align-items:center;
}


.page-eyebrow {
    display:inline-flex;
    align-items:center;

    gap:8px;

    padding:
        8px 11px;

    border:
        1px solid rgba(79,70,229,.14);

    border-radius:999px;

    background:
        rgba(255,255,255,.78);

    color:#4338ca;

    box-shadow:
        0 10px 28px rgba(79,70,229,.06);

    font-size:11px;
    font-weight:850;
}


.page-eyebrow-dot {
    width:7px;
    height:7px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 0 5px rgba(34,197,94,.12);
}


.public-page-hero h1 {
    max-width:780px;

    margin:
        25px
        0
        22px;

    font-size:
        clamp(
            54px,
            6vw,
            88px
        );

    line-height:.94;

    letter-spacing:-.065em;
}


.gradient-text {
    background:
        linear-gradient(
            92deg,
            #111827 3%,
            #4f46e5 54%,
            #8b5cf6 78%,
            #06b6d4
        );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;
}


.page-hero-description {
    max-width:690px;

    margin:0;

    color:#5b6778;

    font-size:18px;

    line-height:1.7;
}


.page-hero-actions {
    display:flex;

    gap:11px;

    flex-wrap:wrap;

    margin-top:28px;
}


.page-primary-btn,
.page-secondary-btn {
    min-height:54px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 20px;

    border-radius:14px;

    font-size:12px;
    font-weight:850;

    transition:
        .25s var(--ease);
}


.page-primary-btn {
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );

    box-shadow:
        0 14px 32px rgba(79,70,229,.25);
}


.page-secondary-btn {
    border:
        1px solid var(--line);

    background:
        rgba(255,255,255,.9);

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);
}


.page-primary-btn:hover,
.page-secondary-btn:hover {
    transform:
        translateY(-2px);
}


/* ==========================================================
   HERO VISUAL
   ========================================================== */

.page-visual {
    position:relative;

    min-height:430px;
}


.visual-orb {
    position:absolute;

    width:330px;
    height:330px;

    right:20px;
    top:30px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff 0 7%,
            #86b7ff 24%,
            #7c5cff 52%,
            rgba(124,92,255,.1) 72%,
            transparent 73%
        );

    filter:blur(13px);

    opacity:.25;
}


.visual-main {
    position:absolute;

    inset:
        40px
        25px
        25px
        15px;

    overflow:hidden;

    padding:28px;

    border:
        1px solid rgba(255,255,255,.92);

    border-radius:30px;

    background:
        rgba(255,255,255,.86);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 42px 95px rgba(17,24,39,.18);

    transform:
        rotateY(-5deg)
        rotateX(2deg);
}


.visual-top {
    display:flex;
    justify-content:space-between;

    gap:20px;

    color:#94a3b8;

    font-size:9px;
    font-weight:850;
}


.visual-window {
    height:240px;

    margin-top:24px;

    overflow:hidden;

    border-radius:20px;

    padding:25px;

    color:white;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(56,189,248,.22),
            transparent 30%
        ),
        #0c1424;
}


.visual-window small {
    color:#8fa1ba;

    font-weight:800;

    letter-spacing:.1em;
}


.visual-window h3 {
    max-width:360px;

    margin:
        15px
        0
        25px;

    font-size:33px;

    line-height:1;

    letter-spacing:-.045em;
}


.visual-stats {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:9px;
}


.visual-stats div {
    padding:11px;

    border:
        1px solid #20304a;

    border-radius:12px;

    background:#111d31;
}


.visual-stats b {
    display:block;

    font-size:15px;
}


.visual-stats span {
    color:#7d899b;

    font-size:8px;
}


.visual-float {
    position:absolute;

    right:0;
    bottom:5px;

    min-width:180px;

    padding:15px;

    border:
        1px solid rgba(255,255,255,.95);

    border-radius:17px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 20px 50px rgba(15,23,42,.14);

    font-size:10px;
    font-weight:800;
}


.visual-float strong {
    display:block;

    margin-bottom:4px;

    font-size:13px;
}


/* ==========================================================
   CONTENT SECTIONS
   ========================================================== */

.page-section {
    padding:
        105px 0;
}


.page-section.white {
    background:#fff;
}


.page-section.soft {
    background:#f6f8fc;
}


.page-section.dark {
    color:white;

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(56,189,248,.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 5% 100%,
            rgba(124,58,237,.16),
            transparent 35%
        ),

        #09101e;
}


.section-heading {
    max-width:760px;

    margin-bottom:44px;
}


.section-kicker {
    display:block;

    margin-bottom:12px;

    color:#5b5cf8;

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.14em;
}


.section-heading h2 {
    margin:0;

    font-size:
        clamp(
            38px,
            5vw,
            62px
        );

    line-height:1;

    letter-spacing:-.05em;
}


.section-heading p {
    max-width:680px;

    margin:
        18px
        0
        0;

    color:#64748b;

    font-size:15px;

    line-height:1.75;
}


.page-section.dark
.section-heading p {
    color:#a8b4c6;
}


/* ==========================================================
   COMPANY / ABOUT CARDS
   ========================================================== */

.capability-grid {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:14px;
}


.capability-card {
    min-height:220px;

    position:relative;

    overflow:hidden;

    padding:24px;

    border:
        1px solid var(--line);

    border-radius:24px;

    background:#fff;

    transition:
        .3s var(--ease);
}


.capability-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 25px 60px rgba(15,23,42,.08);
}


.capability-icon {
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    margin-bottom:38px;

    border-radius:13px;

    color:#4f46e5;

    background:#eef2ff;

    font-size:17px;
}


.capability-card h3 {
    margin:
        0
        0
        8px;

    font-size:18px;
}


.capability-card p {
    margin:0;

    color:#64748b;

    font-size:12px;

    line-height:1.65;
}


.story-grid {
    display:grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:70px;

    align-items:start;
}


.story-grid h2 {
    position:sticky;

    top:120px;

    margin:0;

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    line-height:1;

    letter-spacing:-.05em;
}


.story-copy {
    color:#475569;

    font-size:16px;

    line-height:1.9;

    white-space:pre-line;
}


.principles {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:14px;

    margin-top:55px;
}


.principle {
    min-height:220px;

    padding:25px;

    border:
        1px solid #1d2a40;

    border-radius:22px;

    background:#0e1728;
}


.principle span {
    color:#7c86ff;

    font-size:10px;
    font-weight:900;
}


.principle h3 {
    margin:
        32px
        0
        10px;

    font-size:23px;
}


.principle p {
    margin:0;

    color:#9aa6b8;

    font-size:12px;

    line-height:1.7;
}


/* ==========================================================
   STANDARD PAGE
   ========================================================== */

.standard-content {
    display:grid;

    grid-template-columns:
        .72fr
        1.28fr;

    gap:70px;
}


.standard-content h2 {
    margin:0;

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height:1.03;

    letter-spacing:-.045em;
}


.standard-copy {
    color:#475569;

    font-size:16px;

    line-height:1.95;

    white-space:pre-line;
}


.content-panel {
    padding:34px;

    border:
        1px solid var(--line);

    border-radius:26px;

    background:#fff;

    box-shadow:
        0 20px 55px rgba(15,23,42,.05);
}


/* ==========================================================
   LEGAL
   ========================================================== */

.legal-wrap {
    max-width:900px;

    margin:auto;
}


.legal-wrap h1 {
    margin:
        0
        0
        20px;

    font-size:
        clamp(
            42px,
            6vw,
            68px
        );

    letter-spacing:-.05em;
}


.legal-copy {
    padding:38px;

    border:
        1px solid var(--line);

    border-radius:26px;

    background:#fff;

    color:#475569;

    font-size:15px;

    line-height:1.9;

    white-space:pre-line;
}


/* ==========================================================
   BIG CTA
   ========================================================== */

.big-cta {
    position:relative;

    overflow:hidden;

    width:min(
        1320px,
        calc(100% - 24px)
    );

    margin:
        20px
        auto
        80px;

    padding:
        75px
        60px;

    border-radius:38px;

    color:#fff;

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(56,189,248,.17),
            transparent 28%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(124,58,237,.22),
            transparent 35%
        ),

        #09101e;
}


.big-cta h2 {
    max-width:760px;

    margin:0;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height:.98;

    letter-spacing:-.055em;
}


.big-cta p {
    max-width:600px;

    color:#a8b4c6;

    font-size:14px;

    line-height:1.7;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.public-footer {
    padding:
        68px
        0
        30px;

    color:#fff;

    background:#0d0d0d;
}


.public-footer-grid {
    display:grid;

    grid-template-columns:
        1.2fr
        .8fr
        .8fr
        1fr;

    gap:34px;
}


.footer-brand-copy {
    max-width:280px;

    color:#9ca3af;

    font-size:12px;

    line-height:1.7;
}


.footer-title {
    margin-bottom:15px;

    font-size:11px;
    font-weight:900;
}


.footer-links {
    display:grid;

    gap:9px;

    color:#9ca3af;

    font-size:11px;
}


.footer-links a:hover {
    color:#fff;
}


.region-chips {
    display:flex;
    flex-wrap:wrap;

    gap:7px;
}


.region-chips span {
    padding:
        7px 8px;

    border:
        1px solid #2b2b2b;

    border-radius:999px;

    color:#cbd5e1;

    background:#151515;

    font-size:9px;
}


.public-footer-bottom {
    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-top:48px;

    padding-top:22px;

    border-top:
        1px solid #242424;

    color:#777;

    font-size:9px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px) {

    .public-nav-links {
        display:none;
    }

    .public-menu-btn {
        display:grid;
    }

    .public-nav.mobile-open
    .public-nav-links {
        position:absolute;

        top:76px;
        left:16px;
        right:16px;

        display:grid;

        padding:12px;

        border:
            1px solid var(--line);

        border-radius:18px;

        background:#fff;

        box-shadow:var(--shadow);
    }

    .page-hero-grid,
    .story-grid,
    .standard-content {
        grid-template-columns:1fr;
    }

    .page-visual {
        min-height:390px;
    }

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

    .public-footer-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


@media(max-width:680px) {

    .public-shell {
        width:min(
            calc(100% - 24px),
            1240px
        );
    }

    .public-nav {
        width:
            calc(100% - 20px);

        border-radius:18px;
    }

    .public-brand-text small {
        display:none;
    }

    .public-start {
        display:none;
    }

    .public-page-hero {
        min-height:auto;

        padding:
            125px
            0
            65px;
    }

    .public-page-hero h1 {
        font-size:54px;
    }

    .page-hero-description {
        font-size:16px;
    }

    .page-visual {
        min-height:350px;

        margin-top:15px;
    }

    .visual-main {
        inset:
            30px
            8px
            20px;
    }

    .visual-window {
        height:220px;
    }

    .visual-window h3 {
        font-size:27px;
    }

    .visual-float {
        right:5px;
    }

    .page-section {
        padding:
            75px 0;
    }

    .capability-grid,
    .principles,
    .public-footer-grid {
        grid-template-columns:1fr;
    }

    .story-grid {
        gap:30px;
    }

    .story-grid h2 {
        position:static;
    }

    .big-cta {
        padding:
            55px 22px;

        border-radius:28px;
    }

    .public-footer-bottom {
        flex-direction:column;
    }

}

/* ==========================================================
   DETAILED CONTENT, CASE STUDIES & RESOURCES
   ========================================================== */

.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:28px; color:#7c8799; font-size:12px; font-weight:700; }
.breadcrumbs a:hover { color:#4f46e5; }
.detail-hero { min-height:760px; padding:155px 0 90px; background:radial-gradient(circle at 10% 0,rgba(124,58,237,.12),transparent 27%),radial-gradient(circle at 92% 18%,rgba(6,182,212,.12),transparent 27%),linear-gradient(180deg,#fbfdff,#f2f5fb); overflow:hidden; }
.detail-hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:70px; align-items:center; }
.detail-hero h1 { max-width:720px; margin:24px 0; font-size:clamp(55px,6vw,88px); line-height:.94; letter-spacing:-.065em; }
.detail-hero p { max-width:650px; color:#5b6778; font-size:19px; line-height:1.65; }
.detail-product-visual { position:relative; min-height:500px; perspective:1200px; }
.detail-product-visual:before { content:""; position:absolute; width:360px; height:360px; top:40px; right:20px; border-radius:50%; background:linear-gradient(135deg,rgba(79,70,229,.24),rgba(6,182,212,.18)); filter:blur(45px); }
.detail-browser { position:absolute; inset:35px 0 45px 10px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:#fff; box-shadow:0 42px 95px rgba(17,24,39,.2); transform:rotateY(-5deg) rotateX(2deg); }
.detail-browser-bar { height:52px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid var(--line); }
.detail-browser-bar i { width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.detail-browser-bar span { max-width:280px; margin-left:8px; padding:6px 14px; overflow:hidden; border-radius:999px; background:#f1f5f9; color:#94a3b8; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.detail-screen { min-height:400px; padding:55px 42px; color:#fff; background:radial-gradient(circle at 88% 8%,rgba(56,189,248,.24),transparent 35%),linear-gradient(135deg,#0b1220,#18233c); }
.detail-screen small { color:#a5b4fc; font-size:9px; font-weight:900; letter-spacing:.14em; }
.detail-screen h2 { max-width:400px; margin:18px 0 42px; font-size:46px; line-height:1; letter-spacing:-.05em; }
.detail-screen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.detail-screen-grid span { height:80px; border:1px solid #293650; border-radius:14px; background:linear-gradient(145deg,#17243a,#111a2b); }
.detail-proof { position:absolute; right:-18px; bottom:17px; padding:18px 20px; border:1px solid #fff; border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 20px 45px rgba(15,23,42,.14); color:#64748b; font-size:11px; backdrop-filter:blur(15px); }
.detail-proof b { display:block; color:#111827; font-size:16px; }
.proof-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.proof-strip .public-shell { display:grid; grid-template-columns:repeat(4,1fr); }
.proof-strip span { padding:21px 12px; color:#475569; font-size:11px; font-weight:800; text-align:center; }
.proof-strip span + span { border-left:1px solid var(--line); }
.content-section { padding:105px 0; background:#fff; }
.soft-section { background:#f5f7fb; }
.dark-section { color:#fff; background:radial-gradient(circle at 88% 0,rgba(79,70,229,.2),transparent 30%),#0a101d; }
.section-kicker { display:inline-flex; align-items:center; gap:8px; color:#4f46e5; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.section-kicker:before { content:""; width:22px; height:2px; background:linear-gradient(90deg,#4f46e5,#8b5cf6); }
.section-kicker.light { color:#aeb8ff; }
.split-intro { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.split-intro h2,.section-title-row h2,.dark-section h2,.faq-section h2,.outcome-panel h2 { margin:14px 0; font-size:clamp(40px,4.6vw,64px); line-height:1; letter-spacing:-.055em; }
.rich-copy { color:#526075; font-size:18px; line-height:1.8; }
.rich-copy p { margin:0 0 20px; white-space:pre-line; }
.section-title-row { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:42px; }
.section-title-row > p { max-width:500px; margin:0; color:#64748b; line-height:1.7; }
.feature-list-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.feature-list-grid article { min-height:210px; padding:24px; border:1px solid var(--line); border-radius:23px; background:#fff; box-shadow:0 10px 35px rgba(15,23,42,.035); }
.feature-list-grid article > span { color:#8b5cf6; font-size:10px; font-weight:900; }
.feature-list-grid h3 { margin:38px 0 9px; font-size:18px; letter-spacing:-.03em; }
.feature-list-grid p { margin:0; color:#64748b; font-size:12px; line-height:1.6; }
.benefit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:44px; }
.benefit-grid div { display:flex; align-items:center; gap:14px; padding:22px; border:1px solid #22304a; border-radius:17px; background:#101a2b; }
.benefit-grid i { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:rgba(34,211,238,.12); color:#67e8f9; font-style:normal; }
.process-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.process-cards article { padding:24px; border-top:2px solid #dfe4ee; }
.process-cards b { color:#4f46e5; font-size:11px; }
.process-cards h3 { margin:28px 0 8px; font-size:20px; }
.process-cards p { margin:0; color:#64748b; font-size:13px; line-height:1.65; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.related-card { display:flex; flex-direction:column; min-height:245px; padding:25px; border:1px solid var(--line); border-radius:22px; background:#fff; transition:.25s var(--ease); }
.related-card:hover { transform:translateY(-5px); box-shadow:0 24px 55px rgba(15,23,42,.08); }
.related-card small { color:#4f46e5; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.related-card h3 { margin:24px 0 9px; font-size:21px; letter-spacing:-.035em; }
.related-card p { flex:1; margin:0 0 20px; color:#64748b; font-size:12px; line-height:1.65; }
.related-card > span,.text-link { color:#4338ca; font-size:12px; font-weight:850; }
.faq-section { padding:105px 0; background:#fff; }
.narrow { max-width:850px; }
.faq-section details { margin-top:12px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.faq-section summary { padding:20px 22px; cursor:pointer; font-weight:850; }
.faq-section details p { margin:0; padding:0 22px 22px; color:#64748b; line-height:1.7; }
.closing-cta { width:min(1320px,calc(100% - 24px)); margin:0 auto 40px; padding:90px 24px; border-radius:42px; color:#fff; text-align:center; background:radial-gradient(circle at 15% 100%,rgba(6,182,212,.2),transparent 35%),radial-gradient(circle at 90% 0,rgba(124,58,237,.28),transparent 34%),#090f1d; }
.closing-cta > div { max-width:780px; margin:auto; }
.closing-cta h2 { margin:18px 0 13px; font-size:clamp(44px,5vw,70px); line-height:.98; letter-spacing:-.06em; }
.closing-cta p { margin:0 auto 28px; color:#a8b4c6; font-size:16px; }
.industry-hero { background:radial-gradient(circle at 7% 0,rgba(16,185,129,.1),transparent 27%),radial-gradient(circle at 93% 15%,rgba(79,70,229,.14),transparent 29%),#f8fafc; }
.journey-visual { position:relative; padding:45px; border:1px solid rgba(255,255,255,.85); border-radius:30px; background:linear-gradient(145deg,#101829,#090f1c); box-shadow:0 38px 90px rgba(15,23,42,.2); color:#fff; }
.journey-visual small { color:#93a4bd; font-size:9px; font-weight:900; letter-spacing:.15em; }
.journey-line { display:flex; justify-content:space-between; margin:45px 0 30px; position:relative; }
.journey-line:before { content:""; position:absolute; left:8px; right:8px; top:7px; height:2px; background:linear-gradient(90deg,#22d3ee,#8b5cf6); }
.journey-line i { z-index:1; width:16px; height:16px; border:4px solid #111a2b; border-radius:50%; background:#67e8f9; box-shadow:0 0 0 1px #38516e; }
.journey-visual strong { display:block; font-size:27px; line-height:1.35; letter-spacing:-.035em; }
.journey-result { margin-top:38px; padding:17px; border:1px solid #25334d; border-radius:15px; background:#121d30; color:#aab6c7; font-size:11px; }
.journey-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:45px; counter-reset:journey; }
.journey-steps span { padding:25px 18px; border:1px solid #22304a; border-radius:16px; background:#111a2b; color:#dbe3f0; font-size:13px; font-weight:800; counter-increment:journey; }
.journey-steps span:before { content:"0" counter(journey); display:block; margin-bottom:23px; color:#7dd3fc; font-size:10px; }
.case-hero { padding:160px 0 190px; color:#fff; background:radial-gradient(circle at 92% 10%,rgba(99,102,241,.3),transparent 34%),radial-gradient(circle at 0 100%,rgba(6,182,212,.13),transparent 30%),#080d18; }
.light-crumbs { color:#8390a3; }
.light-crumbs a:hover { color:#fff; }
.case-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; }
.case-heading h1 { margin:22px 0 0; font-size:clamp(58px,7vw,98px); line-height:.92; letter-spacing:-.07em; }
.case-heading > p { margin:0 0 8px; color:#a8b4c6; font-size:17px; line-height:1.75; }
.dark-eyebrow { color:#c7d2fe; border-color:#2a3854; background:#111a2b; }
.case-visual-wrap { margin-top:-120px; position:relative; }
.case-image,.case-art { width:100%; height:650px; display:block; border:8px solid #fff; border-radius:34px; object-fit:cover; box-shadow:0 38px 90px rgba(15,23,42,.2); }
.case-art { padding:55px; background:linear-gradient(145deg,#c7d2fe,#eef2ff 45%,#cffafe); }
.case-art.fashion { background:linear-gradient(145deg,#f4dfd2,#fff7ed); }
.case-art.saas { background:linear-gradient(145deg,#172554,#0f172a); }
.case-window { height:100%; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.18); }
.case-window-bar { height:48px; display:flex; gap:7px; align-items:center; padding:0 17px; border-bottom:1px solid var(--line); }
.case-window-bar i { width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.case-art-copy { height:60%; padding:60px; color:#fff; background:linear-gradient(120deg,rgba(10,16,29,.9),rgba(17,35,60,.72)); }
.case-art-copy small { font-size:10px; font-weight:900; letter-spacing:.15em; }
.case-art-copy h2 { max-width:650px; margin:17px 0; font-size:52px; line-height:.98; letter-spacing:-.055em; }
.case-art-copy p { color:#c3cfdd; }
.case-art-panels { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px; }
.case-art-panels span { height:88px; border-radius:15px; background:#f1f5f9; }
.case-overview { display:grid; grid-template-columns:.7fr 1.15fr .55fr; gap:60px; align-items:start; }
.case-overview aside { display:grid; gap:7px; padding-left:25px; border-left:1px solid var(--line); }
.case-overview aside small { margin-top:12px; color:#94a3b8; font-size:9px; font-weight:850; text-transform:uppercase; }
.case-overview aside strong { font-size:13px; }
.narrative-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.narrative-grid.single,.case-data-grid.single { grid-template-columns:minmax(0,900px); }
.narrative-grid article { padding:38px; border:1px solid var(--line); border-radius:26px; background:#fff; }
.narrative-grid article > span { color:#4f46e5; font-size:10px; font-weight:900; text-transform:uppercase; }
.narrative-grid h2 { margin:50px 0 18px; font-size:39px; line-height:1; letter-spacing:-.05em; }
.narrative-grid p { color:#64748b; line-height:1.8; white-space:pre-line; }
.case-data-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.case-data-grid ul { margin:34px 0 0; padding:0; list-style:none; }
.case-data-grid li { padding:15px 0; border-bottom:1px solid #23304a; font-size:18px; font-weight:750; }
.tech-chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; }
.tech-chips span { padding:11px 13px; border:1px solid #2a3955; border-radius:999px; background:#111b2d; color:#bdc8d8; font-size:11px; font-weight:800; }
.outcome-panel { max-width:950px; padding:60px; border:1px solid var(--line); border-radius:30px; background:linear-gradient(135deg,#f3f1ff,#fff 55%,#ecfeff); text-align:center; }
.outcome-panel p { max-width:720px; margin:20px auto 0; color:#64748b; font-size:17px; line-height:1.8; white-space:pre-line; }
.editorial-hero { padding:175px 0 90px; background:radial-gradient(circle at 85% 0,rgba(6,182,212,.12),transparent 30%),radial-gradient(circle at 7% 0,rgba(124,58,237,.13),transparent 30%),#f8fafc; }
.editorial-heading { display:grid; grid-template-columns:1.15fr .6fr; gap:70px; align-items:end; margin-top:25px; }
.editorial-heading h1 { margin:0; max-width:850px; font-size:clamp(58px,7vw,96px); line-height:.92; letter-spacing:-.07em; }
.editorial-heading p { margin:0 0 8px; color:#64748b; font-size:17px; line-height:1.7; }
.featured-resource { padding:35px 0 70px; background:#f8fafc; }
.featured-resource-card { display:grid; grid-template-columns:1.15fr .85fr; min-height:460px; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:#fff; box-shadow:0 25px 70px rgba(15,23,42,.08); }
.resource-image-wrap { min-height:420px; }
.resource-image-wrap img { width:100%; height:100%; display:block; object-fit:cover; }
.resource-image-placeholder { height:100%; display:flex; flex-direction:column; justify-content:end; padding:40px; color:#fff; background:radial-gradient(circle at 80% 10%,rgba(6,182,212,.24),transparent 30%),#0c1424; }
.resource-image-placeholder span { color:#a5b4fc; font-size:10px; letter-spacing:.15em; }
.resource-image-placeholder strong { max-width:450px; margin-top:14px; font-size:44px; line-height:1; }
.featured-resource-copy { display:flex; flex-direction:column; justify-content:center; padding:50px; }
.featured-resource-copy small,.resource-card small { color:#4f46e5; font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.featured-resource-copy h2 { margin:22px 0 15px; font-size:42px; line-height:1.04; letter-spacing:-.05em; }
.featured-resource-copy p { margin:0 0 30px; color:#64748b; line-height:1.7; }
.featured-resource-copy > span { color:#4338ca; font-size:12px; font-weight:850; }
.resource-list-section { padding-top:85px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resource-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; }
.resource-card-image { height:210px; display:grid; place-items:center; overflow:hidden; color:#64748b; background:linear-gradient(135deg,#eef2ff,#ecfeff); font-size:10px; font-weight:900; letter-spacing:.13em; }
.resource-card-image img { width:100%; height:100%; object-fit:cover; transition:.4s var(--ease); }
.resource-card:hover img { transform:scale(1.04); }
.resource-card > div { display:flex; flex:1; flex-direction:column; padding:23px; }
.resource-card h3 { margin:13px 0 10px; font-size:21px; line-height:1.25; letter-spacing:-.035em; }
.resource-card p { flex:1; color:#64748b; font-size:12px; line-height:1.65; }
.resource-card .text-link { margin-top:auto; }
.empty-panel { padding:55px; border:1px solid var(--line); border-radius:28px; background:#f8fafc; text-align:center; }
.article-hero { padding:165px 0 85px; background:radial-gradient(circle at 88% 0,rgba(6,182,212,.1),transparent 30%),radial-gradient(circle at 8% 0,rgba(124,58,237,.11),transparent 30%),#f8fafc; }
.article-hero-inner { max-width:970px; }
.article-hero h1 { margin:25px 0; font-size:clamp(54px,6vw,82px); line-height:.98; letter-spacing:-.062em; }
.article-hero p { max-width:800px; margin:0; color:#64748b; font-size:19px; line-height:1.7; }
.article-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; color:#8793a6; font-size:11px; font-weight:750; }
.article-image-wrap { max-width:1120px; margin-top:40px; }
.article-image { width:100%; max-height:610px; display:block; border-radius:30px; object-fit:cover; box-shadow:0 28px 70px rgba(15,23,42,.12); }
.article-layout { display:grid; grid-template-columns:220px minmax(0,760px); gap:70px; justify-content:center; padding-top:90px; padding-bottom:110px; }
.article-aside { position:sticky; top:115px; align-self:start; display:grid; gap:10px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-aside > a { margin-bottom:13px; color:#4f46e5; font-size:11px; font-weight:850; }
.article-aside strong { margin-bottom:5px; font-size:11px; }
.article-aside nav { display:grid; gap:10px; }
.article-aside nav a { color:#64748b; font-size:11px; line-height:1.4; }
.article-aside nav a:hover { color:#4338ca; }
.article-body { color:#344258; font-size:17px; line-height:1.85; }
.article-body h2 { scroll-margin-top:110px; margin:65px 0 20px; color:#0b1220; font-size:38px; line-height:1.08; letter-spacing:-.045em; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:42px 0 15px; color:#111827; font-size:25px; letter-spacing:-.035em; }
.article-body p { margin:0 0 24px; white-space:pre-line; }
.article-body ul { margin:0 0 30px; padding-left:22px; }
.article-body li { margin:10px 0; padding-left:6px; }
.article-callout { margin:35px 0; padding:25px 28px; border-left:4px solid #6366f1; border-radius:0 18px 18px 0; color:#334155; background:#f2f3ff; font-weight:650; }
.article-cta { margin-top:70px; padding:36px; border:1px solid rgba(79,70,229,.14); border-radius:25px; background:linear-gradient(135deg,#f2f0ff,#fff 58%,#ecfeff); }
.article-cta small { color:#4f46e5; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.article-cta h2 { margin:15px 0 10px; font-size:34px; }
.article-cta p { font-size:14px; }
.status-page { min-height:78vh; display:grid; place-items:center; padding:145px 20px 80px; background:radial-gradient(circle at 15% 5%,rgba(124,58,237,.12),transparent 30%),#f8fafc; }
.status-card { position:relative; max-width:850px; padding:65px; overflow:hidden; border:1px solid var(--line); border-radius:32px; background:#fff; box-shadow:var(--shadow); }
.status-card .status-code { position:absolute; right:20px; top:-40px; color:#f1f3f8; font-size:190px; font-weight:950; line-height:1; }
.status-card h1 { position:relative; margin:17px 0; font-size:clamp(50px,7vw,78px); line-height:.96; letter-spacing:-.065em; }
.status-card p { position:relative; max-width:610px; color:#64748b; font-size:17px; }
.public-legal-links { white-space:nowrap; }

@media(max-width:1000px) {
    .detail-hero-grid,.editorial-heading,.case-heading,.case-overview,.featured-resource-card { grid-template-columns:1fr; }
    .detail-hero-grid { gap:25px; }
    .detail-product-visual { min-height:460px; }
    .feature-list-grid,.resource-grid { grid-template-columns:repeat(2,1fr); }
    .process-cards { grid-template-columns:repeat(2,1fr); }
    .case-heading { gap:25px; }
    .case-hero { padding-bottom:160px; }
    .case-overview aside { padding:20px 0 0; border-left:0; border-top:1px solid var(--line); }
    .article-layout { grid-template-columns:1fr; gap:25px; }
    .article-aside { position:static; }
}

@media(max-width:680px) {
    .detail-hero { min-height:auto; padding:130px 0 65px; }
    .detail-hero h1 { font-size:52px; }
    .detail-hero p { font-size:16px; }
    .detail-product-visual { min-height:365px; margin-top:15px; }
    .detail-browser { inset:25px 5px 25px; }
    .detail-screen { min-height:290px; padding:35px 25px; }
    .detail-screen h2 { font-size:34px; }
    .detail-proof { right:0; }
    .proof-strip .public-shell,.split-intro,.feature-list-grid,.benefit-grid,.process-cards,.related-grid,.journey-steps,.narrative-grid,.case-data-grid,.resource-grid { grid-template-columns:1fr; }
    .proof-strip span + span { border-left:0; border-top:1px solid var(--line); }
    .content-section,.faq-section { padding:75px 0; }
    .split-intro { gap:25px; }
    .section-title-row { display:block; }
    .section-title-row > p { margin-top:15px; }
    .journey-visual { padding:28px; }
    .closing-cta { padding:60px 20px; border-radius:28px; }
    .case-hero { padding:135px 0 135px; }
    .case-heading h1 { font-size:54px; }
    .case-visual-wrap { margin-top:-80px; }
    .case-image,.case-art { height:410px; border-width:5px; border-radius:24px; }
    .case-art { padding:14px; }
    .case-art-copy { padding:30px 24px; }
    .case-art-copy h2 { font-size:35px; }
    .narrative-grid article,.outcome-panel { padding:27px; }
    .editorial-hero { padding:140px 0 65px; }
    .editorial-heading { gap:24px; }
    .editorial-heading h1 { font-size:56px; }
    .featured-resource-card { min-height:0; }
    .resource-image-wrap { min-height:260px; }
    .featured-resource-copy { padding:30px 24px; }
    .featured-resource-copy h2 { font-size:34px; }
    .article-hero { padding:135px 0 60px; }
    .article-hero h1 { font-size:48px; }
    .article-hero p { font-size:16px; }
    .article-image-wrap { margin-top:20px; }
    .article-image { border-radius:20px; }
    .article-layout { padding-top:60px; padding-bottom:75px; }
    .article-body { font-size:16px; }
    .article-body h2 { font-size:32px; }
    .article-cta { padding:25px; }
    .status-card { padding:40px 25px; }
    .status-card .status-code { font-size:120px; }
}