/* Ultraax Website - HTML/CSS/JS
   Palette:
   #6D28D9 Royal Purple
   #7C3AED Deep Violet
   #F59E0B Orange/Amber
   #FCD34D Soft Yellow
   #0F172A Dark Charcoal
   #F8FAFC Soft White
   #E5E7EB Light Gray
*/

:root{
  --purple:#6D28D9;
  --violet:#7C3AED;
  --amber:#F59E0B;
  --yellow:#FCD34D;
  --dark:#0F172A;
  --white:#F8FAFC;
  --gray:#E5E7EB;

  --text:#0b1220;
  --muted:#667085;

  --radius:18px;
  --shadow: 0 18px 60px rgba(2,6,23,.18);
  --shadow2: 0 10px 30px rgba(2,6,23,.16);

  --grid: linear-gradient(rgba(248,250,252,.14) 1px, transparent 1px),
          linear-gradient(90deg, rgba(248,250,252,.14) 1px, transparent 1px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% 0%, rgba(124,58,237,.22), transparent 60%),
              radial-gradient(900px 500px at 0% 40%, rgba(245,158,11,.14), transparent 60%),
              var(--white);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.bg-blobs{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.blob{
  position:absolute;
  filter: blur(26px);
  opacity:.75;
  border-radius:999px;
  transform: translateZ(0);
}
.b1{ width:520px; height:520px; left:-140px; top:120px; background:rgba(109,40,217,.22); }
.b2{ width:560px; height:560px; right:-180px; top:-120px; background:rgba(124,58,237,.22); }
.b3{ width:520px; height:520px; right:10%; bottom:-220px; background:rgba(245,158,11,.16); }

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(248,250,252,.72);
  border-bottom: 1px solid rgba(229,231,235,.7);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:Poppins, Inter, sans-serif;
}
.brand-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  filter: drop-shadow(0 10px 20px rgba(109,40,217,.18));
}
.brand-name{
  font-weight:800;
  letter-spacing:.02em;
}

.nav{ position:relative; }
.nav-toggle{
  display:none;
  border:1px solid rgba(229,231,235,.9);
  background:rgba(248,250,252,.9);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:rgba(15,23,42,.86);
  margin:4px 0;
  border-radius:99px;
}
.nav-list{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list a{
  font-weight:600;
  color: rgba(15,23,42,.82);
}
.nav-list a:hover{ color: var(--violet); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius: 14px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn-small{ padding:10px 14px; border-radius: 12px; font-weight:700; }
.btn-full{ width:100%; }
.btn-amber{
  background: linear-gradient(135deg, var(--amber), var(--yellow));
  color:#1a1206;
  box-shadow: 0 16px 40px rgba(245,158,11,.25);
}
.btn-amber:hover{ transform: translateY(-2px); box-shadow: 0 22px 55px rgba(245,158,11,.28); }
.btn-ghost{
  background: rgba(248,250,252,.8);
  border-color: rgba(229,231,235,.95);
  color: rgba(15,23,42,.92);
}
.btn-ghost:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); }

