/* ===== Base ===== */
:root {
  --bg:#070b16;
  --ink:#eaf2ff;
  --muted:#9bb0d4;
  --glow1:#00e0ff;
  --glow2:#ff00e6;
  --card:#0e1730;
  --stroke:#1e2a55;
  --accent:#45f3ff;
  --ok:#2ee38f;
  --err:#ff6b7a;
  --radius:18px;
  --maxw:860px;
  --pad:clamp(16px,3vw,28px);
  --shadow:0 10px 40px rgba(0,0,0,.45);

  /* Dutch palette */
  --nl-red:#ae1c28;
  --nl-white:#ffffff;
  --nl-blue:#21468b;
  --nl-orange:#ff7a00;
}

/* reset */
* { box-sizing:border-box }
html, body { height:100%; margin:0 }

/* ===== Cyber background: sharp + responsive, no blur ===== */
body {
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  overflow-x:hidden;
  position:relative;
  z-index:0;
}

/* Background image layer (stays crisp) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  /* use your best WebP here; keep file path the same as your project */
  background: url("../images/urk-cyber.png") no-repeat;
  background-size: cover;              /* auto-adjusts to viewport */
  background-position: 38% center;     /* show lighthouse + some sea/windmills */
  background-attachment: fixed;        /* desktop parallax */
  image-rendering: auto;
}

/* Readability overlays (separate from the image so it stays sharp) */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.48) 0 40%, rgba(0,0,0,.20) 65%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg, rgba(7,11,22,.40), rgba(7,11,22,.72));
  mix-blend-mode: normal; /* no softening of the image */
}

/* ===== Decorative layers ===== */
.scanlines, .grid {
  position:fixed; inset:0; pointer-events:none; z-index:1;
}
.wrap, .hdr, .card, .ftr { position:relative; z-index:2 }

