*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #080b0f;
    --accent: #00f5a0;
    --accent2: #00c8f5;
    --text: #e8f0f8;
    --muted: #3a4a5a;
    --muted2: #5a7080;
    --surface: rgba(255,255,255,0.03);
    --border: rgba(0,245,160,0.06);
    --border2: rgba(255,255,255,0.07);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; min-height: 100vh; overflow-x: hidden; }
body::after { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.02) 2px,rgba(0,0,0,0.02) 4px); pointer-events:none; z-index:500; }
.grid { position:fixed; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; opacity:0.6; }
.blob1 { position:fixed; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(0,245,160,0.05) 0%,transparent 70%); top:10%; left:5%; pointer-events:none; animation:drift1 10s ease-in-out infinite; z-index:0; }
.blob2 { position:fixed; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(0,200,245,0.04) 0%,transparent 70%); top:55%; right:0%; pointer-events:none; animation:drift2 12s ease-in-out infinite; z-index:0; }
.corner { position:fixed; width:28px; height:28px; z-index:10; }
.corner--tl { top:1.5rem; left:1.5rem; border-top:1px solid var(--muted); border-left:1px solid var(--muted); }
.corner--tr { top:1.5rem; right:1.5rem; border-top:1px solid var(--muted); border-right:1px solid var(--muted); }
.corner--bl { bottom:1.5rem; left:1.5rem; border-bottom:1px solid var(--muted); border-left:1px solid var(--muted); }
.corner--br { bottom:1.5rem; right:1.5rem; border-bottom:1px solid var(--muted); border-right:1px solid var(--muted); }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.2rem 3rem; background:rgba(8,11,15,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border2); }
.nav-logo { font-family:'DM Mono',monospace; font-size:13px; color:var(--text); letter-spacing:0.05em; text-decoration:none; transition:color 0.2s; }
.nav-logo:hover { color:var(--accent); }
.nav-logo .prompt { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:1.5rem; }
.nav-status { display:flex; align-items:center; gap:8px; font-family:'DM Mono',monospace; font-size:11px; color:var(--accent2); letter-spacing:0.1em; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:blink 2s ease-in-out infinite; }

/* HERO */
.hero { position:relative; z-index:10; padding:10rem 3rem 4rem; max-width:1000px; margin:0 auto; }
.hero-tag { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent); margin-bottom:2rem; display:flex; align-items:center; gap:8px; opacity:0; animation:fadeIn 0.5s ease forwards 0.3s; }
.prompt { color:var(--muted2); }
.cursor { display:inline-block; width:8px; height:14px; background:var(--accent); animation:blink 1s step-end infinite; }
.hero-title { font-size:clamp(3.5rem,9vw,7rem); font-weight:800; line-height:0.9; letter-spacing:-0.04em; opacity:0; transform:translateY(24px); animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards 0.5s; }
.outline { color:transparent; -webkit-text-stroke:1px var(--accent); }
.hero-intro { margin-top:2rem; font-family:'DM Mono',monospace; font-size:clamp(0.75rem,1.6vw,0.95rem); color:var(--muted2); line-height:1.8; max-width:620px; opacity:0; transform:translateY(12px); animation:fadeUp 0.7s ease forwards 0.8s; }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.5rem; opacity:0; animation:fadeUp 0.6s ease forwards 1s; }
.badge { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); border:1px solid rgba(0,245,160,0.3); padding:5px 14px; letter-spacing:0.08em; }

/* SECTION */
.section { position:relative; z-index:10; max-width:1000px; margin:0 auto; padding:3rem 3rem 4rem; border-top:1px solid var(--border2); }
.section-header { display:flex; align-items:baseline; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.section-tag { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); letter-spacing:0.1em; }
.section-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-0.02em; }
.section-soon { font-family:'DM Mono',monospace; font-size:10px; color:var(--accent2); border:1px solid rgba(0,200,245,0.3); padding:2px 10px; margin-left:auto; letter-spacing:0.08em; }

/* TOPOLOGY */
.topology-img-wrap { position:relative; border:1px solid var(--border2); overflow:hidden; }
.topology-img { width:100%; height:auto; display:block; }
.topology-legend { display:flex; flex-wrap:wrap; gap:1rem; padding:1rem 1.2rem; border-top:1px solid var(--border2); background:var(--surface); }
.legend-item { display:flex; align-items:center; gap:8px; font-family:'DM Mono',monospace; font-size:11px; color:var(--muted2); }
.legend-dot { width:10px; height:10px; border-radius:50%; background:var(--c,var(--accent)); flex-shrink:0; }

