:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --border:rgba(0,0,0,.10);
  --text:rgba(0,0,0,.88);
  --muted:rgba(0,0,0,.60);
  --muted2:rgba(0,0,0,.45);

  --navy:#003366;
  --sky:#00BFFF;

  --good:#0f9d58;
  --warn:#f29900;
  --bad:#d93025;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.08);
  --shadow: 0 10px 26px rgba(0,0,0,.10), 0 24px 60px rgba(0,0,0,.08);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.12), 0 34px 90px rgba(0,0,0,.10);
  --radius: 22px;
  --radius-sm: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 450px at 15% 8%, rgba(0,191,255,.14), transparent 55%),
    radial-gradient(900px 450px at 85% 10%, rgba(0,51,102,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), #eef3fb);
}

::selection{background: rgba(0,191,255,.22);}

a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:980px;margin:0 auto;padding:28px 18px 60px;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{
  /* Responsive square logo (keeps equal width/height on all screens) */
  width:clamp(44px, 6vw, 58px);
  height:clamp(44px, 6vw, 58px);
  border-radius:18px;
  background: linear-gradient(135deg, var(--navy), var(--sky));
  box-shadow: var(--shadow-sm);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.logo:hover{ text-decoration:none; }
.logo:after{display:none;}
.logo img{width:100%;height:100%;display:block;object-fit:contain;}
.brand h1{margin:0;font-size:18px;letter-spacing:.2px;color:var(--navy);}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;background:rgba(255,255,255,.75);
  color:var(--muted);font-size:13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;}
@media (max-width:880px){.grid{grid-template-columns:1fr;}}

.card{
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.95));
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Keep hover polish but don't shift layout (no "jump" on hover) */
.card:hover{transform:none; box-shadow: var(--shadow-lg); border-color: rgba(0,0,0,.14);}
/* Do not move the main panels on click */
.card:active{transform:none;}
.card .hd{
  padding:18px 18px 10px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:
    radial-gradient(800px 160px at 25% 0%, rgba(0,191,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,51,102,.05), rgba(255,255,255,0));
}
.card .hd h2{margin:0;font-size:14px;color:var(--navy);}
.card .hd p{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45;}
.card .bd{padding:18px;}

.form{display:flex;flex-direction:column;gap:12px;}
.row{display:flex;gap:10px;align-items:center;}
@media (max-width:520px){.row{flex-direction:column;align-items:stretch;}}

/* WhatsApp row: input + button must have equal height AND equal width */
.row.wa-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;}
/* Mobile / narrow screens: stack input + button (same behavior as before) */
@media (max-width:880px){.row.wa-row{grid-template-columns:1fr;}}
.row.wa-row .wa-input,
.row.wa-row .btn{height:56px;}
.row.wa-row .wa-input{padding:0 16px;}
.row.wa-row .btn{
  width:100%;
  /* Keep comfortable side breathing room (~10% on typical widths) */
  padding:0 clamp(16px, 10%, 28px);
  border-radius:16px;
  line-height:1.15;
}


label{font-size:13px;color:var(--muted);}

/* Make the WhatsApp label slightly larger (requested) */
label[for="whatsapp"]{font-size:15px;}

input[type="text"], select{
  width:100%;
  padding:12px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(0,0,0,.14);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  color:var(--text);
  outline:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 10px 18px rgba(0,0,0,.04);
  transition: box-shadow .14s ease, border-color .14s ease, transform .12s ease;
}

