/* ══════════════════════════════════════════════
   MUNDO DRONE — CODEX ESTÉTICO OFICIAL v3.0
   ARCHIVO CSS UNIFICADO — Sin conflictos
   Variables | Reset | Tipografía | Layout | Componentes
══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;700&family=Share+Tech+Mono&display=swap');

:root {
  --void:     #080808;
  --ti:       #1C1E20;
  --ti2:      #252729;
  --ti3:      #2E3135;
  --tibrd:    #3A3E42;
  --cr:       #C8D0D8;
  --crdim:    #7A8088;
  --crhi:     #E8EDF2;
  --cyan:     #00D4FF;
  --cyandim:  #006880;
  --red:      #FF3333;
  --green:    #00FF88;
  --amber:    #FFB800;
  --fhud:     'Orbitron', monospace;
  --ftac:     'Rajdhani', sans-serif;
  --fmono:    'Share Tech Mono', monospace;
}

/* ══ RESET ══ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--void);
  color: var(--cr);
  font-family: var(--ftac);
  overflow-x: hidden;
  cursor: crosshair;
}

/* ══ CHROME TEXT GRADIENT ══ */
.ch {
  background: linear-gradient(180deg,#F4F6F8 0%,#C8D0D8 35%,#E8EDF2 50%,#9AA4AE 75%,#C0C8D0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══ CARBON FIBER TEXTURE (CF-3K MEJORADO) ══ */
.cf {
  background-color: #0D0E10;
  /* Patrón de fibra de carbono más elaborado y realista */
  background-image:
    /* Capa 1: Diagonal 45° principal — fibra principal */
    repeating-linear-gradient(45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 8px),
    /* Capa 2: Diagonal -45° principal — fibra cruzada */
    repeating-linear-gradient(-45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 8px),
    /* Capa 3: Sombra local horizontal — profundidad */
    repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px,transparent 4px,transparent 8px),
    /* Capa 4: Sombra local vertical — profundidad */
    repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px,transparent 4px,transparent 8px),
    /* Capa 5: Textura de nudos (diagonal ligera offset) */
    repeating-linear-gradient(22deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 7px),
    /* Capa 6: Textura de nudos (diagonal opuesta offset) */
    repeating-linear-gradient(112deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 7px),
    /* Capa 7: Variación aleatoria grande — zonas de luz */
    radial-gradient(circle at 15% 35%, rgba(255,255,255,.025) 0, transparent 60%),
    /* Capa 8: Variación aleatoria grande — zonas de sombra */
    radial-gradient(circle at 75% 70%, rgba(0,0,0,.06) 0, transparent 65%),
    /* Capa 9: Micro-reflexión en borde */
    repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(255,255,255,.006) 35px, rgba(255,255,255,.006) 36px);
  background-size:
    12px 12px,
    12px 12px,
    16px 16px,
    16px 16px,
    20px 20px,
    20px 20px,
    220px 220px,
    200px 200px,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    4px 6px,
    8px 3px,
    10px 20px,
    45px 60px,
    0 0;
}

/* ══ SCANLINES GLOBALES (DETRÁS DE TODO) ══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
  pointer-events: none;
  z-index: -1;
}

/* ══ BOOT SCREEN ══ */
#boot {
  position: fixed;
  inset: 0;
  background: var(--void);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: bh .4s ease 3.3s both;
}
@keyframes bh { to { opacity:0; pointer-events:none; visibility:hidden; } }
.blogo { font-family:var(--fhud); font-weight:900; font-size:clamp(2rem,7vw,4.5rem); letter-spacing:.2em; margin-bottom:2rem; }
.bterm { font-family:var(--fmono); font-size:.72rem; color:var(--cyan); letter-spacing:.07em; width:min(500px,90vw); border:1px solid var(--cyandim); padding:1rem 1.5rem; background:rgba(0,212,255,.03); }
.bl { opacity:0; animation:bs .07s ease forwards; margin-bottom:3px; }
.bl:nth-child(1){animation-delay:.3s}.bl:nth-child(2){animation-delay:.85s}.bl:nth-child(3){animation-delay:1.4s}.bl:nth-child(4){animation-delay:2s}.bl:nth-child(5){animation-delay:2.55s}
@keyframes bs { to { opacity:1; } }
.bok { color:var(--green); }
.bbar { margin-top:.8rem; height:2px; background:var(--tibrd); overflow:hidden; }
.bbarf { height:100%; width:0; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:bf 2.3s ease .35s both; }
@keyframes bf { to { width:100%; } }