.hero{
  position:relative;
  padding: 56px 0 0;
  background: radial-gradient(900px 600px at 15% 10%, rgba(245,158,11,.22), transparent 60%),
              radial-gradient(1200px 700px at 70% 0%, rgba(124,58,237,.30), transparent 60%),
              linear-gradient(135deg, rgba(109,40,217,.92), rgba(124,58,237,.90));
  color: var(--white);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background-image: var(--grid);
  background-size: 44px 44px;
  opacity:.12;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 70%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap:34px;
  align-items:center;
  position:relative;
  z-index:1;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(248,250,252,.20);
  background: rgba(248,250,252,.10);
  border-radius:999px;
  font-weight:600;
  color: rgba(248,250,252,.92);
}
.spark{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--amber), var(--yellow));
  box-shadow: 0 0 0 6px rgba(245,158,11,.18);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.2); opacity: .85; }
}
.hero h1{
  font-family:Poppins, Inter, sans-serif;
  font-size: clamp(2.05rem, 4vw, 3.1rem);
  line-height: 1.08;
  margin:16px 0 12px;
  letter-spacing:-.02em;
}
.grad-text{
  background: linear-gradient(135deg, var(--yellow), #ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(248,250,252,.88);
  max-width: 58ch;
  margin:0 0 18px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 10px 0 18px;
}
.hero-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.meta-card{
  padding:14px 14px;
  border-radius: 16px;
  background: rgba(15,23,42,.22);
  border:1px solid rgba(248,250,252,.18);
}
.meta-label{
  font-size:.85rem;
  color: rgba(248,250,252,.74);
  margin-bottom:6px;
}
.meta-value{
  font-weight:800;
  letter-spacing:.01em;
}

.hero-visual{ position:relative; }
.glass-card{
  border-radius: 22px;
  background: rgba(248,250,252,.10);
  border: 1px solid rgba(248,250,252,.18);
  box-shadow: 0 26px 70px rgba(2,6,23,.35);
  overflow:hidden;
  transform: translateZ(0);
}
.glass-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(248,250,252,.16);
  background: rgba(248,250,252,.06);
}
.dot{
  width:10px; height:10px; border-radius:99px;
  opacity:.95;
}
.d1{ background: rgba(245,158,11,.95); }
.d2{ background: rgba(252,211,77,.95); }
.d3{ background: rgba(248,250,252,.95); }
.glass-title{ margin-left:auto; font-weight:700; color: rgba(248,250,252,.86); font-size:.92rem; }

.glass-body{ padding:18px 18px 20px; }
.chart{
  height:130px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  padding: 8px;
  border-radius: 18px;
  background: rgba(15,23,42,.22);
  border:1px solid rgba(248,250,252,.14);
}
.bar{
  width:18%;
  height: var(--h);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(252,211,77,.95), rgba(245,158,11,.86));
  box-shadow: 0 18px 40px rgba(245,158,11,.22);
  transform-origin: bottom;
  animation: barIn 900ms ease both;
}
.bar:nth-child(2){ animation-delay: 80ms; }
.bar:nth-child(3){ animation-delay: 140ms; }
.bar:nth-child(4){ animation-delay: 210ms; }
.bar:nth-child(5){ animation-delay: 280ms; }
@keyframes barIn{
  from{ transform: scaleY(.4); opacity:.5; }
  to{ transform: scaleY(1); opacity:1; }
}

.stats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.stat{
  padding:12px;
  border-radius: 16px;
  background: rgba(248,250,252,.08);
  border:1px solid rgba(248,250,252,.16);
}
.stat-k{
  font-family:Poppins, Inter, sans-serif;
  font-weight:800;
  font-size:1.4rem;
}
.stat-l{
  margin-top:3px;
  font-size:.9rem;
  color: rgba(248,250,252,.78);
}

.tag-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.tag{
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.22);
  border:1px solid rgba(248,250,252,.16);
  font-weight:700;
  font-size:.85rem;
  color: rgba(248,250,252,.84);
}

.floating-badge{
  position:absolute;
  right:-8px;
  bottom:-10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(248,250,252,.12);
  border:1px solid rgba(248,250,252,.18);
  box-shadow: 0 22px 60px rgba(2,6,23,.25);
  backdrop-filter: blur(10px);
  transform: rotate(-2deg);
}
.badge-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--amber), var(--yellow));
  color:#1a1206;
  font-weight:900;
}
.badge-text{ font-weight:800; color: rgba(248,250,252,.92); }

.hero-bottom{
  position:relative;
  z-index:1;
  margin-top: 44px;
  padding: 16px 0 26px;
  border-top: 1px solid rgba(248,250,252,.14);
  background: rgba(15,23,42,.10);
}
.trust-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}
.trust-item{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(248,250,252,.10);
  border:1px solid rgba(248,250,252,.14);
  font-weight:700;
  color: rgba(248,250,252,.90);
}

