/* Aspere Ad Astra — shared styles */
:root{
  --bg:#070b16; --bg-2:#0c1226; --fg:#e9edf6; --muted:#98a3bd;
  --accent:#f5c451; --accent-2:#ffd97a; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.035);
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
a{color:inherit}
.sky{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.95) 50%, transparent 55%) 0 0/230px 230px,
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.7) 50%, transparent 55%) 0 0/270px 270px,
    radial-gradient(1.6px 1.6px at 210px 170px, rgba(245,196,81,.85) 50%, transparent 55%) 0 0/350px 350px,
    radial-gradient(1px 1px at 70px 210px, rgba(255,255,255,.55) 50%, transparent 55%) 0 0/310px 310px,
    radial-gradient(1.2px 1.2px at 300px 60px, rgba(255,255,255,.8) 50%, transparent 55%) 0 0/390px 390px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
}
.glow{position:fixed; top:-32vh; left:50%; transform:translateX(-50%); width:90vw; height:70vh; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(245,196,81,.13), transparent 62%);}
.wrap{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:0 24px}

/* header */
header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.95rem}
.brand img{width:44px; height:44px; flex:none; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(140,170,255,.28)}
.brand small{display:block; font-weight:400; letter-spacing:.14em; font-size:.62rem; color:var(--muted); margin-top:2px}
.brand span{white-space:nowrap}
header nav{display:flex; align-items:center; gap:22px}
header nav a{color:var(--muted); text-decoration:none; font-size:.95rem; white-space:nowrap; border-bottom:1px solid transparent; padding-bottom:1px}
header nav a:hover{color:var(--fg); border-color:var(--accent)}
header nav a[aria-current="page"]{color:var(--fg); border-color:var(--accent)}
header .mail{margin-left:10px}

/* hero */
.hero{padding:72px 0 56px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 56px; align-items:center}
.hero-logo{display:block; position:relative; isolation:isolate; width:clamp(220px, 28vw, 340px); justify-self:end; animation:float 7s ease-in-out infinite}
.hero-logo::before{content:""; position:absolute; inset:-22%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(150,180,255,.22), rgba(150,180,255,.07) 45%, transparent 68%)}
.hero-logo img{display:block; width:100%; height:auto; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 30px 70px rgba(0,0,0,.6)}
.poster{margin:0; position:relative; isolation:isolate; width:clamp(220px, 30vw, 350px); justify-self:end; animation:float 7s ease-in-out infinite}
.poster::before{content:""; position:absolute; inset:-14% -24%; border-radius:50%; z-index:-1;
  background:radial-gradient(ellipse, rgba(150,180,255,.2), rgba(150,180,255,.06) 45%, transparent 68%)}
.poster img{display:block; width:100%; height:auto; border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.6)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--accent); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 20px}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--accent); opacity:.8}
h1{font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.12; letter-spacing:-.015em; margin:0 0 22px; max-width:16ch}
h1 em{font-style:normal; color:var(--accent-2)}
.lead{font-size:1.15rem; color:var(--muted); max-width:62ch; margin:0 0 32px}
.actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.btn{display:inline-block; padding:13px 22px; border-radius:10px; text-decoration:none; font-weight:600; background:var(--accent); color:#1a1405; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 28px rgba(245,196,81,.28)}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent); box-shadow:none}
.note{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem}
.note i{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(245,196,81,.18); animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(245,196,81,.18)}50%{box-shadow:0 0 0 7px rgba(245,196,81,.06)}}

/* sections */
section{padding:36px 0}
h2{font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; font-weight:600}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px}
.grid.three{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.card{padding:24px 22px; border:1px solid var(--line); border-radius:14px; background:var(--card); transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:rgba(245,196,81,.45); transform:translateY(-2px)}
.card h3{margin:0 0 10px; font-size:1.06rem}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.card .n{display:block; font-size:.75rem; color:var(--accent); letter-spacing:.14em; margin-bottom:12px}
.card ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:.93rem}
.card li{margin:4px 0}
.card li::marker{color:var(--accent)}
.more{display:inline-block; margin-top:20px; color:var(--accent-2); text-decoration:none; font-size:.95rem; border-bottom:1px solid rgba(255,217,122,.35)}
.more:hover{border-color:var(--accent-2)}

