
:root {
  --orange: #f97316;
  --orange-deep: #ea580c;
  --orange-light: #ffb067;
  --orange-soft: #fff1e6;
  --blue: #1792f2;
  --blue-deep: #0f6fc2;
  --blue-light: #56c8ff;
  --blue-soft: #e6f6ff;
  --green: #6dab3e;
  --green-dark: #53862f;
  --text: #11233c;
  --muted: #4f637a;
  --white: #ffffff;
  --line: #dbe8f3;
  --shadow: 0 18px 38px rgba(17,35,60,.12);
  --shadow-soft: 0 10px 26px rgba(17,35,60,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:"Inter",system-ui,sans-serif; color:var(--text); background:#fff; }
img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
.container { width:min(1180px, calc(100% - 32px)); margin:0 auto; }

.site-header {
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(219,232,243,.9);
  box-shadow: 0 8px 24px rgba(17,35,60,.06);
}
.nav-row {
  min-height:104px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
}
.brand-stack { display:flex; flex-direction:column; align-items:flex-start; }
.main-logo-link { position:relative; display:inline-flex; align-items:center; }
.main-logo-link::before {
  content:""; position:absolute; inset:-12px -18px;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.2) 65%, transparent 75%);
  filter: blur(10px); z-index:-1;
}
.main-logo {
  width:clamp(240px,24vw,340px);
  background:#fff; padding:12px 18px; border-radius:22px;
  box-shadow:0 14px 32px rgba(0,0,0,.16), 0 0 0 5px rgba(255,255,255,.95);
  transition:transform .25s ease, box-shadow .25s ease;
}
.main-logo:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,.22), 0 0 0 5px rgba(255,255,255,1);
}
.header-tagline {
  margin:6px 0 0;
  font-size:.82rem; font-weight:800; color:#4f637a;
  letter-spacing:.08em; text-transform:uppercase;
}
.nav { display:flex; justify-content:center; align-items:center; gap:30px; font-weight:800; }
.nav a { position:relative; color:#18324b; font-size:.98rem; letter-spacing:.01em; transition:color .2s ease; }
.nav a:hover { color:var(--orange-deep); }
.nav a::after {
  content:""; position:absolute; left:0; bottom:-8px; width:0; height:3px; border-radius:999px;
  background:linear-gradient(90deg, var(--orange), var(--blue)); transition:width .22s ease;
}
.nav a:hover::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:12px; }
.phone-pill, .text-pill {
  min-height:50px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; font-weight:800; font-size:.96rem; transition:transform .2s ease, box-shadow .2s ease;
}
.phone-pill { background:linear-gradient(180deg, var(--orange), var(--orange-deep)); color:#fff; box-shadow:0 12px 22px rgba(249,115,22,.22); }
.text-pill { background:linear-gradient(180deg, var(--blue-light), var(--blue)); color:#fff; box-shadow:0 12px 22px rgba(23,146,242,.2); }
.phone-pill:hover, .text-pill:hover { transform:translateY(-2px); }

.hero {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 18%), linear-gradient(180deg,#44bdfd 0%, #98e5ff 55%, #ffffff 100%);
  padding:34px 0 44px;
}
.hero::after {
  content:""; position:absolute; right:-100px; top:-50px; width:300px; height:300px;
  background:radial-gradient(circle, rgba(249,115,22,.25), transparent); filter:blur(60px);
}
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.08), transparent 45%); pointer-events:none; }
.hero-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; }
.eyebrow {
  display:inline-block; margin:0 0 14px; padding:.45rem .82rem; border-radius:999px;
  font-size:.92rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.hero .eyebrow { color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.38); }
