*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
:root {
  --bg:#060609;
  --s1:rgba(255, 255, 255, 0.035);
  --s2:rgba(255, 255, 255, 0.06);
  --b:rgba(255, 255, 255, 0.08);
  --b2:rgba(255, 255, 255, 0.14);
  --b3:rgba(255, 255, 255, 0.22);
  --acc:#A8FF00;
  --acc-d:rgba(168, 255, 0, 0.12);
  --txt:#fff;
  --txt2:rgba(255, 255, 255, 0.48);
  --txt3:rgba(255, 255, 255, 0.2);
  --mono:'JetBrains Mono', monospace;
  --sans:'Inter', sans-serif;
  --r:14px;
}
html {
  scroll-behavior:smooth
}
body {
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img, video {
  display:block;
  width:100%
}
nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid var(--b);
  background:rgba(6, 6, 9, 0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.logo {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  font-weight:500
}
.logo img {
  width:20px;
  height:20px;
  border-radius:5px
}
.nav-c {
  display:flex;
  align-items:center
}
.na {
  font-size:13px;
  color:var(--txt2);
  padding:6px 14px;
  border-radius:6px;
  transition:color .12s
}
.na:hover {
  color:var(--txt)
}
.nav-r {
  display:flex;
  align-items:center;
  gap:8px
}
.n-ghost {
  font-size:13px;
  color:var(--txt2);
  padding:6px 12px;
  transition:color .12s
}
.n-ghost:hover {
  color:var(--txt)
}
.n-cta {
  font-size:13px;
  font-weight:500;
  background:var(--txt);
  color:#060609;
  padding:7px 16px;
  border-radius:7px;
  transition:opacity .12s
}
.n-cta:hover {
  opacity:.85
}
/* HERO */
.hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:54px 24px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.h-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse 65% 50% at 50% -5%, rgba(168, 255, 0, 0.08) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 15% 70%, rgba(80, 100, 255, 0.04) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 85% 70%, rgba(255, 80, 120, 0.03) 0%, transparent 50%);
}
.h-grid {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--b) 1px, transparent 1px), linear-gradient(90deg, var(--b) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 68%);
  opacity:.45;
}
.h-inner {
  position:relative;
  z-index:1;
  width:100%;
  max-width:900px;
  padding-top:40px
}
h1 {
  font-size:clamp(32px, 4.2vw, 56px);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:14px;
}
h1 em {
  font-style:normal;
  background:linear-gradient(160deg, var(--acc) 20%, rgba(168, 255, 0, .55) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
h1 .d {
  color:rgba(255, 255, 255, .32)
}
.h-sub {
  font-size:15px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.6;
  max-width:480px;
  margin:0 auto 22px
}
.h-btns {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:36px;
  flex-wrap:wrap
}
.btn-p {
  font-size:14px;
  font-weight:500;
  background:var(--acc);
  color:#060609;
  padding:11px 24px;
  border-radius:8px;
  transition:opacity .12s, transform .1s;
  letter-spacing:-.01em
}
.btn-p:hover {
  opacity:.87;
  transform:translateY(-1px)
}
.btn-o {
  font-size:14px;
  color:var(--txt2);
  padding:11px 20px;
  border-radius:8px;
  border:1px solid var(--b2);
  transition:color .12s, border-color .12s
}
.btn-o:hover {
  color:var(--txt);
  border-color:var(--b3)
}
/* HERO SCREENSHOT */
.h-shot {
  width:100%;
  max-width:1080px;
  margin:0 auto;
  position:relative
}
.h-shot-glow-line {
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(168, 255, 0, .45), transparent)
}
.h-shot-glow {
  position:absolute;
  top:-24px;
  left:15%;
  right:15%;
  height:48px;
  background:var(--acc);
  filter:blur(48px);
  opacity:.09
}
.frame {
  border-radius:var(--r) var(--r) 0 0;
  border:1px solid var(--b2);
  border-bottom:none;
  overflow:hidden
}
.frame-bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  background:rgba(0, 0, 0, .55);
  border-bottom:1px solid var(--b)
}
.dot {
  width:10px;
  height:10px;
  border-radius:50%
}
.dot.r {
  background:#FF5F57
}
.dot.y {
  background:#FEBC2E
}
.dot.g {
  background:#28C840
}
.frame-t {
  font-family:var(--mono);
  font-size:11px;
  color:var(--txt3);
  flex:1;
  text-align:center
}
/* placeholder util */
.ph {
  background:var(--s1);
  border:1px dashed rgba(255, 255, 255, .12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--txt3);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase
}
/* DIVIDER */
hr {
  border:none;
  border-top:1px solid var(--b)
}
/* SECTIONS */
.wrap {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px
}
.sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto
}
.sec-tag {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  color:var(--txt3);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:18px
}
h2 {
  font-size:clamp(32px, 4.5vw, 58px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.02;
  margin-bottom:14px
}
h2 em {
  font-style:normal;
  color:var(--acc)
}
.sec-sub {
  font-size:17px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.7;
  max-width:500px;
  margin-bottom:60px
}
/* FEATURE ROWS — alternating screenshot + text */
.feat-rows {
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--b)
}
.feat-row {
  background:var(--bg);
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px;
}
.feat-row.rev {
  direction:rtl
}
.feat-row.rev > * {
  direction:ltr
}
.feat-visual {
  position:relative;
  overflow:hidden;
  background:var(--s1);
  border-right:1px solid var(--b);
}
.feat-row.rev .feat-visual {
  border-right:none;
  border-left:1px solid var(--b)
}
.feat-visual img, .feat-visual video {
  width:100%;
  height:100%;
  object-fit:cover
}
.feat-visual .ph {
  width:100%;
  height:100%;
  min-height:320px
}
.feat-text {
  padding:52px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.feat-num {
  font-family:var(--mono);
  font-size:10px;
  color:var(--txt3);
  letter-spacing:.1em;
  margin-bottom:20px
}
.feat-title {
  font-size:clamp(22px, 2.8vw, 32px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px
}
.feat-desc {
  font-size:15px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.7
}
.feat-tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:24px
}
.feat-tag {
  font-family:var(--mono);
  font-size:10px;
  padding:3px 9px;
  border-radius:4px;
  border:1px solid var(--b2);
  color:var(--txt2);
  letter-spacing:.04em
}
/* YR LANG SECTION */
.yr-sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.yr-code {
  background:var(--s1);
  border:1px solid var(--b);
  border-radius:var(--r);
  overflow:hidden;
}
.yr-code-bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-bottom:1px solid var(--b);
  background:rgba(0, 0, 0, .3)
}
.yr-code-body {
  padding:20px 24px;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.9
}
.cl {
  display:flex;
  gap:16px
}
.ln {
  color:var(--txt3);
  min-width:18px;
  text-align:right;
  font-size:11px;
  user-select:none
}
.kw {
  color:#C792EA
}
.fn {
  color:#82AAFF
}
.st {
  color:#C3E88D
}
.tg {
  color:#F07178
}
.at {
  color:#FFCB6B
}
.cm {
  color:rgba(255, 255, 255, .22);
  font-style:italic
}
.hl {
  background:rgba(168, 255, 0, .05);
  margin:0 -24px;
  padding:0 24px;
  border-radius:3px
}
/* LOGOS / SOCIAL PROOF */
.proof {
  border-top:1px solid var(--b);
  border-bottom:1px solid var(--b);
  padding:40px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  flex-wrap:wrap;
}
.proof-stat {
  text-align:center
}
.proof-n {
  font-size:36px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1
}
.proof-l {
  font-size:13px;
  color:var(--txt2);
  margin-top:4px;
  font-weight:300
}
.proof-sep {
  width:1px;
  height:40px;
  background:var(--b2)
}
/* TESTIMONIAL */
.testimonials {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto
}
.t-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:60px
}
.t-card {
  background:var(--s1);
  border:1px solid var(--b);
  border-radius:var(--r);
  padding:28px;
  transition:border-color .15s, background .15s;
}
.t-card:hover {
  border-color:var(--b2);
  background:var(--s2)
}
.t-text {
  font-size:14px;
  color:var(--txt2);
  line-height:1.7;
  font-weight:300;
  margin-bottom:20px
}
.t-author {
  display:flex;
  align-items:center;
  gap:10px
}
.t-avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--s2);
  border:1px solid var(--b2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  flex-shrink:0
}
.t-name {
  font-size:13px;
  font-weight:500
}
.t-role {
  font-size:12px;
  color:var(--txt3)
}
/* PLANS */
.plans-sec {
  padding:112px 24px;
  max-width:1080px;
  margin:0 auto
}
.plans {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--b);
  border:1px solid var(--b);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:60px
}
.plan {
  background:var(--bg);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:background .15s
}
.plan:hover {
  background:var(--s1)
}
.plan.hi {
  background:var(--s1)
}
.plan-line {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--acc)
}
.pname {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  color:var(--txt3);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:18px
}
.pprice {
  font-size:38px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1
}
.pprice sub {
  font-size:14px;
  font-weight:400;
  color:var(--txt2);
  letter-spacing:0
}
.pdesc {
  font-size:13px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.5;
  margin:12px 0 20px;
  flex:1
}
.phr {
  height:1px;
  background:var(--b);
  margin-bottom:18px
}
.pf {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:24px
}
.pf li {
  font-size:12px;
  color:var(--txt2);
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-weight:300;
  line-height:1.4
}
.pf li::before {
  content:'↗';
  color:var(--acc);
  font-size:10px;
  flex-shrink:0;
  margin-top:2px;
  font-family:var(--mono)
}
.pf li.no {
  color:var(--txt3)
}
.pf li.no::before {
  content:'—';
  color:var(--txt3)
}
.pbtn {
  display:block;
  text-align:center;
  padding:10px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  border:1px solid var(--b2);
  color:var(--txt2);
  transition:all .12s;
  margin-top:auto
}
.pbtn:hover {
  border-color:var(--b3);
  color:var(--txt)
}
.pbtn.a {
  background:var(--acc);
  color:#060609;
  border-color:transparent;
  font-weight:600
}
.pbtn.a:hover {
  opacity:.87
}
/* CTA */
.cta {
  padding:160px 24px;
  text-align:center;
  border-top:1px solid var(--b);
  position:relative;
  overflow:hidden
}
.cta::before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:40%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(168, 255, 0, .4), transparent)
}
.cta-glow {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:600px;
  height:280px;
  background:radial-gradient(ellipse at top, rgba(168, 255, 0, .06) 0%, transparent 65%);
  pointer-events:none
}
.cta-inner {
  max-width:600px;
  margin:0 auto;
  position:relative
}
.cta h2 {
  margin-bottom:16px
}
.cta-p {
  font-size:17px;
  color:var(--txt2);
  font-weight:300;
  line-height:1.65;
  margin-bottom:36px
}
footer {
  border-top:1px solid var(--b);
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.fl {
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--txt2)
}
.fl img {
  width:16px;
  height:16px;
  border-radius:4px;
  opacity:.5
}
.flinks {
  display:flex;
  gap:20px;
  list-style:none
}
.flinks a {
  font-size:12px;
  color:var(--txt3);
  transition:color .12s
}
.flinks a:hover {
  color:var(--txt2)
}
.fc {
  font-size:12px;
  color:var(--txt3)
}
@media(max-width:900px) {
  nav {
    padding:0 16px
  }
  .nav-c {
    display:none
  }
  .feat-row {
    grid-template-columns:1fr
  }
  .feat-row.rev {
    direction:ltr
  }
  .feat-visual {
    border-right:none !important;
    border-left:none !important;
    border-bottom:1px solid var(--b)
  }
  .feat-text {
    padding:36px 28px
  }
  .yr-sec {
    grid-template-columns:1fr;
    gap:40px
  }
  .t-grid {
    grid-template-columns:1fr
  }
  .plans {
    grid-template-columns:1fr 1fr
  }
  .proof {
    gap:28px
  }
  .proof-sep {
    display:none
  }
  footer {
    flex-direction:column;
    gap:16px;
    text-align:center;
    padding:24px 16px
  }
  .flinks {
    flex-wrap:wrap;
    justify-content:center
  }
}
@media(max-width:560px) {
  .plans {
    grid-template-columns:1fr
  }
  h1 {
    font-size:52px
  }
  h2 {
    font-size:34px
  }
  .t-grid {
    grid-template-columns:1fr
  }
}