@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#12101c; --bg-alt:#171426; --surface:#1b1830; --surface-2:#211c3a; --border:#2a2440;
  --text:#f0eef7; --text-dim:#b0a9c9; --text-faint:#8b85a8;
  --accent:#4ce0d2; --accent-strong:#7ff0e5; --accent-soft:#16332f;
  --gold:#b388ff; --gold-soft:#2a2144; --danger:#ff6f8f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(76,224,210,.14), 0 12px 32px -14px rgba(0,0,0,.7);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Sora',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background: radial-gradient(1100px 500px at 15% -10%, #241c3a 0%, var(--bg) 55%);
  background-color:var(--bg); background-attachment:fixed;
  color:var(--text); font-family:var(--body); line-height:1.5; overflow-x:hidden;
}
img{ max-width:100% }
a{ color:inherit }
h1,h2,h3{ font-family:var(--display); text-wrap:balance; margin:0 }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important } }

.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.5em;
}
.kicker::before{ content:''; width:1.4em; height:1px; background:var(--accent); opacity:.6 }

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.6rem; backdrop-filter:blur(10px);
  background:rgba(18,16,28,.55); border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.topbar.scrolled{ border-color:var(--border); background:rgba(18,16,28,.85) }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:1.05rem }
.brand img{ width:28px; height:28px; border-radius:7px }
.topnav{ display:flex; align-items:center; gap:1.8rem }
.topnav a{ font-size:.88rem; color:var(--text-dim); text-decoration:none; transition:color .15s ease }
.topnav a:hover{ color:var(--text) }
.topbar-right{ display:flex; align-items:center; gap:1rem }

.lang-switch{
  display:flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.8rem;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:.45rem .85rem .45rem .65rem; cursor:pointer; color:var(--text-dim);
  transition:border-color .15s ease, color .15s ease;
}
.lang-switch:hover{ border-color:var(--accent); color:var(--text) }
.lang-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.lang-switch svg{ width:14px; height:14px; stroke:currentColor; flex:none }
.lang-switch b{ color:var(--text); font-weight:600 }

@media (max-width:820px){ .topnav{ display:none } }

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--body); font-weight:700; font-size:.98rem; padding:.9rem 1.6rem; border-radius:12px;
  border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color:#0a1512;
  box-shadow: 0 10px 30px -12px rgba(76,224,210,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -12px rgba(76,224,210,.65) }
.btn-primary[disabled], .btn-primary.is-pending{ opacity:.55; cursor:progress; pointer-events:none }
.btn-ghost{ background:var(--surface); border-color:var(--border); color:var(--text) }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent) }

