:root{
  --bg:#070a12;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.06);
  --text:rgba(245,248,255,.92);
  --muted:rgba(175,190,220,.78);
  --line:rgba(245,248,255,.12);
  --line2:rgba(245,248,255,.08);
  --accent:#7aa7ff;
  --danger:#ff6b6b;
  --ok:#21c08b;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow2:0 10px 24px rgba(0,0,0,.28);
  --mx:50vw;
  --my:18vh;
  --mop:.35;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%;overflow-x:hidden}
html{background:var(--bg)}
body{
  margin:0;
  position:relative;
  background:var(--bg);
  color:var(--text);
  font:16px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  letter-spacing:.2px;
}
body:before{
  content:"";
  position:fixed;
  inset:-22%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 620px at 18% 10%, rgba(122,167,255,.12), transparent 62%),
    radial-gradient(860px 620px at 86% 12%, rgba(33,192,139,.08), transparent 62%),
    radial-gradient(1100px 820px at 50% 110%, rgba(122,167,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 320px),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 0 1px, transparent 1px);
  background-size:auto, auto, auto, auto, 18px 18px;
  opacity:1;
  mix-blend-mode:normal;
  transform:translate3d(0,0,0) scale(1.03);
  transform-origin:50% 50%;
  animation:bgFloat 28s ease-in-out infinite;
  will-change:transform;
}

@keyframes bgFloat{
  0%{transform:translate3d(-0.4%, -0.2%, 0) scale(1.03) rotate(0.001deg)}
  50%{transform:translate3d(0.4%, -0.4%, 0) scale(1.04) rotate(0.001deg)}
  100%{transform:translate3d(-0.3%, 0.3%, 0) scale(1.03) rotate(0.001deg)}
}

.mouse-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--mop);
  transition:opacity .25s ease;
  background:
    radial-gradient(520px 420px at var(--mx) var(--my), rgba(122,167,255,.10), transparent 64%),
    radial-gradient(620px 520px at calc(var(--mx) + 120px) calc(var(--my) + 80px), rgba(33,192,139,.07), transparent 66%);
  mix-blend-mode:soft-light;
  filter:blur(18px);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 900px at 50% 18%, transparent 0 62%, rgba(0,0,0,.56) 100%),
    radial-gradient(900px 720px at 50% 112%, rgba(0,0,0,.42), transparent 62%);
  opacity:.95;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid rgba(122,167,255,.55);outline-offset:2px;border-radius:10px}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:13px;letter-spacing:0}

