:root{--bg:#0e1a2b;--panel:#16273d;--deep:#091420;--green:#4ade80;--sky:#38bdf8;
  --txt:#e8eef6;--dim:#93a7bd;--line:#24384f}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:400 17px/1.72 Rubik,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;line-height:.98;
  margin:0 0 .4em;text-transform:uppercase;letter-spacing:.005em;color:#fff}
h1{font-size:clamp(3rem,8vw,6.2rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h3{font-size:1.24rem;letter-spacing:.02em}
p{margin:0 0 1.15em;max-width:62ch;color:var(--dim)}
strong{color:var(--txt)}
a{color:var(--green);font-weight:500;text-decoration:none;
  border-bottom:2px solid rgba(74,222,128,.35)}
a:hover{color:var(--sky);border-bottom-color:var(--sky)}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px;position:relative;z-index:1}

/* label: thin bright rule, no fill, no rotation */
.flag{display:inline-block;font:500 12.5px/1 Rubik,sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);padding:0 0 9px;margin-bottom:22px;
  border-bottom:2px solid var(--green)}

/* ---- header ---- */
.top{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.brand img{width:238px}
.brand{border:0}
nav ul{display:flex;list-style:none;gap:2px;margin:0;padding:0;flex-wrap:wrap}
nav a{display:block;font:500 14.5px/1 Rubik,sans-serif;color:var(--dim);padding:10px 14px;
  border:0;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{color:#fff;border-bottom-color:var(--green)}
nav a[aria-current]{color:#fff;border-bottom-color:var(--green)}

/* ---- sections: angled edges rather than stripes or colour blocks ---- */
.sec{padding:78px 0;position:relative}
.sec.panel{background:var(--panel)}
.sec.deep{background:var(--deep)}
.sec.cta{background:var(--green);color:#08111c}
.sec.cta h1,.sec.cta h2,.sec.cta h3{color:#08111c}
.sec.cta p{color:#0d2b1a}
.sec.cta a{color:#08111c;border-bottom-color:rgba(8,17,28,.4)}
.angle{height:74px;background:var(--panel);
  clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.hero{padding:74px 0 66px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.lede{font-size:1.26rem;line-height:1.58;max-width:52ch;color:var(--txt)}

/* ---- cards: no outline, no shadow, no tilt, just a bright top rule ---- */
.card{background:transparent;border-top:3px solid var(--line);padding:26px 0 0}
.card.hi{border-top-color:var(--green)}
.card h3{margin-top:0;color:#fff}
.card p:last-child{margin-bottom:0}
.num{font-family:Anton,Impact,sans-serif;font-size:3.4rem;line-height:.9;
  color:var(--line);display:block;margin-bottom:10px}
.card.hi .num{color:var(--green)}

/* ---- images: flush, no border, no rotation ---- */
.slot{margin:0;position:relative;aspect-ratio:var(--ratio,4/3);overflow:hidden;
  background:#132133}
.slot img{width:100%;height:100%;object-fit:cover}
.slot::after{content:"Image " attr(data-slot);position:absolute;inset:auto 0 14px 0;
  text-align:center;font:500 11px/1 Rubik,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#3d5876}
.slot:has(img)::after{display:none}

/* ---- quotes: big condensed caps under a bright rule ---- */
.quote{background:transparent;border:0;border-top:3px solid var(--sky);padding:24px 0 0}
.quote p{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:1.5rem;
  line-height:1.16;color:#fff;margin-bottom:.55em;letter-spacing:.01em}
.quote cite{font-style:normal;font:500 13px/1.5 Rubik,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sky)}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--green);color:#08111c;
  font:500 16px/1 Rubik,sans-serif;letter-spacing:.03em;text-decoration:none;
  padding:17px 32px;border:0;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--sky);color:#08111c}
.btn.alt{background:transparent;color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.btn.alt:hover{background:var(--green);color:#08111c;box-shadow:none}
.sec.cta .btn{background:#08111c;color:var(--green)}
.sec.cta .btn:hover{background:#16273d;color:#fff}

/* ---- forms ---- */
form label{display:block;font:500 12px/1 Rubik,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin:0 0 9px}
form input,form textarea,form select{width:100%;font:400 16px/1.6 Rubik,sans-serif;
  padding:14px 0;border:0;border-bottom:2px solid var(--line);background:transparent;
  color:#fff;margin-bottom:24px;border-radius:0}
form textarea{border:2px solid var(--line);padding:14px}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--green)}
form select option{background:var(--panel);color:#fff}
.ok{border-left:3px solid var(--green);background:var(--panel);padding:17px 22px;
  margin-bottom:24px;color:#fff}

/* ---- faq ---- */
.qa{border-top:1px solid var(--line);padding:26px 0}
.qa h3{margin:0 0 .4em;color:var(--green)}
.qa p:last-child{margin-bottom:0}

/* ---- footer ---- */
footer{background:var(--deep);color:var(--dim);padding:60px 0 38px;
  border-top:1px solid var(--line)}
footer h4{color:#fff;font-family:Anton,Impact,sans-serif;font-size:20px;margin:0 0 14px;
  text-transform:uppercase;letter-spacing:.02em;font-weight:400}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px;font-size:15.5px}
footer a{color:var(--green)}
footer a:hover,footer a:focus-visible{color:var(--sky)}
.fine{border-top:1px solid var(--line);margin-top:38px;padding-top:22px;font-size:13.5px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#6f8399}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;position:fixed;z-index:99;background:var(--green);
  color:#08111c;padding:12px 18px}

@media(max-width:900px){
  .hero-grid,.two,.three{grid-template-columns:1fr;gap:30px}
  .four{grid-template-columns:repeat(2,1fr)}
  .sec,.hero{padding:48px 0}
  .angle{height:40px}
}