/* DankProxies public site — dark, red accent, matches the brand mark. */
:root {
  --bg: #0b0b0d;
  --panel: #141418;
  --panel-2: #1b1b21;
  --line: #2a2a32;
  --text: #ececf0;
  --muted: #9b9ba6;
  --dim: #6f6f7a;
  --accent: #e01e26;
  --accent-2: #ff3b43;
  --ok: #3fbf5a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.center { text-align: center; }
.center-sub { margin-left: auto; margin-right: auto; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,11,13,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header .wrap { display: flex; align-items: center; gap: 1.4rem; min-height: 68px; flex-wrap: wrap; }
.logo-link { display: inline-flex; align-items: center; }
.logo-img { height: 46px; width: auto; display: block; }
header nav { display: flex; gap: 1.1rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
header nav a { color: var(--muted); font-size: .95rem; }
header nav a:hover { color: var(--text); text-decoration: none; }
.nav-cta { color: #fff !important; padding: .5rem 1.1rem; font-size: .92rem; }

/* ---------- hero ---------- */
/* Hero art sits behind the copy, under a scrim. Layer order matters: the
   linear-gradient is listed first so it paints ON TOP of the image, and it is
   opaque enough on the left (where the h1 and lead sit) to hold contrast, then
   thins out to the right so the artwork reads behind the dashboard mock.
   The radial red glow and the base colour stay underneath, which is also the
   fallback if the WebP cannot be decoded. */
.hero {
  padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--line);
  background:
    linear-gradient(100deg,
      rgba(11,11,13,.97) 0%, rgba(11,11,13,.93) 34%,
      rgba(11,11,13,.86) 52%, rgba(11,11,13,.55) 100%),
    url("/logo-hero.webp") center right / cover no-repeat,
    radial-gradient(900px 420px at 20% -10%, rgba(224,30,38,.18), transparent 70%),
    var(--bg);
}
@media (max-width: 860px) {
  /* Single column below 860px, so the copy runs the full width and there is
     nowhere for the art to sit without fighting it. */
  .hero {
    background:
      linear-gradient(180deg, rgba(11,11,13,.93), rgba(11,11,13,.97)),
      url("/logo-hero.webp") center / cover no-repeat,
      radial-gradient(900px 420px at 20% -10%, rgba(224,30,38,.18), transparent 70%),
      var(--bg);
  }
}
.hero-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.05fr .95fr; align-items: center; }
.eyebrow {
  display: inline-block; color: var(--accent-2); font-size: .78rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: .9rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.1;
  margin: 0 0 1.1rem; letter-spacing: -1px;
}
.hero h1 span { color: var(--accent); display: block; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 540px; margin: 0 0 1.7rem; }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.cta-row.center { justify-content: center; }
.micro { color: var(--dim); font-size: .88rem; margin-top: 1rem; }

.btn {
  display: inline-block; background: var(--accent); color: #fff; font-weight: 600;
  padding: .72rem 1.5rem; border-radius: 9px; border: 1px solid var(--accent);
  font-size: .97rem; cursor: pointer;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--muted); background: var(--panel); }
.btn.lg { padding: .88rem 1.9rem; font-size: 1.02rem; }
.btn.sm { padding: .4rem .85rem; font-size: .85rem; }

/* hero usage panel */
.hero-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem 1.3rem; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.hp-head { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.hp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.hp-title { margin-left: auto; color: var(--dim); font-size: .8rem; }
.hp-stats { display: flex; gap: 1.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hp-stats > div { display: flex; flex-direction: column; }
.hp-label { color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .7px; }
.hp-stats strong { font-size: 1.35rem; letter-spacing: -.5px; }
.hp-chart { width: 100%; height: 100px; display: block; }
.hp-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.hp-bars rect { fill: var(--accent); opacity: .85; rx: 2; }
.hp-meter {
  height: 8px; background: #0e0e12; border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden; margin: 1rem 0 .5rem;
}
.hp-meter span { display: block; height: 100%; background: var(--ok); }
.hp-foot { display: flex; justify-content: space-between; color: var(--dim); font-size: .8rem; }

/* ---------- sections ---------- */
section { padding: 3.8rem 0; border-bottom: 1px solid var(--line); }
section h2 { font-size: 1.85rem; margin: 0 0 .6rem; letter-spacing: -.5px; }
section > .wrap > p.sub { color: var(--muted); margin: 0 0 2rem; max-width: 640px; }
.sub-head { margin: 2.6rem 0 1rem; font-size: 1.15rem; }

.grid { display: grid; gap: 1.1rem; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.4rem;
}
.card h3 { margin: 0 0 .55rem; font-size: 1.08rem; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }
.card code {
  background: #0e0e12; border: 1px solid var(--line); padding: .05rem .35rem;
  border-radius: 4px; font-size: .88em;
}

/* steps */
.steps .card { position: relative; padding-top: 2.6rem; }
.step-n {
  position: absolute; top: 1.1rem; left: 1.4rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(224,30,38,.15); color: var(--accent-2);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}

/* pricing */
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(224,30,38,.3); }
.tag {
  display: inline-block; background: rgba(224,30,38,.15); color: var(--accent-2);
  font-size: .7rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 99px; margin-bottom: .7rem; align-self: flex-start;
}
.price { font-size: 2.3rem; font-weight: 800; margin: .3rem 0 0; letter-spacing: -1.5px; }
.price small { font-size: .92rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.per-gb { color: var(--muted); font-size: .9rem; margin: .15rem 0 1.1rem; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.price-card ul li { padding: .3rem 0; color: var(--muted); font-size: .94rem; }
.price-card ul li::before { content: "✓"; color: var(--ok); margin-right: .55rem; font-weight: 700; }
.price-card .btn { margin-top: auto; text-align: center; }

/* tables */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; }
td { color: var(--muted); }
td strong { color: var(--text); }

.notice {
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 1rem 1.2rem; margin: 1.8rem 0 0;
}
.notice p { margin: 0; color: var(--muted); font-size: .95rem; }

/* legal pages */
.legal { padding: 3rem 0 4rem; max-width: 780px; }
.legal h1 { font-size: 2rem; margin: 0 0 .3rem; }
.legal .updated { color: var(--muted); font-size: .9rem; margin: 0 0 2.2rem; }
.legal h2 { font-size: 1.2rem; margin: 2.2rem 0 .6rem; }
.legal p, .legal li { color: #d3d3da; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .35rem 0; }

/* footer */
footer { padding: 3rem 0 3.5rem; color: var(--muted); font-size: .93rem; }
footer .cols { display: flex; gap: 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
footer h4 { color: var(--text); font-size: .85rem; text-transform: uppercase;
  letter-spacing: .7px; margin: 0 0 .8rem; }
footer a { display: block; color: var(--muted); padding: .2rem 0; }
footer a:hover { color: var(--text); }
.foot-logo { height: 32px; }
footer .bottom { border-top: 1px solid var(--line); padding-top: 1.5rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { order: -1; }
}
@media (max-width: 640px) {
  header .wrap { padding-top: .6rem; padding-bottom: .6rem; }
  header nav { width: 100%; margin-left: 0; gap: .9rem; }
  .hero { padding: 2.5rem 0; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }
}