.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; counter-reset:step}
.steps div{position:relative; padding:18px 18px 18px 54px; border-left:1px solid var(--line)}
.steps div::before{counter-increment:step; content:counter(step, decimal-leading-zero); position:absolute; left:16px; top:18px; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums}
.steps b{display:block; margin-bottom:4px}
.steps span{color:var(--muted); font-size:.92rem}

/* poster gallery */
.gallery{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.tile{display:block; margin:0; text-decoration:none; color:inherit}
.tile img{display:block; width:100%; height:auto; aspect-ratio:590/859; object-fit:cover; border-radius:14px; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease}
.tile:hover img{transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(245,196,81,.45)}
.tile .cap{display:block; padding:14px 4px 0}
.tile b{display:block; font-size:1.02rem}
.tile small{color:var(--muted); font-size:.88rem}

/* facts strip */
.facts{display:flex; flex-wrap:wrap; gap:14px 44px; padding:22px 0 6px; border-top:1px solid var(--line)}
.facts div{display:flex; flex-direction:column; min-width:110px}
.facts b{font-size:1.3rem; letter-spacing:-.01em; line-height:1.2}
.facts span{color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-top:4px}
.foot-left{display:flex; flex-direction:column; gap:2px}

/* text blocks */
.prose{max-width:66ch}
.prose p{color:var(--muted); margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--fg)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tags span{padding:6px 13px; border:1px solid var(--line); border-radius:999px; font-size:.86rem; color:var(--muted); background:var(--card)}
.check{margin:0; padding:0; list-style:none; display:grid; gap:12px; max-width:62ch}
.check li{position:relative; padding-left:26px; color:var(--muted)}
.check li::before{content:""; position:absolute; left:0; top:.6em; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(245,196,81,.15)}
.check b{color:var(--fg)}

/* contact block */
.contact{margin-top:20px; padding:32px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(135deg, rgba(245,196,81,.08), rgba(255,255,255,.02) 55%); display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between}
.contact p{margin:0; color:var(--muted); max-width:52ch}
.contact strong{color:var(--fg); display:block; font-size:1.2rem; margin-bottom:6px}
.contact a.big{font-size:1.15rem; font-weight:600; color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(255,217,122,.35)}
.contact a.big:hover{border-color:var(--accent-2)}
.ways{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.phone{color:var(--muted); font-size:.95rem; display:inline-flex; align-items:center; gap:8px; min-height:28px}
.phone .reveal{background:none; border:0; padding:0; margin:0; font:inherit; color:var(--muted); cursor:pointer; border-bottom:1px dashed rgba(152,163,189,.55)}
.phone .reveal:hover{color:var(--fg); border-color:var(--fg)}
.phone a{color:var(--fg); font-size:1.05rem; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22)}
.phone a:hover{border-color:var(--accent-2)}
.phone a:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:3px}
.card .phone{margin-top:4px}
.card .phone a{font-size:1.15rem}
.card a.big{font-size:1.15rem; font-weight:600; color:var(--accent-2); text-decoration:none; border-bottom:1px solid rgba(255,217,122,.35)}
.card a.big:hover{border-color:var(--accent-2)}

footer{margin-top:40px; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center}
footer nav{display:flex; flex-wrap:wrap; gap:18px}
footer nav a{text-decoration:none; color:var(--muted)}
footer nav a:hover{color:var(--fg)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:28px}
  .hero-logo{grid-row:1; justify-self:start; width:clamp(150px, 38vw, 220px)}
  .poster{justify-self:start; width:min(100%, 260px)}
}
@media (max-width:760px){
  header .mail{display:none}
}
@media (max-width:640px){
  .gallery{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin:0 -24px; padding:0 24px 8px; scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .tile{flex:0 0 64%; scroll-snap-align:start}
}
@media (max-width:560px){
  header{padding:22px 0}
  .facts{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px}
  .brand span{display:none}
  header nav{gap:16px}
  header nav a{font-size:.9rem}
  .hero{padding:48px 0 36px}
  .contact{padding:24px}
}
@media (prefers-reduced-motion:reduce){ .note i,.hero-logo,.poster{animation:none} .card,.btn,.tile img{transition:none} }