:root{
  --bg0:#070a12;
  --bg1:#0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);
  --line: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --a1:#6ee7ff;   /* cyan */
  --a2:#a78bfa;   /* purple */
  --a3:#34d399;   /* green */
  --danger:#fb7185;

  --max: 1180px;
  --r: 18px;
  --r2: 26px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 12px 40px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1100px 650px at 20% 10%, rgba(167,139,250,.12), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(110,231,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

.wrap{width:min(var(--max), calc(100% - 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}
.skip{
  position:absolute;left:-9999px;top:10px;z-index:9999;
  background:#fff;color:#000;border-radius:999px;padding:.6rem .9rem
}
.skip:focus{left:10px}

/* Header */
.top{
  position:sticky; top:0; z-index:50;
  background: rgba(7,10,18,.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.top__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 0;
}
.brand{display:flex; align-items:center;}
.brand__logo{
  height:70px; width:auto;
  border-radius: 10px;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}
.nav{display:flex;align-items:center;gap:1rem}
.nav__btn{
  display:none;
  width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.nav__bars{display:block;width:18px;height:2px;background:rgba(255,255,255,.85);margin:0 auto;position:relative}
.nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:rgba(255,255,255,.85)}
.nav__bars::before{top:-6px}
.nav__bars::after{top:6px}

.nav__menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:.35rem;
}
.nav__menu a{
  padding:.55rem .75rem;
  border-radius:999px;
  color: rgba(255,255,255,.82);
  font-size: 0.95rem;
  transition: background .15s ease, color .15s ease;
}
.nav__menu a:hover{background: rgba(255,255,255,.06); color:#fff;}

/* Language switcher */
.lang{display:inline-flex;gap:.35rem;align-items:center;margin-left:.25rem;}
.lang__link{
  font-size:.85rem;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
}
.lang__link:hover{background: rgba(255,255,255,.08); color:#fff;}
.lang__link.is-active{
  border-color: rgba(110,231,255,.35);
  background: rgba(110,231,255,.12);
  color:#fff;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;
  padding:.9rem 1.05rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  cursor:pointer;
  white-space:nowrap;
  font-weight: 650;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow);}
.btn--small{padding:.62rem .9rem; font-size: 0.9rem;}
.btn--primary{
  background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
  border-color: rgba(110,231,255,.35);
  color:#08101a;
  font-weight: 900;
}
.btn--ghost{background: rgba(255,255,255,.02)}

/* HERO */
.hero{
  position:relative;
  padding: 5.5rem 0 3.8rem;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute; inset:0;
  background-image: url("pic1.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index:0;
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(900px 520px at 22% 20%, rgba(110,231,255,.18), rgba(7,10,18,.75)),
    radial-gradient(900px 520px at 80% 10%, rgba(167,139,250,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.40), rgba(7,10,18,.86));
}
.hero__grid{
  position:absolute; inset:0; z-index:2;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.35;
  mask-image: radial-gradient(70% 70% at 25% 20%, #000 45%, transparent 70%);
}
.hero__content{position:relative; z-index:3}
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  border-radius: 999px;
  padding: .35rem .7rem;
  margin:0 0 1rem;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 24px rgba(110,231,255,.25);
}
.hero__title{
  margin:0 0 1rem;
  font-size: clamp(2.1rem, 3.4vw, 3.5rem);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight: 820;
}
.hero__title2{display:block;color: rgba(255,255,255,.86); font-weight: 420; margin-top: 0.55rem;}
.hero__lead{max-width:78ch;margin:0 0 1.5rem;color: rgba(255,255,255,.78); font-size: 1.08rem;}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin: 1.45rem 0 1.1rem}
.hero__note{margin:0;color:rgba(255,255,255,.70);font-size:.95rem}

/* Sections */
.section{padding:5rem 0}
.section--alt{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(110,231,255,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 30%, rgba(167,139,250,.10), transparent 60%),
    rgba(255,255,255,.02);
}
.head h2{
  margin:0 0 .5rem;
  font-size: clamp(1.75rem, 2.2vw, 2.35rem);
  letter-spacing:-.03em;
}
.head p{margin:0;color:var(--muted);max-width:86ch; font-size: 1.08rem;}
.head--invert h2,.head--invert p{color:rgba(255,255,255,.96)}

/* Cards */
.cards{
  margin-top:2rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1.05rem;
}
.card{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--r2);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow-soft);
}
.card--soft{
  background: var(--card2);
}
.card h3{margin:.2rem 0 .45rem; font-size:1.15rem;}
.card p{margin:0 0 .9rem; color:var(--muted)}
.list{margin:0;padding-left:1.1rem;color:rgba(255,255,255,.78)}
.list li{margin:.25rem 0}
.list--compact li{margin:.2rem 0}

/* Workflow */
.flow{margin:2rem 0 0; padding:0; list-style:none; display:grid; gap:.75rem}
.flow__item{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1rem 1.05rem;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--r2);
}
.flow__n{
  width:42px;height:42px;border-radius:14px;
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.18));
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;
  font-weight:900;
  color:rgba(255,255,255,.9);
  flex:0 0 auto;
}
.flow__item h3{margin:0 0 .25rem}
.flow__item p{margin:0;color:var(--muted)}

