/* ==========================================================================
   Depth2Beam marketing site — shared stylesheet
   Visual language matches the Depth2Beam console itself: dark "mission
   console" surface, cyan/teal primary accent, orange secondary accent,
   tracked-out uppercase system labels.
   ========================================================================== */

:root{
  --bg:            #060a0f;
  --bg-alt:        #0a1017;
  --panel:         #0d151d;
  --panel-2:       #0f1922;
  --line:          rgba(94, 234, 212, 0.18);
  --line-strong:   rgba(94, 234, 212, 0.38);
  --cyan:          #34e2d0;
  --cyan-soft:     #7ff2e6;
  --orange:        #f5a524;
  --green:         #3ddc84;
  --text:          #e9f4f3;
  --text-dim:      #9fb3b3;
  --text-faint:    #6c8080;
  --radius:        14px;
  --maxw:          1180px;
  --mono: "JetBrains Mono", "SF Mono", "Consolas", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(52,226,208,0.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 10%, rgba(245,165,36,0.07), transparent 60%),
    var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}

h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.04}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15}
h3{font-size:1.25rem}
p{color:var(--text-dim);margin:0 0 1em}
.lede{font-size:1.15rem;color:var(--text-dim);max-width:62ch}

.accent{color:var(--cyan)}
.accent-orange{color:var(--orange)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:14px 22px;border-radius:9px;
  border:1px solid var(--line-strong);
  transition:all .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,#3eebd9,#1cb8ab);
  color:#04140f;border-color:transparent;
  box-shadow:0 0 0 1px rgba(52,226,208,.25), 0 8px 24px -8px rgba(52,226,208,.55);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:rgba(52,226,208,.05);color:var(--cyan)}
.btn-ghost:hover{background:rgba(52,226,208,.12);border-color:var(--line-strong)}
.btn-orange{background:rgba(245,165,36,.1);color:var(--orange);border-color:rgba(245,165,36,.4)}
.btn-orange:hover{background:rgba(245,165,36,.18)}
.btn-lg{padding:16px 28px;font-size:14px}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(6,10,15,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--maxw);margin:0 auto;gap:24px}
.logo{font-family:var(--mono);font-weight:800;font-size:19px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.logo .mark{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--cyan);background:rgba(52,226,208,.06)}
.logo .two{color:var(--orange)}
.logo .wordmark{white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.navlinks>a,.navlinks>.dd{padding:10px 14px;border-radius:7px;color:var(--text-dim);position:relative}
.navlinks>a:hover,.navlinks>.dd:hover{color:var(--text);background:rgba(255,255,255,.04)}
.dd{cursor:default}
.dd .ddmenu{
  display:none;position:absolute;top:100%;left:0;margin-top:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px;min-width:230px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
}
.dd:hover .ddmenu, .dd:focus-within .ddmenu{display:block}
.ddmenu a{display:block;padding:9px 12px;border-radius:6px;color:var(--text-dim);font-size:12px;letter-spacing:.03em}
.ddmenu a:hover{background:rgba(52,226,208,.08);color:var(--text)}
.navcta{display:flex;align-items:center;gap:10px}
.navlinks{position:relative}

/* ---------- hero ---------- */
.hero{padding:76px 0 40px}
.badgerow{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.pill{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line-strong);
  color:var(--cyan);background:rgba(52,226,208,.05);
}
.pill.orange{color:var(--orange);border-color:rgba(245,165,36,.4);background:rgba(245,165,36,.06)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:36px}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---------- console mock ---------- */
.consolemock{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.consolemock .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-family:var(--mono);font-size:11px;color:var(--text-faint);letter-spacing:.08em}
.consolemock .status{color:var(--green)}
.consolemock .status::before{content:"● ";}
.consolemock .row{display:flex;gap:10px;margin-bottom:10px}
.consolemock .cell{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.consolemock .cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--text-faint);margin-bottom:5px;text-transform:uppercase}
.consolemock .cell .v{font-family:var(--mono);font-size:12.5px;color:var(--cyan-soft)}

/* ---------- sections / cards ---------- */
section{padding:64px 0}
section.tight{padding:40px 0}
.sechead{max-width:640px;margin:0 0 40px}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:920px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:var(--line-strong)}
.card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase;margin-bottom:10px}
.card h3{margin-bottom:8px}
.card p{margin-bottom:0;font-size:14.5px}
.card.credit-1{border-color:rgba(61,220,132,.35)}
.card.credit-4{border-color:rgba(245,165,36,.35)}
.card .costbadge{
  display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px;text-transform:uppercase;
}
.credit-1 .costbadge{background:rgba(61,220,132,.1);color:var(--green);border:1px solid rgba(61,220,132,.35)}
.credit-4 .costbadge{background:rgba(245,165,36,.1);color:var(--orange);border:1px solid rgba(245,165,36,.35)}
.card.free .costbadge{background:rgba(148,163,184,.1);color:var(--text-dim);border:1px solid var(--line)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:920px){.split{grid-template-columns:1fr}}

.steps{counter-reset:step;display:grid;gap:18px}
.step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.step .num{
  counter-increment:step;font-family:var(--mono);font-weight:700;color:var(--cyan);
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.step .num::before{content:counter(step,decimal-leading-zero)}

table.compare{width:100%;border-collapse:collapse;font-size:14px}
table.compare th,table.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
table.compare th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
table.compare tr:hover td{background:rgba(255,255,255,.02)}

.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cyan);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;font-size:14.5px}

.cta-band{
  background:linear-gradient(135deg, rgba(52,226,208,.08), rgba(245,165,36,.05));
  border:1px solid var(--line-strong);border-radius:20px;padding:48px;text-align:center;
}

footer.site{border-top:1px solid var(--line);padding:48px 0 32px;margin-top:40px}
.footgrid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:28px;margin-bottom:36px}
@media (max-width:1080px){.footgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:820px){.footgrid{grid-template-columns:1fr 1fr}}
.footgrid h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}
.footgrid a{display:block;color:var(--text-dim);font-size:13.5px;margin-bottom:9px}
.footgrid a:hover{color:var(--cyan)}
.footbottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-faint);font-family:var(--mono)}
.footbottom a{color:var(--text-faint)}
.footbottom a:hover{color:var(--cyan)}

.pagehero{padding:56px 0 20px}
.breadcrumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:18px}
.breadcrumb a:hover{color:var(--cyan)}

.mobile-toggle{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);border-radius:7px;padding:8px 10px}
.ddlabel{display:block}
.dd.open .ddmenu{display:block}
@media (max-width:980px){
  .navlinks{display:none;position:fixed;top:66px;left:0;right:0;bottom:0;background:var(--bg);
    flex-direction:column;align-items:stretch;padding:18px;overflow:auto;gap:4px;z-index:60}
  .navlinks.mobile-open{display:flex}
  .navlinks>a,.navlinks>.dd{padding:14px}
  .dd .ddmenu{position:static;display:none;margin-top:6px;border:none;background:transparent;padding:0 0 0 14px}
  .dd.open .ddmenu{display:block}
  .mobile-toggle{display:block}
  .navcta .btn-lg{padding:12px 16px;font-size:12px}
}