/* ==========================================================================
   SweetK — Home page (index.html) specific styles.
   Shared tokens/reset/header/footer/PR-card live in common.css.
   ========================================================================== */

/* ---------- Background glow layer ---------- */
.bg-glow {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(
        circle,
        rgba(255, 122, 69, 0.12),
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
}

/* ---------- Scroll indicator (side) ---------- */
.scroll-nav {
    position: fixed;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: auto;
}
.scroll-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-3);
    text-transform: uppercase;
    transition: color 0.2s;
}
.scroll-nav a:hover {
    color: var(--text);
}
.scroll-nav .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    transition: all 0.2s;
}
.scroll-nav a.on .dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}
.scroll-nav a.on {
    color: var(--text);
}

/* ---------- HERO ---------- */
.hero {
    min-height: 100vh;
    position: relative;
    padding: 160px 40px 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    overflow: hidden;
}
.hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("/assets/hero-bg-ai.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    filter: contrast(1.15) saturate(0.9) hue-rotate(-8deg);
}
.hero-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 60% at 30% 40%,
            rgba(21, 24, 39, 0.3),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            rgba(21, 24, 39, 0.75) 0%,
            rgba(21, 24, 39, 0.4) 40%,
            rgba(21, 24, 39, 0.88) 100%
        ),
        linear-gradient(90deg, rgba(21, 24, 39, 0.55) 0%, transparent 60%);
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 40px;
    font-weight: 500;
}
.hero-eyebrow .live {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}
.hero-eyebrow .en {
    color: var(--text-3);
}
.hero h1 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 110px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-width: 1200px;
    color: var(--text);
}
.hero h1 .highlight {
    color: var(--accent);
}
.hero h1 .en {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.hero h1 .stroke {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}
.hero-subline {
    margin-top: 36px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
}
.hero-subline em {
    color: var(--accent);
    font-style: normal;
    font-weight: 600;
}
.hero-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 72px;
    align-items: end;
}
.hero-tagline {
    font-size: 22px;
    line-height: 1.55;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: -0.015em;
    max-width: 640px;
}
.hero-tagline strong {
    color: var(--text);
    font-weight: 700;
}
.hero-cta {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}
.btn-hero {
    padding: 16px 28px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.btn-hero.p {
    background: var(--text);
    color: var(--bg);
}
.btn-hero.p:hover {
    background: var(--accent);
    color: var(--bg);
}
.btn-hero.s {
    border: 1px solid var(--line-strong);
    color: var(--text);
}
.btn-hero.s:hover {
    border-color: var(--text);
}

/* Hero scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    gap: 14px;
}
.scroll-cue::after {
    content: "";
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.6;
    }
    50% {
        transform: translateX(20px);
        opacity: 1;
    }
}

/* Hero right stats */
.hero-stats {
    position: absolute;
    top: 180px;
    right: 150px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-family: var(--font-mono);
    text-align: right;
}
.hero-stat .label {
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.14em;
    font-weight: 500;
}
.hero-stat .val {
    font-family: var(--font-en);
    font-size: 34px;
    color: var(--text);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
.hero-stat .val em {
    color: var(--accent);
    font-style: normal;
}

/* ---------- Section: The Problem ---------- */
.story-section {
    position: relative;
    padding: 180px 40px;
    z-index: 2;
}
.story-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
}
.story-eyebrow .en {
    color: var(--text-2);
}
.story-eyebrow .num {
    color: var(--text);
    font-weight: 600;
}
.story-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--accent);
}

