/* Papi Agency — shared stylesheet (single cacheable file for all pages)
   Theme: portal dark/light with fixed blur header, animated neon logo,
   tab-style nav, and a vertical menu bar (sidebar) on mobile.
   Perf: one CSS file, GPU-friendly transforms, reduced-motion respected. */

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Tokens (light) ────────────────────────────────── */
:root{
  --bg:#f5f5f7;
  --bg-header:rgba(245,245,247,.8);
  --fg:#111118;
  --muted:#6e6e80;
  --border:#dcdce4;
  --secondary:#ececf0;
  --secondary-hover:#e0e0e6;
  --active-bg:#111118;
  --active-fg:#f5f5f7;
  --accent-a:#ff8a00;
  --accent-b:#e52e71;
  --radius:12px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Bebas Neue','Space Grotesk',var(--font);
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --maxw:1120px;
  --header-h:57px;
  --sidebar-w:56px;
}

/* ── Tokens (dark) ─────────────────────────────────── */
html.dark{
  --bg:#0d0d14;
  --bg-header:rgba(13,13,20,.8);
  --fg:#ededf0;
  --muted:#8a8a9a;
  --border:#232330;
  --secondary:#1a1a26;
  --secondary-hover:#24243a;
  --active-bg:#ededf0;
  --active-fg:#0d0d14;
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:var(--font);
  /* transparent so the fixed #cosmos-bg canvas (z-index:-1) shows through;
     the page color comes from html{background:var(--bg)} */
  background:transparent;
  color:var(--fg);
  line-height:1.6;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-top:var(--header-h);
  -webkit-font-smoothing:antialiased;
  transition:color .3s;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ── Skip link ─────────────────────────────────────── */
.skip-link{
  position:absolute;top:-48px;left:12px;z-index:2000;
  padding:10px 18px;border-radius:8px;
  background:var(--active-bg);color:var(--active-fg);
  font-size:13px;font-weight:600;transition:top .2s;
}
.skip-link:focus{top:12px}

/* ── Header (fixed, blurred) ───────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--bg-header);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;max-width:var(--maxw);margin:0 auto;
}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--fg);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex-shrink:0;
  transition:background .3s,color .3s;
}
.brand-icon img{width:26px;height:26px}
.brand-text{display:none}
.brand-name{font-size:13px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.brand-sub{font-size:11px;color:var(--muted);line-height:1}

/* ── Nav (tab-style) ───────────────────────────────── */
.tabs-nav{display:flex;align-items:center;gap:6px;scrollbar-width:none}
.tabs-nav::-webkit-scrollbar{display:none}

.tab-btn{
  position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:8px;padding:9px 16px;
  font-family:inherit;font-size:12px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--muted);
  transition:all .2s ease;
  animation:boundaryGlow 2.5s infinite alternate ease-in-out;
}
.tab-btn:hover{color:var(--fg);background:var(--secondary)}
.tab-btn.active{
  background:var(--active-bg);color:var(--active-fg);
  animation:boundaryGlow 2s infinite alternate ease-in-out;
}

