/* HERO */

.hero{padding:40px 0 26px}
.hero-shell{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:radial-gradient(circle at top left,#1c2235 0,#07090d 45%,#030304 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-soft);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 10% 0,rgba(240,179,118,.14) 0,transparent 48%),
    radial-gradient(circle at 90% 100%,rgba(80,136,255,.12) 0,transparent 52%);
  opacity:.9;pointer-events:none;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2.1fr);
  gap:26px;
  padding:24px 22px 18px;
  align-items:flex-start;
}
h1{
  font-size:clamp(2rem,2.2vw + 1.1rem,2.5rem);
  line-height:1.1;
  margin:0 0 10px;
  letter-spacing:-.02em;
}
.eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.hero-goal{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(240,179,118,.5);
  background:radial-gradient(circle at 0 0,rgba(240,179,118,.22),transparent 60%);
  font-size:.8rem;
  color:var(--muted);
  margin-top:8px;
  max-width:520px;
}
.hero-goal span.dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 6px rgba(240,179,118,.8);
}

.hero-photo-box{
  position:relative;
  max-width:220px;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero-photo{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.7);
}
.hero-photo img{width:100%;display:block;object-fit:cover}
.hero-qual{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:.78rem;
  color:var(--muted);
}

/* SECTIONS */

section{padding:28px 0 18px}
.card{
  border-radius:18px;
  padding:18px 18px 14px;
  background:linear-gradient(145deg,rgba(9,11,16,.96),rgba(7,10,15,.98));
  border:1px solid var(--border-subtle);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  font-size:.9rem;
  color:var(--muted);
}
.section-title{
  font-size:1.35rem;
  margin:0 0 8px;
  letter-spacing:-.03em;
  color:var(--text);
}
.section-sub{
  font-size:.94rem;
  max-width:70ch;
  margin:0 0 10px;
}
.card ul{margin:0;padding-left:20px}
.card li{margin-bottom:6px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* AUDIENCES */

.states-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.state-item{
  border-radius:16px;
  padding:9px 10px 10px;
  background:radial-gradient(circle at 0 0,rgba(240,179,118,.12) 0,transparent 65%);
  border:1px solid rgba(255,255,255,.12);
  font-size:.84rem;
  color:#d8dbe5;
  transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out,background .18s ease-out;
}
.state-item:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.7);
  border-color:var(--accent);
  background:radial-gradient(circle at 0 0,rgba(240,179,118,.18) 0,transparent 70%);
}
.state-icon{font-size:1rem;margin-bottom:3px}
.state-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#e0e2ec;
  margin:0 0 3px;
}
.state-text{color:var(--muted)}

/* TELWHA */