/* ---------- Section: TACIT → EXPLICIT → EXECUTION ---------- */
.story-flow {
    padding: 120px 40px;
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.story-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(255, 107, 53, 0.06),
        transparent 60%
    );
    pointer-events: none;
}
.story-intro {
    max-width: 1200px;
    margin: 0 auto 80px;
    text-align: center;
    position: relative;
}
.story-intro h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    max-width: 900px;
    margin: 0 auto;
    color: var(--text);
}
.story-intro h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.story-intro h2 .strong {
    color: var(--accent);
    font-weight: 700;
}
.story-intro .kr {
    font-size: 19px;
    color: var(--text-2);
    margin-top: 36px;
    line-height: 1.6;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.stages {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 60px 1fr;
    gap: 0;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
.stage {
    padding: 40px 32px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    cursor: default;
}
.stage:hover {
    border-color: var(--accent);
    background: linear-gradient(
        180deg,
        rgba(255, 107, 53, 0.06),
        var(--bg-elev-2)
    );
}
.stage:hover .stage-word {
    color: var(--accent);
}
.stage:hover .stage-viz {
    border-color: var(--accent);
}
.stage:hover .stage-viz::after {
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(255, 122, 69, 0.35)
    );
}
.stage-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    font-weight: 500;
}
.stage-word {
    font-family: var(--font-kr);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
}
.stage-word .en {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 34px;
    color: var(--text-3);
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-top: 6px;
}
.stage:hover .stage-word .en {
    color: var(--accent);
}
.stage-kr {
    font-size: 14px;
    color: var(--text-2);
    margin-top: 14px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    font-weight: 500;
}
.stage-desc {
    font-size: 16px;
    color: var(--text-2);
    margin-top: 32px;
    line-height: 1.65;
    flex: 1;
}
.stage-viz {
    margin-top: 24px;
    height: 180px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.stage-viz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(1.05) contrast(0.98);
    transition: transform 0.6s;
}
.stage:hover .stage-viz img {
    transform: scale(1.04);
}
.stage-viz::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(23, 26, 34, 0.55)
    );
    pointer-events: none;
}
.stage-viz .caption {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 2;
    font-weight: 500;
}
/* Execution stage no longer keeps orange as default — same base as others; hover triggers the accent state uniformly */
.stage-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 28px;
    font-family: var(--font-mono);
}
.stage-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent) 40%,
        var(--accent) 60%,
        transparent
    );
    opacity: 0.4;
    z-index: -1;
}

/* ---------- Section: Who We Are ---------- */
.who {
    padding: 180px 40px;
    position: relative;
    z-index: 2;
}
.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}
.who h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text);
}
.who h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.who h2 .strong {
    color: var(--accent);
    font-weight: 700;
}
.who-quote {
    font-size: 22px;
    line-height: 1.6;
    color: var(--text-2);
    margin-top: 40px;
    max-width: 520px;
}
.who-quote strong {
    color: var(--text);
    font-weight: 600;
}
.who-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--line);
}
.who-stat {
    padding: 36px 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.who-stat:nth-child(2n) {
    border-right: 0;
}
.who-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
}
.who-stat .label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 500;
}
.who-stat .value {
    font-family: var(--font-en);
    font-size: 64px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}
.who-stat .value .unit {
    font-size: 22px;
    color: var(--accent);
}
.who-stat .caption {
    font-size: 14px;
    color: var(--text-2);
    margin-top: 14px;
    line-height: 1.55;
}

/* ---------- Section: D2EX ---------- */
.d2ex {
    padding: 180px 40px 120px;
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
}
.d2ex-head {
    max-width: 1400px;
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
}
.d2ex-head h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text);
}
.d2ex-head h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.d2ex-head h2 .sub-en {
    display: block;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 16px;
}
.d2ex-head h2 .divider {
    color: var(--text-3);
    font-weight: 300;
}
.d2ex-head .r {
    font-size: 18px;
    color: var(--text-2);
    line-height: 1.65;
    padding-bottom: 16px;
}
.d2ex-head .r strong {
    color: var(--text);
    font-weight: 600;
}