.ico{
  width:14px;height:14px;
  display:inline-block;
  flex:0 0 auto;
  background:currentColor;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  opacity:.9;
}
.i-work{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h7v7H4V4zm9%200h7v7h-7V4zM4%2013h7v7H4v-7zm9%200h7v7h-7v-7z%22/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M4%204h7v7H4V4zm9%200h7v7h-7V4zM4%2013h7v7H4v-7zm9%200h7v7h-7v-7z%22/%3E%3C/svg%3E")}
.i-about{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2012a4%204%200%201%200%200-8%204%204%200%200%200%200%208zm0%202c-4.4%200-8%202.1-8%206v1h16v-1c0-3.9-3.6-6-8-6z%22/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2012a4%204%200%201%200%200-8%204%204%200%200%200%200%208zm0%202c-4.4%200-8%202.1-8%206v1h16v-1c0-3.9-3.6-6-8-6z%22/%3E%3C/svg%3E")}
.i-process{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M7%206h14v2H7V6zm0%205h14v2H7v-2zm0%205h14v2H7v-2zM3%206h2v2H3V6zm0%205h2v2H3v-2zm0%205h2v2H3v-2z%22/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M7%206h14v2H7V6zm0%205h14v2H7v-2zm0%205h14v2H7v-2zM3%206h2v2H3V6zm0%205h2v2H3v-2zm0%205h2v2H3v-2z%22/%3E%3C/svg%3E")}
.i-contact{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M2%2012l19-9-6.5%2019-3.3-7.1L2%2012zm10.7%202.2l.8%201.7%203.2-9.4-8.6%204.1%204.6%203.6z%22/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M2%2012l19-9-6.5%2019-3.3-7.1L2%2012zm10.7%202.2l.8%201.7%203.2-9.4-8.6%204.1%204.6%203.6z%22/%3E%3C/svg%3E")}

.container{max-width:1240px;margin:0 auto;padding:18px 18px 60px;position:relative;z-index:1}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0 14px;
  backdrop-filter:saturate(140%) blur(10px);
  overflow:visible;
}
@supports (overflow: clip){
  .topbar{overflow:visible}
}
.topbar:before{
  content:"";
  position:absolute;
  left:50%;
  width:100vw;
  top:0;
  bottom:0;
  transform:translateX(-50%);
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(122,167,255,.08), transparent 60%),
    radial-gradient(820px 420px at 88% 0%, rgba(33,192,139,.06), transparent 62%),
    linear-gradient(180deg, rgba(7,10,18,.86), rgba(7,10,18,.62));
  border-bottom:1px solid rgba(245,248,255,.06);
  z-index:-1;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:34px;height:34px;border-radius:12px;
  background:url("/logo.png") center / contain no-repeat;
  border:1px solid rgba(245,248,255,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-title{font-size:14px;font-weight:760;letter-spacing:.6px;line-height:1.1}
.brand-sub{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.4px;line-height:1.1}
.nav{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(175,190,220,.82);
  font-size:13px;
  padding:8px 10px;
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(245,248,255,.06);
  background:rgba(255,255,255,.02);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.nav a:hover{border-color:rgba(122,167,255,.30);background:rgba(122,167,255,.06);color:rgba(245,248,255,.92);transform:translateY(-1px)}
.nav-cta{border-color:rgba(122,167,255,.30);background:rgba(122,167,255,.08);color:rgba(245,248,255,.92)}
.nav a.active{border-color:rgba(122,167,255,.38);background:rgba(122,167,255,.10);color:rgba(245,248,255,.94)}
.nav-more{position:relative;display:inline-flex;align-items:center}
.nav-more summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(175,190,220,.82);
  font-size:13px;
  padding:8px 10px;
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(245,248,255,.06);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more[open] summary{border-color:rgba(122,167,255,.30);background:rgba(122,167,255,.06);color:rgba(245,248,255,.92)}
.nav-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:180px;
  border-radius:16px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(7,10,18,.78);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow2);
  padding:8px;
  display:none;
}
.nav-more[open] .nav-menu{display:block}
.nav-menu a{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(245,248,255,.88);
  text-decoration:none;
}
.nav-menu a:hover{border-color:rgba(122,167,255,.26);background:rgba(122,167,255,.10)}

.hero{
  margin-top:16px;
  border:1px solid rgba(245,248,255,.10);
  background:
    radial-gradient(900px 520px at 24% 0%, rgba(122,167,255,.16), transparent 60%),
    radial-gradient(700px 420px at 78% 20%, rgba(33,192,139,.10), transparent 58%),
    rgba(255,255,255,.03);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:22px 20px;
}
.hero-inner{display:grid;grid-template-columns:minmax(0, 1.35fr) minmax(0, .65fr);gap:16px;align-items:start;max-width:100%}
.hero-main{min-width:0}
.hero-kicker{color:rgba(175,190,220,.78);font-size:12px;letter-spacing:.7px;text-transform:uppercase;margin-bottom:10px}
.hero h1{margin:0 0 10px;font-size:clamp(18px, 2.1vw, 24px);line-height:1.18;letter-spacing:.2px}
.hero p{margin:0;color:var(--muted);max-width:60ch}
.hero-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.hero-pills{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.metrics{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:10px;
}
.metric{
  grid-column:span 3;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px 12px;
  box-shadow:var(--shadow2);
}
.metric-k{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.5px;text-transform:uppercase}
.metric-v{margin-top:6px;font-size:16px;color:rgba(245,248,255,.92);letter-spacing:.2px;font-weight:760}
.hero-side{
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.12);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow2);
  min-width:0;
}
.codecard{min-width:0}
.codecard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.codecard-title{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.6px;text-transform:uppercase}
.codecard-tag{
  font-size:12px;
  color:rgba(245,248,255,.88);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(122,167,255,.30);
  background:rgba(122,167,255,.08);
}
.code{
  margin:0;
  border-radius:16px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.18);
  padding:12px 12px;
  overflow:hidden;
  max-width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.code.typer code{display:block}
.code.typer code::after{
  content:"";
  display:inline-block;
  width:8px;
  height:1.05em;
  border-right:2px solid rgba(245,248,255,.55);
  margin-left:2px;
  transform:translateY(2px);
  animation:caretBlink .9s step-end infinite;
}
@keyframes caretBlink{
  0%, 49%{opacity:1}
  50%, 100%{opacity:0}
}
.code code{
  display:block;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  line-height:1.55;
  color:rgba(245,248,255,.88);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.codebadges{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;
  color:rgba(175,190,220,.82);
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
}
.minigame{
  margin-top:12px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.12);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--shadow2);
}
.minigame-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.minigame-title{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.6px;text-transform:uppercase}
.minigame-meta{font-size:12px;color:rgba(169,183,212,.70)}
.minigame-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.minigame-row .btn{padding:8px 12px;border-radius:12px}
.minigame-score{display:flex;align-items:baseline;gap:8px}
.mg-k{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.4px}
.mg-v{font-size:14px;color:rgba(245,248,255,.92);font-weight:800}
.mg-board{
  margin-top:10px;
  height:120px;
  border-radius:16px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.mg-target{
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid rgba(245,248,255,.18);
  background:radial-gradient(70% 70% at 30% 22%, rgba(122,167,255,.42), rgba(33,192,139,.14));
  position:absolute;
  left:12px;top:12px;
  opacity:0;
  cursor:pointer;
  transition:transform .08s ease, opacity .2s ease;
}
.mg-target:active{transform:scale(.96)}
.mg-target.pop{transform:scale(1.08)}
.rt-board{
  margin-top:10px;
  width:100%;
  height:88px;
  border-radius:16px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(245,248,255,.88);
  font-size:14px;
  font-weight:760;
  letter-spacing:.2px;
  display:grid;
  place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .08s ease, border-color .18s ease, background .18s ease;
}
.rt-board:active{transform:scale(.99)}
.rt-board.armed{border-color:rgba(175,190,220,.22)}
.rt-board.go{border-color:rgba(33,192,139,.35);background:rgba(33,192,139,.10)}
.rt-board.bad{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.10)}
.market{
  margin-top:12px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.12);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--shadow2);
}
.market-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.market-title{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.6px;text-transform:uppercase}
.market-time{font-size:12px;color:rgba(169,183,212,.70)}
.market-grid{margin-top:10px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px 12px}
.market-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.market-k{font-size:13px;color:rgba(232,238,252,.82);white-space:nowrap}
.market-v{font-size:13px;color:rgba(245,248,255,.90);font-weight:650;min-width:0;text-align:right}
.market-v.mono{font-size:13px}

