/* ============================================
   NEXUS MARKET DARKNET REVIEW — STYLES
   ============================================ */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:#08080b;color:#c4c4cc;
    line-height:1.72;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:#ef4444;text-decoration:none;transition:color .2s}
a:hover{color:#f87171}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}

/* --- Particle canvas --- */
#particles{
    position:fixed;inset:0;z-index:0;pointer-events:none;
}

/* --- Floating orbs --- */
.orb{
    position:fixed;border-radius:50%;pointer-events:none;z-index:0;
    filter:blur(80px);opacity:.12;
}
.orb-1{width:500px;height:500px;background:#ef4444;top:-120px;left:-100px;animation:orbFloat1 18s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:#b91c1c;bottom:-80px;right:-60px;animation:orbFloat2 22s ease-in-out infinite}
.orb-3{width:300px;height:300px;background:#7f1d1d;top:50%;left:60%;animation:orbFloat3 25s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,50px)}}

/* --- Header --- */
.header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    padding:16px 0;
    background:rgba(8,8,11,.6);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(239,68,68,.08);
    transition:box-shadow .3s,background .3s;
}
.header.scrolled{background:rgba(8,8,11,.9);box-shadow:0 4px 40px rgba(0,0,0,.5)}
.header .wrap{display:flex;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:.95rem;z-index:10}
.brand em{color:#ef4444;font-style:normal}
.brand-logo{
    width:30px;height:30px;object-fit:contain;
    filter:drop-shadow(0 0 6px rgba(239,68,68,.4));
    animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(239,68,68,.3))}50%{filter:drop-shadow(0 0 14px rgba(239,68,68,.7))}}

