:root{ --nav-h:80px;  --ink:#081f2f; --muted:#4a6172; --line:#e6edf3; --brand:#2468f2; --bg:#ffffff; --panel:#f6f9fc; }
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); font-size:17px; line-height:1.55; }
a{color:var(--brand);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:10}
.nav-inner{display:flex;gap:16px;align-items:center;min-height:80px}
.brand img{height:50px;display:block}
.nav-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.nav a.link{color:var(--ink);font-weight:600}
.lang{margin-left:auto;font-size:14px;color:var(--muted)}
@media (min-width:740px){ .nav-links a.link{margin-right:22px} }
.btn{ display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:700 }
.btn.ghost{background:#fff;color:var(--ink);border-color:#cfd9e3}
.hero{padding:28px 0 8px}
.hero h1{font-size:34px;margin:8px 0}
.hero p{font-size:18px;color:var(--muted);margin:8px 0 18px}
.hero-wrap{display:grid;gap:18px}
.panel{ background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.05) }
.section{padding:22px 0}
.features{display:grid;gap:30px;margin-top:16px}
.feature{display:block}
.feature h3{margin:0 0 8px;font-size:22px}
.feature p{margin:0;color:var(--muted)}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin-top:12px}
.shot img{width:100%;height:auto;display:block;cursor:zoom-in}
.note{font-size:16px;color:#385064}
footer{padding:28px 0;border-top:1px solid var(--line);text-align:center;color:var(--muted);margin-top:20px}
form .row{display:grid;gap:12px}
input,textarea{ width:100%;padding:12px;border:1px solid #cfd9e3;border-radius:12px;font-size:16px }
textarea{min-height:140px;resize:vertical}
#contact form .row:last-of-type{margin-bottom:16px}
#contact form button.btn{margin-top:10px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:16px;z-index:100}
.lightbox img{max-width:95vw;max-height:90vh;border-radius:10px}
@media (max-width:740px){
  :root{ --nav-h:96px; }

  .nav-inner{ display:grid;grid-template-columns:auto 1fr;grid-auto-rows:auto;align-items:center;padding:8px 10px;row-gap:6px;min-height:72px }
  .brand{grid-column:1;grid-row:1 / span 2}
  .nav-links{grid-column:2;grid-row:1;justify-content:flex-start}
  .lang{grid-column:2;grid-row:2;justify-self:start;margin-left:0;margin-top:4px}
  .container{padding:0 18px}
  .hero h1{font-size:44px}
}
@media (max-width:420px){ .container{padding:0 16px} .nav a.link{margin-right:8px} }
@media (min-width:1100px){
  body{font-size:18px}
  .hero h1{font-size:48px}
  .brand img{height:60px}
  .hero-wrap{grid-template-columns:1.1fr .9fr}
}

/* v12: make each feature stand out as its own card */
.features{gap:34px}
.feature{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  position:relative;
}
/* subtle accent stripe on the left */
.feature::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, rgba(36,104,242,.85), rgba(36,104,242,.55));
  border-radius:14px 0 0 14px;
}
/* alternate background tone to visually separate blocks */


/* clearer headings & spacing */
.feature h3{ font-size:24px; margin:0 0 10px; }
.feature p{ margin:0 0 8px; }
.feature .shot{ margin-top:14px; }

/* v14: hero full-width (no empty second column) */
.hero-wrap{display:block}
@media (min-width:1100px){
  .hero-wrap{display:block}
}

/* v15: anchor snap below sticky nav */
html{ scroll-behavior: smooth; }
.section, #features, #backups, #contact {}

/* v16: viewport-level anchor offset using actual nav height */
html{}

/* v18: simple, reliable anchor offset without JS */
:root{ --nav-h:80px; }
@media (max-width:740px){ :root{ --nav-h:96px; } }

html{ scroll-behavior: smooth; } /* optional */

.anchor{ position: relative; scroll-margin-top: calc(var(--nav-h) + 10px); }


/* v23: prevent margin-collapsing & ensure consistent gaps between cards */
.section{ padding-bottom:16px; }
.section .panel{ margin-top:16px; }
.section .panel:first-child{ margin-top:0; }
.features{ gap:30px; } /* keep strong separation between feature cards */

/* v24: add breathing room below the dashboard screenshot */
.panel.shot{ margin-bottom:16px; }