/* ATLAS landing — NoLimitDigital
   Dark "mission control" sistem: deep slate + signal teal, mono za podatke. */

:root{
  --bg:#0B0F12; --surface:#141A1F; --surface-2:#1B232A; --surface-3:#222C34;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --txt:#E8EDF0; --mut:#8A99A3; --mut-2:#5F6E78;
  --teal:#2DD4A7; --teal-dim:#1FB287; --teal-ghost:rgba(45,212,167,.12);
  --amber:#F4A93B; --red:#E5564B;
  --maxw:1120px;
  --r:14px; --r-sm:10px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; font-weight:600; line-height:1.08; letter-spacing:-.02em; margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.muted{color:var(--mut)}
.teal{color:var(--teal)}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(11,15,18,.72); border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{display:flex; align-items:center; gap:11px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:20px; letter-spacing:.02em}
.logo .lm{width:30px; height:30px}
.logo small{font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:11px; color:var(--mut); letter-spacing:.04em}
.nav{display:flex; align-items:center; gap:30px}
.nav a.link{font-size:14.5px; color:var(--mut); transition:color .15s}
.nav a.link:hover{color:var(--txt)}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:15px;
  padding:11px 20px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .12s, background .15s, border-color .15s;
  font-family:inherit;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--teal); color:#04261D; font-weight:600}
.btn-primary:hover{background:#36e3b4}
.btn-ghost{border-color:var(--line-2); color:var(--txt); background:transparent}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-lg{padding:15px 26px; font-size:16px}

/* ---------- hero ---------- */
.hero{position:relative; padding:84px 0 72px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal);
  border:1px solid var(--teal-ghost); background:var(--teal-ghost);
  padding:6px 13px; border-radius:99px; margin-bottom:24px;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(45,212,167,.6); animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(45,212,167,.55)}70%{box-shadow:0 0 0 9px rgba(45,212,167,0)}100%{box-shadow:0 0 0 0 rgba(45,212,167,0)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.hero h1{font-size:clamp(38px,5.4vw,62px)}
.hero h1 .g{color:var(--teal)}
.hero p.lede{font-size:19px; color:var(--mut); margin:22px 0 32px; max-width:30em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-trust{margin-top:26px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--mut-2); letter-spacing:.03em}

/* signature: live ops console */
.console{
  background:linear-gradient(180deg,var(--surface),#10161a);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  overflow:hidden;
}
.console-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.console-bar .tl{display:flex; gap:6px}
.console-bar .tl i{width:10px; height:10px; border-radius:50%; display:block}
.console-bar .title{margin-left:8px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--mut)}
.console-bar .live{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--teal); display:flex; align-items:center; gap:7px}
.console-body{padding:18px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px}
.kpi{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px}
.kpi .l{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.04em; color:var(--mut); text-transform:uppercase}
.kpi .v{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:22px; margin-top:3px}
.kpi .v.t{color:var(--teal)}
.rows{display:flex; flex-direction:column; gap:8px}
.row{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px}
.row .ag{width:26px; height:26px; border-radius:50%; background:var(--teal-ghost); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; font-family:"IBM Plex Mono",monospace}
.row .nm{font-size:13.5px}
.row .st{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--mut)}
.sent{width:64px; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--red),#3a4751,var(--teal)); position:relative}
.sent i{position:absolute; top:-3px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--surface-2); transition:left .8s ease}

/* ---------- sections ---------- */
section{padding:78px 0}
.sec-head{max-width:640px; margin-bottom:44px}
.sec-eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:14px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px)}
.sec-head p{color:var(--mut); font-size:18px; margin:16px 0 0}

/* pain -> solution */
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pain{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.pain .x{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--red); margin-bottom:12px; display:flex; align-items:center; gap:8px}
.pain h3{font-size:18px; margin-bottom:10px}
.pain p{color:var(--mut); font-size:15px; margin:0}
.pain .fix{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--teal); font-size:14.5px; display:flex; gap:9px; align-items:flex-start}
.pain .fix b{color:var(--teal); font-weight:600}

/* features */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:border-color .2s, transform .2s}
.card:hover{border-color:var(--line-2); transform:translateY(-2px)}
.card .ic{width:42px; height:42px; border-radius:11px; background:var(--teal-ghost); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--teal)}
.card .ic svg{width:22px; height:22px}
.card h3{font-size:18.5px; margin-bottom:9px}
.card p{color:var(--mut); font-size:15px; margin:0}

