/* Mobile Expert – shared styles. Layout lives inline in the pages; this file holds
   page basics, hover and focus states, responsive header rules and animations. */
:root{--accent:#2563EB}
html{scroll-behavior:smooth}
body{margin:0;background:#F8FAFC;-webkit-font-smoothing:antialiased}
a{color:#2563EB}a:hover{color:#1D4ED8}
img{max-width:100%}
[hidden]{display:none !important}
.me *{box-sizing:border-box}
.me a{text-decoration:none}
.me section{scroll-margin-top:84px}
.me :focus-visible{outline:2px solid #2563EB;outline-offset:3px;border-radius:6px}
.me input::placeholder,.me textarea::placeholder{color:#64748B}
.if{display:contents}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(17,17,17,.45)}
.lift{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.lift:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(17,17,17,.3);border-color:#CBD5E1}
.lift-dark{transition:transform .22s ease,border-color .22s ease,background-color .22s ease}
.lift-dark:hover{transform:translateY(-4px);border-color:#3B82F6;background-color:#1F1F1F}
.navlink{transition:color .15s ease}
.navlink:hover{color:#111111 !important}
.footlink{transition:color .15s ease}
.footlink:hover{color:#FFFFFF !important}
.arrow{transition:transform .2s ease}
.lift:hover .arrow{transform:translateX(4px)}
.acc{display:grid;transition:grid-template-rows .28s ease}
.plus{transition:transform .28s ease}

.nav-desktop{display:flex}
@media (max-width:900px){.nav-desktop{order:3;flex-basis:100%;overflow-x:auto;gap:0 !important;justify-content:space-between;padding-bottom:6px}.nav-desktop a{padding:8px 6px !important;font-size:14px !important;white-space:nowrap}.hide-sm{display:none !important}.me section{scroll-margin-top:124px}}

.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.float-a{animation:floaty 6s ease-in-out infinite alternate}
.float-b{animation:floaty 7s ease-in-out -2s infinite alternate}
.float-c{animation:floaty 8s ease-in-out -4s infinite alternate}
.spin{animation:spin 60s linear infinite}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
@keyframes floaty{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.me *{animation:none !important;transition:none !important}html{scroll-behavior:auto}}