/* CTA nav button */
.tab-btn.cta{
  background:linear-gradient(145deg,var(--accent-a),var(--accent-b));
  color:#fff !important;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
  box-shadow:0 8px 20px rgba(255,70,85,.35),0 0 0 1px rgba(255,180,40,.3);
  transform:scale(1.02);
  animation:pulseRing 2s cubic-bezier(.4,0,.6,1) infinite;
}
.tab-btn.cta:hover{
  background:linear-gradient(145deg,#ff9500,#f2437a);
  box-shadow:0 10px 26px rgba(255,100,120,.7),0 0 0 1px #ffcc66;
  transform:scale(1.03);
}
.tab-btn.cta.active{
  background:linear-gradient(145deg,#f57c00,#d31f5a);
  box-shadow:0 8px 22px rgba(255,80,100,.6),0 0 0 1px #ffb347;
  transform:scale(1.02);animation:none;
}

/* ── Animated logo ─────────────────────────────────── */
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.animated-logo{display:flex;align-items:center;gap:8px;cursor:pointer}
.neon-circle{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 0deg,#ff3366,#00d4ff,#f0b429,#ff3366);
  animation:neon-spin 8s linear infinite,neon-pulse 3s ease-in-out infinite alternate;
  box-shadow:0 0 20px rgba(0,212,255,.4),0 0 40px rgba(255,51,102,.2);
}
.logo-text-group{display:flex;flex-direction:column;line-height:1}
.logo-text{
  font-family:var(--font-display);
  font-size:1.15rem;letter-spacing:2px;line-height:1;
  background:linear-gradient(90deg,#ff3366,#ff00ff,#00d4ff,#00e676,#f0b429,#ff3366);
  background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rainbow-flow 5s ease infinite;
}
.logo-sub{
  font-size:.45rem;letter-spacing:3px;text-transform:uppercase;
  background:linear-gradient(90deg,#00d4ff,#a78bfa);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── Social icons ──────────────────────────────────── */
.social-icons{display:flex;align-items:center;gap:5px}
.social-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;
  border:1px solid var(--border);background:var(--secondary);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;
}
.social-icon svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.social-icon:hover{border-color:var(--muted);background:var(--secondary-hover);transform:translateY(-2px)}
.social-icon.whatsapp{color:#25D366}
.social-icon.telegram{color:#0088cc}
.social-icon.facebook{color:#1877f2}
.social-icon.instagram{color:#e4405f}
.social-icon.linkedin{color:#0a66c2}
.social-icon.youtube{color:#ff0000}

/* ── Theme toggle ──────────────────────────────────── */
.theme-toggle{
  flex-shrink:0;width:36px;height:36px;border-radius:8px;
  border:1px solid var(--border);background:var(--secondary);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;
}
.theme-toggle:hover{border-color:var(--muted);background:var(--secondary-hover);color:var(--fg)}
.theme-toggle svg{width:16px;height:16px;transition:transform .3s}
.theme-toggle:hover svg{transform:rotate(25deg)}
.icon-sun{display:none}
.icon-moon{display:block}
html.dark .icon-sun{display:block}
html.dark .icon-moon{display:none}

/* ── MOBILE: vertical menu bar (sidebar) ───────────── */
@media (max-width:639px){
  .tabs-nav-header{display:none}
  .header-inner{justify-content:center}
  .brand{display:none}
  .header-right{flex:1;justify-content:center}
  .animated-logo{justify-content:center}
  .site-header .social-icons{display:none}

  .tabs-nav-sidebar{
    position:fixed;top:var(--header-h);left:0;bottom:0;z-index:999;
    width:var(--sidebar-w);
    display:flex;flex-direction:column;align-items:center;gap:0;padding:0;
    background:var(--bg-header);
    backdrop-filter:blur(20px) saturate(1.8);
    -webkit-backdrop-filter:blur(20px) saturate(1.8);
    border-right:1px solid var(--border);
    transition:background .3s,border-color .3s;
  }
  .sidebar-tabs-group{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;flex:1;padding:12px 4px;overflow-y:auto;scrollbar-width:none;
  }
  .sidebar-tabs-group::-webkit-scrollbar{display:none}
  .tabs-nav-sidebar .tab-btn{
    writing-mode:vertical-lr;text-orientation:mixed;
    transform:rotate(180deg);
    padding:14px 8px;font-size:11px;letter-spacing:.3px;
  }
  /* CTA in sidebar: combine rotate + scale so text is not reversed */
  .tabs-nav-sidebar .tab-btn.cta{
    transform:rotate(180deg) scale(1.02);
    padding:14px 8px;font-size:10px;letter-spacing:.6px;
  }
  .sidebar-social{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:8px 4px 10px;border-top:1px solid var(--border);
  }
  .sidebar-social .social-icon{width:30px;height:30px;border-radius:6px}
  .sidebar-social .social-icon svg{width:13px;height:13px}

  /* Content clears the sidebar */
  main,.site-footer{margin-left:var(--sidebar-w)}
}

/* ── DESKTOP: horizontal nav in header ─────────────── */
@media (min-width:640px){
  .tabs-nav-sidebar{display:none}
  .brand-text{display:block}
  .tabs-nav-header{
    display:flex;align-items:center;gap:6px;
    overflow-x:auto;padding:0 8px;scrollbar-width:none;
  }
  .tabs-nav-header::-webkit-scrollbar{display:none}
  .tab-btn{padding:9px 18px;font-size:13px}
}

/* ── Floating chatbot, menu and social dock ─────────── */
.floating-tools{position:fixed;left:0;right:0;bottom:20px;z-index:900;display:flex;align-items:flex-end;justify-content:center;gap:12px;isolation:isolate}
.floating-chatbot{position:absolute;right:20px;bottom:0;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--active-bg);border:2px solid var(--fg);box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .2s,box-shadow .2s}
.floating-chatbot:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 34px rgba(0,0,0,.3)}
.floating-chatbot img{width:38px;height:38px;object-fit:contain}
.floating-menu{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px;border:1px solid var(--border);border-radius:24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);box-shadow:0 12px 30px rgba(0,0,0,.16);transform-origin:bottom center;transition:border-radius .45s cubic-bezier(.2,.9,.25,1),box-shadow .45s cubic-bezier(.2,.9,.25,1),background .3s}
 .floating-menu::after{content:"menu";position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;pointer-events:none;transition:opacity .2s}
 .floating-menu.is-open{border-radius:22px;box-shadow:0 18px 46px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--fg) 12%,transparent);animation:menu-unlock .72s cubic-bezier(.16,1.3,.3,1) both}
 .floating-menu-toggle{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--active-bg);color:var(--active-fg);font-size:20px;line-height:1;transition:transform .55s cubic-bezier(.16,1.3,.3,1),box-shadow .3s}
 .floating-menu-toggle:hover{transform:rotate(90deg)}
 .floating-menu.is-open .floating-menu-toggle{transform:rotate(135deg) scale(1.04);box-shadow:0 0 0 6px color-mix(in srgb,var(--active-bg) 12%,transparent)}
 .floating-menu-links{display:flex;flex-direction:column;align-items:stretch;gap:3px;max-height:0;overflow:hidden;opacity:0;transform:translateY(12px) scale(.88);transform-origin:top center;transition:max-height .52s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .52s cubic-bezier(.16,1,.3,1)}
 .floating-menu.is-open .floating-menu-links{max-height:320px;opacity:1;transform:translateY(0) scale(1)}
 .floating-menu-links a{padding:8px 13px;border-radius:999px;color:var(--muted);font-size:12px;font-weight:600;text-align:center;transition:background .2s,color .2s,transform .35s cubic-bezier(.16,1,.3,1);transform:translateY(-8px);opacity:0}
 .floating-menu.is-open .floating-menu-links a{transform:translateY(0);opacity:1}
 .floating-menu.is-open .floating-menu-links a:nth-child(1){transition-delay:.1s}.floating-menu.is-open .floating-menu-links a:nth-child(2){transition-delay:.15s}.floating-menu.is-open .floating-menu-links a:nth-child(3){transition-delay:.2s}.floating-menu.is-open .floating-menu-links a:nth-child(4){transition-delay:.25s}
 .floating-menu-links a:hover,.floating-menu-links a[aria-current=page]{background:var(--secondary);color:var(--fg)}
 .floating-social{display:flex;align-items:center;gap:6px;max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px) scale(.8);transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .5s cubic-bezier(.16,1,.3,1)}
 .floating-menu.is-open .floating-social{max-height:40px;opacity:1;transform:translateY(0) scale(1);transition-delay:.22s}
.floating-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--secondary);color:var(--fg);font-size:13px;font-weight:700;border:1px solid var(--border)}
.floating-social a:hover{transform:translateY(-2px);background:var(--secondary-hover)}
@media (max-width:639px){.floating-tools{left:0;right:0;bottom:12px;gap:8px}.floating-chatbot{right:12px;width:52px;height:52px}.floating-chatbot img{width:34px;height:34px}.floating-menu{padding:5px}.floating-menu-links{display:flex}.floating-menu.is-open .floating-social{max-height:38px}.floating-social a{width:31px;height:31px}.floating-menu-toggle{width:40px;height:40px}}

/* ── Hero ──────────────────────────────────────────── */
.hero{padding:64px 0 48px}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;
}
.hero .kicker::before{
  content:"";width:24px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
}
.hero h1{
  font-size:clamp(2rem,5.5vw,3.4rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:700;
  max-width:16ch;text-wrap:balance;
}
.hero h1 .accent{
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p{margin-top:18px;max-width:56ch;color:var(--muted);font-size:1.05rem;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── Buttons ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:10px;
  font-size:14px;font-weight:600;
  transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(145deg,var(--accent-a),var(--accent-b));
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.15);
  box-shadow:0 8px 20px rgba(255,70,85,.3);
}
.btn-primary:hover{box-shadow:0 10px 26px rgba(255,100,120,.5)}
.btn-ghost{border:1px solid var(--border);color:var(--fg);background:var(--secondary)}
.btn-ghost:hover{border-color:var(--muted);background:var(--secondary-hover)}

/* ── Sections ──────────────────────────────────────── */
.section{padding:48px 0}
.section-head{margin-bottom:32px}
.section-head h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;text-wrap:balance}
.section-head p{color:var(--muted);margin-top:8px;max-width:60ch}

