*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
:root{
  --bg:#080A0E;
  --surface:#12151C;
  --surface-2:#1A1E27;
  --primary:#E4E8EE;
  --primary-hover:#F0F4F8;
  --text:#FFFFFF;
  --text-dim:#A8B4C0;
  --text-muted:#788898;
  --accent:#B8C8D8;
  --accent-dim:rgba(184,200,216,0.12);
  --accent-hover:#D0DCE8;
  --border:rgba(255,255,255,0.06);
  --border-bright:rgba(255,255,255,0.12);
  --glow:0 0 40px rgba(184,200,216,0.3);
  --glow-sm:0 0 20px rgba(184,200,216,0.15);
  --font-display:'Montserrat',sans-serif;
  --font-body:'Quicksand',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --nav-h:64px;
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-in-out-back:cubic-bezier(.68,-.3,.27,1.15);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out-quart:cubic-bezier(.25,.75,.25,1);
  --ease-smooth:cubic-bezier(.2,.8,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out-back:cubic-bezier(.68,-.55,.27,1.55);
  --accent-soft:rgba(184,200,216,0.06);
  --accent-mid:rgba(184,200,216,0.12);
  --accent-glow:rgba(184,200,216,0.35);
  --silver-gradient:linear-gradient(135deg,#F0F4F8,#B8C4D0);
  --accent-gradient:linear-gradient(135deg,var(--accent),#788898);
  --text-display:clamp(2.6rem,7vw,5.5rem);
  --gap-section:clamp(4rem,8vw,8rem)
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit;background:none;border:none;outline:none}
ul{list-style:none}
.glass{
  background:var(--surface);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border)
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem 1.5rem;
  border-radius:10px;
  font-weight:600;
  font-size:.92rem;
  transition:all .35s var(--ease-out-quart);
  white-space:nowrap
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#788898);
  color:#fff;
  box-shadow:0 4px 14px rgba(184,200,216,0.3)
}
.btn-primary:hover{
  transform:translate3d(0,-2px,0);
  box-shadow:0 6px 24px rgba(184,200,216,0.35)
}
.btn-ghost{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-bright);
  color:var(--text)
}
.btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:var(--accent)}
.gradient-text{
  background:linear-gradient(135deg,var(--accent),var(--primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
.section-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  gap:.75rem
}
.section-label::before{
  content:'';
  width:24px;
  height:1.5px;
  background:var(--accent);
  display:inline-block
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:.75rem
}
.section-sub{
  font-size:1rem;
  color:var(--text-dim);
  max-width:560px;
  line-height:1.7
}
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:0 2rem;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:1rem;
  background:rgba(8,10,14,0.7);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
  transition:background .5s var(--ease-smooth),border-color .5s var(--ease-smooth);
  will-change:background,backdrop-filter
}
.nav.scrolled{background:rgba(8,10,14,0.94);border-color:rgba(184,200,216,0.12)}
.nav-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:800;
  margin-right:auto
}
.nav-logo-icon{
  width:32px;height:32px;
  border-radius:8px;
  background:var(--accent-gradient);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:#000
}
.nav-logo span{color:var(--accent)}
.nav-logo-img{
  width:34px;height:34px;
  border-radius:7px;
  object-fit:contain
}
.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-link{
  padding:.5rem .85rem;
  border-radius:8px;
  font-family:var(--font-body);
  font-size:.88rem;
  font-weight:500;
  color:var(--text-dim);
  transition:all .3s var(--ease-smooth);
  position:relative
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:4px;left:50%;
  width:0;height:2px;
  background:var(--accent);
  border-radius:2px;
  transform:translate3d(-50%,0,0);
  transition:width .35s var(--ease-smooth);
  opacity:.7
}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-link:hover::after{width:60%}
.nav-cta{
  padding:.55rem 1.2rem;
  border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#788898);
  color:#fff;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:700;
  transition:all .35s var(--ease-out-quart);
  display:flex;
  align-items:center;
  gap:.45rem
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(184,200,216,0.35)}
.nav-mobile-btn{
  display:none;
  width:40px;height:40px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:1.2rem;
  color:var(--text-dim);
  border:1px solid var(--border);
  transition:all .3s var(--ease-smooth);
  will-change:transform
}
.nav-mobile-btn:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-mobile-menu{
  position:fixed;
  top:var(--nav-h);left:0;right:0;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:1rem 2rem 1.5rem;
  background:rgba(8,10,14,0.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  z-index:99;
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition:transform .4s var(--ease-smooth),opacity .35s var(--ease-smooth);
  will-change:transform,opacity
}
.nav-mobile-menu.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto
}
.nav-mobile-menu .nav-link{
  padding:.75rem 1rem;
  font-size:1rem;
  border-radius:10px;
  transition:all .3s var(--ease-smooth)
}
.nav-mobile-menu .nav-link:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-mobile-menu .nav-cta{
  margin-top:.35rem;
  justify-content:center;
  text-align:center;
  width:100%;
  padding:.7rem 1rem;
  font-size:.92rem
}

