/* =========================================================
   EstimatePro ERP — Design System & Site Styles
   Palette: Deep Navy / Enterprise Blue / Emerald / Warm Orange
   Type: Plus Jakarta Sans (display) + Inter (body)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Color */
  --navy-900:#0B1F3A;
  --navy-800:#102A4C;
  --navy-700:#16365F;
  --blue-600:#1E5FA8;
  --blue-500:#2C72C7;
  --blue-100:#E8F0FB;
  --emerald-600:#0F9D74;
  --emerald-500:#16B98A;
  --emerald-100:#E4F8F0;
  --orange-600:#E8743B;
  --orange-100:#FDE9DC;
  --gray-900:#1A2233;
  --gray-700:#3D4A5F;
  --gray-600:#5B6477;
  --gray-400:#8C96A8;
  --gray-200:#DCE1E8;
  --gray-100:#EEF1F5;
  --off-white:#F7F8FA;
  --white:#FFFFFF;

  /* Semantic */
  --bg:var(--off-white);
  --surface:var(--white);
  --text:var(--gray-900);
  --text-muted:var(--gray-600);
  --border:var(--gray-200);
  --accent:var(--emerald-600);
  --accent-strong:var(--navy-900);

  /* Type */
  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  /* Scale */
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.375rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.25rem;
  --fs-3xl:3rem;
  --fs-4xl:3.75rem;

  /* Spacing */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --space-10:8rem;

  /* Layout */
  --container:1200px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(11,31,58,.06), 0 1px 1px rgba(11,31,58,.04);
  --shadow-md:0 8px 24px rgba(11,31,58,.08), 0 2px 6px rgba(11,31,58,.04);
  --shadow-lg:0 24px 48px -12px rgba(11,31,58,.18);
  --header-h:76px;
  --notice-h:38px;
  --transition:200ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--navy-900); line-height:1.15; letter-spacing:-.01em;}
p{margin:0;}
input,select,textarea{font-family:inherit; font-size:inherit;}

:focus-visible{
  outline:3px solid var(--blue-500);
  outline-offset:2px;
  border-radius:4px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1100;
  background:var(--navy-900); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ---------- Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-5);
}
.section{padding-block:var(--space-9);}
.section--tight{padding-block:var(--space-8);}
.section--alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-head{max-width:680px; margin-bottom:var(--space-7);}
.section-head--center{margin-inline:auto; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--emerald-600); margin-bottom:var(--space-3);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--emerald-600);
}
.section-head h2{font-size:var(--fs-2xl); margin-bottom:var(--space-3);}
.section-head p{color:var(--text-muted); font-size:var(--fs-md);}

.grid{display:grid; gap:var(--space-5);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}

@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-6{grid-template-columns:repeat(2,1fr);}
  .section{padding-block:var(--space-7);}
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  padding:.8rem 1.5rem; border-radius:var(--radius-sm);
  border:1px solid transparent; transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--emerald-600); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--emerald-500); box-shadow:var(--shadow-md);}
.btn-secondary{background:transparent; color:var(--navy-900); border-color:var(--gray-200);}
.btn-secondary:hover{border-color:var(--navy-900); background:var(--gray-100);}
.btn-ghost{background:transparent; color:var(--navy-900);}
.btn-ghost:hover{background:var(--gray-100);}
.btn-light{background:#fff; color:var(--navy-900); box-shadow:var(--shadow-sm);}
.btn-light:hover{box-shadow:var(--shadow-md);}
.btn-block{width:100%;}
.btn-lg{padding:1rem 1.85rem; font-size:var(--fs-md);}
.btn-sm{padding:.55rem 1.1rem; font-size:var(--fs-xs);}

/* ---------- Notice board ---------- */
.notice-board{
  position:fixed; top:0; left:0; right:0; z-index:1001; height:var(--notice-h, 38px);
  background:var(--navy-900); color:#fff; display:flex; align-items:center;
  overflow:hidden; transition:height var(--transition), opacity var(--transition);
}
.notice-board.is-dismissed{height:0!important; opacity:0; pointer-events:none;}
.notice-board-track{
  display:flex; gap:4rem; white-space:nowrap; flex:1;
  animation:noticeScroll 22s linear infinite;
  padding-left:100%;
}
.notice-board-item{font-size:var(--fs-xs); font-weight:600; color:#E3E9F2; padding-right:4rem;}
@keyframes noticeScroll{from{transform:translateX(0);} to{transform:translateX(-100%);}}
.notice-board-close{
  flex-shrink:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:rgba(255,255,255,.7); cursor:pointer;
}
.notice-board-close:hover{color:#fff;}
.notice-board-close svg{width:16px; height:16px;}
@media (prefers-reduced-motion: reduce){
  .notice-board-track{animation:none; padding-left:var(--space-5);}
}
@media (max-width:640px){
  .notice-board-item{font-size:.75rem;}
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:var(--notice-h, 38px); left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--transition), box-shadow var(--transition), border-color var(--transition), top var(--transition);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  border-bottom-color:var(--border);
}
.header-inner{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--navy-900); white-space:nowrap; flex-shrink:0;}
.brand-mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg, var(--navy-900), var(--blue-600));
  display:flex; align-items:center; justify-content:center;
}
.brand-mark svg{width:18px; height:18px;}
.brand-name strong{color:var(--emerald-600);}

.main-nav{display:flex; align-items:center; gap:var(--space-2);}
.main-nav > ul{display:flex; align-items:center; gap:.15rem;}
.nav-link{
  display:flex; align-items:center; gap:.3rem;
  padding:.6rem .85rem; border-radius:var(--radius-sm);
  font-size:var(--fs-sm); font-weight:600; color:var(--navy-900);
  transition:background var(--transition);
}
.nav-link:hover, .nav-link[aria-expanded="true"]{background:var(--gray-100);}
.nav-link.is-active{color:var(--emerald-600);}
.nav-link svg{width:14px; height:14px; transition:transform var(--transition);}
.nav-item.is-open .nav-link svg{transform:rotate(180deg);}

