@font-face {
    font-family: "TDC Noto Sans JP";
    src: url("/assets/fonts/NotoSansJP-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TDC Noto Sans JP";
    src: url("/assets/fonts/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --tdc-ink: #17211f;
    --tdc-ink-soft: #25332f;
    --tdc-muted: #64726d;
    --tdc-paper: #f7f5ef;
    --tdc-surface: #fffdfa;
    --tdc-line: #e3ded2;
    --tdc-brand: #287c61;
    --tdc-brand-dark: #1b5d49;
    --tdc-brand-soft: #e8f2ed;
    --tdc-accent: #b98546;
    --tdc-danger: #b42318;
    --tdc-shadow: 0 18px 45px rgba(23, 33, 31, .08);
}

html {
    scroll-padding-top: 88px;
}

body {
    background: var(--tdc-paper);
    color: var(--tdc-ink);
    font-family: "TDC Noto Sans JP", "Noto Sans JP", system-ui, sans-serif;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(40, 124, 97, .18);
}

.bg-navy {
    background-color: var(--tdc-ink) !important;
}

.hover\:bg-slate-700:hover {
    background-color: var(--tdc-ink-soft) !important;
}

.text-navy {
    color: var(--tdc-ink) !important;
}

.bg-emerald-brand {
    background-color: var(--tdc-brand) !important;
}

.text-emerald-brand,
.hover\:text-emerald-brand:hover {
    color: var(--tdc-brand) !important;
}

.text-emerald-400,
.text-emerald-200 {
    color: #9ed4c2 !important;
}

.bg-emerald-100 {
    background-color: var(--tdc-brand-soft) !important;
}

.text-emerald-700,
.text-emerald-800 {
    color: var(--tdc-brand-dark) !important;
}

.border-emerald-brand,
.hover\:border-emerald-brand:hover {
    border-color: var(--tdc-brand) !important;
}

.rounded-2xl,
.rounded-xl,
.rounded-lg {
    border-radius: 8px !important;
}

.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: var(--tdc-shadow) !important;
}

.site-header {
    background: rgba(247, 245, 239, .92);
    border-bottom: 1px solid rgba(23, 33, 31, .1);
    box-shadow: none !important;
}

@supports (backdrop-filter: blur(16px)) {
    .site-header {
        backdrop-filter: blur(16px);
    }
}

.header-logo {
    height: 42px;
    width: auto;
}

.header-brand-text {
    color: var(--tdc-ink);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.35;
}

.header-cta,
.primary-action {
    align-items: center;
    background: var(--tdc-ink);
    border: 1px solid rgba(23, 33, 31, .08);
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 44px;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.header-cta:hover,
.primary-action:hover {
    background: var(--tdc-brand-dark);
    transform: translateY(-1px);
}

.primary-action:disabled,
.primary-action[disabled] {
    transform: none;
    box-shadow: none !important;
}

.secondary-action {
    align-items: center;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--tdc-line);
    color: var(--tdc-ink);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.secondary-action:hover {
    background: #fff;
    border-color: var(--tdc-brand);
    transform: translateY(-1px);
}

.gradient-hero {
    background-image:
        linear-gradient(90deg, rgba(247, 245, 239, .98) 0%, rgba(247, 245, 239, .9) 42%, rgba(247, 245, 239, .42) 66%, rgba(247, 245, 239, .08) 100%),
        url("/assets/images/hero-workspace-roadmap.png");
    background-position: center right;
    background-size: cover;
}

.hero-eyebrow {
    background: rgba(40, 124, 97, .1);
    border: 1px solid rgba(40, 124, 97, .18);
    color: var(--tdc-brand-dark);
}

.hero-title {
    color: var(--tdc-ink);
    font-size: clamp(2.25rem, 5.6vw, 4.35rem);
    line-height: 1.06;
    word-break: keep-all;
}

.hero-copy {
    color: #44524d;
    max-width: 42rem;
}

.hero-proof {
    color: var(--tdc-muted);
}

.trust-strip {
    background: var(--tdc-ink);
    color: #fff;
}

.trust-strip-item {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.trust-strip-item:first-child {
    border-left: 0;
}

.section-surface {
    background: var(--tdc-surface);
}

.section-paper,
.bg-slate-50 {
    background: var(--tdc-paper) !important;
}

.panel,
.bg-white.rounded-2xl,
.bg-white.rounded-xl {
    background: var(--tdc-surface) !important;
    border-color: var(--tdc-line) !important;
}

.feature-card,
.industry-card,
.rank-card {
    background: var(--tdc-surface);
    border: 1px solid var(--tdc-line);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.feature-card:hover,
.industry-card:hover,
.rank-card:hover {
    border-color: rgba(40, 124, 97, .35);
    box-shadow: var(--tdc-shadow);
    transform: translateY(-2px);
}

.icon-tile {
    align-items: center;
    background: var(--tdc-brand-soft);
    color: var(--tdc-brand-dark);
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.choice-card {
    border-color: var(--tdc-line) !important;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.choice-card:hover {
    background: #fbfaf6 !important;
    border-color: rgba(40, 124, 97, .45) !important;
}

.choice-card.selected {
    background: var(--tdc-brand-soft) !important;
    border-color: var(--tdc-brand) !important;
    box-shadow: 0 0 0 3px rgba(40, 124, 97, .12) !important;
}

.radio-indicator {
    background: #fff;
}

.progress-track {
    background: #e8e2d6;
}

.progress-fill {
    background: linear-gradient(90deg, var(--tdc-brand), var(--tdc-accent));
}

.form-card input,
.form-card select,
input[type="text"],
input[type="email"],
input[type="tel"],
select {
    background: #fffdfa;
    border-color: var(--tdc-line) !important;
    color: var(--tdc-ink);
}

.form-card input:focus,
.form-card select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
    border-color: var(--tdc-brand) !important;
    box-shadow: 0 0 0 4px rgba(40, 124, 97, .12);
}

.cta-band {
    background:
        linear-gradient(135deg, rgba(23, 33, 31, .96), rgba(40, 94, 76, .94)),
        url("/assets/images/hero-workspace-roadmap.png");
    background-position: center;
    background-size: cover;
}

.footer-shell {
    background: var(--tdc-ink);
}

.animate-fade-in {
    animation: fadeIn .45s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .gradient-hero {
        background-image:
            linear-gradient(180deg, rgba(247, 245, 239, .98) 0%, rgba(247, 245, 239, .93) 58%, rgba(247, 245, 239, .72) 100%),
            url("/assets/images/hero-workspace-roadmap.png");
        background-position: center bottom;
    }

    .trust-strip-item {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .trust-strip-item:nth-child(-n+2) {
        border-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}