/* ============================================================
   MEGADISK INTERCEPTOR — feuille de style
   Thème : accessoire Mega Drive, underground 16-bit, années 90
   Palette : noir profond, rouge Sega, vert terminal, magenta néon
   ============================================================ */

:root{
  --bg:        #0a0a0f;
  --bg-2:      #11111b;
  --bg-3:      #15151f;
  --ink:       #e8e8f0;
  --ink-dim:   #9aa0b4;
  --red:       #e60012;   /* rouge Sega */
  --red-deep:  #a1000d;
  --green:     #38e07b;   /* vert terminal */
  --cyan:      #2bd9ff;
  --magenta:   #ff3ea5;
  --amber:     #ffb43e;
  --line:      #2a2a3a;
  --radius:    4px;
  --maxw:      1180px;
  --mono: 'VT323', monospace;
  --pixel: 'Press Start 2P', monospace;
  --body: 'Chakra Petch', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(230,0,18,.10), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(43,217,255,.07), transparent 45%);
}

/* ---------- CRT scanlines overlay ---------- */
.crt{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%);
}

a{color:var(--cyan); text-decoration:none}
a:hover{color:#fff; text-shadow:0 0 8px var(--cyan)}

.blink{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,14,.86);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--red);
  box-shadow:0 2px 0 #000, 0 6px 20px rgba(0,0,0,.6);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:.7rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__logo{
  font-family:var(--pixel); font-size:.78rem; color:#fff; letter-spacing:1px;
}
.nav__logo-accent{color:var(--red)}
.nav__logo .blink{color:var(--green)}
.nav__links{display:flex; gap:1.3rem; align-items:center}
.nav__links a{
  color:var(--ink-dim); font-weight:600; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.5px; position:relative;
}
.nav__links a:hover{color:#fff; text-shadow:none}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--red); transition:width .2s;
}
.nav__links a:hover::after{width:100%}
.nav__cta{
  background:var(--red); color:#fff!important; padding:.45rem .8rem;
  border-radius:var(--radius); border:1px solid #ff4d5c;
  box-shadow:0 0 0 1px #000, 0 0 14px rgba(230,0,18,.5);
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--red-deep)}
.nav__burger{
  display:none; background:none; border:1px solid var(--line); color:#fff;
  font-size:1.4rem; border-radius:var(--radius); padding:.1rem .5rem; cursor:pointer;
}
/* ---- Sélecteur de langue (drapeaux) ---- */
.lang{display:flex; gap:.45rem; align-items:center}
.lang__btn{
  display:block; padding:0; cursor:pointer; line-height:0;
  background:none; border:1px solid var(--line); border-radius:3px;
  width:34px; height:23px; overflow:hidden;
  opacity:.55; filter:grayscale(.35);
  transition:opacity .15s, border-color .15s, transform .15s;
}
.lang__btn svg{display:block; width:100%; height:100%}
.lang__btn:hover{opacity:.9; transform:translateY(-1px)}
.lang__btn.is-active{
  opacity:1; filter:none; border-color:var(--red);
  box-shadow:0 0 0 1px #000, 0 0 8px rgba(230,0,18,.45);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  min-height:88vh; display:flex; align-items:center;
  border-bottom:3px solid var(--red);
  background:linear-gradient(180deg, #0c0c14 0%, #08080d 100%);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(43,217,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,217,255,.10) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(58deg) scale(2.2);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top, #000 0%, transparent 70%);
  opacity:.55;
}
.hero__content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:4rem 1.2rem; width:100%;
}
.hero__kicker{
  font-family:var(--mono); font-size:1.35rem; color:var(--green);
  letter-spacing:2px; margin-bottom:1.2rem; text-shadow:0 0 10px rgba(56,224,123,.5);
}
.hero__title{
  font-family:var(--pixel); font-size:clamp(2.1rem, 7vw, 5.2rem);
  line-height:1.18; color:#fff;
  text-shadow:4px 4px 0 var(--red), 8px 8px 0 rgba(0,0,0,.6);
  margin-bottom:1.5rem;
}
.hero__title-accent{
  color:var(--red);
  text-shadow:4px 4px 0 #000, 0 0 24px rgba(230,0,18,.6);
}
.hero__sub{
  max-width:640px; font-size:1.2rem; color:var(--ink);
  margin-bottom:2.2rem; line-height:1.7;
}
.hero__sub strong{color:var(--green)}
.hero__btns{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem}
.hero__insert{
  font-family:var(--pixel); font-size:.85rem; color:var(--amber);
  animation:blink 1.4s steps(2,start) infinite; letter-spacing:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--body); font-weight:700;
  text-transform:uppercase; letter-spacing:1px; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:var(--radius); cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .15s;
  border:2px solid; user-select:none;
}
.btn:active{transform:translate(2px,2px)}
.btn--primary{
  background:var(--red); color:#fff; border-color:#ff5562;
  box-shadow:4px 4px 0 #000;
}
.btn--primary:hover{background:var(--red-deep); color:#fff; text-shadow:none; box-shadow:6px 6px 0 #000}
.btn--ghost{
  background:transparent; color:var(--green); border-color:var(--green);
  box-shadow:4px 4px 0 rgba(56,224,123,.25);
}
.btn--ghost:hover{background:var(--green); color:#06210f; text-shadow:none}
.btn--block{display:block; width:100%; text-align:center; margin-bottom:.7rem}

/* ============================================================
   SECTIONS génériques
   ============================================================ */
.section{
  max-width:var(--maxw); margin:0 auto; padding:5rem 1.2rem;
}
.section--alt{
  max-width:100%; background:var(--bg-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section--alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.section__head{display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem}
.section__num{
  font-family:var(--pixel); font-size:1.1rem; color:var(--bg);
  background:var(--red); padding:.55rem .65rem; border-radius:var(--radius);
  box-shadow:3px 3px 0 #000;
}
.section__title{
  font-family:var(--pixel); font-size:clamp(1.1rem, 3.2vw, 1.9rem);
  color:#fff; line-height:1.3; text-shadow:3px 3px 0 rgba(230,0,18,.55);
}
.section__lead{font-size:1.18rem; color:var(--ink-dim); max-width:780px; margin-bottom:2.5rem}
.section--alt > .section__lead{max-width:var(--maxw)}
.section__lead strong{color:var(--ink)}

.sub-title{
  font-family:var(--pixel); font-size:clamp(.9rem, 2.4vw, 1.2rem);
  color:#fff; line-height:1.4; margin:3.5rem 0 1rem;
  text-shadow:2px 2px 0 rgba(230,0,18,.5);
}

/* ---------- Versions table (MEGA DOS) ---------- */
.vtable-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.vtable{width:100%; border-collapse:collapse; min-width:520px; background:var(--bg-3)}
.vtable th,.vtable td{padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.98rem}
.vtable thead th{
  font-family:var(--mono); font-size:1.25rem; letter-spacing:1px;
  color:var(--bg); background:var(--red); border-bottom:2px solid #000;
}
.vtable td:first-child{font-family:var(--mono); font-size:1.2rem; color:var(--cyan); white-space:nowrap}
.vtable td:nth-child(2){white-space:nowrap}
.vtable tbody tr:hover{background:rgba(43,217,255,.05)}
.vtable tbody tr:last-child td{border-bottom:none}
.vtable__star td{background:rgba(56,224,123,.08)}
.vtable__star td:first-child{color:var(--green)}
.vtable strong{color:#fff}

.prose p{margin-bottom:1.1rem}
.prose strong{color:#fff}
.prose em{color:var(--cyan); font-style:normal}
.hl{background:rgba(230,0,18,.22); padding:.05em .35em; border-radius:3px; color:#fff; font-weight:700}

/* ---------- Grids ---------- */
.grid-2{display:grid; grid-template-columns:1.3fr .9fr; gap:2.5rem; align-items:start}
.grid-2--tight{grid-template-columns:1fr 1fr; gap:1.5rem}

/* ---------- Cards ---------- */
.card{
  background:var(--bg-3); border:1px solid var(--line);
  border-left:4px solid var(--red); border-radius:var(--radius);
  padding:1.5rem 1.6rem; box-shadow:6px 6px 0 rgba(0,0,0,.5);
}
.card__title{
  font-family:var(--mono); font-size:1.5rem; color:var(--green);
  margin-bottom:.9rem; letter-spacing:1px;
}
.card--fact{border-left-color:var(--green); position:relative}
.card__pirate{
  position:absolute; top:-20px; right:-30px;
  width:60px; height:40px; z-index:2;
}
.facts{list-style:none}
.facts li{
  display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px dashed var(--line); font-size:.98rem;
}
.facts li:last-child{border-bottom:none}
.facts span{color:var(--ink-dim); text-transform:uppercase; font-size:.78rem; letter-spacing:1px; padding-top:.15rem}
.facts strong{color:#fff; text-align:right}

.bullets{list-style:none; display:flex; flex-direction:column; gap:.7rem}
.bullets li{padding-left:1.5rem; position:relative}
.bullets li::before{content:"▸"; position:absolute; left:0; color:var(--red); font-weight:700}
.bullets strong{color:#fff}

.note{
  margin-top:1.5rem; font-family:var(--mono); font-size:1.15rem;
  color:var(--amber); border-left:3px solid var(--amber);
  background:rgba(255,180,62,.07); padding:.7rem 1rem; border-radius:3px;
}
.tip{
  font-family:var(--mono); font-size:1.18rem; color:var(--cyan);
  border-left:3px solid var(--cyan); background:rgba(43,217,255,.06);
  padding:.7rem 1rem; border-radius:3px; margin-top:.5rem;
}

/* ============================================================
   SPECS grid
   ============================================================ */
.spec-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:1.2rem;
}
.spec{
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; transition:transform .15s, border-color .15s, box-shadow .15s;
}
.spec:hover{transform:translateY(-4px); border-color:var(--red); box-shadow:0 8px 24px rgba(230,0,18,.18)}
.spec__icon{font-size:2rem; margin-bottom:.6rem}
.spec h3{font-family:var(--mono); font-size:1.45rem; color:var(--cyan); margin-bottom:.5rem; letter-spacing:1px}
.spec p{font-size:.97rem; color:var(--ink-dim)}
.spec strong{color:var(--ink)}

/* ============================================================
   FLOW (how it works)
   ============================================================ */
.flow{display:flex; align-items:stretch; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem}
.flow__step{
  flex:1; min-width:230px; background:var(--bg-3);
  border:1px solid var(--line); border-top:4px solid var(--green);
  border-radius:var(--radius); padding:1.5rem; position:relative;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.flow__badge{
  position:absolute; top:-18px; left:1.2rem;
  font-family:var(--pixel); font-size:.85rem; color:#06210f;
  background:var(--green); padding:.45rem .55rem; border-radius:var(--radius);
  box-shadow:2px 2px 0 #000;
}
.flow__step h3{font-family:var(--mono); font-size:1.5rem; color:#fff; margin:.6rem 0 .5rem; letter-spacing:1px}
.flow__step p{font-size:.97rem; color:var(--ink-dim)}
.flow__step strong{color:var(--green)}
.flow__arrow{display:flex; align-items:center; color:var(--red); font-size:1.6rem; animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.2rem;
}
.shot{
  position:relative; aspect-ratio:3/2; border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg, #14141e 0 12px, #181824 12px 24px);
  border:2px dashed var(--line);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, box-shadow .15s;
}
.shot:hover{border-color:var(--red); box-shadow:0 6px 20px rgba(0,0,0,.5)}
.shot.has-photo{border-style:solid; border-color:var(--green); background:#000; cursor:zoom-in}
.shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;
}
.shot.has-photo img{display:block}
.shot.has-photo .shot__brief{
  opacity:0; transition:opacity .2s;
  background:rgba(6,6,12,.85);
}
.shot.has-photo:hover .shot__brief{opacity:1}
.shot__brief{
  position:absolute; inset:0; padding:1.2rem; display:flex; flex-direction:column;
  justify-content:center; text-align:center; z-index:2;
}
.shot__id{
  font-family:var(--pixel); font-size:1.1rem; color:var(--red);
  margin-bottom:.6rem; text-shadow:2px 2px 0 #000;
}
.shot__brief h3{font-family:var(--mono); font-size:1.5rem; color:#fff; margin-bottom:.4rem; letter-spacing:1px}
.shot__brief p{font-size:.92rem; color:var(--ink-dim); line-height:1.45}
.shot__brief p b{color:var(--amber)}

/* --- Lightbox : photo en taille réelle --- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:2rem; background:rgba(4,4,10,.92);
  cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox__img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; cursor:default;
  border:2px solid var(--green); border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.7);
}
.lightbox__close{
  position:absolute; top:1rem; right:1.4rem;
  font-family:var(--mono); font-size:2.4rem; line-height:1;
  color:#fff; background:none; border:none; cursor:pointer;
  padding:.2rem .6rem; transition:color .15s;
}
.lightbox__close:hover{color:var(--red)}

/* ============================================================
   CALLOUTS
   ============================================================ */
.callout{
  margin-top:2.5rem; background:var(--bg-3);
  border:1px solid var(--line); border-left:4px solid var(--cyan);
  border-radius:var(--radius); padding:1.5rem 1.7rem; box-shadow:5px 5px 0 rgba(0,0,0,.4);
}
.callout h3{font-family:var(--mono); font-size:1.5rem; color:var(--cyan); margin-bottom:.6rem; letter-spacing:1px}
.callout p{color:var(--ink-dim)}
.callout p strong{color:#fff}
.callout--badge{position:relative; margin-top:3.5rem}
.callout__badge{
  position:absolute; top:0; right:1.4rem; transform:translateY(-50%);
  width:130px; height:auto; pointer-events:none;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5));
}
.callout--warn{border-left-color:var(--amber)}
.callout--warn h3{color:var(--amber)}

.myth{
  margin-top:2rem; background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:5px 5px 0 rgba(0,0,0,.4);
}
.myth p{padding:1.1rem 1.4rem; color:var(--ink-dim); margin:0}
.myth p strong{color:#fff}
.myth__bad{border-left:4px solid #e8534e; background:rgba(232,83,78,.07)}
.myth__good{border-left:4px solid #4fbf6b; background:rgba(79,191,107,.07); border-top:1px solid var(--line)}
.myth code{white-space:nowrap}

code{
  font-family:var(--mono); font-size:1.05em; color:var(--green);
  background:rgba(56,224,123,.1); padding:.05em .4em; border-radius:3px;
}

/* ============================================================
   TERMINAL / REVERSE
   ============================================================ */
.terminal-section{position:relative}
.term{
  background:#060609; border:1px solid var(--green);
  border-radius:var(--radius); margin:1.5rem 0 2.5rem;
  box-shadow:0 0 24px rgba(56,224,123,.12);
  overflow:hidden;
}
.term__bar{
  background:#0e1410; border-bottom:1px solid var(--green);
  padding:.5rem .9rem; font-family:var(--mono); font-size:1.05rem; color:var(--green);
  display:flex; align-items:center; gap:.4rem; letter-spacing:1px;
}
.term__bar span{width:11px; height:11px; border-radius:50%; background:var(--line); display:inline-block}
.term__bar span:nth-child(1){background:var(--red)}
.term__bar span:nth-child(2){background:var(--amber)}
.term__bar span:nth-child(3){background:var(--green)}
.term__body{padding:1.1rem 1.2rem; font-family:var(--mono); font-size:1.25rem; line-height:1.5; color:var(--green)}
.term__body pre{margin:0; font-family:inherit; font-size:inherit; color:inherit; white-space:pre-wrap}
.c-prompt{color:var(--red)}
.c-cmd{color:#fff}

.step-title{
  font-family:var(--pixel); font-size:.95rem; color:#fff; line-height:1.5;
  margin:2.5rem 0 1.1rem; padding-bottom:.7rem; border-bottom:2px solid var(--line);
}
.step-title span{
  display:inline-block; background:var(--green); color:#06210f;
  font-size:.7rem; padding:.35rem .5rem; border-radius:3px; margin-right:.6rem;
  box-shadow:2px 2px 0 #000;
}

.geo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.5rem 0}
.geo{
  background:var(--bg-3); border:1px solid var(--line); border-top:3px solid var(--cyan);
  border-radius:var(--radius); text-align:center; padding:1.3rem .8rem;
}
.geo b{display:block; font-family:var(--pixel); font-size:1.6rem; color:var(--cyan); margin-bottom:.6rem}
.geo span{font-size:.85rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.5px}

/* ---------- Code block ---------- */
.code{
  background:#06060a; border:1px solid var(--line); border-radius:var(--radius);
  margin:1rem 0 2rem; overflow:hidden; box-shadow:6px 6px 0 rgba(0,0,0,.5);
}
.code__bar{
  background:#12121c; border-bottom:1px solid var(--line);
  padding:.55rem 1rem; font-family:var(--mono); font-size:1.1rem; color:var(--amber);
  letter-spacing:1px;
}
.code pre{
  margin:0; padding:1.2rem 1.3rem; overflow-x:auto;
  font-family:var(--mono); font-size:1.18rem; line-height:1.45; color:#cdd3e0;
}
.code code{background:none; padding:0; color:inherit; font-size:inherit}
/* syntax tokens */
.k{color:var(--magenta)}      /* keyword */
.t{color:var(--cyan)}         /* type */
.n{color:var(--amber)}        /* number */
.s{color:var(--green)}        /* string */
.cm{color:#5f6b80; font-style:italic} /* comment */

/* ============================================================
   DOWNLOAD
   ============================================================ */
.download{
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem; box-shadow:6px 6px 0 rgba(0,0,0,.5);
}
.download__shot{
  margin-bottom:1.3rem; border:2px solid var(--line); border-radius:3px;
  overflow:hidden; background:#03110a; box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.download__shot img{display:block; width:100%; height:auto}
.download__screen{
  background:#03110a; border:2px solid var(--green); border-radius:3px;
  padding:1.4rem; text-align:center; margin-bottom:1.3rem;
  box-shadow:inset 0 0 24px rgba(56,224,123,.18);
}
.download__title{font-family:var(--pixel); font-size:1rem; color:var(--green); margin-bottom:.7rem; text-shadow:0 0 8px rgba(56,224,123,.6)}
.download__ver{font-family:var(--mono); font-size:1.2rem; color:var(--ink-dim)}
.download__status{font-family:var(--mono); font-size:1.35rem; color:var(--amber); margin-top:.7rem}
.download__hint{font-size:.85rem; color:var(--ink-dim); margin-top:.6rem; text-align:center}
.download__count{font-family:var(--mono); font-size:.95rem; color:var(--ink-dim); margin-top:.7rem; text-align:center; letter-spacing:.03em}
.download__safe{font-size:.82rem; color:var(--green); margin-top:.5rem; text-align:center; line-height:1.4}
.tipjar{
  background:#150e02; border:2px solid var(--amber); border-radius:3px;
  padding:1.2rem; text-align:center; margin-top:1.3rem;
  box-shadow:inset 0 0 24px rgba(255,176,0,.15);
}
.tipjar__title{font-family:var(--pixel); font-size:.85rem; color:var(--amber); margin-bottom:.7rem; text-shadow:0 0 8px rgba(255,176,0,.6)}
.tipjar__txt{font-size:.9rem; color:var(--ink-dim); margin-bottom:1rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#060609; border-top:3px solid var(--red); padding:3rem 1.2rem; margin-top:2rem;
}
.footer__inner{max-width:var(--maxw); margin:0 auto; text-align:center}
.footer__logo{font-family:var(--pixel); font-size:.95rem; color:#fff; margin-bottom:1rem}
.footer__txt{font-size:.85rem; color:var(--ink-dim); max-width:720px; margin:0 auto 1rem; line-height:1.6}
.footer__credits{font-family:var(--mono); font-size:1.1rem; color:var(--green); letter-spacing:1px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .grid-2,.grid-2--tight{grid-template-columns:1fr}
  .geo-grid{grid-template-columns:repeat(2,1fr)}
  .flow__arrow{transform:rotate(90deg); justify-content:center; width:100%}
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:rgba(8,8,14,.98);
    border-bottom:2px solid var(--red); padding:.5rem 1.2rem 1rem;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:.7rem 0; border-bottom:1px solid var(--line); width:100%}
  .nav__burger{display:block}
}
@media (max-width:480px){
  body{font-size:16px}
  .geo-grid{grid-template-columns:1fr 1fr}
  .section{padding:3.5rem 1rem}
}