:root{
  --bg:#050816;
  --bg2:#0a1020;
  --panel:rgba(255,255,255,.05);
  --panel2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.12);
  --text:#eef4ff;
  --muted:#9fb0cc;
  --blue:#61a8ff;
  --blue2:#7dd3fc;
  --green:#33d17a;
  --purple:#8b5cf6;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  --radius:24px;
  --radius-sm:18px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(97,168,255,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(139,92,246,.12), transparent 26%),
    linear-gradient(180deg, #040611 0%, #09101d 40%, #060a14 100%);
  color:var(--text);
}

a{color:var(--blue2);text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}
.section{padding:72px 0}
.section-tight{padding:44px 0}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(97,168,255,.12);
  border:1px solid rgba(97,168,255,.2);
  color:#cfe4ff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(97,168,255,.22), rgba(97,168,255,.14));
  color:#fff;
  font-weight:800;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{
  background:rgba(255,255,255,.04);
}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(4,7,15,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;align-items:center;gap:14px;
  color:#fff;font-weight:900;font-size:20px;
}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 12px 28px rgba(97,168,255,.22);
}
.nav{
  display:flex;gap:18px;flex-wrap:wrap;
}
.nav a{
  color:#dbe8ff;font-weight:700;font-size:14px;
}
.hero{
  padding:88px 0 40px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:center;
}
.eyebrow{
  color:#9ad6ff;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:900;
  margin:0 0 10px;
}
h1{
  font-size:clamp(40px,6vw,72px);
  line-height:1.02;
  margin:0 0 18px;
  letter-spacing:-.03em;
}
h2{
  font-size:clamp(28px,4vw,42px);
  line-height:1.08;
  margin:0 0 16px;
  letter-spacing:-.02em;
}
h3{
  font-size:22px;
  margin:0 0 10px;
}
.lead{
  font-size:19px;
  color:var(--muted);
  max-width:760px;
}
.hero-panel{
  padding:26px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at top left, rgba(97,168,255,.14), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
}
.hero-stat{
  display:flex;justify-content:space-between;gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-stat:last-child{border-bottom:0}
.hero-stat strong{font-size:18px}
.kicker{
  color:#9dd9ff;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.list-clean{
  list-style:none;
  padding:0;
  margin:0;
}
.list-clean li{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.list-clean li:last-child{border-bottom:0}
.price{
  font-size:34px;
  font-weight:900;
  line-height:1;
}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:34px 0 56px;
  color:#b8c6df;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px;
}
.table-like{
  display:grid;
  gap:12px;
}
.table-row{
  display:grid;
  grid-template-columns:1.3fr .7fr 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tool-box textarea,
.tool-box input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:14px;
  padding:14px 16px;
  font:inherit;
}
.tool-box textarea{min-height:160px;resize:vertical}
.tool-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.notice{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(51,209,122,.09);
  border:1px solid rgba(51,209,122,.18);
  color:#d7ffe9;
}
.alert{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,190,92,.08);
  border:1px solid rgba(255,190,92,.18);
  color:#ffe7ba;
}
code.inline{
  background:rgba(255,255,255,.08);
  padding:2px 8px;
  border-radius:10px;
}
@media (max-width:960px){
  .hero-grid,.grid-2,.grid-3,.footer-grid,.table-row{grid-template-columns:1fr}
  .nav-wrap{padding:14px 0}
  .nav{gap:12px}
  .hero{padding-top:60px}
}

.affiliate-card{
  position:relative;
  overflow:hidden;
  min-height:250px;
}

.affiliate-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.affiliate-surfshark{
  background:
    radial-gradient(circle at top left, rgba(46, 230, 203, .18), transparent 30%),
    linear-gradient(135deg, rgba(0, 195, 169, .14), rgba(7, 20, 38, .98));
}

.affiliate-nord{
  background:
    radial-gradient(circle at top left, rgba(88, 163, 255, .18), transparent 30%),
    linear-gradient(135deg, rgba(35, 114, 255, .18), rgba(7, 20, 38, .98));
}

.affiliate-tplink{
  background:
    radial-gradient(circle at top left, rgba(0, 209, 255, .18), transparent 30%),
    linear-gradient(135deg, rgba(0, 134, 255, .18), rgba(7, 20, 38, .98));
}

.affiliate-bluehost{
  background:
    radial-gradient(circle at top left, rgba(126, 166, 255, .18), transparent 30%),
    linear-gradient(135deg, rgba(53, 93, 255, .18), rgba(7, 20, 38, .98));
}

.affiliate-hostgator{
  background:
    radial-gradient(circle at top left, rgba(255, 186, 80, .18), transparent 30%),
    linear-gradient(135deg, rgba(255, 135, 47, .18), rgba(7, 20, 38, .98));
}

.affiliate-actions{
  margin-top:20px;
}

