:root{
  --bg:#0a0a0a; --panel:#0f0f10; --text:#f4f4f5; --muted:#a1a1aa; --line:#1f1f22; --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
a{color:inherit;text-decoration:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.section{padding:5rem 0}
.t-center{text-align:center}
.tiny{font-size:.75rem}
.lead{color:#d1d1d4;font-size:1.125rem;margin:1rem 0 0}
.copy{color:#d1d1d4}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.25rem;border-radius:14px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:filter .15s ease,opacity .15s ease,background .15s ease,color .15s ease}
.btn--primary{background:var(--white);color:#0f0f10}
.btn--primary:hover{filter:brightness(0.95)}
.btn--ghost{border:1px solid #2a2a2e;background:transparent;color:var(--text)}
.btn--ghost:hover{background:#151518}
.btn--dark{background:#111114;color:var(--text)}
.btn--block{width:100%}
.btn--sm{padding:.6rem .9rem;font-size:.9rem}

.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(10,10,10,.7)}
.nav__row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand__logo{width:28px;height:28px;border-radius:8px;background:#f4f4f5;color:#0f0f10;display:grid;place-items:center;font-weight:900}
.brand__name{font-weight:600;letter-spacing:-.01em}
.nav__links{display:none;gap:1.5rem;color:#c7c7cb;font-size:.95rem}
.nav__links a:hover{color:#fff}
@media (min-width:768px){.nav__links{display:flex}}

.hero{position:relative;overflow:hidden;padding:6rem 0 3rem}
.hero__bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 35%),
  radial-gradient(circle at 80% 0%, rgba(255,255,255,.04), transparent 40%),
  radial-gradient(circle at 50% 100%, rgba(255,255,255,.05), transparent 40%)}
.hero__title{font-size:clamp(2.25rem, 3.5vw + 1rem, 4rem);line-height:1.05;margin:.75rem 0 0;font-weight:900;letter-spacing:-.02em}
.hero .emph{color:#fff}
.pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #262629;background:rgba(20,20,22,.6);color:#cfcfd4;font-size:.75rem;border-radius:999px;padding:.4rem .7rem}
.dot{width:8px;height:8px;border-radius:999px;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.9);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero__actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
@media (min-width:640px){.hero__actions{flex-direction:row}}
.metrics{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{background:rgba(15,15,16,.8);border:1px solid var(--line);border-radius:16px;padding:1.1rem}
.metric__label{color:var(--muted);font-size:.9rem}
.metric__value{margin-top:.25rem;font-size:1.35rem;font-weight:800}

.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width:768px){.grid--2{grid-template-columns:1.1fr .9fr}.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{background:rgba(15,15,16,.7);border:1px solid var(--line);border-radius:16px;padding:1.25rem}
.card__title{margin:.35rem 0 0;font-weight:800;font-size:1.15rem}

.bullets{margin:1rem 0 0;padding:0 0 0 1rem;color:#d1d1d4}
.bullets li{margin:.4rem 0}
.mockup{border:1px solid var(--line);border-radius:22px;padding:.6rem;background:linear-gradient(180deg, rgba(80,80,85,.15), rgba(40,40,45,.15))}
.mockup__box{aspect-ratio:4/3;border-radius:18px;background:#0a0a0a;display:grid;place-items:center;color:#7a7a82}
.mockup__emoji{font-size:3.5rem;margin-bottom:.5rem}
.mockup__caption{text-align:center;color:#9a9aa2;font-size:.9rem;padding:.8rem 1rem}

.pricing__header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pricecard{position:relative;background:rgba(15,15,16,.7);border:1px solid var(--line);border-radius:22px;padding:1.25rem}
.pricecard .price{font-size:2rem;font-weight:900;margin:.2rem 0 .6rem}
.perks{list-style:none;margin:0;padding:0}
.perks li{color:#d1d1d4;margin:.4rem 0}
.pricecard--highlight{background:#f7f7f8;color:#0f0f10;border-color:#ddd}
.pricecard--highlight .perks li{color:#2b2b33}
.pricecard--highlight .muted{color:#222}
.btn--dark{background:#0f0f10;color:#f7f7f8}
.badge{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:#0f0f10;color:#f7f7f8;border-radius:999px;font-size:.7rem;padding:.25rem .6rem}

.signup{text-align:center;border:1px solid var(--line);border-radius:22px;background:rgba(15,15,16,.7);padding:2rem 1.25rem}
.signup__form{margin-top:1rem;display:flex;flex-direction:column;gap:.8rem;align-items:center;justify-content:center}
.signup__form input{width:100%;max-width:340px;padding:.9rem 1rem;border-radius:14px;background:#111114;border:1px solid #2a2a2e;color:var(--text);outline:none}
.signup__form input:focus{border-color:#3a3a40}

.faq{border:1px solid var(--line);border-radius:16px;background:rgba(15,15,16,.7);padding:1rem}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq p{color:#d1d1d4;margin:.6rem 0 0}

.footer{border-top:1px solid var(--line);padding:2rem 0}
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer__links{display:flex;gap:1.25rem}
.footer__links a{color:#bdbdc5}
.footer__links a:hover{color:#fff}

html{scroll-behavior:smooth}

/* Activity feed chips */
.activity { margin-top: 12px; }
.activity__list { 
  list-style: none; padding: 0; margin: 0; 
  display: flex; flex-wrap: wrap; gap: 10px;
}
.activity__list li {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 10px; border-radius: 10px;
  font-size: 12px; line-height: 1;
}
.activity__list .edition { font-weight: 600; }
.activity__list .serial { opacity: .85; margin-left: 4px; }
.activity__list .dot { opacity: .45; margin: 0 6px; }
.activity__list .ago { opacity: .7; }

/* brand image */
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.brandlogo { width: 28px; height: 28px; display: block; }
.brandname { font-weight: 600; }

.nav__row{
  display:flex;
  align-items:center;
  gap:1rem;
}

.nav__links{
  display:flex;
  gap:1rem;
  align-items:center;
  flex: 1 1 auto;    
  min-width: 0;       
}

.nav__actions{
  display:flex;
  gap:.6rem;
  flex: 0 0 auto;     
}

@media (max-width: 1100px){
  .nav__links{ flex-wrap: wrap; row-gap:.5rem; }
}

@media (max-width: 900px){
  .nav__links{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          
  }
  .nav__links::-webkit-scrollbar{ display:none; } 
}

@media (max-width: 640px){
  .brand__name{ display:none; }         
  .nav__actions .btn{
    padding:.55rem .75rem;
    font-size:.9rem;
  }
}

html { scroll-behavior: smooth; }
:root { --nav-h: 72px; }
.section,
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.container.signup{
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  border-radius: 28px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

.container.signup .h3{
  margin-bottom: .25rem;
}

.container.signup .copy{
  margin: 0 0 1.25rem 0;
  color: rgba(255,255,255,.7);
}

.signupform{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.signupform input[type="email"]{
  width: min(420px, 90vw);
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
}

.signupform input[type="email"]::placeholder{
  color: rgba(255,255,255,.55);
}

.signupform .btn{
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  white-space: nowrap;
}

#emailMsg{
  margin-top: .9rem;
  color: rgba(255,255,255,.65);
}


@media (max-width: 640px){
  .signupform{ flex-direction: column; }
  .signupform input[type="email"],
  .signup__form .btn{ width: 100%; }
}