:root{
  --bg:#07080b;
  --bg2:#0b0d12;
  --text:#f2f4f8;
  --muted:rgba(242,244,248,.72);
  --hair:rgba(242,244,248,.10);
  --hair2:rgba(242,244,248,.14);
  --card:rgba(255,255,255,.05);
  --card2:rgba(255,255,255,.07);
  --shadow: 0 30px 120px rgba(0,0,0,.55);
  --radius:22px;
  --max:1160px;

  --a1:#b8f6ff;
  --a2:#d7b7ff;
  --a3:#b8ffcc;
  --a4:#ffddb8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,.05), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(183,153,255,.08), transparent 55%),
              radial-gradient(900px 600px at 20% 50%, rgba(184,255,204,.06), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2) 60%, #05060a);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 28px}
@media (max-width: 640px){
  .container{padding:0 18px}
}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,8,11,.78), rgba(7,8,11,.25));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar{
  height:70px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600;
  letter-spacing:.2px;
}
.brand-dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 60%, rgba(255,255,255,.05));
  box-shadow: 0 0 24px rgba(255,255,255,.22);
}
.icon-btn{
  width:44px; height:44px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);}
.hamburger{width:18px; height:12px; position:relative}
.hamburger:before,.hamburger:after, .hamburger i{
  content:""; position:absolute; left:0; right:0; height:1.6px; border-radius:2px;
  background: rgba(242,244,248,.9);
}
.hamburger:before{top:0}
.hamburger i{top:5px}
.hamburger:after{bottom:0}

.menu-panel{
  position:fixed; inset:0;
  z-index:100;
  display:none;
  background: rgba(6,7,10,.68);
  backdrop-filter: blur(18px);
}
.menu-panel.in{display:block}
.menu-card{
  position:absolute; top:86px; right:28px;
  width:min(420px, calc(100% - 36px));
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.menu-head{
  padding:16px 16px 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.menu-title{font-weight:600; opacity:.85}
.menu-close{
  width:36px;height:36px;border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease;
}
.menu-close:hover{transform:translateY(-1px); background: rgba(255,255,255,.09);}
.menu-body{padding: 6px 16px 16px}
.menu-links{display:grid; gap:10px; padding:10px 0 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.menu-links a{
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.menu-links a:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18);}
.menu-social{display:flex; flex-wrap:wrap; gap:8px; padding-top:14px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,244,248,.86);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.pill:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18);}
small{color: rgba(242,244,248,.55)}

.section{padding: 84px 0}
.section.tight{padding: 56px 0}
@media (max-width: 900px){ .section{padding: 72px 0} }
@media (max-width: 640px){ .section{padding: 56px 0} }

.hero{
  position:relative;
  padding: 86px 0 40px;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-140px -140px auto -140px; height:620px;
  pointer-events:none;
}
.orb{
  position:absolute; border-radius:999px;
  filter: blur(30px);
  opacity:.55;
  mix-blend-mode: screen;
  animation: drift 10s ease-in-out infinite alternate;
}
.orb.one{ width:520px; height:520px; left: -120px; top:-40px; background: radial-gradient(circle at 30% 30%, rgba(184,246,255,.9), rgba(184,246,255,0) 62%); animation-duration: 12s;}
.orb.two{ width:560px; height:560px; right: -140px; top: 40px; background: radial-gradient(circle at 30% 30%, rgba(215,183,255,.8), rgba(215,183,255,0) 60%); animation-duration: 14s;}
.orb.three{ width:460px; height:460px; left: 26%; top: 180px; background: radial-gradient(circle at 30% 30%, rgba(184,255,204,.75), rgba(184,255,204,0) 60%); animation-duration: 16s;}
@keyframes drift{ from{transform: translate3d(0,0,0) scale(1)} to{transform: translate3d(20px,14px,0) scale(1.06)} }

.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:end;
  position:relative;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; align-items:start;}
}

