:root{
  --bg: #0b1020;
  --bg-soft: #121934;
  --surface: rgba(255, 255, 255, 0.08);
  --surface-2: #ffffff;
  --surface-3: #f6f8fc;
  --text: #eef2ff;
  --text-dark: #111827;
  --muted: #c7d2fe;
  --muted-dark: #5b6477;
  --line: rgba(255, 255, 255, 0.12);
  --line-dark: #e7eaf3;
  --brand: #22c55e;
  --brand-2: #7c3aed;
  --brand-3: #38bdf8;
  --shadow: 0 20px 60px rgba(6, 10, 25, 0.28);
  --container: 1200px;
  --transition: 0.25s ease;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.2), transparent 30%),
    radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.12), transparent 24%),
    linear-gradient(180deg, #0a1020 0%, #10172e 48%, #f7f9fd 48%, #f7f9fd 100%);
  color:var(--text-dark);
  line-height:1.6;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin:0 auto;
}

.announcement-bar{
  position:sticky;
  top:0;
  z-index:1002;
  background:linear-gradient(90deg, #0f766e, #0891b2);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.15);
}

.announcement-inner{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
  flex-wrap:wrap;
  padding:0.4rem 0;
  font-size:0.92rem;
  font-weight:600;
}

.announcement-inner a{
  color:#fff;
  text-decoration:underline;
}

.site-header{
  position:sticky;
  top:44px;
  z-index:1001;
  backdrop-filter:blur(16px);
  background:rgba(10, 16, 32, 0.88);
  border-bottom:1px solid var(--line);
}

.nav-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:82px;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.85rem;
  min-width:0;
}

.brand-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-text strong{
  color:#fff;
  font-size:1rem;
  letter-spacing:-0.02em;
}

.brand-text span{
  color:var(--muted);
  font-size:0.78rem;
}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:0.35rem;
}

.nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:0.55rem;
  margin:0;
  padding:0;
}

.nav-item{
  position:relative;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:46px;
  padding:0 1rem;
  border-radius:999px;
  color:#e7eaf9;
  font-weight:700;
  font-size:0.95rem;
  line-height:1;
  border:1px solid transparent;
  background:transparent;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}

.nav-link:hover,
.nav-item:focus-within > .nav-link{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.08);
}

.has-dropdown > .nav-link::after{
  content:"";
  width:0.45rem;
  height:0.45rem;
  display:inline-block;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  opacity:0.9;
  margin-left:0.1rem;
}

.dropdown{
  position:absolute;
  top:calc(100% + 0.55rem);
  left:0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--line-dark);
  border-radius:18px;
  padding:0.6rem;
  box-shadow:0 18px 45px rgba(15, 23, 42, 0.14);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity var(--transition), transform var(--transition);
}

.dropdown a{
  display:block;
  padding:0.8rem 0.9rem;
  border-radius:12px;
  color:var(--text-dark);
  font-weight:600;
}

.dropdown a:hover{
  background:var(--surface-3);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 1.1rem;
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand), #16a34a);
  color:#061113;
  font-weight:800;
  box-shadow:0 10px 24px rgba(34, 197, 94, 0.24);
}

.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  width:48px;
  height:48px;
  border-radius:14px;
  cursor:pointer;
}

.mobile-panel{
  display:none;
  padding:0 0 1rem;
}

.mobile-panel.open{
  display:block;
}

.mobile-group{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  border-radius:20px;
  padding:0.5rem;
}

.mobile-group a,
.mobile-group summary{
  display:block;
  width:100%;
  padding:0.95rem 1rem;
  border-radius:14px;
  color:#eef2ff;
  font-weight:600;
}

.mobile-group a:hover,
.mobile-group summary:hover{
  background:rgba(255,255,255,0.08);
}

.mobile-group details{
  border-top:none;
  padding-top:0;
  margin-top:0;
}

.mobile-group summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:2.25rem;
}

.mobile-group summary::after{
  content:"";
  position:absolute;
  right:1rem;
  top:50%;
  width:0.5rem;
  height:0.5rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
  transition:transform var(--transition);
}

