@font-face{font-family:Poppins;src:url(fonts/Poppins-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --ink:#2B2D33;
  --ink-soft:#5A5D66;
  --petrol:#1F5F6B;
  --petrol-deep:#174A54;
  --mist:#E8F0F1;
  --paper:#FFFFFF;
  --line:#DDE3E5;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--petrol)}
a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Header */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.top img{height:38px;width:auto}
.top nav{display:flex;gap:28px;align-items:center}
.top nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.top nav a:hover{color:var(--petrol)}
.btn{display:inline-block;background:var(--petrol);color:#fff!important;text-decoration:none;font-weight:500;padding:13px 24px;border-radius:4px;transition:background .2s}
.btn:hover{background:var(--petrol-deep)}
.btn-ghost{background:transparent;color:var(--ink)!important;border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff!important}
.top .btn{padding:10px 18px;font-size:15px}

/* Hero */
.hero{padding:110px 0 100px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(38px,6vw,72px);line-height:1.05;font-weight:700;letter-spacing:-.02em;max-width:14ch}
.hero h1 .o{color:var(--petrol)}
.hero p{font-size:clamp(18px,2vw,21px);color:var(--ink-soft);max-width:46ch;margin:28px 0 40px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:90px;border-top:2px solid var(--ink)}
.hero-facts div{padding:22px 24px 0 0}
.hero-facts strong{display:block;font-size:17px}
.hero-facts span{color:var(--ink-soft);font-size:15px}

/* Sections */
section{padding:100px 0}
.split{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.lead{color:var(--ink-soft);margin-top:18px}

.lines{list-style:none;border-top:1px solid var(--line)}
.lines li{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.lines strong{font-weight:500}
.lines span{color:var(--ink-soft);font-size:16px}

.band{background:var(--mist)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px;counter-reset:s}
.steps div{border-top:3px solid var(--petrol);padding-top:22px}
.steps div::before{counter-increment:s;content:counter(s);font-weight:700;color:var(--petrol);font-size:15px}
.steps h3{font-size:20px;margin:6px 0 10px}
.steps p{color:var(--ink-soft);font-size:16px}

.brands{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.brand{border:1px solid var(--line);padding:36px;border-radius:4px;text-decoration:none;color:var(--ink);display:block;transition:border-color .2s}
a.brand:hover{border-color:var(--petrol)}
.brand h3{font-size:24px}
.brand p{color:var(--ink-soft);margin:10px 0 18px;font-size:16px}
.brand .more{color:var(--petrol);font-weight:500;font-size:15px}
.brand.soon{background:#FAFBFB}
.brand.soon .more{color:var(--ink-soft)}

.about p{margin-top:18px;color:var(--ink-soft);max-width:60ch}
.about .sign{margin-top:28px;color:var(--ink);font-weight:500}

.contact{background:var(--petrol);color:#fff}
.contact h2{color:#fff}
.contact .lead{color:#CFE3E6}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.contact-grid a{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;padding:26px;border-radius:4px;transition:background .2s}
.contact-grid a:hover{background:rgba(255,255,255,.16)}
.contact-grid small{display:block;color:#CFE3E6;font-size:14px}
.contact-grid strong{font-weight:500;font-size:18px;word-break:break-word}

footer{background:var(--ink);color:#C9CCD2;padding:56px 0 40px;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer img{height:34px;width:auto;margin-bottom:14px}
footer a{color:#fff;text-decoration:none;margin-right:22px}
footer a:hover{text-decoration:underline}
footer .legal{margin-top:12px}

/* Legal pages */
.legal-page{padding:80px 0 100px}
.legal-page .wrap{max-width:780px}
.legal-page h1{font-size:clamp(32px,4vw,44px);margin-bottom:32px}
.legal-page h2{font-size:21px;margin:40px 0 10px}
.legal-page p,.legal-page li{color:var(--ink-soft);margin-bottom:10px}
.legal-page ul{padding-left:20px}
.todo{background:#FFF4CC;color:#6B5500;padding:1px 6px;border-radius:3px}

@media (max-width:860px){
  .top nav a:not(.btn){display:none}
  .split,.brands,.contact-grid,.steps{grid-template-columns:1fr}
  .split{gap:32px}
  .hero{padding:72px 0 64px}
  .hero-facts{grid-template-columns:1fr;margin-top:56px}
  .hero-facts div{padding:18px 0;border-bottom:1px solid var(--line)}
  section{padding:72px 0}
  .lines li{grid-template-columns:1fr;gap:4px}
  .top img{height:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.faq{display:grid;gap:8px}
.faq h3{font-size:18px;font-weight:500;margin-top:20px}
.faq h3:first-child{margin-top:0}
.faq p{color:var(--ink-soft);font-size:16px;max-width:62ch}