/* ==========================================================================
   PULSEGRID — Domain Uptime Monitoring
   Design tokens
   ========================================================================== */
:root{
  --ink:#0F1729;
  --ink-soft:#4B5568;
  --ink-faint:#8A93A6;
  --bg:#F6F8FC;
  --bg-alt:#EEF2FA;
  --surface:#FFFFFF;
  --line:#E3E8F2;

  --brand:#2952E3;
  --brand-dark:#1B3AB0;
  --brand-light:#E8EDFC;
  --violet:#6941C6;
  --mint:#12B76A;
  --mint-light:#E7F8EF;
  --amber:#F79009;
  --coral:#F04438;
  --coral-light:#FDEEED;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;

  --shadow-sm:0 2px 8px rgba(16,23,42,0.06);
  --shadow-md:0 8px 24px rgba(16,23,42,0.08);
  --shadow-lg:0 20px 48px rgba(16,23,42,0.12);

  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:-0.01em;
}

a{ text-decoration:none; }

.text-soft{ color:var(--ink-soft); }
.text-faint{ color:var(--ink-faint); }
.text-brand{ color:var(--brand); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brand);
  background:var(--brand-light);
  padding:6px 14px;
  border-radius:100px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px var(--mint-light);
}

/* Buttons */
.btn{ font-family:var(--font-body); font-weight:600; border-radius:12px; padding:0.7rem 1.4rem; transition:all .2s ease; border:1px solid transparent;}
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline-brand{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-outline-brand:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-light); }
.btn-lg{ padding:0.85rem 1.8rem; font-size:1.02rem; }
.btn-sm{ padding:0.45rem 1rem; font-size:0.88rem; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(246,248,252,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .brand-mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink);
}
.brand-mark .pulse-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg, var(--brand), var(--violet));
  display:flex;align-items:center;justify-content:center;
}
.site-nav .nav-link{
  color:var(--ink-soft); font-weight:600; font-size:0.95rem; padding:0.5rem 1rem !important;
}
.site-nav .nav-link:hover, .site-nav .nav-link.active{ color:var(--brand); }
.nav-toggle-btn{
  border:1px solid var(--line); background:#fff; width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}

/* Left-to-right sliding sidebar mobile menu */
.side-menu-overlay{
  position:fixed; inset:0; background:rgba(15,23,41,0.45);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:1040;
}
.side-menu-overlay.active{ opacity:1; visibility:visible; }

.side-menu{
  position:fixed; top:0; left:0; height:100%; width:78%; max-width:320px;
  background:var(--surface); z-index:1050;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.side-menu.active{ transform:translateX(0); }
.side-menu-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.4rem; border-bottom:1px solid var(--line);
}
.side-menu-close{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.side-menu-body{ padding:1rem 1.4rem; flex:1; overflow-y:auto; }
.side-menu-body .nav-link{
  display:block; padding:0.85rem 0.5rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--bg-alt); font-size:1.02rem;
}
.side-menu-body .nav-link:hover{ color:var(--brand); }
.side-menu-footer{ padding:1.2rem 1.4rem; border-top:1px solid var(--line); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:6.5rem 0 4rem;
  overflow:hidden;
  background:
    radial-gradient(1200px 550px at 88% -15%, #DCE4FB 0%, transparent 60%),
    radial-gradient(900px 420px at 2% 8%, #EBE4FB 0%, transparent 55%),
    radial-gradient(600px 300px at 50% 105%, #E3F8ED 0%, transparent 60%),
    var(--bg);
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(41,82,227,0.14) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 62%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 62%);
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }
.hero-badge-row{ display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; margin-bottom:1.1rem; }
.hero-badge-row .eyebrow{ margin:0; }
.hero-badge-secondary{
  display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8rem; font-weight:700;
  color:var(--violet); background:#F3EEFC; border-radius:100px; padding:0.35rem 0.8rem 0.35rem 0.6rem;
}
.hero h1{ font-size:3.2rem; line-height:1.08; font-weight:700; }
.hero .lead{ font-size:1.15rem; color:var(--ink-soft); max-width:520px; }

.hero-stats{ display:flex; gap:2rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }
.hero-stats .stat span{ font-size:0.85rem; color:var(--ink-faint); }

/* Signature: live pulse monitor card */
.monitor-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:1.4rem 1.4rem 0.6rem;
  position:relative;
}
.monitor-card .monitor-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; }
.monitor-card .monitor-title{ font-weight:700; font-size:0.95rem; }
.status-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700;
  padding:4px 10px; border-radius:100px;
}
.status-pill.up{ background:var(--mint-light); color:#0B7A45; }
.status-pill.down{ background:var(--coral-light); color:#B42318; }
.status-pill .blip{ width:7px;height:7px;border-radius:50%; background:currentColor; }
.status-pill.up .blip{ animation:blip 1.6s infinite; }

@keyframes blip{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(18,183,106,0.5); }
  50%{ opacity:0.7; }
}

.row-dot{ animation:blip 2s infinite; }
.row-item.is-checking{
  background:var(--brand-light); border-radius:8px;
  animation:rowCheckFlash 1s ease-in-out;
}
@keyframes rowCheckFlash{
  0%{ background:transparent; }
  30%{ background:var(--brand-light); }
  100%{ background:transparent; }
}
.monitor-scan-label{
  display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:600;
  color:var(--ink-faint); border-top:1px solid var(--line); margin-top:0.6rem;
  padding:0.7rem 0 0.9rem; transition:opacity .25s ease;
}
.monitor-scan-label .scan-dot{
  width:6px;height:6px;border-radius:50%; background:var(--brand); animation:blip 1s infinite;
}
.latency.is-updating{ animation:latencyPop .4s ease; }
@keyframes latencyPop{
  0%{ transform:scale(1); color:var(--brand); }
  50%{ transform:scale(1.15); color:var(--brand); }
  100%{ transform:scale(1); color:var(--ink); }
}

.pulse-line-wrap{ height:110px; width:100%; overflow:hidden; }
.pulse-scroll-group{
  animation:pulseScroll 4s linear infinite;
  transform-box:fill-box;
}
@keyframes pulseScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-800px); }
}