.nav-item{position:relative;}
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:260px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-item.is-open .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{
  display:block; padding:.65rem .85rem; border-radius:var(--radius-sm);
  font-size:var(--fs-sm); font-weight:500; color:var(--gray-700);
}
.dropdown a:hover{background:var(--emerald-100); color:var(--emerald-600);}

.header-actions{display:flex; align-items:center; gap:.5rem;}
.lang-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--gray-100); border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  padding:.5rem .75rem; font-size:var(--fs-xs); font-weight:700; color:var(--gray-400);
  cursor:pointer; transition:background var(--transition);
  font-family:var(--font-body);
}
.lang-toggle:hover{background:var(--gray-200);}
.lang-toggle-divider{color:var(--gray-400); font-weight:400;}
.lang-toggle-option{transition:color var(--transition);}
.lang-toggle[data-active-lang="en"] [data-lang-en],
.lang-toggle[data-active-lang="ne"] [data-lang-ne]{color:var(--navy-900);}
.lang-toggle--mobile{width:100%; justify-content:center;}
.lang-toggle--footer{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.55);
}
.lang-toggle--footer:hover{background:rgba(255,255,255,.14);}
.lang-toggle--footer[data-active-lang="en"] [data-lang-en],
.lang-toggle--footer[data-active-lang="ne"] [data-lang-ne]{color:#fff;}

.currency-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--gray-100); border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  padding:.5rem .75rem; font-size:var(--fs-xs); font-weight:700; color:var(--gray-400);
  cursor:pointer; transition:background var(--transition); font-family:var(--font-body);
}
.currency-toggle:hover{background:var(--gray-200);}
.currency-toggle-option{transition:color var(--transition);}
.currency-toggle[data-active-currency="npr"] [data-currency-npr],
.currency-toggle[data-active-currency="usd"] [data-currency-usd]{color:var(--navy-900);}
.currency-toggle--mobile{flex:1; justify-content:center;}
.mobile-switch-row{display:flex; gap:.6rem; margin-top:var(--space-6);}
.mobile-switch-row .lang-toggle--mobile{flex:1; margin-top:0;}

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  background:#fff;
}
.hamburger span{width:18px; height:2px; background:var(--navy-900); margin-inline:auto; transition:transform var(--transition), opacity var(--transition);}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-panel{
  position:fixed; inset:calc(var(--header-h) + var(--notice-h, 38px)) 0 0 0; z-index:999;
  background:#fff; overflow-y:auto;
  padding:var(--space-5);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.mobile-panel.is-open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-panel details{border-bottom:1px solid var(--border); padding-block:.4rem;}
.mobile-panel summary{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:var(--fs-md); padding:.75rem .25rem; color:var(--navy-900);
  list-style:none; cursor:pointer;
}
.mobile-panel summary::-webkit-details-marker{display:none;}
.mobile-panel summary svg{width:16px; height:16px; transition:transform var(--transition);}
.mobile-panel details[open] summary svg{transform:rotate(180deg);}
.mobile-panel .mobile-sub{padding-bottom:.75rem; display:flex; flex-direction:column; gap:.2rem;}
.mobile-panel .mobile-sub a{padding:.55rem .25rem; color:var(--gray-700); font-size:var(--fs-sm); font-weight:500;}
.mobile-panel > a.mobile-top-link{
  display:block; padding:.9rem .25rem; font-weight:700; font-size:var(--fs-md); color:var(--navy-900);
  border-bottom:1px solid var(--border);
}
.mobile-cta{display:flex; flex-direction:column; gap:.7rem; margin-top:var(--space-5);}

@media (max-width:1180px){
  .main-nav, .header-actions .lang-toggle, .header-actions .currency-toggle, .header-actions .btn-ghost, .header-actions .btn-secondary{display:none;}
  .header-actions .btn-primary{display:inline-flex;}
  .hamburger{display:flex;}
}
@media (min-width:1181px){
  .mobile-panel{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--notice-h, 38px) + var(--space-8));
  padding-bottom:var(--space-9);
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(30,95,168,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(15,157,116,.10), transparent 55%),
    var(--navy-900);
  color:#fff;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-8); align-items:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1rem; border-radius:999px; font-size:var(--fs-xs); font-weight:600;
  color:#D7E6FA; margin-bottom:var(--space-5);
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--emerald-500); flex-shrink:0;}
.hero h1{
  font-size:var(--fs-4xl); color:#fff; margin-bottom:var(--space-5); max-width:14ch;
}
.hero p.hero-sub{
  font-size:var(--fs-md); color:#C3CEE0; max-width:46ch; margin-bottom:var(--space-6);
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:var(--space-7);}
.hero-trust{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; max-width:520px;
}
.hero-trust li{
  display:flex; align-items:flex-start; gap:.55rem; font-size:var(--fs-xs); color:#B7C4D9;
}
.hero-trust svg{width:16px; height:16px; flex-shrink:0; color:var(--emerald-500); margin-top:2px;}