/* Sections */
.section{
  padding: 74px 0;
}
.section-soft{
  background: linear-gradient(180deg, rgba(109,40,217,.06), rgba(245,158,11,.05), rgba(248,250,252,0));
}
.section-dark{
  background: radial-gradient(900px 500px at 25% 0%, rgba(124,58,237,.22), transparent 60%),
              radial-gradient(800px 460px at 75% 20%, rgba(245,158,11,.14), transparent 60%),
              var(--dark);
  color: var(--white);
}
.section-head{
  max-width: 68ch;
  margin-bottom: 24px;
}
.section-head h2{
  font-family:Poppins, Inter, sans-serif;
  margin:0 0 8px;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing:-.02em;
}
.section-head p{
  margin:0;
  color: rgba(15,23,42,.74);
  line-height:1.7;
}
.section-dark .section-head p{
  color: rgba(248,250,252,.80);
}

/* About */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  margin-top: 18px;
}
.about-card{
  padding:22px;
  border-radius: var(--radius);
  background: rgba(248,250,252,.92);
  border:1px solid rgba(229,231,235,.85);
  box-shadow: var(--shadow2);
}
.about-card h3{
  margin:0 0 10px;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:-.01em;
}
.checklist{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.78);
  line-height: 1.8;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}
.chip{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(109,40,217,.08);
  border:1px solid rgba(109,40,217,.18);
  color: rgba(15,23,42,.84);
  font-weight:700;
  font-size:.92rem;
}
.mini-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 16px;
}

/* Cards */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 18px;
}
.card{
  padding:22px;
  border-radius: var(--radius);
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 20% 0%, rgba(109,40,217,.16), transparent 60%),
              radial-gradient(420px 220px at 80% 10%, rgba(245,158,11,.12), transparent 60%);
  opacity:0;
  transition: opacity .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(109,40,217,.22);
}
.card:hover::before{ opacity:1; }
.card > *{ position:relative; }
.card-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(252,211,77,.95));
  color:#1a1206;
  font-size: 1.2rem;
  font-weight:900;
  box-shadow: 0 18px 40px rgba(245,158,11,.18);
}
.card h3{
  margin:14px 0 10px;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:-.01em;
}
.card ul{
  margin:0;
  padding-left: 18px;
  color: rgba(15,23,42,.78);
  line-height:1.75;
}

/* Timeline */
.timeline{
  position:relative;
  margin-top: 22px;
}
.tline{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 18px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(229,231,235,.90);
  background: rgba(248,250,252,.94);
  box-shadow: var(--shadow2);
  margin-bottom: 14px;
  position:relative;
}
.tbadge{
  width:40px;
  height:40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, var(--purple), var(--violet));
  color: var(--white);
  box-shadow: 0 16px 40px rgba(109,40,217,.22);
}
.tcontent h3{
  margin:0 0 6px;
  font-family:Poppins, Inter, sans-serif;
}
.tcontent p{ margin:0; color: rgba(15,23,42,.76); line-height:1.7; }
.tline-line{
  position:absolute;
  left: 38px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(245,158,11,.55), rgba(109,40,217,.60));
  opacity:.25;
}

/* Why */
.why-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  margin-top: 18px;
}
.why-card{
  padding:22px;
  border-radius: var(--radius);
  background: rgba(248,250,252,.08);
  border: 1px solid rgba(248,250,252,.14);
  box-shadow: 0 26px 70px rgba(2,6,23,.25);
}
.why-card h3{
  margin:0 0 8px;
  font-family:Poppins, Inter, sans-serif;
}
.why-card p{
  margin:0;
  color: rgba(248,250,252,.80);
  line-height:1.7;
}

