/* =========================
   TOKENS
   ========================= */

:root{
  --brand:#2563EB;
  --brand-dark:#0F172A;
  --brand-light:#EFF6FF;

  --bg-page:#FAFBFC;
  --bg-alt:#F4F7FB;

  --text-primary:#0F172A;
  --text-muted:#475569;
  --text-faint:#94A3B8;

  --border:#D6DCE5;
  --border-soft:#E7ECF2;

  --success:#16A34A;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-sm:0 2px 8px rgba(15,23,42,.05);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(37,99,235,.14);

  --container:1200px;

  --font-head:'Oswald', sans-serif;
  --font-body:'DM Sans', sans-serif;

  --transition:.25s cubic-bezier(.4,0,.2,1);
}

/* =========================
   GLOBAL
   ========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  overflow-x:hidden;
}

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

a{
  text-decoration:none;
}

.section{
  padding:110px 24px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}

/* =========================
   NAVBAR
   ========================= */

.navbar{
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter:blur(14px);
  background:rgba(250,251,252,.78);
  border-bottom:1px solid rgba(214,220,229,.55);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:2rem;
}

.nav-inner{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  display:flex;
  align-items:center;
}

.logo img{
  height:60px;
  width:auto;
}

.logo span{
  color:var(--brand);
}

.nav-links{
  display:flex;
  gap:2rem;
  align-items:center;
}

.nav-links a{
  color:var(--text-muted);
  font-size:.95rem;
  font-weight:500;
  transition:var(--transition);
}

.nav-links a:hover{
  color:var(--text-primary);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:.95rem 1.3rem;

  border-radius:12px;

  font-size:.9rem;
  font-weight:700;

  transition:var(--transition);
}

.btn-primary{
  background:linear-gradient(
    to bottom,
    #3B82F6,
    #2563EB
  );

  color:#fff;

  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.15),
    0 10px 24px rgba(37,99,235,.25);
}

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

.btn-secondary{
  background:#fff;
  color:var(--text-primary);
  border:1px solid var(--border);
}

.btn-secondary:hover{
  background:#F8FAFC;
}

/* =========================
   HERO
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
  padding:90px 24px 70px;
}

.hero::before{
  content:'';

  position:absolute;
  top:-200px;
  right:-120px;

  width:500px;
  height:500px;

  background:radial-gradient(
    circle,
    rgba(37,99,235,.16),
    transparent 70%
  );
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:5rem;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-bottom:1.4rem;
  padding:8px 14px;

  border:1px solid #D8E5FF;
  border-radius:999px;

  background:var(--brand-light);

  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--brand);
}

.hero-title{
  margin:0 0 1.5rem;

  font-family:var(--font-head);
  font-size:clamp(4rem,8vw,6.2rem);
  line-height:.92;
  letter-spacing:-.05em;
  font-weight:500;
}

.hero-title span{
  color:var(--brand);
}

.hero-text{
  max-width:620px;

  margin-bottom:2rem;

  font-size:1.08rem;
  line-height:1.8;

  color:var(--text-muted);
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;

  margin-bottom:2rem;
}

.hero-proof{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}

.hero-proof-item strong{
  display:block;

  margin-bottom:4px;

  font-size:1.15rem;
}

.hero-proof-item span{
  color:var(--text-muted);
  font-size:.9rem;
}

/* =========================
   HERO MOCKUP
   ========================= */

.hero-visual{
  position:relative;
}

.browser{
  position:relative;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:24px;

  background:#fff;

  box-shadow:var(--shadow-lg);

  animation:float 6s ease-in-out infinite;
}

.browser-top{
  display:flex;
  align-items:center;
  gap:8px;

  padding:16px 18px;

  border-bottom:1px solid var(--border-soft);

  background:#F8FAFC;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#CBD5E1;
}

.browser-body{
  padding:28px;
}

.mockup-card{
  margin-bottom:18px;

  padding:22px;

  border-radius:18px;

  background:#fff;

  border:1px solid var(--border-soft);

  box-shadow:var(--shadow-sm);
}

.mockup-header{
  height:18px;
  width:42%;
  border-radius:999px;
  background:#E2E8F0;

  margin-bottom:16px;
}

.mockup-line{
  height:12px;
  border-radius:999px;
  background:#E2E8F0;
  margin-bottom:10px;
}

.mockup-line.short{
  width:60%;
}