.scanlines{
  opacity:.08; mix-blend-mode:screen;
  background-image:repeating-linear-gradient(0deg, #fff0 0 2px, #fff2 2px 3px);
}
.grid{
  opacity:.10;
  background:
    radial-gradient(1200px 600px at 100% 0%, color-mix(in oklab, var(--glow1) 30%, transparent), transparent 60%),
    radial-gradient(1000px 600px at 0% 100%, color-mix(in oklab, var(--glow2) 24%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 60px);
}

/* ===== Layout ===== */
.wrap { width:min(96vw, var(--maxw)); margin-inline:auto; padding:clamp(18px,4vw,40px) 0 }
.hdr  { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px }

/* ===== Gradient Neon Logo (text-based) ===== */
.logo{
  margin:0;
  font-family:"Orbitron", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(32px,6vw,52px);
  font-weight:900;
  text-transform:lowercase;
  letter-spacing:1px;
  line-height:1.1;
  position:relative;

  /* animated cyan → magenta gradient fill */
  background: linear-gradient(90deg,
            var(--glow1) 0%,
            #7af8ff 20%,
            var(--glow2) 60%,
            #7af8ff 85%,
            var(--glow1) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  /* neon halo */
  text-shadow:
    0 0 6px rgba(0,224,255,.7),
    0 0 16px rgba(255,0,230,.45);

  /* subtle motion */
  animation: logoSweep 6s linear infinite;
  transition: text-shadow .2s ease, transform .2s ease;
}
@keyframes logoSweep{
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* gentle “power up” on hover/focus */
.logo:hover, .logo:focus{
  text-shadow:
    0 0 10px rgba(0,224,255,1),
    0 0 24px rgba(255,0,230,.65);
  transform: translateY(-1px);
}

/* Dutch flag underline (kept) with soft glow */
.logo::after{
  content:"";
  display:block;
  height:3px;
  margin-top:6px;
  border-radius:2px;
  background:linear-gradient(90deg,
    var(--nl-red) 0% 33.33%,
    var(--nl-white) 33.33% 66.66%,
    var(--nl-blue) 66.66% 100%);
  filter: drop-shadow(0 0 8px rgba(0,224,255,.35));
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .logo{ animation:none }
}

/* ===== API Link ===== */
.api-link{
  text-decoration:none; color:var(--ink); font-weight:600;
  border:1px solid var(--stroke); padding:8px 12px; border-radius:12px; opacity:.85;
}
.api-link:hover{
  border-color:var(--accent);
  box-shadow:0 0 16px color-mix(in oklab, var(--accent) 30%, transparent) inset; opacity:1;
}

/* ===== Card ===== */
.card{
  position:relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 88%, transparent), #0b1330);
  border:1px solid var(--stroke); border-radius:var(--radius);
  padding:var(--pad); box-shadow:var(--shadow); overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(90deg, var(--glow1), transparent 20%, transparent 80%, var(--glow2));
  filter:blur(30px); opacity:.15; z-index:0;
}
.label{ margin:0 0 8px 0; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-size:12px }

/* ===== IP Row ===== */
.ip-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px }
.ip{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(30px, 10vw, 56px);
  font-weight:800; letter-spacing:.5px; color:var(--ink);
  text-shadow:
    0 0 6px color-mix(in oklab, var(--glow1) 60%, transparent),
    0 0 12px color-mix(in oklab, var(--glow2) 50%, transparent);
}

/* ===== Button ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; min-height:44px; border-radius:14px; cursor:pointer; font-weight:600;
  background:#0f152c; border:1px solid var(--accent); color:var(--ink);
  box-shadow:0 0 8px color-mix(in oklab, var(--accent) 40%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn .icon{ fill:currentColor; opacity:.9 }
.btn:hover{
  transform:translateY(-2px); background:#131b3a;
  box-shadow:0 0 12px color-mix(in oklab, var(--accent) 60%, transparent),
             0 0 24px color-mix(in oklab, var(--glow1) 50%, transparent);
}
.btn.ok{ border-color:var(--ok); color:var(--ok); box-shadow:0 0 14px rgba(46,227,143,.6) }
.btn.err{ border-color:var(--err); color:var(--err); box-shadow:0 0 14px rgba(255,107,122,.6) }

/* ===== Meta ===== */
.meta{ margin-top:10px; display:grid; gap:12px; grid-template-columns:1fr; border-top:1px dashed var(--stroke); padding-top:12px }
.meta div{ display:block }
.meta dt{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px }
.meta dd{ margin:0; color:var(--ink) }
.ua{ word-break: break-word }
.note{ color:var(--muted); font-size:14px; margin-top:6px }
.meta-geo{ margin-top:6px }

/* ===== Footer ===== */
.ftr{ opacity:.7; text-align:center; margin-top:18px; font-size:13px }

/* ===== Mobile: avoid Chrome fixed-attachment blur & show more right side ===== */
@media (max-width:900px){
  body::before{
    background-attachment: scroll; /* fix mobile blur */
    background-position: 45% center; /* pan a bit right on narrow screens */
  }
}

/* ===== Ultra-wide: reveal more windmills ===== */
@media (min-aspect-ratio: 16/9){
  body::before{ background-position: 40% center; }
}
@media (min-aspect-ratio: 21/9){
  body::before{ background-position: 45% center; }
}

/* ===== Mobile tweaks ===== */
@media (max-width:520px){
  .btn{ width:100% }
  .ip-row{ gap:10px }
  .meta{ font-size:15px }
  .card{ padding:clamp(14px,5vw,22px); border-radius:16px }
  .logo{ font-size:clamp(22px,7vw,34px) }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .btn, .ip{ transition:none }
}

.funbox{ margin-top:18px; text-align:center; background:linear-gradient(180deg, rgba(14,23,48,.85), rgba(14,23,48,.95)); }
.funtext{ font-size:18px; font-weight:600; color:var(--accent); text-shadow:0 0 8px rgba(0,224,255,.6); padding:10px; }