:root {
    --bg: #eef1f6;
    --surface: #e2e7ef;
    --surface2: #ffffff;
    --border: rgba(0,0,20,.06);
    --border2: rgba(0,0,20,.1);
    --text: #1a1a2e;
    --text2: #4a4a6a;
    --text3: #8888a8;
    --l2: #3b82f6;
    --l2-light: rgba(59,130,246,.08);
    --l2-glow: rgba(59,130,246,.12);
    --l3: #10b981;
    --l3-light: rgba(16,185,129,.08);
    --l3-glow: rgba(16,185,129,.12);
    --l4: #ea580c;
    --l4-light: rgba(234,88,12,.06);
    --l4-glow: rgba(234,88,12,.1);
    --gold: #d97706;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(0,0,20,.04);
    --shadow: 0 2px 8px rgba(0,0,20,.06);
    --shadow-md: 0 4px 16px rgba(0,0,20,.08);
    --shadow-lg: 0 12px 32px rgba(0,0,20,.1);
    --shadow-xl: 0 20px 48px rgba(0,0,20,.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.ambient {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.ambient__orb {
    position: absolute; border-radius: 50%; filter: blur(140px); opacity: .25;
    animation: orbFloat 14s ease-in-out infinite alternate;
}
.ambient__orb--1 {
    width: 700px; height: 700px; top: -15%; left: -10%;
    background: radial-gradient(circle, rgba(59,130,246,.1), transparent 70%);
}
.ambient__orb--2 {
    width: 550px; height: 550px; top: 35%; right: -12%;
    background: radial-gradient(circle, rgba(234,88,12,.06), transparent 70%);
    animation-delay: -5s; animation-duration: 18s;
}
.ambient__orb--3 {
    width: 450px; height: 450px; bottom: -8%; left: 25%;
    background: radial-gradient(circle, rgba(16,185,129,.05), transparent 70%);
    animation-delay: -9s; animation-duration: 20s;
}
@keyframes orbFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(25px, -18px) scale(1.06); }
    100% { transform: translate(-18px, 12px) scale(.96); }
}

.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0 40px;
    background: rgba(10,14,30,.82);
    backdrop-filter: blur(28px) saturate(1.6);
    border-bottom: 1px solid rgba(91,79,199,.15);
    transition: all .35s cubic-bezier(.4,0,.2,1);
}
.nav::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, #5b4fc7 20%, #7c6fe0 50%, #5b4fc7 80%, transparent 100%);
    background-size: 200% 100%;
    animation: navLine 4s linear infinite;
}
@keyframes navLine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.nav.scrolled {
    background: rgba(10,14,30,.94);
    border-bottom-color: rgba(91,79,199,.25);
    box-shadow: 0 4px 30px rgba(91,79,199,.12), 0 1px 0 rgba(91,79,199,.1);
}
.nav__inner {
    max-width: 1120px; margin: 0 auto;
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; position: relative;
}
.nav__logo-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(91,79,199,.12));
    transition: transform .3s ease, filter .3s ease;
}
.nav__logo:hover .nav__logo-icon {
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 3px 8px rgba(91,79,199,.2));
}
.nav__logo-text {
    font-size: 1.15rem; font-weight: 700; letter-spacing: .22em;
    color: #fff;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    transition: letter-spacing .3s ease;
}
.nav__logo:hover .nav__logo-text {
    letter-spacing: .28em;
}
.nav__links { display: flex; gap: 36px; }
.nav__links a {
    font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.7);
    text-decoration: none; transition: all .2s;
    position: relative; padding: 4px 0;
}
.nav__links a::after {
    content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, #5b4fc7, #7c6fe0); border-radius: 1px;
    transition: all .3s ease; transform: translateX(-50%);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__btn {
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    padding: 8px 24px; border-radius: 20px;
    background: linear-gradient(135deg, #bae6fd, #7dd3fc); color: #1a1a2e;
    text-decoration: none; transition: all .25s;
    position: relative; overflow: hidden;
    box-shadow: 0 2px 12px rgba(125,211,252,.25);
}
.nav__btn:hover { box-shadow: 0 4px 20px rgba(125,211,252,.4); transform: translateY(-2px); }
.nav__btn:active { transform: translateY(0) scale(.97); }

.ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.2);
    transform: scale(0); animation: rippleAnim .6s ease-out forwards;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

.modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all .3s ease;
}
.modal.active {
    opacity: 1; visibility: visible;
}
.modal__overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}
.modal__content {
    position: relative; z-index: 1;
    max-width: 90vw; max-height: 85vh;
    background: #fff; border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    transform: scale(.9) translateY(20px);
    transition: transform .3s ease;
    overflow: hidden;
}
.modal.active .modal__content {
    transform: scale(1) translateY(0);
}
.modal__close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,.5); color: #fff;
    border: none; font-size: 24px; line-height: 1;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center;
}
.modal__close:hover {
    background: rgba(0,0,0,.7); transform: rotate(90deg);
}
.modal__img {
    display: block; max-width: 100%; max-height: 85vh;
    object-fit: contain;
    margin: 0 auto;
}

