/* Shared: "New" nav badge + launch offer banner (linked on every page) */
.nav-links a.nav-new{display:inline-flex;align-items:center;gap:7px}
.new-badge{display:inline-flex;align-items:center;gap:3px;background:#0a0f1e;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;padding:4px 8px 4px 6px;border-radius:999px;position:relative;overflow:hidden;animation:nbFloat 3s ease-in-out infinite}
.new-badge .nb-star{color:#f5b301;font-size:11px;display:inline-block;animation:nbStar 2.4s ease-in-out infinite}
.new-badge::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:nbShine 3.6s ease-in-out infinite}
@keyframes nbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes nbStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(25deg)}}
@keyframes nbShine{0%,55%{left:-60%}100%{left:130%}}

.launch-offer{max-width:912px;margin:18px auto;padding:14px 22px;background:linear-gradient(100deg,#0a0f1e,#1a2540 55%,#2f3e63);background-size:200% 100%;color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;font-size:14.5px;font-weight:600;letter-spacing:-.005em;text-align:center;box-shadow:0 8px 24px -6px rgba(10,15,30,.2);position:relative;overflow:hidden;animation:loBg 8s ease-in-out infinite}
.launch-offer[hidden]{display:none}
.launch-offer .lo-pct{background:#fff;color:#0a0f1e;padding:3px 12px;border-radius:999px;font-weight:800;font-size:13px;animation:loPulse 2.6s ease-in-out infinite}
.launch-offer .lo-count{color:#c9d2e4;font-weight:500;font-variant-numeric:tabular-nums}
@keyframes loBg{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes loPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@media(max-width:600px){.launch-offer{margin:14px 16px;font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.new-badge,.new-badge .nb-star,.new-badge::after,.launch-offer,.launch-offer .lo-pct{animation:none}.new-badge::after{display:none}}

/* Home USP pill — same look as the launch offer, pops in then "breathes" to catch the eye */
.usp-pop{max-width:912px;margin:14px auto 22px;padding:16px 26px;background:linear-gradient(100deg,#0a0f1e,#1a2540 55%,#2f3e63);background-size:200% 100%;color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35;text-align:center;box-shadow:0 10px 28px -8px rgba(10,15,30,.28);animation:uspIn .7s cubic-bezier(.2,.9,.3,1.25) both,uspBreathe 4.2s ease-in-out .7s infinite,loBg 8s ease-in-out infinite}
.usp-pop strong{font-weight:800}
.usp-pop .usp-spark{flex:none;width:30px;height:30px;border-radius:999px;background:#fff;color:#0a0f1e;display:grid;place-items:center;font-size:15px;animation:loPulse 2.6s ease-in-out infinite}
/* the offer banner breathes too, half a cycle out of phase so the two never pulse together */
.launch-offer{animation:loBg 8s ease-in-out infinite,uspBreathe 4.2s ease-in-out 2.1s infinite}
@keyframes uspIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes uspBreathe{0%,100%{transform:scale(1);box-shadow:0 10px 28px -8px rgba(10,15,30,.28)}50%{transform:scale(1.025);box-shadow:0 16px 40px -8px rgba(47,62,99,.45)}}
@media(max-width:600px){.usp-pop{margin:12px 16px 18px;padding:14px 18px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.usp-pop,.usp-pop .usp-spark,.launch-offer{animation:none}}

/* =====================================================================
   Brand accent, Oct 2026 (shared by every page, matches the home page)
   Gold highlight on headings: wrap the words in <span class="gold">.
   ===================================================================== */
:root{--v-navy:#0b1730;--v-navy-2:#16244a;--v-gold:#f2b544;--v-gold-ink:#c2841a;--v-gold-soft:#fdf4de}
.gold{color:var(--v-gold-ink)!important;-webkit-text-fill-color:var(--v-gold-ink);background:none;-webkit-background-clip:border-box;background-clip:border-box}
.hero-overlay .gold{color:var(--v-gold)!important;-webkit-text-fill-color:var(--v-gold)}
/* nav button: same navy + arrow as the home page */
.nav-links .btn.secondary{background:var(--v-navy);color:#fff;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;padding:11px 22px}
.nav-links .btn.secondary::after{content:"\2192";font-weight:500}
.nav-links .btn.secondary:hover{background:var(--v-navy-2);color:#fff}
/* page titles and section titles: heavier, tighter, a step larger */
.page-hero h1,.showcase-wrap h1,.blog-hero h1{font-size:clamp(27px,3.3vw,40px)!important;font-weight:800!important;letter-spacing:-.035em!important;line-height:1.08!important}
.section-head h2{font-size:clamp(21px,2.3vw,30px)!important;font-weight:800;letter-spacing:-.03em;line-height:1.12}
/* small label pills above titles pick up the gold tint */
.page-hero .eyebrow,.section-head .eyebrow{background:var(--v-gold-soft)!important;color:#8a5a06!important}

/* =====================================================================
   Large and widescreen monitors (Oct 2026)
   The site is designed at ~1440px wide. On bigger screens the whole page
   scales up proportionally (zoom), limited by screen HEIGHT as well as
   width so ultrawide monitors don't get a giant hero. Content columns
   also widen so less of the screen is empty. Phones/tablets/laptops
   (under 1680px wide) are not affected at all.
   ===================================================================== */
@media (min-width:1680px) and (min-height:940px){html{zoom:1.12}}
@media (min-width:1880px) and (min-height:1040px){html{zoom:1.22}}
@media (min-width:2200px) and (min-height:1200px){html{zoom:1.4}}
@media (min-width:2500px) and (min-height:1360px){html{zoom:1.55}}
@media (min-width:3000px) and (min-height:1640px){html{zoom:1.85}}
@media (min-width:3600px) and (min-height:1980px){html{zoom:2.25}}

/* wider content columns on wide screens */
@media (min-width:1680px){
  html body :is(.nav-container,.container-wide,.h-wrap,.blog-grid){max-width:1380px}
  html body :is(.container,.guide-tab-panel,.transform-inner,.why-inner,.cta-wrap,.stats-card,.related-grid,.more-grid,.gallery-grid,.ai-grid,.phone-grid,.workflow-grid,.comparison-section,.compare-section){max-width:1240px}
  html body .footer-inner{max-width:1240px}
}
/* ultrawide (21:9 and wider): fill more of the width */
@media (min-width:2400px) and (min-aspect-ratio:2/1){
  html body :is(.nav-container,.container-wide,.h-wrap,.blog-grid){max-width:1720px}
  html body :is(.container,.guide-tab-panel,.transform-inner,.why-inner,.cta-wrap,.stats-card,.related-grid,.more-grid,.gallery-grid,.ai-grid,.phone-grid,.workflow-grid,.comparison-section,.compare-section,.footer-inner){max-width:1520px}
}

/* Sideways-scroll fixes (were there before the redesign):
   pricing: a decorative circle on the bottom call-to-action panel stuck out past the screen edge;
   contact (phones): the office address pill was forced onto one line. */
.cta-panel{position:relative;overflow:hidden}
@media(max-width:600px){.office-pill{white-space:normal;flex-wrap:wrap;border-radius:16px;max-width:100%}}

/* hero copy lines up with the logo at any width (uses % not vw, so it stays right when zoomed) */
@media (min-width:861px){
  html body .hero-v2 .hero-overlay{padding-left:max(24px,calc((100% - 1200px)/2 + 28px));padding-right:max(24px,calc((100% - 1200px)/2 + 28px))}
}
@media (min-width:1680px){html body .hero-v2 .hero-overlay{padding-left:max(24px,calc((100% - 1380px)/2 + 28px))}}
@media (min-width:2400px) and (min-aspect-ratio:2/1){html body .hero-v2 .hero-overlay{padding-left:max(24px,calc((100% - 1720px)/2 + 28px))}}