/* ══ TICKER ══ */
.tkw { background:var(--ti); border-bottom:1px solid var(--tibrd); overflow:hidden; height:28px; display:flex; align-items:center; z-index:150; }
.tkt { display:flex; animation:tk 45s linear infinite; white-space:nowrap; }
@keyframes tk { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tki { font-family:var(--fmono); font-size:.53rem; letter-spacing:.18em; color:var(--crdim); text-transform:uppercase; padding:0 2.5rem; }
.tki span { color:var(--cyan); }

/* ══ BUTTONS ══ */
.btc { display:inline-flex; align-items:center; gap:9px; background:linear-gradient(180deg,var(--crhi) 0%,var(--cr) 50%,#9AA4AE 100%); color:var(--void); padding:13px 28px; font-family:var(--fmono); font-size:.7rem; letter-spacing:.17em; text-decoration:none; text-transform:uppercase; font-weight:700; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); transition:all .25s; }
.btc:hover { background:linear-gradient(180deg,var(--cyan) 0%,#00A8CC 100%); box-shadow:0 0 22px rgba(0,212,255,.4); }
.bto { display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--cr); padding:12px 28px; font-family:var(--fmono); font-size:.7rem; letter-spacing:.17em; text-decoration:none; text-transform:uppercase; border:1px solid var(--tibrd); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); transition:all .25s; }
.bto:hover { border-color:var(--cyan); color:var(--cyan); }

/* ══ ANIMATIONS ══ */
@keyframes fi { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════════════
   LAYOUT SECTION
══════════════════════════════════════════════ */

/* ══ HEADER ══ */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8,8,8,.97);
  border-bottom: 1px solid var(--tibrd);
  backdrop-filter: blur(16px);
}
.hgl { height:2px; background:linear-gradient(90deg,transparent,var(--cyandim),var(--cyan),var(--cyandim),transparent); }
.hi { max-width:1440px; margin:0 auto; padding:0 2rem; height:60px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.lwm { font-family:var(--fhud); font-weight:900; font-size:1.15rem; letter-spacing:.16em; line-height:1; }
.lwm .sub { display:block; font-size:.55rem; letter-spacing:.3em; color:var(--crdim); margin-bottom:1px; }
nav { display:flex; gap:1.8rem; align-items:center; }
.nl { font-family:var(--fmono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--crdim); position:relative; transition:color .2s; }
.nl::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:1px; background:var(--cyan); transform:scaleX(0); transition:transform .2s; }
.nl:hover { color:var(--cyan); cursor:pointer; }
.nl:hover::after { transform:scaleX(1); }
.ncta { font-family:var(--fmono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--void); background:var(--crhi); padding:7px 18px; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); transition:background .2s; font-weight:700; cursor:pointer; }
.ncta:hover { background:var(--cyan); }
.hco { font-family:var(--fmono); font-size:.54rem; color:var(--cyandim); letter-spacing:.08em; opacity:.6; white-space:nowrap; }

/* ══ HERO ══ */
.hero {
  min-height: 91vh;
  display: grid;
  place-items: center;
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}
.hbg { position:absolute; inset:0; background-color:#090909; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.013) 0,rgba(255,255,255,.013) 1px,transparent 1px,transparent 9px),repeating-linear-gradient(-45deg,rgba(255,255,255,.013) 0,rgba(255,255,255,.013) 1px,transparent 1px,transparent 9px); z-index:0; }
.hglow { position:absolute; inset:0; background:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(0,212,255,.045) 0%,transparent 70%); z-index:0; }
.hgrid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,212,255,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.038) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 30%,transparent 100%); z-index:0; }
.hcr { position:absolute; width:70px; height:70px; border-color:var(--cyan); border-style:solid; opacity:.2; }
.hcr.tl{top:2rem;left:2rem;border-width:1px 0 0 1px;}
.hcr.tr{top:2rem;right:2rem;border-width:1px 1px 0 0;}
.hcr.bl{bottom:2rem;left:2rem;border-width:0 0 1px 1px;}
.hcr.br{bottom:2rem;right:2rem;border-width:0 1px 1px 0;}