.hero {
    min-height: 100vh; display: flex; align-items: center;
    padding-top: 60px; position: relative;
}
.hero__inner {
    max-width: 760px; margin: 0 auto; padding: 0 40px;
    position: relative; z-index: 1;
    width: 100%; text-align: center;
}
.hero__eyebrow {
    font-size: .65rem; font-weight: 700; letter-spacing: .25em;
    color: #5b4fc7; margin-bottom: 32px;
    padding: 6px 18px; border-radius: 20px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(91,79,199,.15);
    display: inline-block;
    opacity: 0; transform: translateY(10px);
    animation: heroFadeIn .5s ease .15s forwards;
}
.hero__title {
    font-size: 4.8rem; font-weight: 900; letter-spacing: -.02em;
    line-height: 1.08; margin-bottom: 28px;
    color: #1a1a2e;
    opacity: 0; transform: translateY(14px);
    animation: heroFadeIn .7s ease .3s forwards;
}
.hero__sub {
    font-size: 1.3rem; font-weight: 600; color: #334155;
    margin-bottom: 24px; letter-spacing: .02em;
    opacity: 0; transform: translateY(10px);
    animation: heroFadeIn .5s ease .45s forwards;
}
.hero__desc {
    font-size: .88rem; color: #586981; max-width: 640px;
    line-height: 2.2; margin-bottom: 44px;
    margin-left: auto; margin-right: auto;
    text-align: justify; text-justify: inter-ideograph;
    opacity: 0; transform: translateY(10px);
    animation: heroFadeIn .5s ease .55s forwards;
}
.hero__actions {
    display: flex; gap: 14px; margin-bottom: 72px;
    justify-content: center; flex-wrap: wrap;
    opacity: 0; transform: translateY(10px);
    animation: heroFadeIn .5s ease .65s forwards;
}
@keyframes heroFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 28px; border-radius: var(--radius-sm);
    font-size: .88rem; font-weight: 600; text-decoration: none;
    transition: all .25s cubic-bezier(.4,0,.2,1); border: none; cursor: pointer; font-family: inherit;
    position: relative; overflow: hidden;
}
.btn--primary {
    background: linear-gradient(135deg, #bae6fd, #7dd3fc); color: #1a1a2e;
    box-shadow: 0 4px 16px rgba(125,211,252,.3);
}
.btn--primary:hover {
    box-shadow: 0 6px 24px rgba(125,211,252,.45);
    transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 8px rgba(125,211,252,.2); }
.btn--ghost {
    background: rgba(255,255,255,.55); color: #475569; border: 1px solid rgba(91,79,199,.1);
    backdrop-filter: blur(8px);
}
.btn--ghost:hover {
    color: #334155; border-color: rgba(91,79,199,.2);
    background: rgba(255,255,255,.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91,79,199,.08);
}
.btn--ghost:active { transform: translateY(0) scale(.97); }
.btn--lg { padding: 14px 32px; font-size: .92rem; }

.section { padding: 120px 0; position: relative; }
.section--alt { background: var(--surface); }
.section--alt::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 10%, var(--border2) 50%, transparent 90%);
}
.section--alt::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 10%, var(--border2) 50%, transparent 90%);
}

.section__header { margin-bottom: 52px; }
.section__header--center { text-align: center; }
.section__header--center .section__desc { margin-left: auto; margin-right: auto; }