.affiliate-btn{
  min-width:220px;
  font-size:15px;
  letter-spacing:.02em;
  text-transform:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    0 16px 36px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.affiliate-btn:hover{
  transform:translateY(-2px) scale(1.01);
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
  z-index:80;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(86vw, 340px);
  height:100vh;
  background:linear-gradient(180deg, rgba(8,12,22,.98), rgba(6,10,20,.98));
  border-left:1px solid rgba(255,255,255,.09);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:90;
  padding:22px 18px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.drawer-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

.mobile-drawer nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mobile-drawer nav a{
  color:#eef4ff;
  font-weight:800;
  font-size:16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.mobile-drawer nav a:hover{
  background:rgba(255,255,255,.08);
}

@media (max-width: 960px){
  .menu-toggle{display:inline-flex}
  .site-header .nav{display:none}
}

.stack-form{
  display:flex;
  flex-direction:column;
}

.stack-form label{
  font-weight:800;
  color:#eef4ff;
  letter-spacing:.01em;
}

.stack-form input,
.stack-form select,
.stack-form textarea{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#eef4ff;
  outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.stack-form input::placeholder,
.stack-form textarea::placeholder{
  color:rgba(238,244,255,.48);
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus{
  border-color:rgba(126,240,176,.45);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(126,240,176,.10), 0 14px 34px rgba(0,0,0,.22);
  transform:translateY(-1px);
}

.stack-form textarea{
  min-height:180px;
  resize:vertical;
}

.form-help{
  color:#a8b8c7;
  font-size:14px;
  margin-top:8px;
}

.notice-card{
  border:1px solid rgba(126,240,176,.18);
  background:linear-gradient(180deg, rgba(126,240,176,.08), rgba(255,255,255,.03));
  border-radius:24px;
  padding:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

.notice-card.warning{
  border-color:rgba(255,191,102,.22);
  background:linear-gradient(180deg, rgba(255,191,102,.08), rgba(255,255,255,.03));
}

.inline-cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.form-status{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#eef4ff;
}

.form-status.success{
  border-color:rgba(126,240,176,.22);
  background:rgba(126,240,176,.09);
}

.form-status.error{
  border-color:rgba(255,107,107,.22);
  background:rgba(255,107,107,.09);
}

.premium-divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin:28px 0;
}

.hero .price{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  border-radius:16px;
  background:rgba(126,240,176,.10);
  border:1px solid rgba(126,240,176,.20);
  color:#eef4ff;
  font-weight:900;
  font-size:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.card h2,
.card h3{
  letter-spacing:-.015em;
}

.card p,
.card li{
  line-height:1.72;
}

@media (max-width: 720px){
  .stack-form input,
  .stack-form select,
  .stack-form textarea{
    padding:13px 14px;
    border-radius:14px;
  }
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#eef4ff;
  font-weight:800;
  letter-spacing:-.01em;
}

.brand-logo{
  display:block;
  height:38px;
  width:auto;
}

.brand-logo.brand-logo-icon{
  height:34px;
}

.site-footer .footer-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#eef4ff;
  font-weight:800;
}

.site-footer .footer-brand img{
  height:34px;
  width:auto;
  display:block;
}

@media (max-width: 960px){
  .brand-logo{
    height:34px;
  }
}

@media (max-width: 640px){
  .brand-logo{
    height:30px;
  }
}

.home-hero-premium{
  position:relative;
  overflow:hidden;
  padding:88px 0 54px;
  background:
    radial-gradient(circle at 10% 20%, rgba(46,214,123,.10), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(88,84,255,.12), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.home-hero-premium::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  opacity:.25;
}

.home-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:34px;
  align-items:center;
}

.home-hero-copy h1{
  font-size:clamp(42px, 7vw, 78px);
  line-height:.95;
  letter-spacing:-.045em;
  max-width:760px;
  margin:0 0 18px;
}

.home-hero-copy .lead{
  max-width:720px;
  font-size:18px;
  line-height:1.75;
}

.home-hero-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 20px;
}

.home-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#dbe8f4;
  font-size:13px;
  font-weight:700;
}

.home-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.home-hero-panel{
  position:relative;
  padding:26px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:0 30px 80px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
}

.home-stat-list{
  display:grid;
  gap:12px;
}

.home-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.home-stat:last-child{
  border-bottom:none;
}

.home-stat span{
  color:#a8b8c7;
  font-size:14px;
}

.home-stat strong{
  color:#eef4ff;
  font-size:17px;
  text-align:right;
}

.home-section{
  padding:34px 0;
}

.home-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.home-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.home-card-premium{
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:0 18px 48px rgba(0,0,0,.24);
}

.home-card-premium::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(126,240,176,.05), transparent 42%, transparent 100%);
}

.home-card-premium h2,
.home-card-premium h3{
  margin:0 0 12px;
}

.home-card-premium p{
  margin:0 0 16px;
}

.home-kicker{
  display:inline-block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9ed8ff;
}

.home-offer-card{
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:0 20px 60px rgba(0,0,0,.26);
}

.home-offer-card.featured{
  border-color:rgba(126,240,176,.22);
  box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(126,240,176,.08) inset;
}

.home-offer-price{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 14px;
  border-radius:14px;
  background:rgba(126,240,176,.10);
  border:1px solid rgba(126,240,176,.20);
  font-weight:900;
  font-size:18px;
  color:#eef4ff;
  margin:10px 0 16px;
}

.home-center-block{
  max-width:980px;
  margin:0 auto;
}

.home-big-panel{
  padding:34px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.home-mini-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.home-mini-links a{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#eef4ff;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}

.site-footer{
  padding:54px 0 38px;
}

.site-footer .container{
  width:min(100%,1180px);
  margin:0 auto;
  padding:0 16px;
}

@media (max-width: 980px){
  .home-hero-inner,
  .home-grid-3,
  .home-grid-2{
    grid-template-columns:1fr;
  }

  .home-hero-copy h1{
    max-width:none;
  }
}

.site-footer{
  position:relative;
  margin-top:54px;
  padding:56px 0 26px;
  border-top:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(circle at 12% 0%, rgba(46,214,123,.06), transparent 26%);
}

.site-footer .container{
  width:min(100%,1180px);
  margin:0 auto;
  padding:0 16px;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr);
  gap:34px;
  align-items:start;
}

.footer-brand-wrap{
  margin-bottom:18px !important;
}

.footer-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.footer-brand img{
  height:36px;
  width:auto;
  display:block;
}

.footer-col-title{
  display:block;
  margin:0 0 14px;
  color:#eef4ff;
  font-weight:800;
  font-size:18px;
  letter-spacing:-.01em;
}

.footer-copy{
  max-width:420px;
}

.footer-copy p{
  margin:0;
  color:#a8b8c7;
  line-height:1.8;
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-links li{
  margin:0;
  padding:0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.footer-links li:last-child{
  border-bottom:none;
}

.footer-links a{
  display:block;
  padding:12px 0;
  color:#7fd3ff;
  text-decoration:none;
  transition:opacity .18s ease, transform .18s ease;
}

.footer-links a:hover{
  opacity:.88;
  transform:translateX(2px);
}

.footer-bottom{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.footer-credit,
.footer-utility{
  margin:0 !important;
  color:#a8b8c7;
}

.footer-utility a,
.footer-credit a{
  color:#7fd3ff;
  text-decoration:none;
}

.footer-utility{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.footer-utility .sep{
  color:rgba(255,255,255,.22);
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  .footer-copy{
    max-width:none;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(16px);
  background:rgba(5,10,18,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-wrap{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  color:#dbe7f3;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  letter-spacing:-.01em;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}

.nav a:hover{
  background:rgba(255,255,255,.05);
  color:#ffffff;
  transform:translateY(-1px);
}

.nav a[href="/downloads/"],
.nav a[href="/shop/kali-linux-usb/"]{
  background:rgba(126,240,176,.08);
  border:1px solid rgba(126,240,176,.14);
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:#eef4ff;
  font-size:20px;
  cursor:pointer;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.48);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
  z-index:1001;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(88vw, 380px);
  height:100vh;
  padding:24px 20px;
  background:linear-gradient(180deg, #07101a, #050b12);
  border-left:1px solid rgba(255,255,255,.07);
  box-shadow:-20px 0 60px rgba(0,0,0,.42);
  transform:translateX(100%);
  transition:transform .22s ease;
  z-index:1002;
}

.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.drawer-close{
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:#eef4ff;
  font-size:20px;
  cursor:pointer;
}

.mobile-drawer nav{
  display:grid;
  gap:10px;
}

.mobile-drawer nav a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  text-decoration:none;
  color:#e7f0f8;
  font-weight:700;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
}

.mobile-drawer nav a:hover{
  background:rgba(255,255,255,.06);
}

@media (max-width: 980px){
  .nav{
    display:none;
  }

  .menu-toggle{
    display:inline-flex;
  }
}

.home-section{
  padding:28px 0;
}

.home-section + .home-section{
  padding-top:10px;
}

.home-card-premium,
.home-offer-card,
.home-big-panel{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-card-premium:hover,
.home-offer-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 64px rgba(0,0,0,.32);
  border-color:rgba(126,240,176,.16);
}

.btn{
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.btn.secondary{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.btn.secondary:hover{
  background:rgba(255,255,255,.08);
}

.home-big-panel h2{
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 14px;
}

.home-card-premium h3,
.home-offer-card h3{
  font-size:clamp(22px, 2vw, 28px);
  line-height:1.08;
  letter-spacing:-.025em;
}

.site-footer{
  margin-top:42px;
}

.footer-grid{
  gap:28px;
}

.footer-copy p{
  max-width:420px;
}

.footer-links a{
  padding:10px 0;
}

.footer-bottom{
  margin-top:22px;
}

/* =========================
   PREMIUM TOOL PAGES
   ========================= */

.tool-shell{
  display:grid;
  gap:22px;
}

.tool-layout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:22px;
  align-items:start;
}

.tool-panel,
.tool-side-panel,
.tool-help-card,
.tool-output-card,
.tool-example-card{
  background:linear-gradient(180deg,rgba(14,18,28,.92),rgba(10,13,22,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.tool-panel,
.tool-side-panel,
.tool-help-card,
.tool-output-card,
.tool-example-card{
  padding:22px;
}

.tool-hero-note{
  max-width:860px;
}

.tool-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.tool-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#d7e0ea;
  font-size:14px;
}

.tool-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.tool-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.tool-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}

.tool-field label{
  font-weight:600;
  color:#e7edf5;
}

.tool-field input,
.tool-field textarea,
.tool-field select{
  width:100%;
  background:rgba(255,255,255,.035);
  color:#eef4fb;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 16px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tool-field textarea{
  min-height:170px;
  resize:vertical;
}

.tool-field input:focus,
.tool-field textarea:focus,
.tool-field select:focus{
  border-color:rgba(110,231,183,.45);
  box-shadow:0 0 0 4px rgba(110,231,183,.10);
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

.tool-btn{
  appearance:none;
  border:0;
  cursor:pointer;
  border-radius:14px;
  padding:13px 18px;
  font-weight:700;
  text-decoration:none;
}

.tool-btn-primary{
  background:linear-gradient(180deg,#59f0b1,#26c981);
  color:#04120b;
}

.tool-btn-secondary{
  background:rgba(255,255,255,.05);
  color:#edf5ff;
  border:1px solid rgba(255,255,255,.10);
}

.tool-btn:hover{
  transform:translateY(-1px);
}

.tool-output{
  min-height:120px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
  color:#eff5fc;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

.tool-output code,
.tool-output pre{
  white-space:pre-wrap;
  word-break:break-word;
  margin:0;
  font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

.tool-section-title{
  margin:0 0 8px;
}

.tool-muted{
  color:#a8b5c4;
}

.tool-side-list,
.tool-link-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.tool-side-list li,
.tool-link-list li{
  margin:0;
}

.tool-side-list a,
.tool-link-list a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  color:#edf4fb;
  text-decoration:none;
}

.tool-side-list a:hover,
.tool-link-list a:hover{
  background:rgba(255,255,255,.06);
}

.tool-note{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(89,240,177,.08);
  border:1px solid rgba(89,240,177,.18);
  color:#dff9ec;
}

.tool-warning{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,209,102,.07);
  border:1px solid rgba(255,209,102,.18);
  color:#fff2c7;
}

.tool-kv{
  display:grid;
  gap:10px;
}

.tool-kv-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.tool-kv-row:last-child{
  border-bottom:0;
}

.tool-empty{
  color:#8fa0b1;
  font-style:italic;
}

@media (max-width: 980px){
  .tool-layout,
  .tool-grid-3{
    grid-template-columns:1fr;
  }

  .tool-grid-2{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   PREMIUM TOOLS UI SYSTEM
   ========================================================= */

.tool-shell{
  margin:0 auto;
}

.tool-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);
  gap:22px;
  align-items:start;
}

.tool-panel,
.tool-sidepanel{
  background:linear-gradient(180deg, rgba(15,22,31,.92), rgba(10,16,24,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:0 22px 70px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
}

.tool-panel{
  padding:22px;
}

.tool-sidepanel{
  padding:18px;
}

.tool-stack{
  display:grid;
  gap:16px;
}

.tool-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.tool-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.tool-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.tool-label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:#dce7f5;
  letter-spacing:.01em;
}

.tool-input,
.tool-select,
.tool-textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#eef6ff;
  padding:14px 15px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus{
  border-color:rgba(94,196,255,.55);
  box-shadow:0 0 0 4px rgba(94,196,255,.10);
}

.tool-input,
.tool-select{
  min-height:52px;
}

.tool-textarea{
  min-height:180px;
  resize:vertical;
  line-height:1.55;
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tool-btn-lite{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color:#eef6ff;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.tool-btn-lite:hover{
  transform:translateY(-1px);
  border-color:rgba(94,196,255,.45);
}

.tool-note{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:14px;
}

.tool-note strong{
  display:block;
  margin-bottom:8px;
  color:#f4f8ff;
  font-size:14px;
}

.tool-mini-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.tool-mini-list a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  color:#d9e8ff;
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}

.tool-mini-list a:hover{
  transform:translateY(-1px);
  border-color:rgba(94,196,255,.40);
}

.tool-help{
  font-size:13px;
  color:#9fb0c7;
  margin-top:8px;
}

.tool-output-grid{
  display:grid;
  gap:12px;
}

.tool-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.tool-stat-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:14px;
}

.tool-stat-card span{
  display:block;
  color:#8ea3bd;
  font-size:12px;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.tool-stat-card strong,
.tool-stat-card p{
  margin:0;
  color:#eef6ff;
  word-break:break-word;
}

.tool-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.tool-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tool-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#dfeaff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tool-empty{
  color:#8fa5bf;
  font-style:italic;
}

.tool-table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
}

.tool-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  background:rgba(255,255,255,.025);
}

.tool-table th,
.tool-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  vertical-align:top;
}

.tool-table th{
  color:#dbe9fb;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(255,255,255,.03);
}

.tool-table td{
  color:#cddbef;
}

.tool-hero-icon{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(94,196,255,.18), rgba(94,196,255,.06));
  border:1px solid rgba(94,196,255,.18);
  margin-bottom:16px;
  font-size:24px;
}

.tool-result-box{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:14px;
}

.tool-result-box pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

.tool-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tool-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#dbe6f7;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}

.tool-tab.active{
  border-color:rgba(94,196,255,.45);
  background:rgba(94,196,255,.12);
}

@media (max-width: 980px){
  .tool-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .tool-row,
  .tool-grid-2,
  .tool-grid-3,
  .tool-stat-grid{
    grid-template-columns:1fr;
  }

  .tool-panel,
  .tool-sidepanel{
    padding:16px;
    border-radius:20px;
  }

  .tool-textarea{
    min-height:150px;
  }
}

/* =========================================================
   TOOLS HUB POLISH
   ========================================================= */

.tools-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:24px;
  align-items:start;
}

.tools-hero-box,
.tools-hero-side{
  background:linear-gradient(180deg, rgba(14,22,31,.92), rgba(10,16,24,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
}

.tools-hero-box{
  padding:26px;
}

.tools-hero-side{
  padding:20px;
}

.tools-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.tools-category-card{
  display:block;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:20px;
  box-shadow:0 14px 38px rgba(0,0,0,.20);
  transition:transform .18s ease,border-color .18s ease;
}

.tools-category-card:hover{
  transform:translateY(-2px);
  border-color:rgba(94,196,255,.38);
}

.tools-category-card h3{
  margin:0 0 10px;
}

.tools-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

@media (max-width: 980px){
  .tools-hero-grid,
  .tools-category-grid{
    grid-template-columns:1fr;
  }
}


/* =========================
   PREMIUM TOOL PAGES
   ========================= */

.tool-shell{
  width:min(100%,1240px);
  margin:0 auto;
  padding:0 16px;
}

.tool-hero{
  padding:28px 0 18px;
}

.tool-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:22px;
  align-items:stretch;
}

.tool-panel,
.tool-sidecard,
.tool-info-card,
.tool-output-card,
.tool-related-card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
}

.tool-panel{
  padding:22px;
}

.tool-panel h1{
  margin:0 0 12px;
  font-size:clamp(2rem,4vw,3.15rem);
  line-height:1.04;
  letter-spacing:-.03em;
}

.tool-panel .lead{
  max-width:760px;
  color:var(--muted);
  font-size:1.03rem;
}

.tool-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.tool-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--ink);
  font-size:.86rem;
}

.tool-sidecard{
  padding:18px;
}

.tool-sidecard h3{
  margin:0 0 14px;
  font-size:1rem;
}

.tool-side-list{
  display:grid;
  gap:12px;
}

.tool-side-item{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}

.tool-side-item span{
  display:block;
  font-size:.78rem;
  color:var(--muted2);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.tool-side-item strong{
  display:block;
  font-size:.98rem;
  color:var(--ink);
}

.tool-main{
  padding:12px 0 40px;
}

.tool-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:22px;
  align-items:start;
}

.tool-workspace{
  display:grid;
  gap:18px;
}

.tool-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
  padding:20px;
}

.tool-card h2,
.tool-card h3{
  margin-top:0;
}

.tool-controls{
  display:grid;
  gap:16px;
}

.tool-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.tool-row-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.tool-field{
  display:grid;
  gap:8px;
}

.tool-field label{
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
}

.tool-input,
.tool-select,
.tool-textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(6,10,16,.88);
  color:var(--ink);
  padding:14px 14px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus{
  border-color:rgba(90,160,255,.48);
  box-shadow:0 0 0 4px rgba(90,160,255,.12);
}

.tool-textarea{
  min-height:170px;
  resize:vertical;
}

.tool-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:4px;
}

.tool-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:16px;
  padding:13px 18px;
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.tool-btn:hover{
  transform:translateY(-1px);
}

.tool-btn-primary{
  background:linear-gradient(135deg,#75a7ff,#4b7cff);
  color:#fff;
  box-shadow:0 14px 34px rgba(75,124,255,.28);
}

.tool-btn-secondary{
  background:rgba(255,255,255,.06);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.10);
}

.tool-btn-ghost{
  background:transparent;
  color:var(--muted);
  border:1px dashed rgba(255,255,255,.12);
}

.tool-output{
  min-height:120px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(3,7,12,.9);
  padding:16px;
  color:var(--ink);
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.93rem;
  line-height:1.55;
}

.tool-muted{
  color:var(--muted);
  font-size:.95rem;
}

.tool-sidebar{
  display:grid;
  gap:18px;
}

.tool-mini-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.tool-mini-link{
  display:block;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  color:var(--ink);
}

.tool-mini-link:hover{
  border-color:rgba(255,255,255,.16);
}

.tool-related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.tool-related-card{
  padding:18px;
  text-decoration:none;
  color:inherit;
}

.tool-related-card h3{
  margin:0 0 8px;
  font-size:1.05rem;
}

.tool-related-card p{
  margin:0;
  color:var(--muted);
}

.tool-kicker{
  display:inline-block;
  margin-bottom:10px;
  color:#9ec1ff;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tool-note{
  padding:14px 15px;
  border-radius:16px;
  background:rgba(117,167,255,.08);
  border:1px solid rgba(117,167,255,.16);
  color:var(--muted);
}

@media (max-width: 980px){
  .tool-hero-grid,
  .tool-grid,
  .tool-row-2,
  .tool-row-3,
  .tool-related-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   PREMIUM TOOL SYSTEM
   ========================================================= */

.tool-shell{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}

.tool-hero{
  padding:24px 0 8px;
}

.tool-main{
  padding:8px 0 48px;
}

.tool-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(280px, .75fr);
  gap:22px;
  align-items:stretch;
}

.tool-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(280px, .75fr);
  gap:22px;
  align-items:start;
}

.tool-workspace,
.tool-sidebar{
  display:grid;
  gap:18px;
}

.tool-panel,
.tool-card,
.tool-sidecard{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(17,22,32,.92), rgba(10,14,22,.96));
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  border-radius:22px;
}

.tool-panel{
  padding:26px;
}

.tool-card,
.tool-sidecard{
  padding:22px;
}

.tool-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.tool-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(98,208,255,.08);
  border:1px solid rgba(98,208,255,.16);
  color:#c9f2ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

.tool-kicker{
  display:inline-block;
  margin-bottom:10px;
  color:#8ce0ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tool-panel h1,
.tool-card h2,
.tool-card h3,
.tool-sidecard h3{
  margin:0 0 10px;
}

.tool-panel .lead{
  margin:0;
}

.tool-muted,
.tool-note,
.tool-card p,
.tool-sidecard p{
  color:rgba(230,240,255,.8);
}

.tool-controls,
.tool-stack{
  display:grid;
  gap:16px;
}

.tool-row,
.tool-row-2,
.tool-grid-2,
.tool-action-row,
.tool-side-list,
.tool-mini-list,
.tool-related-grid{
  display:grid;
  gap:14px;
}

.tool-row-2,
.tool-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.tool-related-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.tool-field{
  display:grid;
  gap:8px;
}

.tool-field label,
.tool-label{
  color:#eef6ff;
  font-size:14px;
  font-weight:700;
}

.tool-input,
.tool-textarea,
.tool-select{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#f7fbff;
  padding:14px 15px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.tool-input:focus,
.tool-textarea:focus,
.tool-select:focus{
  border-color:rgba(98,208,255,.55);
  box-shadow:0 0 0 4px rgba(98,208,255,.12);
  background:rgba(255,255,255,.06);
}

.tool-textarea{
  min-height:180px;
  resize:vertical;
}

.tool-output{
  white-space:pre-wrap;
  word-break:break-word;
  min-height:110px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  padding:16px;
  color:#ecf7ff;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px;
  line-height:1.6;
}

.tool-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:16px;
  padding:13px 16px;
  font-weight:800;
  font-size:14px;
  transition:transform .14s ease, opacity .14s ease, box-shadow .14s ease, background .14s ease;
}

.tool-btn:hover{
  transform:translateY(-1px);
}

.tool-btn-primary{
  background:linear-gradient(135deg, #67d4ff, #7bf0d6);
  color:#07111b;
  box-shadow:0 14px 34px rgba(77,205,255,.22);
}

.tool-btn-secondary{
  background:rgba(255,255,255,.08);
  color:#f4fbff;
  border:1px solid rgba(255,255,255,.12);
}

.tool-btn-ghost{
  background:transparent;
  color:#d7eaff;
  border:1px dashed rgba(255,255,255,.18);
}

.tool-mini-link,
.tool-related-card{
  display:block;
  text-decoration:none;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:16px;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}

.tool-mini-link:hover,
.tool-related-card:hover{
  transform:translateY(-2px);
  border-color:rgba(98,208,255,.28);
  background:rgba(255,255,255,.045);
}

.tool-mini-link strong,
.tool-related-card h3{
  color:#f8fbff;
}

.tool-related-card p,
.tool-mini-link .tool-muted{
  margin:6px 0 0;
  color:rgba(230,240,255,.76);
  font-size:14px;
}

.tool-note{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:12px 13px;
}

@media (max-width: 980px){
  .tool-hero-grid,
  .tool-grid,
  .tool-related-grid{
    grid-template-columns:1fr;
  }

  .tool-row-2,
  .tool-grid-2{
    grid-template-columns:1fr;
  }
}

/* =========================
   Premium Tool UI Enhancements
   ========================= */

.tool-utility-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 14px;
}

.tool-utility-btn{
  appearance:none;
  border:1px solid rgba(120,220,255,.18);
  background:linear-gradient(180deg, rgba(18,28,40,.96), rgba(10,16,24,.96));
  color:#eaf8ff;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.tool-utility-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(120,220,255,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}

.tool-utility-btn:active{
  transform:translateY(0);
}

.tool-utility-btn.primary{
  background:linear-gradient(180deg, rgba(31,95,255,.96), rgba(17,66,194,.96));
  border-color:rgba(123,169,255,.34);
}

.tool-utility-btn.success{
  background:linear-gradient(180deg, rgba(25,110,88,.96), rgba(18,84,67,.96));
  border-color:rgba(99,227,181,.26);
}

.tool-utility-btn.warning{
  background:linear-gradient(180deg, rgba(121,74,20,.96), rgba(92,56,14,.96));
  border-color:rgba(255,206,112,.22);
}

.tool-utility-btn.ghost{
  background:rgba(255,255,255,.03);
}

.tool-enhanced-field{
  position:relative;
}

.tool-enhanced-field .tool-textarea,
.tool-enhanced-field .tool-input,
.tool-enhanced-field textarea,
.tool-enhanced-field input[type="text"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.18);
}

.tool-inline-note{
  margin-top:10px;
  font-size:12px;
  line-height:1.55;
  color:rgba(210,236,245,.78);
}

.tool-copy-confirm{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(88,214,162,.18);
  background:rgba(20,94,75,.18);
  color:#ccffef;
  font-size:12px;
  font-weight:700;
}

.tool-faq-item{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(15,24,34,.72), rgba(9,15,22,.72));
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.tool-faq-item + .tool-faq-item{
  margin-top:10px;
}

.tool-faq-item summary{
  cursor:pointer;
  list-style:none;
}

.tool-faq-item summary::-webkit-details-marker{
  display:none;
}

.tool-faq-item summary strong{
  color:#eefbff;
  font-size:15px;
}

.tool-faq-item p{
  margin:10px 0 0;
}

.tool-related-card{
  display:block;
  text-decoration:none;
}

.tool-related-card p{
  color:rgba(220,238,245,.78);
}

.tool-output{
  white-space:pre-wrap;
  word-break:break-word;
}

.tool-empty-state{
  color:rgba(210,230,240,.62);
  font-size:14px;
  line-height:1.6;
}

@media (max-width: 720px){
  .tool-utility-bar{
    gap:8px;
  }

  .tool-utility-btn{
    width:100%;
    justify-content:center;
  }
}

.tool-list{
  margin:0;
  padding-left:18px;
  color:rgba(226,240,246,.88);
  line-height:1.75;
}

.tool-list li + li{
  margin-top:8px;
}

/* =========================
   PREMIUM TOOL SYSTEM
   ========================= */

.tool-shell{
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(10,14,22,.88);
  box-shadow:
    0 18px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding:22px;
}

.tool-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.75fr);
  gap:20px;
  align-items:start;
}

.tool-panel,
.tool-sidepanel{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:
    0 12px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.tool-panel{
  padding:20px;
}

.tool-sidepanel{
  padding:18px;
}

.tool-stack{
  display:grid;
  gap:16px;
}

.tool-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.tool-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.tool-grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.tool-label{
  display:block;
  color:rgba(235,242,255,.92);
  font-weight:700;
  font-size:14px;
  line-height:1.4;
}

.tool-help{
  margin:8px 0 0;
  color:rgba(210,220,240,.7);
  font-size:13px;
  line-height:1.55;
}

.tool-input,
.tool-textarea,
.tool-select{
  width:100%;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.03);
  color:#eef4ff;
  border-radius:16px;
  padding:14px 15px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.tool-input:focus,
.tool-textarea:focus,
.tool-select:focus{
  border-color:rgba(102,207,255,.55);
  box-shadow:
    0 0 0 4px rgba(61,166,255,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
  background:rgba(255,255,255,.045);
}

.tool-textarea{
  min-height:170px;
  resize:vertical;
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.tool-btn-lite{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(95,183,255,.22), rgba(95,183,255,.09)),
    rgba(255,255,255,.03);
  color:#f4f8ff;
  font-weight:800;
  letter-spacing:.01em;
  border-radius:16px;
  padding:12px 16px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.tool-btn-lite:hover{
  transform:translateY(-1px);
  border-color:rgba(102,207,255,.45);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}

.tool-btn-lite.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(255,255,255,.02);
}

.tool-output,
.tool-result-box,
.tool-code-box{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(5,10,18,.7);
  color:#eff5ff;
  border-radius:18px;
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.tool-code-box,
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.tool-result-box.success{
  border-color:rgba(86,214,143,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(86,214,143,.08);
}

.tool-result-box.warning{
  border-color:rgba(255,193,85,.34);
}

.tool-result-box.danger{
  border-color:rgba(255,112,112,.34);
}

.tool-related-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.tool-related-card{
  display:block;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border-radius:18px;
  padding:16px;
  color:#eef4ff;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.tool-related-card:hover{
  transform:translateY(-2px);
  border-color:rgba(102,207,255,.35);
  box-shadow:0 18px 34px rgba(0,0,0,.26);
}

.tool-related-card h3{
  margin:4px 0 8px;
  font-size:17px;
  line-height:1.35;
}

.tool-related-card p{
  margin:0;
  color:rgba(220,231,247,.76);
  font-size:14px;
  line-height:1.58;
}

.tool-kicker{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(128,213,255,.88);
}

.tools-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);
  gap:20px;
}

.tools-hero-box,
.tools-hero-side{
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    rgba(8,12,20,.92);
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.tools-hero-box{
  padding:26px;
}

.tools-hero-side{
  padding:18px;
}

.tool-hero-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:28px;
  background:linear-gradient(180deg, rgba(102,207,255,.22), rgba(102,207,255,.08));
  border:1px solid rgba(102,207,255,.24);
  box-shadow:0 14px 28px rgba(0,0,0,.2);
  margin-bottom:14px;
}

.tool-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tool-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:rgba(235,244,255,.9);
  font-size:13px;
  font-weight:700;
}

.tools-search-row{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  box-shadow:0 14px 32px rgba(0,0,0,.2);
  padding:18px;
}

.tools-category-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.tools-category-card{
  display:block;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  color:#eef4ff;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tools-category-card:hover{
  transform:translateY(-2px);
  border-color:rgba(102,207,255,.35);
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}

.tools-category-card h3{
  margin:0 0 8px;
  font-size:19px;
  line-height:1.35;
}

.tools-category-card p{
  margin:0;
  color:rgba(220,231,247,.76);
  font-size:14px;
  line-height:1.6;
}

.tool-mini-list{
  display:grid;
  gap:10px;
}

.tool-mini-list a{
  display:block;
  text-decoration:none;
  color:#eef4ff;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.tool-mini-list a:hover{
  transform:translateY(-1px);
  border-color:rgba(102,207,255,.34);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

.tool-table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}

.tool-table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

.tool-table th,
.tool-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  vertical-align:top;
}

.tool-table th{
  color:#f3f8ff;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.tool-table td{
  color:rgba(228,236,248,.82);
  font-size:14px;
  line-height:1.55;
}

@media (max-width: 980px){
  .tool-layout,
  .tools-hero-grid{
    grid-template-columns:1fr;
  }

  .tool-related-grid,
  .tools-category-grid,
  .tool-grid-3{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 700px){
  .tool-row,
  .tool-grid-2,
  .tool-grid-3,
  .tool-related-grid,
  .tools-category-grid{
    grid-template-columns:1fr;
  }

  .tool-shell,
  .tool-panel,
  .tool-sidepanel,
  .tools-hero-box,
  .tools-hero-side,
  .tools-search-row{
    border-radius:20px;
  }

  .tool-actions{
    flex-direction:column;
  }

  .tool-btn-lite{
    width:100%;
    justify-content:center;
  }
}

/* =========================
   TOOL UX POLISH HELPERS
   ========================= */

.tool-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}

.tool-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  color:#f4f8ff;
  border-radius:16px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.tool-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}

