:root{ 
  --bdx-dark:#0b1220;
  --bdx-muted:#475569;

  --hero-top: #e8f7fb;
  --hero-mid:#f5fbfe;
  --hero-bot:#ffffff;
  --pad: clamp(12px, 2.4vw, 28px);
  --radius: 14px;
  --shadow: 0 8px 24px rgba(2,6,23,0.08);
  --link:#061222;
  --alt-1:#f9fbff;
  --alt-2:#f7fcfa;

  /* ✅ Navbar offset (used to push page content below fixed navbar) */
  --nav-offset: 64px;
}

/* ✅ Fine-tune spacing on mobile only (adds a little breathing room under nav) */
@media (max-width: 960px){
  :root{ --nav-offset: 78px; }  /* adjust to 72px/76px/80px if you want */
}

*{box-sizing:border-box}
html, body{max-width:100%; overflow-x:hidden;} /* prevent horizontal scroll */

body{
  margin:0;
  /* fallbacks so page can’t look “blank” if vars missing */
  background:var(--bdx-bg, #F6FAFC);
  color: var(--bdx-text, #0F1A2A);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  opacity: 1;

  /* ✅ because navbar is fixed */
  padding-top: var(--nav-offset);
}

/* removed global anchor reset that can override style.css link behaviors */
/* a{color:inherit;text-decoration:none} */

img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 var(--pad); width:100%}

/* NAVBAR */
.navbar{
  /* ✅ UPDATED: fixed navbar while page scrolls */
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  background:var(--nav-bg);
  width:100%;
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}

/* Brand LEFT, links RIGHT */
.nav-left{display:flex;align-items:center;gap:12px;min-width:0}
.nav-right{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:0}

.brand{display:flex;align-items:center;gap:10px;justify-content:flex-start;min-width:0}
/* Crisp logo display */
.platform-logo{
  height: clamp(34px, 5vw, 44px);
  width:auto;
  max-width: clamp(160px, 28vw, var(--logo-max-w));
  object-fit:contain;
  flex:0 0 auto;
}
.logo{
  font-weight:800;letter-spacing:.2px;font-size:clamp(18px,2.4vw,22px);
  color: var(--nav-link);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 52vw;
}

/* Desktop links only at ≥961px */
.nav-links{display:none;gap:6px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:nowrap;min-width:0}
.nav-links > li{position:relative}

/* IMPORTANT: force nav link colors to follow editor variables (beats style.css) */
.navbar .nav-links > li > a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--nav-link) !important;
  font-family: var(--nav-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  white-space:nowrap;
  text-decoration:none !important;
}
.navbar .nav-links > li > a:hover{
  background:var(--nav-hover-bg) !important;
  color:var(--nav-hover-text) !important;
  text-decoration:none !important;
}

