@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --pink:#1A6FD4;--purple:#0ABFA3;
  --g:linear-gradient(90deg,#1A6FD4,#0ABFA3);
  --gd:linear-gradient(135deg,#1A6FD4,#0ABFA3);
  --h:#0f172a;--b:#64748b;--bd:#475569;--bg:#fff;
  --bl:#f0f7ff;--bc:#e8f4ff;--br:#f1f5f9;--brd:#e2e8f0;
  --e:#dc2626;--sp:0 10px 25px rgba(26,111,212,0.25);
  --spl:0 15px 40px rgba(26,111,212,0.35);
  /* Touch-friendly minimum tap target */
  --tap-min:48px;
  /* Elder-friendly base font */
  --fs-base:17px;
  --fs-sm:15px;
  --fs-xs:13px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Inter',sans-serif;color:var(--b);background:var(--bg);line-height:1.7;overflow-x:hidden;font-size:var(--fs-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:inherit}
/* Lazy-load images: fade in when loaded */
img{max-width:100%;display:block;height:auto}
img[loading="lazy"]{opacity:0;transition:opacity 0.4s ease}
img[loading="lazy"].loaded{opacity:1}
/* Reduce motion for users who prefer it */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}

/* =========================================
   NAVBAR
   ========================================= */
.navbar{position:fixed;top:0;left:0;right:0;height:70px;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--br);z-index:1000;display:flex;align-items:center;will-change:transform}
.nav-wrapper{width:100%;max-width:1280px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-logo-icon{width:42px;height:42px;background:var(--g);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--sp)}
.brand-logo-icon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-logo-text{display:flex;flex-direction:column;line-height:1.1}
.brand-logo-name{font-size:1.45rem;font-weight:800;color:var(--h);letter-spacing:-0.5px}
.brand-logo-name span{background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand-tagline{font-size:0.56rem;font-weight:600;color:var(--b);letter-spacing:0.2px;margin-top:1px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-logo-icon{width:38px;height:38px;background:var(--g);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--sp)}
.footer-logo-icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.footer-logo-text{display:flex;flex-direction:column;line-height:1.1}
.footer-logo-name{font-size:1.35rem;font-weight:800;color:var(--h)}
.footer-logo-name span{background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer-tagline{font-size:0.7rem;font-weight:600;color:var(--b);margin-top:2px}
.main-menu{display:flex;gap:24px}
.menu-link{font-weight:600;font-size:0.92rem;color:var(--bd);transition:color 0.25s;padding:6px 2px;min-height:var(--tap-min);display:inline-flex;align-items:center}
.menu-link:hover,.menu-link.active{color:var(--pink)}
.menu-link.active{border-bottom:2px solid transparent;border-image:var(--g) 1}
.auth-btns{display:flex;align-items:center;gap:10px;flex-shrink:0}
.link-login{font-weight:600;color:var(--pink);padding:8px 4px;min-height:var(--tap-min);display:inline-flex;align-items:center}

/* =========================================
   BUTTONS — elder-friendly large tap targets
   ========================================= */
.btn-g{background:var(--g);color:#fff;padding:11px 22px;border-radius:10px;font-weight:700;font-size:0.95rem;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sp);transition:transform 0.2s,box-shadow 0.2s;border:none;cursor:pointer;min-height:var(--tap-min);touch-action:manipulation}
.btn-g:hover{transform:translateY(-2px);box-shadow:var(--spl)}
.btn-g:active{transform:translateY(0);box-shadow:var(--sp)}
.btn-o{background:transparent;color:var(--bd);padding:11px 22px;border-radius:50px;font-weight:700;border:2px solid var(--brd);transition:border-color 0.2s,color 0.2s;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap-min);touch-action:manipulation}
.btn-o:hover{border-color:var(--pink);color:var(--pink)}
.btn-gm{background:var(--g);color:#fff;padding:16px 32px;border-radius:12px;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--sp);transition:transform 0.2s,box-shadow 0.2s;border:none;cursor:pointer;min-height:var(--tap-min);touch-action:manipulation}
.btn-gm:hover{transform:translateY(-2px);box-shadow:var(--spl)}
.btn-gm:active{transform:translateY(0)}
.btn-ow{background:transparent;border:2px solid rgba(255,255,255,0.35);color:#fff;padding:14px 30px;border-radius:10px;font-weight:600;transition:background 0.2s,color 0.2s;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap-min);touch-action:manipulation}
.btn-ow:hover{background:#fff;color:var(--h)}
.btn-em{background:var(--e);color:#fff;padding:10px 18px;border-radius:50px;font-weight:700;font-size:0.88rem;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 15px rgba(220,53,69,0.3);transition:transform 0.2s,filter 0.2s;border:none;cursor:pointer;animation:pulse 2.5s infinite;min-height:var(--tap-min);touch-action:manipulation}
.btn-em:hover{transform:scale(1.04);filter:brightness(1.08)}
.btn-em:active{transform:scale(0.98)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,0.45)}60%{box-shadow:0 0 0 10px rgba(220,53,69,0)}}

/* =========================================
   MOBILE MENU
   ========================================= */
.hamburger{display:none;font-size:1.5rem;background:none;border:none;color:var(--h);cursor:pointer;padding:8px;min-width:var(--tap-min);min-height:var(--tap-min);display:none;align-items:center;justify-content:center;touch-action:manipulation}
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:var(--bg);padding:16px 20px 24px;border-bottom:1px solid var(--br);box-shadow:0 8px 30px rgba(0,0,0,0.1);z-index:999;max-height:calc(100vh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu a{display:flex;align-items:center;padding:14px 4px;font-weight:600;font-size:1.05rem;color:var(--bd);border-bottom:1px solid var(--br);min-height:var(--tap-min);touch-action:manipulation}
.mobile-menu a.active{color:var(--pink)}
.mobile-menu .btn-g,.mobile-menu .btn-em{width:100%;justify-content:center;margin-top:12px;font-size:1rem}
.mobile-menu.show{display:block}

/* =========================================
   HERO
   ========================================= */
.hero{width:100%;min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;padding:90px 20px 70px;background:var(--bc);position:relative;overflow:hidden}
.hero-w{width:100%;max-width:1280px;display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:50px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#dbeafe;color:var(--pink);padding:8px 18px;border-radius:50px;font-weight:700;font-size:0.82rem;margin-bottom:20px}
.hero-info h1{font-size:clamp(32px,4.5vw,58px);line-height:1.12;color:var(--h);margin-bottom:18px;font-weight:800}
.gt{background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-info p{font-size:clamp(16px,1.15vw,18px);color:var(--b);line-height:1.75;margin-bottom:28px;max-width:520px}
.hero-ctas{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap}
.metrics{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.metric strong{font-size:26px;color:var(--h);display:block;font-weight:800}
.metric span{font-size:13px;color:var(--b);font-weight:500}
.metric-d{width:1px;height:36px;background:var(--brd)}
.hero-img{border-radius:24px;position:relative;display:flex;justify-content:center}
.blob{position:absolute;width:110%;height:110%;background:radial-gradient(circle,rgba(26,111,212,0.1) 0%,rgba(10,191,163,0.05) 70%);border-radius:50%;filter:blur(40px);top:-5%;left:-5%;pointer-events:none}
.hero-img img{width:100%;max-width:520px;position:relative;z-index:1;border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,0.1)}

/* =========================================
   SECTIONS & LAYOUT
   ========================================= */
.c{width:100%;max-width:1280px;margin:0 auto;padding:0 20px}
.sp{padding:80px 0}
.sh{text-align:center;margin-bottom:50px}
.sb{color:var(--pink);font-weight:800;font-size:0.8rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;display:block}
.st{font-size:clamp(26px,3.5vw,40px);font-weight:800;color:var(--h);line-height:1.18;margin-bottom:14px}
.sd{color:var(--b);font-size:1rem;max-width:580px;margin:0 auto;line-height:1.75}

/* =========================================
   CARDS / BENTO
   ========================================= */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bc{background:var(--bg);border-radius:20px;padding:32px 28px;border:1px solid var(--br);transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;position:relative;overflow:hidden}
.bc:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.06);border-color:#bfdbfe}
.bc.s2{grid-column:span 2}
.bc.grad{background:var(--gd);color:#fff;border:none}
.bc.grad h3,.bc.grad p,.bc.grad .ci{color:#fff}
.ci{width:52px;height:52px;background:#dbeafe;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:1.3rem;margin-bottom:20px;transition:transform 0.25s}
.bc:hover .ci{transform:scale(1.08) rotate(-3deg)}
.bc h3{font-size:1.2rem;font-weight:700;color:var(--h);margin-bottom:10px}
.bc p{color:var(--b);line-height:1.7;font-size:0.95rem}

.cg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--bg);border-radius:20px;padding:36px 28px;border:1px solid var(--br);transition:transform 0.25s,box-shadow 0.25s}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.06)}
.card.feat{border:2px solid var(--pink);box-shadow:var(--sp);transform:scale(1.03)}
.ptag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--g);color:#fff;padding:5px 16px;border-radius:20px;font-size:0.7rem;font-weight:700}

/* =========================================
   WEBINAR / BLOG CARDS
   ========================================= */
.wg,.bg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.wc,.blc{background:var(--bg);border-radius:20px;border:1px solid var(--br);overflow:hidden;transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s}
.wc:hover,.blc:hover{transform:translateY(-8px);box-shadow:0 14px 36px rgba(26,111,212,0.08);border-color:#bfdbfe}
.cib{height:200px;position:relative;overflow:hidden;background:#f8fafc}
.cib img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 0.4s}
.wc:hover .cib img,.blc:hover .cib img{transform:scale(1.06)}
.ctag{position:absolute;bottom:12px;left:12px;background:var(--g);color:#fff;padding:4px 12px;border-radius:50px;font-size:0.7rem;font-weight:700}
.cc{padding:24px}
.cc h3{font-size:1.1rem;font-weight:700;color:var(--h);margin-bottom:10px;line-height:1.4}
.cc p{color:var(--b);font-size:0.9rem;line-height:1.65}

/* =========================================
   TESTIMONIALS
   ========================================= */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tc{background:#fff;border-radius:20px;padding:32px 26px;border:1px solid var(--brd);transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;display:flex;flex-direction:column}
.tc:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(26,111,212,0.07);border-color:#bfdbfe}
.qi{color:var(--pink);font-size:1.8rem;opacity:0.25;margin-bottom:10px;line-height:1}
.ft{font-size:0.95rem;color:var(--bd);line-height:1.75;font-style:italic;margin-bottom:24px;flex:1}
.ui{display:flex;align-items:center;gap:14px;border-top:1px solid var(--br);padding-top:18px;margin-top:auto}
.ui img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.stars{color:#f59e0b;font-size:0.78rem;display:flex;gap:2px;margin-bottom:14px}

/* =========================================
   PRICING
   ========================================= */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:center}
.pn{font-size:1.2rem;color:var(--h);margin-bottom:14px;font-weight:700}
.pp{margin-bottom:24px;color:var(--h)}
.cur{font-size:1.2rem;vertical-align:top;font-weight:600}
.amt{font-size:42px;font-weight:800}
.dur{color:var(--b);font-size:0.92rem}
.pf{list-style:none;padding:0;margin-bottom:28px}
.pf li{margin-bottom:11px;color:var(--bd);font-size:0.9rem;display:flex;align-items:center;gap:10px}
.pf li.dis{color:var(--brd);text-decoration:line-through}
.bpg{display:block;width:100%;text-align:center;background:var(--g);color:#fff;padding:14px;border-radius:12px;font-weight:700;transition:transform 0.2s,box-shadow 0.2s;border:none;cursor:pointer;min-height:var(--tap-min);touch-action:manipulation}
.bpg:hover{transform:translateY(-2px);box-shadow:var(--sp)}
.bpo{display:block;width:100%;text-align:center;border:2px solid var(--brd);color:var(--bd);padding:12px;border-radius:12px;font-weight:700;transition:border-color 0.2s,color 0.2s;min-height:var(--tap-min);touch-action:manipulation}
.bpo:hover{border-color:var(--pink);color:var(--pink)}

/* =========================================
   FAQ
   ========================================= */
.fq{background:var(--bg);border-radius:20px;padding:28px;margin-bottom:16px;border:1px solid var(--br);transition:box-shadow 0.25s}
.fq:hover{box-shadow:0 4px 16px rgba(0,0,0,0.05)}
.fq-num{color:rgba(26,111,212,0.15);font-weight:900;font-size:3rem;line-height:1}
.fq h3{font-size:1.3rem;font-weight:700;color:var(--h);margin-bottom:10px}
.fq p{color:var(--b);line-height:1.75;font-size:1rem}

/* =========================================
   FORMS — elder-friendly large inputs
   ========================================= */
.input{width:100%;padding:15px 18px;border:1.5px solid var(--brd);border-radius:12px;font-size:1rem;font-family:inherit;transition:border-color 0.2s,box-shadow 0.2s;background:#f8fafc;min-height:var(--tap-min)}
.input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(26,111,212,0.12);background:#fff}
.label{display:block;font-size:0.82rem;font-weight:700;color:var(--bd);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}

/* =========================================
   SOS FAB — large, accessible
   ========================================= */
.sos-fab{position:fixed;bottom:24px;right:24px;z-index:1000}
.sos-btn{background:var(--e);color:#fff;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(220,53,69,0.4);transition:transform 0.2s;animation:pulse 2.5s infinite;touch-action:manipulation}
.sos-btn:hover{transform:scale(1.08)}
.sos-btn:active{transform:scale(0.96)}
.sos-menu{display:none;flex-direction:column;gap:8px;margin-bottom:12px;align-items:flex-end}
.sos-menu.show{display:flex}
.sos-menu a,.sos-menu button{background:var(--bg);color:var(--h);padding:12px 20px;border-radius:50px;font-weight:700;font-size:0.88rem;box-shadow:0 4px 14px rgba(0,0,0,0.1);border:none;cursor:pointer;white-space:nowrap;transition:background 0.2s,color 0.2s;min-height:var(--tap-min);display:flex;align-items:center;gap:8px;touch-action:manipulation}
.sos-menu a:hover,.sos-menu button:hover{background:var(--pink);color:#fff}
.sos-menu a.em{background:var(--e);color:#fff}
.sos-menu a.em:hover{background:#b91c1c}
.guard-list{display:none;flex-direction:column;gap:4px;align-items:stretch;background:linear-gradient(135deg,#1a3a5c,#0d2d4a);border-radius:16px;padding:12px;min-width:220px;box-shadow:0 8px 30px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1)}
.guard-list.show{display:flex}

/* =========================================
   FOOTER
   ========================================= */
.footer{background:var(--bl);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px}
.footer-logo{font-size:1.4rem;font-weight:800;color:var(--h);margin-bottom:14px}
.footer-logo span{background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer p{color:var(--b);font-size:0.92rem;line-height:1.75;margin-bottom:8px}
.footer h4{font-size:0.85rem;font-weight:700;color:var(--h);margin-bottom:18px;text-transform:uppercase;letter-spacing:1px}
.footer a{display:block;color:var(--b);font-size:0.92rem;margin-bottom:12px;transition:color 0.2s;padding:2px 0;min-height:36px;display:flex;align-items:center}
.footer a:hover{color:var(--pink)}
.footer-bottom{border-top:1px solid var(--br);margin-top:36px;padding-top:22px;text-align:center;color:var(--b);font-size:0.85rem;display:flex;flex-direction:column;gap:10px;align-items:center}
.footer-bottom-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.footer-bottom-links a{color:var(--b);font-size:0.85rem;font-weight:600;transition:color 0.2s}
.footer-bottom-links a:hover{color:var(--pink)}
.footer-bottom-links span{color:var(--brd)}

/* =========================================
   FOUNDER PROFILES
   ========================================= */
.founder{display:flex;align-items:center;gap:50px;margin-bottom:70px}
.founder.reverse{flex-direction:row-reverse}
.founder-img{flex:1;position:relative}
.founder-img img{width:100%;border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,0.1)}
.founder-info{flex:1}
.founder-info h3{font-size:1.8rem;font-weight:700;color:var(--h);margin-bottom:6px}
.founder-info .role{color:var(--pink);font-weight:600;margin-bottom:18px}
.founder-info .quote{font-size:1.1rem;color:var(--bd);font-style:italic;line-height:1.65;margin-bottom:18px;padding-left:18px;border-left:3px solid var(--pink)}
.founder-info p{color:var(--b);line-height:1.75}

/* =========================================
   STEPS
   ========================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--bg);border-radius:18px;padding:28px 20px;border:1px solid var(--br);text-align:center;transition:transform 0.25s,box-shadow 0.25s}
.step:hover{transform:translateY(-5px);box-shadow:0 10px 24px rgba(0,0,0,0.06)}
.step-num{font-size:2.2rem;font-weight:800;color:var(--pink);margin-bottom:14px;opacity:0.3}
.step h4{font-size:1.05rem;font-weight:700;color:var(--h);margin-bottom:8px}
.step p{color:var(--b);font-size:0.9rem;line-height:1.65}

/* =========================================
   RESPONSIVE — TABLET (≤992px)
   ========================================= */
@media(max-width:992px){
.main-menu{display:none}
.hamburger{display:flex}
.hero-w{grid-template-columns:1fr;text-align:center;gap:32px}
.hero-info p{margin:0 auto 28px}
.hero-ctas{justify-content:center}
.metrics{justify-content:center}
.hero-img{order:-1;margin-bottom:20px}
.bento{grid-template-columns:1fr 1fr}
.bc.s2{grid-column:span 2}
.cg,.wg,.bg,.tg,.pg,.steps{grid-template-columns:1fr 1fr}
.card.feat{transform:scale(1)}
.founder,.founder.reverse{flex-direction:column;gap:28px}
.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:20px}
.sp{padding:64px 0}
}

/* =========================================
   RESPONSIVE — MOBILE (≤640px)
   ========================================= */
@media(max-width:640px){
.hero{padding:80px 16px 56px}
.hero-info h1{font-size:clamp(28px,8vw,40px)}
.hero-ctas{flex-direction:column;width:100%;gap:12px}
.btn-gm,.btn-ow{width:100%;justify-content:center;font-size:1rem}
.metrics{gap:16px}
.metric strong{font-size:22px}
.bento{grid-template-columns:1fr}
.bc.s2{grid-column:span 1}
.cg,.wg,.bg,.tg,.pg,.steps{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
.card.feat{transform:scale(1)}
.footer-grid{grid-template-columns:1fr}
.sp{padding:48px 0}
.sh{margin-bottom:36px}
.c{padding:0 16px}
/* Larger touch targets on mobile */
.btn-g,.btn-gm,.btn-ow,.btn-em{min-height:52px;font-size:1rem}
.input{font-size:16px;min-height:52px} /* 16px prevents iOS zoom */
/* Readable typography on small screens */
body{font-size:16px}
.fq h3{font-size:1.15rem}
.bc h3{font-size:1.1rem}
.step h4{font-size:1rem}
}

/* =========================================
   RESPONSIVE — SMALL MOBILE (≤400px)
   ========================================= */
@media(max-width:400px){
.brand-tagline{display:none}
.auth-btns .link-login{display:none}
.btn-em{padding:10px 14px;font-size:0.82rem}
}

/* =========================================
   HERO SLIDER
   ========================================= */
.hero-slider{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:center}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;z-index:1}
.hero-slide.active{opacity:1;z-index:2}
.hero-slide .slide-img{width:100%;height:100%;object-fit:cover;object-position:center top;animation:kenburns 12s ease-in-out infinite alternate;image-rendering:auto;-webkit-transform:translateZ(0);transform:translateZ(0)}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.03)}}
.hero-slider-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,28,0.78) 0%,rgba(15,15,28,0.42) 55%,rgba(15,15,28,0.18) 100%);z-index:3}
.hero-slider-content{position:relative;z-index:4;width:100%;max-width:1280px;margin:0 auto;padding:130px 20px 90px}
.hero-glass{background:rgba(255,255,255,0.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.12);border-radius:22px;padding:44px;max-width:660px}
.hero-slider-content .badge{background:rgba(255,255,255,0.15);color:#fff;backdrop-filter:blur(8px)}
.hero-slider-content h1{color:#fff}
.hero-slider-content p{color:rgba(255,255,255,0.85);max-width:500px}
.hero-slider-content .metric strong{color:#fff}
.hero-slider-content .metric span{color:rgba(255,255,255,0.7)}
.hero-slider-content .metric-d{background:rgba(255,255,255,0.2)}
.slider-dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.35s;border:none;min-width:10px;min-height:10px;touch-action:manipulation}
.slider-dot.active{background:#fff;width:30px;border-radius:5px}
/* Pause animation when user prefers reduced motion */
@media(prefers-reduced-motion:reduce){
  .hero-slide .slide-img{animation:none}
}
@media(max-width:992px){
.hero-slider{min-height:75vh}
.hero-slider-overlay{background:linear-gradient(180deg,rgba(15,15,28,0.72) 0%,rgba(15,15,28,0.48) 100%)}
.hero-glass{padding:28px 24px;margin:0 auto}
.hero-slider-content{padding:110px 16px 72px;text-align:center}
.hero-slider-content p{margin:0 auto 28px}
.hero-slider-content .hero-ctas{justify-content:center}
.hero-slider-content .metrics{justify-content:center}
}
@media(max-width:640px){
.hero-slider{min-height:85vh}
.hero-glass{padding:24px 18px}
.hero-slider-content{padding:90px 14px 64px}
}


/* =========================================
   HOW IT WORKS MODAL SLIDER
   ========================================= */
.hiw-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s}
.hiw-overlay.show{opacity:1;pointer-events:all}
.hiw-modal{position:relative;width:100%;max-width:900px;height:90vh;max-height:600px;border-radius:28px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.5)}
.hiw-close{position:absolute;top:18px;right:18px;z-index:10;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer;transition:all 0.3s}
.hiw-close:hover{background:rgba(255,255,255,0.3)}

/* Track */
.hiw-track{display:flex;width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.77,0,0.18,1)}
.hiw-slide{min-width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hiw-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hiw-bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,10,40,0.82),rgba(20,10,40,0.5))}

/* Content */
.hiw-content{position:relative;z-index:2;padding:40px 48px;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hiw-content h2{font-size:clamp(22px,3vw,36px);font-weight:800;color:#fff;line-height:1.2;max-width:480px}
.hiw-content p{color:rgba(255,255,255,0.8);font-size:1rem;max-width:420px}

/* Tags */
.hiw-tags{display:flex;gap:10px;flex-wrap:wrap}
.hiw-tags span{background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);color:#fff;padding:6px 14px;border-radius:50px;font-size:0.78rem;font-weight:600;display:flex;align-items:center;gap:6px}
.hiw-tags span i{color:#4ade80}

/* Phone mockup */
.hiw-phone{background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:20px;width:fit-content}
.hiw-phone-screen{display:flex;flex-direction:column;align-items:center;gap:10px}
.hiw-sos-btn{width:90px;height:90px;background:radial-gradient(circle,#ff4444,#cc0000);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;color:#fff;box-shadow:0 0 30px rgba(255,68,68,0.6);animation:sosPulse 1.5s infinite}
@keyframes sosPulse{0%,100%{box-shadow:0 0 30px rgba(255,68,68,0.6)}50%{box-shadow:0 0 50px rgba(255,68,68,0.9)}}
.hiw-phone-label{text-align:center;color:#fff;font-size:0.85rem;font-weight:600}
.hiw-phone-label small{color:rgba(255,255,255,0.6);font-size:0.75rem}

/* Alert card */
.hiw-alert-card{background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:14px 18px;display:flex;align-items:flex-start;gap:14px;max-width:320px}
.hiw-alert-icon{width:40px;height:40px;background:#ef4444;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.hiw-alert-card strong{display:block;color:#fff;font-size:0.9rem}
.hiw-alert-card span{display:block;color:rgba(255,255,255,0.75);font-size:0.8rem}

/* Map */
.hiw-map{background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;overflow:hidden;max-width:300px}
.hiw-map-inner{height:100px;background:linear-gradient(135deg,#1e3a5f,#2d6a4f);position:relative;display:flex;align-items:center;justify-content:center}
.hiw-map-pin{color:#ef4444;font-size:1.8rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}
.hiw-live-badge{position:absolute;top:8px;right:8px;background:#22c55e;color:#fff;font-size:0.65rem;font-weight:700;padding:3px 8px;border-radius:20px}
.hiw-map-footer{padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.hiw-map-footer span{color:rgba(255,255,255,0.8);font-size:0.78rem}
.hiw-map-footer button{background:#3b82f6;color:#fff;border:none;padding:6px 14px;border-radius:8px;font-size:0.78rem;font-weight:700;cursor:pointer}

/* Feature icons */
.hiw-feature-icons{display:flex;gap:16px;flex-wrap:wrap}
.hiw-feat{background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:90px}
.hiw-feat i{color:#4ade80;font-size:1.2rem}
.hiw-feat span{color:#fff;font-size:0.72rem;font-weight:600;text-align:center}

/* Video call */
.hiw-video-call{max-width:200px}
.hiw-video-inner{border-radius:16px;overflow:hidden;position:relative}
.hiw-video-inner img{width:100%;height:130px;object-fit:cover;object-position:center top}
.hiw-call-controls{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:10px}
.hiw-call-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem}
.hiw-call-btn.red{background:#ef4444}

/* Feature list */
.hiw-feature-list{display:flex;flex-direction:column;gap:10px;max-width:320px}
.hiw-fitem{background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:12px 18px;color:#fff;font-weight:600;font-size:0.9rem;display:flex;align-items:center;gap:12px}
.hiw-fitem i{color:#4ade80;font-size:1rem;width:18px}

/* Bottom card */
.hiw-bottom-card{background:rgba(255,255,255,0.12);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:14px;max-width:340px;margin-top:auto}
.hiw-card-icon{width:44px;height:44px;background:var(--e);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0}
.hiw-bottom-card strong{display:block;color:#fff;font-size:0.9rem;font-weight:700}
.hiw-bottom-card span{color:rgba(255,255,255,0.7);font-size:0.8rem}

/* Dots */
.hiw-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.hiw-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.35);border:none;cursor:pointer;transition:all 0.3s}
.hiw-dot.active{background:#fff;width:28px;border-radius:4px}

/* Arrows */
.hiw-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:1rem;cursor:pointer;transition:all 0.3s}
.hiw-arrow:hover{background:rgba(255,255,255,0.3)}
.hiw-prev{left:16px}
.hiw-next{right:16px}

@media(max-width:600px){
.hiw-modal{height:95vh;max-height:none;border-radius:18px}
.hiw-content{padding:20px 16px}
.hiw-content h2{font-size:1.3rem}
.hiw-arrow{display:none}
.hiw-phone{display:none}
.hiw-video-call{display:none}
}

/* =========================================
   APP SECTION - PHONE MOCKUP
   ========================================= */
.app-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:center}

/* Phone */
.app-phone-wrap{display:flex;justify-content:center;align-items:center}
.app-phone{width:280px;background:#0f0f0f;border-radius:44px;padding:12px;box-shadow:0 40px 80px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.08);position:relative}
.app-phone-notch{width:90px;height:22px;background:#0f0f0f;border-radius:0 0 16px 16px;margin:0 auto 8px;position:relative;z-index:2}
.app-phone-screen{background:#f0f7ff;border-radius:34px;overflow:hidden;min-height:520px;display:flex;flex-direction:column;gap:0}

/* App screen header */
.app-screen-header{background:var(--gd);padding:22px 20px 18px;text-align:center}
.app-screen-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.app-screen-logo-icon{width:28px;height:28px;background:rgba(255,255,255,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center}
.app-screen-logo span{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-0.3px}
.app-screen-header p{color:rgba(255,255,255,0.85);font-size:0.72rem;line-height:1.4;margin:0}

/* Login cards inside phone */
.app-login-card{background:#fff;margin:10px 12px;border-radius:18px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,0.06);border:1px solid #dbeafe}
.app-login-title{font-size:0.9rem;font-weight:700;margin-bottom:6px}
.app-login-title.elder{color:var(--pink)}
.app-login-title.volunteer{color:#6d28d9}
.app-login-desc{font-size:0.72rem;color:#64748b;line-height:1.5;margin-bottom:12px}
.app-login-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:10px;font-weight:700;font-size:0.82rem;transition:all 0.3s;text-decoration:none}
.elder-btn{background:var(--g);color:#fff;box-shadow:0 4px 14px rgba(227,19,109,0.3)}
.elder-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(227,19,109,0.4)}
.volunteer-btn{background:linear-gradient(135deg,#1A6FD4,#0ABFA3);color:#fff;box-shadow:0 4px 14px rgba(26,111,212,0.3)}
.volunteer-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,111,212,0.4)}

/* Right info */
.app-info{display:flex;flex-direction:column;gap:0}
.app-info .st{text-align:left;margin-bottom:16px}

/* Features grid */
.app-features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
.app-feat-item{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--brd);border-radius:16px;padding:16px;transition:all 0.3s}
.app-feat-item:hover{border-color:#bfdbfe;box-shadow:0 4px 16px rgba(26,111,212,0.08);transform:translateY(-3px)}
.app-feat-item i{font-size:1.2rem;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:2px;flex-shrink:0}
.app-feat-item strong{display:block;font-size:0.88rem;font-weight:700;color:var(--h);margin-bottom:4px}
.app-feat-item span{font-size:0.78rem;color:var(--b);line-height:1.5}

/* App store buttons */
.app-store-btns{display:flex;gap:14px;flex-wrap:wrap}
.app-store-btn{display:flex;align-items:center;gap:12px;background:var(--h);color:#fff;padding:12px 22px;border-radius:14px;text-decoration:none;transition:all 0.3s;border:2px solid transparent}
.app-store-btn:hover{background:#fff;color:var(--h);border-color:var(--h)}
.app-store-btn i{font-size:1.6rem}
.app-store-btn small{display:block;font-size:0.65rem;opacity:0.75;font-weight:400}
.app-store-btn strong{display:block;font-size:0.9rem;font-weight:700}

@media(max-width:992px){
.app-layout{grid-template-columns:1fr;gap:36px}
.app-phone-wrap{order:-1}
.app-features-grid{grid-template-columns:1fr 1fr}
.app-info .st{text-align:center}
.app-info .sb{text-align:center;display:block}
.app-info>p{text-align:center}
.app-store-btns{justify-content:center}
}
@media(max-width:480px){
.app-features-grid{grid-template-columns:1fr}
.app-phone{width:240px}
.app-store-btns{flex-direction:column;align-items:stretch}
.app-store-btn{justify-content:center}
}

/* =========================================
   TESTIMONIALS (override)
   ========================================= */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tc{background:#fff;border-radius:20px;padding:32px 26px;border:1px solid var(--brd);transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;display:flex;flex-direction:column;gap:0}
.tc:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(26,111,212,0.07);border-color:#bfdbfe}
.stars{display:flex;gap:3px;color:#f59e0b;font-size:0.82rem;margin-bottom:14px}
.qi{color:var(--pink);font-size:1.8rem;opacity:0.25;margin-bottom:10px;line-height:1}
.ft{font-size:0.95rem;color:var(--bd);line-height:1.75;font-style:italic;margin-bottom:22px;flex:1}
.ui{display:flex;align-items:center;gap:14px;border-top:1px solid var(--brd);padding-top:18px;margin-top:auto}
.ui img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0}

/* =========================================
   PRICING (override)
   ========================================= */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
.card.feat{border:2px solid var(--pink);box-shadow:var(--sp);transform:scale(1.04)}
.ptag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--g);color:#fff;padding:5px 18px;border-radius:20px;font-size:0.72rem;font-weight:700;white-space:nowrap}
.pn{font-size:1.2rem;font-weight:800;color:var(--h);margin-bottom:12px}
.pp{margin-bottom:22px;color:var(--h);line-height:1}
.cur{font-size:1.1rem;vertical-align:top;font-weight:700;margin-top:6px;display:inline-block}
.amt{font-size:44px;font-weight:800;line-height:1}
.dur{color:var(--b);font-size:0.88rem}
.pf{list-style:none;padding:0;margin-bottom:26px;text-align:left}
.pf li{margin-bottom:11px;color:var(--bd);font-size:0.88rem;display:flex;align-items:center;gap:10px}
.pf li.dis{color:#cbd5e1}
.bpg{display:block;width:100%;text-align:center;background:var(--g);color:#fff;padding:14px;border-radius:12px;font-weight:700;font-size:0.95rem;transition:transform 0.2s,box-shadow 0.2s;border:none;cursor:pointer;text-decoration:none;min-height:var(--tap-min)}
.bpg:hover{transform:translateY(-2px);box-shadow:var(--sp)}
.bpo{display:block;width:100%;text-align:center;border:2px solid var(--brd);color:var(--bd);padding:12px;border-radius:12px;font-weight:700;font-size:0.95rem;transition:border-color 0.2s,color 0.2s;text-decoration:none;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center}
.bpo:hover{border-color:var(--pink);color:var(--pink)}rid-template-columns:repeat(3,1fr);gap:28px;align-items:center}
.card.feat{border:2px solid var(--pink);box-shadow:var(--sp);transform:scale(1.04)}
.ptag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--g);color:#fff;padding:5px 18px;border-radius:20px;font-size:0.72rem;font-weight:700;white-space:nowrap}
.pn{font-size:1.2rem;font-weight:800;color:var(--h);margin-bottom:12px}
.pp{margin-bottom:24px;color:var(--h);line-height:1}
.cur{font-size:1.1rem;vertical-align:top;font-weight:700;margin-top:6px;display:inline-block}
.amt{font-size:48px;font-weight:800;line-height:1}
.dur{color:var(--b);font-size:0.88rem}
.pf{list-style:none;padding:0;margin-bottom:28px;text-align:left}
.pf li{margin-bottom:11px;color:var(--bd);font-size:0.88rem;display:flex;align-items:center;gap:10px}
.pf li.dis{color:#cbd5e1}
.bpg{display:block;width:100%;text-align:center;background:var(--g);color:#fff;padding:14px;border-radius:12px;font-weight:700;font-size:0.95rem;transition:all 0.3s;border:none;cursor:pointer;text-decoration:none}
.bpg:hover{transform:translateY(-2px);box-shadow:var(--sp)}
.bpo{display:block;width:100%;text-align:center;border:2px solid var(--brd);color:var(--bd);padding:12px;border-radius:12px;font-weight:700;font-size:0.95rem;transition:all 0.3s;text-decoration:none}
.bpo:hover{border-color:var(--pink);color:var(--pink)}

/* =========================================
   WHATSAPP CHAT BUTTON
   ========================================= */
.wa-chat{position:fixed;bottom:104px;right:24px;z-index:999;background:#25d366;color:#fff;border-radius:50px;display:flex;align-items:center;gap:10px;padding:13px 18px;box-shadow:0 6px 22px rgba(37,211,102,0.4);text-decoration:none;font-weight:700;font-size:0.9rem;transition:transform 0.2s,box-shadow 0.2s;animation:waPulse 3s infinite}
.wa-chat:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,0.5)}
.wa-chat i{font-size:1.4rem}
.wa-label{white-space:nowrap}
@keyframes waPulse{0%,100%{box-shadow:0 6px 22px rgba(37,211,102,0.4)}55%{box-shadow:0 6px 32px rgba(37,211,102,0.65)}}

@media(max-width:992px){
.tg{grid-template-columns:1fr 1fr}
.pg{grid-template-columns:1fr;max-width:400px;margin:0 auto}
.card.feat{transform:scale(1)}
.wa-label{display:none}
.wa-chat{padding:13px;border-radius:50%}
}
@media(max-width:640px){
.tg{grid-template-columns:1fr;max-width:480px;margin:0 auto}
}

/* =========================================
   GUARDIANS PAGE FIXES
   ========================================= */
@media(max-width:768px){
  .guardians-two-col{grid-template-columns:1fr !important;}
  .stats-bar-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:480px){
  .stats-bar-grid{grid-template-columns:repeat(2,1fr) !important;}
}

/* =========================================
   FOCUS STYLES — keyboard accessibility
   ========================================= */
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* =========================================
   SKIP TO CONTENT — screen reader / keyboard
   ========================================= */
.skip-link{position:absolute;top:-100px;left:16px;background:var(--pink);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;z-index:9999;transition:top 0.2s}
.skip-link:focus{top:16px}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print{
  .navbar,.mobile-menu,.sos-fab,.wa-chat,.hiw-overlay,.btn-em{display:none !important}
  body{font-size:12pt;color:#000}
  a{color:#000;text-decoration:underline}
}

/* =========================================
   INLINE GRID RESPONSIVE FIXES
   ========================================= */
/* Vision/Mission grid on dailysupport.html */
@media(max-width:768px){
  .vision-mission-grid{grid-template-columns:1fr !important;}
}
/* FAQ + Sidebar on safetyhub.html */
@media(max-width:900px){
  .faq-sidebar-grid{grid-template-columns:1fr !important;}
  .faq-sidebar-grid > div:last-child{position:static !important;}
}
/* Legal pages */
.legal-hero{padding:110px 20px 56px}
.legal-body{padding:48px 20px 64px}
@media(max-width:640px){
  .legal-hero{padding:90px 16px 44px}
  .legal-body{padding:36px 16px 52px}
  .legal-toc{padding:18px 20px}
  .acc-card{flex-direction:column;gap:14px}
}
/* Auth page responsive */
@media(max-width:480px){
  .role-card{padding:16px 14px;gap:12px}
  .role-card-icon{width:44px;height:44px;font-size:1.2rem}
  .tab-switch button{padding:10px 8px;font-size:0.85rem}
}
/* Navbar height fix for all pages */
.navbar{height:70px}
.mobile-menu{top:70px}

/* =========================================
   MOBILE-FIRST IMPROVEMENTS
   ========================================= */

/* Prevent horizontal overflow on all pages */
html,body{max-width:100%;overflow-x:hidden}

/* Fluid images & media */
img,video,iframe,embed,object{max-width:100%;height:auto}

/* ── Navbar mobile: hide Login, keep Sign Up + Emergency ── */
@media(max-width:992px){
  .auth-btns .link-login{display:none}
  .auth-btns .btn-g{display:none}
  .auth-btns{gap:8px}
  .btn-em{font-size:0.82rem;padding:9px 14px;white-space:nowrap}
}
@media(max-width:400px){
  .btn-em .fa-phone{display:none}
  .btn-em::after{content:'SOS'}
}
/* ── Hide tagline on very small screens ── */
@media(max-width:360px){
  .brand-tagline{display:none}
  .brand-logo-name{font-size:1.2rem}
}

/* ── Mobile menu: better spacing & readable font ── */
@media(max-width:640px){
  .mobile-menu a{font-size:1rem;padding:13px 4px}
  .mobile-menu .btn-g,.mobile-menu .btn-em{padding:14px;font-size:1rem}
}

/* ── Contact page grid ── */
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr !important}
  .contact-form-card{padding:24px 18px !important}
  .form-row{grid-template-columns:1fr !important}
}

/* ── Dashboard / Auth card ── */
@media(max-width:540px){
  .auth-card{padding:28px 18px !important;border-radius:20px}
  .auth-page{padding:80px 12px 40px !important}
}

/* ── Profile page ── */
@media(max-width:640px){
  .profile-grid{grid-template-columns:1fr !important}
  .profile-card{padding:20px 16px !important}
}

/* ── Guardians stats bar: 2 cols on mobile ── */
@media(max-width:640px){
  .stats-bar-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px !important}
}

/* ── Section padding tighter on small screens ── */
@media(max-width:480px){
  .sp{padding:40px 0}
  .sh{margin-bottom:28px}
  .c{padding:0 14px}
}

/* ── Cards: remove hover transforms on touch devices (performance) ── */
@media(hover:none){
  .bc:hover,.card:hover,.tc:hover,.wc:hover,.blc:hover,.step:hover,.app-feat-item:hover{
    transform:none;box-shadow:none
  }
}

/* ── Footer: stack on mobile ── */
@media(max-width:480px){
  .footer{padding:40px 0 20px}
  .footer-grid{gap:20px}
  .footer h4{margin-bottom:12px}
  .footer a{margin-bottom:8px;min-height:40px}
  .footer-bottom{margin-top:24px;padding-top:16px}
}

/* ── SOS FAB: move up slightly on mobile so it clears bottom nav bars ── */
@media(max-width:640px){
  .sos-fab{bottom:20px;right:16px}
  .sos-btn{width:60px;height:60px;font-size:1.2rem}
  .wa-chat{bottom:92px;right:16px}
}

/* ── Typography scale for small screens ── */
@media(max-width:480px){
  .st{font-size:clamp(22px,6vw,32px)}
  .sd{font-size:0.95rem}
  .fq h3{font-size:1.05rem}
  .fq p{font-size:0.93rem}
  .cc h3{font-size:1rem}
  .bc h3{font-size:1.05rem}
  .bc p{font-size:0.9rem}
}

/* ── Bento grid: always single col on small mobile ── */
@media(max-width:480px){
  .bento{grid-template-columns:1fr !important}
  .bc.s2{grid-column:span 1 !important}
  .bc{padding:24px 18px}
}

/* ── Pricing cards: full width on mobile ── */
@media(max-width:640px){
  .pg{grid-template-columns:1fr !important;max-width:380px;margin:0 auto}
  .card.feat{transform:none}
}

/* ── Testimonials: single col on mobile ── */
@media(max-width:480px){
  .tg{grid-template-columns:1fr !important;max-width:400px;margin:0 auto}
  .tc{padding:24px 18px}
}

/* ── Steps: 2 cols on tablet, 1 on mobile ── */
@media(max-width:640px){
  .steps{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:380px){
  .steps{grid-template-columns:1fr !important}
}

/* ── Smooth scroll & tap highlight ── */
*{-webkit-tap-highlight-color:rgba(26,111,212,0.12)}
a,button{touch-action:manipulation}


/* ── What We Believe grid ── */
.wwb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:900px){.wwb-grid{grid-template-columns:1fr 1fr !important;}}
@media(max-width:600px){.wwb-grid{grid-template-columns:1fr !important;}}

/* ── Reviews grid ── */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr 1fr !important;}}
@media(max-width:600px){.reviews-grid{grid-template-columns:1fr !important;}}

/* ── Doctor card single centered ── */
.tc-doctors[style*="max-width:420px"]{margin-left:auto;margin-right:auto;}

/* ── Footer address column ── */
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:20px !important;}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr !important;}
}

/* ── Social buttons in hero ── */
@media(max-width:480px){
  .hero-info div[style*="display:flex;gap:12px"]{flex-direction:column;align-items:flex-start;}
}

/* ── Vision mission grid ── */
@media(max-width:768px){
  .vision-mission-grid{grid-template-columns:1fr !important;}
}

/* ── Guardians two col ── */
@media(max-width:768px){
  .guardians-two-col{grid-template-columns:1fr !important;}
}

/* ═══════════════════════════════════════════
   PRODUCTION OPTIMIZATIONS
   ═══════════════════════════════════════════ */

/* Image sharpness & quality */
/* Photos use auto rendering for best quality */
img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Icons/logos use crisp rendering */
img[src$=".svg"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Prevent layout shift on images */
img[width][height] { aspect-ratio: attr(width) / attr(height); }
/* slide-img handled by hero-slide .slide-img rule above */
.founder-img img { width:100%; height:100%; object-fit:cover; object-position:top center; }

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #1A6FD4;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1A6FD4;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Trust badge */
.trust-bar {
  background: #f0f9ff;
  border-bottom: 1px solid #dbeafe;
  padding: 8px 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1A6FD4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-bar span { display:inline-flex; align-items:center; gap:6px; }
.trust-bar i { color: #0ABFA3; }

/* Disclaimer banner */
.disclaimer-banner {
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
  font-size: 0.88rem;
  color: #92400e;
  line-height: 1.6;
}
.disclaimer-banner i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }

/* Form improvements */
.input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--brd);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #f8fafc;
  color: var(--h);
}
.input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(26,111,212,0.1);
  background: #fff;
}
.input.error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
.input.success { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.1); }

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.fa-spin { animation: spin 1s linear infinite; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Print styles */
@media print {
  .navbar, .wa-chat, .sos-btn, footer { display: none !important; }
  body { font-size: 12pt; color: #000; }
}

/* High DPI / Retina display improvements */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slide-img, .founder-img img { image-rendering: auto; }
}

/* Mobile touch improvements */
@media (max-width: 768px) {
  .trust-bar { gap: 12px; font-size: 0.75rem; padding: 6px 12px; }
  .trust-bar span:nth-child(n+4) { display: none; }
}


/* ═══════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS FIX
   ═══════════════════════════════════════════ */

/* Global overflow prevention */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}
.c {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Feedback & Contact Grid ── */
.feedback-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.feedback-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── Input fields always full width ── */
.input, input[type="text"], input[type="email"],
input[type="tel"], input[type="password"],
select, textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Floating buttons stack ── */
.sos-fab  { bottom: 20px; right: 20px; }
.wa-chat  { bottom: 100px; right: 20px; }
#mvx-chat-btn { bottom: 176px; right: 20px; }
#mvx-chat-window { bottom: 248px; right: 20px; }

/* ── TABLET (max 900px) ── */
@media(max-width:900px) {
  .feedback-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .feedback-form-row { grid-template-columns: 1fr !important; }
}

/* ── MOBILE (max 768px) ── */
@media(max-width:768px) {
  /* Prevent overflow */
  section, .c, .sp, .hero, .hero-w { max-width: 100vw !important; overflow-x: hidden !important; }

  /* Feedback grids */
  .feedback-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .feedback-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Contact grid */
  .contact-grid { grid-template-columns: 1fr !important; }

  /* Vision mission */
  .vision-mission-grid { grid-template-columns: 1fr !important; }

  /* Bento cards */
  .bento { grid-template-columns: 1fr !important; }

  /* WWB grid */
  .wwb-grid { grid-template-columns: 1fr !important; }

  /* Reviews grid */
  .reviews-grid { grid-template-columns: 1fr !important; }

  /* Footer grid */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

  /* Floating buttons */
  .sos-fab  { bottom: 16px !important; right: 16px !important; }
  .wa-chat  { bottom: 88px !important; right: 16px !important; }
  #mvx-chat-btn { bottom: 160px !important; right: 16px !important; }
  #mvx-chat-window { bottom: 232px !important; right: 8px !important; width: calc(100vw - 16px) !important; max-height: 62vh !important; }

  /* Add bottom padding so content not hidden behind floating buttons */
  footer.footer { padding-bottom: 220px !important; }

  /* Form cards */
  .contact-form-card { padding: 24px 16px !important; }

  /* Feedback form card */
  div[style*="border-radius:24px"][style*="padding:36px"] {
    padding: 24px 16px !important;
  }

  /* Buttons */
  .submit-btn { margin-bottom: 80px; }

  /* Spacing */
  .sp { padding: 48px 0 !important; }
  .sh { margin-bottom: 28px !important; }
}

/* ── SMALL MOBILE (max 480px) ── */
@media(max-width:480px) {
  .c { padding: 0 14px !important; }

  /* Footer single column */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* Floating buttons */
  .sos-fab  { bottom: 12px !important; right: 12px !important; }
  .wa-chat  { bottom: 84px !important; right: 12px !important; }
  #mvx-chat-btn { bottom: 156px !important; right: 12px !important; }
  #mvx-chat-window { bottom: 228px !important; right: 6px !important; width: calc(100vw - 12px) !important; }

  /* Typography */
  .st { font-size: clamp(22px, 6vw, 32px) !important; }
  h1 { font-size: clamp(26px, 7vw, 40px) !important; }

  /* Cards padding */
  .bc, .tc { padding: 20px 16px !important; }

  /* Testimonials single column */
  .tg { grid-template-columns: 1fr !important; max-width: 100% !important; }
}