/* WhatsApp input (public lookup) — more premium + slightly narrower but taller */
.row .wa-input{
  /* Default input styling (kept premium). Width is controlled by the container row. */
  width:100%;
  max-width:none;
  min-width:0;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: .2px;
  border-radius: 16px;
  border-color: rgba(0,0,0,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 1px 2px rgba(0,0,0,.06),
    0 10px 20px rgba(0,0,0,.05);
}
.row .wa-input:focus{
  border-color: rgba(0,191,255,.95);
  box-shadow:
    0 0 0 4px rgba(0,191,255,.18),
    inset 0 1px 2px rgba(0,0,0,.05);
}
@media (max-width:520px){
  .row .wa-input{width:100%; max-width:none; min-width:0;}
}

/* Ensure the WhatsApp input + button share equal width without overflow */
.row.wa-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.row.wa-row .wa-input,
.row.wa-row .btn{width:100%;min-width:0;}
.row.wa-row .btn{
  /* Keep label in ONE line on desktop (no wrap) */
  white-space:nowrap;
  text-align:center;
}
@media (max-width:880px){.row.wa-row{grid-template-columns:1fr;}}
input[type="text"]::placeholder{color:rgba(0,0,0,.35);}
input[type="text"]:focus, select:focus{
  border-color: rgba(0,191,255,.85);
  box-shadow: 0 0 0 4px rgba(0,191,255,.18), inset 0 1px 2px rgba(0,0,0,.05);
}

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
  outline: 3px solid rgba(0,191,255,.35);
  outline-offset: 2px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;
  padding:12px 14px;border-radius:var(--radius-sm);
  /* Smooth single-color border (no multi-color edges) */
  border:2px solid rgba(255,255,255,.85);
  /* Flat blue fill (no gradients). Normal state should be DARKER than hover. */
  background:#0b86c9;
  color:#ffffff;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 10px 22px rgba(0,51,102,.18), 0 6px 16px rgba(0,191,255,.18);
  transition: transform .10s ease, background-color .14s ease, box-shadow .14s ease;
}
/* Hover state should be DARKER than normal (requested) */
.btn:hover{background:#096aa1; box-shadow: 0 14px 30px rgba(0,51,102,.22), 0 10px 26px rgba(0,191,255,.18); text-decoration:none;} 
.btn:active{transform:translateY(1px);}

/* WhatsApp CTA button */
.btn.btn-whatsapp{
  width:100%;
  border-color: rgba(15,157,88,.28);
  background:
    radial-gradient(140px 70px at 30% 20%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(135deg, #1bb65d, #0f9d58);
  box-shadow: 0 12px 26px rgba(15,157,88,.18), 0 10px 22px rgba(0,0,0,.06);
}
.btn.btn-whatsapp:hover{
  background:
    radial-gradient(140px 70px at 30% 20%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(135deg, #1bb65d, #0f9d58);
  filter:brightness(1.02);
  box-shadow: 0 16px 34px rgba(15,157,88,.22), 0 12px 26px rgba(0,0,0,.07);
}

/* Order CTA button (orange) */
.btn.btn-order{
  width:100%;
  border-color: rgba(242,153,0,.32);
  background:
    radial-gradient(140px 70px at 30% 20%, rgba(255,255,255,.24), transparent 60%),
    linear-gradient(135deg, #ffb000, #f29900);
  box-shadow: 0 12px 26px rgba(242,153,0,.18), 0 10px 22px rgba(0,0,0,.06);
}
.btn.btn-order:hover{
  background:
    radial-gradient(140px 70px at 30% 20%, rgba(255,255,255,.24), transparent 60%),
    linear-gradient(135deg, #ffb000, #f29900);
}
.btn.btn-order:hover{
  filter:brightness(1.02);
  box-shadow: 0 16px 34px rgba(242,153,0,.22), 0 12px 26px rgba(0,0,0,.07);
}

/* Customize SimilarWeb Traffic CTA button (blue) */
.btn.btn-customize{
  width:100%;
  border-color: rgba(255,255,255,.85);
  background:#1a73e8;
  box-shadow: 0 12px 26px rgba(26,115,232,.18), 0 10px 22px rgba(0,0,0,.06);
}
.btn.btn-customize:hover{
  /* Match the hover behavior of the other CTA buttons (no underline + subtle emphasis) */
  background:#1a73e8;
  filter:brightness(1.02);
  box-shadow: 0 16px 34px rgba(26,115,232,.22), 0 12px 26px rgba(0,0,0,.07);
  text-decoration:none;
}

.small{color:var(--muted2);font-size:12.5px;line-height:1.45;}

.notice{
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.94));
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
  position: relative;
}
.notice:before{
  display:none;
}
.notice.good{border-color:rgba(15,157,88,.25); background:rgba(15,157,88,.06);}
.notice.warn{border-color:rgba(242,153,0,.25); background:rgba(242,153,0,.07);}
.notice.bad{border-color:rgba(217,48,37,.25); background:rgba(217,48,37,.06);}

/* Countdown box (credit expiry) */
.countdown-box{margin-bottom:12px; background:#fffedb !important;}
.countdown-head{display:flex;flex-direction:column;gap:4px;}
.cd-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media (max-width:520px){
  .cd-grid{grid-template-columns:repeat(2,1fr);}
}
.cd-item{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  border-radius:14px;
  padding:10px 10px;
  text-align:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.04);
}
.cd-num{
  font-family: var(--mono);
  font-weight: 950;
  font-size: 20px;
  color: rgba(0,0,0,.84);
  letter-spacing: .3px;
  line-height: 1.1;
}
.cd-lbl{margin-top:4px;font-size:12px;color:rgba(0,0,0,.55);font-weight:800;}
.countdown-box.expired{border-color:rgba(217,48,37,.25); background:rgba(217,48,37,.06);}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:520px){.kpis{grid-template-columns:1fr;}}
.kpis.kpis-2{grid-template-columns:2fr .7fr;}
.kpis.kpis-2 .kpi{min-height:auto;}
/* On smaller screens, stack Remaining + Used on two lines (not side-by-side) */
@media (max-width:760px){
  .kpis.kpis-2{grid-template-columns:1fr;}
}
.kpi{
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(0,51,102,.03), rgba(255,255,255,1));
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.kpi .label{color:var(--muted);font-size:12px;}
.kpi .value{margin-top:6px;font-size:20px;font-weight:900;letter-spacing:.2px;color:var(--navy);}
.kpi .sub{color:var(--muted2);font-size:12px;margin-top:2px;}

/* Featured KPI (Remaining credits) */
.kpi.main{
  padding:20px 20px;
  border-color: rgba(15,157,88,.28);
  background: linear-gradient(180deg, rgba(15,157,88,.08), rgba(255,255,255,1));
  box-shadow: 0 14px 34px rgba(15,157,88,.10), 0 18px 44px rgba(0,0,0,.08);
  min-height:118px;
}
.kpi.main .label{color: rgba(0,0,0,.62); font-weight:800; letter-spacing:.2px;}
.kpi.main .value{font-size:44px; font-weight:980; color: var(--good);}
.kpi.main .sub{color: rgba(0,0,0,.55);}

/* Smaller KPI (Used credits) */
.kpi.minor{
  padding:10px 10px;
  border-color: rgba(217,48,37,.32);
  background: linear-gradient(180deg, rgba(217,48,37,.07), rgba(255,255,255,1));
  box-shadow: 0 10px 22px rgba(217,48,37,.10), 0 16px 36px rgba(0,0,0,.07);
  min-height:82px;
}
.kpi.minor .label{color: rgba(0,0,0,.62); font-weight:800;}
.kpi.minor .value{
  font-size:22px;
  font-weight:900;
  color: var(--bad) !important;
}
.kpi.minor .sub{color: rgba(0,0,0,.50);}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.table th,.table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:left;
  font-size:13px;
}
.table th{
  color:var(--muted);
  font-weight:800;
  background: rgba(0,51,102,.04);
}
.table tr:last-child td{border-bottom:none;}
.table tbody tr:hover td{background: rgba(0,191,255,.06);}

.mono{font-family:var(--mono);}
.footer{margin-top:14px;color:var(--muted2);font-size:12.5px;}
hr.sep{border:none;height:1px;background:rgba(0,0,0,.08);margin:16px 0;}

/* WhatsApp button: keep generous side padding so text never touches edges */
.row.wa-row .btn{
  /* ~10–12% inner side padding on typical widths, with safe min/max */
  padding-left: clamp(24px, 12%, 52px) !important;
  padding-right: clamp(24px, 12%, 52px) !important;
}

/* v36: WhatsApp button spacing + slightly smaller label */
.row.wa-row .btn{
  font-size:13px !important;
  letter-spacing:.45px !important;
  padding-left:32px !important;
  padding-right:32px !important;
  /* Smooth white border (no multi-color edge) */
  border:2px solid rgba(255,255,255,.90) !important;
  box-shadow: 0 10px 22px rgba(0,51,102,.20), 0 6px 16px rgba(0,191,255,.14) !important;
}

/* Keep the same clean border on hover/active for the main blue button */
.row.wa-row .btn:hover,
.row.wa-row .btn:active{
  border-color: rgba(255,255,255,.90) !important;
}