/* Contact */
.contact-wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(229,231,235,.90);
  background: radial-gradient(700px 380px at 20% 0%, rgba(109,40,217,.10), transparent 60%),
              radial-gradient(600px 340px at 80% 10%, rgba(245,158,11,.08), transparent 60%),
              rgba(248,250,252,.94);
  box-shadow: var(--shadow);
}
.contact-left h2{
  margin:0 0 10px;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:-.02em;
}
.contact-left p{
  margin:0 0 14px;
  color: rgba(15,23,42,.76);
  line-height:1.75;
}
.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0 14px;
}
.contact-info{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.info-pill{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(109,40,217,.08);
  border:1px solid rgba(109,40,217,.18);
  font-weight:700;
}
.info-k{ color: rgba(15,23,42,.70); margin-right:6px; }
.info-v{ color: rgba(15,23,42,.92); }

.contact-form{
  padding: 16px;
  border-radius: 20px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(229,231,235,.85);
}
.form-head{ margin-bottom: 12px; }
.form-title{ font-family:Poppins, Inter, sans-serif; font-weight:800; }
.form-sub{ margin-top:4px; color: rgba(15,23,42,.70); font-size:.95rem; }

label{ display:block; margin-top: 10px; }
label span{
  display:block;
  font-weight:700;
  color: rgba(15,23,42,.78);
  margin-bottom:6px;
  font-size:.92rem;
}
input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.95);
  padding: 12px 12px;
  font: inherit;
  outline:none;
  background: rgba(248,250,252,.95);
}
input:focus, textarea:focus{
  border-color: rgba(109,40,217,.35);
  box-shadow: 0 0 0 4px rgba(109,40,217,.12);
}
.form-note{
  margin:10px 0 0;
  color: rgba(15,23,42,.64);
  font-size:.9rem;
}

/* Footer */
.footer{
  padding: 34px 0 0;
  border-top: 1px solid rgba(229,231,235,.9);
  background: rgba(248,250,252,.86);
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom: 18px;
}
.footer-brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.footer-logo{
  width:42px;
  height:42px;
  object-fit:contain;
}
.footer-name{
  font-family:Poppins, Inter, sans-serif;
  font-weight:900;
}
.footer-tag{
  margin-top:2px;
  color: rgba(15,23,42,.70);
}
.footer-cols{
  display:flex;
  gap:36px;
}
.fcol{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fhead{
  font-weight:900;
  font-family:Poppins, Inter, sans-serif;
  margin-bottom: 2px;
}
.fcol a{
  color: rgba(15,23,42,.76);
  font-weight:600;
}
.fcol a:hover{ color: var(--violet); }
.footer-bottom{
  padding: 14px 0;
  border-top: 1px solid rgba(229,231,235,.9);
  color: rgba(15,23,42,.70);
}

/* WhatsApp FAB */
.wa-fab{
  position:fixed;
  right: 16px;
  bottom: 16px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--amber), var(--yellow));
  color:#1a1206;
  font-weight:900;
  box-shadow: 0 18px 50px rgba(245,158,11,.24);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-fab:hover{ transform: translateY(-3px); box-shadow: 0 24px 70px rgba(245,158,11,.28); }
.wa-dot{
  width:10px; height:10px; border-radius:99px;
  background: rgba(16,185,129,.95);
  box-shadow: 0 0 0 6px rgba(16,185,129,.20);
  animation: pulse 1.8s ease-in-out infinite;
}
.wa-text{ letter-spacing:.02em; }

/* Reveal animations (safe fallback)
   - Content is VISIBLE by default.
   - Only hides before animation when JS is enabled (.js on <html>).
*/
.reveal{
  opacity:1;
  transform:none;
}
.js .reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.show{
  opacity:1;
  transform: translateY(0);
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-meta{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-wrap{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction:column; }
  .footer-cols{ gap:22px; }
}

@media (max-width: 720px){
  .nav-toggle{ display:inline-block; }
  .nav-list{
    position:absolute;
    right:0;
    top: 52px;
    width: min(320px, calc(100vw - 24px));
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
    border-radius: 16px;
    border:1px solid rgba(229,231,235,.95);
    background: rgba(248,250,252,.95);
    box-shadow: var(--shadow2);
    display:none;
  }
  .nav-list.open{ display:flex; }
  .nav-list li{ padding: 6px 8px; }
  .nav-cta{ padding: 4px 8px; }
  .cards-grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr; }
  .hero{ padding-top: 46px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }
  .hero-sub{ font-size: 1rem; }
}