/* ── Card grid ─────────────────────────────────────── */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{
  background:var(--secondary);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,transform .2s,background-color .3s;
}
a.card:hover,.card.hoverable:hover{border-color:var(--muted);transform:translateY(-3px)}
.card .icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-b);
}
.card .icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1rem;font-weight:650}
.card p{font-size:.875rem;color:var(--muted)}
.card .meta{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--accent-b)}
.card .value{font-weight:600;word-break:break-word}

/* ── Stats strip ───────────────────────────────────── */
.stats{
  display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--secondary);padding:22px;text-align:center;transition:background-color .3s}
.stat b{
  display:block;font-size:1.6rem;font-family:var(--mono);
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ── Price & badge (shop) ──────────────────────────── */
.price{
  font-family:var(--mono);font-size:1.15rem;font-weight:700;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.badge{
  align-self:flex-start;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;
  background:var(--bg);color:var(--accent-b);
  border:1px solid var(--border);
}

/* ── Contact list ──────────────────────────────────── */
.contact-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.contact-list .card{align-items:flex-start}

/* ── CTA band ──────────────────────────────────────── */
.cta-band{
  background:var(--secondary);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:40px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  transition:background-color .3s,border-color .3s;
}
.cta-band h2{font-size:clamp(1.3rem,3vw,1.8rem);letter-spacing:-.02em;text-wrap:balance}
.cta-band p{color:var(--muted);max-width:52ch}

/* ── Footer ────────────────────────────────────────── */
.site-footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  padding:40px 0 32px;
  color:var(--muted);font-size:14px;
  transition:border-color .3s;
}
.footer-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-grid h4{color:var(--fg);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-grid a:hover{color:var(--fg)}
.footer-bottom{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:12px;font-family:var(--mono);
}

/* ── 404 ───────────────────────────────────────────── */
.error-page{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 20px}
.error-page .code{
  font-family:var(--mono);font-size:clamp(4rem,15vw,8rem);font-weight:700;line-height:1;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.error-page h1{font-size:1.4rem;margin-top:8px}
.error-page p{color:var(--muted);margin:10px 0 24px}

/* ── Animations ────────────────────────────────────── */
@keyframes boundaryGlow{
  0%{box-shadow:0 0 0 1px rgba(0,180,255,.25),0 0 4px rgba(0,200,255,.08)}
  50%{box-shadow:0 0 0 1.5px rgba(120,220,255,.5),0 0 10px rgba(0,255,200,.15)}
  100%{box-shadow:0 0 0 1px rgba(200,120,255,.35),0 0 6px rgba(255,0,255,.1)}
}
@keyframes pulseRing{
  0%{box-shadow:0 8px 20px rgba(255,70,85,.35),0 0 0 1px rgba(255,180,40,.3),0 0 0 0 rgba(255,120,50,.5)}
  70%{box-shadow:0 8px 20px rgba(255,70,85,.35),0 0 0 1px rgba(255,180,40,.3),0 0 0 8px rgba(255,120,50,0)}
  100%{box-shadow:0 8px 20px rgba(255,70,85,.35),0 0 0 1px rgba(255,180,40,.3),0 0 0 0 rgba(255,120,50,0)}
}
@keyframes neon-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes neon-pulse{
  0%{filter:brightness(1);box-shadow:0 0 20px rgba(0,212,255,.4),0 0 40px rgba(255,51,102,.2)}
  50%{filter:brightness(1.3);box-shadow:0 0 35px rgba(255,51,102,.5),0 0 60px rgba(0,212,255,.3)}
  100%{filter:brightness(1);box-shadow:0 0 20px rgba(240,180,41,.4),0 0 40px rgba(0,212,255,.2)}
}
@keyframes rainbow-flow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
  }
  @keyframes menu-unlock{
  0%{transform:scaleY(.35) scaleX(.72);filter:blur(3px);opacity:.35}
  48%{transform:scaleY(1.08) scaleX(1.03);filter:blur(0);opacity:1}
  72%{transform:scaleY(.97) scaleX(.99)}
  100%{transform:scaleY(1) scaleX(1)}
  }

/* ── Utilities ─────────────────────────────────────── */
.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}

/* ── Motion safety ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}