/* Big flow diagram */
.d2ex-flow {
    max-width: 1400px;
    margin: 0 auto 100px;
    padding: 60px 40px;
    background: linear-gradient(180deg, var(--bg-elev), var(--bg));
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.d2ex-flow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.d2ex-flow-label {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
    letter-spacing: 0.18em;
    text-align: center;
    margin-bottom: 36px;
    text-transform: uppercase;
    font-weight: 600;
}
.d2ex-flow-svg {
    width: 100%;
    height: 320px;
}

.intel-list {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.intel-row {
    display: grid;
    grid-template-columns: 80px 1.5fr 2fr 1fr;
    gap: 40px;
    padding: 40px 32px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    align-items: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.intel-row:hover {
    border-color: var(--accent);
    background: linear-gradient(
        90deg,
        rgba(255, 107, 53, 0.06),
        var(--bg-elev)
    );
    transform: translateX(4px);
}
.intel-row .letter {
    font-family: var(--font-en);
    font-size: 88px;
    font-weight: 400;
    color: var(--text-3);
    line-height: 1;
    letter-spacing: -0.03em;
    transition: color 0.3s;
}
.intel-row:hover .letter {
    color: var(--accent);
}
.intel-row .title-en {
    font-family: var(--font-en);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
}
.intel-row .title-en .paren {
    color: var(--text-3);
    font-weight: 400;
}
.intel-row .title-kr {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-2);
    letter-spacing: 0.1em;
    margin-top: 10px;
    font-weight: 500;
}
.intel-row .desc {
    font-size: 15.5px;
    color: var(--text-2);
    line-height: 1.65;
}
.intel-row .verb {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 600;
}
.intel-row .action {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-2);
    letter-spacing: 0.1em;
    font-weight: 500;
}
.intel-row .action .arrow {
    display: none;
}

/* ---------- Solutions - Dark Section, Light Cards ---------- */
.sol {
    padding: 180px 40px;
    position: relative;
    z-index: 2;
    background: var(--bg);
    border-top: 1px solid var(--line);
    overflow: hidden;
}

.sol-head {
    max-width: 1400px;
    margin: 0 auto 72px;
    position: relative;
    z-index: 2;
}
.sol-head h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    max-width: 900px;
    color: var(--text);
}
.sol-head h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.sol-head .sub {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: 32px;
    gap: 60px;
    align-items: end;
}
.sol-head .kr {
    font-size: 18px;
    color: var(--text-2);
    line-height: 1.65;
    max-width: 620px;
}
.sol-head .count {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-2);
    letter-spacing: 0.14em;
    text-align: right;
    font-weight: 500;
}
.sol-head .count .num {
    font-family: var(--font-en);
    font-size: 56px;
    color: var(--text);
    font-weight: 500;
    display: block;
    line-height: 1;
    letter-spacing: -0.02em;
}

.sol-scroll-wrap {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.sol-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.sol-progress {
    flex: 1;
    height: 2px;
    background: var(--line);
    position: relative;
    margin-right: 40px;
}
.sol-progress .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--accent);
    width: 16.6%;
}
.sol-arrows {
    display: flex;
    gap: 8px;
}
.sol-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    transition: all 0.2s;
    background: transparent;
}
.sol-arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* CARDS: unified warm-cream card with orange gradient (same as X.Lobe flagship) */
.sol-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.sol-cards + .sol-cards {
    margin-top: 20px;
}
.sol-card {
    padding: 0;
    position: relative;
    background: linear-gradient(180deg, #ffedde 0%, #f7f5f0 45%);
    border-radius: 8px;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03),
        0 20px 40px rgba(0, 0, 0, 0.35);
    color: #1a1d26;
}
.sol-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 32px 60px rgba(0, 0, 0, 0.5);
}
.sol-card-idx {
    padding: 20px 24px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #4a5060;
    letter-spacing: 0.14em;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    text-transform: uppercase;
}
.sol-card-idx .tag {
    color: var(--accent);
    padding: 4px 10px;
    border: 1px solid var(--accent);
    border-radius: 100px;
    font-size: 9.5px;
    font-weight: 600;
    background: rgba(255, 122, 69, 0.08);
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.sol-card:hover .sol-card-idx .tag {
    background: var(--accent);
    color: #ffffff;
}

/* Solution image (photo) */
.sol-card-visual {
    width: calc(100% - 48px);
    height: 200px;
    margin: 20px 24px 0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: #edeae0;
}
.sol-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(1.02) contrast(0.98);
    transition: transform 0.5s;
}
.sol-card:hover .sol-card-visual img {
    transform: scale(1.04);
}
.sol-card-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(247, 245, 240, 0.4)
    );
    pointer-events: none;
}
.sol-card-visual .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(26, 29, 38, 0.72);
    padding: 5px 10px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
    z-index: 2;
    font-weight: 500;
}

.sol-card-body {
    padding: 20px 24px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sol-card-body h3 {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1;
    color: #1a1d26;
}
.sol-card-body h3 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}
.sol-card-body h3 .r {
    color: var(--accent);
    font-size: 18px;
    vertical-align: top;
    margin-left: 2px;
    font-family: var(--font-en);
}
.sol-card-body .name-kr {
    font-size: 14.5px;
    color: #4a5060;
    margin-top: 6px;
    font-weight: 500;
}
.sol-card-body .desc {
    font-size: 14.5px;
    color: #4a5060;
    line-height: 1.6;
    margin-top: 16px;
    flex: 1;
}
.sol-card-body .metrics {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 29, 38, 0.1);
}
.sol-metric .val {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--accent);
}
.sol-metric .lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #7a8194;
    letter-spacing: 0.1em;
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Flagship (X.Lobe) tag uses the same outline-by-default → filled-on-hover behavior as other cards */

