*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --red:      rgb(255, 51, 51);
  --red-dim:  rgba(255, 51, 51, 0.10);
  --dark1:    rgb(26,  26,  26);
  --dark2:    rgb(51,  51,  51);
  --dark3:    rgb(102, 102, 102);
  --dark4:    rgb(153, 153, 153);
  --bg:       #080808;
  --bg2:      #0f0f0f;
  --bg3:      #1a1a1a;
  --border:   #181818;
  --border2:  #252525;
  --text:     #e4e4dc;
  --muted:    rgb(102, 102, 102);
  --mono:     'DM Mono', monospace;
  --display:  'Bebas Neue', sans-serif;
  --body:     'DM Sans', sans-serif;
  --r:        4px;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--body); font-weight: 300; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 900;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.055) 2px,rgba(0,0,0,0.055) 4px);
}
.container { max-width: 460px; margin: 0 auto; padding: 0 20px; }
hr { border: none; border-top: 1px solid var(--border); }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-inner {
  max-width: 460px; margin: 0 auto; padding: 0 20px;
  height: 50px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.nav-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 8px var(--red); animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 8px var(--red)} 50%{opacity:.45;box-shadow:0 0 3px var(--red)} }
.nav-cta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red);
  border: 1px solid rgba(255,51,51,0.5); padding: 7px 16px; border-radius: var(--r);
  text-decoration: none; transition: background .15s, color .15s;
}
.nav-cta:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* HERO */
.hero { padding: 120px 0 52px; }
.hero-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.hero-tag::before { content:''; display:block; width:20px; height:1px; background:var(--border2); }
.hero-title {
  font-family: var(--display); font-size: clamp(68px, 21vw, 92px);
  line-height: .87; letter-spacing: .01em; margin-bottom: 10px;
}
.hero-title .t1 { color: var(--text); display:block; }
.hero-title .t2 { color: var(--red); display:block; }
.hero-title .t3 { display:block; color:transparent; -webkit-text-stroke:1px var(--border2); }
.hero-sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .08em; margin: 20px 0 32px; line-height: 1.85;
}
.hero-sub strong { color: var(--dark4); font-weight: 400; }
.hero-actions { display: flex; flex-direction: column; gap: 14px; }
.btn-appstore {
  display: flex; align-items: center; gap: 14px;
  background: var(--red); color: #fff;
  padding: 16px 22px; border-radius: var(--r);
  text-decoration: none; transition: opacity .15s, transform .15s;
}
.btn-appstore:hover { opacity: .88; transform: translateY(-1px); }
.btn-appstore-text { display: flex; flex-direction: column; }
.btn-appstore-sub { font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; opacity:.7; }
.btn-appstore-main { font-family:var(--display); font-size:22px; letter-spacing:.04em; line-height:1; }
.hero-meta { display:flex; gap:16px; flex-wrap:wrap; }
.hero-meta-item {
  font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:5px;
}
.hero-meta-item::before { content:''; display:block; width:4px; height:4px; background:var(--border2); border-radius:50%; }

/* SCREENSHOTS */
.screenshots { padding: 52px 0; }
.section-eyebrow { font-family:var(--mono); font-size:9px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.shot-wide {
  width:100%; aspect-ratio:1014/474; background:var(--bg3);
  border:1px solid var(--border); border-radius:24px; overflow:hidden;
  position:relative; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
}
.shot-wide img { width:100%; height:100%; object-fit:cover; display:block; }
.shot-wide::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,51,51,0.06) 1px, transparent 1px);
  background-size:18px 18px;
}
.shot-ph { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--border2); position:relative; z-index:1; }
.shot-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shot-sq {
  aspect-ratio:1; background:var(--bg3); border:1px solid var(--border);
  border-radius:24px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.shot-sq img { width:100%; height:100%; object-fit:cover; }
.shot-sq::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,51,51,0.05) 1px, transparent 1px);
  background-size:14px 14px;
}

/* TICKER */
.ticker { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:11px 0; background:var(--bg2); }
.ticker-inner { display:flex; white-space:nowrap; animation:tick 22s linear infinite; }
.ticker-inner:hover { animation-play-state:paused; }
.ti { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:0 28px; flex-shrink:0; }
.ti.a { color:var(--red); }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTION TYPOGRAPHY */
.s-head { font-family:var(--display); font-size:clamp(44px,13.5vw,62px); line-height:.9; letter-spacing:.01em; margin-bottom:8px; }
.s-head em { font-style:normal; color:var(--red); }
.s-desc { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:32px; max-width:380px; }