.marketbar{
  margin-top:14px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:20px;
  padding:14px;
  box-shadow:var(--shadow2);
}
.marketbar-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.marketbar-title{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.8px;text-transform:uppercase}
.marketbar-time{font-size:12px;color:rgba(169,183,212,.70)}
.marketbar-items{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.weatherbar{
  margin-top:12px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:20px;
  padding:14px;
  box-shadow:var(--shadow2);
}
.weatherbar-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.weatherbar-title{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.8px;text-transform:uppercase}
.weatherbar-time{font-size:12px;color:rgba(169,183,212,.70)}
.weatherbar-items{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.wx-item{
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:18px;
  padding:14px 56px 14px 14px;
  box-shadow:var(--shadow2);
  min-width:0;
  position:relative;
}
.wx-city{font-size:13px;font-weight:800;color:rgba(245,248,255,.92);letter-spacing:.2px}
.wx-temp{margin-top:10px;font-size:16px;font-weight:760;color:rgba(245,248,255,.92)}
.wx-cond{margin-top:6px;font-size:13px;color:rgba(175,190,220,.78)}
.wx-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:40px;line-height:1}
.mk-item{
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:var(--shadow2);
  min-width:0;
}
.mk-top{display:flex;align-items:center;gap:10px}
.mk-ico{
  width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(245,248,255,.12);
  background:rgba(255,255,255,.03);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.mk-ico img{width:30px;height:30px;display:block;object-fit:contain}
.mk-ico.btc{background:radial-gradient(70% 70% at 30% 22%, rgba(255,184,92,.32), transparent 60%), rgba(255,255,255,.03)}
.mk-ico.eth{background:radial-gradient(70% 70% at 30% 22%, rgba(122,167,255,.26), transparent 60%), rgba(255,255,255,.03)}
.mk-ico.usdt{background:radial-gradient(70% 70% at 30% 22%, rgba(33,192,139,.22), transparent 60%), rgba(255,255,255,.03)}
.mk-ico.gold{background:radial-gradient(70% 70% at 30% 22%, rgba(255,216,120,.18), transparent 60%), rgba(255,255,255,.03)}
.mk-ico.silver{background:radial-gradient(70% 70% at 30% 22%, rgba(210,220,255,.18), transparent 60%), rgba(255,255,255,.03)}
.mk-sym{margin-top:2px;font-size:14px;font-weight:800;color:rgba(245,248,255,.92);letter-spacing:.3px}
.mk-price{margin-top:10px;font-size:16px;font-weight:760;color:rgba(245,248,255,.92)}
.mk-change{margin-top:10px;font-size:18px;font-weight:900;letter-spacing:.3px}
.mk-item.up .mk-change{color:rgba(33,192,139,.92)}
.mk-item.down .mk-change{color:rgba(255,107,107,.92)}
.mk-item.flat .mk-change{color:rgba(175,190,220,.78)}
.spark{margin-top:10px;width:100%;height:26px;display:block}
.spark polyline{fill:none;stroke:rgba(175,190,220,.35);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-item.up .spark polyline{stroke:rgba(33,192,139,.70)}
.mk-item.down .spark polyline{stroke:rgba(255,107,107,.72)}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
  padding:7px 10px;border-radius:999px;
  color:rgba(175,190,220,.82);font-size:13px;
}
.dot{width:7px;height:7px;border-radius:99px;background:var(--ok)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:16px}
.card{
  grid-column:span 6;
  border:1px solid rgba(245,248,255,.10);
  background:var(--panel);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow2);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.card.third{grid-column:span 4}
.card:hover{transform:translateY(-2px);border-color:rgba(122,167,255,.26);background:var(--panel2)}
.card-title{margin:0 0 8px;font-size:13px;letter-spacing:.4px;color:rgba(245,248,255,.88)}
.card-text{margin:0;color:var(--muted);font-size:14px}
.card h2{margin:0 0 8px;font-size:14px}
.card p{margin:0;color:var(--muted)}
.list{margin:10px 0 0;padding:0;list-style:none}
.list li{padding:6px 0;color:var(--muted);border-top:1px solid rgba(245,248,255,.06)}
.list li:first-child{border-top:none}

.footer{margin-top:22px;color:rgba(169,183,212,.72);font-size:13px}
.footer-dot{margin:0 6px;color:rgba(169,183,212,.55)}
.footer-status{color:rgba(169,183,212,.86)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;border-radius:12px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
  color:rgba(245,248,255,.92);font-size:14px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{border-color:rgba(122,167,255,.35);background:rgba(122,167,255,.06);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, rgba(122,167,255,.18), rgba(33,192,139,.10));border-color:rgba(122,167,255,.35)}
.btn.danger{background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.25)}

.form{
  margin-top:14px;
  border:1px solid var(--line);
  background:rgba(15,22,41,.55);
  border-radius:16px;
  padding:16px;
}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row-gap-top{margin-top:10px}
label{display:block;color:rgba(169,183,212,.85);font-size:13px;margin:0 0 6px}
input[type="password"], input[type="text"], input[type="file"]{
  width:100%;
  border:1px solid rgba(232,238,252,.14);
  background:rgba(0,0,0,.12);
  color:var(--text);
  border-radius:10px;
  padding:9px 10px;
  outline:none;
  font-size:14px;
}
textarea{
  width:100%;
  border:1px solid rgba(232,238,252,.14);
  background:rgba(0,0,0,.12);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  font-size:14px;
  resize:vertical;
  min-height:110px;
}
input[type="checkbox"]{transform:translateY(1px)}
.field{min-width:240px;flex:1}
.hint{margin-top:8px;color:rgba(169,183,212,.72);font-size:13px}
.alert{
  margin-top:14px;
  border:1px solid rgba(255,107,107,.25);
  background:rgba(255,107,107,.10);
  color:rgba(255,230,230,.95);
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
}

.section{margin-top:18px;scroll-margin-top:92px;position:relative;padding-top:10px}
.section:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,248,255,.10), transparent);
  opacity:.75;
}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.section-head h2{margin:0;font-size:14px;letter-spacing:.6px;color:rgba(245,248,255,.86);text-transform:uppercase}
.section-meta{color:rgba(169,183,212,.72);font-size:13px;max-width:72ch}
.section-actions{margin-top:12px}