.hcon { position:relative; z-index:2; text-align:center; max-width:900px; isolation:isolate; }
.hcon > img { position:relative; z-index:1; filter:drop-shadow(0 0 80px rgba(0,0,0,1)) drop-shadow(0 0 50px rgba(0,0,0,1)) drop-shadow(0 0 25px rgba(0,0,0,.95)); animation:fi .7s ease 3.55s both; }

.htag { font-family:var(--fmono); font-size:.62rem; letter-spacing:.3em; color:var(--cyan); text-transform:uppercase; margin-bottom:2.5rem; display:flex; align-items:center; justify-content:center; gap:14px; animation:fi .7s ease 3.45s both; }
.htag::before,.htag::after { content:''; width:50px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan)); }
.htag::after { transform:scaleX(-1); }
.htitle { font-family:var(--fhud); font-weight:900; font-size:clamp(3rem,9vw,8rem); line-height:.88; letter-spacing:.04em; margin-bottom:.25em; animation:fi .7s ease 3.55s both; }
.hsub { font-family:var(--ftac); font-size:clamp(.9rem,2.2vw,1.35rem); letter-spacing:.28em; text-transform:uppercase; color:var(--crdim); font-weight:300; margin-top:1rem; margin-bottom:3rem; animation:fi .7s ease 3.7s both; }
.hacts { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fi .7s ease 3.85s both; }

/* ══ TELEMETRY BAR ══ */
.tel { background:var(--ti); border-top:1px solid var(--tibrd); border-bottom:1px solid var(--tibrd); }
.teli { max-width:1440px; margin:0 auto; display:flex; }
.tc { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.2rem 1rem; border-right:1px solid var(--tibrd); transition:background .2s; }
.tc:last-child { border-right:none; }
.tc:hover { background:rgba(0,212,255,.035); }
.tc:hover .tv { color:var(--cyan); }
.tl { font-family:var(--fmono); font-size:.5rem; letter-spacing:.22em; text-transform:uppercase; color:var(--crdim); margin-bottom:4px; }
.tv { font-family:var(--fhud); font-size:1.75rem; font-weight:700; color:var(--crhi); line-height:1; transition:color .2s; }
.tu { font-family:var(--fmono); font-size:.5rem; letter-spacing:.14em; color:var(--crdim); margin-top:3px; text-transform:uppercase; }

/* ══ SECTION WRAPPER ══ */
.sw { padding:5rem 2rem; max-width:1440px; margin:0 auto; }
.sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3rem; gap:2rem; flex-wrap:wrap; padding-bottom:1.5rem; border-bottom:1px solid var(--tibrd); }
.sid { font-family:var(--fmono); font-size:.57rem; letter-spacing:.27em; color:var(--cyan); text-transform:uppercase; margin-bottom:6px; }
.sid::before{content:'[ ';opacity:.5;}
.sid::after{content:' ]';opacity:.5;}
.stit { font-family:var(--fhud); font-weight:700; font-size:clamp(1.7rem,3.5vw,2.8rem); letter-spacing:.1em; line-height:1; }

/* ══ CTA ══ */
.cta { background-color:#090A0B; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.011) 0,rgba(255,255,255,.011) 1px,transparent 1px,transparent 9px),repeating-linear-gradient(-45deg,rgba(255,255,255,.011) 0,rgba(255,255,255,.011) 1px,transparent 1px,transparent 9px); border-top:1px solid var(--tibrd); border-bottom:1px solid var(--tibrd); padding:5rem 2rem; text-align:center; position:relative; overflow:hidden; }
.cta::before { content:'MUNDO DRONE'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--fhud); font-weight:900; font-size:9rem; letter-spacing:.1em; color:rgba(0,212,255,.02); white-space:nowrap; pointer-events:none; }
.cgl { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:580px; height:180px; background:radial-gradient(ellipse,rgba(0,212,255,.055) 0%,transparent 70%); pointer-events:none; }
.cin { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.ctag { font-family:var(--fmono); font-size:.58rem; letter-spacing:.28em; color:var(--cyan); text-transform:uppercase; margin-bottom:1.5rem; }
.ctit { font-family:var(--fhud); font-weight:900; font-size:clamp(1.8rem,4.5vw,3.2rem); letter-spacing:.08em; margin-bottom:1rem; }
.csub { font-size:.92rem; font-weight:300; color:var(--crdim); margin-bottom:2.5rem; line-height:1.8; }

/* ══ FOOTER ══ */
footer { background:var(--ti); border-top:1px solid var(--tibrd); padding:3rem 2rem; }
.fi { max-width:1440px; margin:0 auto; }
.fg { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid var(--tibrd); margin-bottom:2rem; }
@media(max-width:900px){ .fg{grid-template-columns:1fr 1fr;} }
.fbn { font-family:var(--fhud); font-weight:900; font-size:1.35rem; letter-spacing:.15em; margin-bottom:.8rem; display:block; }
.fde { font-size:.78rem; font-weight:300; color:var(--crdim); line-height:1.7; max-width:270px; margin-bottom:1.2rem; }
.fct { font-family:var(--fmono); font-size:.52rem; letter-spacing:.27em; text-transform:uppercase; color:var(--cyan); margin-bottom:1rem; padding-bottom:8px; border-bottom:1px solid var(--tibrd); }
.fc ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.fc a { font-size:.78rem; font-weight:300; color:var(--crdim); text-decoration:none; transition:color .2s; }
.fc a:hover { color:var(--cr); }
.ab { display:inline-flex; align-items:center; gap:7px; background:rgba(255,153,0,.08); border:1px solid rgba(255,153,0,.2); padding:7px 13px; font-family:var(--fmono); font-size:.55rem; letter-spacing:.1em; color:#FF9900; text-transform:uppercase; margin-bottom:1rem; }
.fbo { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.fleg { font-family:var(--fmono); font-size:.5rem; letter-spacing:.05em; color:var(--crdim); line-height:1.8; opacity:.6; max-width:680px; }

/* ══════════════════════════════════════════════
   COMPONENTS SECTION
══════════════════════════════════════════════ */

/* ══ FILTERS ══ */
.fs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2.5rem; }
.fp { font-family:var(--fmono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; padding:7px 15px; background:var(--ti); border:1px solid var(--tibrd); color:var(--crdim); transition:all .2s; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); cursor:pointer; }
.fp.on,.fp:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,.06); }

/* ══ DRONE GRID ══ */
.dg { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:2px; }
.du { background:var(--ti); border:1px solid var(--tibrd); position:relative; display:flex; flex-direction:column; overflow:hidden; transition:border-color .3s,transform .3s; }
.du:hover { border-color:var(--cyan); transform:translateY(-4px); box-shadow:0 8px 40px rgba(0,212,255,.08); }
.du::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:0; transition:opacity .3s; z-index:3; }
.du:hover::before { opacity:1; }

