@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#07111f;
  --bg-deep:#030814;
  --bg-elevated:#0d1730;
  --surface:#0f1b33;
  --surface-strong:#142242;
  --surface-soft:#101c37;
  --surface-glass:rgba(18,31,59,.72);
  --text:#ebf2ff;
  --text-soft:#b4c0df;
  --text-dim:#7f90b8;
  --primary:#68e1fd;
  --primary-strong:#4dc8ff;
  --secondary:#9d7bff;
  --highlight:#19f0c1;
  --danger:#ff6b9e;
  --line:rgba(122,153,230,.22);
  --line-strong:rgba(127,214,255,.42);
  --shadow:0 22px 60px rgba(0,0,0,.42);
  --shadow-soft:0 12px 32px rgba(0,0,0,.28);
  --glow:0 0 0 1px rgba(104,225,253,.08), 0 0 32px rgba(77,200,255,.16);
  --radius:24px;
  --radius-sm:18px;
  --max:1120px;
  --content:960px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Outfit',sans-serif;
  background:
    radial-gradient(circle at top left, rgba(104,225,253,.16), transparent 34%),
    radial-gradient(circle at top right, rgba(157,123,255,.16), transparent 28%),
    radial-gradient(circle at 50% 120%, rgba(25,240,193,.12), transparent 30%),
    linear-gradient(180deg, #08111f 0%, #050b16 52%, #030711 100%);
  color:var(--text);
  line-height:1.8;
  font-size:16px;
  min-height:100vh;
  overflow-x:hidden;
}

body::before,
body::after{
  content:'';
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:-1;
}

body::before{
  top:-140px;
  left:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(104,225,253,.22) 0%, rgba(104,225,253,0) 72%);
  filter:blur(12px);
  animation:driftOrb 18s ease-in-out infinite;
}

body::after{
  right:-100px;
  bottom:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(157,123,255,.18) 0%, rgba(157,123,255,0) 72%);
  filter:blur(14px);
  animation:driftOrb 22s ease-in-out infinite reverse;
}

a{
  color:var(--primary);
  text-decoration:none;
  font-weight:500;
  transition:color .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease, opacity .24s ease;
}

a:hover{color:#b8f5ff}

header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(4,10,22,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(122,153,230,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}

footer{
  position:relative;
  min-height:124px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:56px;
  padding:32px 24px;
  text-align:center;
  border-top:1px solid rgba(104,225,253,.18);
  background:
    linear-gradient(180deg, rgba(7,17,31,.72) 0%, rgba(3,8,20,.96) 100%);
  overflow:hidden;
}

footer::before{
  content:'';
  position:absolute;
  inset:-20% auto auto -10%;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(25,240,193,.12) 0%, transparent 72%);
  filter:blur(18px);
  pointer-events:none;
}

.site-header,
main{
  max-width:var(--max);
  margin:0 auto;
  padding:24px;
}

.site-header{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  min-height:118px;
  text-align:center;
}

.site-name,
.site-name a{
  margin:0;
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-size:38px;
  font-weight:700;
  letter-spacing:-.03em;
  text-shadow:0 0 24px rgba(104,225,253,.16);
}

.site-name a:hover{color:#fff}

nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

nav li{margin:0}

header nav a,
footer nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(15,27,51,.84);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  box-shadow:var(--shadow-soft);
}

header nav a:hover,
footer nav a:hover{
  border-color:var(--line-strong);
  background:rgba(20,34,66,.92);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(104,225,253,.12), 0 12px 24px rgba(0,0,0,.22);
}

header nav a.home-link{
  background:linear-gradient(135deg, rgba(104,225,253,.2), rgba(77,200,255,.34));
  border-color:rgba(104,225,253,.5);
  color:#fff;
  box-shadow:0 0 0 1px rgba(104,225,253,.12), 0 10px 24px rgba(34,145,255,.18);
}

header nav a.home-link:hover{
  background:linear-gradient(135deg, rgba(104,225,253,.32), rgba(77,200,255,.44));
  border-color:rgba(104,225,253,.72);
  color:#fff;
}

main{
  padding-top:40px;
  padding-bottom:44px;
}

article{
  max-width:var(--content);
  margin:0 auto;
}

.hero,
.table-of-contents,
article section,
.summary,
.cta,
.related-links{
  position:relative;
  margin:0 0 28px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(18,31,59,.88) 0%, rgba(11,22,43,.92) 100%);
  box-shadow:var(--shadow-soft), var(--glow);
  overflow:hidden;
  animation:fadeLift .7s ease both;
}

