/* ================================
   iplightning – Responsive Layout
   Mobile-first, fluid, orientation aware
   ================================ */

:root{
  /* Color system */
  --bg:#0c0f14; --card:#121722; --fg:#e9eef6; --muted:#aab4c8;
  --accent:#f5c518; --good:#24d17c; --bad:#ff5d5d; --link:#6bb8ff;

  /* Spacing scale (fluid) */
  --space-1: clamp(6px, 0.6vw, 8px);
  --space-2: clamp(10px, 1vw, 14px);
  --space-3: clamp(14px, 1.5vw, 18px);
  --space-4: clamp(18px, 2vw, 24px);

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px;

  /* Shadows (subtle) */
  --shadow: 0 6px 26px rgba(0,0,0,.35);

  /* Text sizes (fluid) */
  --fs-sm: clamp(.9rem, .8vw, 1rem);
  --fs-md: clamp(1rem, 1vw, 1.1rem);
  --fs-lg: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-xl: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-xxl: clamp(1.6rem, 3.5vw, 2.4rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: calc(var(--space-3) + env(safe-area-inset-top))
           max(calc(var(--space-3)), env(safe-area-inset-left))
           calc(var(--space-3) + env(safe-area-inset-bottom))
           max(calc(var(--space-3)), env(safe-area-inset-right));
}

header{
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0;
}
.logo{width:34px; height:34px; display:inline-block}
.brand{font-weight:800; font-size:var(--fs-lg); letter-spacing:.3px}
.pill{
  background:#1a2030; border:1px solid #222a3b; color:var(--muted);
  padding:3px 10px; border-radius:999px; font-size:var(--fs-sm);
}

/* HERO */
.hero{
  background:linear-gradient(180deg,#121722,#0d1220);
  border:1px solid #222a3b; border-radius:var(--r-lg);
  padding:var(--space-4); margin:var(--space-2) 0 var(--space-3);
  box-shadow:var(--shadow);
}
.hero h1{ margin:0 0 var(--space-2); font-size:var(--fs-xl); }
.kpi{
  display:flex; align-items:center; justify-content:space-between;
  background:#0f1626; border:1px solid #1b2334; border-radius:var(--r-md);
  padding:var(--space-2); margin:var(--space-2) 0;
}
.kpi .label{ color:var(--muted); font-size:var(--fs-sm); }
.kpi .value{ font-variant-numeric:tabular-nums; font-size:var(--fs-lg); }
.kpi strong{ font-size:var(--fs-xl); }

.ip{
  font-size: clamp(1.3rem, 4.2vw, 2.6rem);
  font-weight:900; letter-spacing:.3px;
  overflow-wrap:anywhere; word-break:break-word;
}

/* GRID SYSTEM */
.grid{
  display:grid; grid-template-columns: 1fr; gap:var(--space-2);
}
.col-12{grid-column:span 1}
.col-8, .col-6, .col-4{grid-column:span 1}

/* ≥640px: split some sections */
@media (min-width:640px){
  .grid{ grid-template-columns: repeat(6, 1fr); }
  .col-6{ grid-column: span 3; }
  .col-4{ grid-column: span 3; }
  .col-8{ grid-column: span 6; }
  .col-12{ grid-column: span 6; }
}

/* ≥960px: classic desktop composition */
@media (min-width:960px){
  .grid{ grid-template-columns: repeat(12, 1fr); }
  .col-4{ grid-column: span 4; }
  .col-6{ grid-column: span 6; }
  .col-8{ grid-column: span 8; }
  .col-12{ grid-column: span 12; }
}

/* Orientation-aware tweak */
@media (orientation:landscape) and (max-width:896px){
  .col-8, .col-4, .col-6{ grid-column: span 6; }
}

/* CARDS & UI ELEMENTS */
.card{
  background:var(--card); border:1px solid #222a3b; border-radius:var(--r-md);
  padding:var(--space-3);
}
.muted{ color:var(--muted) }
.ok{ color:var(--good) } .bad{ color:var(--bad) }

.row{ display:flex; gap:var(--space-2); flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#1a2030; color:var(--fg); border:1px solid #283149;
  border-radius:var(--r-sm); padding:10px 12px; cursor:pointer; text-decoration:none;
  font-size:var(--fs-md);
}
.btn:hover{ background:#20283b }
.btn.accent{ background:var(--accent); color:#1a1300; border:1px solid #caa713 }

/* Ad container */
.promo-slot{
  background:#0f1626; border:1px dashed #2a3550; border-radius:8px;
  padding:var(--space-3); color:#9fb0d0; text-align:center;
}
.promo-slot ins{ display:block !important; width:100% !important; }

/* Public IP box: label on top; IP one line below */
.hero .grid > .col-12 .kpi{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start;
  justify-content:flex-start;
  gap: var(--space-1);
}
.hero .grid > .col-12 .kpi .label{
  white-space:nowrap; margin-right:0; line-height:1.1;
}
.hero .grid > .col-12 .kpi .value.ip{
  display:block; max-width:100%;
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  line-height:1.15;
}

/* Right KPI stack aligned to H1 top; even spacing */
@media (min-width:960px){
  .hero .grid{
    display:grid;
    grid-template-columns: 8fr 4fr;
    grid-auto-flow: row dense;
    column-gap: var(--space-2);
    row-gap: var(--space-2);
    align-items:start;
  }
  .hero .grid > .col-12{ grid-column: 1 / 2; }
  .hero .grid > .col-4{ grid-column: 2 / 3; align-self:start; margin:0 !important; }
  .hero .grid > .col-4:first-of-type{ grid-row: 1; }
  .hero .grid > .col-4:nth-of-type(2){ grid-row: 2; }
  .hero .grid > .col-4:nth-of-type(3){ grid-row: 3; }
  .hero .grid > .col-4 .kpi,
  .hero .grid > .col-4 .kpi > *:first-child{ margin-top:0 !important; }
}

/* Optional micro-nudge for first KPI alignment */
@media (min-width:960px){
  :root{ --kpi-nudge: 0px; }
  .hero .grid > .col-4:first-of-type{ margin-top: var(--kpi-nudge); }
}

/* Ultra-wide: 3-column hero layout */
@media (min-width:1200px){
  .hero{
    display:grid;
    grid-template-columns: 7fr 3fr 3fr;
    grid-auto-rows:minmax(0,auto);
    gap:var(--space-2);
    align-items:start;
  }
  .hero .grid{
    grid-column:1 / 3;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2);
  }
  .hero .grid > .col-12{ grid-column:1 / 2; }
  .hero .grid > .col-4{ grid-column:2 / 3; }
  .hero .row{
    grid-column:3 / 4;
    display:grid;
    grid-auto-rows:min-content;
    gap:var(--space-2);
    justify-items:stretch;
  }
  .hero .row .btn{
    width:100%;
    justify-content:center;
    white-space:nowrap;
  }
}