/* Hero mockup — Live Estimate Builder */
.hero-mock{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:var(--space-5); color:var(--text); position:relative;
}
.hero-mock-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4);}
.hero-mock-head h3{font-size:var(--fs-sm); font-weight:700;}
.hero-mock-dots{display:flex; gap:5px;}
.hero-mock-dots span{width:8px; height:8px; border-radius:50%; background:var(--gray-200);}
.hero-mock-dots span:nth-child(1){background:#F0A33E;}
.hero-mock-dots span:nth-child(2){background:var(--emerald-500);}
.hero-mock-dots span:nth-child(3){background:var(--blue-500);}

.boq-table{width:100%; border-collapse:collapse; font-size:var(--fs-xs);}
.boq-table th{
  text-align:left; color:var(--gray-400); font-weight:600; padding:.4rem .5rem;
  border-bottom:1px solid var(--border); text-transform:uppercase; font-size:.68rem; letter-spacing:.04em;
}
.boq-table td{padding:.55rem .5rem; border-bottom:1px solid var(--gray-100); color:var(--gray-700); font-weight:500;}
.boq-table tr:last-child td{border-bottom:none;}
.boq-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.boq-table .item-name{color:var(--navy-900); font-weight:600;}

.hero-mock-tabs{display:flex; gap:.35rem; margin-bottom:var(--space-4); border-bottom:1px solid var(--gray-100);}
.hero-mock-tab{
  background:none; border:none; padding:.5rem .25rem; margin-right:var(--space-4);
  font-size:var(--fs-xs); font-weight:700; color:var(--gray-400); cursor:pointer;
  border-bottom:2px solid transparent; transition:color var(--transition), border-color var(--transition);
}
.hero-mock-tab.is-active{color:var(--navy-900); border-bottom-color:var(--emerald-600);}
.hero-mock-panel{display:none;}
.hero-mock-panel.is-active{display:block; animation:heroPanelIn .25s ease;}
@keyframes heroPanelIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.hero-mock-project-row{margin-bottom:var(--space-4);}
.hero-mock-project-row:last-child{margin-bottom:0;}
.hero-mock-project-info{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.35rem;}
.hero-mock-project-name{font-size:var(--fs-xs); font-weight:700; color:var(--navy-900);}
.hero-mock-project-meta{font-size:.68rem; color:var(--gray-400); font-weight:600;}
.hero-mock-bar{height:7px; border-radius:99px; background:var(--gray-100); overflow:hidden;}
.hero-mock-bar i{display:block; height:100%; border-radius:99px; background:var(--emerald-500);}
.hero-mock-bar i[data-bar-accent="blue"]{background:var(--blue-500);}
.hero-mock-bar i[data-bar-accent="orange"]{background:var(--orange-600);}

.hero-mock-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:var(--space-4);}
.hero-mock-kpi{background:var(--off-white); border-radius:var(--radius-sm); padding:.55rem .6rem; text-align:center;}
.hero-mock-kpi span{display:block; font-size:.66rem; color:var(--gray-400); font-weight:600; margin-bottom:.2rem;}
.hero-mock-kpi strong{font-family:var(--font-display); font-size:var(--fs-sm); color:var(--navy-900);}
.hero-mock-chart{display:flex; align-items:flex-end; gap:.4rem; height:64px;}
.hero-mock-chart i{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--emerald-500),var(--emerald-100));}

.hero-mock-crm-board{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}
.hero-mock-crm-col{display:flex; flex-direction:column; gap:.5rem;}
.hero-mock-crm-col-head{
  font-size:.64rem; font-weight:800; color:var(--gray-400); text-transform:uppercase; letter-spacing:.03em;
  padding-bottom:.3rem; border-bottom:2px solid var(--gray-100);
}
.hero-mock-crm-card{
  background:var(--off-white); border:1px solid var(--gray-100); border-radius:var(--radius-sm);
  padding:.5rem .55rem; font-size:.66rem; font-weight:700; color:var(--navy-900); line-height:1.3;
}
.hero-mock-crm-card small{display:block; font-weight:600; color:var(--gray-400); font-size:.62rem; margin-top:.15rem;}
.hero-mock-crm-card--won{background:var(--emerald-100); border-color:var(--emerald-100); color:var(--emerald-600);}
.hero-mock-crm-card--won small{color:var(--emerald-600);}
@media (max-width:420px){
  .hero-mock-kpis{grid-template-columns:1fr 1fr; gap:.5rem;}
  .hero-mock-kpi:last-child{grid-column:span 2;}
  .hero-mock-tabs{gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .hero-mock-tab{margin-right:var(--space-3); white-space:nowrap;}
  .hero-mock-crm-board{grid-template-columns:1fr; gap:.5rem;}
}

.hero-mock-total{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px dashed var(--border);
}
.hero-mock-total span{font-size:var(--fs-xs); color:var(--gray-600); font-weight:600;}
.hero-mock-total strong{
  font-family:var(--font-display); font-size:var(--fs-lg); color:var(--emerald-600); font-variant-numeric:tabular-nums;
}
.hero-mock-badge{
  position:absolute; top:-14px; right:24px;
  background:var(--orange-600); color:#fff; font-size:.68rem; font-weight:700;
  padding:.3rem .7rem; border-radius:999px; box-shadow:var(--shadow-sm);
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:var(--fs-3xl); max-width:none;}
  .hero-trust{grid-template-columns:1fr;}
}

/* ---------- Trust / feature grid ---------- */
.feature-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-5); transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gray-200);}
.icon-tile{
  width:46px; height:46px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:var(--emerald-100); color:var(--emerald-600); margin-bottom:var(--space-4);
}
.icon-tile svg{width:22px; height:22px;}
.icon-tile--blue{background:var(--blue-100); color:var(--blue-600);}
.icon-tile--orange{background:var(--orange-100); color:var(--orange-600);}
.icon-tile--navy{background:#E5EAF1; color:var(--navy-900);}
.feature-card h3{font-size:var(--fs-md); margin-bottom:.4rem;}
.feature-card p{color:var(--text-muted); font-size:var(--fs-sm);}

/* ---------- Modules ---------- */
.module-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2);
  transition:box-shadow var(--transition), transform var(--transition);
}
.module-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.module-card h3{font-size:var(--fs-md);}
.module-card p{color:var(--text-muted); font-size:var(--fs-sm);}
.module-card .icon-tile{margin-bottom:var(--space-2);}

