:root{
  --ink:#12233A;
  --ink-2:#1D2433;
  --brand:#3056D3;      /* Voxera blue */
  --accent:#F6C443;     /* Voxera yellow */
  --bg:#F7F8FB;

  --nav-height:72px;    /* keep nav + hero aligned */
  --page-pad:5%;        /* same left/right pad for nav & hero */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:var(--bg);
}

/* ---------- Navbar ---------- */
header.nav-white{
  position:sticky; top:0; z-index:100;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
header::after{ content:none; }   /* remove old striped line */

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-height);
  padding:0 var(--page-pad);
}

.brand img{
  height:42px; width:auto; display:block; object-fit:contain;
  vertical-align:middle; /* centers vs. text */
}

.nav{ display:flex; gap:24px; align-items:center; }
.nav a{
  color:var(--ink);
  text-decoration:none; font-weight:600; font-size:15px;
  padding:8px 4px; position:relative;
}
.nav a:hover{ color:var(--brand); }
.nav a.active::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:2px; background:var(--brand); border-radius:2px;
}

/* ---------- Hero (full screen, white) ---------- */
.hero-full{
  background:#fff; color:var(--ink);
  width:100%;
  min-height:calc(100vh - var(--nav-height)); /* true full screen under nav */
  display:flex; align-items:center;
   position:relative; z-index:0;
}



.hero-inner{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; width:100%;
  max-width:1400px; margin:0 auto;
  padding:0 var(--page-pad);           /* same pad as navbar for left alignment */
}

.hero-copy h1{
  font-size:56px; line-height:1.1; margin:0 0 20px; font-weight:800;
}
.hero-copy h1 .blue{ color:var(--brand); }
.hero-copy h1 .yellow{ color:var(--accent); }

.hero-copy p{
  font-size:20px; line-height:1.6; color:#444; margin:0 0 28px;
}


@media (max-width: 768px) {
  .hero-inner {
    padding-top: 50px !important;  /* more space on mobile */
  }

  .hero-copy h1 {
    font-size: 32px !important;     /* slightly smaller */
    line-height: 1.2 !important;
  }
}

/* CTAs */
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
@media (max-width: 768px) {
  .cta-row {
    justify-content: center;   /* center align buttons */
  }
  .cta-row .btn {
    flex: 1 1 auto;            /* optional: buttons take equal width */
    max-width: 160px;          /* keeps them neat */
    text-align: center;
  }
}

.btn{
  display:inline-block; padding:14px 18px; border-radius:14px;
  font-weight:700; text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--accent); color:#3B2A00;
  box-shadow:0 8px 20px rgba(246,196,67,.35);
}
.btn-primary:hover{ box-shadow:0 10px 22px rgba(246,196,67,.45); }
.btn-outline{
  border:2px solid var(--brand); color:var(--brand);
}
.btn-outline:hover{ background:#f6f8fc; }

/* Hero image – no box, no shadow */
.hero-art{ text-align:right; background:none !important; box-shadow:none !important; border:none !important; }
.hero-art img{
  display:block; max-width:100%; height:auto; margin-left:auto;
  border-radius:0 !important; box-shadow:none !important; background:none !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);


  /* scale up slightly if you want it larger: */
  /* max-width:115%; transform:translateX(4%); */
}

/* ---------- WhatsApp FAB ---------- */
.wa-fab{
  position:fixed; right:18px; bottom:18px;
  background:#24D366; color:#0d3219;
  border-radius:999px; padding:12px 16px; font-weight:800; text-decoration:none;
  box-shadow:0 10px 22px rgba(36,211,102,.45); z-index:60;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy h1{ font-size:42px; }
  .hero-art img{ margin:20px auto 0; max-width:90%; transform:none; }
}

@media (max-width: 640px){
  .header-inner{ padding:0 16px; }
  .hero-inner{ padding:0 16px; }
  .hero-copy h1{ font-size:36px; }
  .btn{ padding:12px 16px; border-radius:12px; }
}


/* -------- Features Section -------- */


/* light background for features */
.features {
  background:#f5f8ff;   /* subtle light blue background */
  
  padding:72px 0;
  position:relative;
  z-index:2;
}