/* Testimonials */
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 18px;
}
.testi-card{
  padding:22px;
  border-radius: var(--radius);
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.testi-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 20% 0%, rgba(109,40,217,.14), transparent 60%),
              radial-gradient(420px 220px at 80% 10%, rgba(245,158,11,.10), transparent 60%);
  opacity:.75;
  pointer-events:none;
}
.testi-card > *{ position:relative; }
.testi-top{
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar{
  width:44px;
  height:44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#1a1206;
  background: linear-gradient(135deg, var(--amber), var(--yellow));
  box-shadow: 0 16px 40px rgba(245,158,11,.18);
  font-family:Poppins, Inter, sans-serif;
}
.tname{ font-weight:900; font-family:Poppins, Inter, sans-serif; }
.trole{ color: rgba(15,23,42,.68); font-weight:600; font-size:.92rem; }
.stars{
  margin-left:auto;
  font-weight:900;
  color: rgba(245,158,11,.95);
  letter-spacing:.08em;
}
.ttext{
  margin: 14px 0 12px;
  color: rgba(15,23,42,.78);
  line-height:1.75;
}
.tmeta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill-mini{
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(109,40,217,.08);
  border:1px solid rgba(109,40,217,.18);
  font-weight:800;
  font-size:.85rem;
  color: rgba(15,23,42,.82);
}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 18px;
}
.price-card{
  padding:22px;
  border-radius: var(--radius);
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.price-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(109,40,217,.22);
}
.price-card.featured{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 26px 70px rgba(245,158,11,.16);
}
.ribbon{
  position:absolute;
  top:14px;
  right:-46px;
  transform: rotate(35deg);
  background: linear-gradient(135deg, var(--amber), var(--yellow));
  color:#1a1206;
  font-weight:900;
  padding:8px 60px;
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(245,158,11,.22);
}
.price-head{ margin-bottom: 10px; }
.price-name{ font-weight:900; font-family:Poppins, Inter, sans-serif; font-size:1.2rem; }
.price-tag{ color: rgba(15,23,42,.68); font-weight:600; margin-top:4px; }
.price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin: 10px 0 12px;
}
.rs{ font-weight:900; color: rgba(15,23,42,.72); }
.amt{ font-weight:900; font-size:2rem; font-family:Poppins, Inter, sans-serif; letter-spacing:-.02em; }
.per{ color: rgba(15,23,42,.68); font-weight:700; }
.price-list{
  margin:0 0 14px;
  padding-left:18px;
  color: rgba(15,23,42,.78);
  line-height:1.8;
}
.pricing-note{
  margin-top: 18px;
  font-weight:700;
  color: rgba(15,23,42,.74);
}
.pricing-note a{ color: var(--violet); }