/* ---------- Workflow / pipeline ---------- */
.pipeline{
  display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:var(--space-3);
  scrollbar-width:thin;
}
.pipeline-step{
  flex:1 0 150px; min-width:150px; position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-4); margin-right:var(--space-4);
  display:flex; flex-direction:column; gap:.3rem;
}
.pipeline-step::after{
  content:""; position:absolute; right:calc(-1 * var(--space-4) - 1px); top:50%; transform:translateY(-50%);
  width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid var(--gray-200);
  z-index:1;
}
.pipeline-step:last-child{margin-right:0;}
.pipeline-step:last-child::after{display:none;}
.pipeline-step .step-num{
  font-family:var(--font-display); font-weight:800; color:var(--emerald-600); font-size:var(--fs-xs);
}
.pipeline-step h4{font-size:var(--fs-sm); font-weight:700; color:var(--navy-900);}
.pipeline-step p{font-size:var(--fs-xs); color:var(--text-muted);}

/* Flow row for CRM / Procurement (simpler chips) */
.flow-row{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:var(--space-7);}
.flow-row-wrap{
  display:flex; justify-content:center; overflow-x:auto; padding-bottom:var(--space-2); margin-bottom:var(--space-5);
  -webkit-overflow-scrolling:touch;
}
.flow-row-wrap .flow-row{margin-bottom:0; flex-wrap:nowrap;}
.flow-chip{
  background:var(--navy-900); color:#fff; font-size:var(--fs-xs); font-weight:700;
  padding:.6rem 1.1rem; border-radius:999px; white-space:nowrap;
}
.flow-chip--end{background:var(--emerald-600);}
.flow-arrow{color:var(--gray-400); font-size:var(--fs-md); flex-shrink:0;}
.feature-card--compact{padding:var(--space-4); text-align:center;}
.feature-card--compact .icon-tile{margin-inline:auto; margin-bottom:var(--space-3);}
.feature-card--compact h3{font-size:var(--fs-sm); margin:0;}

/* ---------- How It Works (3-step) ---------- */
.how-grid{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center; gap:var(--space-5);
}
.how-step{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6); text-align:center; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow var(--transition), transform var(--transition);
}
.how-step:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.how-step .icon-tile{margin-inline:auto; margin-bottom:var(--space-3);}
.how-step-num{
  font-family:var(--font-display); font-weight:800; color:var(--gray-400); font-size:var(--fs-2xl);
  line-height:1; margin-bottom:.2rem;
}
.how-step h3{font-size:var(--fs-md); margin-bottom:.4rem;}
.how-step p{color:var(--text-muted); font-size:var(--fs-sm);}
.how-step-arrow{color:var(--gray-400); display:flex; justify-content:center;}
.how-step-arrow svg{width:22px; height:22px;}
@media (max-width:980px){
  .how-grid{grid-template-columns:1fr;}
  .how-step-arrow{transform:rotate(90deg); margin-block:-.5rem;}
}

/* ---------- Engine section ---------- */
.engine-layout{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-8); align-items:start;}
.unit-pills{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--space-6);}
.unit-pill{
  background:var(--gray-100); border:1px solid var(--border); color:var(--gray-700);
  font-size:var(--fs-xs); font-weight:600; padding:.45rem .9rem; border-radius:999px;
}
.capability-list{display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem;}
.capability-list li{
  display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--gray-700); font-weight:500;
}
.capability-list svg{width:16px; height:16px; color:var(--emerald-600); flex-shrink:0;}
@media (max-width:980px){.engine-layout{grid-template-columns:1fr;}}

/* ---------- Dashboard ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-bottom:var(--space-6);}
.kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4);}
.kpi-card span{display:block; font-size:var(--fs-xs); color:var(--text-muted); font-weight:600; margin-bottom:.35rem;}
.kpi-card strong{font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy-900);}
.kpi-card .kpi-bar{height:6px; border-radius:99px; background:var(--gray-100); margin-top:.6rem; overflow:hidden;}
.kpi-card .kpi-bar > i{display:block; height:100%; background:var(--emerald-600); border-radius:99px;}
@media (max-width:980px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}

.chart-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5);}
.chart-card h4{font-size:var(--fs-sm); margin-bottom:var(--space-4);}
.bars{display:flex; align-items:flex-end; gap:.65rem; height:140px;}
.bars .bar-pair{flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; height:100%; justify-content:flex-end;}
.bars .bar-track{width:100%; display:flex; gap:3px; height:100%; align-items:flex-end;}
.bars .bar{flex:1; border-radius:3px 3px 0 0;}
.bars .bar--est{background:var(--gray-200);}
.bars .bar--act{background:var(--emerald-600);}
.bars .bar-label{font-size:.65rem; color:var(--text-muted); font-weight:600;}
.chart-legend{display:flex; gap:1rem; margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--text-muted);}
.chart-legend span{display:inline-flex; align-items:center; gap:.4rem;}
.chart-legend i{width:9px; height:9px; border-radius:2px;}

.dash-feature-list{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-6);}
.dash-feature-list li{
  display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--gray-700); font-weight:500;
  background:var(--surface); border:1px solid var(--border); padding:.75rem .9rem; border-radius:var(--radius-sm);
}
.dash-feature-list svg{width:16px; height:16px; color:var(--blue-600); flex-shrink:0;}
@media (max-width:980px){.dash-feature-list{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.dash-feature-list{grid-template-columns:1fr;}}

/* ---------- Mobile/offline section (dark) ---------- */
.section--dark{background:var(--navy-900); color:#fff;}
.section--dark .section-head h2{color:#fff;}
.section--dark .section-head p{color:#B7C4D9;}
.mobile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-bottom:var(--space-6);}
.mobile-item{
  display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm); padding:.8rem 1rem;
  font-size:var(--fs-sm); font-weight:500; color:#E3E9F2;
}
.mobile-item svg{width:16px; height:16px; color:var(--emerald-500); flex-shrink:0;}
.note-box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5); font-size:var(--fs-sm); color:#D7E6FA; display:flex; gap:.6rem; align-items:flex-start;
}
.note-box svg{width:18px; height:18px; color:var(--emerald-500); flex-shrink:0; margin-top:2px;}
@media (max-width:980px){.mobile-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.mobile-grid{grid-template-columns:1fr;}}

