/* ============================================================
   DARK TRIAD SHOP — BOTS / GAMING PREMIUM
   Scope: body.dt-bots-page
   ============================================================ */

body.dt-bots-page main#main-content { overflow: clip; }

.dt-bots {
    max-width: 1440px;
    margin: 12px auto 0;
    border: 1px solid rgba(242,104,42,.44);
    background: var(--dt-bg);
    box-shadow: 0 26px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(210,166,53,.08);
    overflow: hidden;
    position: relative;
}

.dt-bots::after {
    content:'';
    position:absolute;
    left:0; right:0; top:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--dt-orange) 17%,var(--dt-gold) 55%,transparent 92%);
    pointer-events:none;
    z-index:20;
}

/* ---------- Hero ---------- */
.dt-bots-hero {
    min-height: 520px;
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(520px,1.15fr);
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 75% 48%, rgba(122,53,232,.14), transparent 23rem),
        radial-gradient(circle at 90% 35%, rgba(242,104,42,.16), transparent 20rem),
        linear-gradient(90deg,#06070a 0%,#08090d 45%,#0d0910 100%);
}

.dt-bots-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.012) 54px 55px),
        repeating-linear-gradient(0deg,transparent 0 54px,rgba(255,255,255,.012) 54px 55px),
        linear-gradient(180deg,transparent 65%,rgba(242,104,42,.08));
    pointer-events:none;
}

.dt-bots-hero__copy {
    padding:4.2rem 2rem 3.4rem clamp(2rem,4vw,3.3rem);
    align-self:center;
    position:relative;
    z-index:5;
}

.dt-bots-hero__title {
    margin:.85rem 0 1rem;
    font-family:var(--tbt-font-display);
    font-size:clamp(4rem,6.3vw,6.5rem);
    line-height:.84;
    letter-spacing:.025em;
    text-transform:uppercase;
    color:#fff;
    max-width:650px;
}
.dt-bots-hero__title span { display:block; color:var(--dt-orange); }

.dt-bots-hero__lead {
    max-width:600px;
    margin:0;
    color:#b6becd;
    font-size:1.14rem;
    line-height:1.5;
}
.dt-bots-hero__lead strong { color:#fff; }

.dt-bots-hero__actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.7rem; }