.timeline{margin-top:16px;display:grid;grid-template-columns:repeat(12, 1fr);gap:12px}
.step{
  grid-column:span 6;
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid rgba(245,248,255,.10);
  background:var(--panel);
  border-radius:18px;
  padding:14px 14px;
  box-shadow:var(--shadow2);
}
.step-n{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:13px;
  letter-spacing:.8px;
  color:rgba(245,248,255,.92);
  border:1px solid rgba(122,167,255,.28);
  background:linear-gradient(135deg, rgba(122,167,255,.14), rgba(33,192,139,.08));
}
.step-b{min-width:0}
.step-t{font-size:14px;color:rgba(245,248,255,.90);font-weight:760;letter-spacing:.2px}
.step-d{margin-top:6px;color:rgba(175,190,220,.78);font-size:13px;line-height:1.6}

.services{align-items:stretch}
.service-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.icon{
  width:34px;height:34px;border-radius:14px;
  border:1px solid rgba(245,248,255,.10);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow2);
  position:relative;
  flex:0 0 auto;
}
.icon:before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(122,167,255,.26), rgba(33,192,139,.16));
  opacity:.9;
}
.i-brand:after,.i-ux:after,.i-build:after,.i-responsive:after,.i-seo:after,.i-launch:after{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
  letter-spacing:.6px;
  color:rgba(245,248,255,.88);
  content:"";
}
.i-brand:after{content:"B"}
.i-ux:after{content:"UX"}
.i-build:after{content:"DEV"}
.i-responsive:after{content:"R"}
.i-seo:after{content:"SEO"}
.i-launch:after{content:"GO"}

