/*
 * TOWA AI shared presentation layer.
 * V7.2 restores this stylesheet because the V7 package referenced it from
 * _Layout.cshtml but did not actually include the file.
 */

/* Header brand logo ---------------------------------------------------
 * Keep the same sizing override as the production site (twai.co.jp).
 * The generic 42px rule is intentionally overridden by the dedicated
 * site-logo rule below, matching the production cascade.
 */
.tai-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.tai-brand__site-logo {
    width: 400px !important;
    height: auto !important;
    max-width: none;
    max-height: 120px;
}
@media (max-width: 991px) {
    .tai-brand__site-logo {
        width: 330px !important;
        max-height: 105px;
    }
}

/* Home ---------------------------------------------------------------- */
.tai-home { background: #fff; }
.tai-home-top-video { position: relative; min-height: 0; background: #071829; }
.tai-home-top-video video,
.tai-home-top-video img { display: block; width: 100%; }
.tai-hero {
    position: relative;
    overflow: hidden;
    min-height: min(700px, 76vh);
    display: grid;
    align-items: center;
    color: #333a44;
    background: #fff;
}
.tai-hero__mesh { display: none; }
.tai-hero__inner { position: relative; z-index: 2; padding-block: clamp(5rem, 10vw, 9rem); }
.tai-hero__copy { max-width: 880px; }
.tai-hero .tai-kicker { color: #5a6470; }
.tai-hero h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.8rem, 7vw, 6.7rem);
    font-weight: 880;
    line-height: .98;
    letter-spacing: -.055em;
}
.tai-hero__lead { max-width: 760px; margin: 1.5rem 0 0; color: #59636f; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.9; }
.tai-hero__actions,
.tai-final-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.tai-hero .tai-button:not(.tai-button--primary) { border-color: #cfd7e2; color: #374151; background: #fff; }
.tai-final-cta .tai-button:not(.tai-button--primary) { border-color: rgba(255,255,255,.24); color: #fff; background: rgba(255,255,255,.06); }

.tai-pain-section { background: linear-gradient(180deg, #fff, #f7faff); }
.tai-pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.tai-pain-card {
    min-height: 100%;
    padding: 1.45rem;
    border: 1px solid #e0e8f2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(18, 49, 83, .06);
}
.tai-pain-card__top { display: flex; align-items: center; justify-content: space-between; color: #8da0b7; }
.tai-pain-card__top span { font: 850 .78rem/1 ui-monospace, monospace; letter-spacing: .08em; }
.tai-pain-card__top i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--tai-primary); background: #eef5ff; font-size: 1.08rem; }
.tai-pain-card h3 { margin: 1.3rem 0 .55rem; font-size: 1.18rem; font-weight: 850; }
.tai-pain-card__problem { margin: 0; color: #6c7d92; }
.tai-pain-card__answer { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid #edf1f6; }
.tai-pain-card__answer strong { color: var(--tai-primary); font-size: .7rem; letter-spacing: .08em; }
.tai-pain-card__answer p { margin: .35rem 0 0; color: #40546d; }
.tai-pain-section__link { margin-top: 2rem; }

.tai-industry-section { background: #f7faff; }
.tai-industry-video-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; }
.tai-industry-video-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 280px;
    border: 1px solid #dce7f3;
    border-radius: 20px;
    color: #fff;
    background: #0a1b2d;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(18,49,83,.08);
}
.tai-industry-video-card__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.tai-industry-video-card__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.tai-industry-video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(4,15,29,.88) 100%); pointer-events: none; }
.tai-industry-video-card:hover video { transform: scale(1.035); }
.tai-industry-video-card__copy { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .95rem; }
.tai-industry-video-card__copy small { display: block; color: #89d9ec; font-size: .64rem; font-weight: 800; letter-spacing: .11em; }
.tai-industry-video-card__copy strong { display: block; margin-top: .2rem; font-size: 1.05rem; }

.tai-value-section { padding: clamp(4.5rem,8vw,7rem) 0; color: #fff; background: #071829; }
.tai-value-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,5rem); }
.tai-value-section .tai-kicker { color: #73ddec; }
.tai-value-section h2 { margin: 0; font-size: clamp(2rem,4vw,3.6rem); font-weight: 850; line-height: 1.15; }
.tai-value-list { display: grid; gap: .7rem; }
.tai-value-list article { display: grid; grid-template-columns: 58px 1fr; gap: 0 1rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.tai-value-list strong { grid-row: 1/3; color: #6ed4e7; font-size: .78rem; letter-spacing: .08em; }
.tai-value-list h3 { margin: 0; font-size: 1.15rem; }
.tai-value-list p { margin: .35rem 0 0; color: #a9bcd0; }
.tai-final-cta { padding: clamp(4.5rem,8vw,7rem) 0; background: #f3f7fc; }
.tai-final-cta__inner { padding: clamp(2rem,5vw,4.5rem); border-radius: 30px; color: #fff; background: linear-gradient(135deg,#0c2a4e,#1557b7); box-shadow: 0 26px 70px rgba(13,58,128,.19); }
.tai-final-cta__inner h2 { max-width: 820px; margin: 0; font-size: clamp(2rem,4.6vw,4rem); font-weight: 850; line-height: 1.14; }
.tai-final-cta__inner > p:not(.tai-kicker) { max-width: 740px; margin: 1rem 0 0; color: #cbdcf0; }
.tai-final-cta .tai-kicker { color: #79e4f4; }

/* Service / product pages --------------------------------------------- */
.tai-page,
.dxai-page,
.solution-page,
.tech-support-page,
.inquiry-page,
.inquiry-tech-page,
.policy-page,
.towa-seo-page { background: #f7f9fc; }
.tai-ai-dev-section,
.tai-ai-staff-section,
.tai-immersive-section,
.ts-section,
.rs-section,
.pricing-section,
.company-section,
.solution-section { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.tai-ai-dev-heading,
.tai-ai-staff-heading,
.tai-immersive-section-heading,
.ts-section-title,
.rs-section-heading { color: #102a49; font-weight: 850; letter-spacing: -.025em; }

.service-card,
.dxai-service-card,
.tai-ai-dev-tech,
.tai-ai-staff-message,
.ts-stack-card,
.ts-problem-card,
.ts-step-card,
.pricing-plan-card,
.pricing-policy-card,
.company-domain-card,
.company-feature-card,
.company-vision-card,
.solution-flow-card,
.solution-detail-card,
.rs-benefit-card,
.dxai-benefit-card,
.policy-section-card,
.policy-summary-card,
.sitemap-card,
.kb-card,
.towa-seo-card,
.report-block,
.value-panel {
    border: 1px solid #dde7f2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(19, 48, 83, .07);
}
.service-card,
.dxai-service-card,
.ts-stack-card,
.ts-problem-card,
.ts-step-card,
.pricing-policy-card,
.company-domain-card,
.company-feature-card,
.company-vision-card,
.solution-flow-card,
.solution-detail-card,
.rs-benefit-card,
.dxai-benefit-card,
.policy-section-card,
.policy-summary-card,
.sitemap-card,
.kb-card,
.towa-seo-card,
.report-block,
.value-panel { padding: 1.35rem; }
.service-icon,
.dxai-module-icon,
.product-impact-card__icon,
.company-feature-card__icon,
.pricing-policy-icon,
.policy-summary-icon,
.sitemap-card-heading-icon,
.os-card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--tai-primary);
    background: #edf5ff;
}

/* Company -------------------------------------------------------------- */
.company-hero,
.policy-hero,
.towa-seo-hero,
.solution-hero,
.pricing-hero,
.diagnosis-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(38,141,235,.34), transparent 25rem),
        linear-gradient(135deg,#071a2e,#0e3e78);
}
.company-hero h1,
.policy-hero h1,
.towa-seo-hero h1,
.solution-hero h1,
.pricing-hero h1,
.diagnosis-hero h1 { margin: 0; font-size: clamp(2.5rem,6vw,5rem); font-weight: 860; line-height: 1.05; letter-spacing: -.045em; }
.company-hero p,
.policy-hero p,
.towa-seo-hero p,
.solution-hero p,
.pricing-hero p,
.diagnosis-hero p { max-width: 780px; color: #c9d9eb; }
.company-data-item { padding: 1rem 0; border-bottom: 1px solid #e6edf5; }
.company-process-item { padding: 1rem 0; border-top: 1px solid #e3ebf4; }

/* Pricing -------------------------------------------------------------- */
.pricing-container { max-width: 1180px; margin-inline: auto; }
.pricing-plan-card { position: relative; overflow: hidden; height: 100%; padding: 1.45rem; }
.pricing-plan-top { padding-bottom: 1rem; border-bottom: 1px solid #e5ecf4; }
.pricing-plan-price { color: #0e315c; font-size: clamp(1.8rem,4vw,3rem); font-weight: 900; }
.pricing-plan-period { color: #7a8ba0; font-size: .8rem; }
.pricing-feature-list { margin: 1rem 0; padding: 0; list-style: none; }
.pricing-feature-list li { position: relative; padding: .45rem 0 .45rem 1.35rem; color: #50647d; }
.pricing-feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--tai-success); font-weight: 900; }
.pricing-value-pill { display: inline-flex; padding: .3rem .55rem; border-radius: 999px; color: #1459cf; background: #edf5ff; font-size: .72rem; font-weight: 800; }

/* Forms / tools -------------------------------------------------------- */
.ts-form-control,
.rs-form-control,
.solution-form-control,
.kb-input,
.kb-select {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    border: 1px solid #ccd9e8;
    border-radius: 12px;
    color: #17314f;
    background: #fff;
    outline: none;
}
.ts-form-control:focus,
.rs-form-control:focus,
.solution-form-control:focus,
.kb-input:focus,
.kb-select:focus { border-color: #70a4ff; box-shadow: 0 0 0 4px rgba(23,105,255,.09); }
.ts-form-label,
.rs-form-label,
.solution-form-label { display: block; margin-bottom: .38rem; color: #334c67; font-size: .84rem; font-weight: 800; }

/* Policy / SEO --------------------------------------------------------- */
.policy-section-heading,
.policy-summary-heading,
.towa-seo-content h2,
.towa-seo-content h3 { color: #15314f; font-weight: 850; }
.policy-number { color: var(--tai-primary); font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.policy-note { padding: 1rem 1.1rem; border-left: 4px solid var(--tai-primary); border-radius: 0 12px 12px 0; background: #eef5ff; }
.towa-seo-content { color: #435972; line-height: 1.95; }
.towa-seo-toc { padding: 1rem 1.2rem; border: 1px solid #dce6f1; border-radius: 16px; background: #fff; }
.towa-related-link { color: #185dd5; font-weight: 750; text-decoration: none; }
.towa-related-link:hover { text-decoration: underline; }

/* Generic dark hero support used by many existing pages */
[class*="-hero"] .container { position: relative; z-index: 2; }

@media (max-width: 991.98px) {
    .tai-pain-grid { grid-template-columns: 1fr 1fr; }
    .tai-industry-video-grid { grid-template-columns: 1fr 1fr; }
    .tai-value-grid { grid-template-columns: 1fr; }
    .tai-hero { min-height: 620px; }
}
@media (max-width: 575.98px) {
    .tai-hero { min-height: 560px; }
    .tai-hero h1 { font-size: clamp(2.55rem, 15vw, 4.3rem); }
    .tai-hero__actions,
    .tai-final-cta__actions { display: grid; }
    .tai-pain-grid,
    .tai-industry-video-grid { grid-template-columns: 1fr; }
    .tai-industry-video-card { min-height: 260px; }
    .tai-value-list article { grid-template-columns: 44px 1fr; }
    .tai-final-cta__inner { border-radius: 22px; }
}

/* Video sound toggle ------------------------------------------------------
 * Page and service videos always start muted for reliable mobile autoplay.
 * Sound changes only when the visitor explicitly presses this switch.
 * The control is deliberately rendered as a compact mechanical ON/OFF toggle
 * so the state remains obvious without covering too much of the video.
 */
.tai-video-slot {
    position: relative;
}

.tai-video-audio-toggle {
    --tai-sound-w: 126px;
    --tai-sound-h: 54px;
    --tai-sound-gap: 4px;
    --tai-sound-knob: 46px;
    --tai-sound-travel: 72px;
    position: absolute;
    right: clamp(.8rem, 2vw, 1.35rem);
    bottom: clamp(.8rem, 2vw, 1.35rem);
    z-index: 30;
    display: block;
    width: var(--tai-sound-w);
    height: var(--tai-sound-h);
    padding: 0;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.025) 35%, rgba(0,0,0,.2)),
        #07101b;
    box-shadow:
        0 10px 30px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

/* Illuminated inner rail + OFF/ON text. */
.tai-video-audio-toggle::before {
    content: "OFF";
    position: absolute;
    inset: var(--tai-sound-gap);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 17px;
    border-radius: 999px;
    color: rgba(255,255,255,.96);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%),
        linear-gradient(90deg, #a90c19 0%, #e31b2f 55%, #ff3c45 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        inset 0 0 18px rgba(255,60,69,.32),
        0 0 16px rgba(227,27,47,.18);
    transition: background .28s ease, box-shadow .28s ease, justify-content .28s ease;
}

/* Glossy sliding knob. */
.tai-video-audio-toggle::after {
    content: "";
    position: absolute;
    top: var(--tai-sound-gap);
    right: var(--tai-sound-gap);
    z-index: 2;
    width: var(--tai-sound-knob);
    height: var(--tai-sound-knob);
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.42), rgba(255,255,255,.08) 26%, transparent 40%),
        linear-gradient(145deg, #35404d 0%, #111821 46%, #05080c 100%);
    box-shadow:
        0 4px 12px rgba(0,0,0,.52),
        inset 0 1px 1px rgba(255,255,255,.3),
        inset 0 -3px 7px rgba(0,0,0,.52);
    transform: translateX(0);
    transition: transform .3s cubic-bezier(.22,.75,.22,1), box-shadow .25s ease;
}

.tai-video-audio-toggle i {
    position: absolute;
    top: 50%;
    right: var(--tai-sound-gap);
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--tai-sound-knob);
    height: var(--tai-sound-knob);
    margin-top: calc(var(--tai-sound-knob) / -2);
    color: rgba(255,255,255,.92);
    font-size: 1.12rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
    transform: translateX(0);
    transition: transform .3s cubic-bezier(.22,.75,.22,1), color .25s ease, filter .25s ease;
}

.tai-video-audio-toggle:hover,
.tai-video-audio-toggle:focus-visible {
    color: #fff;
    border-color: rgba(255,255,255,.7);
    box-shadow:
        0 13px 34px rgba(0,0,0,.4),
        0 0 0 3px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.3);
    transform: translateY(-2px) scale(1.015);
    outline: none;
}

.tai-video-audio-toggle:active {
    transform: translateY(0) scale(.985);
}

.tai-video-audio-toggle.is-audible::before {
    content: "ON";
    justify-content: flex-end;
    background:
        linear-gradient(180deg, rgba(255,255,255,.2), transparent 42%),
        linear-gradient(90deg, #04913b 0%, #08b84f 48%, #18d668 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.13),
        inset 0 0 18px rgba(24,214,104,.34),
        0 0 20px rgba(8,184,79,.24);
}

.tai-video-audio-toggle.is-audible::after,
.tai-video-audio-toggle.is-audible i {
    transform: translateX(calc(var(--tai-sound-travel) * -1));
}

.tai-video-audio-toggle.is-audible i {
    color: #73ffad;
    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,.45))
        drop-shadow(0 0 5px rgba(64,255,144,.48));
}

.tai-video-audio-toggle--slot {
    z-index: 5;
}

@media (max-width: 575.98px) {
    .tai-video-audio-toggle {
        --tai-sound-w: 112px;
        --tai-sound-h: 48px;
        --tai-sound-gap: 4px;
        --tai-sound-knob: 40px;
        --tai-sound-travel: 64px;
        right: .72rem;
        bottom: .72rem;
    }

    .tai-video-audio-toggle::before {
        padding: 0 14px;
        font-size: .7rem;
    }

    .tai-video-audio-toggle i {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tai-video-audio-toggle,
    .tai-video-audio-toggle::before,
    .tai-video-audio-toggle::after,
    .tai-video-audio-toggle i {
        transition: none !important;
    }
}