:root{
  --fg:#eaf1ff;
  --muted:#a9b1c3;
  --brand:#6ee7ff;
  --brand-2:#7c4dff;

  --x1:65%; --y1:10%; --x2:35%; --y2:90%;
  --bg1a: rgba(124,77,255,.35);
  --bg2a: rgba(110,231,255,.28);

  --panel-border:#1d2332;
  --panel-soft:#171d2a;

  --radius-xxl:18px;
  --radius-xl:16px;
  --radius-lg:14px;
  --radius-md:10px;
}

*{box-sizing:border-box}
html,body{height:100%}

body.docs-root{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  overflow-x:hidden;
  background:#0a0b10;
  position:relative;
}

/* Noise overlay like getthetools.html */
body.docs-root::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.22;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="400" height="400" filter="url(%23g)" opacity="0.06"/></svg>');
  background-size:400px 400px;
  mix-blend-mode:overlay;
}

/* Animated glow background container */
#bg{
  position:fixed; inset:-10vmax;
  z-index:-1;
  pointer-events:none;
  will-change:transform,background;
  filter:saturate(120%);
  background:
    radial-gradient(1000px 700px at var(--x1) var(--y1), var(--bg1a), transparent 55%),
    radial-gradient(820px 520px at var(--x2) var(--y2), var(--bg2a), transparent 55%),
    linear-gradient(180deg,#0a0b10,#0e1320 42%,#0a0d15);
}

/* Shared width container */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:18px 20px;
}

/* Header mirrors getthetools */
.docs-header{
  position:sticky;
  top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(to bottom,rgba(10,12,18,.70),rgba(10,12,18,.06));
  border-bottom:1px solid #151a24;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--fg);
}
.brand img{
  width:32px; height:32px;
  border-radius:8px;
}
.brand span{
  font-weight:800;
  letter-spacing:.4px;
}
.brand-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-chip{
  display:inline-block;
  padding:4px 10px;
  border:1px solid #223158;
  border-radius:999px;
  background:#12182a;
  font-size:11px;
  color:#a9c7ff;
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:start;
  padding:56px 0 28px;
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr; gap:22px}
}

h1{
  font-size:clamp(32px,5vw,56px);
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing:-.5px;
}

.sub{
  font-size:clamp(16px,2.2vw,20px);
  color:var(--muted);
  margin:0 0 24px;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 8px;
}

.btn{
  --pad:14px 18px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:var(--pad);
  border-radius:14px;
  border:1px solid #1b2130;
  background:linear-gradient(to bottom right,#151928,#0f1320);
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(110,231,255,.18);
}
.btn.primary{
  background:linear-gradient(180deg,#1a2540,#0e1834);
  border-color:#223158;
}
.btn.ghost{
  background:transparent;
  border-color:#1d2332;
}

.note{
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
}

/* Hero aside card */
.hero-aside{display:flex}
.hero-card{
  width:100%;
  background:linear-gradient(180deg,rgba(15,19,32,.86),rgba(12,15,25,.86));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);
  padding:18px;
}
.hero-card strong{font-size:16px}
.hero-steps{
  margin:10px 0 0;
  padding-left:18px;
  line-height:1.6;
  color:var(--muted);
  font-size:14px;
}

/* Panels exactly like your patterns */
.panel{
  margin:12px 0 22px;
  background:linear-gradient(180deg,rgba(13,17,27,.86),rgba(10,13,20,.86));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--panel-soft);
}
.panel-body{
  padding:16px;
  color:var(--muted);
  font-size:14px;
}

/* Badges from your page */
.badge{
  display:inline-block;
  padding:4px 8px;
  border:1px solid #223158;
  border-radius:999px;
  background:#12182a;
  font-size:12px;
  color:#a9c7ff;
  margin-left:8px;
}

/* Search styled to match */
.docs-search{
  min-width:220px;
  max-width:360px;
  width:40%;
  background:linear-gradient(180deg,rgba(15,19,32,.86),rgba(12,15,25,.86));
  border:1px solid var(--panel-border);
  color:var(--fg);
  padding:10px 12px;
  border-radius:var(--radius-md);
  outline:none;
}

/* Feature grid + cards */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
@media (max-width:980px){
  .feature-grid{grid-template-columns:1fr}
}

.feature-card{
  background:linear-gradient(180deg,rgba(15,19,32,.86),rgba(12,15,25,.86));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-xl);
  padding:18px;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:16px;
}
@media (max-width:700px){
  .feature-card{grid-template-columns:1fr}
}

.feature-text h3{
  margin:6px 0 8px;
  font-size:18px;
  color:var(--fg);
}
.feature-text p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.feature-text ul{
  margin:10px 0 0;
  padding-left:18px;
  line-height:1.5;
}
.feature-text li{color:var(--muted); font-size:14px}

.feature-media{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-lg);
  border:1px solid var(--panel-border);
  background:linear-gradient(180deg,rgba(12,15,25,.86),rgba(10,13,20,.86));
  padding:10px;
}
.feature-media img{
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 0 25px rgba(110,231,255,.18);
}

/* FAQ style */
.docs-faq{
  display:grid;
  gap:10px;
}
.faq-item{
  background:linear-gradient(180deg,rgba(15,19,32,.86),rgba(12,15,25,.86));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  padding:10px 12px;
}
.faq-item summary{
  cursor:pointer;
  font-size:14px;
  color:var(--fg);
}
.faq-body{
  color:var(--muted);
  font-size:14px;
  padding-top:8px;
}

/* Footer */
.docs-footer{
  padding:24px 20px 40px;
  color:var(--muted);
  text-align:center;
  font-size:13px;
}

/* Empty states */
.docs-empty{
  color:var(--muted);
  font-size:14px;
  margin:0;
}

/* PRO badge styling */
.feature-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content: flex-start;
}

.pro-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  border:1px solid rgba(110,231,255,.45);
  background: rgba(110,231,255,.12);
  color: var(--fg);
}

/* Optional: subtle pro accent */
.feature-card.is-pro{
  border-color: rgba(110,231,255,.22);
  box-shadow: 0 0 0 1px rgba(110,231,255,.06) inset;
}

#media-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

#media-modal.is-open{
  display: block;
}

.media-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}

.media-modal-card{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 92vw);
  max-height: 86vh;
  background: linear-gradient(180deg, rgba(15,19,32,.96), rgba(10,13,20,.96));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.media-modal-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--panel-soft);
}

.media-modal-title{
  font-weight: 700;
  font-size: 14px;
}

.media-modal-close{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.media-modal-body{
  padding: 16px;
  overflow: auto;
}

.media-modal-img{
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.feature-card{
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.feature-card:hover{
  transform: translateY(-1px);
  border-color: rgba(110,231,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Optional: subtle hint */
.feature-card::after{
  content: "Click to preview";
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 10px;
  color: rgba(169,177,195,.6);
  opacity: 0;
  transition: opacity .12s ease;
}
.feature-card:hover::after{
  opacity: 1;
}

/* Ensure positioning works for ::after */
.feature-card{
  position: relative;
}
/* Overview sugar */
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 8px;
  border-radius: 999px;
}

.mini-badge {
  display: inline-block;
  font-size: 11px;
  margin: 2px 0 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(110,168,254,0.12);
  border: 1px solid rgba(110,168,254,0.35);
}

.link-cta {
  text-decoration: none;
  color: var(--fg);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.link-cta:hover { border-color: rgba(110,168,254,0.5); }