/* Bottom CTA: single centered download button below all 6 cards */
.sol-bottom-cta {
    max-width: 1440px;
    margin: 48px auto 0;
    display: flex;
    justify-content: center;
}
.sol-bottom-cta a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--accent);
    color: #ffffff;
    font-family: var(--font-kr);
    font-weight: 600;
    font-size: 16px;
    border-radius: 100px;
    letter-spacing: -0.01em;
    transition: all 0.2s;
    box-shadow: 0 12px 32px rgba(255, 122, 69, 0.35);
}
.sol-bottom-cta a:hover {
    background: var(--accent-warm);
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(255, 122, 69, 0.45);
}
.sol-bottom-cta a .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}
.sol-bottom-cta a .ico svg {
    width: 14px;
    height: 14px;
}

/* ---------- Impact / Numbers Big ---------- */
.impact {
    padding: 200px 40px 180px;
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
}
.impact::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.08),
        transparent 60%
    );
    filter: blur(20px);
    pointer-events: none;
}
.impact-eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.16em;
    margin-bottom: 32px;
    position: relative;
    font-weight: 600;
}
.impact h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 72px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    position: relative;
    margin-bottom: 80px;
    color: var(--text);
}
.impact h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.impact h2 .strong {
    color: var(--accent);
    font-weight: 700;
}
.impact-nums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}
.impact-num {
    padding: 56px 32px;
    border-right: 1px solid var(--line);
    text-align: left;
}
.impact-num:last-child {
    border-right: 0;
}
.impact-num .lbl {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-2);
    letter-spacing: 0.14em;
    margin-bottom: 26px;
    font-weight: 500;
}
.impact-num .v {
    font-family: var(--font-en);
    font-size: 96px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--text);
}
.impact-num .v .u {
    color: var(--accent);
    font-size: 32px;
    vertical-align: top;
}
.impact-num .desc {
    font-size: 14px;
    color: var(--text-2);
    margin-top: 22px;
    line-height: 1.6;
}

/* ---------- Industries ---------- */
.ind {
    padding: 180px 40px;
    position: relative;
    z-index: 2;
    background: var(--bg-elev);
    border-top: 1px solid var(--line);
}
.ind-head {
    max-width: 1400px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
}
.ind-head h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text);
}
.ind-head h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.ind-head .r {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.65;
    padding-bottom: 12px;
}
.ind-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--line);
}
.ind-item {
    padding: 36px 24px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    transition: background 0.3s;
    background: var(--bg);
    min-height: 260px;
}
.ind-item:nth-child(5n) {
    border-right: 0;
}
.ind-item:last-child {
    border-right: 0;
}
.ind-item:hover {
    background: var(--bg-elev-2);
}
.ind-item .icon-wrap {
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.ind-item .icon-wrap svg {
    width: 28px;
    height: 28px;
}
.ind-item .kr {
    font-family: var(--font-kr);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
}
.ind-item .en {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ind-item .desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.65;
    margin-top: 8px;
}
.ind-item .clients {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Partners bar */
.partners-bar {
    max-width: 1400px;
    margin: 80px auto 0;
}
.partners-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}
.partners-header .label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}
.partners-header .label::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent);
}
.partners-header .count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-2);
    letter-spacing: 0.14em;
    font-weight: 500;
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--line);
}
.partner-cell {
    border-right: 1px solid var(--line);
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    transition: all 0.3s;
    position: relative;
    background: transparent;
    min-width: 0;
    overflow: hidden;
}
.partner-cell:nth-child(6n) {
    border-right: 0;
}
.partner-cell:nth-child(n + 7) {
    border-top: 1px solid var(--line);
}
.partner-cell:hover {
    background: var(--bg-elev-2);
}
/* Show real color logos on dark bg. Preserve original colors — just soften opacity. */
.partner-cell img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
    transition:
        opacity 0.35s,
        transform 0.35s;
    -webkit-user-drag: none;
    user-select: none;
    background: transparent;
}
.partner-cell:hover img {
    opacity: 1;
    transform: scale(1.04);
}
/* Per-logo size overrides — max-width uses % so it never exceeds the cell */
.partner-cell.wide img {
    max-height: 58px;
    max-width: 100%;
} /* long/wide logos (KOEN) */
.partner-cell.tall img {
    max-height: 88px;
    max-width: 100%;
} /* stacked logos (Hanwha symbol) */
.partner-cell.small img {
    max-height: 40px;
    max-width: 100%;
} /* compact logos (Housing) */
.partner-item:hover {
    color: var(--text);
}

