:root{
  --bg0: #070812;
  --bg1: #0b1026;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.18);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.56);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --r: 18px;
  --r2: 28px;
  --gradA: linear-gradient(135deg, #36e2ff 0%, #ff4fd8 45%, #8a7bff 100%);
  --gradB: linear-gradient(135deg, #ffdf4f 0%, #36e2ff 45%, #ff4fd8 100%);
  --gradC: radial-gradient(800px circle at 15% 10%, rgba(54,226,255,.35), transparent 55%),
            radial-gradient(900px circle at 85% 20%, rgba(255,79,216,.28), transparent 55%),
            radial-gradient(900px circle at 60% 90%, rgba(138,123,255,.28), transparent 55%);
}

*{box-sizing:border-box}
html{font-size:18px; scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg0);
  background-image: var(--gradC);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
button, input, textarea{font:inherit}

.container{width:min(1160px, calc(100% - 2.2rem)); margin:0 auto}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(10,12,26,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding: .9rem 0}

.brand{display:flex; align-items:center; gap:.6rem}
.brand__mark{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: var(--gradA);
  box-shadow: 0 14px 40px rgba(255,79,216,.20);
}
.brand__text{font-weight:800; letter-spacing:.2px}
.brand__tag{
  font-size:.78rem;
  padding:.22rem .5rem;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.86);
}

.navbtn{
  display:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  width:46px; height:46px;
}

.nav{display:flex; gap:1.05rem; align-items:center}
.nav a{
  color: rgba(255,255,255,.86);
  padding:.55rem .65rem;
  border-radius: 12px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.nav a:hover{background: rgba(255,255,255,.08); transform: translateY(-1px)}
.nav__cta{
  background: var(--gradA);
  color: #0b0b14;
  font-weight:800;
  border: none;
  box-shadow: 0 14px 42px rgba(54,226,255,.20);
}
.nav__cta:hover{background: var(--gradB)}

.hero{
  padding: 3.2rem 0 1.8rem;
}
.hero__grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:1.5rem; align-items:stretch}
.hero__card{
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero__content{padding: 2.2rem 2.2rem 2rem}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
}
.kicker i{color: rgba(255,255,255,.92)}
.hero h1{
  margin:1.05rem 0 .75rem;
  font-size: clamp(2.05rem, 3.3vw, 3.05rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero p{margin:0 0 1.25rem; color: var(--muted)}
.hero__actions{display:flex; gap:.7rem; flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.78rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10)}
.btn--bright{
  background: var(--gradA);
  color: #0b0b14;
  border-color: transparent;
  font-weight:900;
}
.btn--bright:hover{background: var(--gradB)}
.btn--ghost{background: rgba(255,255,255,.02)}
.btn--dark{background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.18)}

.hero__media{
  height:100%;
  display:grid;
  place-items:stretch;
}
.hero__imgwrap{
  position:relative;
  height:100%;
  border-radius: var(--r2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.hero__imgwrap img{width:100%; height:100%; object-fit:cover; transform: scale(1.02)}
.hero__imgwrap::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(7,8,18,.45) 0%, rgba(7,8,18,.10) 60%, rgba(7,8,18,.55) 100%);
}
.hero__badge{
  position:absolute; left:1rem; bottom:1rem;
  z-index:2;
  width: calc(100% - 2rem);
  padding: .95rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
}
.hero__badge strong{display:block; font-size:1.05rem}
.hero__badge span{display:block; color: var(--muted); font-size:.95rem; margin-top:.2rem}

.section{padding: 2.7rem 0}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem}
.section__title{margin:0; font-size: clamp(1.45rem, 2vw, 1.85rem); letter-spacing:-.01em}
.section__lead{margin:0; color: var(--muted); max-width: 52ch}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
.card{
  border-radius: var(--r2);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
  overflow:hidden;
  position:relative;
}
.card__pad{padding: 1.25rem 1.25rem 1.15rem}
.card__icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom:.85rem;
}
.card__icon i{background: var(--gradA); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.35rem}
.card h3{margin:.1rem 0 .55rem; font-size:1.15rem}
.card p{margin:0; color: var(--muted)}
.card__meta{margin-top:.9rem; display:flex; gap:.55rem; flex-wrap:wrap}
.pill{
  font-size:.85rem;
  padding:.28rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}

