/* 20eighty.co shared styles. The homepage (index.html) keeps its own copy inline. */
:root{
  --accent:#0E7490; --accent-ink:#0B5D74; --accent-soft:#D5EEF4; --accent-on-chrome:#5CC1D6;
  --chrome:#0D1C24; --chrome-2:#13262F;
  --on-chrome-2:rgba(255,255,255,.74); --on-chrome-3:rgba(255,255,255,.5);
  --glass-line:rgba(255,255,255,.14); --glass-fill:rgba(255,255,255,.04);
  --n50:#F8FAFC; --n100:#F1F4F8; --n200:#E5E9EF; --n300:#D2D9E2; --n400:#98A4B3;
  --n500:#5F6B7C; --n600:#48566A; --n700:#333F51; --n900:#101828;
  --s1:#D92D20; --s1-x:#B42318; --s1-t:#FEE4E2;
  --s2:#DC6803; --s2-x:#B54708; --s2-t:#FEF0C7;
  --s4:#079455; --s4-x:#05703F; --s4-t:#DCFAE6;
  --display:"Sora","Inter",ui-sans-serif,sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px; --r:10px; --r-lg:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--n900);font-family:var(--ui);font-size:17px;line-height:28px}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{padding:112px 0}
.grey{background:var(--n50)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:var(--r);font:600 15px/1 var(--ui);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-line{background:transparent;border:1px solid var(--glass-line);color:#fff}
.btn-line:hover{border-color:rgba(255,255,255,.4)}
.btn-outline{background:#fff;border:1px solid var(--n300);color:var(--n900)}
.btn-outline:hover{border-color:var(--n500)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* dark bands */
.dark{background:var(--chrome);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 82% 62%, rgba(14,116,144,.38), transparent 70%)}
.dark .wrap{position:relative}
.dark p{color:var(--on-chrome-2)}

/* header */
header{padding:28px 0 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:26px;width:auto}
.nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--on-chrome-2);font-size:15px;font-weight:500}
.nav ul a:hover,.nav ul a.here{color:#fff;text-decoration:none}
.nav ul a.btn{color:#fff}

/* inner page hero */
.page-hero{padding:80px 0 104px}
.page-hero h1{font-size:clamp(40px,5vw,62px);line-height:1.05;letter-spacing:-.03em;color:#fff;max-width:16ch}
.page-hero .lead{font-size:20px;line-height:31px;color:var(--on-chrome-2);margin:24px 0 0;max-width:34em}
.page-hero .btns{margin-top:36px}

/* section heads */
.h2{font-size:clamp(32px,3.7vw,46px);line-height:1.1;letter-spacing:-.025em}
.intro{font-size:19px;line-height:30px;color:var(--n600);max-width:36em;margin-top:22px}
.dark .h2{color:#fff}
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:80px;align-items:start}

/* closing band */
.start{padding:120px 0}
.start h2{color:#fff;max-width:18ch}
.start p{font-size:19px;line-height:31px;max-width:34em;margin:24px 0 40px}

/* footer */
footer{background:var(--chrome-2);color:var(--on-chrome-2);padding:48px 0;font-size:14px;line-height:22px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.foot img{height:20px;width:auto;margin-bottom:10px}
.foot ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.foot a{color:var(--on-chrome-2)}
.foot a:hover{color:#fff}
.foot .copy{color:var(--on-chrome-3);font-size:13px}

@media (max-width:900px){
  section{padding:80px 0}
  .wrap{padding:0 20px}
  .nav ul li:not(:last-child){display:none}
  .page-hero{padding:56px 0 80px}
  .page-hero .lead{font-size:18px;line-height:28px}
  .split{grid-template-columns:minmax(0,1fr);gap:40px}
  .start{padding:88px 0}
}
@media (max-width:520px){
  .btns .btn{flex:1 1 100%}
}