/* ============================================================
   CodebyCarter — revamp.css
   SMB-positioning overhaul. Two new sections, two new palettes.
   ============================================================ */

/* ============================================================
   BUILT FOR — paperback-book cream + black ink
   Sits right after the hero/marquee, names the audience.
   ============================================================ */
.built-for{
  background:#F5F0E4;
  color:#0A0A0F;
  position:relative;overflow:hidden;
  padding:clamp(100px,12vw,160px) 0;
}
.built-for::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.bf-eyebrow{
  display:inline-block;font-family:'Instrument Serif',serif;font-style:italic;
  font-size:15px;color:#9A3412;font-weight:400;letter-spacing:.02em;
  padding:0 0 8px;border-bottom:1px solid #0A0A0F;
}
.bf-eyebrow::before{
  content:"—  ";color:#9A3412;font-family:inherit;
}

.bf-h{
  font-size:clamp(36px,6.5vw,82px);line-height:1;letter-spacing:-.035em;font-weight:600;
  margin:28px 0 18px;color:#0A0A0F;max-width:20ch;
}
.bf-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  color:#9A3412;
}
.bf-sub{
  font-size:clamp(16px,1.5vw,20px);color:#3A2A20;max-width:62ch;line-height:1.6;
  margin-bottom:60px;
}
.bf-sub b{color:#0A0A0F;font-weight:600}

.bf-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
@media (max-width:920px){.bf-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.bf-grid{grid-template-columns:repeat(2,1fr)}}

.bf-card{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 20px;border-radius:0;
  background:#FFFEFA;
  border:1px solid #1A1614;
  position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease;
}
.bf-card:hover{
  transform:translateY(-3px);
  background:#0A0A0F;color:#F5F0E4;
}
.bf-card:hover .bf-num,
.bf-card:hover .bf-name,
.bf-card:hover .bf-eg{color:inherit}

.bf-num{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:#9A3412;font-weight:700;
}
.bf-name{
  font-size:19px;font-weight:600;letter-spacing:-.015em;color:#0A0A0F;line-height:1.1;
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
}
.bf-eg{
  font-size:11.5px;color:#5A4838;font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
  margin-top:6px;line-height:1.5;
}

.bf-foot{
  margin-top:36px;font-size:14px;color:#5A4838;
  font-family:'Instrument Serif',serif;font-style:italic;
  text-align:center;line-height:1.6;
}
.bf-foot b{color:#0A0A0F;font-style:normal;font-family:'Space Grotesk',sans-serif;font-weight:600}

/* ============================================================
   DOES THIS SOUND LIKE YOU? — terracotta / burnt-sienna
   Sits after Built For, pain-point identification.
   ============================================================ */
.sound{
  background:
    radial-gradient(900px 500px at 25% 25%, rgba(154,52,18,.30), transparent 60%),
    radial-gradient(700px 500px at 80% 80%, rgba(220,120,40,.22), transparent 60%),
    linear-gradient(170deg, #2D1812 0%, #4A2418 50%, #2D1812 100%);
  color:#F5E8D9;
  position:relative;overflow:hidden;
  padding:clamp(120px,14vw,200px) 0;
  --s-rust:#D97757;
  --s-cream:#F5E8D9;
  --s-clay:#F0A06A;
  --s-deep:#3A1A0A;
}
.sound::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.65;
}

.sound-dot{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.30}
.sound-dot--1{width:340px;height:340px;background:var(--s-rust);top:8%;right:-5%;animation:soundDrift1 22s ease-in-out infinite}
.sound-dot--2{width:280px;height:280px;background:var(--s-clay);bottom:10%;left:-5%;animation:soundDrift2 18s ease-in-out infinite}
@keyframes soundDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,40px)}}
@keyframes soundDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}

.sound .shell{position:relative;z-index:2}

.sound-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--s-clay);font-weight:700;
  padding:8px 16px;border:1px solid rgba(217,119,87,.40);border-radius:99px;
  background:rgba(217,119,87,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.sound-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--s-clay);
  box-shadow:0 0 14px var(--s-clay);animation:pulse 2s ease-in-out infinite;
}

.sound-h{
  font-size:clamp(38px,7vw,92px);line-height:.98;letter-spacing:-.035em;font-weight:600;
  margin:26px 0 56px;color:var(--s-cream);max-width:16ch;
}
.sound-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,var(--s-clay),var(--s-rust));
  background-size:200% 200%;animation:hue 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.sound-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;
  max-width:1000px;margin:0 auto;
}
@media (max-width:780px){.sound-grid{grid-template-columns:1fr}}

.sound-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 22px;border-radius:14px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(217,119,87,.18);
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.sound-item:hover{
  transform:translateX(4px);
  border-color:rgba(217,119,87,.45);
  background:rgba(217,119,87,.05);
}

.sound-tick{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--s-rust),var(--s-clay));
  display:grid;place-items:center;color:var(--s-deep);font-weight:700;font-size:14px;
}

.sound-text{font-size:15.5px;line-height:1.55;color:var(--s-cream)}
.sound-text b{color:#FFE4C7;font-weight:700}
.sound-text em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  color:var(--s-clay);
}

.sound-bridge{
  margin-top:60px;padding:32px;border-radius:18px;
  background:rgba(0,0,0,.40);
  border:1px solid rgba(217,119,87,.30);
  text-align:center;max-width:760px;margin-left:auto;margin-right:auto;
  position:relative;z-index:2;
}
.sound-bridge-h{
  font-size:clamp(22px,3vw,32px);font-weight:600;line-height:1.3;color:var(--s-cream);
  letter-spacing:-.02em;margin-bottom:18px;
}
.sound-bridge-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,var(--s-clay),var(--s-rust));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sound-bridge-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:99px;
  background:linear-gradient(135deg,var(--s-clay),var(--s-rust));
  color:var(--s-deep);font-weight:700;font-size:14px;letter-spacing:-.005em;
  box-shadow:0 14px 36px rgba(217,119,87,.40);cursor:none;
  transition:transform .3s ease;
}
.sound-bridge-cta:hover{transform:translateY(-2px) scale(1.03)}

/* ============================================================
   HERO COPY ADJUSTMENTS — SMB language
   ============================================================ */
.hero-tag{color:#5A4838}
.hero-tag .dot{background:#9A3412}