/* gentle multi-wave top edge (pure CSS, no SVG) */
.features::before{
  content:""; position:absolute; left:0; top:-120px;
  width:100%; height:120px; background:#f5f8ff; pointer-events:none; z-index:3;
  /* 3 smooth humps */
  clip-path: polygon(
    0% 70%,
    8% 67%, 16% 64%, 24% 66%, 32% 69%,
    40% 72%, 48% 68%, 56% 62%, 64% 65%, 72% 70%,
    80% 75%, 88% 73%, 96% 70%, 100% 72%,
    100% 100%, 0% 100%
  );
  box-shadow: 0 -8px 20px rgba(18,35,58,.04); /* subtle depth */
}
.features .container{ padding:0 var(--page-pad); }

.features-head h2{
  margin:0;
  font-size:36px;
  line-height:1.2;
  color:var(--ink);
  font-weight:800;
  background: linear-gradient(90deg,  var(--ink),var(--brand));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

.features-head .sub{
  margin:10px 0 28px;
  color:#5a6475;
  font-size:16px;
}

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

.feature-card{
  background:#fff;
  border:1px solid #eef1f6;
  border-radius:16px;
  padding:20px;
  box-shadow:0 6px 16px rgba(18,35,58,.04);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(18,35,58,.08);
  border-color:#e3e9f6;
}

.feature-card .icon{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; background:#f1f5ff; margin-bottom:10px;
}
.feature-card h3{
  margin:0 0 8px;
  font-size:18px; line-height:1.35; color:var(--ink); font-weight:800;
}
.feature-card p{
  margin:0; font-size:15px; line-height:1.6; color:#4a5568;
}

.badge{
  display:inline-block;
  font-size:12px; font-weight:700;
  background:#EAF2FF; color:#3056D3;
  padding:2px 8px; border-radius:999px; margin-right:6px;
}

/* Responsive */
@media (max-width: 1024px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .features{ padding:48px 0; }
  .features-grid{ grid-template-columns: 1fr; }
  .features-head h2{ font-size:28px; }
}
/* ------- Pricing ------- */
.pricing{
  background:#fff;
  padding:72px 0;
  margin-top:60px;
}
.pricing .container{ padding:0 var(--page-pad); }

/* Header + billing toggle */
.pricing-head{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:22px;
}
.pricing-head h2{
  margin:0; font-size:36px; line-height:1.2; font-weight:800; color:var(--ink);
}
.billing-toggle{
  display:flex; gap:8px; background:#f1f5ff;
  padding:6px; border-radius:12px;
}
.bill-btn{
  border:0; background:transparent; color:#30415f; font-weight:700;
  padding:8px 14px; border-radius:10px; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, color .15s ease;
}
.bill-btn:hover{ color:var(--brand); }
.bill-btn.active{
  background:#fff; color:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.bill-btn .save{ color:#2fb344; font-weight:800; margin-left:6px; }

/* Cards grid */
.pricing-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(3, 1fr);
  align-items:stretch;
}
.plan{
  background:#fff; border:1px solid #eef1f6; border-radius:18px;
  padding:22px;
  box-shadow:0 6px 16px rgba(18,35,58,.04);
  display:flex; flex-direction:column;
  gap:16px; /* space between head/list/cta */
}
.plan.highlight{
  border-color:#cfd9ff;
  box-shadow:0 18px 36px rgba(48,86,211,.15);
  transform:translateY(-4px);
  position:relative;
}
.plan .badge{
  position:absolute; top:14px; right:14px;
  background:#EAF2FF; color:var(--brand);
  font-size:12px; font-weight:800; padding:4px 8px; border-radius:999px;
}

/* Card head + price */
.plan-head h3{ margin:0 0 2px; font-size:20px; font-weight:800; color:var(--ink); }
.plan-head .tagline{ margin:0 0 8px; color:#5a6475; font-size:14px; }

.price{
  display:flex; align-items:baseline; gap:4px;
}
.currency{ font-weight:800; color:#475167; font-feature-settings:"tnum"; }
.num{ font-size:40px; font-weight:800; color:#0f1b2e; letter-spacing:-.5px; }
.per{ color:#5a6475; margin-left:4px; opacity:.8; }

/* Feature bullets */
.features-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px; color:#4a5568;
  flex:1; /* pushes CTA to bottom for equal heights */
}
.features-list li{
  display:flex; gap:10px; align-items:flex-start;
}
.features-list li::before{
  content:"✔"; color:#2fb344; margin-top:1px; font-weight:800;
}

/* Add-on note (optional) */
.addon{
  background:#fff9e8; border:1px dashed #f1d487; color:#6a5715;
  padding:8px 10px; border-radius:10px; font-size:14px;
}

/* CTA */
.btn.full{ width:100%; text-align:center; }

/* Footnote / link */
.compare-note{
  margin-top:14px; color:#5a6475; font-size:14px;
}
.compare-note a{ color:var(--brand); font-weight:700; text-decoration:none; }

/* Responsive */
@media (max-width: 1200px){
  .num{ font-size:36px; }
}
@media (max-width: 1024px){
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-head h2{ font-size:28px; }
  .plan{ padding:18px; transform:none; }
  .plan.highlight{ box-shadow:0 12px 28px rgba(48,86,211,.12); }
  .num{ font-size:34px; }
}
@media (max-width: 640px){
  .num{ font-size:30px; }
  .billing-toggle{ width:100%; justify-content:center; }
}


/* -------- How It Works -------- */
.how{
  background:#fff;
  padding:72px 0;
}
.how .container{ padding:0 var(--page-pad); }

.how-head h2{
  margin:0;
  font-size:36px; line-height:1.2; font-weight:800; color:var(--ink);
}
.how-head .sub{
  margin:10px 0 28px; color:#5a6475; font-size:16px;
}

/* Timeline */
.how-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:22px;
  grid-template-columns: repeat(3, 1fr);
  position:relative;
}
.how-steps::before{
  /* connecting line */
  content:""; position:absolute; left:0; right:0; top:34px;
  height:4px; background:linear-gradient(90deg,#eaf0ff, #dfe7ff);
  border-radius:4px;
}
.how-step{
  background:#fff; border:1px solid #eef1f6; border-radius:16px;
  padding:22px; box-shadow:0 6px 16px rgba(18,35,58,.04);
  position:relative;
}
.how-step .badge{
  position:absolute; top:-14px; left:22px;
  width:36px; height:36px; display:grid; place-items:center;
  background:#3056D3; color:#fff; font-weight:800; border-radius:999px;
  box-shadow:0 6px 16px rgba(48,86,211,.3);
}
.how-step h3{ margin:16px 0 8px; font-size:18px; font-weight:800; color:var(--ink); }
.how-step p{ margin:0 0 10px; color:#4a5568; font-size:15px; line-height:1.6; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  background:#EAF2FF; color:#3056D3; font-weight:700;
  padding:4px 10px; border-radius:999px; font-size:12px;
}

.bullets-mini{ display:flex; gap:8px; flex-wrap:wrap; }
.bullets-mini span{
  background:#f7f8fb; color:#425066; padding:3px 8px; border-radius:8px; font-size:12px;
}

/* Compact flow bar */
.how-flow{
  margin:24px 0 8px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:#f7f9ff; border:1px solid #eef1f6; border-radius:12px; padding:10px 14px;
}
.how-flow .f-item{
  display:flex; align-items:center; gap:8px; color:#1d2433; font-weight:700; font-size:14px;
}
.how-flow .dot{ width:8px; height:8px; border-radius:999px; background:#3056D3; display:inline-block; }
.how-flow .arrow{ color:#A7B2C8; font-weight:800; }

/* CTA row at bottom */
.how-cta{ display:flex; gap:14px; justify-content:center; margin-top:18px; }

/* Responsive */
@media (max-width: 1024px){
  .how-steps{ grid-template-columns:1fr; }
  .how-steps::before{ display:none; }
}


/* ------- Why it Works ------- */
.why{
  background:#f7f9ff;
  padding:72px 0;
}
.why-head h2{
  margin:0;
  font-size:32px;
  font-weight:800;
  color:var(--ink);
  text-align:center;
}
.why-head .sub{
  margin:10px 0 40px;
  color:#5a6475;
  text-align:center;
  font-size:16px;
}

.why-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:28px;
  max-width:1000px;
  margin:0 auto;
}
.why-card{
  background:#fff;
  border:1px solid #e6ecf8;
  border-radius:14px;
  padding:28px;
  text-align:center;
  box-shadow:0 6px 16px rgba(18,35,58,.04);
}
.why-card h3{
  font-size:38px;
  font-weight:800;
  color:var(--brand);
  margin:0 0 12px;
}
.why-card p{
  margin:0;
  color:#444;
  font-size:15px;
  line-height:1.5;
}

@media(max-width:1024px){
  .why-grid{ grid-template-columns:1fr; gap:18px; }
}


/* ------- Contact ------- */
.contact{
  background:#fff;
  padding:72px 0;
}
.contact .container{ padding:0 var(--page-pad); }

.contact-wrap{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:28px;
  align-items: stretch;   /* 👈 force both children to equal height */
}

.contact-info{
  background:#f7f9ff;
  border:1px solid #e6ecf8;
  border-radius:16px;
  padding:24px;

}
.contact-info h2{
  margin:0; font-size:32px; font-weight:800; color:var(--ink);
}
.contact-info .sub{
  margin:6px 0 14px; color:#5a6475;
}
.info-list{ display:grid; gap:12px; margin:12px 0 40px; }
.info-item{ display:flex; gap:12px; margin-top: 10px; align-items:flex-start; }
.info-item .icon{ font-size:18px; line-height:1.2; }
.info-item .label{ font-weight:700; color:#1d2433; }
.link{ color:var(--brand); text-decoration:none; font-weight:700; }
.inline-wa{ margin-top:6px; }

.contact-form{
  background:#fff;
  border:1px solid #eef1f6;
  border-radius:16px;
  padding:24px;
  box-shadow:0 6px 16px rgba(18,35,58,.04);
  height: 100%;           /* 👈 make them stretch fully */
}
.contact-form h3{
  margin:0 0 10px; font-size:20px; font-weight:800; color:var(--ink);
}

.contact-form .grid{
  display:grid; gap:14px; grid-template-columns:1fr 1fr;
}
.contact-form label{ display:flex; flex-direction:column; gap:6px; }
.contact-form label.full{ grid-column:1 / -1; }
.contact-form input,
.contact-form textarea{
  border:1px solid #e6ecf0;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  font:inherit; color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#cfd9ff;
  box-shadow:0 0 0 3px rgba(48,86,211,.12);
}


.contact-form .form-actions {
  display: flex;
  justify-content: center;  /* center buttons horizontally */
  gap: 12px;                /* space between buttons */
  flex-wrap: wrap;          /* allow wrapping if screen is too narrow */
}

.contact-form .form-actions .btn {
  flex: 1 1 auto;           /* make both grow evenly */
  max-width: 180px;         /* control width */
  text-align: center;
}

.send-row{
  display:flex; gap:12px; margin-top:10px; flex-wrap:wrap;
}

.send-row .btn{
  flex: 1 1 auto;           /* make both grow evenly */
  max-width: 180px;         /* control width */
  text-align: center;
}


.tiny-note{
  margin:8px 0 0; font-size:12px; color:#6b7280;
}

@media (max-width: 1024px){
  .contact-wrap{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .contact-form .grid{ grid-template-columns:1fr; }
}

/* Hide flow bar on mobile */
@media (max-width: 768px) {
  .how-flow {
    display: none;
  }
}

/* Show it normally on larger screens */
@media (min-width: 769px) {
  .how-flow {
    display: block; /* or flex/grid depending on your layout */
  }
}

/* Give mobile side-gutters to the section */
@media (max-width: 768px){
  .why .container{ padding:0 16px; }          /* side padding */
  .why-grid{ gap:16px; }                       /* a bit tighter gap */
  .why-card{ border-radius:14px; }             /* keep the rounded look */
}



/* --- Navbar / Breadcrumb toggle --- */
/* Hide hamburger by default */
.hamburger {
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}

/* Mobile menu hidden initially */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  padding: 12px 20px;
  border-top: 1px solid #eee;
}

.mobile-menu a {
  padding: 10px 0;
  color: #12233A;
  font-weight: 600;
  text-decoration: none;
}
.mobile-menu a:hover {
  color: var(--brand);
}

/* Mobile rules */
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .hamburger { display: block; }
}