/* Calendar */
.calendar-card{
  border-radius: 24px;
  border: 1px solid rgba(229,231,235,.90);
  background: rgba(248,250,252,.94);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.calendar-card iframe{
  width:100%;
  height: 640px;
  border:0;
  display:block;
}
.calendar-help{
  padding: 12px 14px;
  border-top: 1px solid rgba(229,231,235,.90);
  color: rgba(15,23,42,.70);
}
.calendar-help code{
  background: rgba(15,23,42,.06);
  padding: 3px 6px;
  border-radius: 8px;
  font-weight:800;
}

/* Responsive add-ons */
@media (max-width: 980px){
  .testi-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .calendar-card iframe{ height: 720px; }
}
@media (max-width: 720px){
  .calendar-card iframe{ height: 760px; }
}

.calendar-fallback{
  padding: 12px 14px;
  background: rgba(245,158,11,.08);
  border-top: 1px solid rgba(229,231,235,.90);
  color: rgba(15,23,42,.74);
  font-weight:700;
}



/* =========================
   Mobile UI Fix Pack (Ultraax)
   Ensures everything fits perfectly on phone screens
========================= */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-meta{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .contact-wrap{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction:column; }
}

@media (max-width: 720px){
  .container{ width: calc(100% - 28px); }

  /* Header spacing */
  .header-inner{ padding: 10px 0; }
  .brand-logo{ width:34px; height:34px; }
  .brand-name{ font-size: 1rem; }

  /* Hero layout */
  .hero{ padding-top: 34px; }
  .pill{
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    padding: 10px 12px;
  }
  .hero h1{
    font-size: 2.05rem;
    line-height: 1.06;
    word-break: break-word;
  }
  .hero-sub{ font-size: 1rem; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .btn{ width:100%; padding: 14px 16px; }

  /* Visual below and inside screen */
  .hero-visual{ margin-top: 14px; }
  .glass-card{ border-radius: 20px; }
  .glass-body{ padding: 14px 14px 16px; }
  .chart{ height: 110px; gap:8px; }
  .bar{ width:18%; border-radius: 12px; }
  .stats{ grid-template-columns: 1fr; }
  .floating-badge{
    position: static;
    margin-top: 12px;
    transform: none;
    width: fit-content;
  }

  /* Trust chips */
  .trust-row{ gap:10px; }
  .trust-item{ font-size: .92rem; padding: 9px 10px; }

  /* Sections */
  .section{ padding: 58px 0; }
  .cards-grid{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }

  /* Why cards */
  .why-card{ padding: 18px; }

  /* Contact */
  .contact-wrap{ padding: 16px; border-radius: 22px; }
  .contact-form{ padding: 14px; }

  /* Calendar */
  .calendar-card iframe{ height: 760px; }

  /* WhatsApp FAB should not block */
  body{ padding-bottom: 86px; }
  .wa-fab{
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    font-size: .95rem;
    gap:8px;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .hero h1{ font-size: 1.9rem; }
  .wa-text{ display:none; }
  .wa-fab{ border-radius: 16px; }
}




/* =========================
   WhatsApp Button FINAL FIX
========================= */

/* Desktop */
.wa-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  padding: 14px 18px;
  font-size: 1rem;
  border-radius: 999px;
  min-width: 140px;
  justify-content: center;
}

/* Make sure it never shrinks */
.wa-fab{
  white-space: nowrap;
}

/* Mobile Fix */
@media (max-width: 768px){
  .wa-fab{
    right: 16px;
    bottom: 20px;
    padding: 14px 18px;
    font-size: 1rem;
    border-radius: 999px;
  }
}

/* Extra small devices */
@media (max-width: 420px){
  .wa-fab{
    right: 14px;
    bottom: 18px;
    padding: 12px 16px;
  }
}


/* Hero curve divider */
.hero{
  position: relative;
}
.hero-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 110px;
  pointer-events:none;
  z-index: 1;
}
.hero-wave svg{
  width:100%;
  height:100%;
  display:block;
}
.hero-wave path{
  fill: rgba(248,250,252,1);
}

/* Bullets list styling */
.bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  line-height: 1.85;
  color: rgba(15,23,42,.78);
}
.bullets li{ margin: 2px 0; }

/* Featured services card */
.featured-card{
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 26px 70px rgba(245,158,11,.14);
}
.card-note{
  margin: 10px 0 10px;
  color: rgba(15,23,42,.76);
  line-height: 1.75;
}
.muted{ color: rgba(15,23,42,.62); font-weight:800; font-size: .92rem; }

/* About Us */
.aboutus-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top: 18px;
}
.aboutus-card{
  padding:22px;
  border-radius: var(--radius);
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
}
.aboutus-title{
  font-weight:900;
  color: rgba(15,23,42,.72);
  margin-bottom: 10px;
}
.aboutus-name{
  font-family:Poppins, Inter, sans-serif;
  font-weight:900;
  font-size:1.4rem;
  letter-spacing:-.02em;
}
.aboutus-sub{
  margin-top: 6px;
  color: rgba(15,23,42,.70);
  font-weight:700;
}
.social-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.social-btn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(109,40,217,.20);
  background: rgba(109,40,217,.08);
  font-weight:800;
  color: rgba(15,23,42,.82);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  background: rgba(109,40,217,.12);
}
.aboutus-cta{
  display:flex;
  gap:10px;
  margin-top: 14px;
  flex-wrap:wrap;
}

