/* next-accesos.com — shared styles for the 2026 app-marketing redesign.
   Component markup keeps the design's inline styles; this file holds fonts,
   base/reset, background variants, hover states, responsive overrides and
   article/legal prose styling. */

@font-face{font-family:Quicksand;font-weight:400;font-display:swap;src:url('/assets/quicksand/Quicksand-Regular.ttf') format('truetype')}
@font-face{font-family:Quicksand;font-weight:500;font-display:swap;src:url('/assets/quicksand/Quicksand-Medium.ttf') format('truetype')}
@font-face{font-family:Quicksand;font-weight:600;font-display:swap;src:url('/assets/quicksand/Quicksand-SemiBold.ttf') format('truetype')}
@font-face{font-family:Quicksand;font-weight:700;font-display:swap;src:url('/assets/quicksand/Quicksand-Bold.ttf') format('truetype')}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:#fff;
  font-family:Quicksand,ui-rounded,'SF Pro Rounded',Nunito,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* Accent tokens — the design's "Lime" default. Flip these three values to
   restyle every gradient CTA on the home page. */
:root{--accent:#A9F121;--accent2:#2FE6C2;--ctaText:#06003D}

/* Background variants (design: home carries two radial glows, hub pages one,
   reading pages none). */
.bg-home{background:radial-gradient(1200px 700px at 78% -8%,rgba(47,230,194,.14),transparent 60%),radial-gradient(1000px 700px at 8% 20%,rgba(13,111,208,.20),transparent 55%),linear-gradient(168deg,#0A2C6E 0%,#0A1A6E 42%,#09005E 100%)}
.bg-glow{background:radial-gradient(1000px 700px at 80% -10%,rgba(47,230,194,.12),transparent 55%),linear-gradient(168deg,#0A2C6E 0%,#0A1A6E 42%,#09005E 100%)}
.bg-plain{background:linear-gradient(168deg,#0A2C6E 0%,#0A1A6E 42%,#09005E 100%)}

/* Hover states (the design's style-hover attributes). */
a,.tap{transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,padding .16s ease}
.hov-w:hover{color:#fff !important}
.hov-accent:hover{color:var(--accent) !important}
.hov-bg12:hover{background:rgba(255,255,255,.12) !important}
.hov-bg14:hover{background:rgba(255,255,255,.14) !important}
.hov-lift:hover{transform:translateY(-2px)}
.hov-pad:hover{padding-left:14px !important}
.hov-border:hover{border-color:rgba(43,196,236,.5) !important}
.hov-wa:hover{background:rgba(37,211,102,.16) !important;border-color:#25D366 !important}
.hov-fb:hover{background:rgba(24,119,242,.16) !important;border-color:#1877F2 !important}
.hov-ig:hover{background:rgba(225,48,108,.16) !important;border-color:#E1306C !important}

/* Horizontal scroller (app screenshots). */
.hscroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.hscroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.hscroll::-webkit-scrollbar-track{background:transparent}

/* Prose — blog articles and legal pages rendered from markdown. */
.prose{font-size:17.5px;line-height:1.72;color:rgba(255,255,255,.82);font-weight:500}
.prose>:first-child{margin-top:0}
.prose p{margin:16px 0 0}
.prose h2{font-size:26px;font-weight:700;letter-spacing:-.6px;color:#fff;margin:38px 0 0;scroll-margin-top:98px}
.prose h3{font-size:20px;font-weight:700;letter-spacing:-.4px;color:#fff;margin:30px 0 0;scroll-margin-top:98px}
.prose ul,.prose ol{margin:14px 0 0;padding-left:22px;line-height:1.8}
.prose li{margin-top:6px}
.prose strong{color:#fff}
.prose a{color:#2BC4EC;font-weight:700}
.prose a:hover{color:#fff}
.prose blockquote{margin:34px 0 0;padding:22px 26px;border-left:3px solid #2BC4EC;background:rgba(255,255,255,.05);border-radius:0 16px 16px 0;font-size:19px;font-weight:600;color:#fff;line-height:1.5}
.prose blockquote p{margin:0}
.prose code{background:rgba(255,255,255,.08);border-radius:6px;padding:2px 7px;font-size:.9em}
.prose img{border-radius:16px}

/* Legal table of contents (sticky rail on wide screens). */
.toc{position:sticky;top:98px}
.toc nav ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14px;font-weight:600;color:rgba(255,255,255,.72)}
.toc nav ul ul{margin:8px 0 0 14px}
.toc a:hover{color:#fff}

/* Responsive overrides (the design's @container rules, plus equivalents for
   the interior pages that were designed desktop-only). */
@media (max-width:820px){
  .nav-links{display:none !important}
  .nav-cta-text{display:none !important}
  .hero-row{flex-direction:column !important;gap:40px !important;padding-top:44px !important}
  .hero-row h1{font-size:40px !important;letter-spacing:-1.5px !important}
  .hero-stats{flex-wrap:wrap !important;gap:16px 22px !important}
  .grid-3{grid-template-columns:1fr 1fr !important}
  .contact-grid{grid-template-columns:1fr !important;gap:36px !important;padding-top:56px !important;padding-bottom:56px !important}
  .contact-grid h2{font-size:36px !important}
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:28px !important}
  .shot-arrows{display:none !important}
  .split-2{grid-template-columns:1fr !important}
  .toc{position:static;margin-bottom:8px}
  .page-h1{font-size:38px !important;letter-spacing:-1.4px !important}
}
@media (max-width:520px){
  .grid-3{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr !important}
  .hero-row h1{font-size:34px !important;letter-spacing:-1px !important}
  .page-h1{font-size:32px !important;letter-spacing:-1.2px !important}
  .nav-inner{padding:0 16px !important}
  .nav-inner>div:last-child a{padding:0 16px !important}
}