/* ===== Variables ===== */
:root{
  --primary-y:#E5BB21;
  --primary-db:#1D2540;
  --primary-w:#F9F8F0;

  --text-db:#1D2540;
  --text-w:#fff;

  --maxw:1440px;
  --pad-section:48px;
  --pad-nav-lr:48px;   /* mobile -> 24px */
  --pad-nav-tb:24px;

  --gap:32px;
  --gap-sm:24px;

  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.12);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:300; /* Light */
  font-size:16px; line-height:1.6; color:var(--text-db);
  background:#fff;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus{ outline:3px solid var(--primary-y); outline-offset:2px; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ position:fixed; left:12px; top:8px; background:#fff; padding:6px 10px; border-radius:8px; z-index:9999; }

/* Headings (Poppins) */
.h1,.h2,.h3,.h4,h1,h2,h3,h4{ font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0 0 16px; }
.h1,h1{ font-size:32px; font-weight:700; line-height:1.2; }
.h2,h2{ font-size:24px; font-weight:700; line-height:1.3; }
.h3,h3{ font-size:20px; font-weight:600; line-height:1.4; }
.h4,h4{ font-size:16px; font-weight:600; line-height:1.4; }
.lead{ font-size:18px; }

/* Make <strong> reliably bold with Figtree */
strong, b { font-weight: 700; }

/* Optional: if you prefer labels in Poppins instead of Figtree */
.footer-contact strong { 
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}


.color-db{ color:var(--text-db); }
.color-w{ color:var(--text-w); }
.color-primary-y{ color:var(--primary-y); }

.bg-primary-y{ background:var(--primary-y); }
.bg-primary-db{ background:var(--primary-db); }
.bg-primary-w{ background:var(--primary-w); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-section); }
.section{ padding-block:var(--pad-section); }

/* ===== Header & Nav ===== */
.site-header{ position:sticky; top:0; z-index:1000; background:var(--primary-db); color:#fff; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-inline:var(--pad-nav-lr); padding-block:var(--pad-nav-tb); }
.brand img{ height:36px; width:auto; }

.primary-nav .nav-list{ display:flex; list-style:none; gap:8px; margin:0; padding:0; }
.primary-nav a, .footer-nav a {
  font-family:"Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.02em; color:#fff;
  padding:10px 12px; border-radius:10px;
}
.primary-nav a:hover, .primary-nav a:focus{ text-decoration:underline; text-underline-offset:3px; }

/* Burger button (hidden on desktop) */
.burger{
  display:none; background:none; border:none; padding:8px; margin-left:auto; cursor:pointer;
}
.burger span{
  display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:transform .25s ease, opacity .25s ease;
}

/* ===== Hero ===== */
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--gap); align-items:center; }
.hero-visual img{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.25)); }

/* ===== Features ===== */
.features-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px 32px; }
.feature{ display:flex; gap:16px; align-items:flex-start; }
.feature-icon{ width:72px; flex:0 0 56px; }

/* ===== Solutions ===== */
.solutions-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:32px 48px; }
.solution{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.sol-num{ font-family:"Poppins"; font-size:48px; font-weight:700; line-height:1; }

/* ===== Users ===== */
.users{ position:relative; overflow:hidden; padding-bottom:0;}
.users-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px 32px; }
.users-people{ display:block; margin:0 auto; transform:translateY(8px); }

/* ===== Pricing ===== */
.note{ margin:8px 0 16px; }
.tiny{ font-size:12px; opacity:.85; }
.small{ font-size:14px; }

.pricing-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.price-card{ background:var(--primary-db); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.price-head{ padding:24px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); }
.feature-list{ list-style:none; margin:0; padding:32px 24px; display:grid; gap:10px; color:#fff; }
.feature-list li{ padding-left:28px; position:relative; }

/* ===== About Us ===== */
.about-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px 32px;
}
.about-card{
  display:grid;
  grid-template-columns:auto 1fr; /* logo left, text right */
  gap:16px;
  align-items:start;
}
.about-logo img{
  width:72px;             /* adjust if needed */
  height:auto;
  object-fit:contain;
  display:block;
}

/* Material Symbols for pricing ticks/crosses */
:root{
  --ok:#7dd97d;     /* keep your existing green */
  --bad:#ff7b7b;    /* keep your existing red */
}

.feature-list li{
  position:relative;
  padding-left:28px;
}

