:root{
  --bg: #0f1a17;
  --text: rgba(248, 247, 242, 0.96);
  --muted: rgba(248, 247, 242, 0.82);
  --muted2: rgba(248, 247, 242, 0.68);
  --border: rgba(255, 255, 255, 0.10);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
  --shadow2: 0 10px 24px rgba(0, 0, 0, 0.30);

  --card-bg: rgba(255,255,255,0.92);
  --card-border: rgba(11, 19, 32, 0.14);
  --card-text: #0b1320;
  --card-muted: rgba(11, 19, 32, 0.70);

  --accent: #1f6b3a;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior: smooth; }

/* Text selection */
::selection{ background: rgba(31,107,58,0.22); color: var(--text); }

/* Keyboard-only focus outline */
:focus-visible{
  outline: 2px solid rgba(31,107,58,0.72);
  outline-offset: 3px;
  border-radius: 4px;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(31,107,58,0.16), transparent 60%),
    radial-gradient(700px 360px at 70% 0%, rgba(31,107,58,0.10), transparent 60%),
    radial-gradient(900px 520px at 60% 95%, rgba(255,255,255,0.04), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.wrap{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

.page{ padding: 18px 0 34px 0; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,26,23,0.88);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 12px 0;
}

.brand-mark{
  height: 104px;
  width: auto;
  display:block;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  font-weight: 650;
  font-size: 14px;
  color: rgba(11, 19, 32, 0.88);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .15s ease;
}

.nav a:hover{ background: rgba(11,19,32,0.06); }

.nav .nav-cta{
  font-weight: 800;
  background: rgba(31,107,58,0.10);
  border: 1px solid rgba(31,107,58,0.18);
}

.nav .nav-cta:hover{ background: rgba(31,107,58,0.14); }

.hero{
  padding: 24px 0 12px 0;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

.hero-copy h1{
  margin: 0 0 10px 0;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.lead{
  margin: 0 0 14px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

.hero-actions{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 6px;
}

.btn{
  border: 1px solid rgba(11,19,32,0.16);
  background: rgba(255,255,255,0.8);
  color: rgba(11,19,32,0.92);
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  text-decoration:none;
  display:inline-flex;
  gap:10px;
  align-items:center;
  box-shadow: 0 8px 18px rgba(11,19,32,0.08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.95); border-color: rgba(11,19,32,0.22); }
.btn:active{ transform: translateY(0px); }

.btn.primary{
  background: rgba(31,107,58,0.10);
  border-color: rgba(31,107,58,0.18);
}

.micro{
  font-size: 12px;
  color: var(--muted2);
  padding: 2px 6px;
}

.checks{
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}

.checks li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(11,19,32,0.78);
  font-size: 14px;
}

.checks li::before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(31,107,58,0.10);
  color: rgba(11,19,32,0.92);
  font-weight: 950;
  margin-top: 1px;
  flex: 0 0 18px;
}

.card-shell{
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
  color: var(--card-text);
}

.hero-card{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 18px;
  text-align: left;
  min-height: 260px;
}

.hero-card-top{ width:100%; }

.hero-card-title{ font-weight: 900; color: var(--card-text); font-size: 14px; }

.hero-card-sub{
  font-size: 13px;
  color: var(--card-muted);
  margin-top: 2px;
  max-width: 44ch;
}

.hero-logo-center{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.hero-logo-center img{
  width: clamp(220px, 24vw, 280px);
  height: auto;
  display:block;
}

.examples-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.example-card{ padding: 14px; }

.pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.shot{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(11,19,32,0.02);
}

.shot img{
  display:block;
  width:100%;
  height: 260px;
  object-fit: cover;
}

.shot figcaption{
  font-size: 12px;
  color: rgba(11,19,32,0.72);
  padding: 10px 10px 12px 10px;
  border-top: 1px solid rgba(11,19,32,0.08);
  background: rgba(255,255,255,0.72);
}

.section{ padding: 18px 0; }

.section h2{
  margin: 0 0 10px 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.card{
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: var(--shadow2);
  padding: 14px;
  color: var(--card-text);
}

.card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.bullets li{ margin: 8px 0; }

.steps{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.step-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  background: rgba(11,19,32,0.08);
  border: 1px solid rgba(11,19,32,0.12);
}

.step p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.fit-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.fit h3{
  margin: 0 0 8px 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.fit p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.start-actions{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 8px;
}

.hr{
  height: 1px;
  background: rgba(11,19,32,0.10);
  margin: 12px 0;
}

.footer{
  padding: 18px 0 26px 0;
  border-top: 1px solid rgba(11, 19, 32, 0.08);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}

.footer-left{
  display:flex;
  gap: 10px;
  align-items:center;
}

.footer-icon{
  height: 44px;
  width: auto;
  display: block;
}

.footer-title{ font-weight: 900; }
.footer-sub{ font-size: 13px; color: var(--muted); }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .examples-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .hero-logo-center img{
    width: clamp(220px, 24vw, 280px);
    height: auto;
    display:block;
  }
}

.section-head{
  margin-bottom: 10px;
}

.section-head .muted{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.offers-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.offer-card--featured{
  border: 2px solid rgba(11,19,32,0.20);
}

.offer-head{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:flex-start;
}

.offer-title{
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.offer-sub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.offer-priceBox{
  text-align:right;
  flex: 0 0 auto;
}

.offer-price{
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}

.offer-priceNote{
  font-size: 12px;
  color: rgba(11,19,32,0.62);
  margin-top: 4px;
}

.offer-media{
  margin-top: 12px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(11,19,32,0.02);
}

.offer-media img{
  width:100%;
  display:block;
  height: auto;
}

.offer-media--two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.offer-media--two .offer-mediaLink{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(11,19,32,0.02);
}

.offer-mediaLink img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

.offer-list{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.offer-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.offer-note{
  font-size: 12px;
  color: rgba(11,19,32,0.62);
}

@media (max-width: 980px){
  .offers-grid{ grid-template-columns: 1fr; }
  .offer-mediaLink img{ height: 240px; }
}

.faq h3{
  margin: 14px 0 6px 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.faq p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.intent{
  margin-top: 18px;
}

.intent-title{
  margin: 18px 0 10px 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(11,19,32,0.86);
  font-weight: 900;
}

.intent-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.intent-card{
  position: relative;
  display:block;
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow2);
  padding: 12px 12px 14px 12px;
  overflow:hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  min-height: 64px;
}

.intent-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(11,19,32,0.18);
}

.intent-top{
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.intent-card{
  text-align: center;
  padding: 16px 16px 18px 16px;
  min-height: 110px;
}

.intent-top{
  font-weight: 950;
  line-height: 1.25;
}

.intent-pop{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(248,247,242,0.78);
  opacity: 1;
  transform: none;
  transition: none;
}

.intent-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.28);
}

.authority-mini{
  margin-top: 12px;
  padding: 14px 14px;
  border: 1px solid rgba(11,19,32,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
}

.authority-mini h3{
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.authority-mini p{
  margin: 0 0 8px 0;
}

.authority-mini p.muted{
  margin: 0;
}

body{
  background: radial-gradient(900px 600px at 18% -10%, rgba(31,107,58,0.28), rgba(15,26,23,0) 55%),
              radial-gradient(800px 520px at 92% 0%, rgba(31,107,58,0.18), rgba(15,26,23,0) 60%),
              #0f1a17;
  color: rgba(255,255,255,0.92);
}

.site-header{
  background: rgba(15,26,23,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.site-header a{
  color: rgba(255,255,255,0.90);
}

.site-header .pill{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

.site-header .pill:hover{
  background: rgba(255,255,255,0.10);
}

.hero h1{
  color: rgba(255,255,255,0.96);
}

.hero .lead,
.hero .micro,
.hero .checks{
  color: rgba(255,255,255,0.74);
}

.hero .micro{
  opacity: 1;
}

.card{
  color: var(--text);
}

.section{
  padding: 22px 0;
}

.grid-2{
  gap: 14px;
}

.intent{ margin-top: 14px; }
.intent-grid{ gap: 10px; }
.intent-card{ padding: 12px 12px 14px 12px; min-height: 70px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12); box-shadow: none; }
.intent-card:hover{ border-color: rgba(255,255,255,0.22); box-shadow: none; }
.intent-top{ color: rgba(255,255,255,0.94); }
.intent-pop{ color: rgba(255,255,255,0.72); }

.authority-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.authority-card .bigline{
  font-size: 16px;
  line-height: 1.35;
}

.quote-card .quote{
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.quote-card .quote-by{
  margin: 0 0 10px 0;
  color: rgba(11,19,32,0.70);
  font-size: 13px;
  font-weight: 800;
}

.mini-actions{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.mini-actions .link{
  font-weight: 850;
}

.mini-actions .dot{
  color: rgba(11,19,32,0.35);
}

@media (max-width: 860px){
  .authority-grid{ grid-template-columns: 1fr; }
}

a{ color: rgba(240,246,243,0.92); }
a:hover{ color: rgba(240,246,243,1); }

.card .muted{ color: var(--card-muted); }

.section--thin{ padding: 10px 0; }

.brand img{
  height: 104px;
  width: auto;
  display: block;
}

.authority{
  text-align:left;
  padding: 0;
}
.authority-line{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.authority-sub{
  margin-top: 6px;
  color: rgba(240,246,243,0.72);
  font-weight: 650;
}

.quote{
  text-align:left;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.quote-text{
  color: rgba(240,246,243,0.78);
  font-style: italic;
  font-weight: 650;
}
.quote-attrib{
  margin-top: 6px;
  color: rgba(240,246,243,0.55);
  font-size: 12px;
  font-weight: 750;
}

.card p{ color: var(--card-muted); }
.card h2, .card h3{ color: var(--card-text); }

.card.step p{ color: var(--card-muted); }
.card.step .step-num{ color: var(--card-text); }

h1, h2, h3, h4{ color: var(--text); }
p, li{ color: var(--muted); }
.small, .muted{ color: var(--muted); }

.authority-line{ color: var(--text); }
.authority-sub{ color: rgba(240, 246, 243, 0.82); }
.quote-text{ color: rgba(240, 246, 243, 0.86); }
.quote-attrib{ color: rgba(240, 246, 243, 0.72); }

.btn.primary{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(248,247,242,0.96);
}

.btn.primary:hover{
  background: rgba(255,255,255,0.22);
}

.btn:not(.primary){
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(11,19,32,0.12);
  color: rgba(11,19,32,0.92);
}

body{
  color: var(--text);
}

h1, h2, h3, h4{
  color: var(--text);
}

p, li{
  color: var(--muted);
}

.hero .checks li{ color: var(--muted); }
.hero .checks{ color: var(--muted); }
.intent-title, .intent .intent-title{ color: var(--text); }
.intent .intent-top{ color: var(--text); }
.intent .intent-pop{ color: var(--muted); }

.site-footer, .site-footer *{ color: rgba(248, 247, 242, 0.78); }
.site-footer a{ color: rgba(248, 247, 242, 0.86); text-decoration: none; }
.site-footer a:hover{ color: rgba(248, 247, 242, 0.96); }

footer, footer *{ color: rgba(248, 247, 242, 0.78); }
footer a{ color: rgba(248, 247, 242, 0.86); }

.hero .checks li{
  color: var(--muted);
}

.hero .checks li::before{
  color: rgba(248,247,242,0.92) !important;
}

.checks li{
  color: var(--muted) !important;
}

.checks li::before{
  color: rgba(248,247,242,0.92) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.intent-card{
  text-align: center !important;
  padding: 16px 16px 18px 16px !important;
  min-height: 110px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}

.intent-top{
  color: rgba(248,247,242,0.94) !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.intent-pop{
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: rgba(248,247,242,0.78) !important;
}

.intent-card:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.26) !important;
}

.card a.btn{
  color: rgba(11,19,32,0.92);
}

.media-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px){
  .media-grid-2{ grid-template-columns: 1fr; }
}

.media-pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 680px){
  .media-pair{ grid-template-columns: 1fr; }
}

.media-frame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 4 / 3;
}

.media-frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.media-cap{
  font-size: 12px;
  margin-top: 8px;
  color: rgba(248,247,242,0.74);
}

.media-block h2{
  margin: 0 0 8px 0;
}

.media-block .muted{
  margin: 0 0 12px 0;
}

.media-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 980px){
  .media-gallery{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .media-gallery{ grid-template-columns: 1fr; }
}

.tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
}

.shot { position: relative; }

.shot .tag{
  top: auto !important;
  right: auto !important;
  bottom: 12px;
  left: 12px;
  transform: none !important;
  font-size: 1.5em;
  padding: 8px 12px;
  line-height: 1;
  border-radius: 999px;
}

.hero-card .tag {
  display: none;
}

.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.card-link:hover{
  text-decoration:none;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero--polished{
  padding: 28px 0 16px 0;
}

.hero-inner--polished{
  grid-template-columns: minmax(0,1.02fr) minmax(360px,0.98fr);
  gap: 20px;
}

.hero-copy--polished h1{
  font-size: clamp(38px, 5vw, 62px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 11ch;
  margin-bottom: 14px;
}

.hero-copy--polished .lead{
  font-size: 17px;
  line-height: 1.68;
  max-width: 60ch;
}

.checks--hero li{
  color: rgba(11,19,32,0.82);
}

.hero-mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.hero-mini-card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  border-radius: 18px;
  padding: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.hero-mini-card strong{
  display:block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.96);
  font-size: 14px;
}

.hero-mini-card p{
  margin:0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  line-height: 1.6;
}

.hero-card--proof{
  gap: 14px;
  min-height: unset;
  display:flex;
  flex-direction:column;
}

.hero-card-top{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
}

.proof-link{
  color: rgba(11,19,32,0.68);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

.pair--tall img{
  height: 360px;
}

.proof-note{
  margin:0;
  color: rgba(11,19,32,0.68);
  font-size: 13px;
  line-height: 1.55;
}

.section--metrics{
  padding-top: 8px;
}

.metrics-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.metric-card{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  padding: 15px;
}

.metric-card strong{
  display:block;
  margin-bottom: 5px;
  font-size: 14px;
  color: rgba(255,255,255,0.96);
}

.metric-card span{
  display:block;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.55;
}

.section-head--wide{
  max-width: 760px;
}

.service-grid-premium{
  display:grid;
  gap: 18px;
}

.service-panel{
  display:grid;
  grid-template-columns: minmax(0,1.03fr) minmax(270px,0.97fr);
  gap: 18px;
  align-items:center;
  padding: 18px;
}

.service-media--pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.service-media--trio{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.service-kicker{
  color: rgba(11,19,32,0.56);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 8px;
}

.service-copy h3{
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--card-text);
  max-width: 18ch;
}

.service-copy p{
  color: var(--card-muted);
  font-size: 15px;
  line-height: 1.65;
}

.featured-example{
  display:grid;
  grid-template-columns: minmax(250px,0.7fr) minmax(0,1.3fr);
  gap: 18px;
  align-items:center;
  padding: 18px;
  margin-bottom: 16px;
}

.featured-copy h3{
  margin: 0 0 10px 0;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--card-text);
}

.featured-copy p{
  color: var(--card-muted);
  margin-bottom: 10px;
}

.examples-grid--premium{
  grid-template-columns: 1fr 1fr;
}

.example-card--copy{
  padding: 14px;
}

.example-copy{
  padding-top: 12px;
}

.example-copy strong{
  display:block;
  margin-bottom: 4px;
  color: var(--card-text);
}

.example-copy p{
  color: var(--card-muted);
}

.example-cta-row{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 16px;
}

.why-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

.why-card{
  min-height: 180px;
}

.why-card h3{
  margin: 0 0 8px 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--card-text);
}

.why-card p{
  color: var(--card-muted);
}

.steps--home{
  grid-template-columns: repeat(3,1fr);
}

.start--premium{
  padding: 18px;
}

.start--premium h2{
  margin-bottom: 8px;
}

@media (max-width: 1120px){
  .metrics-grid,
  .why-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px){
  .hero-inner--polished,
  .service-panel,
  .featured-example{
    grid-template-columns: 1fr;
  }

  .hero-mini-grid,
  .service-media--pair,
  .service-media--trio,
  .examples-grid--premium,
  .metrics-grid,
  .why-grid,
  .steps--home{
    grid-template-columns: 1fr;
  }

  .pair--tall img{
    height: 300px;
  }
}

.hero-card-brand{
  margin: 6px 0 10px 0;
  padding: 0;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

.hero-card-brand img{
  width:min(200px, 70%);
  height:auto;
  display:block;
  opacity:.95;
}

.credibility{
  margin-top:14px;
  font-size:14px;
  line-height:1.6;
  opacity:0.75;
}

/* ===== FINAL CARD ART DIRECTION + GOLD SYSTEM ===== */
:root{
  --gold: #c6a96b;
  --gold-soft: rgba(198,169,107,0.82);
  --gold-line: rgba(198,169,107,0.30);
}

/* Gold-forward hierarchy */
.hero-copy--polished h1{
  color: var(--gold) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

.service-kicker,
.hero-card-title,
.authority-strip__eyebrow{
  color: var(--gold) !important;
}

.section-head--wide h2{
  position: relative;
  display: inline-block;
}

.section-head--wide h2::after{
  content:"";
  display:block;
  width: 54px;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(198,169,107,0.18));
}

/* Authority strip */
.section--authority{
  padding-top: 6px;
  padding-bottom: 8px;
}

.authority-strip{
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid rgba(198,169,107,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90));
}

.authority-strip::before{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width: 260px;
  height: 160px;
  background:
    radial-gradient(120px 70px at 60% 60%, rgba(31,107,58,0.12), transparent 70%),
    radial-gradient(80px 48px at 38% 74%, rgba(198,169,107,0.12), transparent 72%),
    radial-gradient(56px 34px at 76% 76%, rgba(31,107,58,0.10), transparent 72%);
  pointer-events:none;
}

.authority-strip__eyebrow{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.authority-strip__title{
  color: var(--card-text);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.authority-strip__sub{
  margin-top: 8px;
  color: var(--card-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Landscape design elements inside cards */
.card,
.metric-card,
.hero-card--proof{
  position: relative;
  overflow: hidden;
}

.metric-card::before,
.why-card::before,
.start--premium::before{
  content:"";
  position:absolute;
  inset:auto -18px -26px auto;
  width: 150px;
  height: 90px;
  background:
    radial-gradient(64px 34px at 30% 72%, rgba(31,107,58,0.11), transparent 74%),
    radial-gradient(48px 28px at 56% 70%, rgba(198,169,107,0.12), transparent 74%),
    radial-gradient(36px 22px at 78% 68%, rgba(31,107,58,0.09), transparent 74%);
  pointer-events:none;
}

.service-panel::before,
.featured-example::before,
.example-card--copy::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(198,169,107,0.06) 72% 73%, transparent 73%),
    radial-gradient(220px 110px at 102% 102%, rgba(31,107,58,0.08), transparent 60%),
    radial-gradient(170px 90px at 98% 95%, rgba(198,169,107,0.08), transparent 62%);
  pointer-events:none;
}

.hero-card--proof::before{
  content:"";
  position:absolute;
  right: -8px;
  top: -8px;
  width: 180px;
  height: 120px;
  background:
    radial-gradient(120px 56px at 65% 35%, rgba(31,107,58,0.10), transparent 68%),
    radial-gradient(88px 44px at 44% 52%, rgba(198,169,107,0.10), transparent 70%);
  pointer-events:none;
}

/* Subtle contour / bed line */
.metric-card::after,
.why-card::after,
.start--premium::after{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 20px;
  background:
    radial-gradient(24px 10px at 8% 100%, transparent 62%, rgba(198,169,107,0.22) 63% 67%, transparent 68%),
    radial-gradient(36px 12px at 24% 100%, transparent 62%, rgba(198,169,107,0.18) 63% 67%, transparent 68%),
    radial-gradient(28px 10px at 44% 100%, transparent 62%, rgba(31,107,58,0.20) 63% 67%, transparent 68%),
    radial-gradient(42px 12px at 66% 100%, transparent 62%, rgba(198,169,107,0.16) 63% 67%, transparent 68%),
    radial-gradient(32px 10px at 86% 100%, transparent 62%, rgba(31,107,58,0.16) 63% 67%, transparent 68%);
  opacity: .9;
  pointer-events:none;
}

.metric-card,
.why-card{
  padding-bottom: 34px !important;
}

/* Better card polish */
.card,
.metric-card,
.hero-card--proof{
  box-shadow:
    0 14px 28px rgba(0,0,0,0.20),
    0 1px 0 rgba(255,255,255,0.42) inset !important;
}

.hero-card--proof .pair{
  margin-top: 2px;
}

.hero-card--proof .proof-link--inline{
  color: var(--gold-soft) !important;
}

.hero-card--proof .hero-card-title{
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px !important;
}

.hero-card--proof .hero-card-sub{
  color: var(--card-text) !important;
  font-weight: 700;
  max-width: 32ch !important;
}

/* Buttons */
.btn.primary{
  background: rgba(198,169,107,0.14) !important;
  border-color: rgba(198,169,107,0.36) !important;
  color: rgba(248,247,242,0.98) !important;
}

.btn.primary:hover{
  background: rgba(198,169,107,0.22) !important;
}

.start--premium{
  border: 1px solid rgba(198,169,107,0.18);
}

/* Gold tags slightly more premium */
.shot .tag{
  background: rgba(24,24,24,0.56) !important;
  border: 1px solid rgba(198,169,107,0.18);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* Make service/feature text breathe */
.service-copy p,
.featured-copy p,
.example-copy p{
  max-width: 54ch;
}

@media (max-width: 980px){
  .authority-strip{ padding: 16px 16px; }
}
/* ===== FIX: TEXT ON LIGHT CARDS ===== */

/* ALL text inside cards uses dark system */
.card,
.card * {
  color: var(--card-text) !important;
}

/* Muted text inside cards */
.card p,
.card li,
.card .muted,
.card .small {
  color: var(--card-muted) !important;
}

/* Fix headings inside cards */
.card h1,
.card h2,
.card h3,
.card h4 {
  color: var(--card-text) !important;
}

/* Fix service + feature sections */
.service-copy p,
.featured-copy p,
.example-copy p,
.metric-card span,
.why-card p {
  color: var(--card-muted) !important;
}

/* Fix labels/kickers */
.service-kicker,
.hero-card-title,
.authority-strip__eyebrow {
  color: var(--gold) !important;
}

/* Fix "View photo concept" button */
.card .btn.primary {
  color: var(--card-text) !important;
}

/* Fix any leftover light text inside white cards */
.card a {
  color: var(--card-text) !important;
}
/* ===== FINAL CLEANUP: REMOVE DECORATIVE CARD ILLUSTRATIONS ===== */

/* kill all added pseudo-element illustrations on cards */
.metric-card::before,
.metric-card::after,
.why-card::before,
.why-card::after,
.start--premium::before,
.start--premium::after,
.service-panel::before,
.featured-example::before,
.example-card--copy::before,
.hero-card--proof::before,
.authority-strip::before{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* remove extra bottom padding that existed only to make room for fake landscape lines */
.metric-card,
.why-card{
  padding-bottom: 15px !important;
}

/* ===== FIX DARK CARDS: FORCE LIGHT TEXT ===== */

.metric-card,
.metric-card *{
  color: rgba(248,247,242,0.96) !important;
}

.metric-card span,
.metric-card p,
.metric-card li{
  color: rgba(248,247,242,0.74) !important;
}

/* keep light cards dark */
.card:not(.metric-card),
.card:not(.metric-card) *{
  color: inherit;
}

.card:not(.metric-card) p,
.card:not(.metric-card) li,
.card:not(.metric-card) .muted,
.card:not(.metric-card) .small{
  color: var(--card-muted) !important;
}

.card:not(.metric-card) h1,
.card:not(.metric-card) h2,
.card:not(.metric-card) h3,
.card:not(.metric-card) h4,
.card:not(.metric-card) strong{
  color: var(--card-text) !important;
}

/* ===== HERO CARD: RESTORE CORRECT LAYOUT ===== */

.hero-card--proof{
  gap: 10px !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
}

.hero-card-top{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.hero-card-title-wrap{
  display: block !important;
}

.hero-card-title{
  font-weight: 900 !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin: 0 0 2px 0 !important;
}

.hero-card-sub{
  font-size: 13px !important;
  color: var(--card-text) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  max-width: 32ch !important;
}

.hero-card-brand{
  display: flex !important;
  align-items: center !important;
}

.hero-card-brand--center{
  justify-content: center !important;
}

.hero-card-brand--tight{
  margin: 2px 0 2px 0 !important;
  padding: 0 !important;
}

.hero-card-brand--tight img{
  width: min(250px, 80%) !important;
  height: auto !important;
  display: block !important;
  opacity: .96 !important;
}

.proof-note--left{
  text-align: left !important;
  margin: 0 0 8px 0 !important;
  color: rgba(11,19,32,0.68) !important;
}

.proof-link{
  color: rgba(11,19,32,0.68) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* force service text on white cards to dark */
.service-copy h3,
.featured-copy h3,
.example-copy strong,
.authority-strip__title,
.why-card h3{
  color: var(--card-text) !important;
}

.service-copy p,
.featured-copy p,
.example-copy p,
.authority-strip__sub,
.why-card p{
  color: var(--card-muted) !important;
}

/* make sure primary buttons inside white cards stay readable */
.card .btn.primary{
  color: var(--card-text) !important;
}
.hero-card--proof{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

.hero-card-brand{
  display:flex !important;
  align-items:center !important;
}

.hero-card-brand--center{
  justify-content:center !important;
}

.hero-card-brand--tight{
  order: 0 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

.hero-card-brand--tight img{
  width: min(250px, 80%) !important;
  height: auto !important;
  display:block !important;
}

.hero-card-top{
  order: 1 !important;
}

.proof-note--left{
  order: 2 !important;
}

.hero-card--proof .pair{
  order: 3 !important;
}