.cta{margin-top:18px}
.cta-inner{
  border:1px solid rgba(245,248,255,.10);
  border-radius:22px;
  padding:18px 18px;
  background:
    radial-gradient(900px 520px at 22% 0%, rgba(122,167,255,.16), transparent 60%),
    radial-gradient(700px 420px at 78% 24%, rgba(33,192,139,.10), transparent 58%),
    rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.cta-title{font-size:18px;color:rgba(245,248,255,.92);font-weight:760;letter-spacing:.2px}
.cta-sub{margin-top:8px;color:rgba(175,190,220,.78);font-size:14px;max-width:78ch}
.cta-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

.cap-title{color:rgba(232,238,252,.90);font-weight:650;font-size:13px}
.cap-meta{color:rgba(169,183,212,.72);font-size:13px;margin-top:4px}
.cap-meta.note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.about{
  margin-top:14px;
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:start;
  border:1px solid rgba(245,248,255,.10);
  background:var(--panel);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow2);
}
.avatar{
  width:116px;height:116px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120px 120px at 30% 22%, rgba(122,167,255,.30), transparent 60%),
    radial-gradient(120px 120px at 70% 70%, rgba(33,192,139,.16), transparent 58%),
    rgba(255,255,255,.02);
  border:1px solid rgba(245,248,255,.10);
  color:rgba(245,248,255,.92);
  font-weight:750;
  letter-spacing:.6px;
  position:relative;
  overflow:hidden;
}
.avatar.avatar-logo{
  background-image:url("/logo.png");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  color:transparent;
}
.avatar.avatar-logo:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(110px 110px at 25% 15%, rgba(122,167,255,.22), transparent 60%),
    radial-gradient(120px 120px at 80% 85%, rgba(33,192,139,.14), transparent 62%),
    linear-gradient(180deg, rgba(7,10,18,.22), rgba(7,10,18,.10));
}
.about-body{min-width:0}
.about-lead{margin:0 0 10px;color:rgba(232,238,252,.86)}

.faq{margin-top:14px}
details{
  border:1px solid rgba(245,248,255,.10);
  background:var(--panel);
  border-radius:16px;
  padding:12px 12px;
  margin-top:10px;
  box-shadow:var(--shadow2);
}
details:first-child{margin-top:0}
.meta-edit{margin-top:10px}
summary{
  cursor:pointer;
  color:rgba(232,238,252,.88);
  font-size:14px;
  font-weight:650;
  list-style:none;
}
summary::-webkit-details-marker{display:none}
.faq-body{margin-top:8px;color:rgba(169,183,212,.72);font-size:13px}

