/* Just Better AI — shared foundation (tokens, shell, header, footer, buttons).
   Page-specific sections live in each page's own <style>. */

:root{
  color-scheme:dark;
  --blue:#3676C4; --blue-l:#4A8AD6; --blue-d:#2A5BA3;
  --ink:#f2f6fb; --body:#dbe4f0; --cap:#b8c4d6; --mut:#8fa3bd; --mut2:#6b7f9c;
  --ice:#8fbbea; --ok:#7fd4a3;
  --line:rgba(255,255,255,.10); --line2:rgba(90,140,205,.35);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-weight:300; color:var(--ink);
  background:#000 linear-gradient(to bottom,#000 0%,#000 30%,#0a1520 62%,#1a2744 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none; touch-action:manipulation}
button{font:inherit; cursor:pointer; touch-action:manipulation; color:inherit}
p{margin:0}
h1,h2{margin:0; font-weight:600; text-wrap:balance}
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(74,138,214,.7); border-radius:8px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{
  position:fixed; top:10px; left:10px; z-index:200; transform:translateY(-260%);
  background:var(--blue); color:#fff; font-weight:600; font-size:.85rem;
  padding:.6rem 1rem; border-radius:10px; transition:transform .15s ease;
}
.skip:focus-visible{transform:none}
.wrap{max-width:1140px; margin:0 auto; padding:0 clamp(1.2rem,4vw,2.5rem)}

/* header */
.top{
  position:sticky; top:0; z-index:100;
  background:rgba(9,14,24,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top .row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 0}
.brand{display:flex; align-items:center; gap:.6rem; min-width:0}
.brand img{height:26px; width:auto}
.brand b{font-weight:600; font-size:.9rem; letter-spacing:.02em; white-space:nowrap}

/* header shortcuts: left-to-right after the brand; the button keeps the right edge */
.topnav{display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.6rem); margin-left:.8rem; margin-right:auto; min-width:0}
.topnav a{font-size:.95rem; color:var(--cap); padding:.3rem .1rem; white-space:nowrap; transition:color .15s ease}
.topnav a:hover{color:var(--ice)}
@media (max-width:640px){.topnav{display:none}}

/* buttons */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem; border-radius:12px;
  color:#fff; font-weight:600; font-size:1rem;
  background:linear-gradient(135deg,var(--blue-l) 0%,var(--blue) 50%,var(--blue-d) 100%);
  box-shadow:0 4px 12px rgba(54,118,196,.3),0 2px 6px rgba(54,118,196,.2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(54,118,196,.42),0 3px 8px rgba(54,118,196,.25)}
.cta:active{transform:scale(.98)}
.cta.small{padding:.5rem 1.05rem; font-size:.85rem; border-radius:10px}
.cta-white{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem; border-radius:12px;
  color:#0b1322; font-weight:600; font-size:1rem; background:#f2f6fb;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-white:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.45)}
.cta-white:active{transform:scale(.98)}

/* shared type accent */
.hl{
  background:linear-gradient(112deg,
    #4d88c8 0%, #6ea6de 26%, #cfe6ff 44%, #8fc0ef 54%, #5b95d4 76%, #4a86c6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-ai{color:var(--blue-l)}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot .links{
  display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; justify-content:center; align-items:center;
  padding:1.5rem 0 .2rem; font-size:.85rem; color:var(--cap);
}
.foot .links a{padding:.3rem 0; transition:color .15s ease}
.foot .links a:hover{color:var(--ice)}
.foot .row{
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:center; align-items:center;
  padding:.6rem 0 1.6rem; font-size:.8rem; color:var(--mut);
}

/* interior page shell (every page except the homepage) */
.page{padding:clamp(3rem,8vh,5.5rem) 0 clamp(3.5rem,9vh,6rem)}
.page .lede{max-width:60ch; margin:1.2rem 0 0; color:var(--body); font-size:clamp(1.05rem,2.1vw,1.2rem); line-height:1.7}
.page h1{font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.15; letter-spacing:-.02em}
.page h2{font-size:clamp(1.25rem,2.6vw,1.55rem); line-height:1.3; margin:2.8rem 0 .9rem; color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta,.cta:hover,.cta-white,.cta-white:hover{transform:none; transition:none}
}