/* ══════════════════════════════════════
   Proompt — ompt.pro
   style.css  
   ══════════════════════════════════════ */

:root {
  --bg: #08080a;
  --sf: #111114;
  --sf2: #1a1a1f;
  --bd: #28282f;
  --bdh: #3a3a44;
  --tx: #e8e8ed;
  --tx2: #8888a0;
  --tx3: #55556a;
  --ac: #c4f042;
  --acg: rgba(196,240,66,0.12);
  --ac2: #42d4f0;
  --ac3: #f042c4;
  --red: #ff5f57;
  --ylw: #ffbd2e;
  --grn: #28c840;
  --ff: 'DM Sans', system-ui, sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --fs: 'Instrument Serif', Georgia, serif;
  --mw: 1100px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--tx); font-family:var(--ff); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
button { font-family:inherit; }

/* ── Wrap ── */
.w { width:100%; max-width:var(--mw); margin:0 auto; padding:0 20px; }

/* ── Nav ── */
.n { position:fixed; top:0; left:0; right:0; z-index:100; border-bottom:1px solid var(--bd); backdrop-filter:blur(20px); background:rgba(8,8,10,0.8); transition:border-color .3s; }
.n-in { display:flex; align-items:center; justify-content:space-between; height:56px; }
.n-logo { font-family:var(--fm); font-size:16px; font-weight:700; text-decoration:none; letter-spacing:-0.5px; display:flex; align-items:baseline; gap:5px; flex-shrink:0; }
.n-logo b { color:var(--ac); font-weight:700; }
.n-logo span { color:var(--tx3); font-weight:300; font-size:11px; }
.n-links { display:flex; align-items:center; gap:24px; }
.n-links a { font-size:13px; color:var(--tx2); text-decoration:none; transition:color .2s; }
.n-links a:hover, .n-links a.on { color:var(--tx); }
.n-cta { background:var(--ac)!important; color:var(--bg)!important; padding:6px 16px; border-radius:5px; font-weight:600; font-size:12px!important; }
.n-cta:hover { opacity:.85; }
.n-tog { display:none; background:none; border:none; color:var(--tx); font-size:22px; cursor:pointer; padding:4px; line-height:1; }

/* Mobile nav */
.n-mob { display:none; position:fixed; inset:0; top:56px; background:var(--bg); z-index:99; flex-direction:column; align-items:center; padding:36px 20px; gap:20px; border-top:1px solid var(--bd); }
.n-mob.open { display:flex; }
.n-mob a { font-size:17px; color:var(--tx2); text-decoration:none; padding:6px 0; }
.n-mob a:hover { color:var(--tx); }
.n-mob .n-cta { margin-top:8px; padding:11px 24px; font-size:14px!important; display:inline-block; }

/* ── Buttons ── */
.btn { display:inline-block; padding:12px 26px; border-radius:7px; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:all .2s; text-align:center; }
.bp { background:var(--ac); color:var(--bg); }
.bp:hover { box-shadow:0 6px 24px var(--acg); transform:translateY(-1px); }
.bg { background:transparent; color:var(--tx); border:1px solid var(--bd); }
.bg:hover { border-color:var(--bdh); background:var(--sf); }

