:root { --bg: #0a0f1c; --panel: #0f1730; --text: #e6ecff; --muted:#9fb3ff; --brand:#4da3ff; --accent:#9e7bff; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 20% -10%, #14214b 0%, var(--bg) 45%, #050812 100%);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
/* Header */
.header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(9,14,28,.95), rgba(9,14,28,.80));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.left-controls{display:flex;align-items:center;gap:10px}
.hamburger{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#0c1430,#070d1d);border:1px solid rgba(255,255,255,.08);box-shadow:5px 5px 12px rgba(0,0,0,.45), -4px -4px 12px rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transform:translateZ(0)}
.hamburger:active{transform:translateZ(0) scale(0.98)}
.bars{width:20px;height:2px;background:#cfe1ff;position:relative}
.bars:before,.bars:after{content:'';position:absolute;left:0;width:20px;height:2px;background:#cfe1ff}
.bars:before{top:-6px}.bars:after{top:6px}
.lang-switch{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:linear-gradient(145deg,#0c1430,#070d1d);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 25px rgba(0,0,0,.35);perspective:600px}
.lang-switch .small{font-size:.75rem;opacity:.8}
.lang-switch select{
  appearance:none;
  padding:8px 36px 8px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background-image:linear-gradient(#0b1020,#0b1020),radial-gradient(120% 120% at 10% 10%, #9ec1ff 0%, #a18cff 45%, #3ad1ff 100%);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  color:#eaf2ff;
  font-weight:600;
  outline:none;
  box-shadow:0 10px 24px rgba(61,132,255,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotateX(6deg) rotateY(-6deg);
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.lang-switch select:hover{transform:rotateX(0) rotateY(0);box-shadow:0 14px 28px rgba(61,132,255,.25), inset 0 1px 0 rgba(255,255,255,.12)}
.lang-switch::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.75}
/* Logo top-right with 3D tilt */
.logo-wrap{position:relative;perspective:800px}
.logo{
  width:120px;
  transform:rotateY(-8deg) rotateX(5deg);
  filter:drop-shadow(0 14px 22px rgba(77,163,255,.28)) drop-shadow(0 3px 14px rgba(158,123,255,.18));
  transition:transform .3s ease;
}
.logo:hover{transform:rotateY(-2deg) rotateX(1deg) scale(1.02)}
@media(max-width:900px){
  .logo{ width:100px; }
}
/* Offcanvas nav */
.nav{position:fixed;left:12px;top:70px;background:linear-gradient(180deg,#0f1730,#0a1226);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:10px;box-shadow:0 20px 40px rgba(0,0,0,.4);display:none;min-width:230px}
.nav.open{display:block}
.nav a{display:block;padding:10px 12px;border-radius:10px;color:#e6ecff}
.nav a:hover{background:rgba(255,255,255,.06)}
/* Hero */
.hero{padding:70px 0 24px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(600px 300px at 80% -60%, rgba(77,163,255,.14), transparent 70%)}
.hero h1{font-size:38px;line-height:1.15;margin:0 0 10px}
.hero p{color:#c9d6ff;margin:0 0 16px}
.cta{display:inline-block;padding:10px 16px;border-radius:12px;background:linear-gradient(145deg,#2b58d6,#7a53ff);color:white;font-weight:700;box-shadow:0 10px 30px rgba(77,163,255,.35)}
/* Sections */
.section{padding:28px 0}
.card{background:linear-gradient(180deg,#0f1730,#0b142a);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr}}
/* Horizontal gallery */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.hscroll img{height:220px;border-radius:14px;scroll-snap-align:center;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .2s ease}
.hscroll img:hover{transform:translateY(-2px)}
/* Footer with 3D social icon */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:20px;background:linear-gradient(180deg,rgba(9,14,28,.80),rgba(9,14,28,.95))}
.social-3d{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:linear-gradient(145deg,#0c1430,#070d1d);border:1px solid rgba(255,255,255,.08);box-shadow:5px 5px 12px rgba(0,0,0,.45), -4px -4px 12px rgba(255,255,255,.03)}
.badge{display:inline-flex;gap:6px;align-items:center;background:rgba(158,123,255,.16);border:1px solid rgba(158,123,255,.35);color:#decfff;padding:4px 8px;border-radius:999px;font-size:12px}
/* FAQ */
.faq dt{font-weight:700;margin-top:12px}
.faq dd{margin:6px 0 12px 0;color:#cfe1ff}
/* Utilities */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.small{font-size:13px;color:#b8c7ff}
hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:22px 0}
/* social group row in footer */
.footer .socials {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.footer .social-3d svg {
  vertical-align: middle;
  margin-right: 6px;
}
.footer .social-3d span {
  line-height: 1;
}
/* Stack the badge under the switcher on small screens */
@media (max-width: 640px){
  .header .left-controls{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .header .left-controls .badge{
    margin-top: 2px;
  }
}
.footer .container > div[style*="display:flex"] {
  align-items: flex-start;
}
.footer .container .small a {
  text-decoration: none;
}
.footer .container .small a:hover {
  text-decoration: underline;
}