/* Products */
.product-wrap{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:18px;
  align-items:start;
  margin-top: 18px;
}
.product-title{
  font-family:Poppins, Inter, sans-serif;
  font-weight:900;
  font-size:1.6rem;
  margin: 10px 0 8px;
}
.product-text{
  color: rgba(15,23,42,.78);
  line-height:1.8;
}
.product-points{
  display:grid;
  gap:10px;
  margin: 14px 0 16px;
}
.pp{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.20);
  font-weight:800;
  color: rgba(15,23,42,.82);
}
.product-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.shot{
  margin:0;
  padding: 12px;
  border-radius: 22px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.shot img{
  width:100%;
  height:auto;
  border-radius: 16px;
  display:block;
}
.shot figcaption{
  margin-top: 10px;
  color: rgba(15,23,42,.70);
  font-weight:700;
  line-height:1.5;
  font-size: .92rem;
}

/* Mobile */
@media (max-width: 900px){
  .aboutus-grid{ grid-template-columns: 1fr; }
  .product-wrap{ grid-template-columns: 1fr; }
  .product-gallery{ grid-template-columns: 1fr; }
  .hero-wave{ height: 90px; }
}


/* =========================
   Wave + Trust Row Fix
========================= */
.hero-wave{ z-index: 0 !important; }
.hero .hero-grid,
.hero .hero-bottom{
  position: relative;
  z-index: 2;
}
/* Give space so wave never hides trust chips */
.hero-bottom{
  padding-bottom: 90px;
}
@media (max-width: 900px){
  .hero-bottom{ padding-bottom: 78px; }
}
@media (max-width: 520px){
  .hero-bottom{ padding-bottom: 70px; }
}


/* =========================
   Process (new)
========================= */
.process-steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px;
  margin-top: 18px;
}
.step-card{
  padding:18px;
  border-radius: 22px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
}
.step-num{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color: rgba(15,23,42,.82);
  background: rgba(109,40,217,.10);
  border: 1px solid rgba(109,40,217,.18);
  margin-bottom: 10px;
}

/* =========================
   Pricing Packs
========================= */
.pricing-packs{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top: 18px;
}
.pack-card{
  padding:18px;
  border-radius: 22px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow2);
}
.pack-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.pack-letter{
  width:42px;
  height:42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.22);
}
.featured-pack{
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 26px 70px rgba(245,158,11,.14);
}
.pricing-note{
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(109,40,217,.08);
  border: 1px solid rgba(109,40,217,.16);
}
.note-title{ font-weight: 900; margin-bottom: 6px; }
.note-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* Products tech stack */
.tech-stack{
  margin: 14px 0 16px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(109,40,217,.06);
  border: 1px solid rgba(109,40,217,.14);
}
.ts-title{ font-weight: 900; margin-bottom: 10px; }
.ts-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  background: rgba(248,250,252,.96);
  border: 1px solid rgba(229,231,235,.90);
}
.ts-sub{
  margin-top: 10px;
  color: rgba(15,23,42,.66);
  font-weight: 700;
  font-size: .92rem;
}

/* Responsive */
@media (max-width: 1100px){
  .process-steps{ grid-template-columns: repeat(2, 1fr); }
  .pricing-packs{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .process-steps{ grid-template-columns: 1fr; }
  .pricing-packs{ grid-template-columns: 1fr; }
}


/* =========================
   Background clarity tweak
   (sharper blobs + subtle texture)
========================= */
.bg-blobs::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(245,158,11,.08), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(124,58,237,.08), transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(109,40,217,.08), transparent 40%);
  mix-blend-mode: normal;
  opacity: .9;
}


/* ===== Hero mini line ===== */
.hero-mini{
  margin-top: 10px;
  font-weight: 800;
  color: rgba(248,250,252,.92);
}

/* ===== Flow card ===== */
.flow-card{
  width:100%;
  border-radius: 26px;
  padding: 18px;
  background: rgba(248,250,252,.14);
  border: 1px solid rgba(248,250,252,.20);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}
.flow-title{
  font-weight: 900;
  letter-spacing: .3px;
  color: rgba(248,250,252,.92);
  margin-bottom: 12px;
}
.flow-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-step{
  flex: 1 1 120px;
  min-width: 110px;
  border-radius: 18px;
  padding: 14px 12px;
  background: rgba(15,23,42,.30);
  border: 1px solid rgba(248,250,252,.14);
  text-align:center;
}
.flow-step.accent{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.35);
}
.flow-ico{ font-size: 22px; margin-bottom: 6px; }
.flow-label{ font-weight: 900; color: rgba(248,250,252,.92); }
.flow-arrow{
  font-weight: 900;
  color: rgba(248,250,252,.70);
  flex: 0 0 auto;
}
.flow-points{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.fp{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(15,23,42,.24);
  border: 1px solid rgba(248,250,252,.12);
  color: rgba(248,250,252,.88);
  font-weight: 700;
}
.dotx{
  width:10px; height:10px;
  border-radius: 999px;
  background: rgba(245,158,11,.95);
  box-shadow: 0 0 0 6px rgba(245,158,11,.16);
}

/* ===== Who we work with ===== */
.pill-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
.pill-card{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow1);
  font-weight: 900;
}