/* ---------- HERO ---------- */
.hero{
  min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:10vh 1.5rem 4rem; position:relative;
}
.hero-icon{ width:104px; height:104px; border-radius:24px; margin-bottom:1.75rem; box-shadow: var(--shadow), 0 0 0 1px var(--border); animation: float 7s ease-in-out infinite }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.hero h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:800; letter-spacing:-.02em; background:linear-gradient(180deg, var(--text) 30%, var(--text-dim)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero .sub{ margin-top:1.1rem; max-width:46ch; color:var(--text-dim); font-size:1.15rem }
.accent-word{ color:var(--accent-strong); -webkit-text-fill-color:var(--accent-strong) }
.hero-actions{ display:flex; gap:.9rem; margin-top:2.4rem; flex-wrap:wrap; justify-content:center }
.scroll-hint{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.72rem; color:var(--text-faint); letter-spacing:.1em; display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.8 }
.scroll-hint .line{ width:1px; height:28px; background:linear-gradient(var(--accent), transparent); animation:pulse 1.8s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ---------- SECTION SHELL ---------- */
.section{ padding:6rem 1.5rem; max-width:1120px; margin:0 auto }
.section-head{ text-align:center; margin-bottom:3.5rem }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:.7rem }
.section-head p{ color:var(--text-dim); max-width:56ch; margin:.9rem auto 0 }

/* ---------- FEATURE CARDS ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:2rem; display:grid; grid-template-columns:1.1fr 1fr; gap:2.2rem; align-items:center;
  margin-bottom:1.6rem; box-shadow:var(--shadow);
  opacity:0; transform:translateY(48px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), border-color .15s ease;
}
.card.in-view{ opacity:1; transform:translateY(0) }
.card:nth-child(even){ grid-template-columns:1fr 1.1fr }
.card:nth-child(even) .card-shot{ order:2 }
.card:hover{ border-color:var(--accent) }
.card-tag{ font-family:var(--mono); font-size:.72rem; color:var(--gold); letter-spacing:.08em; text-transform:uppercase }
.card h3{ font-size:1.5rem; margin-top:.5rem }
.card p{ color:var(--text-dim); margin-top:.7rem; font-size:.98rem }
.card-more{ color:var(--text-dim); margin-top:.7rem; font-size:.95rem; max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease }
.card.expanded .card-more{ max-height:16em; opacity:1 }
.learn{ margin-top:1.1rem; background:none; border:none; padding:0; font-family:var(--mono); font-size:.78rem; color:var(--accent); display:inline-flex; align-items:center; gap:.4rem; cursor:pointer }
.learn::after{ content:'→'; transition:transform .15s ease }
.card.expanded .learn::after{ content:'↑'; }
.card:hover .learn::after{ transform:translateX(3px) }
.card-shot{ aspect-ratio:14/9; border-radius:12px; border:1px solid var(--border); background:linear-gradient(135deg, var(--bg-alt), var(--surface)); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center }
.card-shot img{ width:100%; height:100%; object-fit:cover; display:block }
.card-shot::before{ content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 34px) }
.card-shot span{ font-family:var(--mono); font-size:.72rem; color:var(--text-faint); z-index:1; letter-spacing:.05em }

@media (max-width:760px){
  .card{ grid-template-columns:1fr !important; padding:1.5rem }
  .card:nth-child(even) .card-shot{ order:0 }
}

/* ---------- LIVE DEMO ---------- */
.demo-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.4rem }
@media (max-width:900px){ .demo-grid{ grid-template-columns:1fr } }
.demo-widget{
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.5rem;
  display:flex; flex-direction:column; gap:1rem; min-height:280px; box-shadow:var(--shadow); position:relative;
}
.demo-widget h3{ font-size:1rem; font-family:var(--body); font-weight:700 }
.demo-search-row{ display:flex; gap:.5rem }
.demo-input{
  flex:1; background:var(--bg-alt); border:1px solid var(--border); border-radius:9px; padding:.6rem .8rem;
  color:var(--text); font-family:var(--body); font-size:.9rem;
}
.demo-input:focus{ outline:none; border-color:var(--accent) }
.demo-btn-mini{
  background:var(--accent-soft); color:var(--accent-strong); border:1px solid var(--border); border-radius:9px;
  padding:.6rem .9rem; font-family:var(--mono); font-size:.78rem; cursor:pointer;
}
.demo-list{ display:flex; flex-direction:column; gap:.5rem; font-family:var(--mono); font-size:.8rem }
.demo-row{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--border); padding-bottom:.4rem; color:var(--text-dim) }
.demo-row b{ color:var(--text); font-family:var(--body) }
.demo-overlay{
  position:absolute; inset:0; border-radius:18px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; background:rgba(18,16,28,.82); backdrop-filter:blur(2px);
  color:var(--text-faint); font-size:.85rem;
}

/* ---------- DOWNLOAD ---------- */
.download-panel{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--border); border-radius:24px; padding:3.5rem 2rem; text-align:center; box-shadow:var(--shadow);
}
.download-version{ margin-top:1rem; font-family:var(--mono); font-size:.82rem; color:var(--text-faint) }
.download-note{ margin-top:1.4rem; font-size:.85rem; color:var(--text-faint) }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); padding:1.3rem 0 }
.faq-item summary{ cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{ content:'+'; font-family:var(--mono); color:var(--accent); font-size:1.3rem }
.faq-item[open] summary::after{ content:'–' }
.faq-item p{ color:var(--text-dim); margin-top:.8rem; font-size:.95rem }

/* ---------- FOOTER ---------- */
footer{ text-align:center; padding:3rem 1.5rem; border-top:1px solid var(--border); }
footer .brand{ justify-content:center; margin-bottom:.6rem }
footer p{ font-family:var(--mono); font-size:.75rem; color:var(--text-faint); margin:.2rem 0 }
footer a{ color:var(--text-dim); text-decoration:none; border-bottom:1px solid transparent }
footer a:hover{ color:var(--accent); border-bottom-color:color-mix(in srgb, var(--accent) 45%, transparent) }
footer .footer-contact{ margin-top:.8rem }