.dt-bots-hero__microstats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.75rem;
    margin-top:2rem;
    max-width:610px;
}
.dt-bots-mini-stat {
    min-height:72px;
    padding:.85rem 1rem;
    border:1px solid #292d38;
    border-top-color:rgba(242,104,42,.48);
    background:rgba(9,11,16,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.dt-bots-mini-stat strong { display:block; font-family:var(--tbt-font-display); color:#fff; font-size:1.7rem; letter-spacing:.04em; line-height:1; }
.dt-bots-mini-stat span { display:block; margin-top:.4rem; font-family:var(--tbt-font-mono); color:#777f91; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }

/* Art / character crop */
.dt-bots-hero__art {
    min-height:520px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.dt-bots-hero__art::before {
    content:'';
    position:absolute;
    inset:5% 4% 4% 0;
    background:
        radial-gradient(circle at 58% 38%, rgba(122,53,232,.20), transparent 32%),
        linear-gradient(135deg,rgba(242,104,42,.08),transparent 35%,rgba(122,53,232,.08));
    border:1px solid rgba(122,53,232,.18);
    clip-path:polygon(10% 0,100% 0,100% 82%,86% 100%,0 100%,0 20%);
    z-index:0;
}
.dt-bots-hero__ring,
.dt-bots-hero__ring::before,
.dt-bots-hero__ring::after {
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(210,166,53,.18);
    content:'';
}
.dt-bots-hero__ring { width:470px;height:470px;right:9%;top:5%;animation:dt-bot-ring 18s linear infinite; }
.dt-bots-hero__ring::before { inset:28px; border-color:rgba(122,53,232,.25); }
.dt-bots-hero__ring::after { inset:62px; border-color:rgba(242,104,42,.17); }

.dt-bots-character {
    position:absolute;
    z-index:3;
    width:min(680px,92%);
    height:520px;
    right:-1.5rem;
    top:0;
    overflow:hidden;
    mask-image:linear-gradient(to bottom,#000 0%,#000 77%,transparent 100%);
    filter:drop-shadow(0 24px 32px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(122,53,232,.16));
}
.dt-bots-character img {
    position:absolute;
    width:100%;
    max-width:none;
    height:auto;
    top:-5%;
    right:-1%;
    transform:scale(1.05);
    transform-origin:50% 20%;
}
.dt-bots-character__glow {
    position:absolute;
    z-index:4;
    width:230px;height:90px;
    top:105px; right:210px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(156,78,255,.42),transparent 70%);
    filter:blur(17px);
    opacity:.7;
    animation:dt-eye-pulse 3s ease-in-out infinite;
    pointer-events:none;
}
.dt-bots-character__embers,
.dt-bots-character__embers::before,
.dt-bots-character__embers::after {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 10% 80%, rgba(242,104,42,.95) 0 1px, transparent 2px),
        radial-gradient(circle at 26% 63%, rgba(210,166,53,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 76%, rgba(242,104,42,.9) 0 1px, transparent 2px),
        radial-gradient(circle at 90% 52%, rgba(122,53,232,.9) 0 1px, transparent 2px);
    animation:dt-embers 7s linear infinite;
}
.dt-bots-character__embers::before { transform:translateY(45px) scale(.9); opacity:.6; animation-duration:9s; }
.dt-bots-character__embers::after { transform:translateY(95px) scale(1.1); opacity:.35; animation-duration:11s; }

@keyframes dt-bot-ring { to { transform:rotate(360deg); } }
@keyframes dt-eye-pulse { 0%,100%{opacity:.45;transform:scale(.96)} 50%{opacity:.9;transform:scale(1.08)} }
@keyframes dt-embers { from{transform:translateY(70px)} to{transform:translateY(-70px)} }

/* ---------- Content ---------- */
.dt-bots-content { padding:2.3rem clamp(1rem,3vw,2.3rem) 3rem; }
.dt-bots-section-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.5rem; }
.dt-bots-section-head h2 { margin:.45rem 0 0; font-family:var(--tbt-font-display); color:#fff; font-size:2.55rem; line-height:.95; letter-spacing:.03em; text-transform:uppercase; }
.dt-bots-section-head p { max-width:540px; margin:0; color:#818a9c; text-align:right; }

.dt-bots-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.dt-bot-card {
    position:relative;
    overflow:hidden;
    min-height:580px;
    padding:1.6rem;
    border:1px solid #2a2e39;
    background:
        linear-gradient(180deg,rgba(255,255,255,.018),transparent),
        #0a0d12;
    box-shadow:0 18px 50px rgba(0,0,0,.34);
    display:flex;
    flex-direction:column;
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.dt-bot-card::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--dt-orange); }
.dt-bot-card::after { content:''; position:absolute; width:320px;height:320px;right:-170px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(242,104,42,.10),transparent 68%);pointer-events:none; }
.dt-bot-card--wa::before { background:#25d366; }
.dt-bot-card--wa::after { background:radial-gradient(circle,rgba(37,211,102,.09),transparent 68%); }
.dt-bot-card:hover { transform:translateY(-5px); border-color:rgba(242,104,42,.35); box-shadow:0 24px 62px rgba(0,0,0,.46),0 0 30px rgba(242,104,42,.06); }
.dt-bot-card--wa:hover { border-color:rgba(37,211,102,.34); box-shadow:0 24px 62px rgba(0,0,0,.46),0 0 30px rgba(37,211,102,.06); }

.dt-bot-card__top { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; position:relative;z-index:2; }
.dt-bot-card__badge { display:inline-flex;align-items:center;gap:.5rem;font:700 .65rem var(--tbt-font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dt-orange); }
.dt-bot-card__badge::before { content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor; }
.dt-bot-card--wa .dt-bot-card__badge { color:#50d890; }
.dt-bot-card__price { text-align:right; font-family:var(--tbt-font-display); color:#fff; font-size:1.65rem; line-height:1; }
.dt-bot-card__price small { display:block;margin-top:.32rem;font:500 .62rem var(--tbt-font-mono);letter-spacing:.08em;color:#697285;text-transform:uppercase; }

.dt-bot-card__icon {
    width:62px;height:62px;
    margin-top:1.4rem;
    display:grid;place-items:center;
    color:var(--dt-orange);
    border:1px solid rgba(242,104,42,.32);
    background:rgba(242,104,42,.08);
    box-shadow:inset 0 0 24px rgba(242,104,42,.04),0 0 22px rgba(242,104,42,.05);
}
.dt-bot-card--wa .dt-bot-card__icon { color:#50d890;border-color:rgba(37,211,102,.28);background:rgba(37,211,102,.07); }
.dt-bot-card__icon svg { width:28px;height:28px; }
.dt-bot-card h3 { margin:1rem 0 .55rem;font-family:var(--tbt-font-display);font-size:2.4rem;line-height:.95;letter-spacing:.03em;color:#fff;text-transform:uppercase; }
.dt-bot-card__desc { margin:0;color:#a2aabb;font-size:1.02rem;line-height:1.45; }

.dt-bot-feats { list-style:none;padding:0;margin:1.3rem 0;display:grid;gap:.62rem; }
.dt-bot-feats li { display:flex;align-items:flex-start;gap:.65rem;color:#c0c6d2;font-size:.93rem;line-height:1.35; }
.dt-bot-feats li::before { content:'';width:7px;height:7px;margin-top:.35rem;flex:0 0 7px;border-radius:50%;background:var(--dt-orange);box-shadow:0 0 10px rgba(242,104,42,.50); }
.dt-bot-card--wa .dt-bot-feats li::before { background:#25d366;box-shadow:0 0 10px rgba(37,211,102,.42); }
.dt-bot-feats li.is-more { color:#717a8c;font-family:var(--tbt-font-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase; }

.dt-bot-card__stats { display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto;border:1px solid #252a34;background:#080a0e; }
.dt-bot-card__stat { padding:.78rem .7rem;text-align:center;border-right:1px solid #252a34; }
.dt-bot-card__stat:last-child { border-right:0; }
.dt-bot-card__stat strong { display:block;font-family:var(--tbt-font-display);font-size:1.35rem;color:#fff;line-height:1; }
.dt-bot-card__stat span { display:block;margin-top:.3rem;font-family:var(--tbt-font-mono);font-size:.56rem;color:#697285;letter-spacing:.08em;text-transform:uppercase; }
.dt-bot-card__actions { display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem; }
.dt-bot-card__actions .dt-btn { flex:1;min-width:170px; }

/* ---------- Control center strip ---------- */
.dt-bots-control {
    margin-top:1rem;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    min-height:210px;
    border:1px solid rgba(122,53,232,.28);
    background:linear-gradient(120deg,#0b0d12 0%,#0d0c14 60%,#120b19 100%);
    position:relative;
    overflow:hidden;
}
.dt-bots-control::before { content:'';position:absolute;right:-80px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(122,53,232,.16),transparent 65%); }
.dt-bots-control__copy { padding:1.8rem;position:relative;z-index:2; }
.dt-bots-control__copy h3 { margin:.5rem 0 .5rem;font-family:var(--tbt-font-display);font-size:2.25rem;line-height:1;color:#fff;text-transform:uppercase; }
.dt-bots-control__copy p { margin:0 0 1.2rem;max-width:650px;color:#939bad; }
.dt-bots-control__visual { position:relative;display:grid;place-items:center;min-height:210px; }
.dt-bots-console { width:min(420px,88%);padding:.9rem;border:1px solid #303443;background:rgba(5,7,10,.82);box-shadow:0 22px 50px rgba(0,0,0,.4);transform:perspective(800px) rotateY(-6deg) rotateX(2deg); }
.dt-bots-console__bar { display:flex;justify-content:space-between;align-items:center;padding-bottom:.65rem;border-bottom:1px solid #222733;font:600 .59rem var(--tbt-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#727b8f; }
.dt-bots-console__bar strong { color:#50d890; }
.dt-bots-console__rows { display:grid;gap:.46rem;padding-top:.65rem; }
.dt-bots-console__row { display:grid;grid-template-columns:1fr 70px;gap:.7rem;align-items:center;color:#aab2c2;font-size:.75rem; }
.dt-bots-console__toggle { height:7px;border-radius:999px;background:#202530;overflow:hidden; }
.dt-bots-console__toggle::after { content:'';display:block;width:72%;height:100%;background:linear-gradient(90deg,var(--dt-violet),var(--dt-orange));box-shadow:0 0 10px rgba(122,53,232,.3); }

/* ---------- Comparison ---------- */
.dt-bots-compare { margin-top:2.2rem; }
.dt-bots-compare__panel { border:1px solid #292d38;background:#090b10;overflow:hidden; }
.dt-bots-compare__header,.dt-bots-compare__row { display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center; }
.dt-bots-compare__header { padding:.85rem 1.2rem;background:#10131a;border-bottom:1px solid #292d38;font:700 .68rem var(--tbt-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#717a8c; }
.dt-bots-compare__header span:nth-child(2){color:var(--dt-orange);text-align:center}.dt-bots-compare__header span:nth-child(3){color:#50d890;text-align:center}
.dt-bots-compare__row { padding:.78rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.04); }
.dt-bots-compare__row:last-child { border-bottom:0; }
.dt-bots-compare__row:nth-child(even) { background:rgba(255,255,255,.012); }
.dt-bots-compare__row span:first-child { color:#818a9d; }
.dt-bots-compare__row span:not(:first-child) { color:#e0e4ed;text-align:center;font-weight:600; }
.dt-bots-compare__row span:last-child { color:#8be7ad; }

/* ---------- Final CTA ---------- */
.dt-bots-cta {
    margin-top:1rem;
    padding:1.6rem 1.8rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    border:1px solid rgba(242,104,42,.30);
    background:linear-gradient(90deg,#0d0c0b,#100b09 62%,#160b08);
}
.dt-bots-cta h3 { margin:0 0 .25rem;font-family:var(--tbt-font-display);font-size:2rem;color:#fff;letter-spacing:.025em;text-transform:uppercase; }
.dt-bots-cta p { margin:0;color:#8f98a9; }

@media (max-width: 1050px) {
    .dt-bots-hero { grid-template-columns:1fr; }
    .dt-bots-hero__copy { text-align:center;padding:3rem 1.4rem 1rem; }
    .dt-bots-hero__lead,.dt-bots-hero__microstats { margin-inline:auto; }
    .dt-bots-hero__actions { justify-content:center; }
    .dt-bots-hero__art { min-height:440px; }
    .dt-bots-character { right:50%;transform:translateX(50%);width:min(680px,96%);height:440px; }
    .dt-bots-character img { top:-12%; }
    .dt-bots-hero__ring { right:50%;transform:translateX(50%); }
    @keyframes dt-bot-ring { to { transform:translateX(50%) rotate(360deg); } }
    .dt-bots-grid { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
    .dt-bots { margin-top:0;border-inline:0; }
    .dt-bots-hero__title { font-size:clamp(3.7rem,18vw,5rem); }
    .dt-bots-hero__microstats { grid-template-columns:1fr 1fr 1fr; }
    .dt-bots-section-head { align-items:flex-start;flex-direction:column;gap:.55rem; }
    .dt-bots-section-head p { text-align:left; }
    .dt-bots-control { grid-template-columns:1fr; }
    .dt-bots-control__visual { padding-bottom:1.3rem; }
    .dt-bots-compare__panel { overflow-x:auto; }
    .dt-bots-compare__header,.dt-bots-compare__row { min-width:620px; }
    .dt-bots-cta { align-items:flex-start;flex-direction:column; }
}

@media (max-width: 520px) {
    .dt-bots-content { padding:1.35rem .8rem 2rem; }
    .dt-bots-hero__copy { padding-inline:1rem; }
    .dt-bots-hero__actions { display:grid;grid-template-columns:1fr;width:100%; }
    .dt-bots-hero__actions .dt-btn { width:100%; }
    .dt-bots-hero__microstats { gap:.4rem; }
    .dt-bots-mini-stat { padding:.7rem .35rem; }
    .dt-bots-mini-stat strong { font-size:1.4rem; }
    .dt-bots-mini-stat span { font-size:.52rem; }
    .dt-bots-hero__art { min-height:330px; }
    .dt-bots-character { height:350px;width:115%;right:50%; }
    .dt-bots-character img { top:-5%; }
    .dt-bots-hero__ring { width:330px;height:330px;top:0; }
    .dt-bot-card { padding:1.1rem;min-height:auto; }
    .dt-bot-card h3 { font-size:2.05rem; }
    .dt-bot-card__stats { grid-template-columns:repeat(3,1fr); }
    .dt-bot-card__actions { display:grid;grid-template-columns:1fr; }
    .dt-bot-card__actions .dt-btn { width:100%;min-width:0; }
    .dt-bots-control__copy { padding:1.2rem; }
    .dt-bots-cta { padding:1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-bots-hero__ring,.dt-bots-character__glow,.dt-bots-character__embers,.dt-bots-character__embers::before,.dt-bots-character__embers::after { animation:none !important; }
    .dt-bot-card { transition:none !important; }
}