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

:root {
  --bg:    #070d09;
  --bg2:   #0c1610;
  --bg3:   #101e14;
  --green: #00e87a;
  --gdim:  rgba(0,232,122,0.09);
  --gbord: rgba(0,232,122,0.18);
  --text:  #e8f5ee;
  --text2: #7fa990;
  --muted: #3a5444;
  --bord:  rgba(0,232,122,0.08);
  --r:     12px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--bord) 1px, transparent 1px),
    linear-gradient(90deg, var(--bord) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none; z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: -300px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(0,232,122,0.055) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ANIMATIONS */
@keyframes fadein   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse    { 0%,100% { opacity:.3; transform:scale(1) translate(-50%,-50%); } 50% { opacity:.85; transform:scale(1.04) translate(-48%,-48%); } }
@keyframes radar    { from { transform:translateX(-50%) rotate(0deg); } to { transform:translateX(-50%) rotate(360deg); } }
@keyframes blink    { 0%,100% { opacity:1; } 50% { opacity:.2; } }
@keyframes scanbar  { 0% { top:10%; } 50% { top:88%; } 100% { top:10%; } }
@keyframes slidein  { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@keyframes glow     { 0%,100% { box-shadow:0 0 20px rgba(0,232,122,.25); } 50% { box-shadow:0 0 40px rgba(0,232,122,.5); } }

/* ── NAV ─────────────────────────────────── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 48px;
  background: rgba(7,13,9,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bord);
}

.logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: -.4px;
  color: var(--text); text-decoration: none;
}
.logo span { color: var(--green); }

.nav-right { display:flex; align-items:center; gap:18px; }

.lang-switcher { display:flex; gap:2px; }
.lang-btn {
  background: none;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; cursor: pointer;
  transition: all .18s;
}
.lang-btn:first-child { border-radius: 4px 0 0 4px; }
.lang-btn:last-child  { border-radius: 0 4px 4px 0; }
.lang-btn.active { background: var(--green); border-color: var(--green); color: #070d09; }
.lang-btn:not(.active):hover { border-color: var(--text2); color: var(--text2); }

.nav-cta {
  display: inline-flex; align-items: center; gap:7px;
  background: var(--green); color: #070d09;
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700;
  padding: 8px 18px; border-radius: 6px; text-decoration: none;
  transition: opacity .18s, transform .15s;
}
.nav-cta:hover { opacity:.85; transform:translateY(-1px); }
.nav-cta i { font-size:15px; }

/* ── HERO ─────────────────────────────────── */
.hero {
  position: relative; z-index:1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 110px 24px 80px;
  text-align: center;
}

.hero-tag {
  display: inline-flex; align-items: center; gap:10px;
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green); margin-bottom: 32px;
  opacity:0; animation: fadein .6s ease .1s forwards;
}
.tag-line { width:24px; height:1px; background:var(--green); opacity:.5; }

h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 8.5vw, 96px);
  line-height: .96; letter-spacing: -.03em;
  margin-bottom: 24px;
  opacity:0; animation: fadein .7s ease .25s forwards;
}
h1 em { font-style:normal; color:var(--green); }

.hero-sub {
  font-size: 17px; font-weight: 400;
  color: var(--text2); line-height: 1.7; max-width: 420px;
  margin-bottom: 48px;
  opacity:0; animation: fadein .7s ease .4s forwards;
}

/* CTA BUTTON */
.dl-btn {
  display: inline-flex; align-items: center; gap:10px;
  background: var(--green); color: #070d09;
  font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800;
  padding: 16px 36px; border-radius: 8px; text-decoration: none;
  letter-spacing: -.2px;
  animation: glow 3s ease-in-out infinite;
  transition: transform .18s, opacity .18s;
  opacity:0; animation: fadein .7s ease .55s forwards, glow 3s ease-in-out 1.5s infinite;
}
.dl-btn:hover { transform: translateY(-2px); opacity:.9; }
.dl-btn i { font-size:20px; }

.store-note {
  font-size: 12px; color: var(--muted); margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap:8px;
  opacity:0; animation: fadein .7s ease .75s forwards;
}
.store-note i { font-size:14px; color:var(--text2); }