.tool-btn-primary{
  background:
    linear-gradient(180deg, rgba(95,183,255,.24), rgba(95,183,255,.1)),
    rgba(255,255,255,.03);
  border-color:rgba(102,207,255,.28);
}

.tool-btn-primary:hover{
  border-color:rgba(102,207,255,.5);
}

.tool-btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(255,255,255,.02);
}

.tool-btn-ghost{
  background:rgba(255,255,255,.02);
}

.tool-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    rgba(10,14,22,.88);
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03);
  padding:18px;
}

.tool-workspace{
  display:grid;
  gap:18px;
}

.tool-field{
  display:grid;
  gap:6px;
}

.tool-output{
  white-space:pre-wrap;
  word-break:break-word;
  min-height:90px;
}

.tool-empty-state{
  color:rgba(208,220,239,.65);
}

.tool-inline-note{
  margin-top:14px;
  color:rgba(219,230,247,.74);
  font-size:14px;
  line-height:1.65;
}

.tool-list{
  margin:0;
  padding-left:18px;
  color:rgba(227,236,248,.82);
}

.tool-list li{
  margin:0 0 10px;
  line-height:1.6;
}

.tool-side-list{
  display:grid;
  gap:10px;
}

.tool-mini-link{
  display:block;
  text-decoration:none;
  color:#eef4ff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.tool-mini-link:hover{
  transform:translateY(-1px);
  border-color:rgba(102,207,255,.34);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

.tool-mini-link strong{
  display:block;
  margin-bottom:4px;
}

.tool-muted{
  color:rgba(220,231,247,.7);
  font-size:13px;
  line-height:1.55;
}

/* =========================
   FOOTER NETWORK LINKS
   ========================= */

.footer-network{
  margin-top:14px;
}

.footer-network-title{
  display:block;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(128,213,255,.88);
  margin-bottom:10px;
}

.footer-network-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.footer-network-links a{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:#eef4ff;
  font-size:13px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  padding:8px 12px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.footer-network-links a:hover{
  transform:translateY(-1px);
  border-color:rgba(102,207,255,.34);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

/* ===== MOBILE DRAWER SCROLL FIX ===== */
.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(86vw, 380px);
  max-width:100%;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  z-index:9999;
}

.mobile-drawer nav{
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:max-content;
  padding-bottom:32px;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
}

body.drawer-open{
  overflow:hidden;
}

body.drawer-open .mobile-drawer{
  pointer-events:auto;
}

@media (max-width: 980px){
  .mobile-drawer{
    padding-bottom:max(32px, env(safe-area-inset-bottom));
  }
}
/* ===== END MOBILE DRAWER SCROLL FIX ===== */




/* ===== GLOBAL MOBILE WIDTH + SPACING POLISH ===== */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

@media (max-width: 980px){
  .container{
    width:min(100% - 24px, 1120px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .site-header .container.nav-wrap{
    min-height:64px !important;
    gap:12px !important;
  }

  .nav{
    display:none !important;
  }

  .menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:0 12px;
    border-radius:12px;
  }

  .hero,
  .section,
  .section-tight,
  main.section{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .card,
  .tools-category-card,
  .tool-panel,
  .tool-sidepanel,
  .hero-panel,
  .tools-hero-box,
  .tools-hero-side,
  .home-card-premium,
  .home-offer-card,
  .home-big-panel{
    border-radius:18px !important;
  }

  .grid,
  .grid.grid-2,
  .grid.grid-3,
  .home-grid-3,
  .tool-grid-2,
  .tool-related-grid,
  .tools-category-grid{
    grid-template-columns:1fr !important;
  }

  .tool-layout,
  .hero-grid,
  .tools-hero-grid{
    grid-template-columns:1fr !important;
  }

  .tool-action-row,
  .tool-actions,
  .inline-cta-row,
  .home-hero-actions{
    flex-wrap:wrap !important;
  }

  .tool-btn,
  .tool-btn-lite,
  .btn{
    width:100%;
    justify-content:center;
  }

  .mobile-drawer{
    width:min(82vw, 340px) !important;
  }

  .footer-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .footer-bottom{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
}

@media (max-width: 640px){
  .container{
    width:min(100% - 18px, 1120px) !important;
  }

  h1{
    font-size:clamp(1.9rem, 7vw, 2.5rem) !important;
    line-height:1.08 !important;
  }

  h2{
    font-size:clamp(1.3rem, 5.2vw, 1.8rem) !important;
  }

  .lead{
    font-size:1rem !important;
  }

  .site-header{
    backdrop-filter:blur(14px);
  }

  .brand-logo{
    max-height:34px !important;
    width:auto !important;
  }

  .mobile-drawer{
  }

  .tool-textarea{
    min-height:180px;
  }
}
/* ===== END GLOBAL MOBILE WIDTH + SPACING POLISH ===== */




/* ===== FINAL MOBILE OVERFLOW + SHELL NORMALIZATION FIX ===== */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  word-wrap:break-word;
  overflow-wrap:break-word;
}

main, section, .section, .section-tight, .hero, .card, .tool-shell, .tool-panel, .tool-sidepanel, .hero-panel, .home-big-panel{
  max-width:100%;
}

img, svg, video, canvas, iframe{
  max-width:100%;
  height:auto;
}

pre, code, textarea, input, table{
  max-width:100%;
}

@media (max-width: 980px){
  .container{
    width:min(100% - 20px, 1120px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .nav{
    display:none !important;
  }

  .menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 12px !important;
    border-radius:12px !important;
    flex:0 0 auto;
  }

  .site-header .container.nav-wrap{
    min-height:64px !important;
    gap:10px !important;
    align-items:center !important;
  }

  .brand{
    min-width:0 !important;
  }

  .brand-logo{
    max-width:100% !important;
    height:auto !important;
  }

  .grid,
  .grid-2,
  .grid-3,
  .home-grid-3,
  .tool-grid-2,
  .tool-related-grid,
  .tools-category-grid,
  .tool-layout,
  .hero-grid,
  .tools-hero-grid,
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .tool-actions,
  .tool-action-row,
  .inline-cta-row,
  .home-hero-actions{
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .btn,
  .tool-btn,
  .tool-btn-lite{
    width:100%;
    justify-content:center;
  }

  .mobile-drawer{
    width:min(80vw, 320px) !important;
    max-width:100% !important;
  }

  /* kill wide fixed-min-width elements on mobile */
  .card,
  .tool-card,
  .hero-panel,
  .tools-hero-side,
  .tools-hero-box,
  .tool-panel,
  .tool-sidepanel,
  .home-card-premium,
  .home-offer-card,
  .home-big-panel,
  .footer-network,
  .footer-network-links,
  .tool-table-wrap,
  table{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  textarea,
  input,
  select{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
}

@media (max-width: 640px){
  .container{
    width:min(100% - 16px, 1120px) !important;
  }

  h1{
    font-size:clamp(1.85rem, 7vw, 2.5rem) !important;
    line-height:1.08 !important;
  }

  h2{
    font-size:clamp(1.28rem, 5.2vw, 1.8rem) !important;
  }

  .lead{
    font-size:1rem !important;
  }

  .mobile-drawer{
    width:min(78vw, 300px) !important;
  }
}
/* ===== END FINAL MOBILE OVERFLOW + SHELL NORMALIZATION FIX ===== */




/* ===== PREMIUM UTILITY + POLICY PAGE POLISH ===== */
.utility-shell{
  max-width:920px;
  margin:0 auto;
}

.utility-shell .card{
  padding:28px;
}

.utility-shell .eyebrow{
  margin-bottom:10px;
}

.utility-shell h1{
  margin-bottom:12px;
}

.utility-shell .utility-lead{
  font-size:1.04rem;
  line-height:1.75;
  color:var(--muted, #aab4c3);
  max-width:760px;
  margin:0 auto 22px auto;
}

.utility-shell .utility-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:22px;
}

.utility-shell .utility-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

.utility-shell .utility-grid .card{
  text-align:left;
  height:100%;
}

.utility-shell .policy-copy{
  max-width:840px;
  margin:0 auto;
}

.utility-shell .policy-copy p,
.utility-shell .policy-copy li{
  line-height:1.8;
}

.utility-shell .policy-copy h2,
.utility-shell .policy-copy h3{
  margin-top:24px;
}

.utility-shell .policy-copy ul,
.utility-shell .policy-copy ol{
  padding-left:20px;
}

.utility-shell .notice-line{
  margin-top:14px;
  font-size:.98rem;
}

@media (max-width: 980px){
  .utility-shell .utility-grid{
    grid-template-columns:1fr;
  }

  .utility-shell .card{
    padding:22px;
  }
}

@media (max-width: 640px){
  .utility-shell .card{
    padding:18px;
  }

  .utility-shell .utility-actions{
    flex-direction:column;
  }
}
/* ===== END PREMIUM UTILITY + POLICY PAGE POLISH ===== */


/* ===== LIGHTER PREMIUM UI + TRUST POLISH ===== */
:root{
  --bg:#eef3f8;
  --bg-soft:#f7fafc;
  --surface:#ffffff;
  --surface-2:#f4f8fb;
  --surface-3:#edf4f8;
  --text:#102131;
  --text-soft:#4f6476;
  --line:#d8e3ec;
  --line-strong:#c4d3df;
  --brand:#145da0;
  --brand-2:#2a7cc7;
  --brand-soft:#e7f1fb;
  --success-soft:#ecf9f0;
  --shadow:0 14px 40px rgba(23,43,77,.08);
  --shadow-soft:0 8px 24px rgba(23,43,77,.06);
}

html, body{
  background:linear-gradient(180deg,#f5f8fb 0%, #eef3f8 100%) !important;
  color:var(--text) !important;
}

body{
  overflow-x:hidden;
}

main{
  position:relative;
}

p, li{
  color:var(--text-soft);
}

h1, h2, h3, h4, h5, h6,
strong,
.footer-col-title,
.home-offer-price,
.tool-label,
.badge,
.kicker,
.eyebrow,
.home-kicker{
  color:var(--text) !important;
}

a{
  color:var(--brand);
}

a:hover{
  color:var(--brand-2);
}

.site-header{
  background:rgba(255,255,255,.82) !important;
  border-bottom:1px solid rgba(196,211,223,.8) !important;
  box-shadow:0 6px 18px rgba(23,43,77,.04);
  backdrop-filter:blur(14px);
}

.nav a,
.mobile-drawer nav a,
.footer-links a,
.footer-utility a,
.home-mini-links a{
  color:var(--text-soft) !important;
}

.nav a:hover,
.mobile-drawer nav a:hover,
.footer-links a:hover,
.footer-utility a:hover,
.home-mini-links a:hover{
  color:var(--brand) !important;
}

.menu-toggle,
.drawer-close{
  background:#fff !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-soft);
}

.mobile-drawer{
  background:linear-gradient(180deg,#ffffff 0%, #f6fafc 100%) !important;
  color:var(--text) !important;
  border-left:1px solid var(--line) !important;
  box-shadow:-18px 0 40px rgba(23,43,77,.10);
}

.drawer-backdrop{
  background:rgba(16,33,49,.24) !important;
}

.card,
.home-card-premium,
.home-offer-card,
.home-big-panel,
.tool-panel,
.tool-sidepanel,
.tool-shell,
.hero-panel,
.tools-category-card,
.tools-hero-box,
.tools-hero-side{
  background:linear-gradient(180deg,#ffffff 0%, #f8fbfd 100%) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  color:var(--text) !important;
}

.tool-panel,
.tool-sidepanel,
.tool-shell{
  border-radius:22px;
}

.hero,
.home-hero-premium,
.section,
.section-tight,
.home-section{
  background:transparent !important;
}

.home-hero-premium{
  padding-top:clamp(30px, 5vw, 54px);
  padding-bottom:clamp(24px, 4vw, 44px);
}

.home-hero-copy,
.home-hero-panel{
  color:var(--text) !important;
}

.home-chip,
.tool-chip,
.badge{
  background:var(--brand-soft) !important;
  color:var(--brand) !important;
  border:1px solid #cfe1f5 !important;
}

.muted,
.lead,
.tool-help,
.footer-copy p,
.home-card-premium p,
.home-offer-card p,
.home-big-panel p{
  color:var(--text-soft) !important;
}

.btn{
  background:linear-gradient(180deg,#1d6db8 0%, #145da0 100%) !important;
  color:#fff !important;
  border:1px solid #14538e !important;
  box-shadow:0 12px 28px rgba(20,93,160,.18) !important;
}

.btn:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

.btn.secondary,
.tool-btn-lite{
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:var(--shadow-soft) !important;
}

.btn.secondary:hover,
.tool-btn-lite:hover{
  border-color:#b4c8d7 !important;
  color:var(--brand) !important;
}

input,
textarea,
select,
.tool-input,
.tool-textarea{
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(23,43,77,.03);
}

input::placeholder,
textarea::placeholder{
  color:#7f93a5 !important;
}

input:focus,
textarea:focus,
select:focus,
.tool-input:focus,
.tool-textarea:focus{
  outline:none !important;
  border-color:#7eb2e0 !important;
  box-shadow:0 0 0 4px rgba(42,124,199,.12) !important;
}

.home-stat,
.hero-stat{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}

.footer-network,
.footer-bottom,
.site-footer{
  background:transparent !important;
}

.site-footer{
  border-top:1px solid var(--line) !important;
  margin-top:36px;
}

.footer-network-links a,
.footer-credit a{
  color:var(--brand) !important;
}

.footer-credit,
.footer-utility,
.footer-copy p{
  color:var(--text-soft) !important;
}

table,
.table-row{
  border-color:var(--line) !important;
}

.table-row{
  background:#fff !important;
}

pre,
code{
  background:#f3f7fa !important;
  color:#15324a !important;
}

hr{
  border-color:var(--line) !important;
}

.home-trust-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.home-trust-item{
  background:linear-gradient(180deg,#ffffff 0%, #f5fafc 100%);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  padding:18px 18px;
}

.home-trust-item strong{
  display:block;
  margin-bottom:6px;
  font-size:.98rem;
}

.home-trust-item span{
  color:var(--text-soft);
  font-size:.95rem;
  line-height:1.55;
}

@media (max-width: 900px){
  .home-trust-strip{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  html, body{
    background:#f3f7fb !important;
  }

  .site-header{
    background:rgba(255,255,255,.9) !important;
  }

  .home-card-premium,
  .home-offer-card,
  .card,
  .home-big-panel,
  .tool-panel,
  .tool-sidepanel{
    border-radius:18px !important;
  }

  .btn,
  .btn.secondary,
  .tool-btn-lite{
    width:100%;
    justify-content:center;
  }

  .home-hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}
/* ===== END LIGHTER PREMIUM UI + TRUST POLISH ===== */


/* ===== HOMEPAGE READABILITY + CONVERSION REFINEMENT ===== */

/* Global readability */
body{
  font-size:16px !important;
  line-height:1.6 !important;
}

p, li{
  font-size:1rem !important;
  line-height:1.68 !important;
}

.muted{
  font-size:1rem !important;
  line-height:1.68 !important;
}

/* Header */
.site-header{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.brand-logo{
  max-height:40px !important;
  width:auto !important;
}

.nav a{
  font-size:.95rem !important;
  font-weight:600 !important;
}

/* Hero */
.home-hero-premium{
  padding-top:52px !important;
  padding-bottom:34px !important;
}

.home-hero-copy h1{
  font-size:clamp(2.6rem, 5vw, 4.3rem) !important;
  line-height:.96 !important;
  max-width:760px !important;
  letter-spacing:-0.03em !important;
}

.home-hero-copy .lead{
  font-size:1.12rem !important;
  line-height:1.75 !important;
  max-width:760px !important;
  margin-top:18px !important;
}

.home-hero-actions{
  margin-top:24px !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}

/* Buttons */
.btn,
.btn.secondary,
.tool-btn-lite{
  min-height:48px !important;
  padding:13px 18px !important;
  border-radius:14px !important;
  font-size:.98rem !important;
  font-weight:700 !important;
}

/* Cards and panels */
.card,
.home-card-premium,
.home-offer-card,
.home-big-panel,
.tool-panel,
.tool-sidepanel,
.tools-category-card{
  padding:24px !important;
  border-radius:22px !important;
}

.home-card-premium h3,
.home-offer-card h3{
  font-size:1.6rem !important;
  line-height:1.15 !important;
  margin-bottom:10px !important;
}

.home-big-panel h2{
  font-size:clamp(2rem, 4vw, 3rem) !important;
  line-height:1.08 !important;
  max-width:840px !important;
}

.home-offer-price{
  font-size:1.2rem !important;
  margin:10px 0 14px !important;
}

/* Grid breathing */
.home-grid-3{
  gap:22px !important;
}

.home-section{
  padding-top:18px !important;
  padding-bottom:18px !important;
}

/* Trust strip */
.home-trust-strip{
  margin-top:24px !important;
  gap:18px !important;
}

.home-trust-item{
  padding:20px 20px !important;
  border-radius:18px !important;
}

.home-trust-item strong{
  font-size:1rem !important;
  margin-bottom:8px !important;
}

.home-trust-item span{
  font-size:.98rem !important;
  line-height:1.65 !important;
}

/* Footer */
.site-footer{
  padding-top:24px !important;
  padding-bottom:26px !important;
}

.footer-col-title{
  font-size:1rem !important;
  font-weight:700 !important;
}

.footer-links a,
.footer-utility a,
.footer-credit,
.footer-copy p,
.footer-network-links a{
  font-size:.96rem !important;
  line-height:1.7 !important;
}

.footer-network-title{
  font-size:.9rem !important;
  letter-spacing:.08em !important;
}

/* Mobile */
@media (max-width: 900px){
  .home-hero-copy h1{
    font-size:clamp(2.2rem, 9vw, 3.3rem) !important;
    max-width:none !important;
  }

  .home-hero-copy .lead{
    font-size:1.04rem !important;
    max-width:none !important;
  }

  .home-big-panel h2{
    font-size:clamp(1.65rem, 7vw, 2.3rem) !important;
  }
}

@media (max-width: 640px){
  body{
    font-size:16px !important;
  }

  .brand-logo{
    max-height:34px !important;
  }

  .nav{
    display:none !important;
  }

  .home-hero-premium{
    padding-top:34px !important;
    padding-bottom:20px !important;
  }

  .home-card-premium,
  .home-offer-card,
  .card,
  .home-big-panel{
    padding:20px !important;
    border-radius:18px !important;
  }

  .home-card-premium h3,
  .home-offer-card h3{
    font-size:1.34rem !important;
  }

  .btn,
  .btn.secondary{
    width:100% !important;
  }

  .home-grid-3{
    gap:16px !important;
  }

  .footer-links a,
  .footer-utility a,
  .footer-credit,
  .footer-copy p,
  .footer-network-links a{
    font-size:.94rem !important;
  }
}
/* ===== END HOMEPAGE READABILITY + CONVERSION REFINEMENT ===== */


/* ===== FINAL HOMEPAGE VISUAL HIERARCHY PASS ===== */

/* Header presence */
.site-header{
  padding-top:12px !important;
  padding-bottom:12px !important;
}

.brand-logo{
  max-height:46px !important;
}

.nav{
  gap:18px !important;
}

.nav a{
  font-size:.98rem !important;
  font-weight:700 !important;
}

/* Hero balance */
.home-hero-inner{
  align-items:center !important;
  gap:34px !important;
}

.home-hero-copy{
  max-width:820px !important;
}

.home-hero-copy h1{
  font-size:clamp(2.8rem, 5.2vw, 4.6rem) !important;
  line-height:.95 !important;
  margin-bottom:14px !important;
}

.home-hero-copy .lead{
  font-size:1.14rem !important;
  line-height:1.78 !important;
  max-width:760px !important;
}

.home-hero-panel{
  padding:22px !important;
  border-radius:22px !important;
  min-width:280px;
}

.home-stat{
  padding:14px 12px !important;
}

/* Buttons stronger */
.home-hero-actions .btn{
  min-height:50px !important;
  padding:14px 20px !important;
  font-size:1rem !important;
}

/* Global cards */
.home-card-premium,
.home-offer-card,
.home-big-panel,
.card{
  border-radius:24px !important;
}

.home-card-premium h3,
.home-offer-card h3{
  font-size:1.72rem !important;
  line-height:1.12 !important;
}

.home-card-premium p,
.home-offer-card p,
.home-big-panel p,
.card p{
  font-size:1.02rem !important;
  line-height:1.72 !important;
}

/* Better section rhythm */
.home-section{
  padding-top:22px !important;
  padding-bottom:22px !important;
}

.home-big-panel{
  padding:30px !important;
}

.home-big-panel h2{
  font-size:clamp(2.1rem, 4.2vw, 3.2rem) !important;
  line-height:1.06 !important;
  margin-bottom:12px !important;
}

/* Emphasize choose-your-path block */
.home-big-panel .home-grid-3 .home-card-premium{
  background:linear-gradient(180deg,#ffffff 0%, #f7fbfe 100%) !important;
}

/* Footer polish */
.site-footer{
  padding-top:34px !important;
  padding-bottom:30px !important;
}

.footer-grid{
  gap:34px !important;
}

.footer-copy p,
.footer-links a,
.footer-network-links a,
.footer-utility a,
.footer-credit{
  font-size:.98rem !important;
  line-height:1.72 !important;
}

.footer-network{
  margin-top:10px !important;
}

.footer-network-links{
  gap:10px 14px !important;
}

/* Make the homepage trust strip feel more premium */
.home-trust-item{
  padding:22px !important;
  border-radius:20px !important;
}

.home-trust-item strong{
  font-size:1.02rem !important;
}

.home-trust-item span{
  font-size:1rem !important;
  line-height:1.7 !important;
}

/* Mobile */
@media (max-width: 900px){
  .home-hero-inner{
    gap:22px !important;
  }

  .home-hero-copy h1{
    font-size:clamp(2.25rem, 9vw, 3.5rem) !important;
  }

  .home-card-premium h3,
  .home-offer-card h3{
    font-size:1.45rem !important;
  }

  .home-big-panel{
    padding:24px !important;
  }
}

@media (max-width: 640px){
  .site-header{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .brand-logo{
    max-height:38px !important;
  }

  .home-hero-copy h1{
    font-size:clamp(2.15rem, 10vw, 3rem) !important;
    line-height:.98 !important;
  }

  .home-hero-copy .lead{
    font-size:1.05rem !important;
    line-height:1.72 !important;
  }

  .home-hero-panel{
    padding:18px !important;
    min-width:0 !important;
  }

  .home-card-premium,
  .home-offer-card,
  .card,
  .home-big-panel{
    border-radius:18px !important;
  }
}
/* ===== END FINAL HOMEPAGE VISUAL HIERARCHY PASS ===== */

/* =========================
   FOOTER NETWORK SECTION
   ========================= */

.footer-network{
  margin-top:4px;
}

.footer-network-title{
  display:block;
  font-size:13px;
  color:#a8b8c7;
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.footer-network-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-network-links a{
  display:block;
  color:#7fd3ff;
  text-decoration:none;
  font-size:14px;
  transition:opacity .18s ease;
}

.footer-network-links a:hover{
  opacity:.82;
}

/* =========================
   HOME TRUST STRIP
   ========================= */

.home-trust-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:40px;
  padding:0 16px;
  position:relative;
  z-index:1;
}

.home-trust-item{
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.home-trust-item strong{
  display:block;
  margin-bottom:8px;
  color:#eef4ff;
  font-size:15px;
}

.home-trust-item span{
  color:#9fb0cc;
  font-size:14px;
  line-height:1.65;
}

@media (max-width: 800px){
  .home-trust-strip{
    grid-template-columns:1fr;
  }
}

/* =========================
   UTILITY PAGES
   ========================= */

.utility-shell{
  max-width:900px;
  margin:0 auto;
}

.utility-lead{
  font-size:18px;
  color:var(--muted);
  max-width:720px;
  margin:0 0 24px;
}

.utility-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
  justify-content:center;
}

.policy-copy p{
  line-height:1.8;
  margin-bottom:14px;
}

.notice-line{
  font-size:14px;
  line-height:1.65;
}