/* ---------- Download Center ---------- */
.download-panel{
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-8); align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-8); box-shadow:var(--shadow-sm);
}
.download-status{
  display:inline-block; background:var(--emerald-100); color:var(--emerald-600);
  font-size:var(--fs-xs); font-weight:700; padding:.6rem 1rem; border-radius:var(--radius-sm);
  margin-block:var(--space-4); max-width:54ch;
}
.download-steps{display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-6);}
.download-steps li{display:flex; gap:var(--space-3); align-items:flex-start;}
.download-steps li span{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:800;
}
.download-steps li strong{display:block; font-size:var(--fs-sm); color:var(--navy-900); margin-bottom:.15rem;}
.download-steps li p{font-size:var(--fs-xs); color:var(--text-muted); margin:0;}
.download-note{font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--space-4);}
.download-visual{display:flex; flex-direction:column; align-items:center; gap:var(--space-4);}
.phone-mock{
  width:200px; height:400px; border-radius:32px; background:var(--navy-900); padding:10px;
  box-shadow:var(--shadow-lg); position:relative;
}
.phone-mock-notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:60px; height:6px; border-radius:4px; background:rgba(255,255,255,.2); z-index:1;
}
.phone-mock-screen{
  background:var(--off-white); width:100%; height:100%; border-radius:24px;
  padding:28px var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:.6rem;
}
.phone-mock-row{height:14px; border-radius:6px; background:var(--gray-200);}
.phone-mock-row.short{width:60%;}
.phone-mock-card{height:90px; border-radius:var(--radius-sm); background:linear-gradient(135deg,var(--blue-100),var(--emerald-100)); margin-block:.4rem;}

/* Auto-playing Estimate -> Quotation demo inside the phone screen */
.phone-mock-screen--demo{position:relative; padding:28px var(--space-3) var(--space-4); overflow:hidden;}
.phone-frame{
  position:absolute; inset:28px var(--space-3) var(--space-4); display:flex; flex-direction:column; gap:.55rem;
  opacity:0; animation:phoneFrameCycle 7.5s infinite;
}
.phone-frame--1{animation-delay:0s;}
.phone-frame--2{animation-delay:2.5s;}
.phone-frame--3{animation-delay:5s;}
.phone-frame-label{font-size:.65rem; font-weight:800; color:var(--navy-700); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.2rem;}
.phone-mini-row{display:flex; justify-content:space-between; align-items:center; gap:.5rem;}
.phone-mini-row span{display:block; height:10px; border-radius:5px; background:var(--gray-200); flex:1;}
.phone-mini-row span.num{flex:0 0 32px; background:var(--emerald-100);}
.phone-spinner{
  width:38px; height:38px; border-radius:50%; border:4px solid var(--gray-200); border-top-color:var(--emerald-600);
  margin:var(--space-5) auto var(--space-3); animation:phoneSpin 1s linear infinite;
}
.phone-mock-card--check{
  display:flex; align-items:center; justify-content:center; color:var(--emerald-600);
  background:var(--emerald-100); width:64px; height:64px; border-radius:50%; margin:var(--space-5) auto var(--space-4);
}
.phone-mock-card--check svg{width:30px; height:30px;}
@keyframes phoneFrameCycle{
  0%{opacity:0; transform:translateY(6px);}
  4%{opacity:1; transform:translateY(0);}
  29%{opacity:1; transform:translateY(0);}
  33%{opacity:0; transform:translateY(-6px);}
  100%{opacity:0;}
}
@keyframes phoneSpin{to{transform:rotate(360deg);}}
.download-demo-caption{font-size:var(--fs-xs); color:var(--text-muted); text-align:center; max-width:240px;}
@media (prefers-reduced-motion: reduce){
  .phone-frame{animation:none; opacity:0;}
  .phone-frame--1{opacity:1;}
  .phone-spinner{animation:none;}
}
@media (max-width:980px){
  .download-panel{grid-template-columns:1fr; padding:var(--space-6);}
  .download-visual{order:-1;}
  .phone-mock{width:160px; height:320px;}
}

