.clr {
    color: var(--cyan);
}

:root {
    --bg: #07070b;
    --bg2: #06101d;
    --panel: rgba(8,22,38,.68);
    --text: #f5f8ff;
    --muted: #91a0b4;
    --cyan: #73f4ff;
    --blue: #a78bfa;
    --line: rgba(167,139,250,.15);
    --glow: rgba(115,244,255,.28);
    --max: 1260px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x: hidden
}

html {
    scrollbar-width: none
}

    html::-webkit-scrollbar {
        width: 0;
        height: 0
    }

body::-webkit-scrollbar {
    width: 0;
    height: 0
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background: radial-gradient(circle at 75% 10%,rgba(167,139,250,.16),transparent 30%), radial-gradient(circle at 20% 45%,rgba(115,244,255,.06),transparent 35%), linear-gradient(180deg,#07070b,#0b0a12 55%,#07070b);
}

body:after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .34;
    background-image: linear-gradient(rgba(167,139,250,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.035) 1px,transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom,black 0%,transparent 92%);
}

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

.wrap {
    width: min(var(--max),calc(100% - 56px));
    margin: auto
}

nav {
    height: 82px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 5
}

.logo {
    width: 118px;
    height: 42px;
    display: flex;
    align-items: center
}

    .logo img {
        display: block;
        width: 112px;
        height: 38px;
        object-fit: contain;
        object-position: left center
    }

.navlinks {
    display: flex;
    gap: 34px;
    font-size: 11px;
    color: #b8c4d3;
    letter-spacing: .03em
}

    .navlinks a:hover {
        color: var(--cyan)
    }

.navcta {
    border: 1px solid rgba(115,244,255,.55);
    padding: 12px 18px;
    font-size: 10px;
    font-weight: 800;
    color: var(--cyan);
    box-shadow: 0 0 20px rgba(115,244,255,.05)
}

.hero {
    min-height: calc(100vh - 82px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    position: relative;
    padding: 65px 0 75px
}

.hero-copy {
    position: relative;
    z-index: 2
}

.pill {
    display: inline-flex;
    border: 1px solid rgba(115,244,255,.65);
    color: var(--cyan);
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    background: rgba(115,244,255,.04);
    box-shadow: 0 0 25px rgba(115,244,255,.08)
}

h1 {
    font-size: clamp(55px,6.8vw,92px);
    line-height: .88;
    letter-spacing: -.065em;
    margin: 23px 0
}

    h1 span, h2 span {
        color: var(--cyan)
    }

.hero-lead {
    font-size: 17px;
    line-height: 1.75;
    color: #aeb9c9;
    max-width: 610px
}

    .hero-lead strong {
        color: #fff
    }

.actions {
    display: flex;
    gap: 12px;
    margin: 30px 0 28px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 15px 21px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em
}

.primary {
    background: linear-gradient(110deg,#73f4ff 0%,#a78bfa 55%,#ff5bd7 100%);
    box-shadow: 0 0 35px rgba(115,244,255,.18);
    color: #00101a
}

.secondary {
    border: 1px solid rgba(167,139,250,.35);
    background: rgba(8,20,35,.4)
}

.micro-stats {
    display: flex;
    gap: 34px;
    flex-wrap: wrap
}

    .micro-stats div {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #8391a5;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .12em
    }

    .micro-stats b {
        font-size: 17px;
        color: var(--cyan);
        letter-spacing: -.03em
    }

.hero-art {
    height: 590px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.neural {
    width: 430px;
    height: 430px;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 50% 45%,rgba(115,244,255,.15),rgba(7,21,38,.15) 45%,transparent 68%);
    border: 1px solid rgba(115,244,255,.25);
    box-shadow: 0 0 90px rgba(24,169,255,.1),inset 0 0 70px rgba(115,244,255,.04);
}

    .neural:before, .neural:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        inset: 7%;
        border: 1px solid rgba(115,244,255,.13)
    }

    .neural:after {
        inset: 17%;
        border-style: dashed;
        animation: spin 20s linear infinite
    }

.scan {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--cyan),transparent);
    box-shadow: 0 0 16px var(--cyan);
    transform: translate(-50%,-50%);
    animation: scan 3.8s ease-in-out infinite
}

.core {
    position: absolute;
    inset: 29%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle,#123d57,#071423 65%,#04101c);
    border: 1px solid rgba(115,244,255,.55);
    box-shadow: 0 0 70px rgba(115,244,255,.18);
}

.wave {
    height: 90px;
    display: flex;
    gap: 5px;
    align-items: center
}

    .wave i {
        width: 4px;
        border-radius: 9px;
        background: linear-gradient(#fff,var(--cyan),var(--violet));
        box-shadow: 0 0 12px var(--cyan);
        animation: wave 1.15s infinite ease-in-out
    }

        .wave i:nth-child(1) {
            height: 22px
        }

        .wave i:nth-child(2) {
            height: 42px;
            animation-delay: .08s
        }

        .wave i:nth-child(3) {
            height: 65px;
            animation-delay: .16s
        }

        .wave i:nth-child(4) {
            height: 38px;
            animation-delay: .24s
        }

        .wave i:nth-child(5) {
            height: 74px;
            animation-delay: .32s
        }

        .wave i:nth-child(6) {
            height: 48px;
            animation-delay: .4s
        }

        .wave i:nth-child(7) {
            height: 27px;
            animation-delay: .48s
        }

.core small {
    position: absolute;
    bottom: 32px;
    font-size: 7px;
    letter-spacing: .2em;
    color: #7feeff
}

.lang {
    position: absolute;
    padding: 10px 14px;
    border: 1px solid rgba(115,244,255,.25);
    background: rgba(4,17,31,.65);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    color: #b9eaff;
    font-size: 12px;
    box-shadow: 0 0 25px rgba(115,244,255,.06)
}

.l1 {
    top: 15%;
    left: 4%
}

.l2 {
    top: 30%;
    right: 0
}

.l3 {
    bottom: 22%;
    left: 0
}

.l4 {
    bottom: 10%;
    right: 12%
}

.live-card {
    position: absolute;
    right: -15px;
    bottom: 10px;
    width: 320px;
    border: 1px solid rgba(115,244,255,.3);
    background: rgba(5,16,30,.82);
    backdrop-filter: blur(18px);
    padding: 17px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35)
}

.live-top {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: .12em;
    color: #b5c1d1
}

.live-dot {
    color: #6dffb3
}

.live-card p {
    font-size: 15px;
    line-height: 1.45;
    margin: 15px 0;
    color: #e9f7ff
}

.live-card .hindi {
    font-family: system-ui;
    font-size: 17px
}

.bars {
    height: 28px;
    display: flex;
    align-items: end;
    gap: 2px
}

    .bars i {
        width: 3px;
        background: var(--cyan);
        height: 8px;
        animation: bars 1s infinite ease-in-out
    }

        .bars i:nth-child(2n) {
            height: 18px;
            animation-delay: .12s
        }

        .bars i:nth-child(3n) {
            height: 25px;
            animation-delay: .22s
        }

.performance {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px,92%);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid rgba(115,244,255,.2);
    background: rgba(4,15,27,.78);
    backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 18px 22px
}

    .performance strong {
        display: block;
        color: var(--cyan);
        font-size: 20px
    }

    .performance small {
        font-size: 7px;
        color: #7e8c9f;
        letter-spacing: .12em
    }

section {
    padding: 60px 0;
    border-top: 1px solid var(--line)
}

.eyebrow {
    font-size: 9px;
    color: var(--cyan);
    letter-spacing: .22em;
    font-weight: 900
}

h2 {
    font-size: clamp(43px,5vw,70px);
    line-height: .94;
    letter-spacing: -.06em;
    margin: 18px 0 25px
}

.lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 720px
}

.why {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    align-items: start
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px 35px
}

.why-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px
}

.icon {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(115,244,255,.3);
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    font-size: 14px;
    background: rgba(115,244,255,.04)
}

.why-item h3 {
    margin: 0 0 8px;
    font-size: 15px
}

.why-item p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6
}

.feature-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 10px;
    margin-top: 55px
}

.feature {
    min-height: 155px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg,rgba(10,27,45,.65),rgba(5,14,25,.6));
    border-radius: 13px;
    padding: 18px;
    transition: .35s
}

    .feature:hover {
        transform: translateY(-6px);
        border-color: rgba(115,244,255,.4);
        box-shadow: 0 15px 40px rgba(115,244,255,.06)
    }

    .feature .icon {
        margin-bottom: 30px
    }

    .feature h3 {
        font-size: 12px;
        line-height: 1.3;
        margin: 0
    }

