:root {
  --glass-fill: rgba(18, 20, 23, .62);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-highlight: rgba(255, 238, 190, .16);
}

body { isolation: isolate; }
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,180,95,.17), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(124,199,255,.10), transparent 22%),
    radial-gradient(circle at 68% 78%, rgba(139,224,198,.09), transparent 25%);
  filter: blur(12px);
  animation: dbs-aurora 18s ease-in-out infinite alternate;
}

.nav { background: rgba(7,8,9,.68); box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.hero { min-height: calc(100vh - 72px); display: grid; align-items: center; padding-block: clamp(52px, 7vw, 92px); }
.hero-grid { grid-template-columns: minmax(0, .94fr) minmax(390px, .76fr); gap: clamp(48px, 7vw, 104px); }
.hero-copy h1 { font-size: clamp(3.6rem, 6.1vw, 6.25rem); line-height: .91; letter-spacing: -.065em; max-width: 9.7ch; text-wrap: balance; }
.hero-copy h1 span { display: inline; }
.hero-copy h1 span:last-child { color: var(--gold-2); }
.hero-copy .lead { max-width: 62ch; font-size: 1.02rem; }
.build-card { border-radius: 28px; padding: clamp(26px, 3vw, 38px); overflow: hidden; }
.build-card::before {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px;
  border-radius: 50%; background: rgba(245,217,144,.13); filter: blur(10px); pointer-events: none;
}
.build-card h2 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.045em; line-height: 1; }
.proof-strip { gap: 10px; }
.proof-strip > div { border-radius: 15px; padding: 17px; }
.build-card, .hero-visual, .system-window, .card, .cta, .invoice-panel,
.process-item, .feature-row, .build-item, .proof-strip > div, .contact-card {
  background: linear-gradient(145deg, var(--glass-highlight), transparent 28%), var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.card, .build-item, .feature-row, .btn {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s, background .35s;
}
.card, .build-item, .feature-row, .system-window, .invoice-panel { border-radius: 20px; }
.section { padding-block: clamp(72px, 8vw, 118px); }
.section-head h2 { max-width: 18ch; letter-spacing: -.045em; text-wrap: balance; }
.card:hover, .build-item:hover, .feature-row:hover {
  transform: translateY(-6px);
  border-color: rgba(245,217,144,.38);
  box-shadow: 0 30px 80px rgba(0,0,0,.38), 0 0 45px rgba(217,180,95,.07), inset 0 1px rgba(255,255,255,.13);
}
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.45) 46%, transparent 67%);
  transform: translateX(-120%); transition: transform .65s ease;
}
.btn:hover::after { transform: translateX(120%); }
.kicker, .pill, .number, .status-pill { backdrop-filter: blur(12px); }

@keyframes dbs-aurora { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-copy h1 { max-width: 10ch; }
  .navin { padding-block: 11px; }
  .links a:not(.btn) { display: none; }
  .brand-copy { font-size: .82rem; }
  .brand-copy small { font-size: .58rem; }
}
@media (max-width: 720px) {
  .hero-copy h1 { font-size: clamp(3rem, 16vw, 4.65rem); line-height: .92; }
  .build-card { border-radius: 22px; }
}