:root{
  --bg:#0b1a2b;
  --ink:#0b1a2b;
  --ink-2:#29405d;
  --brand:#ff7a00;
  --paper:#f7fbff;
  --muted:#6b7b90;
  --radius:1.2rem;
  --shadow:0 10px 25px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;display:block}
.container{width:min(1100px, 92%); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eef2f7;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-weight:800}
.brand img{width:42px; height:auto; border-radius:.3rem; box-shadow:var(--shadow)}
.main-nav{display:flex; gap:1rem; align-items:center}
.main-nav a{padding:.5rem .8rem; border-radius:.6rem; text-decoration:none; color:var(--ink); font-weight:600}
.main-nav a:hover{background:#f3f6fb}

.hamburger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer}
.hamburger span{width:26px; height:3px; background:var(--ink); border-radius:3px; display:block}

@media (max-width: 840px){
  .hamburger{display:flex}
  .main-nav{position:fixed; inset:58px 0 auto 0; background:#fff; border-bottom:1px solid #eef2f7; padding:1rem; display:none; flex-direction:column}
  .main-nav.show{display:flex}
}

/* Sections */
.section{padding:5rem 0}
.hero{background:linear-gradient(180deg, #fefefe, #f3f8ff)}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero-text h1{font-size:clamp(2rem, 3vw + 1rem, 3.2rem); line-height:1.1; margin:0 0 1rem}
.hero-text h1 span{color:var(--brand)}
.hero-text p{max-width:60ch; color:var(--ink-2)}
.hero-art img{border-radius:1rem; box-shadow:var(--shadow)}
.cta{display:inline-block; background:var(--brand); color:#fff; font-weight:800; padding:.9rem 1.1rem; border-radius:.8rem; text-decoration:none; margin-top:1rem; box-shadow:var(--shadow)}

@media (max-width: 840px){
  .hero-inner{grid-template-columns: 1fr}
  .hero-art{order:-1}
}

/* Contact */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
.contact-card{background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow)}
.contact-card h2{margin-top:0}

.contact-form{display:grid; gap:.6rem}
.contact-form label{font-weight:600}
.contact-form input, .contact-form textarea{
  padding:.8rem; border-radius:.7rem; border:1px solid #dbe4f1; font:inherit; width:100%; background:#fff;
}
.contact-form input:focus, .contact-form textarea:focus{outline:3px solid #e6f0ff; border-color:#b8cff0}
.contact-form .btn{background:var(--ink); color:#fff; border:none; padding:.9rem 1.1rem; border-radius:.8rem; font-weight:700; cursor:pointer}
.hp{position:absolute; left:-9999px; opacity:0}
.captcha-wrap{display:flex; align-items:center; gap:.8rem; color:var(--muted)}

/* Floating card */
.floating-card{
  position:sticky; top:6rem;
  background:#0b1a2b; color:#fff; padding:1.1rem; border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.floating-card h3{margin-top:0}
.floating-card a{color:#fff; text-decoration:underline}
.small{font-size:.9rem; color:#e8f0ff}

@media (max-width: 840px){
  .grid-2{grid-template-columns:1fr}
  .floating-card{position:relative; top:auto}
}

/* Steps */
.howto h2{margin-top:0}
.steps{display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem}
.step{background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.step .num{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800}
@media (max-width: 900px){ .steps{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 520px){ .steps{grid-template-columns: 1fr} }

/* FAQ */
.faq .accordion{display:grid; gap:.6rem}
.acc-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  background:#fff; border:1px solid #dbe4f1; border-radius:.9rem; padding:1rem; font-weight:700; cursor:pointer;
}
.acc-panel{padding:1rem; border:1px solid #eef2f7; border-radius:.9rem; background:#fbfdff; margin-top:.3rem}
.plus{font-weight:800; font-size:1.4rem; line-height:1}
.acc-btn[aria-expanded="true"] .plus{transform:rotate(45deg)}

/* Flash messages */
.flash-wrap{margin-top:1rem}
.flash{padding:.8rem 1rem; border-radius:.7rem; background:#fff3cd; border:1px solid #ffe69c}
.flash.error{background:#ffe5e5; border-color:#ffb3b3}

/* Footer */
.site-footer{padding:2rem 0; border-top:1px solid #eef2f7; margin-top:2rem; color:var(--muted)}
.site-footer p{margin:0; text-align:center}

.center{ text-align:center }