/* ---------- Payments / manual instructions ---------- */
.payments-summary{
  text-align:center; color:var(--text-muted); font-size:var(--fs-md); max-width:64ch;
  margin:0 auto var(--space-7);
}
.payment-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); text-align:left;}
.payment-method-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-5); text-align:center;
}
.payment-method-card h4{font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy-900); margin-bottom:.3rem;}
.payment-method-card p{font-size:var(--fs-xs); color:var(--text-muted);}
.qr-placeholder{
  width:80px; height:80px; margin:0 auto var(--space-3); border-radius:var(--radius-sm);
  background:var(--gray-100); border:1.5px dashed var(--gray-400);
  display:flex; align-items:center; justify-content:center; color:var(--gray-600);
}
.qr-placeholder svg{width:34px; height:34px;}
.payment-method-card--bank{text-align:left;}
.payment-method-card--bank h4{text-align:center; margin-bottom:var(--space-3);}
.payment-method-card--global{text-align:center;}
.payment-method-card--global .icon-tile{margin-inline:auto; margin-bottom:var(--space-3);}
.bank-details{display:flex; flex-direction:column; gap:.45rem; margin:0;}
.bank-details div{display:flex; justify-content:space-between; gap:var(--space-2); font-size:.72rem; border-bottom:1px dashed var(--border); padding-bottom:.35rem;}
.bank-details dt{color:var(--text-muted); font-weight:500;}
.bank-details dd{margin:0; color:var(--navy-900); font-weight:700; text-align:right;}
.payment-instructions-note{
  color:var(--text-muted); font-size:var(--fs-xs); max-width:60ch; margin:var(--space-5) auto 0; text-align:center;
}
@media (max-width:980px){.payment-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.payment-grid{grid-template-columns:1fr;}}

/* ---------- Industries ---------- */
.industry-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-5); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  transition:transform var(--transition), box-shadow var(--transition);
}
.industry-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.industry-card .icon-tile{margin-bottom:0;}
.industry-card span{font-size:var(--fs-sm); font-weight:700; color:var(--navy-900);}

/* ---------- About Us ---------- */
.about-layout{display:grid; grid-template-columns:1.3fr .9fr; gap:var(--space-8); align-items:start;}
.about-copy p{color:var(--text-muted); margin-bottom:var(--space-4); max-width:62ch;}
.about-org-line{
  display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--navy-700);
  background:var(--gray-100); border:1px dashed var(--gray-400); border-radius:var(--radius-sm);
  padding:.5rem .9rem; margin-block:var(--space-2) var(--space-6);
}
.about-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);}
.about-stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-4); text-align:center;
}
.about-stat strong{display:block; font-family:var(--font-display); font-size:var(--fs-xl); color:var(--navy-900); margin-bottom:.25rem;}
.about-stat span{font-size:var(--fs-xs); color:var(--text-muted); line-height:1.4;}
.about-case-study{
  background:var(--navy-900); color:#fff; border-radius:var(--radius-lg);
  padding:var(--space-7); height:100%; display:flex; flex-direction:column;
}
.about-case-study .eyebrow{color:var(--emerald-500);}
.about-case-study h3{color:#fff; font-size:var(--fs-lg); margin-bottom:var(--space-3);}
.about-case-study p{color:rgba(255,255,255,.78); font-size:var(--fs-sm); margin-bottom:var(--space-5); flex-grow:1;}
@media (max-width:980px){
  .about-layout{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){.about-stats{grid-template-columns:1fr;}}

/* ---------- Why / comparison ---------- */
.why-list{display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem;}
.why-list li{
  display:flex; align-items:flex-start; gap:.6rem; font-size:var(--fs-sm); color:var(--gray-700); font-weight:500;
}
.why-list svg{width:18px; height:18px; color:var(--emerald-600); flex-shrink:0; margin-top:1px;}
@media (max-width:640px){.why-list{grid-template-columns:1fr;}}

.compare-table-wrap{overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border);}
.compare-table{width:100%; border-collapse:collapse; min-width:640px; background:var(--surface);}
.compare-table caption{
  text-align:left; font-family:var(--font-display); font-weight:700; font-size:var(--fs-md);
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); color:var(--navy-900);
}
.compare-table th, .compare-table td{padding:.9rem var(--space-5); text-align:left; font-size:var(--fs-sm); border-bottom:1px solid var(--border);}
.compare-table thead th{
  background:var(--gray-100); color:var(--gray-700); font-weight:700; font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.04em;
}
.compare-table tbody th{font-weight:700; color:var(--navy-900); white-space:nowrap;}
.compare-table td.old{color:var(--gray-600);}
.compare-table td.new{color:var(--emerald-600); font-weight:600;}
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th{border-bottom:none;}

/* ---------- Pricing ---------- */
.pricing-toggle{
  display:inline-flex; align-items:center; background:var(--gray-100); border-radius:999px; padding:.3rem;
  margin:0 auto var(--space-7); 
}
.pricing-toggle button{
  border:none; background:transparent; padding:.55rem 1.3rem; border-radius:999px; font-weight:700;
  font-size:var(--fs-sm); color:var(--gray-600); transition:background var(--transition), color var(--transition);
}
.pricing-toggle button.is-active{background:#fff; color:var(--navy-900); box-shadow:var(--shadow-sm);}
.pricing-toggle .save-tag{font-size:.68rem; background:var(--emerald-100); color:var(--emerald-600); padding:.15rem .45rem; border-radius:99px; margin-left:.35rem; font-weight:700;}

.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); align-items:stretch;}
.price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-5); display:flex; flex-direction:column;
}
.price-card.is-featured{border-color:var(--emerald-600); box-shadow:var(--shadow-lg); position:relative;}
.price-card.is-featured::before{
  content:"Most Popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--emerald-600); color:#fff; font-size:.68rem; font-weight:700; padding:.3rem .8rem; border-radius:99px;
}
.price-card h3{font-size:var(--fs-md); margin-bottom:.3rem;}
.price-card .price-desc{font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--space-5); min-height:2.4em;}
.price-card .price-tag{font-family:var(--font-display); font-size:var(--fs-md); color:var(--navy-900); font-weight:700; margin-bottom:.2rem;}
.price-card .price-note{font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--space-5);}
.price-card .btn{margin-bottom:var(--space-5);}
.price-card ul{display:flex; flex-direction:column; gap:.6rem; margin-top:auto;}
.price-card ul li{display:flex; align-items:center; gap:.5rem; font-size:var(--fs-xs); color:var(--gray-700); font-weight:500;}
.price-card ul svg{width:14px; height:14px; color:var(--emerald-600); flex-shrink:0;}
@media (max-width:980px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.pricing-grid{grid-template-columns:1fr;}}

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:var(--surface); border:1px dashed var(--gray-200); border-radius:var(--radius-md);
  padding:var(--space-6); text-align:center; color:var(--text-muted); font-size:var(--fs-sm);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.testimonial-card svg{width:28px; height:28px; color:var(--gray-200);}