/* ---------- PR (home preview wrapper — cards themselves are the shared .pr-list component) ---------- */
.pr {
    padding: 180px 40px;
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
}
.pr-head {
    max-width: 1400px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
}
.pr-head h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text);
}
.pr-head h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.pr-head .kr {
    font-size: 17px;
    color: var(--text-2);
    margin-top: 18px;
    max-width: 620px;
    line-height: 1.6;
}
.pr-head .all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
    letter-spacing: 0.1em;
    padding: 12px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    transition: all 0.2s;
}
.pr-head .all:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Final CTA ---------- */
.final-cta {
    padding: 200px 40px;
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-top: 1px solid var(--line);
}
.final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 80% at 50% 50%,
        rgba(255, 107, 53, 0.1),
        transparent 70%
    );
    pointer-events: none;
}
.final-cta::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border: 1px solid var(--line);
    border-radius: 50%;
    pointer-events: none;
    animation: pulseRing 4s ease-in-out infinite;
}
@keyframes pulseRing {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.6;
    }
}
.final-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.16em;
    margin-bottom: 32px;
    position: relative;
}
.final-cta h2 {
    font-family: var(--font-kr);
    font-weight: 700;
    font-size: 72px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
    position: relative;
    color: var(--text);
}
.final-cta h2 em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.final-cta h2 .strong {
    color: var(--accent);
    font-weight: 700;
}
.final-cta p {
    font-size: 20px;
    color: var(--text-2);
    max-width: 680px;
    margin: 0 auto 56px;
    line-height: 1.65;
    position: relative;
}
.final-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;
}
.btn-final {
    padding: 20px 40px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    font-family: var(--font-kr);
    letter-spacing: -0.01em;
}
.btn-final.p {
    background: var(--accent);
    color: var(--bg);
}
.btn-final.p:hover {
    background: var(--accent-warm);
    transform: translateY(-2px);
}
.btn-final.s {
    border: 1px solid var(--line-strong);
    color: var(--text);
}
.btn-final.s:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Animations */
@keyframes flowLine {
    to {
        stroke-dashoffset: -40;
    }
}
.flow-anim {
    stroke-dasharray: 2 5;
    animation: flowLine 1.6s linear infinite;
}

/* ---------- Contact Modal ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 12, 0.78);
    backdrop-filter: blur(10px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: min(960px, calc(100vw - 64px));
    max-height: calc(100vh - 80px);
    overflow: auto;
    background: #1e2237;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    z-index: 210;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.modal.open {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.modal-head {
    padding: 36px 44px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    border-bottom: 1px solid var(--line);
}
.modal-head .l .eyebrow {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent);
    letter-spacing: 0.16em;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.modal-head .l .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent);
}
.modal-head .l h3 {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-top: 14px;
    color: var(--text);
}
.modal-head .l h3 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}
.modal-close {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: transparent;
    flex-shrink: 0;
}
.modal-close:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(90deg);
}
.modal-body {
    padding: 32px 44px 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.modal-block {
    padding: 28px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    position: relative;
}
.modal-block.hl {
    background: linear-gradient(
        180deg,
        rgba(255, 122, 69, 0.08),
        var(--bg-elev-2)
    );
    border-color: rgba(255, 122, 69, 0.25);
}
.modal-block .tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-block .tag .dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
}
.modal-block h4 {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 6px;
}
.modal-block .subline {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.modal-block .addr {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
    font-weight: 500;
}
.modal-block .addr strong {
    color: var(--text);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}
.modal-block .row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.modal-block .row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.modal-block .row:first-of-type {
    padding-top: 0;
}
.modal-block .row .role {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    min-width: 64px;
}
.modal-block .row .name {
    font-size: 14.5px;
    color: var(--text);
    font-weight: 600;
    flex: 1;
}
.modal-block .row .email {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}
.modal-block .row .email:hover {
    color: var(--accent-warm);
}
.modal-map {
    grid-column: 1 / -1;
    padding: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.modal-map-inner {
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-elev-2), var(--bg));
}
.modal-map-inner .l {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}
.modal-map-inner .r {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.1em;
}
.modal-map-viz {
    padding: 32px;
    position: relative;
    height: 200px;
    background:
        linear-gradient(
                to right,
                rgba(255, 255, 255, 0.04) 1px,
                transparent 1px
            )
            0 0/40px 40px,
        linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.04) 1px,
                transparent 1px
            )
            0 0/40px 40px,
        var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 32px;
}
.map-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    flex: 1;
    max-width: 280px;
}
.map-pin .pin {
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 122, 69, 0.45);
    position: relative;
}
.map-pin .pin::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #1e2237;
    border-radius: 50%;
}
.map-pin .pin::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
}
.map-pin .label {
    font-family: var(--font-en);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    text-align: center;
}
.map-pin .sub {
    font-size: 12.5px;
    color: var(--text-2);
    text-align: center;
    line-height: 1.4;
}
.modal-footer {
    padding: 20px 44px;
    border-top: 1px solid var(--line);
    background: rgba(5, 7, 12, 0.4);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.1em;
    display: flex;
    justify-content: space-between;
}

/* ==========================================================================
   Responsive — home page
   ========================================================================== */

