:root { --glass: rgba(24,24,31,.68); --glass-line: rgba(165,180,252,.16); }
body {
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 8%, rgba(99,102,241,.16), transparent 28%),
    radial-gradient(circle at 92% 34%, rgba(56,189,248,.08), transparent 26%), var(--bg);
}
body { --muted: #a1a1aa; --dim: #62626d; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
header { background: rgba(9,9,11,.68); box-shadow: 0 12px 42px rgba(0,0,0,.22); }
.hero-section { position: relative; min-height: 100vh; display: grid; align-items: center; padding-block: 120px 76px; overflow: hidden; }
.hero-section::before {
  content: "DBS"; position: absolute; left: max(2vw, calc((100vw - 1180px)/2 - 90px)); top: 48%;
  transform: translateY(-50%); font-size: clamp(15rem, 30vw, 34rem); font-weight: 800; line-height: .7;
  letter-spacing: -.1em; color: transparent; -webkit-text-stroke: 1px rgba(129,140,248,.08);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; gap: clamp(54px, 8vw, 110px); align-items: center; }
.hero-title { font-size: clamp(3.15rem, 5.2vw, 5.15rem); line-height: .98; max-width: 9.5ch; }
.hero-sub { color: #a7a7b2; font-size: 1.02rem; }
.form-panel { border-radius: 26px; padding: clamp(26px, 3vw, 38px); }
.input-wrap input, .input-wrap select, .input-wrap textarea { background: rgba(5,5,9,.72); border-color: rgba(165,180,252,.14); }
.input-wrap input:focus, .input-wrap select:focus, .input-wrap textarea:focus { box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.form-panel, .bento-item, .feat, .price-box, .result-card, .step,
.data-row, .contact-box, .cta-box {
  background: linear-gradient(145deg, rgba(129,140,248,.07), transparent 32%), var(--glass);
  border-color: var(--glass-line);
  box-shadow: 0 24px 64px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.bento-item, .feat, .price-box, .step, .btn { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.bento-item, .feat, .price-box, .step, .result-card { border-radius: 20px; }
.sec { padding-block: clamp(76px, 8vw, 118px); }
.sec-head h2 { text-wrap: balance; }
.bento-item:hover, .feat:hover, .price-box:hover, .step:hover {
  transform: translateY(-5px); border-color: rgba(129,140,248,.38);
  box-shadow: 0 28px 72px rgba(0,0,0,.3), 0 0 38px rgba(99,102,241,.08), inset 0 1px rgba(255,255,255,.09);
}
.hero-title em {
  background: linear-gradient(100deg, #a5b4fc, #67e8f9, #a5b4fc); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: audit-shimmer 7s linear infinite;
}
.btn-fill { box-shadow: 0 12px 34px rgba(99,102,241,.25); }
@keyframes audit-shimmer { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 900px) { .hero-section { min-height: auto; } .hero-grid { gap: 38px; } }
@media (max-width: 640px) { .hero-title { font-size: clamp(3rem, 15vw, 4.25rem); } .form-panel { border-radius: 20px; } }