/* BADGE */
.db { position:absolute; top:12px; right:12px; font-family:var(--fmono); font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%); z-index:4; }
.dbi { background:var(--green); color:var(--void); }
.dbt { background:var(--crhi); color:var(--void); }
.dbn { background:var(--cyan); color:var(--void); }
.dbf { background:#003ACC; color:#88AAFF; border:1px solid #0055FF; }
.dbp { background:var(--amber); color:var(--void); }
.dbs { background:var(--red); color:#fff; }

/* VISUAL — SIN SCANLINES TAPANDO LA IMAGEN */
.dv {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0D0E10;
  /* Misma textura CF-3K mejorada que en .cf */
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.038) 0,rgba(255,255,255,.038) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px,transparent 4px,transparent 8px),
    repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px,transparent 4px,transparent 8px),
    repeating-linear-gradient(22deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 7px),
    repeating-linear-gradient(112deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 7px),
    radial-gradient(circle at 15% 35%, rgba(255,255,255,.025) 0, transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(0,0,0,.06) 0, transparent 65%),
    repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(255,255,255,.006) 35px, rgba(255,255,255,.006) 36px);
  background-size:
    12px 12px,
    12px 12px,
    16px 16px,
    16px 16px,
    20px 20px,
    20px 20px,
    220px 220px,
    200px 200px,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    4px 6px,
    8px 3px,
    10px 20px,
    45px 60px,
    0 0;
}

/* IMAGEN LIMPIA — Z-INDEX ALTO */
.di {
  width: 178px;
  height: 128px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(0,212,255,.22));
  transition: filter .3s;
}
.du:hover .di { filter: drop-shadow(0 0 32px rgba(0,212,255,.4)); }

.du .dv img {
  position: relative;
  z-index: 2;
  max-width: 95%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0,212,255,.22));
  transition: filter .3s;
}
.du:hover .dv img { filter: drop-shadow(0 0 32px rgba(0,212,255,.4)); }

/* FADE GRADIENTE EN BORDE INFERIOR */
.dv::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, transparent, #1C1E20);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}

.dst {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-family: var(--fmono);
  font-size: .5rem;
  letter-spacing: .2em;
  color: var(--cyan);
  text-transform: uppercase;
  z-index: 4;
  opacity: .75;
  pointer-events: none;
}

/* CARD BODY */
.ddes { font-family:var(--fmono); font-size:.52rem; letter-spacing:.22em; color:var(--cyandim); padding:12px 16px 0; text-transform:uppercase; }
.dnam { font-family:var(--fhud); font-weight:700; font-size:1.6rem; letter-spacing:.08em; padding:3px 16px 0; line-height:1; }
.dbri { font-family:var(--ftac); font-size:.82rem; font-style:italic; color:var(--crdim); padding:8px 16px 0; font-weight:300; line-height:1.5; }

/* SPECS GRID */
.dsp { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:12px 0; background:var(--tibrd); border-top:1px solid var(--tibrd); border-bottom:1px solid var(--tibrd); }
.sc { background:var(--ti); padding:9px 16px; display:flex; flex-direction:column; gap:2px; }
.sk { font-family:var(--fmono); font-size:.48rem; letter-spacing:.22em; color:var(--crdim); text-transform:uppercase; }
.sv { font-family:var(--fmono); font-size:.76rem; color:var(--cr); }