.loading-content{text-align:center}
.loading-ring-wrap{
  position:relative;
  width:120px;height:120px;
  margin:0 auto 1.25rem;
  display:flex;
  align-items:center;
  justify-content:center
}
.loading-ring-svg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  transform:rotate(-90deg)
}
.ring-progress{
  fill:none;
  stroke:url(#ringGradient);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:326.7;
  stroke-dashoffset:326.7;
  animation:fillRing 2.5s ease-out forwards
}
@keyframes fillRing{
  to{stroke-dashoffset:0}
}
.loading-letter{
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:900;
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:sway 1.8s ease-in-out infinite;
  position:relative;
  z-index:1;
  line-height:1
}
@keyframes sway{
  0%,100%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(6deg) scale(1.03)}
  75%{transform:rotate(-6deg) scale(0.97)}
}
.loading-brand{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:800
}
.loading-brand span{color:var(--accent)}
.loading-status{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--text-muted);
  margin-top:.5rem;
  letter-spacing:.1em
}
.loading-status::after{
  content:'...';
  animation:loadingDots 1.4s steps(4) infinite
}
@keyframes loadingDots{
  0%{content:'.'}
  50%{content:'..'}
  100%{content:'...'}
}
.footer{
  border-top:1px solid var(--border);
  padding:2rem 2rem;
  background:var(--bg)
}
.footer-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1.5rem
}
.footer-copy{font-size:.78rem;color:var(--text-muted)}
.footer-logo-img{
  width:22px;height:22px;
  border-radius:5px;
  vertical-align:middle;
  margin-right:.45rem;
  object-fit:contain
}
.footer-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer-links a{font-size:.85rem;color:var(--text-dim);transition:color .3s var(--ease-smooth)}
.footer-links a:hover{color:var(--accent)}
.footer-socials{display:flex;gap:.6rem}
.social-btn{
  width:36px;height:36px;
  border-radius:8px;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:.95rem;
  transition:all .35s var(--ease-spring)
}
.social-btn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px) scale(1.05)}
.reveal{opacity:0;transform:translate3d(0,30px,0) scale(.97);transition:opacity .65s var(--ease-smooth),transform .65s var(--ease-smooth);will-change:transform,opacity}
.reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1)}

@media(max-width:768px){
  .nav{justify-content:center;padding:0 .75rem}
  .nav-logo{margin-right:0;gap:.4rem}
  .nav-logo-img{width:30px;height:30px;flex-shrink:0}
  .nav-links,.nav-cta{display:none}
  .nav-mobile-btn{display:flex;position:absolute;right:.75rem;top:50%;transform:translateY(-50%)}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .nav{padding:0 .5rem}
  .nav-logo{font-size:.95rem;gap:.3rem}
  .nav-logo-img{width:26px;height:26px;flex-shrink:0}
  .nav-mobile-btn{width:34px;height:34px;font-size:1rem;right:.5rem}
}

/* ===== THEME SWITCHER ===== */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background .35s ease, background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}
.theme-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}
.theme-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transition: all .35s var(--ease-spring);
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}
.theme-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
}
.theme-popup {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.95);
  transform-origin: bottom right;
  transition: all .35s var(--ease-smooth);
  min-width: 200px;
}
.theme-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.theme-popup-title {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: .75rem;
  text-align: center;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.theme-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s var(--ease-spring);
  position: relative;
}
.theme-btn:hover {
  transform: scale(1.08);
}
.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.theme-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  font-size: .85rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
@media(max-width:480px){
  .theme-toggle {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
  .theme-wrap {
    bottom: 16px;
    right: 16px;
  }
  .theme-popup {
    min-width: 170px;
    padding: .85rem;
  }
}