:root{
  --bg:#07111f;
  --bg2:#0b1728;
  --panel:rgba(16,30,52,.78);
  --panel2:rgba(22,39,67,.72);
  --line:rgba(147,177,255,.18);
  --text:#eef5ff;
  --muted:#a9bad2;
  --accent:#58a6ff;
  --accent2:#7c5cff;
  --green:#38d99a;
  --brown:#c79b58;
  --shadow:0 24px 80px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(88,166,255,.18), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(124,92,255,.2), transparent 35%),
    linear-gradient(180deg, var(--bg), #050913 80%);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
button,a{font:inherit}

.siteHeader{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:16px clamp(18px,4vw,60px);
  background:rgba(7,17,31,.76);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}
.brandMark{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:900;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 32px rgba(88,166,255,.35);
}
.brand strong{display:block;font-size:1.05rem}
.brand small{display:block;color:var(--muted);font-size:.78rem}

.navLinks{
  display:flex;
  gap:24px;
  color:var(--muted);
}
.navLinks a:hover{color:var(--text)}

.navActions{display:flex;align-items:center;gap:10px}

.primaryBtn,.secondaryBtn,.ghostBtn,.langBtn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.primaryBtn{
  border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 12px 36px rgba(88,166,255,.25);
  font-weight:800;
}
.secondaryBtn:hover,.ghostBtn:hover,.langBtn:hover{background:rgba(255,255,255,.08)}
.big{padding:14px 22px;font-weight:800}

.hero{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  gap:48px;
  padding:84px clamp(18px,5vw,80px) 60px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#cfe3ff;
  background:rgba(88,166,255,.08);
  font-size:.88rem;
  margin-bottom:16px;
}
h1{
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.98;
  letter-spacing:-.055em;
  margin:0 0 22px;
}
h2{
  font-size:clamp(2rem,3.2vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.04em;
  margin:0;
}
h3{line-height:1.2}
.heroText p{
  color:var(--muted);
  font-size:1.15rem;
  max-width:680px;
}
.heroCtas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.platformStrip{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;color:#c8d8ee;
}
.platformStrip span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:8px 12px;
  border-radius:999px;
}

.heroMockup,.searchMock{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,31,53,.9),rgba(9,19,35,.86));
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:18px;
  overflow:hidden;
}
.mockTopbar{
  display:flex;align-items:center;gap:7px;color:var(--muted);padding-bottom:14px;
}
.mockTopbar span{width:10px;height:10px;border-radius:50%;background:#42556d}
.mockTopbar strong{margin-left:10px;font-size:.9rem}
.mockToolbar,.mockSearch,.searchControls{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
.mockToolbar button,.mockToolbar select,.mockSearch button,.searchControls button{
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;
}
.mockSearch{
  display:grid;
  grid-template-columns:1fr 160px auto;
  align-items:end;
}
.mockSearch div,.searchControls span{
  border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);
}
.mockSearch label{display:block;color:var(--muted);font-size:.75rem}
.mockSearch p{margin:3px 0 0;color:#dfeaff;font-size:.9rem}

.mockTable,.searchMock table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.mockTable th,.mockTable td,.searchMock th,.searchMock td{
  padding:12px;
  border-bottom:1px solid rgba(147,177,255,.12);
  text-align:left;
  white-space:nowrap;
}
.mockTable th,.searchMock th{color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.green{background:var(--green)}
.brown{background:var(--brown)}

.trust{
  margin:0 clamp(18px,5vw,80px);
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.035);
}

.section{
  padding:86px clamp(18px,5vw,80px);
}
.sectionHead{
  max-width:850px;
  margin-bottom:36px;
}
.featureGrid,.pricingGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.featureCard,.priceCard,.steps article,details{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:24px;
  padding:24px;
  box-shadow:0 14px 48px rgba(0,0,0,.18);
}
.featureCard .icon{font-size:2rem}
.featureCard p,.steps p,details p,.showcaseText p{color:var(--muted)}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.steps strong{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}

.showcase{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:34px;
  align-items:center;
}
.searchControls{
  display:grid;
  grid-template-columns:1fr 180px 160px auto;
}
.pricingGrid{grid-template-columns:repeat(3,1fr)}
.priceCard{position:relative}
.priceCard.featured{
  border-color:rgba(88,166,255,.55);
  transform:translateY(-10px);
  box-shadow:0 26px 90px rgba(88,166,255,.2);
}
.badge{
  position:absolute;right:18px;top:18px;
  padding:6px 10px;border-radius:999px;
  background:rgba(56,217,154,.14);color:#b9ffe4;border:1px solid rgba(56,217,154,.28);
  font-size:.8rem;font-weight:800;
}
.price{font-size:2.6rem;font-weight:900;margin:10px 0}
.price span{font-size:1rem;color:var(--muted)}
.priceCard ul{padding-left:20px;color:#d9e7fb;min-height:135px}
.priceCard li{margin:8px 0}

.faq details{margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:800}

.finalCta{
  margin:40px clamp(18px,5vw,80px) 80px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(88,166,255,.16),rgba(124,92,255,.14));
  border-radius:32px;
  padding:50px;
  text-align:center;
}
.finalCta h2{margin-bottom:24px}

.footer{
  border-top:1px solid var(--line);
  padding:28px clamp(18px,5vw,80px);
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  color:var(--muted);
}
.footer nav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:1050px){
  .hero,.showcase{grid-template-columns:1fr}
  .featureGrid{grid-template-columns:repeat(2,1fr)}
  .navLinks{display:none}
}
@media (max-width:760px){
  .siteHeader{flex-wrap:wrap}
  .navActions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .featureGrid,.pricingGrid,.steps{grid-template-columns:1fr}
  .mockSearch,.searchControls{grid-template-columns:1fr}
  .hero{padding-top:54px}
  .footer{display:block}
}