.impact {
    background: linear-gradient(180deg,rgba(4,13,24,.9),rgba(2,8,15,.75));
    position: relative;
    overflow: hidden
}

    .impact:after {
        content: "";
        position: absolute;
        width: 800px;
        height: 280px;
        left: -100px;
        bottom: -90px;
        background: radial-gradient(ellipse,rgba(167,139,250,.12),transparent 65%);
        filter: blur(15px);
        pointer-events: none
    }

.impact-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 65px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.impact-item {
    padding: 34px 28px;
    border-right: 1px solid var(--line);
    position: relative
}

    .impact-item:last-child {
        border: 0
    }

    .impact-item .num {
        color: var(--cyan);
        font-size: 10px;
        font-weight: 900
    }

    .impact-item h3 {
        font-size: 16px;
        margin: 30px 0 10px
    }

    .impact-item p {
        font-size: 12px;
        line-height: 1.65;
        color: var(--muted);
        margin: 0
    }

.flow {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    margin-top: 50px;
    font-size: 10px;
    letter-spacing: .17em;
    font-weight: 900

}

    .flow i {
        font-style: normal;
        color: var(--cyan);
        font-size: 19px
    }

.use-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line)
}

.case {
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    align-items: center;
    gap: 12px;
    padding: 19px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px
}

    .case .ci {
        width: 25px;
        height: 25px;
        border: 1px solid rgba(115,244,255,.2);
        border-radius: 7px;
        display: grid;
        place-items: center;
        color: var(--cyan);
        font-size: 10px
    }

    .case .arrow {
        text-align: center;
        color: var(--cyan);
        font-size: 18px
    }

    .case:hover {
        color: var(--cyan)
    }

.use-visual {
    height: 390px;
    position: relative;
    display: grid;
    place-items: center
}

    .use-visual .platform {
        width: 280px;
        height: 80px;
        border-radius: 50%;
        border: 1px solid rgba(115,244,255,.5);
        box-shadow: 0 0 60px rgba(115,244,255,.18),inset 0 0 35px rgba(115,244,255,.08);
        background: radial-gradient(ellipse,rgba(115,244,255,.16),transparent 68%);
        position: absolute;
        bottom: 55px
    }

    .use-visual .beam {
        position: absolute;
        bottom: 70px;
        width: 100px;
        height: 220px;
        background: linear-gradient(to top,rgba(115,244,255,.35),transparent);
        filter: blur(12px);
        clip-path: polygon(42% 0,58% 0,100% 100%,0 100%)
    }

.orbit-node {
    position: absolute;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(115,244,255,.45);
    border-radius: 50%;
    background: #061522;
    display: grid;
    place-items: center;
    color: var(--cyan);
    box-shadow: 0 0 20px rgba(115,244,255,.1)
}

.on1 {
    top: 20%;
    left: 20%
}

.on2 {
    top: 10%;
    right: 20%
}

.on3 {
    bottom: 28%;
    left: 12%
}

.on4 {
    bottom: 25%;
    right: 12%
}

.loop {
    background: #030b16
}

.loop-head {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.loop-flow {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-top: 55px
}

.loop-step {
    position: relative;
    border: 1px solid rgba(115,244,255,.2);
    border-radius: 13px;
    padding: 28px;
    background: linear-gradient(140deg,rgba(10,28,48,.8),rgba(4,12,22,.7))
}

    .loop-step:not(:last-child):after {
        content: "→";
        position: absolute;
        right: -19px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--cyan);
        font-size: 20px;
        z-index: 2
    }

    .loop-step .big {
        font-size: 26px;
        color: var(--cyan)
    }

    .loop-step h3 {
        font-size: 15px;
        margin: 22px 0 8px
    }

    .loop-step p {
        font-size: 12px;
        line-height: 1.6;
        color: var(--muted);
        margin: 0
    }

.enterprise {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.enterprise-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.ent {
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(7,20,34,.6)
}

    .ent h3 {
        font-size: 14px;
        margin: 0 0 8px
    }

    .ent p {
        font-size: 11px;
        line-height: 1.6;
        color: var(--muted);
        margin: 0
    }

.india-art {
    height: 380px;
    border: 1px solid rgba(115,244,255,.12);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%,rgba(115,244,255,.08),transparent 60%)
}

    .india-art:before {
        content: "INDIA";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 110px;
        font-weight: 1000;
        letter-spacing: -.08em;
        color: rgba(115,244,255,.06)
    }

    .india-art:after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border: 1px dashed rgba(115,244,255,.2);
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        animation: spin 22s linear infinite
    }

.faq {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 90px
}

    .faq h2 {
        position: sticky;
        top: 60px
    }

details {
    border-top: 1px solid var(--line)
}

    details:last-child {
        border-bottom: 1px solid var(--line)
    }

summary {
    list-style: none;
    padding: 22px 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

    summary::-webkit-details-marker {
        display: none
    }

    summary:after {
        content: "+";
        color: var(--cyan);
        font-size: 22px;
        font-weight: 400
    }

details[open] summary:after {
    content: "−"
}

details p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
    padding: 0 35px 22px 5px
}

.cta {
    text-align: center;
    padding-bottom: 100px
}

    .cta .lead {
        margin: 0 auto 30px
    }

footer {
    border-top: 1px solid var(--line);
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    color: #667386;
    font-size: 9px;
    letter-spacing: .12em
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes scan {
    0%,100% {
        opacity: .1;
        transform: translate(-50%,-130px)
    }

    50% {
        opacity: 1;
        transform: translate(-50%,130px)
    }
}

@keyframes wave {
    50% {
        transform: scaleY(.35);
        opacity: .55
    }
}

@keyframes bars {
    50% {
        transform: scaleY(.35);
        opacity: .4
    }
}

@media (max-width:1000px) {
    .hero, .why, .use-grid, .enterprise, .faq, .impact-head {
        grid-template-columns: 1fr
    }

    .hero-art {
        height: 520px
    }

    .feature-grid {
        grid-template-columns: repeat(4,1fr)
    }

    .impact-grid {
        grid-template-columns: 1fr 1fr
    }

    .enterprise {
        gap: 45px
    }

    .faq h2 {
        position: static
    }
}

@media (max-width:700px) {
    .flow {
        overflow-x: scroll;
    }
    .wrap {
        width: calc(100% - 32px)
    }

    .navlinks {
        display: none
    }

    .hero {
        padding-top: 45px
    }

    .hero-art {
        height: 430px
    }

    .neural {
        width: 330px;
        height: 330px
    }

    .live-card {
        right: -5px;
        width: 270px
    }

    .performance {
        position: relative;
        bottom: auto;
        margin-top: -30px;
        grid-template-columns: 1fr 1fr;
        gap: 14px
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr
    }

    .why-grid, .enterprise-list, .cases, .loop-flow, .impact-grid {
        grid-template-columns: 1fr
    }

    .impact-item {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .loop-step:not(:last-child):after {
        content: "↓";
        right: 50%;
        top: auto;
        bottom: -27px;
        transform: translateX(50%)
    }

    .loop-step {
        margin-bottom: 18px
    }

    .micro-stats {
        gap: 18px
    }

    .use-visual {
        height: 320px
    }
}

/* === FINAL VISUAL PASS === */
body {
    background: radial-gradient(ellipse at 12% 8%,rgba(0,178,255,.20),transparent 27%), radial-gradient(ellipse at 82% 18%,rgba(255,91,215,.20),transparent 31%), radial-gradient(ellipse at 52% 68%,rgba(167,139,250,.08),transparent 30%), linear-gradient(180deg,#06060a 0%,#0d0b16 48%,#07070b 100%);
}

    body:before {
        opacity: .72;
        background: radial-gradient(ellipse at 50% 0%,rgba(0,195,255,.11),transparent 45%), radial-gradient(ellipse at 100% 45%,rgba(42,73,255,.10),transparent 35%), linear-gradient(180deg,rgba(0,0,0,0),rgba(167,139,250,.025));
        animation: ambientBreath 9s ease-in-out infinite alternate;
    }

    body:after {
        opacity: .48;
        background-image: linear-gradient(rgba(64,170,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(64,170,255,.045) 1px,transparent 1px);
        background-size: 58px 58px;
    }

@keyframes ambientBreath {
    0% {
        transform: scale(1);
        filter: blur(0)
    }

    100% {
        transform: scale(1.08);
        filter: blur(2px)
    }
}

.hero {
    min-height: calc(100vh - 82px);
    overflow: visible;
}

    .hero:before {
        content: "";
        position: absolute;
        left: -15%;
        top: 15%;
        width: 75%;
        height: 70%;
        background: radial-gradient(ellipse at 55% 40%,rgba(115,244,255,.10),transparent 42%), repeating-radial-gradient(ellipse at 45% 55%,rgba(43,157,255,.10) 0 1px,transparent 1px 24px);
        filter: blur(.2px);
        opacity: .65;
        transform: rotate(-8deg);
        animation: networkFloat 12s ease-in-out infinite alternate;
        pointer-events: none;
    }

@keyframes networkFloat {
    from {
        transform: rotate(-8deg) translate3d(-12px,0,0)
    }

    to {
        transform: rotate(-5deg) translate3d(20px,-10px,0)
    }
}

/* Hero visual: no overlap */
.hero-art {
    height: 620px;
    align-items: center;
    overflow: visible;
}

.neural {
    width: 445px;
    height: 445px;
    transform: translateY(-30px);
}

.live-card {
    right: -18px;
    top: -35px;
    bottom: auto;
    width: 325px;
    z-index: 5;
}

.performance {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 6;
    width: 560px;
    max-width: 90%;
}

/* Give the hero a richer data-network feel */
.hero-art:before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle,rgba(115,244,255,.07) 0 1px,transparent 1px 28px);
    mask-image: radial-gradient(circle,black 0 48%,transparent 73%);
    animation: orbital 25s linear infinite;
}

@keyframes orbital {
    to {
        transform: rotate(360deg)
    }
}

section {
    position: relative
}

    section:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(115,244,255,.28),transparent);
    }