.hero::before,
.table-of-contents::before,
article section::before,
.summary::before,
.cta::before,
.related-links::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(130deg, rgba(104,225,253,.08), transparent 34%, rgba(157,123,255,.07) 70%, transparent 100%);
  pointer-events:none;
}

.hero{
  background:
    radial-gradient(circle at top right, rgba(104,225,253,.16), transparent 28%),
    radial-gradient(circle at bottom left, rgba(157,123,255,.14), transparent 24%),
    linear-gradient(160deg, rgba(17,34,66,.96) 0%, rgba(8,17,34,.98) 100%);
  box-shadow:0 22px 52px rgba(0,0,0,.36), 0 0 0 1px rgba(104,225,253,.14), 0 0 42px rgba(77,200,255,.14);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  color:var(--primary);
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:'';
  width:34px;
  height:1px;
  background:linear-gradient(90deg, rgba(104,225,253,.2), rgba(104,225,253,.95));
  box-shadow:0 0 12px rgba(104,225,253,.36);
}

h1,h2,h3,h4{
  margin-top:0;
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
}

h1{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.08;
}

h2{
  margin:0 0 14px;
  font-size:29px;
  line-height:1.2;
}

h3{
  margin:0 0 12px;
  font-size:22px;
  line-height:1.28;
}

p, ul, ol{margin:0 0 14px}
p:last-child, ul:last-child, ol:last-child{margin-bottom:0}
strong{font-weight:700}

p,
li,
.answer{
  color:var(--text-soft);
}

.lead{
  font-size:18px;
  color:#d9e5ff;
}

.small{font-size:14px}

.table-of-contents h2{margin-bottom:16px}
.table-of-contents ol,
.table-of-contents ul{
  margin:0;
  padding-left:22px;
}

.table-of-contents li{margin:0 0 10px}
.table-of-contents a{font-weight:600}
article section[id]{scroll-margin-top:110px}

.inline-related{
  color:var(--primary);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(104,225,253,.42);
  text-underline-offset:3px;
}

.inline-related:hover{
  color:#c7fbff;
  text-decoration-color:rgba(104,225,253,.8);
}

.button,
.cta a,
.hero .primary-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  border:1px solid rgba(104,225,253,.58);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(66,164,255,.9), rgba(104,225,253,.8));
  color:#03111f;
  font-weight:700;
  box-shadow:0 14px 30px rgba(27,129,255,.24), 0 0 18px rgba(104,225,253,.16);
}

.button:hover,
.cta a:hover,
.hero .primary-link:hover{
  color:#02111e;
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(104,225,253,.98), rgba(25,240,193,.9));
  border-color:rgba(25,240,193,.72);
}

.button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  border:1px solid rgba(157,123,255,.42);
  border-radius:14px;
  background:rgba(157,123,255,.12);
  color:#e5ddff;
  font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.button-secondary:hover{
  background:rgba(157,123,255,.2);
  border-color:rgba(157,123,255,.66);
  color:#fff;
  transform:translateY(-1px);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.meta-note,
.policy-card,
.contact-card,
.cta-note,
.intro-cta,
.jump,
.cta-block{
  position:relative;
  margin:18px 0 0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(16,28,55,.82) 0%, rgba(13,23,48,.88) 100%);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.meta-note::before,
.policy-card::before,
.contact-card::before,
.cta-note::before,
.intro-cta::before,
.jump::before,
.cta-block::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(104,225,253,.8), rgba(157,123,255,.4), transparent);
}

.meta-note{
  font-size:14px;
  color:#dbe6ff;
}

.policy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}

.policy-card h3,
.contact-card h3{
  margin-bottom:10px;
}

