/* DriveIQ light site system: shared by concepts 1 and 3 */
:root{--bg:#F5F8FC;--bg2:#EAF1FA;--ink:#0E2A3A;--mute:#5B7388;--blue:#2D7DF6;--blue2:#4CA9FF;--deep:#1F62C9;--soft:#E5F0FF;--line:#E2EAF0;--orange:#FF7E47}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* store buttons */
.stores{display:flex;gap:12px;flex-wrap:wrap}
.sbtn{--mx:0px;--my:0px;position:relative;display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 24px 0 18px;border-radius:18px;background:linear-gradient(180deg,#14374b,#0E2A3A);color:#fff;overflow:hidden;isolation:isolate;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 26px -8px rgba(14,42,58,.55);transform:translate(var(--mx),var(--my));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;-webkit-tap-highlight-color:transparent;user-select:none}
.sbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px 80px at var(--gx,50%) var(--gy,50%),rgba(76,169,255,.55),transparent 70%);opacity:0;transition:opacity .35s}
.sbtn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg)}
.sbtn:hover{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 18px 40px -10px rgba(45,125,246,.65)}
.sbtn:hover::before{opacity:1}
.sbtn:hover::after{animation:sheen 1s cubic-bezier(.2,.8,.2,1)}
.sbtn:active{transform:translate(var(--mx),var(--my)) scale(.96)}
@keyframes sheen{to{left:130%}}
.sbtn svg{width:30px;height:30px;flex:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.sbtn:hover svg{transform:translateY(-2px) rotate(-6deg) scale(1.08)}
.sbtn small{display:block;font-size:11.5px;line-height:1.1;opacity:.75;letter-spacing:.01em;font-weight:500}
.sbtn b{display:block;font-size:21px;line-height:1.1;font-weight:700;letter-spacing:-.3px}
.sbtn.blue{background:linear-gradient(180deg,#4a92ff,#2D7DF6 55%,#1F62C9)}
.sbtn.sm{height:44px;padding:0 15px 0 12px;border-radius:13px;gap:8px}.sbtn.sm svg{width:20px;height:20px}.sbtn.sm b{font-size:14.5px}.sbtn.sm small{display:none}
.sbtn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
/* flying notification */
.flyer{position:absolute;z-index:120;left:0;top:0;width:360px;padding:13px 15px;border-radius:24px;display:flex;gap:12px;background:rgba(255,255,255,.86);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);box-shadow:0 30px 70px -10px rgba(14,42,58,.35),inset 0 0 0 1px rgba(255,255,255,.9);font-family:-apple-system,'SF Pro Text','Inter',system-ui,sans-serif;color:#111;pointer-events:none;will-change:transform,opacity;transform-origin:50% 0}
.flyer .nt-ic{width:40px;height:40px}
.ph-tag{display:inline-block;font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:#fff;background:var(--orange);padding:5px 9px;border-radius:7px}
@media(max-width:760px){.sbtn{height:56px;padding:0 18px 0 14px;border-radius:16px}.sbtn b{font-size:18px}.sbtn svg{width:26px;height:26px}.flyer{width:300px;padding:11px 13px;border-radius:20px}}
.sbtn.white{background:linear-gradient(180deg,#fff,#EEF4FC);color:var(--ink);box-shadow:0 1px 0 #fff inset,0 14px 34px -10px rgba(10,30,80,.45)}
.sbtn.white svg[fill="#fff"],.sbtn.white svg [fill="#fff"]{fill:var(--ink)}
.sbtn.white::before{background:radial-gradient(120px 80px at var(--gx,50%) var(--gy,50%),rgba(45,125,246,.25),transparent 70%)}
.stores .alt{align-self:center;font-size:13.5px;font-weight:500;color:var(--mute);padding:6px 4px}.stores .alt u{color:var(--blue);font-weight:600;text-underline-offset:3px}
.os-phone .sbtn:not(.sm){animation:idle 5s ease-in-out 2s infinite}@keyframes idle{0%,86%,100%{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 26px -8px rgba(14,42,58,.55)}93%{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 34px -8px rgba(45,125,246,.75)}}
@media(hover:none){.sbtn:hover::after{animation:none}.os-phone .sbtn:not(.sm)::after{animation:sheenp 5s ease-in-out 2s infinite}}@keyframes sheenp{0%,80%{left:-60%}100%{left:130%}}