.tag {
    display: inline-block;
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--l4); margin-bottom: 14px;
    padding: 5px 14px; border-radius: 4px;
    background: var(--l4-glow);
}
.section__title {
    font-size: 2.2rem; font-weight: 800; letter-spacing: -.025em;
    margin-bottom: 12px; line-height: 1.25;
}
.section__desc {
    font-size: .92rem; color: var(--text2); max-width: 560px;
    line-height: 1.8; margin-bottom: 0;
}

.carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 0 52px;
}
.carousel__track {
    display: flex;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.carousel__slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 4px;
}
.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    z-index: 2;
    box-shadow: var(--shadow);
}
.carousel__arrow:hover {
    background: #fff;
    color: var(--text);
    border-color: rgba(91,79,199,.2);
    box-shadow: var(--shadow-md);
    transform: translateY(-50%) scale(1.08);
}
.carousel__arrow:active {
    transform: translateY(-50%) scale(.95);
}
.carousel__arrow--prev { left: 4px; }
.carousel__arrow--next { right: 4px; }
.carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border2);
    cursor: pointer;
    transition: all .3s;
    padding: 0;
}
.carousel__dot:hover {
    background: var(--text3);
}
.carousel__dot--active {
    background: linear-gradient(135deg, #5b4fc7, #7c6fe0);
    width: 24px;
    border-radius: 4px;
}

.feat-slide {
    width: 100%;
    max-width: 580px;
    padding: 48px 40px 40px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,.8);
    text-align: center;
    position: relative;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 40px rgba(0,0,20,.06);
    transition: box-shadow .4s, background .4s;
}
.feat-slide:hover {
    box-shadow: 0 16px 56px rgba(0,0,20,.1);
}
.feat-slide--core {
    border-top: 3px solid var(--l4);
    background: linear-gradient(165deg, rgba(234,88,12,.06) 0%, rgba(255,255,255,.7) 40%, rgba(59,130,246,.04) 100%);
}
.feat-slide--core:hover {
    background: linear-gradient(165deg, rgba(234,88,12,.1) 0%, rgba(255,255,255,.85) 40%, rgba(59,130,246,.07) 100%);
}
.feat-slide--adv {
    border-top: 3px solid var(--l3);
    background: linear-gradient(165deg, rgba(16,185,129,.06) 0%, rgba(255,255,255,.7) 40%, rgba(108,92,231,.04) 100%);
}
.feat-slide--adv:hover {
    background: linear-gradient(165deg, rgba(16,185,129,.1) 0%, rgba(255,255,255,.85) 40%, rgba(108,92,231,.07) 100%);
}
.feat-slide--excl {
    border-top: 3px solid #fd79a8;
    background: linear-gradient(165deg, rgba(253,121,168,.08) 0%, rgba(108,92,231,.06) 30%, rgba(255,255,255,.7) 100%);
}
.feat-slide--excl:hover {
    background: linear-gradient(165deg, rgba(253,121,168,.14) 0%, rgba(108,92,231,.1) 30%, rgba(255,255,255,.85) 100%);
}
.feat-slide__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 5px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fd79a8, #6c5ce7);
    color: #fff;
    white-space: nowrap;
}
.feat-slide__icon {
    font-size: 3.2rem;
    line-height: 1;
    display: block;
    margin-bottom: 20px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
.feat-slide__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 14px;
    letter-spacing: -.01em;
}
.feat-slide__tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}
.feat-slide__tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 4px 14px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.feat-slide__tags .feat-slide__tag {
    margin-bottom: 0;
}
.feat-slide__tag--all { background: rgba(0,180,216,.1); color: #0096c7; }
.feat-slide__tag--ok { background: rgba(108,92,231,.1); color: #6c5ce7; }
.feat-slide__tag--partial { background: rgba(255,183,77,.12); color: #e67e22; }
.feat-slide__tag--off { background: rgba(231,76,60,.08); color: #c0392b; }
.feat-slide__tag--gold { background: rgba(253,121,168,.12); color: #d63384; }
.feat-slide__desc {
    font-size: .92rem;
    color: var(--text2);
    line-height: 1.9;
    margin: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

.cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    align-items: stretch;
}
.card {
    padding: 32px 26px 26px; background: var(--surface2); border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    opacity: 0; transition: opacity .3s;
}
.card:nth-child(1)::before { background: linear-gradient(90deg, transparent, var(--l2), transparent); }
.card:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--l3), transparent); }
.card:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--l4), transparent); }
.card:hover {
    border-color: var(--border2);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.card:hover::before { opacity: 1; }
.card:active { transform: translateY(-3px) scale(.985); }
.card--featured {
    border-color: rgba(16,185,129,.12);
    background: linear-gradient(180deg, rgba(16,185,129,.03), var(--surface2) 40%);
}
.card--featured::before { opacity: .6; }
.card--featured:hover {
    border-color: rgba(16,185,129,.25);
    box-shadow: 0 16px 48px rgba(16,185,129,.08);
}
.card__pop {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    padding: 4px 16px; border-radius: 0 0 8px 8px;
    background: linear-gradient(135deg, var(--l3), #059669);
    color: #fff;
}
.card__head { margin-bottom: 14px; }
.card__level {
    font-size: 2rem; font-weight: 900; letter-spacing: -.02em;
    display: block; margin-bottom: 4px; line-height: 1;
}
.card__level--l2 { color: var(--l2); }
.card__level--l3 { color: var(--l3); }
.card__level--l4 { color: var(--l4); }
.card__head h3 { font-size: .9rem; font-weight: 600; color: var(--text2); line-height: 1.4; }

.card__power {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.card__power-info {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.card__power-model {
    font-size: .78rem; color: var(--text3); font-weight: 500;
}
.card__power-val {
    font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.card__power-val small { font-size: .68rem; font-weight: 500; opacity: .7; margin-left: 2px; }
.card__power-val--l2 { color: var(--l2); }
.card__power-val--l3 { color: var(--l3); }
.card__power-val--l4 { color: var(--l4); }
.card__power-bar {
    height: 5px; background: rgba(255,255,255,.6); border-radius: 3px; overflow: hidden;
}
.card__power-fill {
    height: 100%; border-radius: 3px; width: 0;
    transition: width 1.6s cubic-bezier(.4,0,.2,1);
}
.card__power-fill--l2 { background: linear-gradient(90deg, rgba(59,130,246,.2), var(--l2)); }
.card__power-fill--l3 { background: linear-gradient(90deg, rgba(16,185,129,.2), var(--l3)); }
.card__power-fill--l4 { background: linear-gradient(90deg, rgba(234,88,12,.2), var(--l4), var(--gold)); }

.card__intro {
    font-size: .86rem; color: var(--text2); line-height: 1.65;
    margin-bottom: 18px; flex: 1;
}
.card__list {
    list-style: none; padding: 0; margin-bottom: 22px;
}
.card__list li {
    font-size: .82rem; color: var(--text3); padding: 6px 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: flex-start; gap: 8px;
    transition: color .2s;
}
.card__list li:last-child { border-bottom: none; }
.card__check {
    font-weight: 600; flex-shrink: 0;
    font-size: .78rem; margin-top: 1px;
}
.card__check--l2 { color: var(--l2); }
.card__check--l3 { color: var(--l3); }
.card__check--l4 { color: var(--l4); }
.card__list--off {
    color: var(--text3) !important;
    opacity: .5;
}
.card__cross {
    color: #b91c1c; font-weight: 600; flex-shrink: 0;
    font-size: .78rem; margin-top: 1px;
}
.card__list--excl {
    color: var(--l4) !important;
    font-weight: 600;
    opacity: 1 !important;
}
.card__star {
    color: var(--gold); font-weight: 700; flex-shrink: 0;
    font-size: .82rem; margin-top: 1px;
}
.card:hover .card__list li { color: var(--text2); }
.card__btn {
    display: block; text-align: center; padding: 12px; border-radius: var(--radius-sm);
    font-size: .84rem; font-weight: 600; text-decoration: none;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.card__btn--l2 { background: var(--l2); color: #fff; }
.card__btn--l3 { background: var(--l3); color: #fff; }
.card__btn--l4 { background: linear-gradient(135deg, var(--l4), var(--gold)); color: #fff; }
.card__btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.power__note {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 20px; background: var(--surface2); border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-top: 24px;
}
.power__note-icon {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--l4-light); color: var(--l4);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; font-style: italic;
}
.power__note p { font-size: .84rem; color: var(--text3); line-height: 1.7; }
.power__note strong { color: var(--text2); font-weight: 600; }

.acc {
    display: flex; flex-direction: column; gap: 8px;
}
.acc__item {
    background: var(--surface2); border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color .3s, box-shadow .3s;
}
.acc__item:hover {
    border-color: var(--border2);
}
.acc__item--open {
    border-color: var(--border2);
    box-shadow: var(--shadow);
}
.acc__item--excl {
    border-color: rgba(234,88,12,.1);
}
.acc__item--excl.acc__item--open {
    border-color: rgba(234,88,12,.2);
    box-shadow: 0 4px 20px rgba(234,88,12,.06);
}

.acc__trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 18px 24px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; color: var(--text);
    transition: background .2s;
}
.acc__trigger:hover { background: rgba(0,0,20,.015); }
.acc__trigger:active { background: rgba(0,0,20,.03); }
.acc__trigger-left {
    display: flex; align-items: center; gap: 12px;
}
.acc__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--l2); flex-shrink: 0;
    transition: transform .3s;
}
.acc__item--open .acc__dot { transform: scale(1.3); }
.acc__dot--adv { background: var(--l3); }
.acc__dot--excl { background: var(--l4); }
.acc__trigger-title {
    font-size: .92rem; font-weight: 700; letter-spacing: -.01em;
}
.acc__trigger-right {
    display: flex; align-items: center; gap: 10px;
}
.acc__count {
    font-size: .72rem; color: var(--text3); font-weight: 500;
}
.acc__tag {
    font-size: .68rem; font-weight: 600;
    padding: 3px 10px; border-radius: 4px;
    white-space: nowrap;
}
.acc__tag--all { background: rgba(59,130,246,.06); color: var(--l2); }
.acc__tag--adv { background: rgba(16,185,129,.06); color: var(--l3); }
.acc__tag--gold {
    background: linear-gradient(135deg, var(--l4), var(--gold));
    color: #fff;
}
.acc__chevron {
    flex-shrink: 0; color: var(--text3);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.acc__item--open .acc__chevron { transform: rotate(180deg); }

.acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.acc__item--open > .acc__body {
    grid-template-rows: 1fr;
}
.acc__body-inner {
    overflow: hidden;
}

.acc__feat {
    border-top: 1px solid var(--border);
}
.acc__feat:first-child { border-top: none; }

.acc__feat-trigger {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 24px 14px 48px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; color: var(--text);
    transition: background .2s;
}
.acc__feat-trigger:hover { background: rgba(0,0,20,.02); }
.acc__feat-trigger:active { background: rgba(0,0,20,.04); }
.acc__feat-icon {
    font-size: 1.05rem; flex-shrink: 0; width: 28px; text-align: center;
    transition: transform .3s;
}
.acc__feat-trigger:hover .acc__feat-icon { transform: scale(1.15); }
.acc__feat-name {
    flex: 1; text-align: left;
    font-size: .86rem; font-weight: 600;
}
.acc__feat-tag {
    font-size: .66rem; font-weight: 600;
    padding: 3px 9px; border-radius: 4px;
    white-space: nowrap;
}
.acc__feat-tag--all { background: rgba(59,130,246,.06); color: var(--l2); }
.acc__feat-tag--ok { background: rgba(16,185,129,.06); color: var(--l3); }
.acc__feat-tag--partial { background: rgba(217,119,6,.06); color: var(--gold); }
.acc__feat-tag--off { background: rgba(220,38,38,.04); color: #b91c1c; text-decoration: line-through; }
.acc__feat-tag--gold {
    background: linear-gradient(135deg, var(--l4), var(--gold));
    color: #fff;
}
.acc__feat-tags {
    display: flex; gap: 5px; flex-shrink: 0;
}
.acc__feat-chevron {
    flex-shrink: 0; color: var(--text3);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.acc__feat--open > .acc__feat-trigger .acc__feat-chevron {
    transform: rotate(180deg);
}

.acc__feat-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.acc__feat--open > .acc__feat-body {
    grid-template-rows: 1fr;
}
.acc__feat-body > p {
    overflow: hidden;
    padding: 0 24px 0 90px;
    font-size: .84rem; color: var(--text3); line-height: 1.75;
}
.acc__feat--open > .acc__feat-body > p {
    padding-bottom: 16px;
}

.acc__feat--excl .acc__feat-trigger:hover {
    background: rgba(234,88,12,.02);
}

.plat__label {
    font-size: .75rem; font-weight: 600; color: var(--text3);
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 10px;
}
.plat__row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 24px;
}
.plat__row:last-child { margin-bottom: 0; }
.plat__item {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    padding: 14px 12px; background: var(--surface2); border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: .85rem; font-weight: 500; color: var(--text2);
    transition: all .3s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.plat__item:hover {
    background: #fff;
    border-color: var(--border2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.plat__item:active { transform: translateY(0) scale(.97); }
.plat__item--hl {
    border-color: rgba(234,88,12,.1);
    background: rgba(234,88,12,.02);
    color: var(--text);
}
.plat__item--hl:hover {
    border-color: rgba(234,88,12,.18);
    box-shadow: 0 4px 16px rgba(234,88,12,.06);
}
.plat__icon { font-size: 1.1rem; transition: transform .3s; display: inline-flex; align-items: center; justify-content: center; }
.plat__icon-img { width: 2em; height: 2em; object-fit: contain; vertical-align: middle; }
.plat__icon-img--lg { width: 2.6em; height: 2.6em; }
.plat__item:hover .plat__icon { transform: scale(1.1); }
.plat__item--img { position: relative; padding: 0; overflow: hidden; }
.plat__fill-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-sm); }

.cta {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    position: relative;
}
.cta::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 10%, var(--border2) 50%, transparent 90%);
}
.cta h2 {
    font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em;
    margin-bottom: 10px;
}
.cta p {
    font-size: .92rem; color: var(--text2); margin-bottom: 32px;
}

.footer {
    padding: 48px 0 36px;
    border-top: 1px solid var(--border);
}
.footer__inner {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}
.footer__logo {
    font-size: 1rem; font-weight: 900; letter-spacing: .1em;
    color: var(--text);
}
.footer__brand p {
    font-size: .78rem; color: var(--text3); margin-top: 4px;
}
.footer__links {
    display: flex; gap: 28px;
}
.footer__links a {
    font-size: .82rem; color: var(--text3); text-decoration: none;
    transition: color .2s;
}
.footer__links a:hover { color: var(--text); }
.footer__img {
    max-height: 80px; max-width: 200px;
    object-fit: contain; border-radius: 6px;
}
.footer__legal {
    margin-bottom: 16px; text-align: center;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
}
.footer__legal p {
    font-size: .7rem; color: var(--text3); line-height: 1.9;
    white-space: nowrap;
}
.footer__images {
    display: flex; justify-content: center; align-items: center;
    gap: 40px; margin-top: 12px; flex-wrap: wrap;
}
.footer__images img {
    height: 40px; width: auto; opacity: .85;
    transition: opacity .2s;
}
.footer__images img:hover {
    opacity: 1;
}
.footer__copy {
    font-size: .72rem; color: var(--text3);
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .carousel { padding: 0 44px; }
    .feat-slide { padding: 36px 28px 32px; }
    .feat-slide__icon { font-size: 2.6rem; margin-bottom: 16px; }
    .feat-slide__title { font-size: 1.25rem; }
    .feat-slide__desc { font-size: .86rem; }
    .hero__title { font-size: 3.5rem; }
    .nav__links { display: none; }
    .plat__row { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 80px 0; }
    .section__title { font-size: 1.6rem; }
    .footer__inner { flex-direction: column; gap: 20px; text-align: center; }
}

@media (max-width: 600px) {
    .container { padding: 0 20px; }
    .hero__title { font-size: 2.5rem; }
    .hero__sub { font-size: 1.15rem; }
    .hero__desc { font-size: .88rem; }
    .carousel { padding: 0 36px; }
    .carousel__arrow { width: 32px; height: 32px; }
    .feat-slide { padding: 28px 20px 24px; max-width: 100%; }
    .feat-slide__icon { font-size: 2.2rem; margin-bottom: 12px; }
    .feat-slide__title { font-size: 1.1rem; }
    .nav { padding: 0 20px; }
    .btn--lg { padding: 12px 24px; font-size: .88rem; }
}