:root{
  --bg-0:#070A12;
  --bg-1:#0B1220;
  --card:#0F1B2E;
  --card-2:#0C1628;
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --muted-2:rgba(234,240,255,.58);
  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --accent:#6D5EF7;
  --accent-2:#33D1FF;
  --success:#34D399;
  --danger:#F87171;
  --radius:18px;
  --radius-sm:14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(109,94,247,.35), transparent 60%),
              radial-gradient(1000px 500px at 80% 20%, rgba(51,209,255,.22), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color: var(--text);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:#fff;
  color:#000;
  padding:10px 12px;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:12px; top:12px; }

.site-header{
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 65%);
}

.navbar{
  padding-top:18px;
  padding-bottom:18px;
}
.navbar-dark .navbar-nav .nav-link{
  color: rgba(234,240,255,.80);
}
.navbar-dark .navbar-nav .nav-link:hover{
  color: rgba(234,240,255,1);
}

.brand-mark{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(109,94,247,.85), rgba(51,209,255,.70));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand-mark i{ font-size:18px; color:#071022; }

.hero{
  padding: 42px 0 20px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.86);
  backdrop-filter: blur(10px);
}
.hero-badge i{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(255,255,255,.08);
}

.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border:0;
}
.btn-primary:hover{
  filter: brightness(1.05);
}
.btn-outline-light{
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.38);
  color: #fff;
}

.hero-metrics{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .hero-metrics{ grid-template-columns: 1fr 1fr; }
}
.metric{
  display:flex;
  gap:12px;
  padding: 12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
}
.metric-icon{
  width:38px;
  height:38px;
  border-radius: 14px;
  background: rgba(109,94,247,.18);
  border: 1px solid rgba(109,94,247,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.metric-icon i{ font-size:18px; color: rgba(234,240,255,.92); }
.metric-title{ font-weight: 650; }
.metric-desc{ color: var(--muted-2); font-size: .95rem; }

.hero-visual{
  position: relative;
  height: 430px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(900px 500px at 50% 0%, rgba(109,94,247,.24), transparent 60%),
              radial-gradient(900px 500px at 70% 60%, rgba(51,209,255,.16), transparent 60%),
              rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.hero-image{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 991.98px){
  .hero-visual{ height: 380px; }
}
.hero-glow{
  position:absolute;
  inset:-40%;
  background: conic-gradient(from 180deg, rgba(109,94,247,.35), rgba(51,209,255,.22), rgba(109,94,247,.35));
  filter: blur(80px);
  opacity: .55;
  animation: drift 10s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  50%{ transform: translate3d(2%, 1%, 0) rotate(10deg); }
}

.device{
  position:absolute;
  top: 52%;
  transform: translateY(-50%);
  width: 250px;
  height: 420px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.device-left{ left: 10%; transform: translateY(-50%) rotate(-8deg); }
.device-right{ right: 10%; transform: translateY(-50%) rotate(10deg); width: 240px; height: 400px; }
@media (max-width: 991.98px){
  .hero-visual{ min-height: 380px; }
  .device-left{ left: 8%; width: 230px; height: 390px; }
  .device-right{ right: 8%; width: 220px; height: 370px; }
}

.device-top{
  position:absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
}
.device-screen{
  position:absolute;
  inset: 48px 14px 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(12,22,40,.85), rgba(15,27,46,.70));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.screen-card{
  margin: 18px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.screen-title{
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.screen-lines span{
  display:block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
}
.screen-lines span:nth-child(2){ width: 92%; }
.screen-lines span:nth-child(3){ width: 84%; }
.screen-lines span:nth-child(4){ width: 70%; }
.screen-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }
.chip{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(109,94,247,.20);
  border:1px solid rgba(109,94,247,.28);
  color: rgba(234,240,255,.92);
  font-size: .85rem;
}

.screen-grid{
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-tile{
  height: 88px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120px 90px at 30% 30%, rgba(51,209,255,.22), transparent 70%),
    radial-gradient(120px 90px at 70% 70%, rgba(109,94,247,.20), transparent 70%),
    rgba(255,255,255,.05);
}

.section{
  padding: 72px 0;
}
.section-head{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px){
  .section-head{
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
  }
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.86);
}
.pill-soft{
  background: rgba(255,255,255,.03);
}

.section-apps{
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.02) 35%, transparent);
}

.apps-toolbar .form-control,
.apps-toolbar .form-select,
.apps-toolbar .input-group-text{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(234,240,255,.92);
}
.apps-toolbar .form-control::placeholder{ color: rgba(234,240,255,.52); }
.apps-toolbar .form-select option{ color:#111; }

.app-card{
  height: 100%;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 45px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction: column;
}
.app-card:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
}
.app-top{
  padding: 18px 18px 14px;
  display:flex;
  align-items:flex-start;
  gap: 12px;
}
.app-icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(109,94,247,.85), rgba(51,209,255,.72));
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.app-icon i{ font-size: 22px; color:#071022; }
.app-name{ font-weight: 750; letter-spacing: .2px; margin: 0; }
.app-meta{ color: var(--muted-2); font-size: .95rem; }
.app-body{ padding: 0 18px 16px; }
.app-desc{ color: var(--muted); margin-bottom: 12px; }
.app-tags{ display:flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-tags li{
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.86);
}
.app-shots{
  padding: 0 18px 18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.shot{
  aspect-ratio: 9/16;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(80px 110px at 30% 30%, rgba(51,209,255,.22), transparent 70%),
    radial-gradient(80px 110px at 70% 80%, rgba(109,94,247,.20), transparent 70%),
    rgba(255,255,255,.04);
  position: relative;
  overflow:hidden;
}
.shot::after{
  content:"";
  position:absolute;
  inset: -60% -60%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.10), transparent 60%);
  transform: rotate(15deg);
  animation: shine 2.6s ease-in-out infinite;
  opacity:.65;
}
@keyframes shine{
  0%{ transform: translateX(-20%) rotate(15deg); }
  55%{ transform: translateX(35%) rotate(15deg); }
  100%{ transform: translateX(35%) rotate(15deg); opacity:0; }
}

.app-actions{
  padding: 0 18px 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}
.btn-play{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  text-decoration:none;
}
.btn-play:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
}
.btn-play .play-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
}