/* Hero logo */
.hero-logo-wrap{margin-bottom:16px}
.hero-logo{
    width:72px;height:72px;object-fit:contain;
    filter:drop-shadow(0 0 20px rgba(239,68,68,.35));
    animation:heroLogoFloat 4s ease-in-out infinite;
}
@keyframes heroLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.nav{display:flex;gap:24px}
.nav a{color:#71717a;font-size:.84rem;font-weight:500;letter-spacing:.03em;transition:color .2s}
.nav a:hover{color:#ef4444}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:10}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* --- Hero --- */
.hero{
    position:relative;z-index:1;
    padding:140px 0 80px;
    background:radial-gradient(ellipse at 30% 20%,rgba(239,68,68,.07) 0%,transparent 50%);
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,#08080b,transparent);pointer-events:none}

.pill{
    display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:#ef4444;border:1px solid rgba(239,68,68,.25);
    padding:5px 16px;border-radius:20px;margin-bottom:20px;
    background:rgba(239,68,68,.05);
}

/* Glitch title */
.glitch{
    font-size:2.1rem;font-weight:800;line-height:1.18;color:#fff;margin-bottom:16px;
    position:relative;
}
.glitch::before,.glitch::after{
    content:attr(data-text);position:absolute;top:0;left:0;
    width:100%;height:100%;overflow:hidden;
    color:#fff;pointer-events:none;
}
.glitch::before{
    animation:glitch1 3s infinite linear alternate-reverse;
    clip-path:inset(20% 0 40% 0);
    text-shadow:2px 0 #ef4444;
}
.glitch::after{
    animation:glitch2 3s infinite linear alternate-reverse;
    clip-path:inset(60% 0 10% 0);
    text-shadow:-2px 0 #b91c1c;
}
@keyframes glitch1{
    0%,95%{transform:translate(0)}96%{transform:translate(-3px,1px)}97%{transform:translate(2px,-1px)}100%{transform:translate(0)}
}
@keyframes glitch2{
    0%,95%{transform:translate(0)}96%{transform:translate(3px,1px)}98%{transform:translate(-2px,-1px)}100%{transform:translate(0)}
}

.hero-text p{color:#a1a1aa;font-size:1rem;margin-bottom:28px;line-height:1.7}

/* Stats counters */
.hero-stats{display:flex;gap:32px}
.stat{text-align:center}
.stat-num{font-size:2rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.stat-sign{font-size:1.1rem;font-weight:700;color:#ef4444}
.stat-label{display:block;font-size:.72rem;color:#71717a;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* Image frame with animated corners */
.img-frame{position:relative;border-radius:10px;overflow:hidden}
.img-frame img{border-radius:10px}
.frame-corner{
    position:absolute;width:24px;height:24px;
    border:2px solid #ef4444;
    transition:all .4s ease;
}
.frame-corner.tl{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.frame-corner.tr{top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 4px 0 0}
.frame-corner.bl{bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 4px}
.frame-corner.br{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 4px 0}
.img-frame:hover .frame-corner{width:36px;height:36px;border-color:#f87171}
.img-frame::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(239,68,68,.1) 0%,transparent 40%);
    pointer-events:none;border-radius:10px;
}

/* --- Sections --- */
.sec{position:relative;z-index:1;padding:80px 0}
.sec-dark{background:rgba(239,68,68,.015);border-top:1px solid rgba(239,68,68,.05);border-bottom:1px solid rgba(239,68,68,.05)}
.sec-title{
    font-size:1.55rem;font-weight:700;color:#fff;margin-bottom:28px;
    display:flex;align-items:center;gap:14px;
}
.accent-line{width:4px;height:28px;background:linear-gradient(to bottom,#ef4444,#7f1d1d);border-radius:2px;flex-shrink:0}
.sec-sub{color:#a1a1aa;font-size:.95rem;margin-bottom:24px}

/* --- Two-column text --- */
.text-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.text-cols p{font-size:.94rem}

/* --- Feature cards --- */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
    position:relative;overflow:hidden;
    padding:28px 24px;border-radius:14px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(239,68,68,.06);
    transition:transform .35s ease,border-color .35s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(239,68,68,.3)}
.card-glow{
    position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:radial-gradient(circle,rgba(239,68,68,.06) 0%,transparent 60%);
    opacity:0;transition:opacity .4s;pointer-events:none;
}
.card:hover .card-glow{opacity:1}
.card-num{font-size:2.2rem;font-weight:900;color:rgba(239,68,68,.15);line-height:1;margin-bottom:10px}
.card h3{font-size:1.05rem;color:#fff;margin-bottom:8px}
.card p{font-size:.87rem;color:#a1a1aa;line-height:1.65}
.card-img{padding:0;display:flex;flex-direction:column}
.card-img img{border-radius:14px 14px 0 0;width:100%;object-fit:cover;flex:1}
.card-caption{padding:12px 16px;font-size:.78rem;color:#71717a;font-style:italic;text-align:center}

/* --- Table --- */
.table-box{
    overflow-x:auto;margin-top:8px;
    border-radius:12px;border:1px solid rgba(239,68,68,.08);
    background:rgba(255,255,255,.015);
}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead{background:rgba(239,68,68,.06)}
th{
    padding:14px 18px;text-align:left;font-weight:600;color:#fff;
    font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
    border-bottom:1px solid rgba(239,68,68,.12);
}
th.hl{color:#ef4444}
td{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.03)}
td.hl{color:#fff;font-weight:500;background:rgba(239,68,68,.03)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(239,68,68,.025)}
.yes{color:#34d399;font-weight:600}

/* --- Split (text + image) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split-text p{font-size:.94rem}

/* --- Expert quote --- */
.quote-block{
    position:relative;overflow:hidden;
    padding:40px 40px 32px;margin:0;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(239,68,68,.06) 0%,rgba(239,68,68,.015) 100%);
    border:1px solid rgba(239,68,68,.1);
}
.quote-accent{color:rgba(239,68,68,.12);margin-bottom:16px}
.quote-accent svg{width:44px;height:34px}
.quote-block p{font-size:.96rem;line-height:1.8;color:#d4d4d8;margin-bottom:24px}
.quote-block footer{display:flex;align-items:center;gap:14px}
.quote-avatar{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,#ef4444,#7f1d1d);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0;
}
.quote-block footer strong{color:#fff;display:block;font-size:.9rem}
.quote-block footer span{color:#71717a;font-size:.8rem}

/* --- FAQ --- */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:780px}
.faq{
    border-radius:10px;overflow:hidden;
    border:1px solid rgba(239,68,68,.06);
    background:rgba(255,255,255,.015);
    transition:border-color .3s;
}
.faq:hover{border-color:rgba(239,68,68,.18)}
.faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;cursor:pointer;
    background:none;border:none;color:#fff;
    font-size:.94rem;font-weight:600;text-align:left;
    font-family:inherit;
}
.faq-icon{
    width:20px;height:20px;flex-shrink:0;
    stroke:#ef4444;stroke-width:2;stroke-linecap:round;
    fill:none;transition:transform .3s;
}
.faq.open .faq-icon{transform:rotate(45deg)}
.faq-a{
    max-height:0;overflow:hidden;
    transition:max-height .4s ease,padding .3s;
    padding:0 22px;
}
.faq.open .faq-a{max-height:300px;padding:0 22px 18px}
.faq-a p{font-size:.88rem;color:#a1a1aa;line-height:1.7}

/* --- Footer --- */
.footer{
    position:relative;z-index:1;
    padding:56px 0 28px;
    background:rgba(0,0,0,.35);
    border-top:1px solid rgba(239,68,68,.08);
}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:32px}
.footer-col h3{font-size:.95rem;color:#fff;margin-bottom:12px;font-weight:600}
.footer-col p{font-size:.85rem;color:#a1a1aa;line-height:1.7}
.footer-list{list-style:none}
.footer-list li{
    font-size:.83rem;color:#a1a1aa;
    padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);
    display:flex;gap:8px;
}
.footer-list li span{color:#52525b;min-width:70px;flex-shrink:0}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.04)}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.footer-brand img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(239,68,68,.3))}
.footer-brand span{font-size:.85rem;font-weight:600;color:#a1a1aa}
.footer-bottom p{font-size:.75rem;color:#3f3f46}

/* --- News banner --- */
.news-banner{
    display:flex;gap:24px;align-items:flex-start;
    padding:28px 32px;border-radius:14px;
    background:linear-gradient(135deg,rgba(239,68,68,.08) 0%,rgba(239,68,68,.02) 100%);
    border:1px solid rgba(239,68,68,.15);
    position:relative;overflow:hidden;
}
.news-banner::before{
    content:'';position:absolute;top:0;left:0;width:4px;height:100%;
    background:linear-gradient(to bottom,#ef4444,#7f1d1d);
}
.news-badge{
    flex-shrink:0;
    font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;background:#ef4444;
    padding:6px 14px;border-radius:6px;
    white-space:nowrap;margin-top:2px;
    animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}
    50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}
}
.news-body h2{font-size:1.15rem;color:#fff;margin-bottom:10px;font-weight:700;line-height:1.35}
.news-body p{font-size:.88rem;color:#a1a1aa;line-height:1.75}

/* --- Reveal animations --- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}

/* --- Responsive --- */
@media(max-width:900px){
    .cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .hero-grid{grid-template-columns:1fr;text-align:center}
    .hero-stats{justify-content:center}
    .hero-text p{max-width:520px;margin-left:auto;margin-right:auto}
    .pill{margin-bottom:16px}
    .glitch{font-size:1.6rem}
    .text-cols{grid-template-columns:1fr}
    .split{grid-template-columns:1fr}
    .cards-grid{grid-template-columns:1fr}
    .footer-cols{grid-template-columns:1fr}
    .nav{
        position:fixed;top:0;right:-100%;width:260px;height:100vh;
        background:rgba(8,8,11,.97);
        flex-direction:column;padding:80px 32px 32px;gap:20px;
        transition:right .35s ease;z-index:5;
    }
    .nav.open{right:0}
    .nav a{font-size:1rem;color:#a1a1aa}
    .burger{display:flex}
    .table-box{font-size:.82rem}
    .quote-block{padding:24px 20px 20px}
    .news-banner{flex-direction:column;gap:12px;padding:20px}
}