.testimonial-invite{
  background:linear-gradient(135deg, var(--navy-900), var(--blue-600)); color:#fff;
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5); text-align:center; margin-top:var(--space-5);
}
.testimonial-invite h3{color:#fff; font-size:var(--fs-md); margin-bottom:.4rem;}
.testimonial-invite p{color:#C3CEE0; font-size:var(--fs-sm); margin-bottom:var(--space-4);}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px; margin-inline:auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:transparent; border:none; text-align:left;
  padding:var(--space-5) .25rem; font-family:var(--font-display); font-weight:700; font-size:var(--fs-md); color:var(--navy-900);
}
.faq-question svg{width:18px; height:18px; flex-shrink:0; color:var(--emerald-600); transition:transform var(--transition);}
.faq-question[aria-expanded="true"] svg{transform:rotate(180deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height var(--transition);
}
.faq-answer-inner{padding:0 .25rem var(--space-5); color:var(--text-muted); font-size:var(--fs-sm); max-width:65ch;}

/* ---------- Contact / Demo form ---------- */
.contact-layout{display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-8); align-items:start;}
.contact-side h2{font-size:var(--fs-2xl); margin-bottom:var(--space-3);}
.contact-side p{color:var(--text-muted); font-size:var(--fs-md); margin-bottom:var(--space-6);}
.contact-side ul{display:flex; flex-direction:column; gap:.75rem;}
.contact-side ul li{display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); color:var(--gray-700); font-weight:500;}
.contact-side svg{width:18px; height:18px; color:var(--emerald-600); flex-shrink:0;}

.demo-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6);}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4);}
.form-field{display:flex; flex-direction:column; gap:.4rem;}
.form-field.full{grid-column:1 / -1;}
.form-field label{font-size:var(--fs-xs); font-weight:700; color:var(--navy-900);}
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:.7rem .85rem; font-size:var(--fs-sm);
  background:#fff; color:var(--text); transition:border-color var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--blue-500);}
