/* ============================================================
   APK Scanner Pro — Design System v2
   Full dark theme. Depth comes from elevation (bg-0 -> bg-3),
   never from switching to a light background.
   ============================================================ */

:root {
  /* -- Elevation scale, darkest to lightest -- */
  --bg-0: #0a1420;                 /* nav, hero, footer — deepest surface */
  --bg-1: #0e1d2d;                 /* default section background */
  --bg-2: #12243a;                 /* card surface */
  --bg-3: #16304a;                 /* nested card (card sitting on a card) */

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* -- Accent, pulled from the logo -- */
  --accent: #17d6f2;
  --accent-hover: #3ee0f7;
  --accent-soft: rgba(23, 214, 242, 0.12);
  --accent-teal: #00e0a4;

  /* -- Text -- */
  --text-1: #eef6fb;               /* primary */
  --text-2: #9fb4c8;               /* secondary */
  --text-3: #64798d;               /* faint / placeholder */

  /* -- Semantic -- */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --font: 'Poppins', sans-serif;
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* stops Android Chrome from auto-inflating font size in narrow columns — the #1 cause of "fine on iPhone, broken on Android" */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  margin: 0;
  background: var(--bg-1);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, select, textarea {
  font-family: inherit;   /* some Android builds substitute a system font for form controls, throwing off widths */
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   Layout
   ----------------------------------------------------------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.section { padding: 64px 0; background: var(--bg-1); }
.section-deep { background: var(--bg-0); }   /* use sparingly, for emphasis blocks */

/* -----------------------------------------------------------
   Entrance motion — tied to page load, never to scroll position.
   Guarantees content is never stuck invisible (bad for SEO/crawlers
   and for any device where an intersection observer misfires).
   ----------------------------------------------------------- */
.reveal {
  animation: reveal-in 0.7s var(--ease) both;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; opacity: 1; transform: none; }
}

/* -----------------------------------------------------------
   Nav
   ----------------------------------------------------------- */
.nav {
  background: rgba(10, 20, 32, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { height: 32px; width: auto; }
.nav-brand span { color: var(--text-1); font-weight: 600; font-size: 15px; letter-spacing: 0.2px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) { color: var(--text-2); font-size: 14px; font-weight: 500; }
.nav-links a:not(.btn):hover { color: var(--text-1); text-decoration: none; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.hero {
  background:
    radial-gradient(circle at 15% 0%, rgba(23, 214, 242, 0.12), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0, 224, 164, 0.09), transparent 40%),
    var(--bg-0);
  color: var(--text-1);
  padding: 76px 0 68px;
  text-align: center;
}
.hero-logo { height: 76px; width: auto; margin: 0 auto 20px; animation: float 5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(23, 214, 242, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.hero p.lead {
  font-size: 1.1rem;
  color: var(--text-2);
  max-width: 620px;
  margin: 0 auto 30px;
  line-height: 1.65;
}

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
  text-decoration: none;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  background: var(--accent);
  color: #052029;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(23, 214, 242, 0.28);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-1);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); }

.btn-block { width: 100%; }

/* -----------------------------------------------------------
   Cards — elevation instead of light/dark
   ----------------------------------------------------------- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

.card-nested {
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 24px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.card-featured { border: 2px solid var(--accent); position: relative; }
.badge-featured {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #052029;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* -----------------------------------------------------------
   Forms
   ----------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="file"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  font-size: 15px;
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-1);
  margin-bottom: 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-divider {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin: 4px 0 14px;
}

/* -----------------------------------------------------------
   Status / feedback
   ----------------------------------------------------------- */
.status-box {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
}
.status-box.success { background: var(--success-bg); color: var(--success); }
.status-box.error { background: var(--danger-bg); color: var(--danger); }
.status-box.info { background: var(--warning-bg); color: var(--warning); }

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--accent-soft);
  border-top: 3px solid var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 20px auto;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.quota-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(23, 214, 242, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
}

.hidden { display: none !important; }

/* -----------------------------------------------------------
   Product demo video
   ----------------------------------------------------------- */
.video-section {
  background: var(--bg-0);
  padding: 64px 24px;
}
.video-container { max-width: 1000px; margin: 0 auto; }
.video-heading { text-align: center; margin-bottom: 36px; }
.video-heading h2 {
  color: var(--accent);
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.video-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-2);
  font-size: 1.08rem;
  line-height: 1.7;
}
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.video-wrapper:hover { border-color: var(--border-strong); }
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -----------------------------------------------------------
   Article / content pages (blog posts, about, legal pages)
   ----------------------------------------------------------- */
.article { max-width: 760px; margin: 0 auto; }
.article h2 { margin-top: 40px; }
.article h3 { margin-top: 28px; color: var(--accent); }
.article p, .article li { color: var(--text-2); }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-bottom: 8px; line-height: 1.7; }
.article a { text-decoration: underline; text-underline-offset: 2px; }

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.article table th, .article table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.article table th { background: var(--bg-3); color: var(--accent); font-weight: 600; }
.article table td { color: var(--text-2); }

.callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 24px 0;
  color: var(--text-1);
}
.callout strong { color: var(--accent); }

/* -----------------------------------------------------------
   Tables
   ----------------------------------------------------------- */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 13px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.compare-table th { color: var(--accent); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.3px; }
.compare-table td { color: var(--text-2); }

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
.site-footer {
  background: var(--bg-0);
  color: var(--text-3);
  padding: 44px 0 30px;
  text-align: center;
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.site-footer a { color: var(--text-2); margin: 0 8px; }
.site-footer a:hover { color: var(--accent); }
.footer-social { display: flex; justify-content: center; gap: 18px; margin-bottom: 18px; }
.footer-social a { display: inline-flex; transition: transform 0.2s var(--ease); }
.footer-social a:hover { transform: translateY(-2px); }
.footer-social img { width: 20px; height: 20px; opacity: 0.7; transition: opacity 0.2s var(--ease); filter: grayscale(1) brightness(2); }
.footer-social a:hover img { opacity: 1; }

/* -----------------------------------------------------------
   Typography
   ----------------------------------------------------------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.3px; color: var(--text-1); margin: 0 0 14px; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.15rem; }
p { line-height: 1.7; margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.eyebrow-accent { color: var(--accent); font-weight: 600; }
.text-muted { color: var(--text-2); }
.text-faint { color: var(--text-3); }

/* Defensive flexbox fix: by default flex/grid children refuse to shrink below
   their content's natural width, which is what causes nav bars and card grids
   to overflow and "break" on some Android Chrome builds even though desktop
   and iOS Safari render the exact same markup fine. */
.nav-inner > *, .card-grid > *, .footer-social > * { min-width: 0; }

/* -----------------------------------------------------------
   Responsive — tablet
   ----------------------------------------------------------- */
@media (max-width: 900px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .section { padding: 48px 0; }
  .hero { padding: 60px 0 50px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .video-section { padding: 48px 20px; }
  .video-heading h2 { font-size: 1.9rem; }
  .video-heading p { font-size: 1rem; }
}

/* -----------------------------------------------------------
   Responsive — mobile
   ----------------------------------------------------------- */
@media (max-width: 640px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-0);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-links .btn { margin-top: 12px; }
  .nav-toggle { display: flex; }

  .section { padding: 40px 0; }
  .hero { padding: 52px 0 40px; }
  .hero h1 { font-size: 1.6rem; }
  .hero p.lead { font-size: 1rem; }
  .btn { width: 100%; padding: 14px 20px; }
  .hero .btn { width: auto; }
  h2 { font-size: 1.5rem; }
  .card { padding: 20px; }
  .compare-table th, .compare-table td { font-size: 0.78rem; padding: 10px 8px; }
  .video-section { padding: 40px 20px; }
  .video-heading h2 { font-size: 1.35rem; line-height: 1.3; }
  .video-heading p { font-size: 0.95rem; line-height: 1.6; }
  .video-wrapper { border-radius: var(--radius-sm); }
}