.eyebrow-blue { color:#046aa2; background:var(--blue-soft); }
.eyebrow-orange { color:#a84a00; background:#ffe7d1; }
.hero-copy h1 {
  margin:0 0 16px; font-family:"Montserrat",sans-serif; font-size:clamp(2.4rem,4.9vw,4.45rem);
  line-height:1.02; letter-spacing:-.03em;
}
.hero-copy h1 span { color:var(--orange); text-shadow:0 4px 18px rgba(249,115,22,.16); }
.hero-text { margin:0 0 18px; font-size:1.18rem; line-height:1.62; color:#22405f; max-width:560px; }
.micro-proof, .micro-urgency { margin:12px 0 0; color:#35536f; font-size:.94rem; font-weight:700; }
.hero-card {
  padding:14px; border-radius:30px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.45);
  box-shadow:0 22px 42px rgba(26,75,115,.16); transition:transform .4s ease;
}
.hero-card:hover { transform:translateY(-8px) rotate(-1deg); }
.hero-card img { width:100%; border-radius:22px; transition:transform .4s ease; }
.hero-card:hover img { transform:scale(1.03); }

.trust-strip { border-top:1px solid #eef5fa; border-bottom:1px solid #eef5fa; background:#fff; margin-top:16px; margin-bottom:30px; }
.trust-strip-inner { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; padding:14px 0; font-weight:700; color:#34506b; }

.services { background:linear-gradient(180deg,#ffffff 0%, #edf9ff 100%); padding:30px 0 54px; margin-top:30px; }
.section-head { text-align:center; margin-bottom:24px; }
.section-head.left { text-align:left; }
.section-head h2, .sound-copy h2, .quote-copy h2, .cta-band h2, .calc-wrap h2 {
  margin:0; font-family:"Montserrat",sans-serif; font-size:clamp(2rem,3vw,3rem); line-height:1.1;
}
.grid { display:grid; gap:20px; }
.two-cards { grid-template-columns:repeat(2, minmax(0, 430px)); justify-content:center; }
.card {
  background:rgba(255,255,255,.86); backdrop-filter:blur(8px); border:1px solid rgba(219,232,243,.95);
  border-radius:26px; box-shadow:var(--shadow); padding:20px; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 30px 60px rgba(0,0,0,.15); }
.card-top { margin-bottom:8px; }
.mini-badge { display:inline-block; padding:.44rem .74rem; border-radius:999px; font-size:.9rem; font-weight:800; }
.blue-badge { background:#e6f6ff; color:#0369a1; }
.green-badge { background:#edf7e7; color:#3f7c1c; }
.card h3 { margin:0 0 12px; font-family:"Montserrat",sans-serif; font-size:1.55rem; }
.card ul { list-style:none; padding:0; margin:0 0 14px; }
.card li { position:relative; padding-left:24px; margin-bottom:10px; line-height:1.45; }
.card li::before { content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:var(--orange); }
.green-card li::before { color:var(--green-dark); }
.card-media { margin:8px 0 12px; border-radius:20px; overflow:hidden; border:1px solid #edf3f8; box-shadow:var(--shadow-soft); }
.card-media img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center; }
.card-caption { margin:0 0 16px; color:#516377; font-size:.95rem; }

.soundmove {
  position:relative; padding:80px 0; background:linear-gradient(135deg, #ff8f1f 0%, #f97316 60%, #ffb067 100%);
  color:white; overflow:hidden;
}
.soundmove::before {
  content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.2), transparent 40%);
}
.soundmove::after {
  content:""; position:absolute; right:-120px; bottom:-120px; width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,255,255,.2), transparent); filter:blur(80px);
}
.sound-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.sound-logo {
  width:280px; margin-bottom:20px; background:#ffffff; padding:12px 18px; border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.9);
}
.glass-pill {
  display:inline-block; margin-bottom:14px; background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.34);
  border-radius:999px; padding:.46rem .82rem; font-weight:800;
}
.sound-tagline { font-size:1.1rem; font-weight:700; margin:0 0 14px; opacity:.9; }
.soundmove h2 { font-size:clamp(2.4rem,4vw,3.4rem); font-weight:800; margin-bottom:18px; }
.sound-copy p { margin:0 0 16px; font-size:1.13rem; line-height:1.62; max-width:540px; }
.sound-frame {
  transform:scale(1.05); border-radius:28px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.3);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:12px;
}
.sound-frame img { width:100%; border-radius:20px; }

.quote-calculator { background:linear-gradient(180deg,#f7fcff 0%, #ffffff 100%); padding:38px 0; }
.calc-wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:start; }
.calc-note { color:var(--muted); font-size:1.05rem; line-height:1.6; }
.calc-card { background:#fff; padding:22px; border-radius:20px; box-shadow:var(--shadow); border:1px solid var(--line); }
.calc-card label { display:block; margin-top:10px; margin-bottom:8px; font-weight:800; }
.calc-card select { width:100%; padding:12px; border-radius:10px; border:1px solid #ccdeea; background:#fff; font:inherit; }
.quote-result { margin:16px 0 0; color:var(--orange-deep); font-family:"Montserrat",sans-serif; }
.quote-followup { margin:10px 0 0; color:var(--muted); font-weight:700; }

.reviews-section { background:linear-gradient(180deg,#fff 0%, #f8fcff 100%); padding:36px 0 50px; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card {
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.review-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(17,35,60,.12); }
.stars { font-size:1.2rem; margin-bottom:12px; color:var(--orange); }
.review-card p { margin:0; line-height:1.65; color:#24384f; }

.cta-band {
  background:radial-gradient(circle at bottom left, rgba(255,170,85,.34), transparent 24%), linear-gradient(135deg,#fff3e4 0%, #fff9f4 30%, #ffcf98 100%);
  padding:44px 0;
}
.center-text { text-align:center; }
.cta-band h2 { color:var(--orange-deep); margin:0 0 12px; }
.cta-copy { margin:0 0 20px; color:#7a4a22; font-size:1.08rem; }
.phone-note { margin:16px 0 0; font-weight:800; color:var(--orange-deep); font-size:1.1rem; }

.quote-section { background:#fff; padding:48px 0 56px; }
.quote-wrap { display:grid; grid-template-columns:.82fr 1.18fr; gap:24px; align-items:start; }
.quote-copy p { margin:0; color:var(--muted); font-size:1.08rem; line-height:1.6; }
.quote-form {
  background:linear-gradient(180deg,#ffffff 0%, #f8fcff 100%); border:1px solid var(--line); border-radius:26px;
  padding:20px; box-shadow:var(--shadow); display:grid; gap:12px;
}
.quote-form label {
  font-weight: 800;
  font-size: .95rem;
}
.quote-form input, .quote-form select, .quote-form textarea {
  width:100%; font:inherit; padding:14px 15px; border-radius:15px; border:1px solid #ccdeea; background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(69,185,255,.18); transform:translateY(-1px);
}
.field-error {
  display:block;
  margin-top:-4px;
  font-size:.88rem;
  color:#b91c1c;
}
.form-status {
  min-height:22px; margin:0 0 12px; font-weight:800;
}
.form-status.success { color:#15803d; }
.form-status.error { color:#b91c1c; }

.site-footer { background:#0f172a; color:#dbeafe; padding:30px 0 90px; }
.footer-row { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.footer-logo {
  width:150px; background:#fff; padding:10px 14px; border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.12), 0 0 0 4px rgba(255,255,255,.9); margin-bottom:8px;
}
.footer-sub { margin:0; color:#cfe3ff; }
.footer-links { display:flex; flex-direction:column; gap:7px; }
.footer-links a { color:#fff; transition:opacity .18s ease; }
.footer-links a:hover { opacity:.82; }

.button-row { display:flex; gap:12px; flex-wrap:wrap; }
.center-buttons { justify-content:center; }
.btn {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 24px; border-radius:15px; font-weight:800; font-size:1rem;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35), transparent 80%);
  opacity:0; transition:opacity .3s ease;
}
.btn:hover::after { opacity:1; }
.full-btn { width:100%; border:none; cursor:pointer; }
.btn-small { min-height:48px; }
.btn-orange { background:linear-gradient(180deg, var(--orange), var(--orange-deep)); color:#fff; box-shadow:0 12px 22px rgba(249,115,22,.24); }
.btn-blue { background:linear-gradient(180deg, var(--blue-light), var(--blue)); color:#fff; box-shadow:0 12px 22px rgba(23,146,242,.22); }
.btn-green { background:linear-gradient(180deg, var(--green), var(--green-dark)); color:#fff; box-shadow:0 12px 22px rgba(109,171,62,.2); }
.btn-white { background:#fff; color:var(--blue); box-shadow:0 12px 22px rgba(255,255,255,.18); }

.sticky-cta { position:fixed; bottom:0; left:0; right:0; display:none; z-index:999; }
.sticky-cta a { flex:1; text-align:center; padding:16px; font-weight:800; color:white; }
.sticky-cta a:first-child { background:var(--orange); }
.sticky-cta a:last-child { background:var(--blue); }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.reveal.show { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }

@media (max-width:980px) {
  .nav-row { grid-template-columns:1fr; justify-items:center; gap:14px; padding:14px 0 18px; }
  .nav { flex-wrap:wrap; gap:18px; }
  .main-logo { width:min(300px, 78vw); }
  .hero-grid, .sound-grid, .quote-wrap, .footer-row, .two-cards, .reviews-grid, .calc-wrap {
    grid-template-columns:1fr; flex-direction:column;
  }
}
@media (max-width:768px) {
  .sticky-cta { display:flex; }
}
@media (max-width:640px) {
  .site-header { position:static; }
  .nav { display:none; }
  .header-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .phone-pill, .text-pill { width:100%; }
  .main-logo { width:min(280px, 82vw); }
  .container { width:min(100% - 20px, 1180px); }
  .button-row { flex-direction:column; }
  .btn { width:100%; }
  .trust-strip-inner { gap:10px; font-size:.9rem; }
}