/* WIDGET TABS */
.widgets { padding: 56px 0; }
.cat-tabs {
  display:flex; margin-bottom:28px;
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
}
.cat-tab {
  flex:1; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  background:none; border:none; border-right:1px solid var(--border);
  color:var(--muted); padding:10px 6px; cursor:pointer; text-align:center;
  transition:background .15s, color .15s;
}
.cat-tab:last-child { border-right:none; }
.cat-tab.active { background:var(--red-dim); color:var(--red); }
.cat-panel { display:none; }
.cat-panel.active { display:block; }
.widget-list { display:flex; flex-direction:column; gap:0; }
.widget-item {
  padding:16px 0; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:14px;
}
.widget-item:first-child { border-top:1px solid var(--border); }
.widget-icon {
  width:32px; height:32px; border-radius:6px;
  background:var(--red-dim); border:1px solid rgba(255,51,51,0.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.widget-icon svg { width:14px; height:14px; }
.widget-info h4 { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text); margin-bottom:3px; letter-spacing:.02em; }
.widget-info p { font-size:12px; color:var(--muted); line-height:1.55; }
.widget-badge {
  display:inline-block; font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--red-dim); color:var(--red); border:1px solid rgba(255,51,51,0.18);
  padding:2px 6px; border-radius:2px; margin-top:5px;
}

/* DAYLOADER */
.dayloader { padding: 56px 0; }
.dl-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:28px 24px; position:relative; overflow:hidden;
}
.dl-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
}
.dl-label { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:16px; }
.dl-title { font-family:var(--display); font-size:42px; line-height:.95; color:var(--text); margin-bottom:12px; letter-spacing:.02em; }
.dl-desc { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:24px; }
.progress-demo { margin-top:8px; }
.progress-track { width:100%; height:4px; background:var(--border2); border-radius:2px; overflow:hidden; margin-bottom:8px; }
.progress-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,#4caf50,#ffeb3b,#ff5722);
  animation:fillP 3.5s ease-in-out infinite alternate;
}
@keyframes fillP { from{width:28%} to{width:80%} }
.progress-meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.1em; }
.dl-features { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.dl-features li { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.dl-features li::before { content:''; display:block; width:4px; height:4px; background:var(--red); border-radius:50%; flex-shrink:0; }

/* FEATURES GRID */
.features { padding: 56px 0; }
.feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.feat-card { background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:18px 16px; }
.feat-icon { font-family:var(--mono); font-size:16px; color:var(--red); margin-bottom:10px; line-height:1; }
.feat-card h4 { font-family:var(--mono); font-size:11px; font-weight:500; color:var(--text); margin-bottom:5px; letter-spacing:.04em; }
.feat-card p { font-size:11px; color:var(--muted); line-height:1.55; }

/* SETUP */
.setup { padding: 56px 0; }
.steps { display:flex; flex-direction:column; gap:0; margin-top:28px; }
.step { padding:18px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; }
.step:first-child { border-top:1px solid var(--border); }
.step-num { font-family:var(--mono); font-size:10px; color:var(--red); letter-spacing:.1em; padding-top:2px; }
.step-body h4 { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text); margin-bottom:3px; }
.step-body p { font-size:12px; color:var(--muted); line-height:1.55; }

/* SUPPORT */
.support { padding: 64px 0; }
.support-cards { display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.support-card {
  display:block; text-decoration:none; border:1px solid var(--border);
  border-radius:6px; padding:24px; background:var(--bg2);
  transition:border-color .2s, background .2s; position:relative;
}
.support-card:hover { border-color:rgba(255,51,51,0.3); background:var(--bg3); }
.support-card-label { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:10px; }
.support-card-label.red { color:var(--red); }
.support-card-label.gray { color:var(--muted); }
.support-card h3 { font-family:var(--display); font-size:34px; color:var(--text); line-height:1; margin-bottom:6px; letter-spacing:.02em; }
.support-card p { font-size:12px; color:var(--muted); line-height:1.6; }
.support-arrow { position:absolute; top:24px; right:24px; font-size:16px; color:var(--muted); transition:color .15s, transform .15s; }
.support-card:hover .support-arrow { color:var(--red); transform:translate(2px,-2px); }

/* FAQ */
.faq { padding: 56px 0; }
.faq-list { margin-top:24px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-btn {
  width:100%; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--text); text-align:left; padding:17px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-toggle { color:var(--muted); font-size:18px; transition:transform .2s, color .2s; flex-shrink:0; }
.faq-item.open .faq-toggle { transform:rotate(45deg); color:var(--red); }
.faq-body { font-size:12px; color:var(--muted); line-height:1.7; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s; }
.faq-item.open .faq-body { max-height:200px; padding-bottom:17px; }

/* FOOTER */
footer { border-top:1px solid var(--border); padding:40px 0 60px; }
.foot { max-width:460px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:20px; }
.foot-logo { font-family:var(--display); font-size:40px; line-height:1; color:var(--text); letter-spacing:.02em; }
.foot-logo span { color:var(--red); }
.foot-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
.foot-links a { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .15s; }
.foot-links a:hover { color:var(--text); }
.foot-copy { font-family:var(--mono); font-size:9px; color:var(--border2); letter-spacing:.12em; text-transform:uppercase; }

/* REVEAL */
.r { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.r.v { opacity:1; transform:none; }
.blink { display:inline-block; width:2px; height:.8em; background:var(--red); vertical-align:middle; margin-left:2px; animation:blink 1.1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }