/* Base */
:root{
  /* brand palette (provided) */
  --brand1: #5f00ad; /* purple */
  --brand2: oklch(0.5944 0.1665 256.61); /* deep purple-blue */
  --brand3: oklch(0.696 0.17 162.48); /* teal-green */
  --brand4: rgb(226 116 41); /* orange */

  /* light theme tokens */
  --bg: #f3f7f4;
  --bg-soft: #e9f3ef;
  --card: #ffffff;
  --text: #111318;
  --muted: #5a606d;
  --primary: var(--brand3);
  --primary-700: color-mix(in oklab, var(--brand3), black 15%);
  --accent: var(--brand2);
  --ring: color-mix(in oklab, var(--brand3), white 20%);
  --shadow: rgba(12,21,40,0.18);

  /* section backgrounds */
  --hero-gradient: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand2), white 86%) 0%,
    color-mix(in oklab, var(--brand3), white 84%) 35%,
    color-mix(in oklab, var(--brand1), white 86%) 70%,
    color-mix(in oklab, var(--brand4), white 86%) 100%
  );
}
*{box-sizing:border-box}
/* Let the root element own scrolling; avoid nested scrollbars */
html,body{min-height:100%;width:100%;overflow-x:hidden}
html{overflow-y:auto}
body{
  margin:0;
  font-family: "Outfit", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 80% -10%, color-mix(in oklab, var(--brand3), white 92%), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, color-mix(in oklab, var(--brand1), white 94%), transparent 60%),
    radial-gradient(1000px 700px at 50% -20%, color-mix(in oklab, var(--brand4), white 95%), transparent 60%),
    var(--hero-gradient),
    var(--bg);
}
main{width:100%;}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.grad{background:linear-gradient(90deg, var(--brand3), var(--brand1));-webkit-background-clip:text;background-clip:text;color:transparent}
.container{max-width:1280px;width:100%;margin-left:auto;margin-right:auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:transparent;padding:14px 0}
.site-header .container{max-width:1100px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;background:rgba(255,255,255,0.88);backdrop-filter:saturate(160%) blur(8px);border:1px solid rgba(20,23,40,0.06);border-radius:16px;box-shadow:0 18px 38px -28px var(--shadow);background-image:linear-gradient(90deg, #ffffff 0%, #d8dbe1 40%, rgba(21,55,206,0.12) 100%)}
.brand{display:flex;align-items:center;gap:8px}
.brand-mark{width:auto;height:36px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.08))}
  .brand-text{font-weight:800;letter-spacing:0.2px;display:inline-flex;align-items:center;line-height:1;background:linear-gradient(90deg, var(--brand3), var(--brand1));-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand-text::before{content:"";display:inline-block;width:1.5px;height:26px;border-radius:1px;background:linear-gradient(180deg, var(--brand3), var(--brand1));opacity:.9;margin:0 12px 0 8px}
.nav-toggle{display:none;background:none;border:0;padding:6px;border-radius:8px}
.nav-toggle .bar{width:22px;height:2px;background:#1b1f2a;margin:4px 0;border-radius:2px}
.nav-menu{display:flex;gap:32px;align-items:center;margin:0;padding:0;list-style:none}
.nav-menu a{color:#262b36;font-size:15px;}
.nav-menu a:hover{color:var(--brand1)}
.dropdown{position:relative}
.dropdown-toggle{display:inline-flex;align-items:center;gap:8px}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid rgba(20,23,40,0.08);border-radius:14px;box-shadow:0 18px 38px -28px var(--shadow);padding:8px;min-width:280px;display:none;z-index:60}
.dropdown-menu{max-width:calc(100vw - 24px)}
.dropdown.open .dropdown-menu{display:block}
.dropdown-item{display:flex;justify-content:flex-start;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;color:#0f1422;white-space:nowrap;transition:background .18s ease}
.dropdown-item:hover{background:rgba(20,23,40,0.04)}
.dropdown-item.disabled{opacity:.55;cursor:not-allowed}
.dropdown-item .coming{font-size:12px;color:#596270;font-weight:500}
.brand-word{font-weight:800}
.brand-word.tele{background:linear-gradient(135deg, #ff8a3d, #ff4d4d);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-word.work{background:linear-gradient(135deg, #27c07d, #0ea862);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-word.hr{background:linear-gradient(135deg, #8a5bff, #b18cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-word.fleet{background:linear-gradient(135deg, #4a7cff, #2f64ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease, background .2s ease, border-color .2s ease;color:#0f1422}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg, var(--brand3), var(--brand1));box-shadow:0 10px 20px -6px rgba(10,20,40,0.25);color:#fff}
.btn-primary:hover{background:linear-gradient(135deg, var(--brand2), var(--brand1))}
.btn-ghost{background:transparent;border-color:rgba(20,23,40,0.14)}

/* Hero */
.hero{
  padding:44px 0 28px;
  background: transparent; /* let the page gradient flow from the header through the hero */
  border-bottom:1px solid rgba(20,23,40,0.06);
}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.hero-eyebrow{margin:0 0 6px;font-weight:700;color:#22492f;font-size:clamp(20px,2.6vw,32px)}
.hero-title{font-size:clamp(18px, 3.4vw, 38px);line-height:1.06;margin:0 0 6px;color:#1b6b2c;font-weight:800;letter-spacing:-0.3px}
.hero-sub{
  font-weight:800;
  font-size:clamp(22px, 4.2vw, 44px);
  margin:0 0 18px;
  max-width:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background: linear-gradient(90deg, var(--brand3), var(--brand1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Give the hero description comfortable side gutters */
.hero-desc{max-width:1280px;margin:12px auto 0}
.hero-desc p{margin:0;padding-inline:clamp(24px, 8vw, 140px);line-height:1.8;font-size:clamp(16px,2.0vw,18px)}
/* Reduce hero logo size */
.hero-art{display:flex;flex-direction:column;align-items:center}
/* Static by default; tilt only on hover/focus */
.hero-art .logo-splash{position:relative;display:grid;place-items:center;margin:8px auto 0}
.hero-art .logo-splash::before{content:"";position:absolute;inset:auto;width:min(520px,85vw);height:min(520px,85vw);background:radial-gradient(40% 40% at 50% 45%, rgba(95,0,173,.18), transparent 60%), radial-gradient(45% 45% at 55% 55%, rgba(39,192,125,.18), transparent 60%);filter:blur(36px);z-index:-1;opacity:.7}
.hero-art .logo-splash img{width:clamp(140px, 40vw, 340px);height:auto;display:block;margin-inline:auto;filter:drop-shadow(0 10px 28px rgba(10,20,40,.18));transform-origin:50% 55%}
/* Tilt animation only while users interact */
.hero-art .logo-splash:hover img,
.hero-art .logo-splash:focus-visible img{animation:tilt 1.2s ease-in-out infinite alternate}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes tilt{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
@keyframes glow{from{transform:translateY(4px) scale(0.98);opacity:.5}to{transform:translateY(-4px) scale(1.02);opacity:.8}}
/* Sections */
.section{padding:56px 0}
.section-head{max-width:760px;margin:0 auto 20px;text-align:center}
.section-head h2{margin:0 0 6px;font-size:clamp(24px, 3.2vw, 36px)}
.section-head p{margin:0;color:var(--muted)}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:18px 18px 16px;box-shadow:0 12px 24px -14px var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Why us? info cards */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.why-card{background:var(--card);border:1px solid rgba(20,23,40,0.08);border-radius:16px;padding:18px 18px 16px;box-shadow:0 12px 24px -14px var(--shadow);opacity:0;transform:translateX(40px);animation:whyIn .9s cubic-bezier(.25,.8,.25,1) forwards}
.why-card:nth-child(2){animation-delay:.15s}
.why-card:nth-child(3){animation-delay:.3s}
.why-card{width:100%}
@keyframes whyIn{to{opacity:1;transform:translateX(0)}}
.why-card h3{margin:0 0 8px;font-size:20px;color:#0f1422}
.why-card p{margin:0 0 8px;color:#525b6a;line-height:1.7}
.why-card ul{margin:0 0 8px 18px}
.why-card li{margin:0 4px 6px 0}

/* Hierarchy Overview */
.hierarchy{background:linear-gradient(180deg, rgba(93,225,230,0.06), transparent)}
.hierarchy-tree{position:relative;display:grid;gap:22px;--line: rgba(20,23,40,0.12)}
.hierarchy-level{display:flex;justify-content:center;position:relative}
.h-card{position:relative;background:#fff;border:1px solid rgba(20,23,40,0.08);border-radius:18px;box-shadow:0 16px 30px -18px var(--shadow);padding:16px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0;max-width:300px;margin-inline:auto}
.h-card picture{display:block}
.h-card img{width:72px;height:auto}
.h-card h3,.h-card h4{margin:4px 0 2px}
.h-card .role-label{margin:0;color:#596270;font-size:14px}
.level-parent .h-card{border-color:rgba(93,225,230,.5)}
.level-product .h-card{border-color:rgba(95,0,173,.35)}
.h-row{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;align-items:stretch;}

/* connectors */
.tree-connect{display:none}
/* centered connectors using local positioning to avoid misalignment */
.level-parent::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-25px;width:2px;height:26px;background:var(--line)}
.level-product .h-card::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-32px;width:2px;height:32px;background:var(--line)}
.level-product::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-32px;width:min(1100px,92%);height:2px;background:var(--line)}
.h-row{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;align-items:stretch;width:min(1100px,100%);margin-inline:auto}
.level-parent .h-card,.level-product .h-card{max-width:300px}
.level-crms::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-18px;width:2px;height:18px;background:var(--line)}

/* subtle entrance */
.hierarchy .h-card{opacity:0;transform:translateY(16px);animation:popIn .7s ease-out forwards}
.hierarchy .level-parent .h-card{animation-delay:.05s}
.hierarchy .level-product .h-card{animation-delay:.15s}
.hierarchy .level-crms .h-card:nth-child(1){animation-delay:.25s}
.hierarchy .level-crms .h-card:nth-child(2){animation-delay:.35s}
.hierarchy .level-crms .h-card:nth-child(3){animation-delay:.45s}
.hierarchy .level-crms .h-card:nth-child(4){animation-delay:.55s}
@keyframes popIn{to{opacity:1;transform:translateY(0)}}

@media (max-width: 980px){
  .products-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .why-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media (max-width: 600px){
  .why-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .feature-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .h-card img{width:64px}
}

.hierarchy-summary{max-width:1000px;margin:10px auto 0;text-align:center;color:var(--muted);line-height:1.7}

/* Products */
.products{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.product-card{position:relative;background:#fff;border:1px solid rgba(20,23,40,0.08);border-radius:18px;box-shadow:0 16px 30px -18px var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(16px);animation:popIn .7s ease-out forwards;overflow:hidden}
.product-card:nth-child(2){animation-delay:.1s}
.product-card:nth-child(3){animation-delay:.2s}
.product-card{width:100%}
.product-card:nth-child(4){animation-delay:.3s}
.product-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-top-left-radius:18px;border-top-right-radius:18px;background:var(--accent, linear-gradient(135deg, #ccc, #bbb))}
.product-card .p-head{display:flex;align-items:center;gap:12px}
.product-card .p-head img{width:42px;height:auto}
.product-card h3{margin:0 0 2px;font-size:20px}
.product-card .desc{margin:0 0 2px;color:#556070}
.feat-list{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:6px}
.feat-list li{position:relative;padding-left:22px}
.feat-list li::before{content:"✓";position:absolute;left:0;top:0;color:currentColor;font-weight:800}
.purpose{margin:4px 0 0;color:#2b3442}

/* product accents */
.product-card.tele{--accent: linear-gradient(135deg, #ff8a3d, #ff4d4d);color:#4a2b1a}
.product-card.work{--accent: linear-gradient(135deg, #27c07d, #0ea862);color:#1f3c2e}
.product-card.hr{--accent: linear-gradient(135deg, #8a5bff, #b18cff);color:#2d2942}
.product-card.fleet{--accent: linear-gradient(135deg, #4a7cff, #2f64ff);color:#1b243d}

@media (max-width: 1024px){
  .products-grid{grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
}
@media (max-width: 820px){
  .why-grid{grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
}
@media (max-width: 980px){
  .h-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));justify-content:center}
}
/* Integration summary */
.integration{background:linear-gradient(180deg, rgba(93,225,230,0.06), rgba(95,0,173,0.04))}
.integration-content{max-width:980px;margin:0 auto 14px;text-align:center}
.integration-content p{margin:0 0 8px;color:#2f3d4a;font-size:clamp(16px,2.0vw,18px);line-height:1.75}
.integration-flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:10px}
.chip{background:#fff;border:1px solid rgba(20,23,40,0.08);border-radius:999px;padding:10px 14px;font-weight:800;box-shadow:0 10px 20px -14px var(--shadow)}
.arrow{opacity:.7;color:#40485a;font-weight:700}
.chip.core{background:linear-gradient(135deg, color-mix(in oklab, var(--brand3), white 80%), color-mix(in oklab, var(--brand1), white 80%));color:#0f1422;border-color:rgba(20,23,40,0.06)}
.chip.tele{color:#c5442c}
.chip.work{color:#137851}
.chip.hr{color:#5b46bb}
.chip.fleet{color:#2d54db}
.integration .chip,.integration .arrow{opacity:0;transform:translateY(10px);animation:popIn .6s ease-out forwards}
.integration .chip:nth-of-type(1){animation-delay:.05s}
.integration .arrow:nth-of-type(2){animation-delay:.12s}
.integration .chip:nth-of-type(3){animation-delay:.19s}
.integration .arrow:nth-of-type(4){animation-delay:.26s}
.integration .chip:nth-of-type(5){animation-delay:.33s}
.integration .arrow:nth-of-type(6){animation-delay:.4s}
.integration .chip.core{animation-delay:.5s}

/* Marquee */
.marquee-row{position:relative;overflow:hidden;margin:12px 0}
.marquee-track{display:flex;gap:18px;will-change:transform;animation:marquee 40s linear infinite}
.marquee-row.slow .marquee-track{animation-duration:60s}
.marquee-row.reverse .marquee-track{animation-direction:reverse}
.marquee-row:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Feature cards in marquee (lighter borders for light theme) */
.marquee-row .card{border:1px solid rgba(20,23,40,0.08);background:#fff;border-radius:18px;padding:18px 18px 16px;min-width:300px}
.marquee-row .card h3{font-size:18px;color:#0f1422}
.marquee-row .card p{color:#525b6a}

/* Pricing */
.pricing{background:linear-gradient(180deg, rgba(93,225,230,0.05), transparent)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{background:var(--card);border:1px solid rgba(255,255,255,0.09);border-radius:18px;padding:22px;position:relative;box-shadow:0 16px 30px -18px var(--shadow);display:flex;flex-direction:column}
.price-card.popular{border-color:rgba(93,225,230,0.5)}
.price-card .badge{position:absolute;top:14px;right:14px;background:linear-gradient(135deg, var(--accent), #7cf3f7);color:#00131a;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.plan{margin:0 0 8px}
.price{margin:0 0 12px}
.amt{font-size:36px;font-weight:800}
.currency{opacity:.8;margin-right:2px}
.per{opacity:.7;margin-left:6px}
.features-list{list-style:none;padding:0;margin:0 0 16px;color:var(--muted);display:grid;gap:8px}
.full-btn{width:100%;justify-content:center}

/* Download */
.download{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.download-intro{max-width:800px;margin:0 auto 14px}
.download-intro .kicker{display:block;font-weight:800;color:#304056;text-transform:lowercase;font-size:clamp(16px,2.4vw,22px)}
.download-intro h2{margin:.25rem 0 0;font-size:clamp(28px,3.4vw,40px);font-weight:900}
.download-intro .grad{background:linear-gradient(90deg, var(--brand3), var(--brand1));-webkit-background-clip:text;background-clip:text;color:transparent}

.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}
.store-card{background:var(--card);border:1px solid rgba(20,23,40,0.08);border-radius:24px;padding:20px;text-align:center;box-shadow:0 18px 30px -22px var(--shadow);display:flex;flex-direction:column;justify-content:center}
.store-card h3{margin:0 0 12px;color:#0f1422;font-size:clamp(20px,2.5vw,28px)}
.store-card img{width:min(420px,90%);height:auto;margin:0 auto}

.scan-row{max-width:800px;margin:28px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start;justify-items:center}
.scan-box{background:#fff;border-radius:18px;padding:14px;box-shadow:0 10px 22px -14px rgba(0,0,0,.15);border:1px solid rgba(20,23,40,0.06)}
.qr{width:176px;height:176px;object-fit:contain}
.scan-label{margin-top:8px;font-weight:800}
.scan-label.google{color:rgb(226 116 41)}
.scan-label.apple{color:#1d5f4f}

/* Contact */
.contact-form{max-width:880px;margin:0 auto}
/* Stack inputs one-by-one on all screen sizes */
.form-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
label{display:flex;flex-direction:column;gap:8px;color:var(--muted);margin-bottom:12px}
/* Visible borders and clean white fields */
input,textarea{background:#ffffff;border:1.5px solid rgba(20,23,40,0.18);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit;outline:none}
input::placeholder,textarea::placeholder{color:#8a90a0}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
label.full{display:block;margin-bottom:0}
label.full textarea{width:100%;min-height:160px;resize:vertical}
/* Make the action button full-width with helper text below */
.form-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:10px}
.form-actions .btn{width:100%;justify-content:center}
.sla{color:var(--muted);margin:0;text-align:center}

/* Testimonials */
.testimonials{background:linear-gradient(180deg, rgba(79,126,247,0.05), transparent)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:18px}
.testimonial blockquote{margin:0 0 10px;font-size:16px;line-height:1.5}
.testimonial figcaption{color:var(--muted)}

/* FAQ */
.faq-list{max-width:880px;margin:0 auto;display:grid;gap:10px}
.faq-item{background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:14px 16px;cursor:pointer;font:inherit;display:flex;justify-content:space-between;align-items:center}
.faq-q[aria-expanded="true"]{background:rgba(255,255,255,0.03)}
.faq-a{padding:0 16px 14px 16px;color:var(--muted)}

/* Footer */
.site-footer{background:#2f2f2f;padding:16px 0;font-size:14px}
.footer-inner{display:flex;justify-content:center;align-items:center}
.footer-text{margin:0;color:#fff;display:flex;align-items:center;gap:10px;font-weight:400}
.footer-text .sep{opacity:.5}
.footer-link{color:#fff;text-decoration:none;font-weight:600}
.footer-link:hover{text-decoration:underline}
.footer-link.strong{font-weight:700}
@media (max-width:600px){
  .footer-text{flex-wrap:wrap;justify-content:center;gap:6px;text-align:center}
}

/* Prevent stray absolute connector lines from creating scroll after footer */
.hierarchy{overflow:hidden}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero-art{order:-1}
}
@media (max-width: 560px){
  .section{padding:40px 0}
  .hero-sub{white-space:normal;overflow:visible;text-overflow:clip}
  .card,.why-card,.product-card{padding:16px}
}
@media (max-width: 1024px){
  .products-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .h-row{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));width:100%}
}
@media (max-width: 820px){
  .feature-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .testimonial-grid{grid-template-columns:1fr 1fr}
  .download-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .form-row{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .container{padding-left:20px;padding-right:20px}
}
@media (max-width: 680px){
  .products-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .why-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .container{padding-left:18px;padding-right:18px}
  /* Mobile header: logo left, only Login button on right */
  .nav-toggle{display:none}
  .nav-menu{position:static;display:flex !important;flex-direction:row;gap:0;background:transparent;border:0;padding:0;min-width:auto}
  .nav-menu > li:not(.dropdown){display:none}
  .dropdown{align-self:center}
  /* Use floating panel for dropdown like desktop on mobile */
  .dropdown-menu{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid rgba(20,23,40,0.08);border-radius:14px;box-shadow:0 18px 38px -28px var(--shadow);padding:8px;min-width:260px;display:none}
  .dropdown.open .dropdown-menu{display:block}
  .dropdown-item{justify-content:flex-start}
}

/* Fix hero stacking on tablet/mobile: keep title above image/desc */
@media (max-width: 980px){
  .hero-inner{gap:20px}
  .hero-art{order:0}
}