/* ===== Ballastra section ===== */
.ballastra-wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: start;
}
.badge-soon{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.34);
  margin-bottom: 12px;
}
.why-built{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(109,40,217,.08);
  border: 1px solid rgba(109,40,217,.16);
}
.wb-title{ font-weight: 900; margin-bottom: 6px; }
.wb-text{ color: rgba(15,23,42,.78); font-weight: 700; }
.timeline{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
}
.tl-title{ font-weight: 900; margin-bottom: 8px; }
.tl-row{ display:flex; align-items:center; gap:10px; font-weight: 700; color: rgba(15,23,42,.80); }
.tl-dot{ width:9px; height:9px; border-radius: 999px; background: rgba(109,40,217,.85); }

.ballastra-shots{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.shot{
  margin:0;
  border-radius: 20px;
  overflow:hidden;
  background: rgba(248,250,252,.96);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow1);
}
.shot img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}
.shot figcaption{
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(15,23,42,.86);
  border-top: 1px solid rgba(229,231,235,.90);
}
.founder-context{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  font-weight: 700;
  color: rgba(15,23,42,.78);
}

/* ===== Metrics strip ===== */
.metrics-strip{
  margin: 14px 0 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.mitem{
  padding: 16px;
  border-radius: 20px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow1);
  text-align:center;
}
.mnum{
  font-size: 2rem;
  font-weight: 1000;
}
.mlabel{
  margin-top: 4px;
  font-weight: 800;
  color: rgba(15,23,42,.70);
}

/* ===== Book call bullets ===== */
.book-bullets{
  margin: 14px 0 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow1);
}
.scarcity{
  margin-top: 10px;
  font-weight: 900;
  color: rgba(15,23,42,.78);
}

/* ===== Why pillars ===== */
.pillars-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.pillar{
  padding: 18px;
  border-radius: 22px;
  background: rgba(15,23,42,.30);
  border: 1px solid rgba(248,250,252,.12);
}
.pillar h3{ color: rgba(248,250,252,.96); margin: 0 0 8px; }
.pillar p{ color: rgba(248,250,252,.76); margin:0; font-weight: 650; }

/* ===== FAQ ===== */
.faq-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.faq-item{
  padding: 14px;
  border-radius: 20px;
  background: rgba(248,250,252,.94);
  border: 1px solid rgba(229,231,235,.90);
  box-shadow: var(--shadow1);
}
.faq-item summary{
  cursor:pointer;
  font-weight: 900;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-body{
  margin-top: 10px;
  color: rgba(15,23,42,.78);
  font-weight: 700;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .pill-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ballastra-wrap{ grid-template-columns: 1fr; }
  .ballastra-shots{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pillars-grid{ grid-template-columns: 1fr; }
  .faq-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .flow-points{ grid-template-columns: 1fr; }
  .metrics-strip{ grid-template-columns: 1fr; }
  .ballastra-shots{ grid-template-columns: 1fr; }
  .shot img{ height: 320px; }
}

.wave-divider{ width:100%; position: absolute; left:0; bottom:-1px; }
.hero{ position: relative; }
.wave-divider svg{ width:100%; height: 120px; display:block; }
.wave-divider path{ fill: rgba(248,250,252,1); }

.footer-links{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.footer-links a{
  font-weight: 800;
  color: rgba(248,250,252,.80);
  text-decoration: none;
}
.footer-links a:hover{ text-decoration: underline; }

section{ padding: 70px 0 !important; }
.testimonial-card{ background:#111827; color:#fff; }
.whatsapp-btn{ position:fixed; bottom:20px; right:20px; }