.telwha-tabs{
  display:flex;
  gap:6px;
  margin:6px 0 8px;
  overflow-x:auto;
}
.telwha-tab{
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
  background:rgba(10,12,16,.96);
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .08s ease;
}
.telwha-tab.active{
  background:radial-gradient(circle at 0 0,#ffe1b5 0,#e8b06b 60%,#e29c5d 100%);
  color:#111827;
  border-color:rgba(240,179,118,.9);
  transform:translateY(-1px);
}
.telwha-panel{display:none;margin-top:4px}
.telwha-panel.active{display:block}
.telwha-panel h3{margin:0 0 4px;font-size:.9rem;color:var(--text)}
.telwha-panel h4{margin:0 0 6px;font-size:.86rem;font-weight:500;color:var(--text)}
.telwha-panel p{font-size:.84rem;color:var(--muted)}

/* FAQ */

.faq-item{
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.faq-item:first-of-type{border-top:none}
.faq-q{
  font-size:.9rem;font-weight:600;
  display:flex;align-items:center;gap:6px;
  color:var(--text);
}
.faq-q span.icon{font-size:.9rem;opacity:.8}
.faq-a{font-size:.86rem;margin-top:4px}

/* BUTTONS / SMALL */

.small{font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-size:.84rem;cursor:pointer;
  background:rgba(5,7,10,.96);color:var(--text);
  transition:background .16s ease,border-color .16s ease,transform .08s ease,box-shadow .12s ease;
}
.btn-primary{
  background:radial-gradient(circle at 0 0,#ffe1b5 0,#f0b376 38%,#e29c5d 100%);
  color:#1a120b;
  box-shadow:0 16px 40px rgba(240,179,118,.45);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 48px rgba(240,179,118,.6);
}

/* LIGHT THEME OVERRIDES */

html[data-theme="light"] .hero-shell{
  border-color: rgba(104, 82, 62, 0.16);
  background:
    radial-gradient(circle at 0 0, rgba(240,179,118,.18) 0, transparent 38%),
    radial-gradient(circle at 100% 14%, rgba(232,165,92,.14) 0, transparent 34%),
    linear-gradient(135deg, #fffdf9 0%, #f8f1e8 58%, #f3e8dc 100%);
  box-shadow: 0 18px 40px rgba(98,76,56,.10);
}

html[data-theme="light"] .hero-bg{
  display: none;
}

html[data-theme="light"] h1,
html[data-theme="light"] .section-title,
html[data-theme="light"] .faq-q,
html[data-theme="light"] .telwha-panel h3,
html[data-theme="light"] .telwha-panel h4{
  color: #2b2119;
}

html[data-theme="light"] .eyebrow{
  color: #8a7666;
}

html[data-theme="light"] .hero-goal{
  background: linear-gradient(180deg, #fffaf1 0%, #fff4e3 100%);
  border-color: rgba(213,128,52,.42);
  color: #5f5146;
  box-shadow: 0 10px 24px rgba(216,134,61,.10);
}

html[data-theme="light"] .hero-goal span.dot{
  background: #d58034;
  box-shadow: 0 0 0 4px rgba(213,128,52,.14);
}

html[data-theme="light"] .hero-photo{
  border-color: rgba(104,82,62,.14);
  box-shadow: 0 18px 36px rgba(98,76,56,.14);
}

html[data-theme="light"] .hero-qual{
  color: #6d5f53;
}

html[data-theme="light"] .card{
  background: linear-gradient(180deg, #fffdf9 0%, #fffaf5 100%);
  border-color: rgba(104,82,62,.14);
  box-shadow: 0 10px 26px rgba(98,76,56,.08);
  color: #2b2119;
}

html[data-theme="light"] .card p,
html[data-theme="light"] .card li,
html[data-theme="light"] .section-sub,
html[data-theme="light"] .faq-a,
html[data-theme="light"] .telwha-panel p{
  color: #5f5146;
}

html[data-theme="light"] .states-grid .state-item{
  background: linear-gradient(180deg, #fffdf8 0%, #fdf7ef 100%);
  border-color: rgba(104,82,62,.14);
  box-shadow: 0 8px 20px rgba(98,76,56,.06);
  color: #2b2119;
}

html[data-theme="light"] .states-grid .state-item:hover{
  border-color: rgba(213,128,52,.48);
  box-shadow: 0 14px 28px rgba(216,134,61,.12);
  background: linear-gradient(180deg, #fffaf1 0%, #fff3e4 100%);
}

html[data-theme="light"] .state-label{
  color: #7d6757;
}

html[data-theme="light"] .state-text{
  color: #5f5146;
}

html[data-theme="light"] .telwha-tab{
  background: #fffaf4;
  border-color: rgba(104,82,62,.14);
  color: #7a6b5f;
}

html[data-theme="light"] .telwha-tab.active{
  background: linear-gradient(135deg, #f5c696 0%, #e8a55c 52%, #d58034 100%);
  color: #2b2119;
  border-color: rgba(213,128,52,.48);
  box-shadow: 0 10px 24px rgba(216,134,61,.18);
}

html[data-theme="light"] .faq-item{
  border-top: 1px solid rgba(104,82,62,.12);
}

html[data-theme="light"] .btn{
  background: #fffaf4;
  border-color: rgba(104,82,62,.16);
  color: #2b2119;
  box-shadow: 0 8px 18px rgba(98,76,56,.08);
}

html[data-theme="light"] .btn-primary{
  background: linear-gradient(135deg, #f5c696 0%, #e8a55c 52%, #d58034 100%);
  color: #21150d;
  box-shadow: 0 16px 30px rgba(216,134,61,.22);
}

html[data-theme="light"] .btn-primary:hover{
  box-shadow: 0 18px 36px rgba(216,134,61,.28);
}

/* ANIMATION + RESPONSIVE */

.fade-in{
  opacity:0;
  transform:translateY(16px) scale(.99);
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.22,.61,.36,1);
}
.fade-in.in{opacity:1;transform:translateY(0) scale(1)}

@media(max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .states-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .hero-shell{border-radius:20px}
  .hero-grid{padding:18px 12px 14px}
  .states-grid{grid-template-columns:minmax(0,1fr)}
}