/* ═══════════════════════════════════════════════════════════
   TRACTION-DEVIS — Batteries69
═══════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: #0a0a12;
    padding: .75rem 1rem;
    z-index: 9999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.td-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(ellipse 70% 60% at 12% 12%, rgba(251,223,0,.12), transparent 62%),
        radial-gradient(ellipse 58% 60% at 88% 24%, rgba(139,108,248,.16), transparent 60%),
        var(--bg-deep);
}
#td-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .26;
    pointer-events: none;
}
.td-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .82fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.td-copy h1 {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: clamp(48px, 8vw, 98px);
    line-height: .9;
    letter-spacing: -.055em;
    font-weight: 900;
    margin: 1.1rem 0 1.25rem;
}
.td-copy h1 em {
    font-style: normal;
    display: inline-block;
    padding-right: .12em;
    padding-bottom: .06em;
    background: linear-gradient(135deg, var(--accent), #ffb800 42%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.td-copy p {
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.75;
    font-size: clamp(15px, 1.6vw, 18px);
}
.td-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}
.td-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 52px;
    border-radius: 999px;
    padding: 0 1.25rem;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid var(--border-card);
    transition: var(--transition-bounce, .35s ease);
    cursor: pointer;
    font: inherit;
}
.td-btn:hover { transform: translateY(-3px); }
.td-btn-primary {
    background: linear-gradient(135deg, var(--accent), #ffca35);
    color: #0a0a12;
    border-color: var(--accent);
    box-shadow: 0 14px 38px rgba(251,223,0,.22);
}
.td-btn-dark {
    background: rgba(255,255,255,.045);
    color: var(--text-primary);
    border-color: var(--border-card);
}
.td-btn-dark:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.td-plate-card {
    border: 1px solid var(--border-card);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow-elevated, 0 24px 70px rgba(0,0,0,.35));
    padding: 1rem;
}
.td-plate-media {
    position: relative;
    min-height: 360px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border-card);
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        #111827;
    display: grid;
    place-items: center;
}
.td-plate-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.td-plate-fallback {
    padding: 2rem;
    color: var(--text-secondary);
    text-align: center;
}
.td-plate-fallback strong {
    display: block;
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: .65rem;
}
.td-plate-card:not(.no-image) .td-plate-fallback { display: none; }
.td-plate-card p {
    color: var(--text-secondary);
    font-size: 14px;
    padding: .9rem .3rem .2rem;
}

.td-section {
    padding: clamp(3.4rem, 7vw, 5.2rem) 0;
    background: var(--bg-primary);
}
.td-section:nth-of-type(even) { background: var(--bg-surface); }
.td-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.td-info {
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.04);
    padding: 1.25rem;
    transition: var(--transition-smooth);
}
.td-info:hover {
    transform: translateY(-4px);
    border-color: rgba(251,223,0,.24);
}
.td-info b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent);
    color: #0a0a12;
    font-family: var(--font-mono, monospace);
    margin-bottom: .8rem;
}
.td-info h3 {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 1.05;
    margin-bottom: .5rem;
}
.td-info p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.td-mail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 1.4rem;
    align-items: start;
}
.td-mail-template {
    grid-column: 1 / -1;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-xl);
    background: #0d0d14;
    box-shadow: var(--shadow-card, 0 12px 40px rgba(0,0,0,.28));
    padding: 1.4rem;
}
.td-mail-template pre {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    line-height: 1.75;
}
.td-copybox {
    border: 1px solid rgba(251,223,0,.2);
    border-radius: var(--radius-xl);
    background: var(--accent-soft);
    padding: 1.4rem;
}
.td-copybox p {
    color: var(--text-secondary);
    margin-bottom: .9rem;
}
.td-note {
    margin-top: .9rem;
    font-size: 13px;
}
.nav-cta-dark {
    background: rgba(255,255,255,.045) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-card) !important;
}
html[data-theme="light"] .td-hero {
    background:
        radial-gradient(ellipse 70% 60% at 12% 12%, rgba(245,179,1,.16), transparent 62%),
        radial-gradient(ellipse 58% 60% at 88% 24%, rgba(122,76,240,.14), transparent 60%),
        #fff8e9 !important;
}
html[data-theme="light"] .td-plate-card,
html[data-theme="light"] .td-info,
html[data-theme="light"] .td-copybox,
html[data-theme="light"] .td-mail-template {
    background: rgba(255,255,255,.78) !important;
    border-color: rgba(66,45,12,.14) !important;
    box-shadow: 0 12px 34px rgba(158,101,0,.10) !important;
}
html[data-theme="light"] .td-mail-template pre {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .td-btn-dark,
html[data-theme="light"] .nav-cta-dark {
    background: rgba(255,255,255,.70) !important;
    color: var(--text-primary) !important;
    border-color: rgba(66,45,12,.14) !important;
}
@media (max-width: 980px) {
    .td-hero-grid,
    .td-mail-grid { grid-template-columns: 1fr; }
    .td-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .td-grid { grid-template-columns: 1fr; }
    .td-actions .td-btn { width: 100%; }
    .td-plate-media { min-height: 260px; }
}