/* ── Section ── */
.sec { padding:88px 0; }
.sl { font-family:var(--fm); font-size:11px; color:var(--ac); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
.st { font-family:var(--fs); font-size:clamp(30px,4.5vw,48px); font-weight:400; line-height:1.1; letter-spacing:-1px; margin-bottom:16px; max-width:620px; }
.st em { font-style:italic; color:var(--ac); }
.sd { font-size:16px; line-height:1.7; color:var(--tx2); max-width:520px; margin-bottom:40px; }

/* ── Hero ── */
.hero { padding:130px 0 50px; text-align:center; position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 50% 45% at 50% 35%,#000,transparent); opacity:.2; pointer-events:none; }
.hero-gl { position:absolute; top:8%; left:50%; transform:translateX(-50%); width:420px; height:420px; background:radial-gradient(circle,var(--acg),transparent 70%); filter:blur(70px); pointer-events:none; }
.hero .w { position:relative; }
.hero-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 13px; border:1px solid var(--bd); border-radius:100px; font-family:var(--fm); font-size:10px; color:var(--tx2); background:var(--sf); margin-bottom:28px; }
.hero-pill i { width:5px; height:5px; border-radius:50%; background:var(--ac); animation:pulse 2s ease-in-out infinite; }
.hero h1 { font-family:var(--fs); font-size:clamp(40px,7.5vw,96px); font-weight:400; line-height:.95; letter-spacing:-2px; margin-bottom:20px; }
.hero h1 em { font-style:italic; color:var(--ac); }
.hero-sub { max-width:480px; margin:0 auto 32px; font-size:16px; line-height:1.7; color:var(--tx2); }
.hero-btn { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ── Page Header ── */
.ph { padding:110px 0 40px; text-align:center; border-bottom:1px solid var(--bd); }
.ph h1 { font-family:var(--fs); font-size:clamp(32px,5.5vw,56px); font-weight:400; line-height:1; letter-spacing:-1px; margin-bottom:14px; }
.ph h1 em { font-style:italic; color:var(--ac); }
.ph p { font-size:16px; color:var(--tx2); max-width:480px; margin:0 auto; line-height:1.6; }

/* ── Cards ── */
.cd { background:var(--sf); border:1px solid var(--bd); border-radius:12px; padding:28px 24px; transition:all .3s; }
.cd:hover { border-color:var(--bdh); transform:translateY(-2px); box-shadow:0 10px 36px rgba(0,0,0,.22); }
.cd-hl { border-color:rgba(196,240,66,.18); background:linear-gradient(135deg,var(--sf),rgba(196,240,66,.03)); }
.cd-ico { width:40px; height:40px; border-radius:9px; background:var(--sf2); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:16px; }
.cd h3 { font-size:16px; font-weight:600; margin-bottom:8px; }
.cd p { font-size:13px; line-height:1.65; color:var(--tx2); }
.cd .cli { margin-top:12px; padding:9px 12px; background:var(--sf2); border:1px solid var(--bd); border-radius:5px; font-family:var(--fm); font-size:10px; color:var(--tx3); overflow-x:auto; white-space:nowrap; }
.cd .cli b { color:var(--ac); font-weight:400; }

/* ── Grids ── */
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* ── Split ── */
.sp { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.sp-t h3 { font-family:var(--fs); font-size:clamp(24px,3vw,30px); font-weight:400; line-height:1.2; margin-bottom:14px; }
.sp-t h3 em { font-style:italic; color:var(--ac); }
.sp-t>p { font-size:14px; line-height:1.7; color:var(--tx2); margin-bottom:16px; }
.cl { list-style:none; display:flex; flex-direction:column; gap:9px; }
.cl li { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tx2); }
.cl li b { color:var(--tx); font-weight:500; }
.ck { width:20px; height:20px; border-radius:4px; background:rgba(196,240,66,.07); border:1px solid rgba(196,240,66,.18); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; color:var(--ac); }

/* ── Terminal ── */
.tm { background:var(--sf); border:1px solid var(--bd); border-radius:10px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.35); }
.tm-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--bd); background:var(--sf2); }
.tm-d { width:10px; height:10px; border-radius:50%; }
.tm-d:nth-child(1){background:var(--red)} .tm-d:nth-child(2){background:var(--ylw)} .tm-d:nth-child(3){background:var(--grn)}
.tm-t { flex:1; text-align:center; font-family:var(--fm); font-size:10px; color:var(--tx3); }
.tm-b { padding:18px; font-family:var(--fm); font-size:11px; line-height:2; overflow-x:auto; }
.tc0{color:var(--tx3)} .tc1{color:var(--tx2)} .tc2{color:var(--ac2)} .tc3{color:var(--ac)} .tc4{color:var(--ac3)} .tc5{color:var(--grn)}
.tcur { display:inline-block; width:6px; height:13px; background:var(--ac); animation:blink 1s step-end infinite; vertical-align:middle; margin-left:2px; }

/* ── Tree ── */
.tr { background:var(--sf); border:1px solid var(--bd); border-radius:12px; padding:24px 20px; font-family:var(--fm); font-size:11px; line-height:2.1; overflow:hidden; }
.tn{white-space:nowrap} .i1{padding-left:18px} .i2{padding-left:36px} .i3{padding-left:54px}
.badge { display:inline-block; padding:1px 6px; border-radius:3px; font-size:8px; font-weight:600; margin-left:5px; vertical-align:middle; letter-spacing:.3px; }
.bm{background:rgba(196,240,66,.1);color:var(--ac)} .be{background:rgba(66,212,240,.1);color:var(--ac2)} .br{background:rgba(240,66,196,.1);color:var(--ac3)}

