:root{--ink:#0F1B2D;--paper:#F7F6F2;--card:#FFFFFC;--rule:#E2DFD6;--text:#3E4A5C;--mut:#6B7585;--acc:#A34A18;--acc-dk:#E8915B;--card-dk:#1A2A42;
  --head:'Space Grotesk',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--mono:ui-monospace,'SF Mono',Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);color:var(--ink);margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(44px,6.6vw,80px);font-weight:700}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:112px 0}
.white{background:var(--card)}
.dark{background:var(--ink);color:#B9C3D1}
.dark h2,.dark h3{color:#fff}
.label{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:20px;display:flex;gap:10px;align-items:center}
.label::before{content:"";width:22px;height:1.5px;background:currentColor}
.dark .label{color:var(--acc-dk)}
.sub{font-size:17px;color:var(--mut);margin-top:16px;max-width:620px}
.dark .sub{color:#8D9AAE}
.head{margin-bottom:52px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:10px;font:600 15px/1 var(--body);text-decoration:none;background:var(--ink);color:#fff;border:1.5px solid var(--ink);cursor:pointer;white-space:nowrap}
.btn::after{content:"→";transition:transform .2s}
.btn:hover::after{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.sm{padding:10px 15px;font-size:14px}
.dark .btn{background:var(--acc-dk);border-color:var(--acc-dk);color:var(--ink)}
.dark .btn.ghost{background:transparent;color:#fff;border-color:#4A5B74}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center}
.textlink{font-weight:600;font-size:15px;text-decoration:none}
.textlink:hover{text-decoration:underline}

nav{position:sticky;top:0;z-index:10;background:rgba(247,246,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
nav .wrap{display:flex;align-items:center;height:68px;gap:28px}
.logo{display:flex;align-items:center;gap:10px;font:700 20px var(--head);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo img{width:28px;height:28px}
.links{display:flex;gap:26px;margin-left:auto}
.links a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.links a:hover{color:var(--acc)}
.menu{display:none;margin-left:auto;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}
@media (max-width:860px){
  .menu{display:block}
  .links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:4px 16px 12px}
  .links a{padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px}
  nav.open .links{display:flex}
}

/* hero */
.hero{padding:88px 0 96px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero .sub{font-size:19px;color:var(--text);margin-top:24px;max-width:540px}
.device{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:48px 28px 18px;overflow:hidden}
.device svg{width:100%;height:auto;display:block;position:relative}
.scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc-dk),transparent);opacity:.7;animation:scan 4.5s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(30px)}50%{transform:translateY(300px)}}
.corner{position:absolute;width:18px;height:18px;border:2px solid var(--acc-dk)}
.corner.tl{top:16px;left:16px;border-right:0;border-bottom:0}.corner.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.corner.bl{bottom:42px;left:16px;border-right:0;border-top:0}.corner.br{bottom:42px;right:16px;border-left:0;border-top:0}
.caption{font:500 11px var(--mono);color:var(--mut);text-align:center;margin-top:14px;letter-spacing:.04em}

/* credentials carousel */
.creds{padding:26px 0 24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card);display:flex;align-items:center;gap:32px}
.creds p{flex:none;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding-left:max(24px,calc((100vw - 1180px)/2 + 24px))}
.marquee{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;animation:scroll 40s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.track ul{display:flex;gap:56px;padding:0 28px;margin:0;list-style:none}
.track li{font:600 19px var(--head);letter-spacing:-.01em;color:#8F98A6;white-space:nowrap;transition:color .2s}
.track li:hover{color:var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* protocol catalog */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters button{font:500 14px var(--body);padding:8px 14px;border-radius:8px;border:1px solid var(--rule);background:var(--card);color:var(--text);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.catalog{border-top:1.5px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.proto{display:grid;grid-template-columns:34px 1fr auto;gap:4px 14px;padding:20px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.proto[hidden]{display:none}
.proto .n{font:500 12px var(--mono);color:var(--mut);padding-top:4px}
.proto h3{font-size:17px}
.proto p{grid-column:2;font-size:14px;color:var(--mut)}
.proto .tag{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--acc);white-space:nowrap;padding-top:4px}
.proto:hover h3{color:var(--acc)}
.foot-note{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.foot-note p{font-size:14px;color:var(--mut)}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:28px}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--mut)}
.icon{width:42px;height:42px;border-radius:10px;background:#F3E4D9;color:var(--acc);display:grid;place-items:center;margin-bottom:20px}
.icon svg{width:22px;height:22px}
.soon{display:inline-block;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--paper);border:1px solid var(--rule);color:var(--mut);padding:5px 8px;border-radius:6px;margin-left:8px;vertical-align:middle}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.steps>div{border-top:2px solid var(--ink);padding-top:20px}
.steps .num{font:500 12px var(--mono);color:var(--acc);display:block;margin-bottom:14px}
.steps p{font-size:15px;color:var(--mut);margin-top:8px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.specs span{font:500 12px var(--mono);letter-spacing:.03em;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink)}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.doors .card{background:var(--card-dk);border-color:#2A3B55;padding:34px;display:flex;flex-direction:column}
.doors .card p{color:#B9C3D1;margin-bottom:26px;flex:1}
.doors .card .btn{align-self:flex-start}
.note{margin-top:32px;font-size:15px;color:var(--mut)}
.dark .note{color:#8D9AAE}

.two{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;counter-reset:g}
.goals p{font-size:16px;color:var(--mut);border-left:2px solid var(--acc-dk);padding-left:18px}
.goals b{display:block;color:var(--ink);font:600 19px/1.3 var(--head);margin-bottom:6px}

.faq{max-width:820px}
details{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:600 19px/1.35 var(--head);color:var(--ink);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:24px;font-weight:400;color:var(--acc)}
details[open] summary::after{content:"–"}
details p{padding:0 0 22px;max-width:700px;font-size:16px}

.strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #2A3B55;border-radius:16px;overflow:hidden;margin-top:44px}
.strip a{padding:30px;text-decoration:none;color:#B9C3D1;border-right:1px solid #2A3B55;transition:background .2s}
.strip a:last-child{border-right:0}
.strip a:hover{background:var(--card-dk)}
.strip h3{color:#fff;margin-bottom:8px}
.strip h3::after{content:" →";color:var(--acc-dk)}
.strip p{font-size:15px}

footer{background:var(--ink);color:#8D9AAE;border-top:1px solid #22334D;padding:56px 0 36px;font-size:14px}
footer .grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
footer .logo{color:#fff}
footer h4{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 12px}
footer a{color:#B9C3D1;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:#fff}
footer .base{margin-top:48px;padding-top:20px;border-top:1px solid #22334D;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* contact form and text pages */
.page{padding:72px 0 112px}
.page .wrap{max-width:780px}
.page h1{font-size:clamp(40px,5.6vw,60px);margin-bottom:16px}
.page h2{font-size:24px;margin:40px 0 10px}
.page p,.page li{margin-bottom:12px;font-size:16px}
.page ul{padding-left:20px}
.tabs{display:flex;gap:6px;margin:32px 0 28px;flex-wrap:wrap}
.tabs button{border:1px solid var(--rule);background:var(--card);padding:10px 16px;border-radius:10px;font:500 15px var(--body);color:var(--text);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
form{display:grid;gap:16px;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:28px}
form[hidden]{display:none}
.f2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
input,select,textarea{font:400 16px var(--body);color:var(--ink);background:#fff;border:1px solid #D6D2C7;border-radius:10px;padding:11px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--text)}
.check input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px}
.msg{font-size:15px;min-height:20px;margin:0!important}
.msg.ok{color:#1E7A48}.msg.bad{color:#B42318}

@media (max-width:900px){
  section{padding:80px 0}
  .hero{padding:56px 0 72px}
  .hero .grid,.two,.doors{grid-template-columns:1fr;gap:40px}
  .grid3,.goals,.steps,.strip{grid-template-columns:1fr}
  .steps{gap:28px}
  .catalog{grid-template-columns:1fr}
  .strip a{border-right:0;border-bottom:1px solid #2A3B55}
  .strip a:last-child{border-bottom:0}
  .creds{flex-direction:column;align-items:stretch;gap:16px}
  .creds p{padding:0 24px;text-align:center}
  footer .grid{grid-template-columns:1fr 1fr}
  footer .grid>div:first-child{grid-column:1/-1}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  .hero .sub{font-size:17px}
  .device{padding:36px 14px 12px}
  .card,.doors .card,.strip a,form{padding:22px}
  .f2col{grid-template-columns:1fr}
  .proto{grid-template-columns:28px 1fr}
  .proto .tag{grid-column:2;grid-row:1;justify-self:start;padding:0;margin-bottom:2px}
  .proto h3{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scan{display:none}
  .track{animation:none;width:auto}
  .track ul{flex-wrap:wrap;justify-content:center;gap:12px 36px}
  .track ul[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* subpages and the home tiles */
.intro{padding:88px 0 72px}
.intro h1{font-size:clamp(40px,5.6vw,68px);max-width:900px}
.intro .sub{font-size:19px;color:var(--text);max-width:640px;margin-top:22px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.tile{padding:26px 24px 30px 0;margin-right:24px;border-right:1px solid var(--rule);text-decoration:none;color:inherit}
.tile:last-child{border-right:0;margin-right:0}
.tile .n{display:block;font:500 12px var(--mono);color:var(--acc);margin-bottom:40px}
.tile h3{font-size:22px;margin-bottom:8px}
.tile h3::after{content:" →";color:var(--acc);display:inline-block;transition:transform .2s}
.tile:hover h3::after{transform:translateX(4px)}
.tile p{font-size:15px;color:var(--mut)}
.card.dk{background:var(--card-dk);border-color:#2A3B55}
.card.dk p{color:#B9C3D1}
@media (max-width:900px){
  .intro{padding:56px 0 48px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile{margin-right:0;padding:22px 16px 26px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .tile .n{margin-bottom:20px}
}
@media (max-width:480px){.tiles{grid-template-columns:1fr}}