.mockup-image{
  height:180px;

  margin-top:18px;

  border-radius:16px;

  background:linear-gradient(
    135deg,
    #2563EB,
    #0F172A
  );
}

.floating-card{
  position:absolute;
  bottom:-25px;
  left:-30px;

  width:220px;

  padding:20px;

  border-radius:20px;

  background:rgba(255,255,255,.9);

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,.6);

  box-shadow:var(--shadow-md);
}

.floating-card h4{
  margin:0 0 8px;
  font-size:.9rem;
}

.floating-card p{
  margin:0;
  color:var(--text-muted);
  font-size:.82rem;
  line-height:1.6;
}

@keyframes float{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0px);}
}

/* =========================
   TRUST STRIP
   ========================= */

.trust{
  padding:30px 24px 0;
}

.trust-box{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;

  padding:24px 28px;

  border:1px solid var(--border);
  border-radius:22px;

  background:#fff;

  box-shadow:var(--shadow-sm);
}

.trust-item{
  flex:1;
  min-width:160px;
}

.trust-item strong{
  display:block;
  margin-bottom:6px;
  font-size:1.2rem;
}

.trust-item span{
  color:var(--text-muted);
  font-size:.9rem;
}

/* =========================
   SECTION HEADERS
   ========================= */

.section-heading{
  max-width:700px;
  margin:0 auto 4rem;
  text-align:center;
}

.section-heading h2{
  margin:0 0 1rem;

  font-family:var(--font-head);
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:500;
}

.section-heading p{
  margin:0;

  color:var(--text-muted);
  line-height:1.8;
}

/* =========================
   FEATURES
   ========================= */

.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}

.feature-card{
  padding:32px;

  border-radius:22px;

  background:#fff;

  border:1px solid var(--border);

  box-shadow:var(--shadow-sm);

  transition:var(--transition);
}

.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.feature-icon{
  width:54px;
  height:54px;

  margin-bottom:1.4rem;

  border-radius:16px;

  background:var(--brand-light);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--brand);

  font-weight:700;
}

.feature-card h3{
  margin:0 0 .8rem;
  font-size:1.1rem;
}

.feature-card p{
  margin:0;
  color:var(--text-muted);
  line-height:1.7;
}

/* =========================
   SHOWCASE
   ========================= */

.showcase{
  background:#0F172A;
  color:#fff;
}

.showcase .section-heading p{
  color:#CBD5E1;
}

.showcase-tabs{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;

  margin-bottom:3rem;
}

.showcase-tab{
  padding:.8rem 1.2rem;

  border-radius:999px;

  background:rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.08);

  color:#CBD5E1;

  cursor:pointer;

  transition:var(--transition);
}

.showcase-tab.active{
  background:#2563EB;
  color:#fff;
}

.showcase-preview{
  max-width:980px;
  margin:0 auto;

  overflow:hidden;

  border-radius:26px;

  border:1px solid rgba(255,255,255,.08);

  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.showcase-image{
  height:560px;

  background-size:cover;
  background-position:center;

  transition:opacity .35s ease;
}

/* =========================
   PROCESS
   ========================= */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}

.process-card{
  position:relative;
}

.process-number{
  font-family:var(--font-head);
  font-size:5rem;
  line-height:1;
  color:#DBEAFE;
}

.process-card h3{
  margin:.8rem 0;
  font-size:1.1rem;
}

.process-card p{
  margin:0;
  line-height:1.7;
  color:var(--text-muted);
}

/* =========================
   COMPARISON
   ========================= */

.comparison{
  background:var(--bg-alt);
}

.compare-wrap{
  overflow:hidden;

  border-radius:24px;

  border:1px solid var(--border);

  background:#fff;
}

.compare-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.compare-row div{
  padding:22px 26px;
  border-bottom:1px solid var(--border-soft);
}

.compare-row.header{
  background:#F8FAFC;
  font-weight:700;
}

.compare-row:last-child div{
  border-bottom:none;
}

.compare-old{
  color:#DC2626;
}

.compare-new{
  color:#16A34A;
  font-weight:600;
}

/* =========================
   TESTIMONIALS
   ========================= */

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.testimonial{
  padding:28px;

  border-radius:22px;

  background:#fff;

  border:1px solid var(--border);

  box-shadow:var(--shadow-sm);
}

.testimonial-stars{
  margin-bottom:1rem;
  color:#F59E0B;
}