.has-dropdown:hover .dropdown{opacity:1;transform:translateY(0);pointer-events:auto}
.dropdown{
  position:absolute;top:100%;left:0;min-width:180px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:var(--shadow);padding:6px;margin-top:6px;opacity:0;transform:translateY(6px);transition:.18s ease;pointer-events:none
}
.dropdown a{
  padding:10px 12px;
  border-radius:8px;
  color:#0b1f33;
  display:block;
  text-decoration:none !important;
}
.dropdown a:hover{background:#f1f5f9}
.caret{display:inline-block;margin-left:6px;border:5px solid transparent;border-top-color:var(--nav-link);transform:translateY(2px)}

.signup-link{border:1.5px solid var(--bdx-primary);background:#fff;color:var(--bdx-primary)!important}
.signup-link:hover{background:var(--bdx-primary)!important;color:#fff!important;border-color:var(--bdx-primary)!important}

@media (min-width: 961px){
  .nav-links{display:flex}
  /* IMPORTANT: hamburger must NEVER show on desktop */
  .burger{display:none !important}
}

/* Mobile drawer */
.mobile-wrap{display:none}
@media (max-width:960px){ .mobile-wrap{display:block} }
@media (min-width:961px){ .mobile-wrap{display:none !important} }

/* hamburger default (mobile) */
.burger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto
}
.burger:focus-visible{outline:2px solid #0b5ed7;outline-offset:2px}
.burger-box{position:relative;width:22px;height:16px}
.burger-line{position:absolute;left:0;right:0;height:2px;background:var(--nav-link);border-radius:2px;transition:transform .28s ease,opacity .2s ease,top .28s ease}
.burger-line.l1{top:0}
.burger-line.l2{top:7px}
.burger-line.l3{top:14px}
.burger.open .burger-line.l1{top:7px;transform:rotate(45deg)}
.burger.open .burger-line.l2{opacity:0}
.burger.open .burger-line.l3{top:7px;transform:rotate(-45deg)}

.mobile-panel{
  position:fixed; left:0; right:0; top:64px;
  background:var(--nav-bg);
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
  z-index:55;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
.mobile-panel.open{ max-height:80vh; }
.mobile-links{list-style:none;margin:0;padding:10px var(--pad)}
.mobile-links li+li{margin-top:4px}
.mobile-links a{
  display:block;
  padding:12px;
  border-radius:10px;
  font-family: var(--nav-font-family);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color:var(--nav-link) !important;            /* force color */
  text-decoration:none !important;             /* no underline */
}

/* ✅ UPDATED: make hover work on mobile too (not just :active) */
.mobile-links a:hover,
.mobile-links a:focus-visible{
  background:var(--nav-hover-bg) !important;
  color:var(--nav-hover-text) !important;
  text-decoration:none !important;
}

/* keep touch feedback */
.mobile-links a:active{
  background:var(--nav-hover-bg) !important;
  color:var(--nav-hover-text) !important;
}

.backdrop{position:fixed;inset:64px 0 0 0;background:rgba(2,6,23,.28);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.backdrop.show{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}

/* HERO */
header{
  background: linear-gradient(180deg,var(--hero-top) 0%, var(--hero-mid) 60%, var(--hero-bot) 100%);
  color:#0e223a;
  padding: clamp(32px, 6vw, 64px) 0 clamp(28px, 4.5vw, 48px);
}
.hero-wrap{max-width:950px;margin:0 auto;text-align:center}
.hero-kicker{font-size:clamp(12px,1.6vw,14px);letter-spacing:.12em;text-transform:uppercase;color: #0b940bff;margin:0 0 10px}
header h1{font-size:clamp(26px,5.4vw,44px);line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:.2px;color:#0b1f33}
.typed-caret{display:inline-block;width:2px;height:1.1em;background:#0b1f33;margin-left:3px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{font-size:clamp(16px,2.2vw,20px);margin:6px 0 8px;color:var(--bdx-primary)}
.hero-note{font-size:clamp(14px,1.9vw,18px);margin:0;color:#2a4663}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top: clamp(14px, 2.5vw, 22px)}
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration:none !important;   /* IMPORTANT: remove underline on CTA links */
}
.btn:hover, .btn:focus, .btn:active, .btn:visited{
  text-decoration:none !important;   /* keep underline off always */
}

.btn-primary{background:var(--bdx-accent);color:#fff}
.btn-primary:hover{background:#17a260}
.btn-ghost{background:transparent;border:1px solid #0b5ed7;color:#0b5ed7}
.btn-ghost:hover{background:#0b5ed7;color:#fff;border-color:#0b5ed7}

section{padding:40px 0}
section h2{font-size:clamp(20px,4.2vw,28px);margin:0 0 14px;color:#0b1f33}
.feature-grid,.pricing-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feature{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow);color:#0f2338}

#features{background:#fff}
#benefits{background:var(--alt-1)}
#ai{background:#fff}
#pricing{background:var(--alt-2)}
#about{background:#fff}
#partners{background:var(--alt-1)}
#subscribe{background:#fff}
#demo{background:var(--alt-2)}
#contact{background:#fff}

/* ✅ NEW: AI SECTION (image + text side-by-side) */
.ai-split{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  margin-top: 14px;
}
.ai-media{flex: 0 0 46%; min-width: 280px;}
.ai-text{flex: 1 1 auto; min-width: 280px;}

.ai-image-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 12px;
}
.ai-illustration{
  width:100%;
  height:auto;
  display:block;
  border-radius: 12px;
  object-fit: cover;
}

/* placeholder when no image picked yet */
.ai-placeholder{
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
}
.ai-placeholder-inner{
  text-align:center;
  padding: 18px;
  color:#27415b;
}
.ai-ph-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius: 16px;
  background: rgba(11,94,215,.10);
  border: 1px solid rgba(11,94,215,.22);
  font-weight: 900;
  color: #0b5ed7;
  margin-bottom: 10px;
}
.ai-ph-text{font-size: 13px; line-height: 1.35;}

/* responsive stack */
@media (max-width: 900px){
  .ai-split{flex-direction:column;}
  .ai-media, .ai-text{flex: 1 1 auto; min-width: 0;}
}

/* PRICING */
.plan{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative}
.plan h3{margin:0 0 6px;color:#0b1f33}
.price{font-size:clamp(18px,4vw,22px);font-weight:800;margin:6px 0 10px;color:var(--bdx-primary)}
.plan ul{margin:0 0 14px;padding-left:18px;color:#223a55}
.plan-btn{
  display:inline-block;
  margin-top:auto;
  padding:10px 14px;
  border-radius:10px;
  background:var(--bdx-primary);
  color:#fff;
  text-align:center;
  font-weight:700;
  transition:filter .15s ease;
  text-decoration:none !important;
}
.plan-btn:hover{filter:brightness(0.92)}

/* emphasize PRO plan */
.plan.recommended{
  border:2px solid #19b66c;
  box-shadow:0 14px 30px rgba(25,182,108,.22);
  transform:translateY(-4px);
  background:linear-gradient(180deg,#ffffff 0%, #f2fff8 100%);
}
.plan.recommended::before{
  content:"Recommended";
  position:absolute;
  top:12px;
  right:12px;
  background:#19b66c;
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  letter-spacing:.02em;
}
.plan.recommended .plan-btn{background:#19b66c}
.plan.recommended .plan-btn:hover{filter:brightness(0.95)}

/* SUBSCRIBE FORM */
.subscribe .card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
form{display:grid;gap:12px;grid-template-columns:1fr 1fr}
form input, form select, form button{
  width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font:inherit;background:#fff;color:#0f2338
}
form button{background:var(--bdx-accent);color:#fff;font-weight:800;border:none;cursor:pointer;transition:background .15s ease}
form button:hover{background:#17a260}
.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px;border-radius:10px;margin-bottom:10px}
.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px;border-radius:10px;margin-bottom:10px}

.demo .plan-btn{background:var(--bdx-accent)}
footer{background:#0b1220;color:#cdd7e3;padding:24px 0;margin-top:32px;text-align:center}

.util-links{display:flex;justify-content:center;margin-top:8px;gap:18px;flex-wrap:wrap}
.util-links a{padding:8px 10px;color:#0b5ed7;text-decoration:underline}

/* Partners marquee */
.logo-marquee{overflow:hidden}
.logo-track{
  display:inline-flex;gap:18px;align-items:center;white-space:nowrap;
  animation:scroll-x 28s linear infinite;
}
@keyframes scroll-x{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.logo-item{flex:0 0 auto;min-width:160px}

.logo-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  width:160px; height:86px;
  padding:12px;
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(1);opacity:.9;transition:.2s;
  overflow:hidden;
}
.logo-card img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
}
.logo-card:hover{filter:grayscale(0);opacity:1}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.contact-card{display:flex;gap:12px;align-items:flex-start;justify-content:flex-start;text-align:left}
.icon{width:22px;height:22px;flex:0 0 22px}
.contact-links a{text-decoration:underline;color:#0b5ed7}
.socials{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#ffffff;border:1px solid #e5e7eb}
.socials a:hover{filter:brightness(0.95)}
.socials svg{width:18px;height:18px}

@media (max-width: 860px){
  form{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
}

#about h2, #partners h2 { text-align:center; }