:root{
  /* Base */
  --bg:#070a14;
  --text:#f2f5ff;
  --muted:rgba(220,228,255,.78);
  --stroke:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.09);

  /* Accents (global defaults) */
  --a:#7c3aed;   /* violet */
  --b:#22c55e;   /* green */
  --c:#06b6d4;   /* cyan */
  --d:#f97316;   /* orange */
  --e:#fb7185;   /* rose */
  --y:#fbbf24;   /* amber */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-size:16px;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 620px at 10% 0%, rgba(124,58,237,.22), transparent 55%),
    radial-gradient(900px 620px at 90% 10%, rgba(6,182,212,.16), transparent 55%),
    radial-gradient(880px 620px at 60% 95%, rgba(249,115,22,.10), transparent 60%),
    linear-gradient(180deg, #070a14, #050610 55%, #04040c);
}

h1,h2,h3,.brand__name{
  font-family:"Sora","Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:-0.02em;
}
h1{line-height:1.12}
h2{line-height:1.18}
h3{line-height:1.22}
p{line-height:1.65}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1120px,92vw); margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:.95rem}
.lead{font-size:1.08rem; color:rgba(242,245,255,.88)}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.02rem;
  border-radius:18px;
  border:1px solid transparent;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  user-select:none;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--solid{
  background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.92), rgba(251,113,133,.88));
  color:#070a14;
}
.btn--ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
.btn--link{
  padding:.55rem .15rem;
  border:0;
  background:transparent;
  color:rgba(242,245,255,.92);
}
.btn:hover{filter:brightness(1.06); text-decoration:none}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,10,20,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 0;
}
.brand{display:flex; align-items:center; gap:.65rem; font-weight:900}
.brand__mark{
  width:40px;height:40px; display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(6,182,212,.18), rgba(124,58,237,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.brand__name{font-size:1.05rem}
.nav{display:flex; align-items:center; gap:.9rem}
.nav a{color:rgba(220,228,255,.86); font-weight:800}
.nav a:hover{color:#fff}
.navbtn{
  display:none;
  width:46px;height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
}

/* Section base */
.section{padding:3.2rem 0; position:relative}
.section::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.9;
}
.section .container{position:relative; z-index:1}
.section__head{max-width:760px}
.section__head h2{margin:.15rem 0 .55rem; font-size:clamp(1.55rem,2.2vw,2.05rem)}
.section__head p{margin:0}

/* ============== HERO (Block 1) ============== */
.hero{
  position:relative;
  padding:3.5rem 0 2.2rem;
}
.hero::before{
  content:"";
  position:absolute; inset:-2px 0 0 0;
  background:
    radial-gradient(900px 520px at 12% 20%, rgba(251,113,133,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(6,182,212,.18), transparent 60%),
    linear-gradient(180deg, rgba(124,58,237,.10), transparent 60%);
  pointer-events:none;
}
.hero__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:2rem; align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.46rem .78rem;
  border-radius:999px;
  background:rgba(251,113,133,.14);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900; color:#fff;
}
.pill--alt{background:rgba(6,182,212,.14)}
.hero h1{font-size:clamp(2.05rem,3.7vw,3.1rem); margin:.95rem 0 .85rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem}
.hero__chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem}
.chip{
  display:inline-flex; align-items:center; gap:.52rem;
  padding:.54rem .76rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(220,228,255,.88);
  font-weight:800;
}
.hero__media{position:relative}
.img{
  width:100%; height:auto;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 80px rgba(0,0,0,.52);
}
.floatcard{
  position:absolute; right:1rem; bottom:1rem;
  width:min(360px, 88%);
  padding:.95rem 1.05rem;
  border-radius:20px;
  background:rgba(7,10,20,.70);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 60px rgba(0,0,0,.50);
}
.floatcard__top{display:flex; align-items:center; gap:.55rem; margin-bottom:.4rem}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--b);
  box-shadow:0 0 0 6px rgba(34,197,94,.18);
}