.kicker-row{display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(242,244,248,.86);
  font-size:13px;
}
.chip .dot{width:7px;height:7px;border-radius:50%; background: rgba(255,255,255,.8); box-shadow:0 0 16px rgba(255,255,255,.3)}
h1{
  margin:0 0 14px;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: clamp(44px, 6vw, 86px);
  line-height: .92;
  letter-spacing: -1.4px;
}
.lede{
  margin:0 0 22px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 56ch;
}

.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(242,244,248,.92);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);}
.btn.primary{ background: rgba(242,244,248,.95); color:#0a0b10; border-color: rgba(255,255,255,.45);}
.btn.primary:hover{ background: rgba(242,244,248,.98); transform: translateY(-1px);}

.tags-row{display:flex; gap:8px; flex-wrap:wrap; color: rgba(242,244,248,.75); font-size:13px}
.tags-row span{padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}

.hero-panel{
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 140px rgba(0,0,0,.55);
  overflow:hidden;
  position:relative;
}
.hero-panel:before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(600px 280px at 10% 0%, rgba(184,246,255,.18), transparent 55%),
              radial-gradient(600px 280px at 90% 100%, rgba(215,183,255,.16), transparent 55%);
  pointer-events:none;
}
.panel-inner{padding:18px 18px 16px; position:relative}
.panel-top{display:flex; align-items:center; justify-content:space-between; padding-bottom:12px}
.panel-title{font-weight:600; color: rgba(242,244,248,.85); font-size:13px}
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-size:12.5px; color: rgba(242,244,248,.78);
}
.status-pill .led{
  width:7px;height:7px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.1));
  box-shadow: 0 0 14px rgba(184,246,255,.35);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:.55} 50%{opacity:1} }

.panel-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 980px){
  .panel-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 520px){
  .panel-grid{grid-template-columns: 1fr;}
}
.stat{
  border-radius: 16px;
  padding:12px 12px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  position:relative;
  overflow:hidden;
}
.stat:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06);}
.stat .num{font-family:"Space Grotesk", Inter, sans-serif; font-weight:700; font-size:22px; letter-spacing:-.6px}
.stat .label{margin-top:4px; color: rgba(242,244,248,.72); font-size:12.5px}
.stat .led{
  position:absolute; top:12px; right:12px;
  width:8px;height:8px;border-radius:50%;
  animation: blink 2.1s ease-in-out infinite;
  filter: blur(.0px);
}
.stat.a1 .led{background: var(--a1); box-shadow:0 0 16px rgba(184,246,255,.45)}
.stat.a2 .led{background: var(--a2); box-shadow:0 0 16px rgba(215,183,255,.45)}
.stat.a3 .led{background: var(--a3); box-shadow:0 0 16px rgba(184,255,204,.45)}
.stat.a4 .led{background: var(--a4); box-shadow:0 0 16px rgba(255,221,184,.45)}
.disclaimer{margin:10px 0 0; font-size:12.5px; color: rgba(242,244,248,.50)}

.rotator{
  display:inline-block;
  perspective: 800px;
  vertical-align:baseline;
  margin-left: 8px;
}
.rotator .word{
  display:inline-block;
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  padding: 0 .04em;
}