.checklist{
  padding-left:22px;
}

.checklist li{
  margin-bottom:10px;
}

.related-links{
  background:
    radial-gradient(circle at top left, rgba(25,240,193,.12), transparent 26%),
    linear-gradient(180deg, rgba(14,24,46,.94) 0%, rgba(11,20,39,.96) 100%);
}

.related-columns,
.tool-grid,
.highlights-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.related-group,
.tool-card,
.highlight-card{
  position:relative;
  padding:22px;
  border:1px solid rgba(122,153,230,.2);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(16,29,57,.85) 0%, rgba(10,19,37,.9) 100%);
  box-shadow:var(--shadow-soft);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.related-group::before,
.tool-card::before,
.highlight-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  opacity:.9;
}

.related-group:hover,
.tool-card:hover,
.highlight-card:hover{
  transform:translateY(-4px);
  border-color:rgba(104,225,253,.34);
  box-shadow:0 20px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(104,225,253,.08);
}

.related-group h3,
.tool-card h3,
.highlight-card h3{
  font-size:22px;
  margin-bottom:10px;
}

.related-group ul,
.tool-card ul,
.highlight-card ul{
  padding-left:18px;
  margin:0;
}

.related-group li,
.tool-card li,
.highlight-card li{
  margin:0 0 10px;
}

.content-note{
  margin-top:12px;
  color:var(--text-dim);
  font-size:14px;
}

.tool-card .button,
.tool-card .button-secondary{
  margin-top:8px;
}

.tool-card p:last-of-type{margin-bottom:18px}

.breadcrumbs{
  max-width:1100px;
  margin:1rem auto 0;
  padding:0 1rem;
  color:var(--text-dim);
  font-size:.95rem;
  font-weight:700;
  text-align:center;
}

.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0;
  list-style:none;
  padding:0;
  margin:0;
}

.breadcrumbs li{
  display:inline-flex;
  align-items:center;
}

.breadcrumbs li + li::before{
  content:'-';
  margin:0 .5rem;
  color:rgba(127,144,184,.72);
  font-weight:700;
}

.breadcrumbs a{
  color:var(--text-soft);
  text-decoration:none;
}

.breadcrumbs a:hover{
  color:var(--primary);
  text-decoration:underline;
}

.wrap{max-width:var(--content);margin:0 auto}

.jump strong{
  display:block;
  margin-bottom:10px;
  color:var(--text);
}

.jump-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}

.jump-grid a,
.cta-links a{
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:10px 14px;
  border:1px solid rgba(122,153,230,.22);
  border-radius:14px;
  background:rgba(9,18,37,.58);
  color:var(--text);
  font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}

.jump-grid a:hover,
.cta-links a:hover{
  background:rgba(20,34,66,.82);
  border-color:var(--line-strong);
  color:#fff;
  transform:translateY(-1px);
}

.theme{
  position:relative;
  margin:0 0 28px;
  padding:0;
  scroll-margin-top:110px;
}

.theme::before{
  content:'';
  position:absolute;
  top:24px;
  left:24px;
  width:46px;
  height:46px;
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(104,225,253,.22), rgba(157,123,255,.28)),
    url('/android-chrome-512x512.png');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 10px 22px rgba(0,0,0,.26), 0 0 0 1px rgba(104,225,253,.16);
  animation:pulseHalo 4.8s ease-in-out infinite;
}

.theme > h2,
.theme > .theme-intro,
.theme > .helper{
  position:relative;
  z-index:1;
  padding-left:86px;
  padding-right:32px;
}

.theme > h2{
  padding-top:32px;
  margin-bottom:10px;
}

.theme > .theme-intro,
.theme > .helper{
  color:var(--text-dim);
}

.theme > .theme-intro{margin-bottom:8px}
.theme > .helper{
  margin-bottom:16px;
  font-size:14px;
}

.theme details{
  margin:0 32px 14px;
  border:1px solid rgba(122,153,230,.2);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(12,23,45,.88) 0%, rgba(9,17,35,.92) 100%);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:border-color .26s ease, transform .26s ease, box-shadow .26s ease;
}

.theme details:last-child{margin-bottom:32px}