.testimonial p{
  margin:0 0 1.4rem;

  line-height:1.8;

  color:var(--text-muted);
}

.testimonial strong{
  display:block;
}

/* =========================
   FINAL CTA
   ========================= */

.final-cta{
  position:relative;
  overflow:hidden;
}

.final-cta::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.14),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(37,99,235,.12),
      transparent 30%
    );
}

.cta-box{
  position:relative;

  padding:90px 40px;

  border-radius:30px;

  text-align:center;

  background:#fff;

  border:1px solid var(--border);

  box-shadow:var(--shadow-md);
}

.cta-box h2{
  margin:0 0 1rem;

  font-family:var(--font-head);
  font-size:clamp(3rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.04em;
  font-weight:500;
}

.cta-box p{
  max-width:650px;
  margin:0 auto 2rem;

  color:var(--text-muted);
  line-height:1.8;
}

/* =========================
   FOOTER
   ========================= */

.footer{
  padding:40px 24px 60px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;

  padding-top:30px;

  border-top:1px solid var(--border-soft);
}

.footer p,
.footer a{
  color:var(--text-muted);
  font-size:.92rem;
}

/* =========================
   HAMBURGER MENU
   ========================= */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: var(--transition);
}

.nav-hamburger:hover {
  background: var(--bg-alt);
}

.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}

/* Animate to X when open */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 24px 20px;
  background: rgba(250,251,252,.98);
  border-top: 1px solid var(--border-soft);
}

.nav-drawer.open {
  display: flex;
}

.nav-drawer a {
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  transition: var(--transition);
}

.nav-drawer a:last-child {
  border-bottom: none;
}

.nav-drawer a:hover {
  color: var(--text-primary);
}

.nav-drawer .btn {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

.nav-drawer .btn-primary {
  color: #fff;
}

/* =========================
   RESPONSIVE — 900px
   ========================= */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero {
    padding: 60px 24px 60px;
    text-align: center;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

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

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

  /* Hide the browser mockup on tablet/mobile — saves tons of space */
  .hero-visual {
    display: none;
  }

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

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

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

  /* Comparison: stack into 2-col (hide middle spacer) */
  .compare-row {
    grid-template-columns: 1fr 1fr;
  }

  .compare-row div:nth-child(2) {
    display: none;
  }

  .compare-row.header div:nth-child(2) {
    display: none;
  }

  .showcase-image {
    height: 360px;
  }

  .section {
    padding: 72px 24px;
  }
}

/* =========================
   RESPONSIVE — 640px (phones)
   ========================= */

@media (max-width: 640px) {

  /* Navbar */
  .nav-right {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    padding: 48px 20px 52px;
  }

  .hero-title {
    font-size: clamp(3rem, 12vw, 4.2rem);
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Sections */
  .section {
    padding: 60px 20px;
  }

  .section-heading {
    margin-bottom: 2.5rem;
  }

  /* Features: single col */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Process: single col */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Testimonials: single col */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Comparison: single col, stacked rows */
  .compare-row {
    grid-template-columns: 1fr;
  }

  .compare-row div:nth-child(2) {
    display: none;
  }

  .compare-row.header {
    display: none;
  }

  /* Add labels inline via data attributes */
  .compare-old::before {
    content: 'Traditional: ';
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: block;
    margin-bottom: 4px;
  }

  .compare-new::before {
    content: 'Shona: ';
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: block;
    margin-bottom: 4px;
  }

  .compare-row div {
    padding: 16px 20px;
  }

  /* Trust strip */
  .trust-box {
    flex-direction: column;
    gap: 1rem;
    padding: 20px 22px;
  }

  .trust-item {
    min-width: unset;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .trust-item strong {
    margin-bottom: 0;
    min-width: 52px;
  }

  /* CTA box */
  .cta-box {
    padding: 52px 24px;
  }

  /* Showcase tabs */
  .showcase-tabs {
    gap: .5rem;
  }

  .showcase-tab {
    padding: .6rem .9rem;
    font-size: .82rem;
  }

  .showcase-image {
    height: 240px;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
}

/* Mobile Padding Fix */
@media only screen and (max-width: 768px) {
    .logo {
        display: inline-block !important; /* Ensures the element can accept padding */
        padding-left: 15px !important;    /* Adjust the '15' to whatever looks best */
    }
}