.ticker{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.ticker-track{
  display:flex;
  gap: 12px;
  align-items:center;
  white-space:nowrap;
  padding: 14px 0;
  animation: marquee 22s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state: paused}
@keyframes marquee{ from{transform: translateX(0)} to{transform: translateX(-50%)} }
.tool-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(242,244,248,.82);
  font-size:13px;
}
.tool-ico{
  width:18px;height:18px;border-radius:6px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.tool-ico.a1{background: rgba(184,246,255,.14); border-color: rgba(184,246,255,.24)}
.tool-ico.a2{background: rgba(215,183,255,.14); border-color: rgba(215,183,255,.24)}
.tool-ico.a3{background: rgba(184,255,204,.14); border-color: rgba(184,255,204,.24)}
.tool-ico.a4{background: rgba(255,221,184,.14); border-color: rgba(255,221,184,.24)}

.h2{
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -.7px;
  margin:0 0 12px;
}
.p{margin:0; color: var(--muted); line-height:1.7}

.split-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.split-head .right{max-width: 60ch}

.work-carousel{
  position:relative;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.carousel-track{
  display:flex;
  gap: 14px;
  padding: 18px;
  align-items:stretch;
  animation: workmarquee 28s linear infinite;
  will-change: transform;
}
.work-carousel:hover .carousel-track{animation-play-state: paused}
@keyframes workmarquee{ from{transform: translateX(0)} to{transform: translateX(-50%)} }

.work-card{
  width: 280px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transform: translateZ(0);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.work-card:hover{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06)}
.work-card img{width:100%; height:190px; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.02)}
.work-meta{padding:12px 12px 12px}
.work-title{font-weight:600; font-size:14px; margin:0 0 4px}
.work-sub{margin:0; font-size:12.5px; color: rgba(242,244,248,.62)}
.work-tag{
  position:absolute; top:12px; left:12px;
  padding:7px 10px; border-radius:999px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  backdrop-filter: blur(10px);
}
.cursor-label{
  position:absolute;
  inset:auto 12px 12px auto;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(242,244,248,.92);
  color:#090a0f;
  font-size:12px;
  font-weight:600;
  transform: translateY(6px);
  opacity:0;
  transition: opacity .14s ease, transform .14s ease;
}
.work-card:hover .cursor-label{opacity:1; transform: translateY(0)}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 900px){ .grid-3{grid-template-columns: 1fr; } }

.service-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.service-card:before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(520px 240px at 10% 0%, rgba(184,246,255,.12), transparent 55%),
              radial-gradient(520px 240px at 90% 110%, rgba(255,221,184,.10), transparent 55%);
  pointer-events:none;
  opacity:.9;
}
.service-card h3{margin:0 0 8px; font-family:"Space Grotesk"; letter-spacing:-.4px}
.service-card ul{margin:10px 0 0; padding-left: 16px; color: rgba(242,244,248,.78); line-height:1.75}
.service-card li{margin: 4px 0}
.service-icon{
  width:38px;height:38px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
  margin-bottom: 12px;
}

footer{
  border-top:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  padding: 34px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 860px){
  .footer-grid{grid-template-columns: 1fr; }
}
.footer-title{font-weight:700; font-family:"Space Grotesk"; letter-spacing:-.4px; margin:0 0 10px}
.footer-col a{display:inline-block; padding:8px 0; color: rgba(242,244,248,.78)}
.footer-col a:hover{color: rgba(242,244,248,.95)}
.footer-note{margin-top:18px; color: rgba(242,244,248,.52); font-size:12.5px}

.modal{
  position:fixed; inset:0; z-index:120;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px);
  display:none;
}
.modal.in{display:block}
.modal-card{
  position:absolute; inset: 70px 28px 28px 28px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,8,11,.62);
  box-shadow: var(--shadow);
  overflow:hidden;
}
@media (max-width: 640px){
  .modal-card{inset: 70px 14px 14px 14px;}
}
.modal-top{
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal-top .t{font-weight:600; color: rgba(242,244,248,.86)}
.modal-close{
  width:40px;height:40px;border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:grid; place-items:center;
  cursor:pointer;
}
.modal-body{height: calc(100% - 56px); overflow:auto; display:grid; place-items:center; padding: 18px}
.modal-body img{max-width:100%; max-height: 78vh; border-radius: 16px; border:1px solid rgba(255,255,255,.12)}

.reveal{opacity:1; transform:none; filter:none}
.js .reveal{opacity:0; transform: translateY(18px); filter: blur(6px); transition: opacity .7s ease, transform .7s ease, filter .7s ease}
.js .reveal.inview{opacity:1; transform: translateY(0); filter: blur(0)}