/* Little Pathway — UI v2: preloader, header, buttons */

/* ---------------- preloader ---------------- */
.pl2{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:linear-gradient(180deg,#061024 0%,#0A1730 45%,#17325E 100%);
  transition:opacity .75s var(--ease),visibility .75s;
}
.pl2[hidden]{display:none}
.pl2.is-done{opacity:0;visibility:hidden;pointer-events:none}
.pl2-inner{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.pl2-scene{width:min(440px,78vw);height:auto}
.pl2-route{
  fill:none;stroke:var(--sky);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;
  animation:plDraw 1.7s var(--ease-out) .15s forwards;
}
.pl2-dots circle{fill:#fff;opacity:0;animation:plPop .5s var(--ease-out) forwards}
.pl2-dots circle:nth-child(1){animation-delay:1.05s}
.pl2-dots circle:nth-child(2){animation-delay:1.35s}
.pl2-dots circle:nth-child(3){animation-delay:1.6s}
.pl2-logo{width:min(230px,54vw);opacity:0;animation:plFade .8s var(--ease-out) .95s forwards}
.pl2-tag{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:#7E93B4;opacity:0;animation:plFade .8s var(--ease-out) 1.3s forwards;
}
@keyframes plDraw{to{stroke-dashoffset:0}}
@keyframes plPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes plFade{to{opacity:1}}
.pl2 .pl-skip{
  position:absolute;bottom:24px;right:24px;background:none;
  border:1px solid #2C4470;color:#8FA6C6;padding:.55rem 1rem;border-radius:100px;
  font-size:.74rem;letter-spacing:.06em;cursor:pointer;transition:.22s var(--ease);
}
.pl2 .pl-skip:hover{border-color:var(--sky);color:#fff}

/* ---------------- header ---------------- */
.header{
  position:fixed;left:0;right:0;top:0;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.header.is-solid{background:rgba(255,251,245,.86);backdrop-filter:blur(16px);box-shadow:0 6px 26px rgba(15,26,46,.07)}
.header.is-hidden{transform:translateY(-102%)}
.hdr{display:flex;align-items:center;gap:16px;min-height:80px}
.hdr-logo{width:148px;height:auto;transition:opacity .3s var(--ease)}
/* on the dark story, use the white logo */
.header .logo-light{display:none}
.header:not(.is-solid) .logo-dark{display:none}
.header:not(.is-solid) .logo-light{display:block}

.nav{display:none;gap:2px;margin-inline:auto}
@media(min-width:1000px){.nav{display:flex}}
.nav a{
  padding:.5rem .82rem;border-radius:100px;font-size:.9rem;font-weight:500;
  color:var(--slate);transition:.2s var(--ease);
}
.header:not(.is-solid) .nav a{color:rgba(255,255,255,.86)}
.nav a:hover{background:rgba(48,120,240,.1);color:var(--blue)}
.header:not(.is-solid) .nav a:hover{background:rgba(255,255,255,.14);color:#fff}

.hdr-act{display:flex;align-items:center;gap:10px;margin-left:auto}
@media(min-width:1000px){.hdr-act{margin-left:0}}

.lang{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:#fff}
.lang-globe{width:14px;height:14px;flex:0 0 auto;margin:0 .1rem 0 .6rem;color:var(--muted)}
.header:not(.is-solid) .lang-globe{color:rgba(255,255,255,.7)}
.header:not(.is-solid) .lang{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.lang button{
  border:0;background:none;cursor:pointer;padding:.36rem .62rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--muted);
}
.header:not(.is-solid) .lang button{color:rgba(255,255,255,.75)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.header:not(.is-solid) .lang button[aria-pressed="true"]{background:#fff;color:var(--ink)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;min-height:46px;
  padding:.8rem 1.35rem;border-radius:100px;border:1px solid transparent;
  font-weight:600;font-size:.93rem;cursor:pointer;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease),color .24s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(96deg,var(--cyan),var(--blue) 55%,var(--indigo));color:#fff;box-shadow:0 10px 26px rgba(48,120,240,.34)}
.btn--primary:hover{box-shadow:0 14px 34px rgba(48,120,240,.44)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--onDark{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08)}
.btn--onDark:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn--sm{padding:.6rem 1.05rem;font-size:.86rem}
.btn--wide{width:100%;justify-content:center}

/* ---------------- burger + drawer ---------------- */
.burger{
  display:inline-grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:100px;background:#fff;cursor:pointer;
}
@media(min-width:1000px){.burger{display:none}}
.header:not(.is-solid) .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.burger i{display:block;width:17px;height:1.7px;background:var(--ink);position:relative}
.header:not(.is-solid) .burger i{background:#fff}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.7px;background:inherit}
.burger i::before{top:-5.5px}
.burger i::after{top:5.5px}

.drawer{
  position:fixed;inset:80px 0 auto;z-index:99;background:var(--paper);
  border-bottom:1px solid var(--line);padding:14px var(--pad) 24px;
  display:none;box-shadow:var(--shadow-l);
}
.drawer.is-open{display:block;animation:slideDown .32s var(--ease-out)}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.drawer a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line);font-weight:500}
.drawer a:last-of-type{border-bottom:0}

/* language row inside the mobile drawer */
.lang--drawer{
  display:flex;gap:8px;margin-top:16px;padding:0;
  background:none;border:0;border-radius:0;overflow:visible;
}
.lang--drawer button{
  flex:1;border:1px solid var(--line);border-radius:100px;background:#fff;
  padding:.7rem .5rem;font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--ink);
}
.lang--drawer button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}