/* WIMIP - Fullscreen + 3 themes (neon, win95, msdos) */
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Outfit:wght@400;600;700&family=VT323&display=swap");

/* ===============================
   BACKGROUND (static, no motion)
   =============================== */
.wimip-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:cover;
  background-attachment:fixed;    /* keep fixed look, but NO animation */
  animation:none !important;
}
.wimip-bg[data-theme="neon"], .wimip-bg:not([data-theme]){
  background:
    radial-gradient(120% 140% at 100% -20%, #371a6a55 0, transparent 60%),
    radial-gradient(140% 120% at -20% 0,  #0c2a4f66 0, transparent 65%),
    linear-gradient(180deg, #0e0b17, #07070d);
}
.wimip-bg[data-theme="win95"]{ background:#008080; }
.wimip-bg[data-theme="msdos"]{ background:#000; }

/* ===============================
   BASE LAYOUT (structure only)
   =============================== */
html, body { margin:0; height:auto; min-height:100%; }
.wimip, .wimip * { box-sizing:border-box; }

.wimip{
  position:relative; z-index:1;
  display:flex; justify-content:center; align-items:center;
  min-height:100dvh;
  padding: clamp(12px, 3vw, 32px);
  font-family:"Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  line-height:1.5;
  color: var(--text, #eaf5ff);
}
@media (max-height:600px){
  .wimip{ align-items:flex-start; } /* if content taller than viewport */
}
@media (max-width: 600px){
  .wimip{ padding: 12px; }
  .wimip > *{ max-width: 100%; }
}

/* === The single centered PANEL is the child of .wimip === */
.wimip > *{
  width:100%;
  max-width:1160px;
  padding: clamp(16px, 2vw, 24px);
  border-radius:22px;        /* themed */
  overflow:visible;          /* never trap scroll inside */
}

/* Header + inner grid */
.wimip .wimip-header{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 14px 0;
}
.wimip .wimip-brand h1{ margin:0; }
.wimip .wimip-main{
  display:grid;
  grid-template-columns:1.15fr .85fr; /* left wider */
  gap:22px;                           /* comfortable column gap */
  padding:16px;
  border-radius:16px;                 /* themed “plate” behind both columns */
}
@media (max-width:880px){
  .wimip .wimip-main{ grid-template-columns:1fr; }
}

.wimip .left { display: grid; gap: 16px; }

/* Thin hint line between IP card and KPIs */
.wimip .kpi-hint{
  font-size: 13px;
  opacity: .9;
  margin: -6px 4px 2px;
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}
.wimip .kpi-hint .kpi-more{
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 1;
  color: var(--accent, #33e7ff);
  font-weight: 700;
}
.wimip .kpi-hint .kpi-more:hover{ opacity: 1; }
.wimip[data-theme="neon"] .kpi-hint .kpi-more{ text-shadow: 0 0 10px rgba(51,231,255,.35); }

/* Brand row for pages that reuse the WIMIP look (like the FAQ page) */
.wimip .wimip-brand{ display:flex; align-items:center; gap:10px; }
.wimip .wimip-brand-text{ font-weight:700; letter-spacing:.2px; opacity:.95; }
.wimip .wimip-logo{ width:26px; height:26px; display:inline-block; }
.wimip .wimip-logo-svg{ display:block; color: var(--accent, #33e7ff); }
.wimip[data-theme="neon"] .wimip-logo-svg{ filter: drop-shadow(0 0 6px rgba(51,231,255,.35)); }

/* Single-column variant (used by the FAQ page template) */
.wimip .wimip-main.wimip-main--single{ grid-template-columns:1fr; }
.wimip .wimip-faq{ padding: 4px; }
.wimip .wimip-faq h1{ margin: 0 0 10px; font-size: clamp(26px, 4vw, 40px); }
.wimip .wimip-faq h2{ margin: 16px 0 10px; font-size: 20px; }
.wimip .wimip-faq p{ margin: 10px 0; }
.wimip .wimip-faq a{ color: var(--accent, #33e7ff); text-decoration: underline; text-underline-offset: 2px; }

/* FAQ accordion (native <details>) */
.wimip .wimip-faq details{
  background: rgba(20,18,38,.85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 0;
  margin: 4px 0;
  overflow: hidden;
}
.wimip[data-theme="win95"] .wimip-faq details{
  background:#e5e5e5;
  border:2px solid #000;
  border-right-color:#fff;
  border-bottom-color:#fff;
  border-radius:0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}
.wimip[data-theme="msdos"] .wimip-faq details{
  background:#000;
  border:1px dashed var(--accent);
  border-radius:0;
  box-shadow:none;
}

.wimip .wimip-faq summary{
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 700;
}
.wimip .wimip-faq summary::-webkit-details-marker{ display:none; }
.wimip .wimip-faq details > p{ padding: 0 16px 12px; margin: 0; opacity: .95; }

.wimip .wimip-faq details > *:not(summary){
  padding: 0 16px 12px;
}
.wimip .wimip-faq details > *:not(summary):last-child{
  padding-bottom: 14px;
}
.wimip .wimip-faq details p{ margin: 2px 0 0; }

/* Slight visual cue */
.wimip .wimip-faq summary:after{
  content: "+";
  float: right;
  opacity: .85;
}
.wimip .wimip-faq details[open] summary:after{ content: "−"; }


/* Cards / KPIs (neutral spacing) */
.wimip .card{ padding:18px; }
.wimip .kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width:920px){ .wimip .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .wimip .kpis{ grid-template-columns:1fr; } }
.wimip .kpi{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.wimip .kpi label{ font-size:11px; opacity:.8; }
.wimip .kpi .value{ font-size:15px; word-break:break-word; }

/* Pills + buttons */
.wimip .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 6px; }
.wimip .pill{ font-size:12px; padding:6px 10px; border-radius:999px; }
.wimip .btn, .wimip .toggle, .wimip button{
  padding:9px 14px; cursor:pointer; font-weight:600; line-height:1; border-radius:12px;
}
.wimip .btn.btn-small{ padding:8px 12px; font-size:13px; border-radius:10px; }

/* Right column: expandable info cards */
.wimip .info-cards{ display:grid; gap:12px; }
.wimip .icard{ padding:0; overflow:hidden; }
.wimip .icard-head{
  width:100%; text-align:left; display:flex; flex-direction:column; gap:4px;
  background:transparent; border:0; padding:14px 16px; color:inherit;
}
.wimip .icard-title{ font-weight:700; margin:0; font-size:15px; line-height:1.2; }
.wimip .icard-sub{ font-size:13px; opacity:.85; }
.wimip .icard-body{ padding:0 16px 14px; }
.wimip .icard-body p{ margin:10px 0; }
.wimip .geo-result{ margin-top:10px; display:grid; gap:6px; font-size:13px; }
.wimip .geo-link{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.wimip .geo-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.wimip .icard-static{ padding:14px 16px; }
.wimip .aff-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.wimip .aff-note{ margin:10px 0 0; font-size:12px; opacity:.75; }

/* Footer */
.wimip .wimip-footer{ margin-top:18px; font-size:13px; opacity:.9; }

/* Big IP (neutral) */
.wimip .big-ip{ font-weight:800; margin:10px 0 6px; }
.wimip .big-ip.glitch{ animation:wimipGlitchPulse .9s ease-in-out forwards; }
@keyframes wimipGlitchPulse{
  0%  { text-shadow:0 0 10px var(--accent), 0 0 26px var(--accent2); }
  40% { text-shadow:-2px 0 var(--accent), 2px 0 var(--accent2); transform:translateX(-.5px); filter:brightness(1.15); }
  70% { text-shadow: 2px 0 var(--accent),-2px 0 var(--accent2); transform:translateX(.6px); }
  100%{ text-shadow:0 0 10px var(--accent), 0 0 28px var(--accent2); transform:none; filter:none; }
}

/* ===============================
   THEME: NEON (modern / glass)
   =============================== */
.wimip[data-theme="neon"], .wimip:not([data-theme]){
  --text:#eaf5ff; --muted:#a7a9c6; --accent:#33e7ff; --accent2:#ff4ddb;
}
.wimip[data-theme="neon"] > *{
  background: linear-gradient(180deg, rgba(18,16,32,.78), rgba(10,10,18,.76));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 32px rgba(51,231,255,.25),
    0 0 48px rgba(255,77,219,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(115%);
}
.wimip[data-theme="neon"] .wimip-main{
  background: linear-gradient(180deg, rgba(22,20,38,.35), rgba(14,12,26,.30));
  border: 1px solid rgba(255,255,255,.10);
  border-radius:16px;
}
.wimip[data-theme="neon"] .card{
  background: linear-gradient(180deg, rgba(23,21,40,.70), rgba(16,14,32,.68));
  border: 1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow: inset 0 0 22px rgba(0,0,0,.45);
}
.wimip[data-theme="neon"] .icard{
  background: linear-gradient(180deg, rgba(23,21,40,.70), rgba(16,14,32,.68));
  border: 1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow: inset 0 0 22px rgba(0,0,0,.45);
}
.wimip[data-theme="neon"] .kpi{
  background: rgba(20,18,38,.85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:12px;
}
.wimip[data-theme="neon"] .big-ip{
  font-family:"Share Tech Mono", monospace;
  font-size: clamp(26px, 5.2vw, 48px);
  color:#ecfeff;
  text-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent2);
}
.wimip[data-theme="neon"] .btn{
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg,#14122a,#0f0d21);
  color:var(--text);
}
.wimip[data-theme="neon"] .btn:hover{
  box-shadow: 0 0 16px #33e7ff66, 0 0 24px #ff4ddb44;
  transform: translateY(-1px);
}

/* ===============================
   THEME: WINDOWS 95 (retro bevels)
   =============================== */
.wimip[data-theme="win95"]{
  --text:#000; --muted:#333; --accent:#000080; --accent2:#fff;
  color:var(--text);
  font-family: Tahoma, Verdana, "MS Sans Serif", system-ui, sans-serif;
}

.wimip[data-theme="win95"] .wimip-header h1{
	color:#FFF;
}

.wimip[data-theme="win95"] > *{
  background:#c0c0c0;
  border:2px solid #000;
  border-right-color:#fff;
  border-bottom-color:#fff;
  border-radius:0;
  box-shadow:none;
}
.wimip[data-theme="win95"] .wimip-header{
  background:linear-gradient(#000080,#1084d0);
  color:#fff;
  text-shadow:1px 1px 0 #000;
  padding:6px 8px;
  border:2px solid #000;
  border-right-color:#fff;
  border-bottom-color:#fff;
  border-radius:0;
  margin-bottom:10px;
}
.wimip[data-theme="win95"] .wimip-main{
  background:#cfcfcf;
  border:2px solid #000;
  border-right-color:#fff;
  border-bottom-color:#fff;
  border-radius:0;
}
.wimip[data-theme="win95"] .card{
  background:#e5e5e5;
  border:2px solid #000;
  border-right-color:#fff; border-bottom-color:#fff;
  border-radius:0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}
.wimip[data-theme="win95"] .icard{
  background:#e5e5e5;
  border:2px solid #000;
  border-right-color:#fff; border-bottom-color:#fff;
  border-radius:0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}
.wimip[data-theme="win95"] .kpi{
  background:#efefef;
  border:2px solid #000;
  border-right-color:#fff; border-bottom-color:#fff;
  border-radius:0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}
.wimip[data-theme="win95"] .btn{
  background:#dfdfdf; color:#000;
  border:2px solid #000;
  border-right-color:#fff; border-bottom-color:#fff;
  border-radius:0;
}
.wimip[data-theme="win95"] .btn:active{
  border-left-color:#fff; border-top-color:#fff;
  border-right-color:#000; border-bottom-color:#000;
  transform: translate(1px,1px);
}

/* ===============================
   THEME: MS-DOS (black/white text, green accent)
   =============================== */
.wimip[data-theme="msdos"]{
  --text:#f2f2f2; --muted:#cfcfcf; --accent:#00ff6a;
  color:var(--text);
  font-family:"VT323", monospace;
}
.wimip[data-theme="msdos"] > *{
  background:#000;
  border:1px solid var(--accent);
  border-radius:0; box-shadow:none;
}
.wimip[data-theme="msdos"] .wimip-main{
  background:#000;
  border:1px dashed var(--accent);
  border-radius:0;
}
.wimip[data-theme="msdos"] .card{
  background:#000;
  border:1px dashed var(--accent);
  border-radius:0;
}
.wimip[data-theme="msdos"] .icard{
  background:#000;
  border:1px dashed var(--accent);
  border-radius:0;
}
.wimip[data-theme="msdos"] .kpi label, 
.wimip[data-theme="msdos"] .muted{ color:var(--muted); }
.wimip[data-theme="msdos"] .big-ip{
  font-size:48px; color:var(--text);
  text-shadow:0 0 6px rgba(255,255,255,.2), 0 0 10px rgba(0,255,106,.25);
}
.wimip[data-theme="msdos"] .btn{
  background:#000; color:var(--text);
  border:1px solid var(--accent);
  border-radius:0;
}
.wimip[data-theme="msdos"] .btn:hover{
  text-shadow:0 0 6px rgba(0,255,106,.35);
}
.wimip[data-theme="msdos"] .wimip-header h1::after{
  content:"_"; margin-left:4px; color:var(--accent);
  animation: dosBlink 1s steps(1,end) infinite;
}
@keyframes dosBlink{ 50%{ opacity:0; } }

.wimip .wimip-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--text, #fff);
  text-decoration: none;
  font-weight: 700;
}

.wimip .wimip-brand:visited{
  color: var(--text, #fff);
}

.wimip .wimip-brand:hover{
  text-decoration: none;
  opacity: .95;
}

.wimip .wimip-brand svg{
  flex:0 0 auto;
}

/* ===============================
   RESPONSIVE TWEAKS
   =============================== */
@media (max-width: 600px){
  .wimip > *{ border-radius:16px; padding:16px; }
  .wimip .wimip-main{ padding:10px; gap:12px; }
  .wimip .card{ padding:14px; }
  .wimip .kpi { padding:12px; }
}

/* FAQ bottom row: back link left, VPN CTA right */
.wimip .wimip-faq-bottom{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 760px){
  .wimip .wimip-faq-bottom{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* FAQ full width CTA */
.wimip .wimip-faq-cta{
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.wimip .wimip-faq-cta-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wimip .wimip-faq-cta-title{
  font-size: 16px;
  font-weight: 700;
}

.wimip .wimip-faq-cta-sub{
  font-size: 13px;
  opacity: .75;
  margin-top: 4px;
}

.wimip .wimip-faq-cta-buttons{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile stacking */
@media (max-width: 760px){
  .wimip .wimip-faq-cta-inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .wimip .wimip-faq-cta-buttons{
    margin-top: 10px;
  }
}