.theme details:hover{
  border-color:rgba(104,225,253,.34);
  transform:translateY(-1px);
}

.theme summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:18px 22px;
  color:var(--text);
  font-weight:700;
}

.theme summary::-webkit-details-marker{display:none}

.theme summary::after{
  content:'+';
  float:right;
  margin-left:12px;
  color:var(--primary);
  font-weight:700;
}

.theme details[open]{
  border-color:rgba(104,225,253,.42);
  box-shadow:0 18px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(104,225,253,.08);
}

.theme details[open] summary{
  background:linear-gradient(180deg, rgba(16,28,55,.72) 0%, rgba(16,28,55,.24) 100%);
}

.theme details[open] summary::after{content:'-'}

.answer{
  padding:0 22px 22px;
}

.cta-block{
  margin:0 0 28px;
}

.cta-block h3{margin-bottom:10px}

.cta-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-top:12px;
}

.site-logo-link{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.footer-logo-link{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.site-logo,
.hero-logo,
.footer-logo{
  animation:floatBadge 7.2s ease-in-out infinite;
}

.site-logo{
  width:112px;
  height:112px;
  border-radius:28px;
  box-shadow:0 18px 38px rgba(0,0,0,.3), 0 0 0 1px rgba(104,225,253,.12), 0 0 28px rgba(104,225,253,.12);
}

.hero-logo{
  display:block;
  width:112px;
  height:112px;
  margin:0 auto 18px;
  border-radius:30px;
  box-shadow:0 20px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(104,225,253,.16), 0 0 34px rgba(157,123,255,.16);
}

.footer-logo{
  width:96px;
  height:96px;
  border-radius:24px;
  box-shadow:0 16px 30px rgba(0,0,0,.26), 0 0 0 1px rgba(104,225,253,.12);
}

footer p{
  margin:0 0 18px;
  color:#edf5ff;
  font-size:15px;
}

.footer-meta{
  max-width:760px;
  margin:12px auto 18px;
  color:rgba(235,242,255,.78);
}

.footer-secondary{
  margin-top:14px;
}

.footer-secondary ul{gap:10px}

.footer-secondary a{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:none;
}

.footer-secondary a:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}

@keyframes fadeLift{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes driftOrb{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(18px,24px,0) scale(1.08)}
}

@keyframes floatBadge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@keyframes pulseHalo{
  0%,100%{
    box-shadow:0 10px 22px rgba(0,0,0,.26), 0 0 0 1px rgba(104,225,253,.16);
  }
  50%{
    box-shadow:0 12px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(104,225,253,.24), 0 0 22px rgba(104,225,253,.16);
  }
}

@media (min-width:760px){
  .jump-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (max-width:900px){
  .related-columns,
  .tool-grid,
  .highlights-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .site-header{
    min-height:98px;
    padding-left:16px;
    padding-right:16px;
  }

  .site-logo{
    width:84px;
    height:84px;
    border-radius:22px;
  }

  .hero-logo{
    width:92px;
    height:92px;
    border-radius:24px;
  }

  .footer-logo{
    width:70px;
    height:70px;
    border-radius:18px;
  }

  .footer-logo-link{left:16px}

  footer{
    min-height:104px;
    padding-left:16px;
    padding-right:16px;
  }

  .theme::before{
    top:20px;
    left:20px;
    width:38px;
    height:38px;
    border-radius:10px;
  }

  .theme > h2,
  .theme > .theme-intro,
  .theme > .helper{
    padding-left:70px;
    padding-right:22px;
  }
}

@media (max-width:700px){
  body{font-size:15px}
  h1{font-size:32px}
  h2{font-size:24px}
  h3{font-size:20px}
  .site-header,
  main{
    padding-left:16px;
    padding-right:16px;
  }
  .hero,
  .table-of-contents,
  article section,
  .summary,
  .cta,
  .related-links{
    padding:22px;
    border-radius:18px;
  }
  .theme details{
    margin-left:22px;
    margin-right:22px;
  }
  .theme details:last-child{margin-bottom:22px}
  .jump-grid{grid-template-columns:1fr}
}

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