/* Use-cases: visually stronger */
.use-grid {
    padding: 34px;
    border: 1px solid rgba(115,244,255,.13);
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(5,20,35,.75),rgba(2,10,20,.5));
    box-shadow: inset 0 0 60px rgba(115,244,255,.025);
}

.case {
    padding: 18px 10px;
}

    .case .arrow {
        transition: transform .25s ease;
    }

    .case:hover .arrow {
        transform: translateX(5px)
    }

/* Business impact gets a more open, editorial layout */
.impact {
    background: radial-gradient(ellipse at 20% 70%,rgba(115,244,255,.10),transparent 35%), linear-gradient(180deg,rgba(3,13,25,.9),rgba(1,7,14,.95));
}

.impact-grid {
    background: linear-gradient(90deg,rgba(115,244,255,.025),transparent);
}

.impact-item {
    min-height: 210px;
}

/* FAQ: heading scrolls normally with the content */
.faq {
    align-items: start;
}

    .faq h2 {
        position: static !important;
        top: auto !important;
    }

    .faq > div:first-child {
        align-self: start;
    }

/* More breathing room around the final content */
#faq {
    padding-top: 110px;
    padding-bottom: 95px
}

.cta {
    background: radial-gradient(ellipse at 50% 100%,rgba(255,91,215,.12),transparent 48%);
}

/* Floating particles */
.particle-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: .8;
}

    .particle-field i {
        position: absolute;
        width: 2px;
        height: 2px;
        background: #73f4ff;
        border-radius: 50%;
        box-shadow: 0 0 9px #73f4ff;
        animation: particle 6s ease-in-out infinite;
    }

        .particle-field i:nth-child(1) {
            left: 8%;
            top: 20%;
            animation-delay: .3s
        }

        .particle-field i:nth-child(2) {
            left: 24%;
            top: 65%;
            animation-delay: 1.4s
        }

        .particle-field i:nth-child(3) {
            left: 47%;
            top: 15%;
            animation-delay: 2.1s
        }

        .particle-field i:nth-child(4) {
            left: 69%;
            top: 34%;
            animation-delay: .8s
        }

        .particle-field i:nth-child(5) {
            left: 86%;
            top: 18%;
            animation-delay: 1.8s
        }

        .particle-field i:nth-child(6) {
            left: 91%;
            top: 70%;
            animation-delay: 2.7s
        }

        .particle-field i:nth-child(7) {
            left: 55%;
            top: 82%;
            animation-delay: 3.2s
        }

@keyframes particle {
    0%,100% {
        opacity: .15;
        transform: translateY(0) scale(.8)
    }

    50% {
        opacity: 1;
        transform: translateY(-18px) scale(1.5)
    }
}

@media (max-width:700px) {
    .hero-art {
        height: 560px
    }

    .neural {
        width: 330px;
        height: 330px;
        transform: none
    }

    .live-card {
        top: 12px;
        right: 0;
        width: 270px
    }

    .performance {
        bottom: 0;
        width: 94%;
        left: 90px;
    }

    .use-grid {
        padding: 20px
    }
}

