
:root {
  --bg: #030608;
  --bg-soft: #071015;
  --panel: rgba(8, 20, 27, 0.78);
  --panel-strong: #091820;
  --line: rgba(78, 221, 244, 0.18);
  --line-strong: rgba(78, 221, 244, 0.42);
  --cyan: #25dcf2;
  --cyan-2: #78efff;
  --silver: #e8edf0;
  --muted: #9caeb8;
  --danger: #ff7b7b;
  --success: #70e5b1;
  --shadow: 0 24px 80px rgba(0,0,0,.45);
  --max: 1180px;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--silver);
  background:
    radial-gradient(circle at 75% 10%, rgba(37,220,242,.09), transparent 32rem),
    radial-gradient(circle at 10% 70%, rgba(37,220,242,.05), transparent 28rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; background: var(--cyan); color: #001014; padding: 10px 14px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(3,6,8,.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 230px; }
.brand img { width: 230px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { text-decoration: none; color: var(--muted); padding: 10px 11px; border-radius: 10px; font-size: .92rem; font-weight: 700; }
.nav-links a:hover, .nav-links a.active { color: white; background: rgba(37,220,242,.08); }
.nav-cta { margin-left: 8px; border: 1px solid var(--line-strong); color: var(--cyan-2) !important; }
.menu-toggle { display:none; border:1px solid var(--line); background:var(--panel); color:white; width:44px; height:44px; border-radius:12px; font-size:1.35rem; }

.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,6,8,.97) 0%, rgba(3,6,8,.84) 38%, rgba(3,6,8,.22) 72%, rgba(3,6,8,.55) 100%),
    linear-gradient(0deg, rgba(3,6,8,1) 0%, rgba(3,6,8,0) 36%);
  z-index:1;
}
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.82; }
.hero-content { position:relative; z-index:2; max-width:720px; padding:110px 0 130px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--cyan-2); text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:900; }
.eyebrow::before { content:""; width:38px; height:1px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
h1,h2,h3 { line-height:1.1; margin-top:0; }
h1 { font-size:clamp(3rem, 7vw, 6.4rem); letter-spacing:-.055em; margin:24px 0; max-width:890px; }
h1 .accent, h2 .accent { color:var(--cyan-2); text-shadow:0 0 28px rgba(37,220,242,.25); }
.hero-copy { color:#b9c7ce; max-width:660px; font-size:clamp(1.02rem, 2vw, 1.22rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 20px; border-radius:12px; border:1px solid var(--line); background:rgba(8,20,27,.68); color:white; text-decoration:none; font-weight:850; letter-spacing:.01em; cursor:pointer; transition:.2s ease; }
.btn:hover { transform:translateY(-2px); border-color:var(--line-strong); background:rgba(16,39,48,.9); }
.btn-primary { background:linear-gradient(135deg, var(--cyan), #0797b1); color:#001014; border-color:transparent; box-shadow:0 10px 35px rgba(37,220,242,.2); }
.btn-primary:hover { background:linear-gradient(135deg, #71f1ff, #17bcd5); }
.btn-disabled, .btn[aria-disabled="true"] { opacity:.48; pointer-events:none; filter:grayscale(.3); }
.hero-meta { display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:42px; color:var(--muted); font-size:.9rem; }
.hero-meta span { display:flex; align-items:center; gap:8px; }
.hero-meta span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }

.section { padding:96px 0; position:relative; }
.section-tight { padding:68px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:42px; }
.section-head > div { max-width:760px; }
.section-kicker { color:var(--cyan-2); text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:900; margin-bottom:14px; }
.section h2 { font-size:clamp(2rem, 4vw, 3.5rem); letter-spacing:-.045em; margin-bottom:15px; }
.lead { color:var(--muted); font-size:1.06rem; }

.grid { display:grid; gap:20px; }
.grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.card { position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg, rgba(10,27,35,.86), rgba(4,11,15,.88)); border-radius:var(--radius); padding:27px; box-shadow:var(--shadow); }
.card::after { content:""; position:absolute; width:180px; height:180px; right:-110px; top:-110px; border:1px solid rgba(37,220,242,.15); border-radius:50%; }
.card:hover { border-color:rgba(37,220,242,.32); }
.card-number { color:var(--cyan-2); font-size:.76rem; font-weight:900; letter-spacing:.18em; }
.card h3 { font-size:1.25rem; margin:20px 0 10px; }
.card p { color:var(--muted); margin:0; }
.icon-box { width:48px; height:48px; border:1px solid var(--line-strong); border-radius:14px; display:grid; place-items:center; color:var(--cyan-2); background:rgba(37,220,242,.06); font-weight:950; }

.product-panel { display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:stretch; }
.product-visual { min-height:430px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#020405; position:relative; }
.product-visual img { width:100%; height:100%; object-fit:cover; }
.product-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(2,4,5,.7), transparent 50%); }
.product-copy { display:flex; flex-direction:column; justify-content:center; }
.list-clean { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px; }
.list-clean li { display:flex; align-items:flex-start; gap:12px; color:#bac9d0; }
.list-clean li::before { content:""; width:9px; height:9px; margin-top:.48em; flex:0 0 auto; border:2px solid var(--cyan); transform:rotate(45deg); }

.release-strip { border:1px solid var(--line); background:linear-gradient(135deg, rgba(37,220,242,.07), rgba(8,20,27,.92)); border-radius:var(--radius); padding:32px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.release-strip h3 { margin:0 0 8px; font-size:1.45rem; }
.release-status { color:var(--muted); }
.release-version { color:var(--cyan-2); font-weight:900; }

.video-shell { aspect-ratio:16/9; border-radius:var(--radius); border:1px solid var(--line); background:radial-gradient(circle at center, rgba(37,220,242,.12), transparent 42%), #050b0f; overflow:hidden; position:relative; display:grid; place-items:center; }
.video-shell iframe { width:100%; height:100%; border:0; }
.video-placeholder { text-align:center; padding:24px; max-width:540px; }
.play-mark { width:78px; height:78px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px; border:1px solid var(--line-strong); background:rgba(37,220,242,.07); box-shadow:0 0 45px rgba(37,220,242,.09); }
.play-mark::before { content:""; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:18px solid var(--cyan-2); margin-left:5px; }
.video-placeholder p { color:var(--muted); }

.page-hero { padding:120px 0 72px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(37,220,242,.05), transparent); }
.page-hero h1 { font-size:clamp(2.8rem, 7vw, 5rem); max-width:900px; margin-bottom:18px; }
.page-hero p { color:var(--muted); font-size:1.1rem; max-width:760px; }
.breadcrumb { color:var(--cyan-2); text-transform:uppercase; font-size:.74rem; font-weight:900; letter-spacing:.15em; }

.plugin-page-hero { padding-bottom:82px; }
.plugin-page-hero .hero-actions { margin-top:30px; }
.plugin-cover { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#020405; box-shadow:var(--shadow); }
.plugin-cover img { width:100%; aspect-ratio:1672/941; object-fit:cover; }
.plugin-intro { grid-template-columns:1.15fr .85fr; gap:52px; }
.plugin-body-copy { color:var(--muted); margin:18px 0 0; }
.plugin-highlights { padding:32px; }
.plugin-highlights h3 { font-size:1.4rem; }
.plugin-highlights .list-clean { margin-top:22px; }
.plugin-release { align-items:center; }
.plugin-release .release-status { margin:0; max-width:680px; }
.plugin-release-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; flex:0 0 auto; }

.download-grid { display:grid; gap:18px; }
.download-item { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:18px; border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:18px; }
.download-item h3 { margin:0 0 4px; font-size:1.06rem; }
.download-item p { color:var(--muted); margin:0; font-size:.9rem; }
.file-type { width:54px; height:54px; display:grid; place-items:center; border-radius:13px; border:1px solid var(--line); color:var(--cyan-2); font-weight:950; font-size:.75rem; }
.badge { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:rgba(37,220,242,.08); border:1px solid var(--line); color:var(--cyan-2); font-size:.72rem; font-weight:900; letter-spacing:.04em; }
.status-message { padding:16px 18px; border:1px solid var(--line); border-radius:14px; color:var(--muted); background:rgba(8,20,27,.6); }
.status-message.error { color:#ffc3c3; border-color:rgba(255,123,123,.3); }

.download-tool-meta {
  margin-top:8px !important;
  color:var(--cyan-2) !important;
  font-size:.82rem !important;
  font-weight:800;
  letter-spacing:.02em;
}

.map-tool-note {
  margin-top:18px;
  border-style:dashed;
}

.doc-card {
  min-height:250px;
  display:flex;
  flex-direction:column;
}

.doc-card > h3:first-child {
  margin-top:0;
}

.doc-card .btn {
  margin-top:auto;
  align-self:flex-start;
}

.manual-downloads {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:auto;
}

.doc-card .manual-downloads .btn {
  margin-top:0;
  align-self:auto;
}

.language-download {
  min-width:150px;
  justify-content:flex-start;
  padding:0 16px;
}

.language-flag {
  width:44px;
  height:30px;
  flex:0 0 auto;
  object-fit:cover;
  object-position:center;
  border-radius:7px;
  border:1px solid rgba(120,239,255,.42);
  box-shadow:0 0 14px rgba(37,220,242,.18);
}
.timeline { position:relative; display:grid; gap:20px; }
.timeline::before { content:""; position:absolute; left:16px; top:10px; bottom:10px; width:1px; background:var(--line-strong); }
.timeline-item { position:relative; padding-left:54px; }
.timeline-item::before { content:""; position:absolute; left:10px; top:9px; width:13px; height:13px; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px var(--cyan); }
.timeline-item .card { padding:23px; }
.timeline-meta { color:var(--cyan-2); font-size:.8rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.timeline-body { color:var(--muted); }
.timeline-body ul { padding-left:20px; }

.donate-box { max-width:820px; margin:0 auto; text-align:center; padding:52px; }
.donate-box p { color:var(--muted); max-width:620px; margin:0 auto 28px; }
.qr-placeholder {
  width:210px;
  aspect-ratio:1;
  margin:28px auto;
  border:1px dashed var(--line-strong);
  border-radius:18px;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:rgba(37,220,242,.035);
}

.qr-placeholder.qr-ready {
  padding:12px;
  border-style:solid;
  background:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.38);
}

.qr-placeholder.qr-ready img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.bug-report-layout { display:grid; grid-template-columns:minmax(250px, .7fr) minmax(0, 1.5fr); gap:24px; align-items:start; }
.bug-report-guide { position:sticky; top:100px; }
.bug-report-guide h2 { font-size:1.65rem; margin:24px 0 12px; letter-spacing:-.025em; }
.bug-report-guide .list-clean { margin-top:22px; }
.report-email { margin:28px 0 0 !important; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); }
.report-email a { color:var(--cyan-2); font-weight:800; overflow-wrap:anywhere; }
.bug-report-card { padding:38px; }
.bug-report-card h2 { font-size:clamp(2rem, 4vw, 3rem); margin-bottom:10px; letter-spacing:-.04em; }
.form-intro { margin:0 0 30px; color:var(--muted); }
.bug-report-form { position:relative; z-index:1; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field-wide { grid-column:1 / -1; }
.form-field label { color:#dce6ea; font-size:.9rem; font-weight:800; }
.form-field input,
.form-field select,
.form-field textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(2,8,11,.76);
  color:var(--silver);
  font:inherit;
  line-height:1.45;
  padding:13px 14px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field input,
.form-field select { min-height:50px; }
.form-field textarea { resize:vertical; min-height:104px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color:#71838d; }
.form-field select { color-scheme:dark; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--cyan); background:rgba(5,17,22,.95); box-shadow:0 0 0 3px rgba(37,220,242,.12); }
.form-consent { display:flex; align-items:flex-start; gap:12px; margin-top:24px; color:var(--muted); font-size:.88rem; cursor:pointer; }
.form-consent input { width:18px; height:18px; margin:3px 0 0; flex:0 0 auto; accent-color:var(--cyan); }
.form-consent a { color:var(--cyan-2); }
.form-actions { display:flex; align-items:center; gap:18px; margin-top:28px; }
.form-actions p { margin:0; color:var(--muted); font-size:.84rem; }
.form-honeypot { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(1px, 1px, 1px, 1px) !important; white-space:nowrap !important; }
.report-success-section { min-height:calc(100vh - 76px); display:grid; align-items:center; }
.report-success { max-width:760px; margin:0 auto; padding:56px; text-align:center; }
.report-success h1 { font-size:clamp(2.8rem, 7vw, 5rem); margin:18px auto; }
.report-success > p { max-width:620px; margin:0 auto; color:var(--muted); font-size:1.08rem; }
.report-success .hero-actions { justify-content:center; }
.success-mark { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 24px; border-radius:50%; border:1px solid rgba(112,229,177,.45); background:rgba(112,229,177,.08); color:var(--success); font-size:2rem; font-weight:900; box-shadow:0 0 35px rgba(112,229,177,.12); }

.site-footer { border-top:1px solid var(--line); background:#020405; padding:54px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3, .7fr); gap:34px; }
.footer-logo { width:260px; margin-bottom:15px; }
.footer-copy { color:var(--muted); max-width:450px; }
.footer-col h3 { font-size:.86rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cyan-2); }
.footer-col a { display:block; text-decoration:none; color:var(--muted); margin:9px 0; }
.footer-col a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); margin-top:36px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; color:#71838d; font-size:.84rem; }

.fade-up { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.fade-up.visible { opacity:1; transform:none; }

@media (max-width: 960px) {
  .menu-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:76px; left:20px; right:20px; flex-direction:column; align-items:stretch; padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(3,8,11,.97); box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 14px; }
  .nav-cta { margin-left:0; }
  .hero { min-height:690px; }
  .hero::before { background:linear-gradient(90deg, rgba(3,6,8,.95), rgba(3,6,8,.65)), linear-gradient(0deg, rgba(3,6,8,1), transparent 45%); }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .product-panel { grid-template-columns:1fr; }
  .plugin-intro { gap:30px; }
  .product-visual { min-height:350px; }
  .bug-report-layout { grid-template-columns:1fr; }
  .bug-report-guide { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 650px) {
  .container { width:min(calc(100% - 26px), var(--max)); }
  .brand img { width:190px; }
  .hero { min-height:640px; }
  .hero-content { padding:90px 0 110px; }
  h1 { font-size:clamp(2.7rem, 14vw, 4.3rem); }
  .section { padding:72px 0; }
  .section-head { display:block; }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .release-strip { align-items:flex-start; flex-direction:column; }
  .plugin-release-actions { width:100%; justify-content:flex-start; }
  .download-item { grid-template-columns:48px 1fr; }
  .download-item .btn { grid-column:1 / -1; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .donate-box { padding:30px 20px; }
  .bug-report-card { padding:28px 20px; }
  .form-grid { grid-template-columns:1fr; }
  .form-field-wide { grid-column:auto; }
  .form-actions { align-items:stretch; flex-direction:column; }
  .form-actions .btn { width:100%; }
  .report-success { padding:38px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .fade-up { opacity:1; transform:none; }
}