.feature-list li::before{
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;           /* icon size */
  line-height: 1;
  position:absolute;
  left:0; top:4px;
  color: currentColor;       /* default; overridden below */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.feature-list li.yes::before{
  content: "check_circle";   /* or "check" if you prefer */
  color: var(--ok);
}

.feature-list li.no::before{
  content: "cancel";         /* or "close" */
  color: var(--bad);
}


/* ===== FAQ ===== */
.faq-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px 32px; }
.faq{ padding:20px 0; border-top:1px dashed rgba(0,0,0,.15); }

/* ===== Footer ===== */
.site-footer{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1fr auto; gap:24px; padding-block:var(--pad-section); }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.footer-nav a{ color:#fff; opacity:.9; }
.footer-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{ padding:16px var(--pad-section) calc(var(--pad-section) - 16px); border-top:1px solid rgba(255,255,255,.12); text-align:center; padding-top: 0;}

/* ===== Animations ===== */
.observe{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.inview{ opacity:1 !important; transform:none !important; }

/* ===== Responsive ===== */
/* Tablet (≤1024px): enable burger menu */
@media (max-width:1024px){
  .nav-inner{ padding-inline:var(--pad-section); }
  .burger{ display:block; }
  .primary-nav{ position:fixed; inset:64px 0 auto 0; background:var(--primary-db); transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .primary-nav .nav-list{ flex-direction:column; gap:0; padding:12px var(--pad-section) 16px; }
  .primary-nav a{ display:block; padding:12px; border-radius:8px; }
  body.nav-open .primary-nav{ opacity:1; pointer-events:auto; transform:none; }
  body.nav-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2){ opacity:0; }
  body.nav-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .solutions-grid{ grid-template-columns:1fr; }
  .users-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .faq-grid{ grid-template-columns:repeat(2,1fr); }
  #primary-menu { text-align:center; }
}

/* Mobile (≤480px): 24px L/R padding + centered text in requested sections */
@media (max-width:480px){
  :root{ --pad-nav-lr:24px; }
  .container{ padding-inline:24px;}
  .nav-inner{ padding-inline:var(--pad-nav-lr); }
  .brand img{ height:30px; }

  /* Center text where requested */
  .hero-grid{ text-align:center; }
  .users .container, .users-grid{ text-align:center; }
  .faq-grid{ text-align:center; }

  .features-grid{ grid-template-columns:1fr; }
  .users-grid{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }
  
}
@media (max-width:680px){
    .container{grid-template-columns: 1fr;}
    .footer-nav ul {flex-direction: column;}
    .site-footer .container, .footer-bottom{ text-align:center; }
    .about-grid{ grid-template-columns:1fr; }
}


/* ===== Modal (Terms / Privacy) ===== */
.modal{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; }

.modal__overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
}

.modal__dialog{
  position:relative;
  width:min(840px, calc(100% - 48px));
  max-height:85vh;
  background:var(--primary-w);
  color:var(--text-db);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

/* Top bar */
.modal__topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}
.modal__topbar .h3{ margin:0; }

/* Close X */
.modal__close{
  background:none; border:none; color:var(--text-db);
  font-size:28px; line-height:1; padding:4px 8px; cursor:pointer;
  border-radius:8px;
}
.modal__close:hover{ background:rgba(0,0,0,.06); }

/* Content */
.modal__content{
  padding:16px 20px;
  overflow:auto;
}
.modal__content p,
.modal__content li{ font-family:"Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.modal__content h4{ margin-top:16px; }

/* Footer */
.modal__footer{
  display:flex; justify-content:flex-end; gap:12px;
  padding:12px 20px 16px;
  border-top:1px solid rgba(0,0,0,.08);
}

/* Button */
.btn{
  font-family:"Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  background:var(--primary-db); color:#fff;
  border:none; border-radius:10px;
  padding:10px 14px; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }

/* Make footer buttons look like links */
.linklike{
  background:none; border:none; color:#fff; opacity:.9; cursor:pointer; padding:0;
  font: inherit; /* keep Figtree 13px bold uppercase from parent? */
  text-transform:uppercase; font-weight:700; font-size:13px; letter-spacing:.02em;
}
.linklike:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* Mobile tweaks */
@media (max-width:480px){
  .modal__dialog{
    width:calc(100% - 24px);
    max-height:90vh;
    border-radius:12px;
  }
}