/* ===== ARIA STT — VISUAL WOW PASS ===== */
body {
    background: radial-gradient(ellipse at 12% 5%,rgba(167,139,250,.17),transparent 27%), radial-gradient(ellipse at 88% 20%,rgba(255,91,215,.10),transparent 24%), radial-gradient(ellipse at 50% 58%,rgba(115,244,255,.07),transparent 34%), linear-gradient(180deg,#06060a 0%,#0a0911 48%,#06060a 100%);
}

    body:before {
        background: radial-gradient(circle at 50% 8%,rgba(167,139,250,.10),transparent 35%), radial-gradient(circle at 90% 55%,rgba(255,91,215,.07),transparent 30%);
    }

    body:after {
        background-image: linear-gradient(rgba(167,139,250,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(167,139,250,.035) 1px,transparent 1px);
    }

h1 span, h2 span {
    background: linear-gradient(100deg,var(--cyan),var(--violet) 58%,var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.pill {
    border-color: rgba(115,244,255,.5);
    color: var(--cyan);
    box-shadow: 0 0 25px rgba(167,139,250,.08),inset 0 0 18px rgba(255,91,215,.025)
}

.primary {
    background: linear-gradient(110deg,var(--cyan) 0%,var(--violet) 58%,var(--pink) 100%);
    color: #07070b !important;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 0 35px rgba(167,139,250,.20),0 0 65px rgba(115,244,255,.08);
    text-shadow: none;
    position: relative;
    z-index: 10;
}

    .primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 45px rgba(167,139,250,.28),0 0 80px rgba(115,244,255,.12);
    }

.navcta {
    border-color: rgba(167,139,250,.45);
    color: var(--cyan);
}

.neural {
    background: radial-gradient(circle at 40% 35%,rgba(115,244,255,.13),transparent 35%), radial-gradient(circle at 65% 65%,rgba(255,91,215,.10),transparent 40%), transparent;
    border-color: rgba(167,139,250,.35);
    box-shadow: 0 0 100px rgba(167,139,250,.12),inset 0 0 80px rgba(115,244,255,.04)
}

    .neural:before {
        border-color: rgba(115,244,255,.13)
    }

    .neural:after {
        border-color: rgba(255,91,215,.20)
    }

.core {
    background: radial-gradient(circle,#19203b,#0b0a13 65%,#07070b);
    border-color: rgba(115,244,255,.55);
    box-shadow: 0 0 80px rgba(115,244,255,.14),0 0 60px rgba(167,139,250,.10),inset 0 0 35px rgba(255,91,215,.05)
}

.lang {
    border-color: rgba(167,139,250,.28);
    background: rgba(12,10,21,.72);
    box-shadow: 0 0 30px rgba(167,139,250,.06)
}

.live-card, .performance {
    border-color: rgba(167,139,250,.28);
    background: linear-gradient(135deg,rgba(20,17,34,.84),rgba(7,8,14,.78));
    box-shadow: 0 22px 65px rgba(0,0,0,.38),0 0 45px rgba(167,139,250,.06)
}

    .performance strong {
        color: var(--cyan)
    }

.feature:hover {
    border-color: rgba(115,244,255,.35);
    box-shadow: 0 18px 45px rgba(167,139,250,.08)
}

.impact {
    background: radial-gradient(ellipse at 18% 68%,rgba(167,139,250,.11),transparent 34%), radial-gradient(ellipse at 80% 30%,rgba(255,91,215,.05),transparent 28%), linear-gradient(180deg,rgba(9,8,16,.94),rgba(6,6,11,.98));
}

.impact-grid {
    background: transparent;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.impact-item {
    background: transparent;
    border-right: 1px solid var(--line);
}

.loop {
    background: radial-gradient(ellipse at 80% 60%,rgba(115,244,255,.06),transparent 35%), transparent;
}

.loop-step {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 28px 12px 28px 0;
}

    .loop-step:not(:last-child):after {
        content: none !important;
        display: none !important;
    }

    .loop-step:hover .big {
        filter: drop-shadow(0 0 12px rgba(255,91,215,.45))
    }

.use-grid {
    position: relative;
}

    .use-grid:after {
        content: "";
        position: absolute;
        right: 0;
        top: 10%;
        width: 48%;
        height: 78%;
        background: radial-gradient(circle,rgba(115,244,255,.06),transparent 60%);
        pointer-events: none;
    }

.use-visual {
    filter: drop-shadow(0 0 35px rgba(115,244,255,.08));
}

    .use-visual .platform {
        border-color: rgba(115,244,255,.62);
        box-shadow: 0 0 70px rgba(115,244,255,.17),0 0 60px rgba(167,139,250,.10),inset 0 0 40px rgba(255,91,215,.06);
        animation: platformPulse 2.8s ease-in-out infinite;
    }

    .use-visual .beam {
        background: linear-gradient(to top,rgba(115,244,255,.42),rgba(167,139,250,.10),transparent);
        animation: beamPulse 2.8s ease-in-out infinite;
    }

.orbit-node {
    border-color: rgba(115,244,255,.52);
    background: #0b0a13;
    box-shadow: 0 0 25px rgba(115,244,255,.12);
    animation: nodeBlink 2.2s ease-in-out infinite;
}

.on2 {
    animation-delay: .35s
}

.on3 {
    animation-delay: .7s
}

.on4 {
    animation-delay: 1.05s
}

@keyframes platformPulse {
    0%,100% {
        transform: scale(.96);
        opacity: .68;
        box-shadow: 0 0 55px rgba(115,244,255,.10),0 0 100px rgba(167,139,250,.07)
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
        box-shadow: 0 0 95px rgba(115,244,255,.25),0 0 150px rgba(255,91,215,.10)
    }
}

@keyframes beamPulse {
    0%,100% {
        opacity: .35;
        transform: scaleX(.8)
    }

    50% {
        opacity: .9;
        transform: scaleX(1.08)
    }
}

@keyframes nodeBlink {
    0%,100% {
        opacity: .48;
        transform: scale(.94)
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow: 0 0 35px rgba(115,244,255,.25),0 0 60px rgba(167,139,250,.12)
    }
}

.enterprise {
    background: transparent;
}

.ent {
    background: transparent;
    border-color: var(--line);
}

.faq {
    background: transparent;
}

    .faq details:hover summary {
        color: var(--cyan)
    }

        .faq details:hover summary:after {
            color: var(--pink)
        }

.cta {
    background: radial-gradient(ellipse at 50% 100%,rgba(255,91,215,.09),transparent 42%), radial-gradient(ellipse at 50% 0%,rgba(115,244,255,.07),transparent 42%);
}

footer {
    background: rgba(4,4,8,.65)
}

/* Make section 04 and 05 visually continuous with the page, not like separate cards. */
#usecases, #voiceai {
    padding-left: 0;
    padding-right: 0;
}

    #usecases > .use-grid {
        width: 100%;
    }

    #voiceai .loop-head, #voiceai .loop-flow {
        width: 100%;
    }

/* More cinematic scroll transitions */
section {
    isolation: isolate;
}

    section:after {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(167,139,250,.10),rgba(115,244,255,.12),transparent);
        pointer-events: none;
    }

/* CTA + logo final visibility correction */
.hero .actions .primary,
.cta .primary {
    color: #07070b !important;
    opacity: 1 !important;
    visibility: visible !important;
}

nav .navcta {
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
}

@media (max-width:700px) {
    .logo {
        width: 100px;
        height: 38px
    }

        .logo img {
            width: 96px;
            height: 34px
        }

    nav .navcta {
        padding: 10px 12px;
        font-size: 9px
    }
}


/* FINAL POLISH — layout unchanged */
.hero h1 {
    margin-bottom: 16px !important;
}

.hero-lead {
    margin-top: 0 !important;
}

.hero .actions {
    margin-top: 24px !important;
}

    /* Keep CTA text readable against the aurora background. */
    .hero .actions .primary,
    .cta .primary {
        background: linear-gradient(110deg,#73f4ff 0%,#a78bfa 58%,#ff5bd7 100%) !important;
        color: #050509 !important;
        -webkit-text-fill-color: #050509 !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        box-shadow: 0 0 34px rgba(167,139,250,.22),0 0 60px rgba(115,244,255,.10) !important;
    }

/* Header CTA: same treatment, but compact. */
nav .navcta {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(110deg,rgba(115,244,255,.16),rgba(167,139,250,.22),rgba(255,91,215,.16)) !important;
    border: 1px solid rgba(115,244,255,.68) !important;
    box-shadow: 0 0 25px rgba(167,139,250,.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bottom CTA gets stronger contrast too. */
.cta .primary:hover,
.hero .actions .primary:hover {
    color: #050509 !important;
    -webkit-text-fill-color: #050509 !important;
    transform: translateY(-2px);
}

/* Use the unused horizontal breathing room in the business-impact heading
           without changing the two-column layout. */
.impact-head {
    column-gap: 110px !important;
}

    .impact-head h2 {
        max-width: 650px;
        margin-bottom: 8px !important;
    }

    .impact-head .lead {
        align-self: end;
        padding-bottom: 4px;
    }

/* Keep the workflow heading from visually colliding with itself. */
#voiceai h2 {
    word-spacing: .02em;
    line-height: 1.02 !important;
    margin-bottom: 20px !important;
}

    #voiceai h2 span {
        display: inline-block;
        margin: 0 .16em;
        color: var(--cyan);
    }

/* Preserve the exact card layout while giving the workflow more breathing room. */
.loop-flow {
    margin-top: 42px !important;
}

.loop-step {
    padding-top: 24px !important;
}

/* Mobile: preserve layout, just stack naturally. */
@media (max-width:700px) {
    .hero h1 {
        margin-bottom: 14px !important
    }

    .hero .actions {
        margin-top: 20px !important
    }

    .impact-head {
        column-gap: 0 !important
    }
}


/* HERO HEADING VISIBILITY FIX — no layout redesign */
.hero h1 {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: .90 !important;
    margin-top: 23px !important;
    margin-bottom: 16px !important;
}

    .hero h1 span {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        white-space: normal !important;
        padding-bottom: .04em;
    }


    /* FINAL HEADING VISIBILITY FIX — keep existing layout/design */
    .hero h1 span {
        display: block !important;
        color: #73f4ff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #73f4ff !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        line-height: .90 !important;
        white-space: nowrap !important;
    }

@media (max-width:700px) {
    .hero h1 span {
        white-space: normal !important;
    }
}


/* React Bits GradientBlinds — background layer only */
#gradient-blinds-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: .20;
    mix-blend-mode: lighten;
}

    #gradient-blinds-background canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

.wrap {
    position: relative;
    z-index: 2;
}



/* =========================================================
           FINAL REQUESTED PASS
           1. Shivi assistant
           2. Larger feature descriptions
           3. Solid second-line heading treatment + subtle glow
           4. Talk-to-ARIA Google Form modal
           5. Tighten section 03 heading/body spacing
           ========================================================= */
/* ---- Heading system: same visual family as hero ---- */
h1,
h2,
.hero h1,
.impact-head h2,
#voiceai h2,
#faq h2,
#enterprise h2,
#usecases h2,
#capabilities h2,
.cta h2 {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: -0.065em !important;
    text-rendering: geometricPrecision;
}

    /* No more transparent/washed-out second lines. */
    h1 span,
    h2 span,
    h1 .clr,
    h2 .clr {
        color: #edf3fb !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #edf3fb !important;
        text-shadow: 0 0 10px rgba(115,244,255,.12), 0 0 26px rgba(115,244,255,.07);
    }

    /* 03 needs its blue/cyan accent back. */
    #usecases h2 span,
    #usecases h2 .clr {
        color: #73f4ff !important;
        -webkit-text-fill-color: #73f4ff !important;
        text-shadow: 0 0 9px rgba(115,244,255,.24), 0 0 25px rgba(115,244,255,.10);
    }

    /* Keep the hero's second line crisp instead of transparent. */
    .hero h1 span {
        color: #edf3fb !important;
        -webkit-text-fill-color: #edf3fb !important;
        text-shadow: 0 0 12px rgba(115,244,255,.16), 0 0 30px rgba(115,244,255,.07);
    }

/* ---- Section 03: remove the awkward heading/body gap ---- */
#usecases h2 {
    margin-top: 14px !important;
    margin-bottom: 8px !important;
    line-height: .98 !important;
}

    #usecases h2 + .lead {
        margin-top: 0 !important;
    }

#usecases .cases {
    margin-top: 22px;
}

/* ---- Feature descriptions / labels: noticeably larger ---- */
.feature h3 {
    font-size: 14px !important;
    line-height: 1.42 !important;
    letter-spacing: -.015em;
}

.feature p,
.feature .description,
.feature small {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #aeb9c9 !important;
}

/* Also lift the supporting copy slightly so the whole feature section reads better. */
#capabilities .lead,
#capabilities .feature-head .lead {
    font-size: 16px !important;
}

/* =========================================================
           SHIVI
           ========================================================= */
.shivi-assistant {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 92px;
    height: 92px;
    z-index: 9998;
    pointer-events: none;
}