.mobile-group details[open] summary::after{
  transform:translateY(-35%) rotate(225deg);
}

.mobile-group summary::-webkit-details-marker{
  display:none;
}

.mobile-group details a{
  padding-left:1.25rem;
  color:#dbe4ff;
}

.hero-section{
  position:relative;
  padding:4.5rem 0 4rem;
  color:var(--text);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap:2rem;
  align-items:center;
}

.eyebrow,
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-bottom:0.9rem;
  font-size:0.84rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:800;
}

.eyebrow{
  color:#c4b5fd;
}

.section-kicker{
  color:#6d28d9;
}

.hero-copy{
  max-width:680px;
}

.hero-copy h1{
  margin:0;
  font-size:clamp(2.4rem, 4.8vw, 4.35rem);
  line-height:1.02;
  letter-spacing:-0.04em;
  max-width:11ch;
}

.hero-text{
  margin:1rem 0 0;
  max-width:58ch;
  color:var(--muted);
  font-size:1.07rem;
}

.hero-actions{
  display:flex;
  gap:0.85rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 1.25rem;
  border-radius:999px;
  font-weight:800;
  border:none;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:linear-gradient(135deg, var(--brand), #16a34a);
  color:#061113;
  box-shadow:0 12px 26px rgba(34, 197, 94, 0.22);
}

.btn-secondary{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border:1px solid var(--line);
}

.hero-points{
  display:grid;
  gap:0.6rem;
  margin:1.35rem 0 0;
  padding:0;
  list-style:none;
}

.hero-points li{
  position:relative;
  padding-left:1.4rem;
  color:#dbe4ff;
}

.hero-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.58rem;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--brand-3));
}

.hero-visual{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero-card{
  width:100%;
  max-width:470px;
  border-radius:28px;
  overflow:hidden;
}

.hero-card-main{
  background:transparent;
  box-shadow:none;
}

.hero-card-main img{
  width:100%;
  height:auto;
  object-fit:contain;
}

.logo-strip,
.section{
  padding:4.5rem 0;
}

.logo-strip{
  background:#f7f9fd;
}

.center{
  text-align:center;
}

.section-heading{
  max-width:760px;
  margin-bottom:2rem;
}

.section-heading h2{
  margin:0;
  font-size:clamp(1.9rem, 3vw, 3rem);
  line-height:1.1;
  letter-spacing:-0.03em;
  color:var(--text-dark);
}

.section-heading p{
  margin:0.85rem 0 0;
  color:var(--muted-dark);
  font-size:1.02rem;
}

.proof-grid,
.card-grid{
  display:grid;
  gap:1.2rem;
}

.proof-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  margin-top:1.25rem;
}

.proof-card{
  padding:1rem 1.1rem;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line-dark);
  text-align:center;
  font-weight:800;
  color:#1f2a44;
  box-shadow:0 12px 30px rgba(15, 23, 42, 0.04);
}

.three-up{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.four-up{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.feature-card,
.resource-card,
.testimonial-card{
  background:#fff;
  border:1px solid var(--line-dark);
  border-radius:24px;
  padding:1.35rem;
  box-shadow:0 12px 30px rgba(15, 23, 42, 0.04);
}

.feature-card h3,
.resource-card h3{
  margin:0.75rem 0 0.4rem;
  font-size:1.15rem;
  color:var(--text-dark);
}

.feature-card p,
.resource-card p{
  margin:0;
  color:var(--muted-dark);
}

.feature-card a,
.resource-card{
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.feature-card a{
  display:inline-block;
  margin-top:1rem;
  color:#4c1d95;
  font-weight:800;
}

.resource-card:hover,
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(15, 23, 42, 0.08);
  border-color:#d9dff0;
}

.icon-badge,
.step-badge{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  flex-shrink:0;
}

.icon-badge{
  background:linear-gradient(135deg, #ede9fe, #dbeafe);
  color:#4c1d95;
}

.alt-section{
  background:linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}

.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}

.process-list{
  display:grid;
  gap:1rem;
  margin:1.4rem 0 1.5rem;
}

.process-item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line-dark);
}