.monitor-rows{ border-top:1px solid var(--line); margin-top:0.8rem; }
.monitor-rows .row-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.7rem 0; border-bottom:1px solid var(--bg-alt); font-size:0.88rem;
}
.monitor-rows .row-item:last-child{ border-bottom:none; }
.row-item .domain-name{ font-weight:600; }
.row-item .latency{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* floating chips around hero visual */
.float-chip{
  position:absolute; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-md);
  border-radius:12px; padding:0.6rem 0.9rem; font-size:0.82rem; font-weight:600;
  display:flex; align-items:center; gap:8px;
}

/* ==========================================================================
   SECTIONS (generic)
   ========================================================================== */
.section{ padding:5rem 0; }
.section-alt{ background:var(--surface); }
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head h2{ font-size:2.1rem; font-weight:700; margin-top:0.7rem; }

/* About */
.about-grid-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.6rem; height:100%;
}
.about-grid-item .icn{
  width:46px;height:46px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  background:var(--brand-light); color:var(--brand); margin-bottom:1rem; font-size:1.2rem;
}

/* Services */
.service-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.8rem; height:100%; transition:all .25s ease; position:relative; overflow:hidden;
}
.service-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.service-card .icn{
  width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center;
  font-size:1.35rem; color:#fff; margin-bottom:1.2rem;
}
.service-card:nth-child(1) .icn, .icn-blue{ background:linear-gradient(135deg,var(--brand),#5B7CF0); }
.icn-violet{ background:linear-gradient(135deg,var(--violet),#9067D6); }
.icn-mint{ background:linear-gradient(135deg,var(--mint),#3FCB8B); }
.icn-amber{ background:linear-gradient(135deg,var(--amber),#FFB547); }

/* Why choose - split panel with ticks */
.why-panel{
  background:linear-gradient(135deg, var(--ink) 0%, #1C2745 100%);
  border-radius:var(--radius-lg); padding:3rem; color:#fff; position:relative; overflow:hidden;
}
.why-panel::before{
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(41,82,227,0.35), transparent 70%);
  top:-150px; right:-150px;
}
.why-list li{
  display:flex; gap:14px; padding:0.9rem 0; border-bottom:1px solid rgba(255,255,255,0.1);
}
.why-list li:last-child{ border-bottom:none; }
.why-list .tick{
  width:26px;height:26px;border-radius:50%; background:rgba(18,183,106,0.2); color:var(--mint);
  display:flex;align-items:center;justify-content:center; flex-shrink:0; font-size:0.8rem;
}

/* What we offer */
.offer-tab-btn{
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:0.8rem 1.2rem;
  text-align:left; width:100%; font-weight:600; color:var(--ink-soft); transition:all .2s ease;
}
.offer-tab-btn.active{ border-color:var(--brand); background:var(--brand-light); color:var(--brand); }
.offer-tab-btn small{ display:block; font-weight:400; color:var(--ink-faint); margin-top:2px; }
.offer-visual{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem; min-height:340px;
}

/* Pricing */
.price-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem; height:100%; position:relative;
}
.price-card.featured{
  border-color:var(--brand); box-shadow:var(--shadow-lg); transform:scale(1.03);
}
.price-card .badge-pop{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; font-size:0.75rem; font-weight:700; padding:5px 14px; border-radius:100px;
}
.price-card .amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; }
.price-card .amount span{ font-size:1rem; font-weight:500; color:var(--ink-faint); }
.price-card ul{ list-style:none; padding:0; margin:1.5rem 0; }
.price-card ul li{ padding:0.5rem 0; display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:0.92rem; }
.price-card ul li i{ color:var(--mint); margin-top:3px; }

/* FAQ */
.accordion-item{ background:transparent; border:none; border-bottom:1px solid var(--line); }
.accordion-button{
  background:transparent !important; font-weight:600; font-family:var(--font-display);
  font-size:1.02rem; padding:1.3rem 0; box-shadow:none !important; color:var(--ink);
}
.accordion-button:not(.collapsed){ color:var(--brand); }
.accordion-button::after{ filter:hue-rotate(200deg); }
.accordion-body{ padding:0 0 1.3rem; color:var(--ink-soft); }

/* Footer */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.75); padding:4rem 0 1.5rem; }
.site-footer h6{ color:#fff; font-family:var(--font-display); margin-bottom:1.1rem; }
.site-footer a{ color:rgba(255,255,255,0.65); }
.site-footer a:hover{ color:#fff; }
.site-footer .fbrand{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.3rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); margin-top:2.5rem; padding-top:1.5rem; font-size:0.85rem; }
.social-ico{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center; color:#fff;
}
.social-ico:hover{ background:var(--brand); }

/* ==========================================================================
   AUTH PAGES (login / register)
   ========================================================================== */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1000px 500px at 100% 0%, #E4EAFB 0%, transparent 55%),
    radial-gradient(900px 500px at 0% 100%, #EFEAFB 0%, transparent 55%),
    var(--bg);
  padding:2rem 1rem;
}
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:2.6rem; width:100%; max-width:420px;
}
.auth-card .form-label{ font-weight:600; font-size:0.88rem; }
.auth-card .form-control{
  border-radius:10px; border:1px solid var(--line); padding:0.7rem 0.9rem; font-size:0.95rem;
}
.auth-card .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.auth-logo{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:1.6rem; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dash-body{ background:var(--bg); min-height:100vh; }
.dash-sidebar{
  position:fixed; top:0; left:0; height:100%; width:250px; background:var(--surface);
  border-right:1px solid var(--line); z-index:1030; transform:translateX(-100%);
  transition:transform .3s ease; display:flex; flex-direction:column;
}
.dash-sidebar.active{ transform:translateX(0); }
@media (min-width:992px){ .dash-sidebar{ transform:translateX(0); } }

.dash-sidebar-head{ padding:1.4rem; border-bottom:1px solid var(--line); }
.dash-nav{ padding:1rem 0.9rem; flex:1; overflow-y:auto; }
.dash-nav .nav-link{
  display:flex; align-items:center; gap:12px; padding:0.7rem 0.9rem; border-radius:10px;
  color:var(--ink-soft); font-weight:600; font-size:0.92rem; margin-bottom:2px;
}
.dash-nav .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.dash-nav .nav-link:hover{ background:var(--bg-alt); color:var(--ink); }
.dash-nav .nav-link.active{ background:var(--brand-light); color:var(--brand); }
.dash-sidebar-foot{ padding:1rem 1.4rem; border-top:1px solid var(--line); }

.dash-main{ margin-left:0; padding:1.4rem; }
@media (min-width:992px){ .dash-main{ margin-left:250px; } }

.dash-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:0.9rem 1.2rem; margin-bottom:1.4rem;
}
.dash-search{
  border:1px solid var(--line); border-radius:10px; padding:0.5rem 0.9rem; font-size:0.9rem;
  min-width:0; flex:1; max-width:320px; background:var(--bg);
}

.kpi-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.4rem; height:100%;
}
.kpi-card .kpi-icon{
  width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  font-size:1.1rem; color:#fff; margin-bottom:0.9rem;
}
.kpi-card .kpi-value{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; }
.kpi-card .kpi-label{ color:var(--ink-faint); font-size:0.85rem; }
.kpi-trend{ font-size:0.8rem; font-weight:700; }
.kpi-trend.pos{ color:var(--mint); }
.kpi-trend.neg{ color:var(--coral); }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.4rem; }
.panel-title{ font-weight:700; font-size:1.02rem; margin-bottom:0.2rem; }

.dom-table{ width:100%; font-size:0.9rem; }
.dom-table th{
  text-align:left; color:var(--ink-faint); font-weight:600; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.04em; padding:0.6rem 0.5rem; border-bottom:1px solid var(--line);
}
.dom-table td{ padding:0.85rem 0.5rem; border-bottom:1px solid var(--bg-alt); vertical-align:middle; }
.dom-table tr:last-child td{ border-bottom:none; }
.dot-status{ width:9px;height:9px;border-radius:50%; display:inline-block; margin-right:7px; }
.dot-status.up{ background:var(--mint); box-shadow:0 0 0 3px var(--mint-light); }
.dot-status.down{ background:var(--coral); box-shadow:0 0 0 3px var(--coral-light); }
.dot-status.warn{ background:var(--amber); box-shadow:0 0 0 3px #FEF0DA; }
.mini-bar{ display:inline-block; height:22px; }

/* Chat widget */
.chat-fab{
  position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--violet)); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:1.4rem; box-shadow:var(--shadow-lg);
  border:none; z-index:1060; transition:transform .2s ease;
}
.chat-fab:hover{ transform:scale(1.06); }
.chat-window{
  position:fixed; bottom:96px; right:24px; width:340px; max-width:90vw; height:440px;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); display:flex; flex-direction:column; z-index:1060;
  opacity:0; visibility:hidden; transform:translateY(16px); transition:all .25s ease;
}
.chat-window.active{ opacity:1; visibility:visible; transform:translateY(0); }
.chat-head{
  background:linear-gradient(135deg,var(--brand),var(--violet)); color:#fff; padding:1rem 1.1rem;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:flex; align-items:center; justify-content:space-between;
}
.chat-body{ flex:1; padding:1rem; overflow-y:auto; display:flex; flex-direction:column; gap:0.6rem; }
.chat-msg{ padding:0.55rem 0.85rem; border-radius:12px; font-size:0.88rem; max-width:80%; }
.chat-msg.bot{ background:var(--bg-alt); align-self:flex-start; border-bottom-left-radius:2px; }
.chat-msg.me{ background:var(--brand); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.chat-foot{ padding:0.8rem; border-top:1px solid var(--line); display:flex; gap:0.5rem; }
.chat-foot input{ flex:1; border:1px solid var(--line); border-radius:10px; padding:0.5rem 0.8rem; font-size:0.88rem; }
.chat-foot button{ background:var(--brand); color:#fff; border:none; width:38px; border-radius:10px; }

/* Order page */
.order-summary{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.6rem; position:sticky; top:100px;
}
.order-plan-row{ display:flex; justify-content:space-between; padding:0.7rem 0; border-bottom:1px solid var(--bg-alt); font-size:0.92rem; }
.order-plan-row.total{ font-weight:700; font-size:1.05rem; border-bottom:none; padding-top:1rem; }

/* Thank you page */
.thankyou-check{
  width:88px;height:88px;border-radius:50%; background:var(--mint-light); color:var(--mint);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin:0 auto 1.5rem;
}

/* Utilities */
.card-hairline{ border:1px solid var(--line); border-radius:var(--radius-md); }
.bg-soft-blue{ background:var(--brand-light); }
.rounded-xl{ border-radius:var(--radius-lg); }

@media (max-width:767px){
  .hero h1{ font-size:2.2rem; }
  .hero{ padding:3rem 0 2.5rem; text-align:center;}
  .hero .lead{ margin:0 auto; }
  .hero-stats{ justify-content:center; }
  .why-panel{ padding:1.8rem; }
  .price-card.featured{ transform:none; }
}

/* ============ HERO TRUST STRIP ============ */
.hero-trust{
  margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem;
}
.hero-trust-label{ font-size:0.82rem; color:var(--ink-faint); font-weight:600; white-space:nowrap; }
.hero-trust-logos{ display:flex; flex-wrap:wrap; gap:1.75rem; }
.hero-trust-logos span{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-display);
  font-weight:700; color:var(--ink-faint); font-size:0.95rem; opacity:0.8;
}
.hero-trust-logos span i{ font-size:0.7rem; color:var(--brand); }

/* ============ BENTO GRID ============ */
.bento-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(150px,auto);
  gap:1.25rem;
}
.bento-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.75rem; grid-column:span 2; display:flex; flex-direction:column; justify-content:flex-start;
  transition:all .25s ease; position:relative; overflow:hidden;
}
.bento-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:transparent; }
.bento-large{ grid-column:span 2; grid-row:span 2; }
.bento-tall{ grid-row:span 2; }
.bento-icon{
  width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:1.1rem; margin-bottom:1rem;
}
.bento-icon-blue{ background:linear-gradient(135deg,var(--brand),#5B7CF0); }
.bento-icon-violet{ background:linear-gradient(135deg,var(--violet),#9067D6); }
.bento-icon-mint{ background:linear-gradient(135deg,var(--mint),#3FCB8B); }
.bento-icon-amber{ background:linear-gradient(135deg,var(--amber),#FFB547); }
.bento-sparkline{ margin-top:auto; padding-top:1rem; }
.bento-mini-list{ margin-top:auto; padding-top:1.25rem; display:flex; flex-direction:column; gap:0.6rem; }
.bento-mini-row{
  display:flex; align-items:center; gap:0.6rem; font-size:0.82rem; font-weight:600; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:0.55rem 0.8rem;
}
.bento-mini-row i{ color:var(--brand); }

@media (max-width:991px){
  .bento-grid{ grid-template-columns:repeat(2,1fr); }
  .bento-large, .bento-tall{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:575px){
  .bento-grid{ grid-template-columns:1fr; }
  .bento-item, .bento-large, .bento-tall{ grid-column:span 1; }
}

/* ============ DOMAIN HEALTH SECTION ============ */
.domain-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.75rem; height:100%; transition:all .2s ease;
}
.domain-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.domain-card .icn{
  width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center;
  font-size:1.35rem; color:#fff; margin-bottom:1.2rem;
}
.domain-registry-panel .icn{
  display:flex;align-items:center;justify-content:center; font-size:1.35rem; color:#fff;
}
.domain-registry-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.75rem;
}
.registry-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.85rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.registry-row:last-child{ border-bottom:none; padding-bottom:0; }
.registry-domain{ font-weight:600; color:var(--ink); font-size:0.92rem; }
.registry-meta{ color:var(--ink-faint); font-size:0.82rem; }

/* Subtle glow pulse once the hero signal line has drawn in */
.pulse-glow{
  animation:pulseGlowFade 2.6s ease-in-out infinite;
}
@keyframes pulseGlowFade{
  0%, 100%{ filter:drop-shadow(0 0 0 rgba(18,183,106,0)); }
  50%{ filter:drop-shadow(0 0 6px rgba(18,183,106,0.55)); }
}

/* ============ HERO — STACKED (TOP-DOWN) LAYOUT ============ */
.hero-stacked{ padding-bottom:3.5rem; }
.hero-top{ max-width:720px; }
.hero-top .lead{ max-width:560px; }
.hero-showcase{
  margin-top:3.5rem; max-width:920px;
}
.monitor-card-wide{ padding:1.6rem 1.8rem 1.4rem; }
.monitor-card-wide .pulse-line-wrap{ height:130px; }
.monitor-rows-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0.5rem 1rem;
}
.monitor-rows-grid .row-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.2rem;
  border-top:1px solid var(--line); border-bottom:none; padding:0.7rem 0 0;
}
.monitor-rows-grid .row-item .latency{ font-weight:700; color:var(--ink); font-size:0.9rem; }

@media (max-width:767px){
  .monitor-rows-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-showcase{ margin-top:2.5rem; }
}


a.brand-mark img {
    width: auto;
    height: 37px;
}
a.pg-dash-brand img {
    width: auto;
    height: 45px;
}

h2.font-display {
    font-size: 34px;
}

.pg-sidebar-head img {
    width: auto;
    height: 45px;
}

/*==================================
    Banner Breadcrumb
==================================*/

.banner-5 {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(135deg, #0d1b3d 0%, #1a3c7d 100%);
    overflow: hidden;
}

.banner-5::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.banner-5 .container {
    position: relative;
    z-index: 2;
}

.banner-5 h2 {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Breadcrumb */

.breadcrumb-modifier {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    list-style: none;
}

.breadcrumb-modifier .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

.breadcrumb-modifier .breadcrumb-item + .breadcrumb-item::before {
    display: none; /* Disable Bootstrap separator */
}

.breadcrumb-modifier .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb-modifier .breadcrumb-item a:hover {
    color: #4fd1ff;
}

.breadcrumb-modifier .breadcrumb-item.active {
    color: #ffffff;
    font-weight: 600;
}

.breadcrumb-modifier iconify-icon {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    vertical-align: middle;
}

/* Responsive */

@media (max-width: 991px) {
    .banner-5 {
        padding: 70px 0;
    }

    .banner-5 h2 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .banner-5 {
        padding: 55px 0;
        text-align: center;
    }

    .banner-5 h2 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .breadcrumb-modifier {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .breadcrumb-modifier .breadcrumb-item {
        font-size: 14px;
    }
}

#cookiePopup h4 {
        font-size: 25px;
        color: #fff;
        margin-bottom: 15px;
    }
    #cookiePopup p {
        font-size: 15px;
        color: #fff;
        margin-bottom: 15px;
        letter-spacing: 1px;
        line-height: 1.5;
        max-width: 850px;
    }
    #cookiePopup p a {
        color: #fff;
        text-decoration: underline;
    }
    .cookieBtns {
        display: inline-flex;
        gap: 10px;
    }
    .cookieBtns button {
        font-size: 15px;
        margin: 10px 0;
        color: #fff;
padding: 10px 20px;
border-radius: 5px;
background: #000;
cursor: pointer;
transition: all 0.5s ease;
border: 2px solid #fff;
}
.cookieBtns button:last-child {
background-color: #fff;
color: #666 !important;
}