/* RADAR */
.radar-wrap {
  position: relative; width:280px; height:280px; margin-top:64px;
  opacity:0; animation: fadein .9s ease .9s forwards;
}
.radar-ring {
  position: absolute; border-radius:50%;
  border: 1px solid rgba(0,232,122,.16);
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  animation: pulse 3.4s ease-in-out infinite;
}
.radar-ring:nth-child(1) { width:56px;  height:56px;  animation-delay:0s; }
.radar-ring:nth-child(2) { width:110px; height:110px; animation-delay:.45s; }
.radar-ring:nth-child(3) { width:168px; height:168px; animation-delay:.9s; }
.radar-ring:nth-child(4) { width:270px; height:270px; animation-delay:1.35s; }
.radar-sweep {
  position: absolute; top:9px; left:50%;
  transform: translateX(-50%);
  width:1px; height:131px;
  background: linear-gradient(to bottom, transparent, var(--green));
  transform-origin: bottom center;
  animation: radar 4.5s linear infinite;
}
.radar-center {
  position: absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:10px; height:10px;
  background: var(--green); border-radius:50%;
  box-shadow: 0 0 20px var(--green);
  animation: pulse 1.8s ease-in-out infinite;
}
.radar-lbl {
  position: absolute; white-space: nowrap;
  font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:5px;
}
.rdot { width:5px; height:5px; border-radius:50%; background:var(--green); animation:blink 2.2s ease-in-out infinite; }
.rdot.red { background:#ff4560; }
.rl1 { top:12px; right:-52px; }
.rl2 { bottom:52px; left:-68px; }
.rl3 { bottom:18px; right:-46px; animation-delay:.8s; }

/* ── SECTION BASE ─────────────────────────── */
section { position:relative; z-index:1; }
.inner { max-width:1040px; margin:0 auto; padding:0 48px; }
.s-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green); margin-bottom:18px;
}
.s-label::before { content:''; display:block; width:18px; height:1px; background:var(--green); opacity:.6; }
.s-title {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(28px,4vw,44px); letter-spacing:-.025em; line-height:1.07;
  margin-bottom:14px;
}
.s-desc { font-size:16px; color:var(--text2); max-width:480px; line-height:1.72; }
.sep { border-top: 1px solid var(--bord); }

/* ── HOW IT WORKS ─────────────────────────── */
.hiw { padding:100px 0; }
.hiw-hd { margin-bottom:56px; }
.steps {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--bord);
  border:1px solid var(--bord); border-radius:var(--r); overflow:hidden;
}
.step { background:var(--bg); padding:36px 30px; position:relative; transition:background .2s; }
.step:hover { background:var(--bg2); }
.step-icon {
  width:48px; height:48px;
  background:var(--gdim); border:1px solid var(--gbord); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--green); margin-bottom:20px;
}
.step-n {
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.12em; color:var(--muted); text-transform:uppercase;
  margin-bottom:10px;
}
.step-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; margin-bottom:10px; color:var(--text); }
.step-desc  { font-size:15px; color:var(--text2); line-height:1.72; }
.step-arr {
  position:absolute; top:50%; right:-14px;
  width:28px; height:28px;
  background:var(--bg3); border:1px solid var(--gbord); border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:2;
  transform:translateY(-50%); font-size:12px; color:var(--green);
}

/* ── FEATURES ─────────────────────────────── */
.feats { padding:100px 0; }
.feats-hd { margin-bottom:52px; }
.feats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feat-card {
  background:var(--bg2); border:1px solid var(--bord); border-radius:var(--r);
  padding:36px; transition:border-color .2s, background .2s;
}
.feat-card:hover { border-color:var(--gbord); background:var(--bg3); }
.feat-icon {
  width:52px; height:52px;
  background:var(--gdim); border:1px solid var(--gbord); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--green); margin-bottom:20px;
}
.feat-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; margin-bottom:10px; color:var(--text); }
.feat-desc  { font-size:15px; color:var(--text2); line-height:1.72; }
.feat-tag {
  display:inline-block; margin-top:16px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green); background:var(--gdim);
  padding:3px 10px; border-radius:4px;
}

/* ── SCREENSHOTS ──────────────────────────── */
.shots { padding:100px 0; overflow:hidden; }
.shots-hd { margin-bottom:56px; }
.shots-img-wrap {
  position:relative;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,232,122,.15);
}
.shots-img-wrap img {
  width:100%; display:block;
  filter:contrast(1.02) saturate(1.05);
}
.shots-caption {
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
  margin-top:28px;
}
.shot-cap {
  font-size:12px; font-weight:500; color:var(--muted);
  background:var(--bg2); border:1px solid var(--bord);
  padding:4px 14px; border-radius:20px; letter-spacing:.04em;
}