/* differentiator strip */
.why{background:linear-gradient(180deg,#10171b,#0d1316); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.why-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center}
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.cmp-row{display:grid; grid-template-columns:1fr auto auto; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); align-items:center; font-size:14.5px}
.cmp-row:last-child{border-bottom:0}
.cmp-row.head{background:var(--surface-2); font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut)}
.cmp-row .c{width:84px; text-align:center}
.yes{color:var(--teal); font-weight:600}
.no{color:var(--mut-2)}
.why ul{list-style:none; padding:0; margin:18px 0 0}
.why li{display:flex; gap:12px; padding:9px 0; color:var(--mut); font-size:16px}
.why li b{color:var(--txt); font-weight:600}
.why li .ch{color:var(--teal); flex:none; margin-top:3px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s}
.step{position:relative; padding-top:18px; border-top:2px solid var(--line)}
.step::before{counter-increment:s; content:"0" counter(s); font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--teal); position:absolute; top:-11px; background:var(--bg); padding-right:10px}
.step h3{font-size:18px; margin:6px 0 9px}
.step p{color:var(--mut); font-size:15px; margin:0}

/* CTA / demo */
.cta{background:radial-gradient(120% 140% at 50% 0%, #11201c 0%, var(--bg) 60%)}
.cta-card{max-width:680px; margin:0 auto; text-align:center}
.cta-card h2{font-size:clamp(30px,4vw,46px)}
.cta-card p{color:var(--mut); font-size:18px; margin:16px auto 30px; max-width:34em}
.form{display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; margin-top:8px}
.form .full{grid-column:1/-1}
.field label{display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin-bottom:7px}
.field input,.field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--txt); padding:13px 14px; font-family:inherit; font-size:15px; transition:border-color .15s, box-shadow .15s;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-ghost)}
.form .btn{width:100%; justify-content:center}
.form-note{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--mut-2); margin-top:14px}

/* footer */
.ftr{border-top:1px solid var(--line); padding:54px 0 40px; background:var(--surface)}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:36px}
.ftr h4{font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin:0 0 16px; font-weight:400}
.ftr a.fl{display:block; color:var(--mut); font-size:14.5px; padding:5px 0; transition:color .15s}
.ftr a.fl:hover{color:var(--teal)}
.ftr .blurb{color:var(--mut); font-size:14.5px; max-width:30em; margin:14px 0 0}
.ftr-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:26px; border-top:1px solid var(--line); font-size:13px; color:var(--mut-2)}
.ftr-bottom .mono{font-size:12.5px}

/* cookie banner */
.cookie{position:fixed; left:18px; right:18px; bottom:18px; z-index:60; max-width:560px; margin:0 auto;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r); padding:18px 20px;
  display:flex; gap:16px; align-items:center; box-shadow:var(--shadow); flex-wrap:wrap}
.cookie p{margin:0; font-size:14px; color:var(--mut); flex:1; min-width:240px}
.cookie a{color:var(--teal)}
.cookie .ck-btns{display:flex; gap:10px}
.cookie .btn{padding:9px 16px; font-size:14px}

/* legal pages */
.legal{padding:64px 0 80px; max-width:780px}
.legal h1{font-size:clamp(30px,4vw,42px); margin-bottom:10px}
.legal .updated{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--mut-2); margin-bottom:40px}
.legal h2{font-size:22px; margin:38px 0 14px}
.legal p,.legal li{color:var(--cce,#C3CCD2); font-size:16px}
.legal ul{padding-left:22px}
.legal li{margin:7px 0}
.legal a{color:var(--teal); text-decoration:underline}
.back{display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--mut); margin-bottom:34px}
.back:hover{color:var(--teal)}

/* 404 */
.nf{min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px}
.nf .code{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--teal); letter-spacing:.1em}
.nf h1{font-size:clamp(40px,7vw,80px)}

/* responsive */
@media (max-width:900px){
  .hero-grid,.why-grid{grid-template-columns:1fr; gap:40px}
  .pains,.feat,.steps{grid-template-columns:1fr 1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav .link{display:none}
  .hero{padding:54px 0 50px}
  section{padding:58px 0}
  .pains,.feat,.steps,.form,.ftr-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cmp-row .c{width:60px}
}