.form-field textarea{resize:vertical; min-height:90px;}
.form-error{font-size:.75rem; color:#C0362C; min-height:1em;}
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea{border-color:#C0362C;}
.consent-row{display:flex; align-items:flex-start; gap:.6rem; grid-column:1/-1;}
.consent-row input{margin-top:3px; width:16px; height:16px; flex-shrink:0;}
.consent-row label{font-size:var(--fs-xs); color:var(--gray-700); font-weight:500;}
.form-status{
  margin-top:var(--space-4); padding:.85rem 1rem; border-radius:var(--radius-sm); font-size:var(--fs-sm); font-weight:600;
  display:none;
}
.form-status.is-success{display:block; background:var(--emerald-100); color:var(--emerald-600);}
.form-status.is-info{display:block; background:var(--blue-100); color:var(--blue-600);}
@media (max-width:980px){.contact-layout{grid-template-columns:1fr;}}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--blue-600) 100%);
  border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6); text-align:center; color:#fff;
}
.cta-banner h2{color:#fff; font-size:var(--fs-2xl); margin-bottom:var(--space-3);}
.cta-banner p{color:#C3CEE0; font-size:var(--fs-md); margin-bottom:var(--space-6); max-width:60ch; margin-inline:auto;}
.cta-banner .hero-ctas{justify-content:center; margin-bottom:0;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:#B7C4D9; padding-top:var(--space-9);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:var(--space-6); padding-bottom:var(--space-7);}
.footer-brand .brand{color:#fff;}
.footer-brand p{font-size:var(--fs-sm); color:#9AABC4; margin:var(--space-4) 0 var(--space-5); max-width:30ch;}
.footer-brand p.footer-poweredby{
  font-size:var(--fs-xs); color:#7C8CA8; margin:0 0 var(--space-5);
  border-top:1px dashed rgba(255,255,255,.15); padding-top:var(--space-3); max-width:34ch;
}
.footer-contact-item{display:flex; align-items:center; gap:.5rem; font-size:var(--fs-xs); color:#9AABC4; margin-bottom:.5rem;}
.footer-contact-item svg{width:14px; height:14px; flex-shrink:0; color:var(--emerald-500);}
.footer-col h4{color:#fff; font-size:var(--fs-sm); margin-bottom:var(--space-4);}
.footer-col ul{display:flex; flex-direction:column; gap:.65rem;}
.footer-col a{font-size:var(--fs-sm); color:#9AABC4; transition:color var(--transition);}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:var(--space-5) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  font-size:var(--fs-xs); color:#7C8EAA;
}
.footer-socials{display:flex; gap:.6rem;}
.footer-socials a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; color:#B7C4D9;
}
.footer-socials a:hover{background:rgba(255,255,255,.15); color:#fff;}
.footer-socials svg{width:16px; height:16px;}
@media (max-width:980px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Floating contact widget ---------- */
.floating-contact{position:fixed; bottom:24px; left:24px; z-index:901; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem;}
.floating-contact-toggle{
  width:54px; height:54px; border-radius:50%; border:none; background:var(--emerald-600); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); cursor:pointer;
  transition:background var(--transition), transform var(--transition);
}
.floating-contact-toggle:hover{background:var(--emerald-500); transform:scale(1.05);}
.floating-contact-toggle svg{width:24px; height:24px;}
.floating-contact-toggle .icon-close{display:none;}
.floating-contact[data-open="true"] .floating-contact-toggle .icon-open{display:none;}
.floating-contact[data-open="true"] .floating-contact-toggle .icon-close{display:block;}
.floating-contact-menu{
  display:flex; flex-direction:column; gap:.5rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:.6rem; box-shadow:var(--shadow-lg); min-width:200px;
  animation:floatingMenuIn .18s ease;
}
@keyframes floatingMenuIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.floating-contact-item{
  display:flex; align-items:center; gap:.65rem; padding:.6rem .7rem; border-radius:var(--radius-sm);
  font-size:var(--fs-sm); font-weight:600; color:var(--navy-900); transition:background var(--transition);
}
.floating-contact-item:hover{background:var(--gray-100);}
.floating-contact-icon{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.floating-contact-icon svg{width:17px; height:17px;}
.floating-contact-icon--whatsapp{background:var(--emerald-100); color:var(--emerald-600);}
.floating-contact-icon--call{background:var(--blue-100); color:var(--blue-600);}
.floating-contact-icon--demo{background:var(--orange-100); color:var(--orange-600);}
@media (max-width:640px){
  .floating-contact{bottom:18px; left:18px;}
  .floating-contact-toggle{width:48px; height:48px;}
}
@media (prefers-reduced-motion: reduce){
  .floating-contact-menu{animation:none;}
}

/* ---------- Modal (Login) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1100; background:rgba(11,31,58,.55);
  display:flex; align-items:center; justify-content:center; padding:var(--space-5);
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-7);
  max-width:420px; width:100%; box-shadow:var(--shadow-lg); position:relative;
  animation:modalIn .18s ease;
}
@keyframes modalIn{from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-close{
  position:absolute; top:var(--space-4); right:var(--space-4); width:32px; height:32px; border-radius:50%;
  border:none; background:var(--gray-100); color:var(--gray-600); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.modal-close:hover{background:var(--gray-200);}
.modal-close svg{width:16px; height:16px;}
.modal-brand{display:flex; justify-content:center; margin-bottom:var(--space-4);}
.modal-brand .brand-mark{
  width:48px; height:48px; border-radius:var(--radius-sm); background:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
}
.modal-brand .brand-mark svg{width:24px; height:24px;}
.modal-box h2{text-align:center; font-size:var(--fs-lg); margin-bottom:var(--space-2);}
.modal-note{font-size:var(--fs-xs); color:var(--text-muted); text-align:center; margin-bottom:var(--space-6); line-height:1.5;}
.modal-form{display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-4);}
.modal-form .form-field label{display:block; font-size:var(--fs-xs); font-weight:700; color:var(--navy-900); margin-bottom:.35rem;}
.modal-form .form-field input{
  width:100%; padding:.7rem .9rem; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:var(--fs-sm); font-family:var(--font-body); background:var(--off-white);
}
.modal-form .form-field input:focus{outline:2px solid var(--emerald-500); outline-offset:1px; background:#fff;}
.modal-form-status{
  font-size:var(--fs-xs); color:var(--text-muted); background:var(--gray-100); border-radius:var(--radius-sm);
  padding:.65rem .8rem; margin:0; text-align:center;
}
@media (prefers-reduced-motion: reduce){.modal-box{animation:none;}}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:46px; height:46px; border-radius:50%; background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  border:none;
}
.back-to-top.is-visible{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top svg{width:18px; height:18px;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:1050;
  background:var(--navy-900); color:#E3E9F2;
  padding:var(--space-4) var(--space-5);
  display:flex; align-items:center; justify-content:center; gap:var(--space-5); flex-wrap:wrap;
  transform:translateY(100%); transition:transform var(--transition);
  box-shadow:0 -8px 24px rgba(0,0,0,.15);
}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner p{font-size:var(--fs-xs); max-width:60ch;}
.cookie-banner .btn{flex-shrink:0;}

/* ---------- Utility text ---------- */
.text-center{text-align:center;}
.mt-6{margin-top:var(--space-6);}
.muted{color:var(--text-muted);}

/* ---------- Legal pages ---------- */
.legal-page{padding-top:calc(var(--header-h) + var(--notice-h, 38px) + var(--space-7)); padding-bottom:var(--space-9);}
.legal-page .container{max-width:780px;}
.legal-page h1{font-size:var(--fs-2xl); margin-bottom:var(--space-3);}
.legal-page .updated{font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--space-7);}
.legal-page h2{font-size:var(--fs-lg); margin-top:var(--space-7); margin-bottom:var(--space-3);}
.legal-page p, .legal-page li{color:var(--gray-700); font-size:var(--fs-sm); margin-bottom:var(--space-3);}
.legal-page ul{list-style:disc; padding-left:1.4rem;}
.legal-page ul li{margin-bottom:.4rem;}
.config-note{
  background:var(--orange-100); border:1px solid #F4C9A8; border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4); font-size:var(--fs-xs); color:#8A4321; margin-bottom:var(--space-3);
}

/* ---------- 404 ---------- */
.error-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--space-6); background:var(--navy-900); color:#fff;
}
.error-page .code{font-family:var(--font-display); font-size:5rem; font-weight:800; color:var(--emerald-500); line-height:1;}
.error-page h1{color:#fff; font-size:var(--fs-xl); margin:var(--space-4) 0 var(--space-3);}
.error-page p{color:#B7C4D9; margin-bottom:var(--space-6);}