.step-badge{
  background:linear-gradient(135deg, #7c3aed, #38bdf8);
  color:#fff;
}

.process-item h3{
  margin:0 0 0.3rem;
  font-size:1.05rem;
}

.process-item p{
  margin:0;
  color:var(--muted-dark);
}

.media-panel{
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line-dark);
  box-shadow:0 18px 40px rgba(15, 23, 42, 0.08);
}

.media-panel img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.testimonial-card{
  margin:0;
}

.testimonial-card p{
  margin:0;
  color:#2b3346;
  font-style:italic;
}

.testimonial-card footer{
  margin-top:0.8rem;
  font-size:0.95rem;
  font-weight:700;
  color:#6b7280;
}

.cta-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.6rem;
  border-radius:28px;
  background:linear-gradient(135deg, #0f172a, #312e81);
  color:#fff;
  box-shadow:var(--shadow);
}

.cta-kicker{
  color:#c4b5fd;
}

.cta-panel h2{
  margin:0.15rem 0 0;
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  line-height:1.08;
}

.cta-panel p{
  margin:0.6rem 0 0;
  color:#c7d2fe;
  max-width:58ch;
}

.cta-panel-actions{
  display:flex;
  gap:0.85rem;
  flex-wrap:wrap;
}

.cta-alt{
  background:rgba(255,255,255,0.08);
  color:#fff;
}

.site-footer{
  margin-top:4rem;
  padding:3rem 0 2rem;
  background:#0a1020;
  color:#dbe4ff;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:1.5rem;
}

.footer-brand p,
.footer-col a{
  color:#b9c4eb;
}

.footer-brand p{
  max-width:34ch;
}

.footer-col h3{
  margin:0 0 0.75rem;
  color:#fff;
  font-size:1rem;
}

.footer-col{
  display:grid;
  gap:0.55rem;
}

.footer-col a:hover{
  color:#fff;
}

.footer-bottom{
  margin-top:2rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  color:#93a3d9;
  font-size:0.92rem;
}

.footer-social{
  display:flex;
  gap:0.85rem;
  flex-wrap:wrap;
}

@media (max-width: 1024px){
  .hero-grid{
    grid-template-columns:minmax(0, 1fr) minmax(260px, 0.8fr);
    gap:1.5rem;
  }

  .hero-copy h1{
    font-size:clamp(2.15rem, 4.5vw, 3.6rem);
    max-width:12ch;
  }

  .hero-card{
    max-width:400px;
  }

  .proof-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .four-up{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .hero-grid,
  .split-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .hero-grid{
    gap:1.5rem;
  }

  .hero-copy,
  .hero-copy h1{
    max-width:none;
  }

  .hero-visual{
    justify-content:center;
  }

  .hero-card{
    max-width:520px;
  }

  .three-up{
    grid-template-columns:1fr;
  }

  .cta-panel{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 980px){
  .desktop-nav{
    display:none;
  }

  .nav-toggle{
    display:grid;
    place-items:center;
  }
}

@media (max-width: 640px){
  .announcement-inner{
    font-size:0.82rem;
  }

  .nav-shell{
    min-height:72px;
  }

  .brand-text span{
    display:none;
  }

  .brand-logo{
    width:44px;
    height:44px;
  }

  .hero-section,
  .logo-strip,
  .section{
    padding:3.25rem 0;
  }

  .hero-grid{
    gap:1.25rem;
  }

  .hero-copy h1{
    font-size:clamp(2rem, 11vw, 3rem);
  }

  .hero-text{
    font-size:1rem;
  }

  .proof-grid,
  .four-up{
    grid-template-columns:1fr;
  }

  .hero-card{
    max-width:420px;
  }

  .btn,
  .nav-cta{
    width:100%;
  }

  .hero-actions,
  .cta-panel-actions{
    width:100%;
    flex-direction:column;
  }

  .feature-card,
  .resource-card,
  .testimonial-card,
  .process-item{
    border-radius:20px;
  }
}