.shivi-orb {
    pointer-events: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(115,244,255,.65);
    background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.24), transparent 18%), radial-gradient(circle at 50% 55%, #172d4d 0%, #0b1426 55%, #080b13 100%);
    box-shadow: 0 0 0 1px rgba(167,139,250,.14), 0 0 25px rgba(115,244,255,.22), 0 0 55px rgba(167,139,250,.12);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    animation: shiviFloat 3.2s ease-in-out infinite;
}

    .shivi-orb:hover {
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 0 0 1px rgba(167,139,250,.22), 0 0 35px rgba(115,244,255,.30), 0 0 70px rgba(167,139,250,.16);
    }

.shivi-aura {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(115,244,255,.12);
    animation: shiviPulse 2.4s ease-in-out infinite;
}

.shivi-head {
    position: absolute;
    width: 38px;
    height: 42px;
    left: 18px;
    top: 16px;
    border-radius: 48% 48% 44% 44%;
    background: linear-gradient(145deg,#fff,#d9e5f3);
    box-shadow: 0 0 18px rgba(255,255,255,.12);
    overflow: hidden;
}

.shivi-hair {
    position: absolute;
    left: -4px;
    top: -6px;
    width: 46px;
    height: 23px;
    border-radius: 50%;
    background: linear-gradient(145deg,#171a34,#6b54d9);
}

.shivi-eye {
    position: absolute;
    top: 22px;
    width: 4px;
    height: 6px;
    border-radius: 50%;
    background: #10152a;
}

.shivi-eye-left {
    left: 10px;
}

.shivi-eye-right {
    right: 10px;
}

.shivi-smile {
    position: absolute;
    left: 15px;
    top: 29px;
    width: 9px;
    height: 5px;
    border-bottom: 1.5px solid #10152a;
    border-radius: 0 0 10px 10px;
}

.shivi-hand {
    position: absolute;
    right: -2px;
    top: 4px;
    font-size: 23px;
    transform-origin: 80% 80%;
    animation: shiviWave 1.1s ease-in-out 2;
    filter: drop-shadow(0 0 7px rgba(255,255,255,.18));
}

.shivi-status {
    position: absolute;
    right: 5px;
    bottom: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6dffb3;
    box-shadow: 0 0 12px #6dffb3;
}

@keyframes shiviWave {
    0%,100% {
        transform: rotate(8deg);
    }

    25% {
        transform: rotate(24deg);
    }

    50% {
        transform: rotate(-18deg);
    }

    75% {
        transform: rotate(20deg);
    }
}

@keyframes shiviFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes shiviPulse {
    0%,100% {
        transform: scale(.96);
        opacity: .3;
    }

    50% {
        transform: scale(1.12);
        opacity: .75;
    }
}

/* Speech bubble */
.shivi-bubble {
    position: absolute;
    right: 0;
    bottom: 86px;
    width: 270px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(115,244,255,.25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(13,24,42,.97), rgba(8,10,19,.96));
    box-shadow: 0 18px 55px rgba(0,0,0,.42), 0 0 35px rgba(115,244,255,.08);
    opacity: 0;
    transform: translateY(12px) scale(.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

    .shivi-bubble:after {
        content: "";
        position: absolute;
        right: 22px;
        bottom: -7px;
        width: 13px;
        height: 13px;
        background: #0b1220;
        border-right: 1px solid rgba(115,244,255,.25);
        border-bottom: 1px solid rgba(115,244,255,.25);
        transform: rotate(45deg);
    }

    .shivi-bubble.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

.shivi-bubble-kicker {
    color: var(--cyan);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .18em;
    margin-bottom: 8px;
}

.shivi-bubble-text {
    color: #eef4fb;
    font-size: 13px;
    line-height: 1.5;
    padding-right: 10px;
}

.shivi-bubble-action {
    margin-top: 13px;
    padding: 8px 11px;
    border: 1px solid rgba(115,244,255,.28);
    background: rgba(115,244,255,.05);
    color: var(--cyan);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
}

.shivi-bubble-close {
    position: absolute;
    top: 7px;
    right: 9px;
    border: 0;
    background: transparent;
    color: #7f8ba0;
    font-size: 17px;
    cursor: pointer;
}

/* =========================================================
           TALK TO ARIA MODAL
           ========================================================= */
.aria-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

    .aria-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.aria-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1,4,10,.72);
    backdrop-filter: blur(12px);
}

.aria-modal-panel {
    position: relative;
    width: min(500px, 100%);
    padding: 32px;
    border: 1px solid rgba(115,244,255,.28);
    border-radius: 20px;
    background: radial-gradient(circle at 80% 10%, rgba(167,139,250,.12), transparent 35%), linear-gradient(145deg, rgba(10,23,40,.98), rgba(6,9,17,.98));
    box-shadow: 0 30px 100px rgba(0,0,0,.62), 0 0 55px rgba(115,244,255,.08);
    transform: translateY(18px) scale(.97);
    transition: transform .3s ease;
}

.aria-modal.is-open .aria-modal-panel {
    transform: translateY(0) scale(1);
}

.aria-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    color: #aeb9c9;
    font-size: 21px;
    cursor: pointer;
}

.aria-modal-kicker {
    color: var(--cyan);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .2em;
    margin-bottom: 12px;
}

.aria-modal-panel h3 {
    margin: 0 0 12px;
    font-size: clamp(34px,6vw,48px);
    line-height: .94;
    letter-spacing: -.06em;
    font-weight: 900;
}

    .aria-modal-panel h3 span {
        color: #edf3fb;
        text-shadow: 0 0 20px rgba(115,244,255,.12);
    }

.aria-modal-panel > p {
    color: #91a0b4;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 22px;
}

.aria-lead-form {
    display: grid;
    gap: 12px;
}

    .aria-lead-form label {
        display: grid;
        gap: 6px;
    }

        .aria-lead-form label span {
            color: #7f8da3;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .16em;
        }

    .aria-lead-form input {
        width: 100%;
        padding: 14px 15px;
        border: 1px solid rgba(115,244,255,.14);
        border-radius: 10px;
        outline: none;
        background: rgba(3,10,19,.72);
        color: #f4f7fb;
        font: inherit;
        font-size: 13px;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

        .aria-lead-form input::placeholder {
            color: #526075;
        }

        .aria-lead-form input:focus {
            border-color: rgba(115,244,255,.55);
            box-shadow: 0 0 0 3px rgba(115,244,255,.06),0 0 24px rgba(115,244,255,.06);
        }

.aria-form-submit {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: linear-gradient(110deg,#73f4ff,#a78bfa 58%,#ff5bd7);
    color: #050509;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 0 35px rgba(115,244,255,.12);
}

    .aria-form-submit b {
        font-size: 18px;
    }

.aria-form-status {
    min-height: 18px;
    color: #6dffb3;
    font-size: 10px;
    line-height: 1.4;
}

.aria-modal-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: #65748a;
    font-size: 9px;
    line-height: 1.5;
}

.aria-security-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6dffb3;
    box-shadow: 0 0 10px #6dffb3;
}

body.aria-modal-open {
    overflow: hidden;
}

@media (max-width:700px) {
    .shivi-assistant {
        right: 14px;
        bottom: 14px;
    }

    .shivi-bubble {
        right: -2px;
        width: min(270px, calc(100vw - 28px));
    }

    .aria-modal {
        padding: 14px;
    }

    .aria-modal-panel {
        padding: 25px 20px 20px;
    }
}




/* =========================================================
           ARIA FINAL CORRECTION PASS
           ========================================================= */
/* 1 — RESTORE THE BLUE/CYAN SECOND LINE ACROSS ALL HEADINGS.
           Do not desaturate the heading system. The accent belongs to
           every .clr / second-line heading, not only section 03. */
h1 .clr, h2 .clr, h3 .clr,
.hero h1 span,
#capabilities h2 span,
#usecases h2 span,
.impact-head h2 span,
#enterprise h2 span,
#faq h2 span,
#contact h2 span {
    color: #73f4ff !important;
    -webkit-text-fill-color: #73f4ff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: 0 0 8px rgba(115,244,255,.26), 0 0 25px rgba(115,244,255,.11) !important;
}

/* Purple is reserved for occasional micro accents, not the main
           second-line heading. */
h1 span, h2 span {
    font-weight: inherit;
}

/* 2 — FEATURE DESCRIPTIONS: visibly larger */
#capabilities .feature h3 {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

#capabilities .feature p,
#capabilities .feature .description,
#capabilities .feature small {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #b6c0cf !important;
}

/* 3 — SECTION 03 heading/body spacing */
#usecases h2 {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

    #usecases h2 + .lead {
        margin-top: 0 !important;
    }