/* ============== STATS BAND (Block 2) ============== */
.band{padding:1.6rem 0 2.4rem; position:relative}
.band--stats::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,182,212,.10), rgba(124,58,237,.08), rgba(249,115,22,.08));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1rem;
  position:relative;
}
.stat{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  padding:1.1rem;
}
.stat__icon{
  width:46px;height:46px;border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(249,115,22,.18), rgba(251,191,36,.14));
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:.85rem;
}
.stat__title{font-weight:950}

/* Card systems */
.cards{display:grid; gap:1rem; margin-top:1.25rem}
.cards--3{grid-template-columns: repeat(3, 1fr)}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  padding:1.25rem;
  box-shadow:0 16px 46px rgba(0,0,0,.30);
}
.card__icon{
  width:50px;height:50px;border-radius:20px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
}
.card h3{margin:.95rem 0 .5rem}
.list{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.62rem}
.list li{display:flex; gap:.62rem; align-items:flex-start}
.list i{margin-top:.15rem}
.list--big li{padding:.2rem 0}

/* ============== PLATFORM (Block 3) ============== */
.section--platform::before{
  background:
    radial-gradient(920px 520px at 18% 0%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(920px 520px at 82% 20%, rgba(34,197,94,.14), transparent 62%);
}
.section--platform .card__icon{background:rgba(6,182,212,.14)}
.section--platform .card:nth-child(2) .card__icon{background:rgba(34,197,94,.14)}
.section--platform .card:nth-child(3) .card__icon{background:rgba(124,58,237,.14)}
.section--platform .list i{color:var(--b)}

/* ============== METHOD (Block 4) ============== */
.section--method{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.section--method::before{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(124,58,237,.18), transparent 62%),
    radial-gradient(900px 520px at 90% 30%, rgba(251,191,36,.14), transparent 64%);
}
.split{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:1.7rem; align-items:center;
}
.split--reverse{grid-template-columns: 1.1fr .9fr}
.timeline{margin-top:1.2rem; display:grid; gap:.9rem}
.step{
  display:flex; gap:.9rem; align-items:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  padding: .95rem 1.05rem;
}
.step__n{
  width:36px;height:36px;border-radius:14px;
  display:grid; place-items:center;
  background:rgba(251,191,36,.16);
  border:1px solid rgba(255,255,255,.12);
  font-weight:950;
  color:#fff;
}
.step__t{font-weight:950; margin-bottom:.15rem}
.callout{
  margin-top:1.25rem;
  display:flex; gap:.9rem; align-items:flex-start;
  padding: 1.05rem 1.15rem;
  border-radius:24px;
  background: linear-gradient(135deg, rgba(251,113,133,.12), rgba(6,182,212,.12), rgba(251,191,36,.10));
  border:1px solid rgba(255,255,255,.12);
}
.callout i{margin-top:.2rem; color:var(--y)}

/* ============== CASES (Block 5) ============== */
.section--cases::before{
  background:
    radial-gradient(920px 520px at 15% 20%, rgba(249,115,22,.16), transparent 62%),
    radial-gradient(920px 520px at 85% 0%, rgba(6,182,212,.14), transparent 62%);
}
.mosaic{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:1rem;
}
.tile{
  grid-column: span 3;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  padding:1.25rem;
  position:relative;
  overflow:hidden;
  box-shadow:0 16px 46px rgba(0,0,0,.30);
}
.tile--wide{grid-column: span 4}
.tile--tall{grid-column: span 2}
.tile__icon{
  width:48px;height:48px;border-radius:20px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
}
.tile:nth-child(1) .tile__icon{background:rgba(249,115,22,.16)}
.tile:nth-child(2) .tile__icon{background:rgba(6,182,212,.16)}
.tile:nth-child(3) .tile__icon{background:rgba(251,113,133,.16)}
.tile:nth-child(4) .tile__icon{background:rgba(124,58,237,.16)}
.tile h3{margin:.9rem 0 .45rem}
.tile__img{
  width:100%;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  margin-top:1rem;
}

/* ============== REVIEWS (Block 6) ============== */
.section--reviews{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.section--reviews::before{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(34,197,94,.16), transparent 62%),
    radial-gradient(900px 520px at 85% 20%, rgba(251,113,133,.14), transparent 62%);
}
.quotes{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1rem;
}
.quote{
  margin:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  padding:1.25rem;
  box-shadow:0 16px 46px rgba(0,0,0,.30);
}
.quote__stars{color:var(--y); display:flex; gap:.25rem}
.quote blockquote{margin:.9rem 0 1.05rem; line-height:1.68; font-size:1.05rem}
.quote figcaption{display:flex; gap:.6rem; align-items:center}

/* ============== FAQ (Block 7) ============== */
.section--faq::before{
  background:
    radial-gradient(920px 520px at 20% 0%, rgba(124,58,237,.18), transparent 62%),
    radial-gradient(920px 520px at 90% 30%, rgba(6,182,212,.14), transparent 62%);
}
.accordion{margin-top:1.25rem; display:grid; gap:.8rem}
.acc{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  overflow:hidden;
}
.acc__btn{
  width:100%;
  text-align:left;
  padding:1.05rem 1.05rem;
  border:0;
  background:rgba(255,255,255,.03);
  color:#fff;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
}
.acc__btn i{color:rgba(242,245,255,.85)}
.acc__panel{
  display:none;
  padding: 0 1.05rem 1.05rem 1.05rem;
  color:rgba(220,228,255,.9);
  line-height:1.7;
}
.acc.is-open .acc__panel{display:block}
.acc.is-open .acc__btn{background:rgba(124,58,237,.14)}

/* Note blocks */
.note{
  margin-top:1.3rem;
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.05rem 1.15rem;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
}
.note i{margin-top:.2rem; color:var(--c)}

/* ============== CONTACT (Block 8) ============== */
.section--contact{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.07);
}
.section--contact::before{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(251,113,133,.16), transparent 62%),
    radial-gradient(900px 520px at 88% 25%, rgba(249,115,22,.14), transparent 62%);
}
.contact{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:1.7rem;
  align-items:start;
}
.form{margin-top:1rem}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
.label{
  display:block;
  margin-bottom:.45rem;
  font-weight:950;
  color:rgba(242,245,255,.92);
}
.input{
  width:100%;
  padding:.88rem 1rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:#fff;
  outline:none;
  font-size:1rem;
}
.input:focus{
  border-color: rgba(251,113,133,.55);
  box-shadow:0 0 0 .25rem rgba(251,113,133,.14);
}
.input.is-bad{
  border-color: rgba(251,113,133,.85)!important;
  box-shadow:0 0 0 .25rem rgba(251,113,133,.12)!important;
}
select.input{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(242,245,255,.85) 50%),
    linear-gradient(135deg, rgba(242,245,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 52%,
    calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right: 2.4rem;
}
.mt{margin-top:1rem}
.actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.contact__box{
  margin-top:1rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  padding:1.15rem;
}
.meta{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.meta:first-child{border-top:0; padding-top:.1rem}
.meta i{color:var(--y); margin-top:.2rem}

/* About modifiers */
.pagehero{padding:3.4rem 0 2.1rem; position:relative}
.pagehero--about::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(6,182,212,.18), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(249,115,22,.14), transparent 62%);
  pointer-events:none;
}
.pagehero--compact{padding:3.05rem 0 1.85rem}
.pagehero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:1.7rem;
  align-items:center;
}
.section--about-values::before{
  background: radial-gradient(920px 520px at 20% 0%, rgba(34,197,94,.14), transparent 62%);
}
.section--about-impact{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.section--about-impact::before{
  background: radial-gradient(900px 520px at 85% 0%, rgba(124,58,237,.18), transparent 62%);
}
.section--about-faq::before{
  background: radial-gradient(900px 520px at 15% 20%, rgba(251,113,133,.14), transparent 62%);
}

/* Docs */
.pagehero--docs::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(124,58,237,.18), transparent 62%),
    radial-gradient(900px 520px at 88% 10%, rgba(6,182,212,.14), transparent 62%);
  pointer-events:none;
}
.section--docs::before{
  background: radial-gradient(900px 520px at 80% 0%, rgba(251,191,36,.12), transparent 62%);
}
.policy{display:grid; gap:1rem}
.policy__block{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  padding:1.25rem;
}
.policy__block h2{margin:.2rem 0 .45rem; font-size:1.15rem}

