/* AtomoWeb shared site styles — variables, reset, nav, buttons, hero shell, footer */

:root {
  --bg:#212b36;
  --bg-soft:#0c1828;
  --surface:#0f2035;
  --surface-2:#132941;
  --text:#f7fbff;
  --muted:#aebdcb;
  --brand:#37ca25;
  --brand-2:#89ddff;
  --accent:#6a8ae2;
  --line:rgba(255,255,255,.10);
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --radius:22px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

/* Nav */
.nav-wrap{
  position:sticky;top:0;z-index:50;
  background:rgba(7,17,31,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;color:#d8e6f2;font-size:15px}
.nav-links a:hover{color:white}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:12px;padding:13px 18px;font-weight:700;
  border:1px solid transparent;transition:.2s ease;
  cursor:pointer
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#04111c;
  box-shadow:0 12px 34px rgba(45,168,255,.22)
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border-color:var(--line);background:rgba(255,255,255,.04);color:white}
.btn-secondary:hover{background:rgba(255,255,255,.08)}

/* Section shell */
section{padding:84px 0}
.section-kicker{
  font-size:13px;color:var(--brand-2);font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:8px
}
.section-title{
  font-size:clamp(34px,5vw,52px);line-height:1.06;
  letter-spacing:-.035em;margin:0 0 14px
}
.section-copy{font-size:18px;color:var(--muted);max-width:760px;margin:0 0 36px}

/* Hero shell (page-specific padding, blobs and copy widths live in each page's stylesheet) */
.hero{position:relative;overflow:hidden}
.hero-inner{position:relative;z-index:1}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px;border:1px solid rgba(98,208,255,.30);
  border-radius:999px;color:#bdeaff;background:rgba(45,168,255,.08);
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em
}
h1{
  font-size:clamp(46px,7vw,78px);line-height:1;
  letter-spacing:-.052em;margin:22px 0 24px
}
.gradient-text{
  background:linear-gradient(90deg,#fff,#89ddff 55%,#8ef0c7);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-copy{font-size:20px;color:var(--muted)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* CTA band */
.cta{padding:90px 0}
.cta-box{
  padding:56px;border-radius:30px;
  border:1px solid rgba(98,208,255,.25);
  background:linear-gradient(135deg,rgba(45,168,255,.17),rgba(142,240,199,.08));
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center
}
.cta-box h2{
  font-size:clamp(32px,4vw,48px);margin:0 0 12px;
  letter-spacing:-.04em;line-height:1.06
}
.cta-box p{margin:0;color:#bfd0dc;font-size:18px}

/* Footer */
.footer{padding:38px 0 44px;border-top:1px solid var(--line);color:#8ea5b6}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}

@media(max-width:920px){
  .nav-links a:not(.btn){display:none}
  .cta-box{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:min(var(--max),calc(100% - 28px))}
  nav{min-height:70px}.brand img{height:39px}
  .btn{width:100%}
  .cta-box{padding:32px 24px}
}