/* ---------- Tablet / small laptop (≤ 1200px) ---------- */
@media (max-width: 1200px) {
    .hero h1 {
        font-size: 76px;
    }
    .hero-stats {
        position: static;
        margin-top: 48px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px;
        text-align: left;
    }
    .story-intro h2,
    .who h2,
    .d2ex-head h2,
    .sol-head h2 {
        font-size: 46px;
    }
    .impact h2,
    .final-cta h2 {
        font-size: 52px;
    }
    .impact-num .v {
        font-size: 72px;
    }
    .ind-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ind-item:nth-child(5n) {
        border-right: 1px solid var(--line);
    }
    .ind-item:nth-child(3n) {
        border-right: 0;
    }
    .partners-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .partner-cell:nth-child(6n) {
        border-right: 1px solid var(--line);
    }
    .partner-cell:nth-child(4n) {
        border-right: 0;
    }
    .partner-cell:nth-child(n + 7) {
        border-top: 0;
    }
    .partner-cell:nth-child(n + 5) {
        border-top: 1px solid var(--line);
    }
    .sol-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Mobile (≤ 960px) — matches the nav hamburger breakpoint ---------- */
@media (max-width: 960px) {
    .bg-glow {
        width: 560px;
        height: 560px;
    }
    .scroll-nav {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 120px 24px 56px;
    }
    .hero h1 {
        font-size: 46px;
        letter-spacing: -0.02em;
    }
    .hero-sub {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 40px;
    }
    .hero-tagline {
        font-size: 18px;
        max-width: none;
    }
    .hero-cta {
        justify-content: flex-start;
    }
    .hero-stats {
        gap: 24px;
    }
    .scroll-cue {
        display: none;
    }

    .story-section,
    .who,
    .d2ex,
    .sol,
    .ind,
    .pr,
    .final-cta {
        padding-top: 90px;
        padding-bottom: 90px;
    }
    .story-flow {
        padding: 72px 24px;
    }
    .story-intro h2,
    .who h2,
    .d2ex-head h2,
    .sol-head h2 {
        font-size: 36px;
    }
    .story-intro .kr {
        font-size: 16px;
    }

    .stages {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .stage {
        min-height: 0;
    }
    .stage-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }
    .stage-arrow::before {
        display: none;
    }
    .stage-word {
        font-size: 36px;
    }
    .stage-word .en {
        font-size: 26px;
    }

    .who-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .d2ex {
        padding-left: 24px;
        padding-right: 24px;
    }
    .d2ex-head {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .d2ex-flow {
        padding: 32px 20px;
        margin-bottom: 60px;
    }
    .d2ex-flow-svg {
        height: auto;
        aspect-ratio: 1200 / 300;
    }
    .intel-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 28px 20px;
    }
    .intel-row .letter {
        font-size: 48px;
    }
    .intel-row .action {
        text-align: left;
        flex-direction: row;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sol {
        padding-left: 24px;
        padding-right: 24px;
    }
    .sol-head .sub {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .sol-head .count {
        text-align: left;
    }
    .sol-cards {
        grid-template-columns: 1fr;
    }

    .impact {
        padding: 100px 24px 80px;
    }
    .impact h2 {
        font-size: 40px;
    }
    .impact-nums {
        grid-template-columns: 1fr 1fr;
    }
    .impact-num {
        padding: 36px 20px;
        border-bottom: 1px solid var(--line);
    }
    .impact-num:nth-child(2n) {
        border-right: 0;
    }
    .impact-num:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
    .impact-num .v {
        font-size: 56px;
    }

    .ind-head,
    .d2ex-head {
        gap: 24px;
    }
    .ind-head h2 {
        font-size: 36px;
    }
    .ind-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ind-item {
        border-bottom: 1px solid var(--line);
    }
    .ind-item:nth-child(3n) {
        border-right: 1px solid var(--line);
    }
    .ind-item:nth-child(2n) {
        border-right: 0;
    }
    .ind-item:last-child {
        border-bottom: 0;
    }
    .partners-bar {
        margin-top: 56px;
    }
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .partner-cell:nth-child(4n) {
        border-right: 1px solid var(--line);
    }
    .partner-cell:nth-child(3n) {
        border-right: 0;
    }
    .partner-cell:nth-child(n + 5) {
        border-top: 0;
    }
    .partner-cell:nth-child(n + 4) {
        border-top: 1px solid var(--line);
    }

    .pr-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pr-head h2 {
        font-size: 36px;
    }

    .final-cta {
        padding: 120px 24px;
    }
    .final-cta h2 {
        font-size: 40px;
    }
    .final-cta p {
        font-size: 17px;
    }
    .final-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-final {
        justify-content: center;
    }

    .modal {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 40px);
        top: 50%;
    }
    .modal-head {
        padding: 28px 24px 20px;
    }
    .modal-head .l h3 {
        font-size: 36px;
    }
    .modal-body {
        grid-template-columns: 1fr;
        padding: 20px 24px 28px;
        gap: 20px;
    }
    .modal-map-viz {
        flex-direction: column;
        height: auto;
        gap: 24px;
        padding: 24px;
    }
    .modal-footer {
        flex-direction: column;
        gap: 6px;
        padding: 16px 24px;
    }
}

/* ---------- Small phones (≤ 480px) ---------- */
@media (max-width: 480px) {
    .hero {
        padding: 110px 20px 48px;
    }
    .hero h1 {
        font-size: 34px;
    }
    .hero-eyebrow {
        font-size: 10.5px;
        margin-bottom: 28px;
    }
    .hero-subline {
        font-size: 11.5px;
    }
    .hero-stats {
        gap: 20px 28px;
    }
    .hero-stat .val {
        font-size: 26px;
    }
    .btn-hero {
        padding: 13px 20px;
        font-size: 13px;
    }

    .story-intro h2,
    .who h2,
    .d2ex-head h2,
    .sol-head h2 {
        font-size: 30px;
    }
    .stage-word {
        font-size: 30px;
    }
    .stage-word .en {
        font-size: 22px;
    }

    .who-stats {
        grid-template-columns: 1fr;
    }
    .who-stat {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .who-stat:last-child {
        border-bottom: 0;
    }

    .impact h2,
    .final-cta h2 {
        font-size: 32px;
    }
    .impact-nums {
        grid-template-columns: 1fr;
    }
    .impact-num {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line);
    }
    .impact-num:last-child {
        border-bottom: 0;
    }
    .impact-num .v {
        font-size: 48px;
    }

    .ind-head h2 {
        font-size: 30px;
    }
    .ind-grid {
        grid-template-columns: 1fr;
    }
    .ind-item {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line);
        min-height: 0;
    }
    .ind-item:last-child {
        border-bottom: 0;
    }
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .partner-cell:nth-child(3n) {
        border-right: 1px solid var(--line);
    }
    .partner-cell:nth-child(2n) {
        border-right: 0;
    }
    .partner-cell:nth-child(n + 4) {
        border-top: 0;
    }
    .partner-cell:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .pr-head h2 {
        font-size: 30px;
    }

    .sol-bottom-cta a {
        width: 100%;
        justify-content: center;
        padding: 18px 28px;
    }
}