/* Footer */
.footer{
  padding:2.9rem 0 1.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .7fr .9fr;
  gap:1.25rem;
}
.footer__brand{display:flex; align-items:center; gap:.65rem}
.footer__name{font-weight:950}
.footer__title{font-weight:950; margin:.2rem 0 .65rem}
.footer__col a{display:block; padding:.25rem 0; color:rgba(220,228,255,.86); font-weight:800}
.footer__col a:hover{color:#fff}
.footer__meta{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.55rem}
.footer__meta li{display:flex; gap:.65rem; align-items:flex-start}
.footer__meta i{color:var(--c); margin-top:.2rem}
.footer__bottom{
  margin-top:1.65rem;
  padding-top:1.05rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.footer__links{display:flex; gap:1rem; flex-wrap:wrap}
.form__row{display:flex; gap:.6rem; align-items:center}
.form__row .input{flex:1}

/* Cookie (Home only) */
.cookie{
  position:fixed; left:0; right:0; bottom:0;
  z-index:60;
  background:linear-gradient(135deg, rgba(6,182,212,.92), rgba(124,58,237,.88), rgba(251,113,133,.86));
  color:#070a14;
  border-top:1px solid rgba(0,0,0,.12);
}
.cookie__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.95rem 0;
}
.cookie__title{font-weight:950; display:flex; gap:.55rem; align-items:center}
.cookie .muted{color:rgba(7,10,20,.72)}
.cookie__actions{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.cookie .btn--ghost{background:rgba(255,255,255,.24); border-color:rgba(0,0,0,.10); color:#070a14}
.cookie .btn--solid{background:#070a14; color:#fff}

/* Popup */
.popup{
  position:fixed; inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.58);
  z-index:80;
  padding:1rem;
}
.popup.is-open{display:grid}
.popup__card{
  width:min(560px, 96vw);
  border-radius:26px;
  background:rgba(7,10,20,.92);
  border:1px solid rgba(255,255,255,.14);
  padding:1.3rem 1.3rem;
  box-shadow:0 30px 90px rgba(0,0,0,.60);
  position:relative;
  text-align:center;
}
.popup__close{
  position:absolute; right:.85rem; top:.85rem;
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff; cursor:pointer;
}
.popup__icon{
  width:66px;height:66px;
  border-radius:24px;
  display:grid; place-items:center;
  margin:.25rem auto .8rem;
  background:rgba(34,197,94,.16);
  border:1px solid rgba(255,255,255,.12);
  font-size:1.45rem;
}
.popup__title{margin:.2rem 0 .55rem}
.popup__text{margin:0 auto 1.1rem; max-width: 50ch; color:rgba(220,228,255,.92)}

/* Spacing helper */
.spacer{height:1.4rem}

/* Responsive */
@media (max-width: 980px){
  .navbtn{display:inline-grid; place-items:center}
  .nav{
    position:absolute;
    top: 74px;
    right: 4vw;
    left: 4vw;
    display:none;
    flex-direction:column;
    gap:.6rem;
    padding: .95rem;
    border-radius:22px;
    background:rgba(7,10,20,.92);
    border:1px solid rgba(255,255,255,.14);
  }
  .nav.is-open{display:flex}
  .hero__grid, .split, .contact, .pagehero__grid{grid-template-columns:1fr}
  .stats{grid-template-columns: repeat(2, 1fr)}
  .cards--3{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr}
  .tile, .tile--wide, .tile--tall{grid-column:auto}
  .quotes{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .form__row{flex-direction:column; align-items:stretch}
}
@media (max-width: 540px){
  .footer__grid{grid-template-columns:1fr}
  .cookie__inner{flex-direction:column; align-items:flex-start}
}