/* Screens */
.screens{margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.shot{
  margin:0;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--r2);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.shot img{width:100%;height:auto}
.shot figcaption{padding:.85rem 1rem;color:rgba(255,255,255,.78);font-size:.95rem}

.ctaBar{
  margin-top:1.3rem;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: var(--r2);
  padding: 1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.muted{color:var(--muted); margin:.2rem 0 0}

/* FAQ */
.faq{margin-top:1.6rem; display:grid; gap:.7rem}
.faq__item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--r2);
  padding:.15rem .9rem;
}
.faq__item summary{
  cursor:pointer;
  padding: .85rem .2rem;
  font-weight: 700;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";
  float:right;
  color: rgba(255,255,255,.70);
  font-weight: 900;
}
.faq__item[open] summary::after{content:"–";}
.faq__body{padding: 0 .2rem 1rem}
.faq__body p{margin:0;color:var(--muted)}

/* Contact */
.contact{
  position:relative;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(110,231,255,.12), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(167,139,250,.12), transparent 60%),
    rgba(255,255,255,.02);
  border-top:1px solid var(--line);
}
.contact__grid{
  margin-top:2rem;
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap:1.1rem;
  align-items:start;
}
.form{
  border:1px solid var(--line);
  background: rgba(0,0,0,.20);
  border-radius: var(--r2);
  padding: 1.15rem 1.15rem;
  box-shadow: var(--shadow-soft);
}
.form label{display:block; margin:.65rem 0}
.form span{display:block; font-weight:700; margin:0 0 .35rem}
.form input,.form select,.form textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: .75rem .85rem;
  outline:none;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color: rgba(110,231,255,.35); box-shadow: 0 0 0 3px rgba(110,231,255,.12)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.actions{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:.85rem}
.hint{margin:0; color: rgba(255,255,255,.78)}
.legal{margin:.85rem 0 0; color: rgba(255,255,255,.60); font-size:.92rem}

.side{display:grid; gap:1.1rem}
.side__card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--r2);
  padding: 1.05rem 1.05rem;
  box-shadow: var(--shadow-soft);
}
.side__card h3{margin:0 0 .6rem}
.ticks{margin:0;padding-left:1.1rem;color:rgba(255,255,255,.80)}
.ticks li{margin:.25rem 0}
.side a{color: var(--a1); text-decoration: underline; text-decoration-color: rgba(110,231,255,.35)}

/* Footer */
.foot{
  border-top:1px solid var(--line);
  background: rgba(7,10,18,.55);
}
.foot__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: 1.4rem 0;
}
.foot__links{display:flex; gap:.7rem; flex-wrap:wrap}
.foot__links a{
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.foot__links a:hover{background: rgba(255,255,255,.06);}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
}

/* Responsive */
@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .screens{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav__btn{display:inline-flex; align-items:center; justify-content:center;}
  .nav__menu{
    position:absolute;
    right: 1rem;
    top: 70px;
    width: min(92vw, 420px);
    flex-direction: column;
    align-items: stretch;
    gap:.15rem;
    padding:.65rem;
    border-radius: var(--r2);
    border:1px solid var(--line);
    background: rgba(7,10,18,.92);
    box-shadow: var(--shadow);
    display:none;
  }
  .nav__menu.is-open{display:flex;}
  .nav__menu a{display:block; padding:.72rem .85rem}
  .lang{justify-content:flex-start; padding:.35rem .15rem}
  .row{grid-template-columns:1fr}
  .foot__inner{flex-direction:column; align-items:flex-start}
}