/* Web & AI Sites detail page. Scoped to this service route only. */
.tai-web-ai-page {
    --wai-ink: #10243b;
    --wai-muted: #65788e;
    --wai-line: #dce7f1;
    --wai-blue: #1769ff;
    --wai-cyan: #65dbea;
    --wai-navy: #061827;
    --wai-soft: #f4f8fc;
    background: #fff;
    color: var(--wai-ink);
}

.tai-web-ai-hero {
    position: relative;
    width: 100%;
    min-height: clamp(680px, 84vh, 940px);
    overflow: hidden;
    display: grid;
    align-items: end;
    padding: clamp(4.5rem, 8vw, 7.4rem) 0 clamp(3.8rem, 7vw, 6.2rem);
    color: #fff;
    background: var(--wai-navy);
}

.tai-web-ai-hero__player,
.tai-web-ai-hero__player .tai-video-slot,
.tai-web-ai-hero__player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tai-web-ai-hero__player { z-index: 0; }
.tai-web-ai-hero__player video {
    display: block;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}
.tai-web-ai-hero .tai-video-slot__placeholder { display: none; }

.tai-web-ai-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(3,17,31,.68) 0%, rgba(3,17,31,.50) 46%, rgba(3,17,31,.20) 76%, rgba(3,17,31,.08) 100%),
        linear-gradient(0deg, rgba(3,17,31,.60) 0%, rgba(3,17,31,.20) 54%, rgba(3,17,31,.09) 100%);
}

.tai-web-ai-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .18;
    background:
        radial-gradient(circle at 78% 24%, rgba(101,219,234,.5), transparent 0 15%, transparent 32%),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    mask-image: linear-gradient(90deg, #000 0 68%, transparent 96%);
}

.tai-web-ai-hero__inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(270px, .62fr);
    gap: clamp(2.4rem, 6vw, 5.8rem);
    align-items: end;
}

.tai-web-ai-back {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin-bottom: -1.2rem;
    color: rgba(255,255,255,.82);
    font-weight: 750;
    text-decoration: none;
}
.tai-web-ai-back:hover { color: #fff; }

.tai-web-ai-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    margin-bottom: 1rem;
    color: #88e0ed;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.tai-web-ai-hero h1 { margin: 0; max-width: 900px; }
.tai-web-ai-hero h1 small {
    display: block;
    margin-bottom: .7rem;
    color: #cbd9e7;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 720;
}
.tai-web-ai-hero h1 strong {
    display: block;
    white-space: pre-line;
    font-size: clamp(2.75rem, 6.1vw, 5.7rem);
    font-weight: 880;
    line-height: 1.04;
    letter-spacing: -.05em;
}

.tai-web-ai-hero__lead {
    max-width: 790px;
    margin: 1.35rem 0 0;
    color: #d7e3ef;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.9;
}

.tai-web-ai-hero__note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    max-width: 790px;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    color: #d0e1f1;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
}
.tai-web-ai-hero__note i { color: #7ee0ec; }

.tai-web-ai-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.65rem;
}