/* ── Adherence ── */
.adh { background:var(--sf); border:1px solid var(--bd); border-radius:12px; overflow:hidden; }
.adh-h { padding:12px 16px; border-bottom:1px solid var(--bd); background:var(--sf2); display:flex; align-items:center; justify-content:space-between; font-family:var(--fm); font-size:11px; color:var(--tx2); }
.adh-sc { font-weight:700; color:var(--ac); }
.adh-bd { padding:18px; }
.adh-r { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid rgba(42,42,50,.35); font-family:var(--fm); font-size:11px; }
.adh-r:last-of-type{border-bottom:none}
.adh-d { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dg{background:var(--grn)} .dy{background:var(--ylw)} .dr{background:var(--red)}
.adh-l { color:var(--tx2); flex:1; min-width:0; }
.adh-bar { width:70px; height:3px; background:var(--sf2); border-radius:2px; overflow:hidden; flex-shrink:0; }
.adh-f { height:100%; border-radius:2px; }
.fg{background:var(--grn)} .fy{background:var(--ylw)} .fr{background:var(--red)}
.adh-v { width:32px; text-align:right; font-weight:500; flex-shrink:0; }
.vg{color:var(--grn)} .vy{color:var(--ylw)} .vr{color:var(--red)}
.adh-al { margin-top:12px; padding:10px 12px; background:rgba(255,95,87,.05); border:1px solid rgba(255,95,87,.12); border-radius:6px; font-family:var(--fm); font-size:10px; line-height:1.8; color:var(--tx3); }
.adh-al strong{color:var(--red);font-weight:600} .adh-al .fx{color:var(--ac)}

/* ── Audience ── */
.aud { padding:52px 0; border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); }
.aud-r { display:flex; justify-content:space-between; text-align:center; gap:20px; }
.aud-i { flex:1; }
.aud-n { font-family:var(--fs); font-size:36px; color:var(--ac); font-style:italic; }
.aud-lb { font-size:12px; color:var(--tx2); margin-top:3px; line-height:1.4; }

/* ── CTA ── */
.cta { padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-gl { position:absolute; bottom:10%; left:50%; transform:translateX(-50%); width:360px; height:360px; background:radial-gradient(circle,var(--acg),transparent 70%); filter:blur(70px); pointer-events:none; }
.cta .w{position:relative}
.cta h2 { font-family:var(--fs); font-size:clamp(30px,5vw,54px); font-weight:400; line-height:1.05; letter-spacing:-1px; margin-bottom:14px; }
.cta h2 em{font-style:italic;color:var(--ac)}
.cta>div>p { font-size:16px; color:var(--tx2); margin-bottom:28px; max-width:400px; margin-left:auto; margin-right:auto; line-height:1.6; }
.cta-f { display:flex; gap:8px; max-width:380px; margin:0 auto; }
.cta-f input { flex:1; padding:11px 14px; background:var(--sf); border:1px solid var(--bd); border-radius:7px; font-family:var(--ff); font-size:13px; color:var(--tx); outline:none; min-width:0; }
.cta-f input::placeholder{color:var(--tx3)}
.cta-f input:focus{border-color:var(--ac)}

/* ── Steps ── */
.steps { display:flex; flex-direction:column; gap:14px; }
.stp { display:flex; gap:12px; align-items:flex-start; }
.stp-n { flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-size:10px; color:var(--ac); background:var(--sf); }
.stp-t { font-size:13px; line-height:1.6; color:var(--tx2); padding-top:2px; }
.stp-t strong{color:var(--tx);font-weight:500}

/* ── More ── */
.more { margin-top:24px; text-align:center; font-family:var(--fm); font-size:11px; color:var(--tx3); }
.more b{color:var(--ac);font-weight:400}

/* ── Footer ── */
.ft { border-top:1px solid var(--bd); padding:28px 0; }
.ft-in { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.ft-l { font-family:var(--fm); font-size:11px; color:var(--tx3); line-height:1.9; }
.ft-l a{text-decoration:none;transition:color .2s} .ft-l a:hover{color:var(--tx2)}
.ft-r { display:flex; gap:18px; }
.ft-r a { color:var(--tx3); text-decoration:none; font-size:12px; transition:color .2s; }
.ft-r a:hover{color:var(--tx2)}

/* ── Animations ── */
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Responsive ── */
@media(max-width:768px){
  .n-links{display:none} .n-tog{display:block}
  .hero{padding:105px 0 36px}
  .hero h1{font-size:clamp(32px,10vw,48px);letter-spacing:-1px}
  .hero-sub{font-size:14px}
  .hero-btn{flex-direction:column;align-items:center}
  .hero-btn .btn{width:100%;max-width:240px}
  .sec{padding:56px 0}
  .st{font-size:clamp(24px,6.5vw,32px);margin-bottom:12px}
  .sd{font-size:14px;margin-bottom:28px}
  .g2,.g3{grid-template-columns:1fr}
  .sp{grid-template-columns:1fr;gap:28px}
  .cd{padding:22px 18px}
  .tm-b{font-size:9.5px;padding:14px}
  .tr{font-size:9.5px;padding:18px 14px}
  .i2{padding-left:26px} .i3{padding-left:40px}
  .aud-r{flex-direction:column;gap:20px} .aud-n{font-size:28px}
  .cta{padding:64px 0}
  .cta h2{font-size:clamp(26px,7vw,40px)}
  .cta-f{flex-direction:column}
  .ph{padding:90px 0 28px} .ph h1{font-size:clamp(28px,7vw,42px)}
  .ft-in{flex-direction:column;align-items:center;text-align:center}
  .sp-t h3{font-size:22px}
  .adh-bar{width:50px}
}
@media(min-width:769px) and (max-width:1024px){
  .g3{grid-template-columns:repeat(2,1fr)}
}