.contact{
  margin-top:14px;
  border:1px solid rgba(245,248,255,.10);
  background:var(--panel);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow2);
}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}
.inquiry{margin:0}
.inquiry .btn{white-space:nowrap}
.placeholder img{opacity:.85}
.placeholder .cap-title{letter-spacing:.2px}
.placeholder .cap-meta{color:rgba(175,190,220,.76)}
.contact-side{
  border:1px solid rgba(245,248,255,.10);
  background:rgba(0,0,0,.12);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow2);
}
.contact-kicker{font-size:12px;color:rgba(175,190,220,.70);letter-spacing:.6px;text-transform:uppercase}
.contact-title{margin-top:6px;font-size:15px;font-weight:760;color:rgba(245,248,255,.92)}
.contact-sub{margin-top:4px;color:rgba(175,190,220,.82);font-size:13px}
.contact-side .btn{margin-top:12px;width:100%}
.contact-mini{margin-top:12px;color:rgba(169,183,212,.72);font-size:13px}
.addr{margin-top:10px;border:1px solid rgba(245,248,255,.10);background:rgba(0,0,0,.18);border-radius:14px;padding:10px 10px;word-break:break-all}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(15,22,41,.55);
}
.table th, .table td{padding:10px 10px;border-top:1px solid rgba(232,238,252,.08);text-align:left;font-size:13px;color:var(--muted)}
.table th{color:rgba(232,238,252,.80);font-weight:650;border-top:none}
.muted-cell{color:rgba(169,183,212,.72);font-size:13px;padding:14px 10px}
.work-title{color:rgba(232,238,252,.86);font-size:13px}
.work-sub{color:rgba(169,183,212,.72);font-size:13px;margin-top:4px}
.thumb{height:56px;width:auto;border-radius:10px;border:1px solid rgba(232,238,252,.10);background:rgba(0,0,0,.2)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.no-margin{margin:0}
.min-180{min-width:180px}
.checkline{display:flex;gap:8px;align-items:center;color:rgba(169,183,212,.85);font-size:13px}
.label-inline{margin:0}

.gallery{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.shot{
  grid-column:span 4;
  border:1px solid rgba(245,248,255,.10);
  background:var(--panel);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  transition:transform .18s ease, border-color .18s ease;
}
.shot:hover{transform:translateY(-2px);border-color:rgba(122,167,255,.26)}
.shot img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;filter:saturate(1.03) contrast(1.02)}
.shot .cap{padding:12px 12px;font-size:13px;color:rgba(175,190,220,.80);border-top:1px solid rgba(245,248,255,.06)}

@media (max-width: 920px){
  .card{grid-column:span 12}
  .card.third{grid-column:span 12}
  .metric{grid-column:span 6}
  .step{grid-column:span 12}
  .shot{grid-column:span 6}
  .about{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
  .hero-side{order:2}
  .contact-grid{grid-template-columns:1fr}
  .marketbar-items{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .weatherbar-items{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  body{font-size:14px}
  .hero h1{font-size:18px}
  .metric{grid-column:span 12}
  .shot{grid-column:span 12}
  .topbar{padding:12px 0 12px}
  .container{padding:14px 14px 54px}
  .topbar{flex-wrap:wrap;gap:10px}
  .brand{width:100%}
  .nav{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
  }
  .nav{gap:8px}
  .nav a{padding:8px 12px;font-size:13px}
  .hero{padding:18px 14px;border-radius:20px}
  .hero-kicker{font-size:11px}
  .hero p{font-size:14px}
  .hero-actions{gap:8px}
  .btn{padding:10px 12px;border-radius:12px}
  .row{gap:10px}
  .field{min-width:100%}
  .min-180{min-width:100%}
  .contact{padding:14px}
  .contact-side{padding:12px}
  .addr{padding:10px 10px}
  .step{padding:12px}
  summary{font-size:14px}
  .faq-body{font-size:13px}
  .market-grid{grid-template-columns:1fr}
  .marketbar{padding:12px;border-radius:18px}
  .marketbar-items{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
  .mk-item{padding:12px;border-radius:16px}
  .mk-price{font-size:15px}
  .mk-change{font-size:17px}
  .weatherbar{padding:12px;border-radius:18px}
  .weatherbar-items{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
  .wx-item{padding:12px 54px 12px 12px;border-radius:16px}
  .wx-temp{font-size:15px}
}

@media (prefers-reduced-motion: reduce){
  body:before{animation:none}
  .mouse-glow{display:none}
  .code.typer code::after{display:none}
}

@media (hover: none){
  :root{--mop:.22}
  .mouse-glow{filter:blur(22px)}
}