/* SITES GRID */
.sites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }

.site-card { background:var(--surface); border:1px solid var(--border2); border-top:2px solid var(--site-color,var(--accent)); padding:1.4rem; transition:transform 0.2s,border-color 0.2s; }
.site-card:hover { transform:translateY(-3px); border-color:var(--site-color,var(--accent)); }

.site-header { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
.site-dot { width:10px; height:10px; border-radius:50%; background:var(--site-color,var(--accent)); flex-shrink:0; }
.site-city { font-size:1rem; font-weight:800; color:var(--text); }
.site-role { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted2); margin-left:auto; letter-spacing:0.04em; text-align:right; }

.site-rows { display:flex; flex-direction:column; gap:0; }
.site-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--border2); gap:8px; }
.site-row:last-child { border-bottom:none; }
.site-key { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted2); letter-spacing:0.06em; flex-shrink:0; }
.site-val { font-family:'DM Mono',monospace; font-size:11px; color:var(--text); text-align:right; }

/* TECH GRID */
.tech-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.tech-card { background:var(--surface); border:1px solid var(--border2); padding:1.4rem; display:flex; gap:1rem; align-items:flex-start; transition:border-color 0.2s,transform 0.2s; }
.tech-card:hover { border-color:rgba(0,245,160,0.2); transform:translateY(-2px); }
.tech-icon { color:var(--accent); width:44px; height:44px; background:rgba(0,245,160,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tech-info { display:flex; flex-direction:column; gap:6px; }
.tech-title { font-size:14px; font-weight:700; color:var(--text); }
.tech-desc { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted2); line-height:1.7; }

/* IP TABLE */
.ip-table-wrap { overflow-x:auto; }
.ip-table { width:100%; border-collapse:collapse; font-family:'DM Mono',monospace; font-size:12px; }
.ip-table th { background:rgba(0,245,160,0.06); color:var(--accent); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:10px 14px; text-align:left; border-bottom:1px solid rgba(0,245,160,0.2); }
.ip-table td { padding:8px 14px; border-bottom:1px solid var(--border2); color:var(--text); vertical-align:middle; }
.ip-table tbody tr:hover td { background:rgba(255,255,255,0.02); }
.row-strasbourg td { border-left:2px solid #f5a000; }
.row-bruxelles td { border-left:2px solid #00c8f5; }
.row-casablanca td { border-left:2px solid #f500a0; }
.row-stockholm td { border-left:2px solid #00f5a0; }
.row-strasbourg td:first-child,
.row-bruxelles td:first-child,
.row-casablanca td:first-child,
.row-stockholm td:first-child { font-weight:700; }

/* GALLERY PLACEHOLDERS */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.gallery-placeholder { background:var(--surface); border:1px dashed var(--border2); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; transition:border-color 0.2s; }
.gallery-placeholder:hover { border-color:rgba(0,245,160,0.2); }
.placeholder-inner { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted2); text-align:center; padding:1rem; }
.placeholder-inner svg { color:var(--muted); }
.placeholder-inner span { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.06em; }
.placeholder-hint { font-size:9px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--border2); padding:2px 8px; }

/* LEARNED */
.learned-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:8px; }
.learned-item { display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--border2); padding:0.9rem 1.2rem; font-size:13px; color:var(--muted2); line-height:1.5; transition:border-color 0.2s; }
.learned-item:hover { border-color:rgba(0,245,160,0.2); color:var(--text); }
.learned-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:5px; }

/* FOOTER */
.footer { position:relative; z-index:10; max-width:1000px; margin:0 auto; padding:2rem 3rem 4rem; border-top:1px solid var(--border2); display:flex; align-items:center; gap:8px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted2); }
.footer .prompt { color:var(--accent); }
.footer-back { margin-left:1rem; color:var(--accent); text-decoration:none; transition:opacity 0.2s; }
.footer-back:hover { opacity:0.7; }
.footer-year { margin-left:auto; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes drift1 { 0%,100% { transform:scale(1) translate(0,0); } 50% { transform:scale(1.08) translate(20px,-30px); } }
@keyframes drift2 { 0%,100% { transform:scale(1) translate(0,0); } 50% { transform:scale(1.06) translate(-20px,20px); } }

@media (max-width:700px) {
    .nav { padding:1rem 1.5rem; }
    .hero { padding:8rem 1.5rem 3rem; }
    .section { padding:2rem 1.5rem 3rem; }
    .sites-grid, .tech-grid { grid-template-columns:1fr; }
    .ip-table { font-size:10px; }
}