.empty-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding: 16px 18px;
  border-radius: var(--radius);
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}
.empty-icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(248,113,113,.10);
  border:1px solid rgba(248,113,113,.22);
  color: rgba(255,255,255,.92);
}
.empty-icon i{ font-size: 18px; }

.section-about{
  background: radial-gradient(900px 380px at 20% 10%, rgba(109,94,247,.16), transparent 60%);
}
.feature-list{ display:flex; flex-direction: column; gap: 12px; }
.feature{
  display:flex;
  gap:12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.feature i{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(51,209,255,.10);
  border:1px solid rgba(51,209,255,.22);
}
.feature-title{ font-weight: 700; }
.feature-desc{ color: var(--muted-2); }

.about-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.about-card-top{
  padding: 18px;
  background: radial-gradient(650px 260px at 10% 0%, rgba(51,209,255,.18), transparent 60%),
              radial-gradient(650px 260px at 80% 30%, rgba(109,94,247,.18), transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.about-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(234,240,255,.88);
  font-size: .85rem;
}
.about-title{ font-size: 1.35rem; font-weight: 780; margin-top: 10px; }
.about-subtitle{ color: var(--muted-2); }
.about-card-body{ padding: 18px; display:grid; gap: 12px; }
.about-stat{
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.about-stat-label{ color: var(--muted-2); font-size: .9rem; }
.about-stat-value a{ color: rgba(234,240,255,.92); }
.about-stat-value a:hover{ color: #fff; }
.about-card-footer{ padding: 18px; border-top:1px solid rgba(255,255,255,.08); }

.section-contact{
  background: radial-gradient(800px 380px at 80% 20%, rgba(51,209,255,.14), transparent 60%);
}
.contact-cards{
  display:flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.contact-card{
  display:flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.contact-icon{
  width:42px;
  height:42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(109,94,247,.12);
  border:1px solid rgba(109,94,247,.22);
}
.contact-title{ font-weight: 700; }
.contact-value a{ color: rgba(234,240,255,.92); }
.contact-value a:hover{ color:#fff; }
.contact-note{ font-size: .9rem; }

.contact-form-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 18px;
}
.contact-form-card .form-control,
.contact-form-card .form-label,
.contact-form-card textarea{
  color: rgba(234,240,255,.92);
}
.contact-form-card .form-control,
.contact-form-card textarea{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.contact-form-card .form-control:focus,
.contact-form-card textarea:focus{
  box-shadow: 0 0 0 .25rem rgba(109,94,247,.18);
  border-color: rgba(109,94,247,.55);
}
.contact-form-card .invalid-feedback{
  color: rgba(248,113,113,.92);
}

.site-footer{
  padding: 38px 0 48px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.footer-title{
  font-weight: 700;
  margin-bottom: 10px;
}
.footer-links{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap: 8px;
}
.footer-links a{
  color: rgba(234,240,255,.78);
  text-decoration:none;
}
.footer-links a:hover{ color:#fff; }
.footer-mini{ font-size: .92rem; }

code{
  color: rgba(234,240,255,.92);
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
}