/* 4 — SECTION 04: let the impact frame stretch all the way toward
           the left edge instead of looking like an inset card. */
.impact {
    position: relative;
    overflow: visible !important;
}

.impact-grid {
    position: relative;
    width: calc(100% + 80px) !important;
    margin-left: -40px !important;
    border-left: 1px solid rgba(115,244,255,.13);
    border-right: 1px solid rgba(115,244,255,.10);
}

    .impact-grid::before {
        content: "";
        position: absolute;
        left: -40px;
        top: 0;
        bottom: 0;
        width: 40px;
        border-top: 1px solid rgba(115,244,255,.10);
        border-bottom: 1px solid rgba(115,244,255,.10);
        pointer-events: none;
    }

@media (max-width:900px) {
    .impact-grid {
        width: 100% !important;
        margin-left: 0 !important;
    }

        .impact-grid::before {
            display: none;
        }
}

/* 5 — SECTION 06 / ENTERPRISE: bigger context inside every box */
#enterprise .enterprise-list .ent p,
#enterprise .ent p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #b8c3d2 !important;
    max-width: 34ch;
}

#enterprise .enterprise-list .ent h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

/* 6 — SHIVI: cute bottom-right assistant + explicit Talk to Shivi
           button. The button opens the little chat bubble. */
.shivi-assistant {
    width: 300px !important;
    height: 210px !important;
    right: 22px !important;
    bottom: 20px !important;
    pointer-events: none;
}

50% {
    opacity: .65;
    transform: scale(1.025);
}

}

.shivi-bubble {
    bottom: 82px !important;
    right: 0 !important;
    width: 292px !important;
}

.shivi-bubble-text {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
}

.shivi-orb {
    animation: shiviFloat 3.2s ease-in-out infinite, shiviGlow 3.8s ease-in-out infinite !important;
}

@keyframes shiviGlow {
    0%,100% {
        box-shadow: 0 0 0 1px rgba(167,139,250,.14), 0 0 25px rgba(115,244,255,.20), 0 0 55px rgba(167,139,250,.10);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(167,139,250,.22), 0 0 36px rgba(115,244,255,.30), 0 0 72px rgba(167,139,250,.16);
    }
}

/* 4) Google Form modal: keep it clean and enterprise-grade. */
.aria-modal-panel {
    max-height: min(720px, calc(100vh - 32px));
    overflow-y: auto;
    scrollbar-width: none;
}

    .aria-modal-panel::-webkit-scrollbar {
        display: none;
    }

/* =========================================================
           STT — CHANGES 3.0
           ========================================================= */
/* 1. More tracking across ALL major headings */
h1, h2, h3,
.hero h1,
.sectionhead h2,
.impact-head h2,
#voiceai h2,
#usecases h2,
#enterprise h2,
#faq h2,
.cta h2 {
    letter-spacing: -0.045em !important;
}

    h1 span, h2 span,
    h1 .clr, h2 .clr {
        letter-spacing: -0.035em !important;
    }

/* 01 — pointer descriptions */
#capabilities .feature p,
#capabilities .feature .description,
#capabilities .feature small {
    font-size: 15px !important;
    line-height: 1.68 !important;
    color: #bcc7d6 !important;
}

/* 03 — interactive explanation window */
#usecases .case,
#usecases .point,
#usecases .usecase,
#usecases .node {
    position: relative;
}

.stt-hover-explain {
    position: fixed;
    z-index: 99990;
    width: min(360px, calc(100vw - 30px));
    padding: 17px 19px;
    border: 1px solid rgba(115,244,255,.34);
    border-radius: 14px;
    background: radial-gradient(circle at 90% 0%, rgba(115,244,255,.10), transparent 38%), linear-gradient(145deg, rgba(10,20,34,.98), rgba(5,9,17,.98));
    box-shadow: 0 22px 70px rgba(0,0,0,.52), 0 0 34px rgba(115,244,255,.10);
    pointer-events: none;
    opacity: 0;
    transform: translateY(7px) scale(.97);
    transition: opacity .18s ease, transform .18s ease;
}

    .stt-hover-explain.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .stt-hover-explain .tip-kicker {
        color: #73f4ff;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .18em;
        margin-bottom: 8px;
    }

    .stt-hover-explain .tip-title {
        color: #f2f6fb;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.25;
        margin-bottom: 7px;
    }

    .stt-hover-explain .tip-body {
        color: #aeb9c9;
        font-size: 11px;
        line-height: 1.62;
    }

/* Give obvious hover targets a subtle signal without redesigning them. */
#usecases .case:hover,
#usecases .point:hover,
#usecases .usecase:hover,
#usecases .node:hover {
    border-color: rgba(115,244,255,.30) !important;
}

/* 04 — wider box from the LEFT side */
.impact-grid {
    width: calc(100% + 60px) !important;
    margin-left: -60px !important;
}

    .impact-grid::before {
        left: -60px !important;
        width: 60px !important;
    }

@media (max-width:900px) {
    .impact-grid {
        width: 100% !important;
        margin-left: 0 !important;
    }

        .impact-grid::before {
            display: none;
        }
}

/* 05 — blue glowing dot in heading */
#enterprise .sectionno::before,
#enterprise .kicker::before,
#enterprise .eyebrow::before,
#enterprise .dot {
    background: #73f4ff !important;
    box-shadow: 0 0 6px rgba(115,244,255,.75), 0 0 16px rgba(115,244,255,.42) !important;
}

/* Generic heading dot fallback if it is a pseudo element. */
#enterprise h2::before {
    background: #73f4ff !important;
    box-shadow: 0 0 7px rgba(115,244,255,.80), 0 0 18px rgba(115,244,255,.42) !important;
}

/* SHIVI — make the icon the reliable click target */
#shiviAssistant {
    z-index: 100000 !important;
    pointer-events: none !important;
}

    #shiviAssistant .shivi-orb {
        display: none;
        z-index: 100002 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    #shiviAssistant .shivi-bubble {
        z-index: 100003 !important;
        pointer-events: none !important;
    }

        #shiviAssistant .shivi-bubble.is-open {
            pointer-events: auto !important;
        }

/* The chat should visually sit above every page section. */
.shivi-bubble.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}


/* ============================
           STT CHANGES 3.0 — HARD OVERRIDE
           ============================ */
/* 1 — MORE LETTER SPACING ON EVERY MAJOR HEADING */
h1, h2, h3,
.hero h1,
.hero h2,
.sectionhead h2,
.impact-head h2,
#capabilities h2,
#usecases h2,
#enterprise h2,
#faq h2,
.cta h2 {
    letter-spacing: -0.025em !important;
}

    h1 span, h2 span,
    .hero h1 span,
    #capabilities h2 span,
    #usecases h2 span,
    #enterprise h2 span,
    #faq h2 span {
        letter-spacing: -0.015em !important;
    }

/* 01 — BIGGER POINTER DESCRIPTIONS */
#capabilities .feature p,
#capabilities .feature small,
#capabilities .feature .description,
#capabilities .pointer p,
#capabilities .pointer small {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #c2ccda !important;
}

/* 03 — HOVERABLE POINTS */
#usecases .case,
#usecases .point,
#usecases .usecase,
#usecases .node {
    cursor: help !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

    #usecases .case:hover,
    #usecases .point:hover,
    #usecases .usecase:hover,
    #usecases .node:hover {
        transform: translateY(-2px);
        border-color: rgba(115,244,255,.45) !important;
        box-shadow: 0 15px 45px rgba(0,0,0,.25), 0 0 25px rgba(115,244,255,.09) !important;
    }

#sttPointTooltip {
    position: fixed;
    z-index: 2147483000;
    width: min(370px, calc(100vw - 28px));
    padding: 18px 20px;
    border: 1px solid rgba(115,244,255,.38);
    border-radius: 15px;
    background: radial-gradient(circle at 92% 0%, rgba(115,244,255,.13), transparent 40%), linear-gradient(145deg, rgba(10,21,37,.99), rgba(5,9,17,.99));
    box-shadow: 0 24px 80px rgba(0,0,0,.60), 0 0 38px rgba(115,244,255,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.97);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
}

    #sttPointTooltip.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    #sttPointTooltip .stt-tip-label {
        color: #73f4ff;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .18em;
        margin-bottom: 8px;
    }

    #sttPointTooltip .stt-tip-title {
        color: #f3f7fb;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    #sttPointTooltip .stt-tip-body {
        color: #b3bfce;
        font-size: 12px;
        line-height: 1.65;
    }

/* 04 — EXTEND THE BOX FARTHER LEFT */
#impact,
.impact,
.impact-section {
    overflow: visible !important;
}

    #impact .impact-grid,
    .impact .impact-grid,
    .impact-grid {
        width: calc(100% + 60px) !important;
        margin-left: -60px !important;
    }

        #impact .impact-grid::before,
        .impact .impact-grid::before,
        .impact-grid::before {
            left: -60px !important;
            width: 60px !important;
        }

