/* Sanaur Labs — sanaurlabs.com
   Same drawing-sheet family as FuelMetric Pro, in the company colours (navy + teal).
   One memorable moment: the SL mark fills to its level on load. */

@font-face{font-family:"Plex";src:url("fonts/IBMPlexSans-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("fonts/IBMPlexSans-SemiBold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url("fonts/IBMPlexSans-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMono-Medium.woff") format("woff");font-weight:500;font-display:swap}

:root{
  --ink:#15233B; --ink-soft:#46546D; --rule:#C5CEDA; --rule-soft:#E2E7EE;
  --page:#E9EDF2; --sheet:#FFFFFF;
  --teal:#2EC4B6;      /* the liquid; accents on navy */
  --teal-ink:#0B7A70;  /* teal text on white (AA) */
  --focus:#1F6FD1;
  --sans:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.6 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px}
.skip:focus{left:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.018em;line-height:1.08}
p{margin:0}

.top{padding:22px 0}
.top .wrap{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:20px}
.brand svg{width:40px;height:40px}
.brand b{font-weight:700}
.brand .name span{color:var(--teal-ink)}
.top nav{margin-left:auto;display:flex;gap:26px;font-weight:600;font-size:16px}
.top nav a{text-decoration:none;color:var(--ink-soft)}
.top nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;font:600 17px/1 var(--sans);text-decoration:none;border:2px solid var(--ink)}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#0C1628}
.btn-line{color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

.sheet{background:var(--sheet);border:1.5px solid var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:40px;padding:72px 64px 72px 64px;margin-top:6px;position:relative}
.hero h1{font-size:clamp(40px,5vw,64px);max-width:11.5em}
.hero .lead{margin-top:26px;font-size:21px;line-height:1.55;color:var(--ink-soft);max-width:30em}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.mark{justify-self:center;width:min(100%,340px)}
@media (prefers-reduced-motion:no-preference){
  .lvl{animation:lvl 1.8s cubic-bezier(.3,.7,.2,1) .3s both}
  .sym{animation:sym .5s ease-out 1.9s both}
}
@keyframes lvl{from{transform:translateY(46px)}to{transform:translateY(0)}}
@keyframes sym{from{opacity:0}to{opacity:1}}

/* sections */
.section{padding-top:84px}
.section h2{font-size:clamp(30px,3.6vw,44px);max-width:16em}
.product{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:30px 34px;margin-top:34px;text-decoration:none}
.product img{width:84px;height:84px;border-radius:19px}
.product h3{font-size:26px}
.product p{color:var(--ink-soft);margin-top:6px;max-width:38em}
.product .state{margin-top:10px;font-size:15px;color:var(--teal-ink);font-weight:600}
.product .go{white-space:nowrap}
.product:hover{background:#FBFCFD}
.later{margin-top:16px;font-size:15.5px;color:var(--ink-soft)}

.ways{margin:34px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.ways > div{padding:24px 28px 0 0}
.ways > div + div{padding-left:28px;border-left:1px solid var(--rule)}
.ways dt{font-size:22px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.ways dt svg{flex:none}
.ways dd{margin:10px 0 0;color:var(--ink-soft);font-size:17px}

.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
.about p{font-size:21px;line-height:1.55}
.about p + p{margin-top:18px}
.about .small{font-size:16px;color:var(--ink-soft)}

.contact{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:44px 48px;margin-bottom:84px}
.contact p{color:var(--ink-soft);margin-top:10px}
.contact .mail{font:500 22px var(--mono);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--teal)}
.contact .mail:hover{border-bottom-color:var(--ink)}

footer{background:var(--ink);color:#C8D0DE;padding:40px 0;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer .id{display:flex;gap:14px;align-items:center}
footer .id img{width:44px;height:44px}
footer b{color:#fff}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a{color:#fff;text-decoration:none}
footer nav a:hover{text-decoration:underline}

.doc{padding:56px 64px 64px;margin-bottom:84px}
.doc h1{font-size:clamp(34px,4vw,48px)}
.doc p{margin-top:14px;color:var(--ink-soft);max-width:36em}

@media (max-width:900px){
  .top nav{display:none}
  .hero{grid-template-columns:1fr;padding:44px 28px}
  .mark{grid-row:1;justify-self:start}
  .ways{grid-template-columns:1fr}
  .ways > div,.ways > div + div{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .about{grid-template-columns:1fr;gap:24px}
  .product{grid-template-columns:auto minmax(0,1fr);padding:24px;align-items:start}
  .mark{width:min(60%,200px)}
  .product .go{grid-column:1 / -1;justify-self:start}
}
@media (max-width:600px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .hero{padding:32px 20px 36px}
  .hero .lead,.about p{font-size:19px}
  .cta .btn{flex:1 1 100%}
  .product img{width:60px;height:60px;border-radius:14px}
  .product h3{font-size:22px}
  .contact{flex-direction:column;align-items:flex-start;padding:30px 22px}
  .contact .mail{font-size:18px}
  .doc{padding:36px 22px 44px}
}