.case{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1rem;
  align-items:stretch;
}
.case__media{border-radius: var(--r2); overflow:hidden; border: 1px solid rgba(255,255,255,.10)}
.case__media img{height:100%; width:100%; object-fit:cover}
.case__content{padding: 1.25rem 1.25rem 1.15rem}
.case__title{display:flex; align-items:center; justify-content:space-between; gap:.7rem}
.case__title h3{margin:.2rem 0 .2rem}
.tag{
  font-size:.8rem;
  padding:.3rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
}
.list{margin:.75rem 0 0; padding-left:1.1rem; color: var(--muted)}
.list li{margin:.35rem 0}
.case__metrics{margin-top: .9rem; display:flex; gap:.7rem; flex-wrap:wrap}
.metric{
  padding:.55rem .7rem;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.metric strong{display:block; font-weight:900}
.metric span{display:block; color: var(--muted2); font-size:.9rem; margin-top:.12rem}

.banner{
  border-radius: var(--r2);
  background: linear-gradient(135deg, rgba(54,226,255,.20), rgba(255,79,216,.16), rgba(138,123,255,.16));
  border: 1px solid rgba(255,255,255,.14);
  padding: 1.35rem 1.35rem 1.2rem;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.banner__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem; align-items:center}
.banner h3{margin:.1rem 0 .45rem; font-size:1.25rem}
.banner p{margin:0; color: var(--muted)}
.banner__mini{display:grid; grid-template-columns: repeat(2, 1fr); gap:.8rem}
.mini{
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: .95rem .95rem .9rem;
}
.mini strong{display:block; font-size:1.15rem}
.mini span{display:block; color: var(--muted2); margin-top:.1rem}

.testimonial{
  padding: 1.2rem 1.2rem 1.05rem;
}
.quote{
  margin:0;
  color: rgba(255,255,255,.86);
  line-height:1.55;
}
.person{
  margin-top: .95rem;
  display:flex; gap:.75rem; align-items:center;
}
.avatar{
  width:46px; height:46px; border-radius: 16px;
  background: var(--gradA);
  display:grid; place-items:center;
  color:#0b0b14; font-weight:900;
}
.person strong{display:block}
.person span{display:block; color: var(--muted2); font-size:.9rem; margin-top:.05rem}

.faq{display:grid; gap:.8rem}
.faq__item{
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.faq__q{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: 1.05rem 1.15rem;
  background: transparent;
  border:0;
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.faq__q span{font-weight:800}
.faq__q i{opacity:.8}
.faq__a{
  max-height:0;
  overflow:hidden;
  transition: max-height .22s ease;
  border-top: 1px solid rgba(255,255,255,.08);
}
.faq__a > div{padding: 1rem 1.15rem 1.1rem; color: var(--muted)}
.faq__item[data-open="true"] .faq__a{max-height: 320px}
.faq__item[data-open="true"] .faq__q i{transform: rotate(180deg)}

.form{
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 1.25rem 1.25rem 1.15rem;
}
.form__grid{display:grid; grid-template-columns: 1fr 1fr; gap:.85rem}
.form__row{display:flex; gap:.75rem; align-items:center}
label{display:block; margin-bottom:.35rem; color: rgba(255,255,255,.86); font-weight:700}
input, textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  outline:none;
}
input:focus, textarea:focus{border-color: rgba(54,226,255,.60); box-shadow: 0 0 0 4px rgba(54,226,255,.14)}
textarea{min-height: 140px; resize:vertical}
.form__note{margin:.65rem 0 0; color: var(--muted2); font-size:.92rem}
.form--compact{padding: 1.05rem 1.05rem 1rem}
.form--compact .form__row input{flex: 1}

.footer{
  margin-top: 2.5rem;
  background: #050610;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:1.4rem; padding: 2.2rem 0}
.footer a{display:block; color: rgba(255,255,255,.78); padding:.35rem 0}
.footer a:hover{color: rgba(255,255,255,.95)}
.footer__brand{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem}
.footer__mark{
  width:42px; height:42px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.footer__name{font-weight:900}
.footer__badge{
  font-size:.78rem;
  padding:.2rem .5rem;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
}
.footer__text{margin:.6rem 0 0; color: rgba(255,255,255,.70); line-height:1.55}
.footer__meta{margin-top:1rem; display:grid; gap:.45rem; color: rgba(255,255,255,.72)}
.footer__meta i{width:1.2rem; opacity:.9}
.footer__title{margin:0 0 .6rem; font-size:1.05rem}
.footer__bottom{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.1rem 0; color: rgba(255,255,255,.68); border-top:1px solid rgba(255,255,255,.08)}
.footer__links{display:flex; gap:.95rem; flex-wrap:wrap}
.footer__links a{padding:0}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
}
.modal[data-open="true"]{display:flex}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.58)}
.modal__card{
  position:relative;
  width:min(520px, calc(100% - 2.2rem));
  border-radius: var(--r2);
  background: rgba(15,18,45,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.35rem 1.25rem;
  backdrop-filter: blur(18px);
}
.modal__icon{
  width:54px; height:54px;
  border-radius: 18px;
  background: rgba(54,226,255,.16);
  border: 1px solid rgba(54,226,255,.28);
  display:grid; place-items:center;
  margin-bottom:.65rem;
}
.modal__icon i{background: var(--gradA); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.55rem}
.modal__title{margin:.1rem 0 .45rem}
.modal__text{margin:0 0 1rem; color: var(--muted)}

.cookie{
  position:fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index:90;
  display:none;
}
.cookie[data-show="true"]{display:block}
.cookie__card{
  border-radius: var(--r2);
  background: rgba(15,18,45,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.05rem 1rem;
  backdrop-filter: blur(18px);
  display:flex;
  gap:1rem;
  align-items:flex-start;
  justify-content:space-between;
}
.cookie__text{color: rgba(255,255,255,.78); line-height:1.45; margin:0}
.cookie__actions{display:flex; gap:.65rem; align-items:center; flex-wrap:wrap}
.cookie__actions a{color: rgba(255,255,255,.90); text-decoration:underline}

.pagehead{padding: 2.35rem 0 1.2rem}
.pagehead__card{
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 1.65rem 1.55rem 1.4rem;
  box-shadow: var(--shadow);
}
.pagehead h1{margin:0 0 .55rem; font-size: clamp(1.9rem, 2.4vw, 2.35rem)}
.pagehead p{margin:0; color: var(--muted); max-width: 72ch}
.prose{
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  padding: 1.35rem 1.35rem 1.25rem;
  line-height:1.7;
}
.prose h2{margin:1.2rem 0 .45rem; font-size:1.25rem}
.prose h3{margin:1rem 0 .35rem; font-size:1.1rem}
.prose p{margin:.45rem 0; color: rgba(255,255,255,.80)}
.prose ul{margin:.5rem 0; padding-left:1.2rem; color: rgba(255,255,255,.80)}
.prose li{margin:.3rem 0}
.prose .callout{
  margin: .9rem 0;
  padding: .9rem .95rem;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:1rem}
  .case{grid-template-columns:1fr}
  .banner__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr; gap:1.2rem}
}

@media (max-width: 860px){
  .navbtn{display:inline-grid; place-items:center}
  .nav{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 72px;
    width: min(680px, calc(100% - 1.6rem));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.35rem;
    padding:.6rem;
    border-radius: 18px;
    background: rgba(15,18,45,.92);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.72rem .85rem}
  .nav__cta{text-align:center}
}

@media (max-width: 760px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .cookie__card{flex-direction:column; align-items:stretch}
}