.tai-web-ai-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 50px;
    padding: .76rem 1.2rem;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.06);
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tai-web-ai-button:hover { transform: translateY(-2px); color: #fff; }
.tai-web-ai-button--primary {
    border-color: transparent;
    background: linear-gradient(135deg, #1769ff, #2f84ff);
    box-shadow: 0 14px 34px rgba(23,105,255,.28);
}
.tai-web-ai-button--ghost:hover { background: rgba(255,255,255,.12); }

.tai-web-ai-hero__metrics {
    display: grid;
    gap: .7rem;
    padding: 1.05rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 22px;
    background: rgba(3,19,36,.64);
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
    backdrop-filter: blur(15px);
}
.tai-web-ai-hero__metrics article {
    padding: .9rem 1rem;
    border-radius: 14px;
    background: rgba(255,255,255,.065);
}
.tai-web-ai-hero__metrics strong {
    display: block;
    color: #80dfeb;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.tai-web-ai-hero__metrics span {
    display: block;
    margin-top: .25rem;
    color: #dbe6f0;
    font-size: .87rem;
    line-height: 1.5;
}

.tai-web-ai-section { padding: clamp(4.3rem, 7.6vw, 7.2rem) 0; }
.tai-web-ai-section--white { background: #fff; }
.tai-web-ai-section--soft,
.tai-web-ai-process { background: var(--wai-soft); }

.tai-web-ai-heading { max-width: 820px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.tai-web-ai-heading--wide { max-width: 980px; }
.tai-web-ai-heading--dark { color: #fff; }
.tai-web-ai-kicker {
    margin: 0 0 .8rem;
    color: var(--wai-blue);
    font-size: .73rem;
    font-weight: 860;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.tai-web-ai-kicker--light { color: #7fe2ed; }
.tai-web-ai-heading h2,
.tai-web-ai-contact h2 {
    margin: 0;
    font-size: clamp(2rem, 4.25vw, 3.7rem);
    font-weight: 870;
    line-height: 1.14;
    letter-spacing: -.04em;
}
.tai-web-ai-heading > p:last-child {
    margin: 1rem 0 0;
    color: var(--wai-muted);
    line-height: 1.9;
}
.tai-web-ai-heading--dark > p:last-child { color: #bed0e1; }

.tai-web-ai-grid { display: grid; gap: 1rem; }
.tai-web-ai-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tai-web-ai-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tai-web-ai-card {
    min-height: 100%;
    padding: 1.35rem;
    border: 1px solid var(--wai-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17,47,80,.055);
}
.tai-web-ai-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tai-web-ai-card__head span,
.tai-web-ai-usecase > div span,
.tai-web-ai-process__grid article > span {
    color: #7b91a9;
    font: 850 .72rem/1 ui-monospace, monospace;
    letter-spacing: .1em;
}
.tai-web-ai-card__head i,
.tai-web-ai-usecase > div i,
.tai-web-ai-process__grid article > i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    color: var(--wai-blue);
    background: #edf5ff;
    font-size: 1.08rem;
}
.tai-web-ai-card h3,
.tai-web-ai-usecase h3,
.tai-web-ai-process__grid h3 {
    margin: 1.05rem 0 .5rem;
    font-size: 1.13rem;
    font-weight: 850;
    line-height: 1.45;
}
.tai-web-ai-card p,
.tai-web-ai-usecase p,
.tai-web-ai-process__grid p {
    margin: 0;
    color: var(--wai-muted);
    font-size: .94rem;
    line-height: 1.82;
}
.tai-web-ai-card--capability { position: relative; overflow: hidden; }
.tai-web-ai-card--capability::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(101,219,234,.2), transparent 70%);
    pointer-events: none;
}
.tai-web-ai-tag {
    display: inline-flex;
    margin-top: 1rem;
    padding: .42rem .65rem;
    border-radius: 999px;
    color: #2165bb;
    background: #edf6ff;
    font-size: .72rem;
    font-weight: 760;
    line-height: 1.35;
}

.tai-web-ai-journey {
    padding: clamp(4.6rem, 8vw, 7.4rem) 0;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(30,116,255,.3), transparent 34%),
        linear-gradient(135deg, #061827, #0a2747 58%, #0d3760);
}
.tai-web-ai-journey__track {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
    gap: .7rem;
    align-items: stretch;
}
.tai-web-ai-journey__step {
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: rgba(255,255,255,.055);
}
.tai-web-ai-journey__icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 14px;
    color: #85e3ee;
    background: rgba(101,219,234,.12);
}
.tai-web-ai-journey__step > span {
    color: #7fdde9;
    font: 850 .7rem/1 ui-monospace, monospace;
    letter-spacing: .1em;
}
.tai-web-ai-journey__step h3 { margin: .55rem 0 .45rem; font-size: 1.12rem; font-weight: 850; }
.tai-web-ai-journey__step p { margin: 0; color: #c4d4e3; font-size: .91rem; line-height: 1.75; }
.tai-web-ai-journey__arrow {
    display: grid;
    place-items: center;
    color: rgba(130,226,238,.75);
}

.tai-web-ai-usecase {
    min-height: 100%;
    padding: 1.35rem;
    border-top: 2px solid #d9e7f5;
    background: #fff;
}
.tai-web-ai-usecase > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tai-web-ai-process__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: .9rem;
}
.tai-web-ai-process__grid article {
    position: relative;
    min-height: 100%;
    padding: 1.2rem;
    border: 1px solid var(--wai-line);
    border-radius: 18px;
    background: #fff;
}
.tai-web-ai-process__grid article > i { margin-top: 1rem; }

.tai-web-ai-faq { background: #fff; }
.tai-web-ai-faq__layout {
    display: grid;
    grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.tai-web-ai-faq__list { border-top: 1px solid var(--wai-line); }
.tai-web-ai-faq__list details { border-bottom: 1px solid var(--wai-line); }
.tai-web-ai-faq__list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 820;
    line-height: 1.55;
}
.tai-web-ai-faq__list summary::-webkit-details-marker { display: none; }
.tai-web-ai-faq__list summary i { color: var(--wai-blue); transition: transform .2s ease; }
.tai-web-ai-faq__list details[open] summary i { transform: rotate(45deg); }
.tai-web-ai-faq__list details p {
    max-width: 820px;
    margin: -.35rem 0 1.35rem;
    color: var(--wai-muted);
    line-height: 1.85;
}

.tai-web-ai-contact {
    padding: clamp(3.8rem, 7vw, 6.4rem) 0;
    color: #fff;
    background: #061827;
}
.tai-web-ai-contact__card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: clamp(1.7rem, 4vw, 3rem);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 84% 10%, rgba(52,132,255,.35), transparent 30%),
        rgba(255,255,255,.045);
}
.tai-web-ai-contact h2 { max-width: 900px; }
.tai-web-ai-contact__card > div > p:last-child {
    max-width: 820px;
    margin: 1rem 0 0;
    color: #c5d6e5;
    line-height: 1.85;
}
.tai-web-ai-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 54px;
    padding: .8rem 1.35rem;
    border-radius: 999px;
    color: #082038;
    background: #fff;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}
.tai-web-ai-contact__button:hover { color: #082038; transform: translateY(-2px); }

html.js .tai-web-ai-page [data-web-ai-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
html.js .tai-web-ai-page [data-web-ai-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1100px) {
    .tai-web-ai-grid--four { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tai-web-ai-grid--three { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tai-web-ai-process__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .tai-web-ai-journey__track { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tai-web-ai-journey__arrow { display: none; }
}

@media (max-width: 860px) {
    .tai-web-ai-hero {
        min-height: 760px;
        padding-top: 6rem;
    }
    .tai-web-ai-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .tai-web-ai-hero__metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .tai-web-ai-hero__metrics article { padding: .8rem; }
    .tai-web-ai-faq__layout { grid-template-columns: 1fr; gap: .7rem; }
    .tai-web-ai-contact__card { grid-template-columns: 1fr; }
    .tai-web-ai-contact__button { width: fit-content; }
}

@media (max-width: 640px) {
    .tai-web-ai-hero {
        min-height: 720px;
        padding: 5.6rem 0 2.8rem;
    }
    .tai-web-ai-hero__shade {
        background:
            linear-gradient(0deg, rgba(3,17,31,.70) 0%, rgba(3,17,31,.50) 55%, rgba(3,17,31,.20) 100%),
            linear-gradient(90deg, rgba(3,17,31,.54), rgba(3,17,31,.12));
    }
    .tai-web-ai-hero h1 strong { font-size: clamp(2.45rem, 13vw, 4rem); }
    .tai-web-ai-hero__actions { display: grid; grid-template-columns: 1fr; }
    .tai-web-ai-button { width: 100%; }
    .tai-web-ai-hero__metrics { grid-template-columns: 1fr; }
    .tai-web-ai-grid--four,
    .tai-web-ai-grid--three,
    .tai-web-ai-process__grid,
    .tai-web-ai-journey__track { grid-template-columns: 1fr; }
    .tai-web-ai-section { padding: 4rem 0; }
    .tai-web-ai-contact__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html.js .tai-web-ai-page [data-web-ai-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}