@media (max-width:900px) {
    #impact .impact-grid, .impact .impact-grid, .impact-grid {
        width: 100% !important;
        margin-left: 0 !important;
    }

        #impact .impact-grid::before,
        .impact .impact-grid::before,
        .impact-grid::before {
            display: none !important;
        }
}

/* 05 — BLUE GLOWING DOT */
#enterprise .sectionno::before,
#enterprise .kicker::before,
#enterprise .eyebrow::before,
#enterprise h2::before,
#enterprise .dot {
    background: #73f4ff !important;
    box-shadow: 0 0 7px rgba(115,244,255,.85), 0 0 18px rgba(115,244,255,.55), 0 0 32px rgba(115,244,255,.22) !important;
}

/* SHIVI — icon is the only visible control */
#shiviAssistant {
    position: fixed !important;
    right: 22px !important;
    bottom: 20px !important;
    z-index: 2147482000 !important;
    pointer-events: none !important;
}

    #shiviAssistant .shivi-orb {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2147482002 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    #shiviAssistant .shivi-bubble {
        position: absolute !important;
        right: 0 !important;
        bottom: 84px !important;
        z-index: 2147482003 !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(12px) scale(.96) !important;
    }

        #shiviAssistant .shivi-bubble.is-open {
            pointer-events: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) scale(1) !important;
        }

#shiviAssistant {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    width: 360px !important;
    height: auto !important;
    z-index: 2147483640 !important;
    pointer-events: none !important;
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

    #shiviAssistant .shivi-orb {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 76px !important;
        height: 76px !important;
        z-index: 2147483643 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        transition: transform .25s ease, opacity .25s ease !important;
    }

        #shiviAssistant .shivi-orb:hover {
            transform: translateY(-3px) scale(1.03) !important;
        }

    /* Hide the old tiny bubble — the new widget replaces it. */
    #shiviAssistant > .shivi-bubble {
        display: none !important;
    }

#shiviRealChat {
    position: absolute;
    right: 0;
    bottom: 88px;
    width: 350px;
    height: 480px;
    overflow: hidden;
    border: 1px solid rgba(115,244,255,.18);
    border-radius: 17px;
    background: #f8fafc;
    box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 45px rgba(42,105,232,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.97);
    transform-origin: bottom right;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    pointer-events: none;
}

    #shiviRealChat.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    #shiviRealChat .shivi-chat-header {
        height: 54px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #2864e8;
        color: #fff;
    }

    #shiviRealChat .shivi-chat-title {
        font-size: 16px;
        font-weight: 750;
        letter-spacing: -.01em;
    }

    #shiviRealChat .shivi-chat-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #shiviRealChat .shivi-chat-min {
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

        #shiviRealChat .shivi-chat-min:hover {
            background: rgba(255,255,255,.12);
        }

    #shiviRealChat .shivi-chat-body {
        height: 426px;
        padding: 0 12px 12px;
        overflow: auto;
        background: #f8fafc;
        color: #172033;
    }

    #shiviRealChat .shivi-welcome {
        margin: 64px 27px 0;
        padding: 27px 20px;
        border: 1px solid #dce4ee;
        border-radius: 15px;
        text-align: center;
        background: #f7f9fc;
    }

        #shiviRealChat .shivi-welcome h3 {
            margin: 0 0 14px;
            font-size: 20px;
            line-height: 1.25;
            letter-spacing: -.02em;
            color: #101522;
        }

        #shiviRealChat .shivi-welcome p {
            margin: 0;
            color: #3f5067;
            font-size: 16px;
            line-height: 1.48;
        }

    #shiviRealChat .shivi-form {
        margin-top: 78px;
    }

    #shiviRealChat .shivi-field {
        margin-bottom: 10px;
    }

    #shiviRealChat input {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid #dce3eb;
        border-radius: 10px;
        background: #fff;
        color: #172033;
        padding: 0 11px;
        font-size: 14px;
        outline: none;
    }

        #shiviRealChat input:focus {
            border-color: #2864e8;
            box-shadow: 0 0 0 3px rgba(40,100,232,.10);
        }

    #shiviRealChat .shivi-phone {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 10px;
        border: 1px solid #dce3eb;
        border-radius: 10px;
        background: #fff;
    }

        #shiviRealChat .shivi-phone:focus-within {
            border-color: #2864e8;
            box-shadow: 0 0 0 3px rgba(40,100,232,.10);
        }

    #shiviRealChat .shivi-flag {
        font-size: 20px;
        line-height: 1;
    }

    #shiviRealChat .shivi-code {
        color: #4c5667;
        font-size: 13px;
        font-weight: 650;
        white-space: nowrap;
    }

    #shiviRealChat .shivi-phone input {
        height: 36px;
        border: 0;
        padding: 0;
        box-shadow: none;
    }

    #shiviRealChat .shivi-start {
        width: 100%;
        height: 42px;
        margin-top: 0;
        border: 0;
        border-radius: 10px;
        background: #2864e8;
        color: #fff;
        font-size: 14px;
        font-weight: 650;
        cursor: pointer;
        transition: filter .2s ease, transform .2s ease;
    }

        #shiviRealChat .shivi-start:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
        }

    #shiviRealChat .shivi-error {
        display: none;
        margin: 8px 2px 0;
        color: #c13c4a;
        font-size: 12px;
    }

    #shiviRealChat .shivi-conversation {
        display: none;
        padding-top: 18px;
    }

    #shiviRealChat.chatting .shivi-welcome,
    #shiviRealChat.chatting .shivi-form {
        display: none;
    }

    #shiviRealChat.chatting .shivi-conversation {
        display: block;
    }

    #shiviRealChat .shivi-msg {
        max-width: 84%;
        margin: 0 0 12px;
        padding: 11px 13px;
        border-radius: 13px;
        font-size: 13px;
        line-height: 1.5;
    }

        #shiviRealChat .shivi-msg.bot {
            background: #e9eef7;
            color: #172033;
            border-bottom-left-radius: 5px;
        }

        #shiviRealChat .shivi-msg.user {
            margin-left: auto;
            background: #2864e8;
            color: #fff;
            border-bottom-right-radius: 5px;
        }

    #shiviRealChat .shivi-compose {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        display: none;
        gap: 8px;
    }

    #shiviRealChat.chatting .shivi-compose {
        display: flex;
    }

    #shiviRealChat .shivi-compose input {
        flex: 1;
    }

    #shiviRealChat .shivi-send {
        width: 44px;
        border: 0;
        border-radius: 10px;
        background: #2864e8;
        color: #fff;
        cursor: pointer;
    }

@media (max-width:600px) {
    #shiviAssistant {
        right: 10px !important;
        bottom: 10px !important;
        width: calc(100vw - 20px) !important;
    }

        #shiviAssistant .shivi-orb {
            right: 0 !important;
        }

    #shiviRealChat {
        right: 0;
        bottom: 86px;
        width: min(350px, calc(100vw - 20px));
        height: min(480px, calc(100vh - 100px));
    }

        #shiviRealChat .shivi-chat-body {
            height: calc(min(480px, 100vh - 100px) - 54px);
        }
}


/* =========================================================
           03 — TWO-LINE HEADING, WITHOUT CHANGING ITS COLOR
           ========================================================= */
/* Give the heading enough horizontal room to form two lines.
           We are NOT changing the text or accent color here. */
#usecases .use-grid {
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr) !important;
    column-gap: 56px !important;
}

    #usecases .use-grid > div:first-child h2 {
        width: 100% !important;
        max-width: none !important;
        font-size: clamp(42px,4.65vw,68px) !important;
        line-height: .98 !important;
        letter-spacing: -.055em !important;
        white-space: normal !important;
        overflow: visible !important;
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

        /* Keep the exact existing color treatment. */
        #usecases .use-grid > div:first-child h2 .stt-line-one,
        #usecases .use-grid > div:first-child h2 .stt-line-two {
            display: inline !important;
        }

        /* This is the actual two-line break: first line ends after
           "Becomes", second line contains "Intelligence” Makes an Impact." */
        #usecases .use-grid > div:first-child h2 .stt-line-one {
            max-width: 100% !important;
        }

    /* Prevent the second column from sitting on top of the heading. */
    #usecases .use-grid > div:nth-child(2) {
        position: relative;
        z-index: 2;
    }

/* =========================================================
           04 — ACTUALLY WIDEN THE BUSINESS IMPACT BOX
           ========================================================= */