/* PRICE + BUTTON ROW */
.df { display:flex; align-items:flex-end; justify-content:space-between; padding:0 16px 16px; margin-top:auto; }
.dpb { display:flex; flex-direction:column; }
.pp { font-family:var(--fmono); font-size:.48rem; letter-spacing:.18em; color:var(--crdim); text-transform:uppercase; margin-bottom:2px; }
.pm { font-family:var(--fhud); font-weight:700; font-size:2rem; line-height:1; }
.pa { font-family:var(--fmono); font-size:.48rem; letter-spacing:.09em; color:var(--crdim); margin-top:3px; display:flex; align-items:center; gap:4px; }
.pa::before { content:'▲'; color:#FF9900; font-size:.42rem; }
.dbtn { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(180deg,#E8EDF2 0%,#B0B8C0 100%); color:var(--void); padding:10px 17px; font-family:var(--fmono); font-size:.6rem; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; font-weight:700; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); transition:all .2s; }
.dbtn:hover { background:linear-gradient(180deg,var(--cyan) 0%,#00A0C8 100%); box-shadow:0 0 18px rgba(0,212,255,.35); }

/* ══ TABLE ══ */
.tw { overflow-x:auto; }
.tt { width:100%; border-collapse:collapse; }
.tt th { font-family:var(--fmono); font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); text-align:left; padding:11px 14px; background:var(--ti); border-bottom:1px solid var(--cyandim); white-space:nowrap; }
.tt td { padding:12px 14px; border-bottom:1px solid var(--tibrd); vertical-align:middle; font-family:var(--ftac); font-size:.88rem; color:var(--cr); }
.tt tr:hover td { background:rgba(0,212,255,.022); }
.tt tr.rh td { background:rgba(0,212,255,.04); border-left:2px solid var(--cyan); }
.tdm { font-family:var(--fhud); font-size:.9rem; letter-spacing:.09em; color:var(--crhi); white-space:nowrap; }
.tdp { font-family:var(--fhud); font-size:.92rem; color:var(--crhi); white-space:nowrap; }
.tda a { font-family:var(--fmono); font-size:.6rem; color:#FF9900; text-decoration:none; }
.tda a:hover { text-decoration:underline; }

/* LEVEL BADGES */
.lb { font-family:var(--fmono); font-size:.47rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; white-space:nowrap; }
.li { background:rgba(0,255,136,.1); color:var(--green); border:1px solid rgba(0,255,136,.25); }
.lm { background:rgba(0,180,255,.1); color:#50AAFF; border:1px solid rgba(0,180,255,.25); }
.la { background:rgba(255,184,0,.1); color:var(--amber); border:1px solid rgba(255,184,0,.25); }
.lp { background:rgba(255,60,60,.1); color:#FF8888; border:1px solid rgba(255,60,60,.25); }
.lf { background:rgba(0,68,255,.18); color:#88AAFF; border:1px solid #0044CC; }

/* SCORE BAR */
.sbw { display:flex; align-items:center; gap:7px; }
.sb { width:68px; height:3px; background:var(--tibrd); position:relative; overflow:hidden; }
.sbf { position:absolute; top:0; left:0; bottom:0; background:var(--crhi); }
.sbf.hi { background:var(--cyan); }
.sbn { font-family:var(--fmono); font-size:.58rem; color:var(--crdim); }

/* ══ GUIDE ══ */
.gg { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:2px; }
.gu { background:var(--ti); border:1px solid var(--tibrd); padding:2rem; position:relative; overflow:hidden; transition:border-color .3s; }
.gu:hover { border-color:var(--ti3); }
.gn { position:absolute; top:-10px; right:10px; font-family:var(--fhud); font-size:5rem; font-weight:900; color:var(--cyan); opacity:.04; line-height:1; pointer-events:none; }
.gu:hover .gn { opacity:.07; }
.giw { width:42px; height:42px; border:1px solid var(--tibrd); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; font-size:1.1rem; background:var(--ti2); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.gt { font-family:var(--fhud); font-weight:700; font-size:1rem; letter-spacing:.09em; color:var(--crhi); margin-bottom:.8rem; }
.gb { font-size:.84rem; font-weight:300; color:var(--crdim); line-height:1.75; }
.gb strong { color:var(--cr); font-weight:500; }

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  nav { display:none; }
  .hco { display:none; }
  .dg { grid-template-columns:1fr; }
  .tc { padding:1rem .5rem; }
  .tv { font-size:1.35rem; }
  .hero { min-height:70vh; }
  .gg { grid-template-columns:1fr; }
}