/* ── REVIEWS ──────────────────────────────── */
.reviews { padding:100px 0; }
.rev-hd  { margin-bottom:52px; }
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rev-card {
  background:var(--bg2); border:1px solid var(--bord); border-radius:var(--r); padding:28px;
}
.rev-stars { color:var(--green); font-size:12px; letter-spacing:2px; margin-bottom:14px; }
.rev-text  { font-size:15px; color:var(--text2); line-height:1.75; margin-bottom:20px; font-style:italic; }
.rev-name  { font-size:13px; font-weight:600; color:var(--text); }
.rev-meta  { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── FAQ ──────────────────────────────────── */
.faq { padding:100px 0; }
.faq-hd { margin-bottom:48px; }
.faq-list { display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item {
  background:var(--bg2); border:1px solid var(--bord); border-radius:var(--r);
  padding:0; overflow:hidden;
}
.faq-item summary {
  list-style:none; cursor:pointer;
  padding:20px 24px;
  font-family:'Syne',sans-serif; font-size:16px; font-weight:700;
  color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:color .18s;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+';
  font-family:'Outfit',sans-serif; font-weight:300;
  font-size:26px; line-height:1;
  color:var(--green); flex-shrink:0;
  transition:transform .18s;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:var(--green); }
.faq-answer { padding:0 24px 22px; color:var(--text2); font-size:15px; line-height:1.72; }

/* ── BLOG INDEX ───────────────────────────── */
.blog-index { padding:120px 0 100px; }
.blog-index .inner { max-width:760px; }
.blog-index-hd { margin-bottom:48px; }
.post-list { display:flex; flex-direction:column; gap:16px; }
.post-card {
  display:block; padding:28px 32px;
  background:var(--bg2); border:1px solid var(--bord); border-radius:var(--r);
  text-decoration:none; color:inherit;
  transition:border-color .2s, background .2s;
}
.post-card:hover { border-color:var(--gbord); background:var(--bg3); }
.post-card-meta {
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.post-card-meta .sep-dot { color:var(--bord); }
.post-card-title {
  font-family:'Syne',sans-serif; font-size:24px; font-weight:700;
  letter-spacing:-.02em; line-height:1.2; color:var(--text);
  margin-bottom:8px;
}
.post-card-desc { font-size:15px; color:var(--text2); line-height:1.7; }

/* ── ARTICLE ──────────────────────────────── */
.article { padding:120px 0 80px; }
.article .inner { max-width:720px; }
.article-meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.article-meta .pill {
  background:var(--gdim); border:1px solid var(--gbord); color:var(--green);
  padding:3px 10px; border-radius:20px;
}
.article h1 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(34px,5vw,52px); line-height:1.08; letter-spacing:-.025em;
  margin-bottom:18px; text-align:left;
  animation:none; opacity:1;
}
.article-lede {
  font-size:19px; color:var(--text2); line-height:1.6;
  margin-bottom:36px;
}
.article-content { font-size:17px; line-height:1.78; color:var(--text2); }
.article-content p { margin-bottom:22px; }
.article-content h2 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:28px; line-height:1.2; letter-spacing:-.02em;
  color:var(--text); margin:56px 0 18px;
}
.article-content h3 {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:20px; line-height:1.3; letter-spacing:-.015em;
  color:var(--text); margin:32px 0 12px;
}
.article-content strong { color:var(--text); font-weight:600; }
.article-content em { font-style:italic; color:var(--text); }
.article-content a {
  color:var(--green); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--gbord); transition:text-decoration-color .15s;
}
.article-content a:hover { text-decoration-color:var(--green); }
.article-content ul, .article-content ol { margin:0 0 22px 22px; }
.article-content li { margin-bottom:10px; }
.article-content hr {
  border:none; border-top:1px solid var(--bord);
  margin:44px 0;
}
.article-content blockquote {
  border-left:2px solid var(--green);
  padding:6px 0 6px 20px; margin:24px 0;
  color:var(--text); font-style:italic;
}
.article-figure {
  margin:36px 0;
}
.article-figure img, .article-figure svg {
  display:block; width:100%; height:auto;
  border:1px solid var(--bord); border-radius:var(--r);
  background:var(--bg2);
}
.article-figure figcaption {
  margin-top:12px; font-size:13px; color:var(--muted);
  text-align:center; font-style:italic; line-height:1.6;
}
.article-cta {
  margin-top:48px; padding:32px;
  background:var(--bg2); border:1px solid var(--gbord); border-radius:var(--r);
  text-align:center;
}
.article-cta h3 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:22px; color:var(--text); margin-bottom:8px;
}
.article-cta p { color:var(--text2); margin-bottom:18px; font-size:15px; }
.article-cta .dl-btn { animation:none; opacity:1; font-size:15px; padding:12px 24px; }

/* ── BOTTOM CTA ───────────────────────────── */
.bcta { padding:120px 0; text-align:center; }
.bcta h2 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(34px,5.5vw,64px); letter-spacing:-.03em; line-height:1.04;
  margin-bottom:18px;
}
.bcta h2 span { color:var(--green); }
.bcta p { font-size:17px; color:var(--text2); margin-bottom:44px; }
.bcta .dl-btn { opacity:1; animation:glow 3s ease-in-out infinite; }

/* ── FOOTER ───────────────────────────────── */
footer {
  position:relative; z-index:1;
  border-top: 1px solid var(--bord);
  padding:36px 48px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.footer-l .logo { font-size:16px; }
.footer-copy { font-size:12px; color:var(--muted); margin-top:5px; }
.footer-section { display:flex; flex-direction:column; gap:8px; }
.footer-h {
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text2); margin-bottom:4px;
}
.footer-section a { font-size:13px; color:var(--muted); text-decoration:none; transition:color .18s; }
.footer-section a:hover { color:var(--text); }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:768px) {
  nav { padding:14px 20px; }
  .nav-cta { display:none; }
  .inner { padding:0 20px; }
  .steps { grid-template-columns:1fr; }
  .step-arr { display:none; }
  .feats-grid { grid-template-columns:1fr; }
  .rev-grid { grid-template-columns:1fr; }
  footer { padding:24px 20px; flex-direction:column; gap:24px; }
  .radar-lbl { display:none; }
}