.impact {
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
}

    .impact .impact-grid {
        display: grid !important;
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
        /* 150px extra on EACH side */
        width: calc(100% + 300px) !important;
        margin-left: -150px !important;
        margin-right: -150px !important;
        box-sizing: border-box !important;
    }

        .impact .impact-grid .impact-item {
            min-width: 0 !important;
        }

@media (max-width:1000px) {
    #usecases .use-grid {
        grid-template-columns: 1fr !important;
    }

        #usecases .use-grid > div:first-child h2 {
            font-size: clamp(40px,7vw,62px) !important;
        }

    .impact .impact-grid {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width:700px) {
    .impact .impact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
           05 — BLUE GLOW ON THE SEPARATOR DOTS ONLY
           ========================================================= */

/* Target the actual bullet/separator characters without
           recoloring the heading text. */
#voiceai .loop-head {
    color: #edf3fb !important;
}

    #voiceai .loop-head .dot,
    #voiceai .loop-head .sep,
    #voiceai .loop-head > span:not(.step),
    #voiceai .loop-head > i {
        color: #55eaff !important;
        -webkit-text-fill-color: #55eaff !important;
        text-shadow: 0 0 6px rgba(85,234,255,.95), 0 0 15px rgba(85,234,255,.62), 0 0 28px rgba(85,234,255,.28) !important;
    }

/* =========================================================
           SHIVI — preserve the real chat widget
           ========================================================= */
#shiviAssistant {
    z-index: 2147483640 !important;
}

    #shiviAssistant .shivi-orb {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 2147483643 !important;
    }

#shiviRealChat {
    z-index: 2147483644 !important;
}


/* =========================================================
           04 — THE BACKGROUND BOX ITSELF
           User means the large dark background panel around the
           Business Impact section — NOT the 4-column grid.
           Pull the whole panel outward on BOTH sides.
           ========================================================= */
.impact {
    position: relative !important;
    overflow: visible !important;
    /* Break out of the .wrap so the background panel is wider. */
    width: calc(100% + 112px) !important;
    margin-left: -56px !important;
    margin-right: -56px !important;
    box-sizing: border-box !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
}

    /* Keep the four content boxes at the normal readable width. */
    .impact .impact-grid {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

@media (max-width:700px) {
    .impact {
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* =========================================================
           05 — ALL THREE SEPARATOR DOTS IN THE HEADING
           "Listen · Transcribe · Understand · Act"
           ONLY the dots become blue + glowing.
           The words remain white.
           ========================================================= */
#voiceai .loop-head h2 span {
    color: #55eaff !important;
    -webkit-text-fill-color: #55eaff !important;
    text-shadow: 0 0 5px rgba(85,234,255,.95), 0 0 12px rgba(85,234,255,.78), 0 0 25px rgba(85,234,255,.45), 0 0 42px rgba(85,234,255,.18) !important;
    opacity: 1 !important;
}

/* Keep the actual heading text white. */
#voiceai .loop-head h2 {
    color: #edf3fb !important;
}

/* The custom eyebrow dot is also blue, for consistency. */
#voiceai .stt05-dot {
    color: #55eaff !important;
    -webkit-text-fill-color: #55eaff !important;
    text-shadow: 0 0 5px rgba(85,234,255,.95), 0 0 13px rgba(85,234,255,.75), 0 0 26px rgba(85,234,255,.4) !important;
}


/* SECTION 04 — remove the awkward isolated left outline.
           The background panel remains wide; only its partial left border is removed.
           The top/right/bottom outline continues cleanly across the full panel. */
.impact {
    border-left: 0 !important;
    outline: none !important;
}

    /* If the outline is being generated by a pseudo-element, suppress only
           the left-side vertical line while preserving the panel edge elsewhere. */
    .impact::before {
        border-left: 0 !important;
        box-shadow: none !important;
    }

    /* Preserve the actual content grid and its clean right edge. */
    .impact .impact-grid {
        border-left: 0 !important;
        border-right: 1px solid rgba(115,244,255,.16) !important;
    }

/* =========================================================
           SHIVI — VIEWPORT FIX
           Both the icon AND chat window are independently fixed to
           the browser viewport. No section/transform can capture them.
           ========================================================= */
#shiviAssistant {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    left: auto !important;
    top: auto !important;
    width: 360px !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    z-index: 2147483640 !important;
    pointer-events: none !important;
}

    #shiviAssistant .shivi-orb {
        position: fixed !important;
        right: 18px !important;
        bottom: 18px !important;
        left: auto !important;
        top: auto !important;
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 2147483643 !important;
        pointer-events: auto !important;
    }

#shiviRealChat {
    position: fixed !important;
    right: 18px !important;
    bottom: 106px !important;
    left: auto !important;
    top: auto !important;
    width: 350px !important;
    height: 480px !important;
    margin: 0 !important;
    transform-origin: bottom right !important;
    z-index: 2147483644 !important;
    pointer-events: none !important;
}

    #shiviRealChat.is-open {
        pointer-events: auto !important;
    }

@media (max-width:600px) {
    #shiviAssistant {
        right: 10px !important;
        bottom: 10px !important;
        width: calc(100vw - 20px) !important;
    }

        #shiviAssistant .shivi-orb {
            right: 10px !important;
            bottom: 10px !important;
        }

    #shiviRealChat {
        right: 10px !important;
        bottom: 96px !important;
        width: calc(100vw - 20px) !important;
        height: min(480px, calc(100vh - 110px)) !important;
    }
}



/* =========================================================
   ARIA STT — FINAL CROSS-BROWSER MOBILE SAFETY LAYER
   Layout only. No interaction/state selectors are overridden.
   ========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.wrap {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

@media (max-width: 700px) {

    .wrap {
        width: calc(100% - 32px) !important;
        max-width: 100%;
        min-width: 0;
    }

    nav {
        max-width: 100%;
        min-width: 0;
    }

    .logo {
        flex: 0 0 auto;
    }

        .logo img {
            max-width: 100%;
            height: auto;
        }

    .hero,
    .why,
    .feature-head,
    .impact-head,
    .use-grid,
    .enterprise,
    .faq {
        min-width: 0;
        max-width: 100%;
    }

        .hero > *,
        .why > *,
        .feature-head > *,
        .impact-head > *,
        .use-grid > *,
        .enterprise > *,
        .faq > * {
            min-width: 0;
            max-width: 100%;
        }

        .hero h1,
        h2,
        .section-title,
        .hero-lead,
        .lead {
            max-width: 100%;
            overflow-wrap: break-word;
            word-break: normal;
        }

    .hero-art {
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .neural {
        max-width: min(330px, 88vw);
        max-height: min(330px, 88vw);
    }

    .live-card {
        max-width: calc(100vw - 48px);
    }

    .performance {
        max-width: 94%;
        min-width: 0;
    }

    .feature-grid,
    .why-grid,
    .enterprise-list,
    .cases,
    .loop-flow,
    .impact-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .feature,
    .why-item,
    .ent,
    .case,
    .loop-step,
    .impact-item,
    details {
        min-width: 0;
        max-width: 100%;
    }

        .feature h3,
        .why-item h3,
        .ent h3,
        .case span,
        .loop-step h3,
        .impact-item h3,
        summary {
            overflow-wrap: break-word;
            word-break: normal;
        }

    /* Keep native <details> FAQ behavior untouched. */
    summary {
        -webkit-tap-highlight-color: transparent;
    }

    /* Keep the existing horizontal industry/control strips usable. */
    .industry-switch,
    .stack-tags {
        max-width: 100%;
    }

    /* Prevent wide visual layers from creating page-level horizontal scroll. */
    .use-visual,
    .arch-panel,
    .india-art {
        max-width: 100%;
        min-width: 0;
    }

    /* Floating assistant remains independent of page content. */
    #shiviAssistant,
    #shiviRealChat {
        max-width: calc(100vw - 20px);
    }

    #shiviRealChat {
        overflow: hidden;
    }

    /* Contact modal: viewport-safe, without changing its open/close state. */
    .aria-modal {
        max-width: 100vw;
    }

    .aria-modal-panel {
        max-width: calc(100vw - 28px);
        max-height: calc(100vh - 28px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {

    .wrap {
        width: calc(100% - 24px) !important;
    }

    nav {
        height: 64px;
    }

    .navcta {
        padding-left: 9px;
        padding-right: 9px;
        white-space: nowrap;
        display: none;
    }

    .hero {
        padding-left: 0;
        padding-right: 0;
    }

        .hero h1 {
            font-size: clamp(38px, 12vw, 52px);
        }

    .neural {
        max-width: 290px;
        max-height: 290px;
    }

    .live-card {
        max-width: calc(100vw - 36px);
    }

    .performance {
        width: 94%;
        gap: 10px;
    }

        .performance strong {
            font-size: 16px;
        }

        .performance small {
            font-size: 6px;
        }
}