/* ==========================================================
   3comp — shell: layout, header, footer, shared components
   ========================================================== */

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  background:var(--ultra);color:#fff;padding:12px 18px;border-radius:0 0 2px 0;
}
.skip:focus{left:0;}

a:focus-visible,button:focus-visible{outline:2px solid var(--ultra-lift);outline-offset:3px;}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,rgba(8,15,22,.92),rgba(8,15,22,.55) 70%,transparent);
  backdrop-filter:blur(10px) saturate(150%);
}
.bar-row{display:flex;align-items:center;gap:26px;height:70px;}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--paper);}
.brand b{font-family:var(--f-display);font-size:21px;letter-spacing:-.035em;}
.brand span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--ultra-lift);text-transform:uppercase;}

nav.main{margin-left:auto;display:flex;gap:28px;}
nav.main a{font-size:14px;text-decoration:none;color:var(--dim);}

.slide{position:relative;display:inline-block;overflow:hidden;height:1.35em;vertical-align:bottom;}
.slide i{display:block;font-style:normal;transition:transform .42s cubic-bezier(.2,.8,.2,1);}
.slide i:last-child{position:absolute;left:0;top:100%;color:var(--ultra-lift);}
a:hover .slide i,button:hover .slide i{transform:translateY(-100%);}

.lang{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;}
.lang button{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;background:none;border:0;color:var(--dimmer);padding:7px 11px;cursor:pointer;transition:.16s;}
.lang button[aria-pressed="true"]{background:var(--ultra);color:#fff;}

.burger{display:none;background:none;border:1px solid var(--rule);border-radius:2px;padding:9px 11px;cursor:pointer;margin-left:auto;}
.burger i{display:block;width:17px;height:1.5px;background:var(--paper);margin:3.5px 0;}

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ultra-lift);display:flex;align-items:center;gap:11px;}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none;}
.lede{font-size:clamp(16.5px,1.55vw,19px);color:var(--dim);max-width:62ch;}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border:1px solid transparent;border-radius:2px;transition:background .18s,border-color .18s,transform .18s;}
.btn-primary{background:var(--ultra);color:#fff;box-shadow:0 12px 40px -18px var(--ultra);}
.btn-primary:hover{background:#1E39C8;transform:translateY(-2px);}
.btn-ghost{border-color:var(--rule);color:var(--paper);}
.btn-ghost:hover{border-color:var(--paper);background:rgba(238,241,244,.06);}
.arw{transition:transform .18s;}
.btn:hover .arw{transform:translateX(4px);}

.panel{
  background:linear-gradient(180deg,rgba(22,39,51,.60),rgba(15,27,38,.60));
  border:1px solid var(--rule);border-radius:4px;
  backdrop-filter:blur(14px) saturate(140%);
}

/* ---------- sections ---------- */
.sec{padding-block:var(--sp);position:relative;}
.sec-head{max-width:70ch;margin-bottom:clamp(42px,5vw,72px);}
.sec-head h2{font-size:clamp(30px,4.4vw,56px);margin:18px 0 18px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);background:rgba(8,15,22,.7);backdrop-filter:blur(8px);position:relative;z-index:2;}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding-block:28px;}
.foot .legal{font-family:var(--f-mono);font-size:11.5px;color:var(--dimmer);}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;}
.foot nav a{font-size:13px;text-decoration:none;color:var(--dim);}
.foot nav a:hover{color:var(--paper);}

/* ---------- responsive ---------- */
@media (max-width:480px){
  /* brand + burger + language toggle is already a full row here */
  .brand span{display:none;}
}
@media (max-width:720px){
  body{font-size:16px;}
  nav.main{display:none;position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:1px solid var(--rule);padding:6px var(--gut) 20px;}
  nav.main.open{display:flex;}
  nav.main a{padding:14px 0;border-bottom:1px solid var(--rule);}
  .burger{display:block;}
}