
:root{
  --bg:#fff;
  --fg:#0f172a;
  --muted:#64748b;
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --card:#f8fafc;
  --btn-radius:.5rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
.container{width:min(1100px,92%);margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb}
.nav{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.75rem 0}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;text-decoration:none;color:var(--fg)}
.brand img{height:90px;width:auto;display:block;border-radius:.5rem}
.menu{display:flex;gap:1rem;align-items:center;margin-left:auto}
.menu a{font-weight:600;text-decoration:none;color:var(--fg)}
.menu a:not(.btn):hover{color:var(--brand-600)}
.hamburger{display:none;background:none;border:1px solid #e2e8f0;padding:.5rem .65rem;border-radius:.65rem;font-size:1rem}
.hero{background:#fff;border-bottom:1px solid #e5e7eb;min-height:auto;padding-top:.75rem}
.section{padding:2rem 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:1rem;padding:1rem}
.card .thumb{width:100%;height:auto;display:block;border:1px solid #e5e7eb;border-radius:.75rem;margin-bottom:.75rem}
.widget{position:relative;border-radius:1rem;overflow:hidden;border:1px solid #e2e8f0;background:#000;height:360px}
.widget .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.widget .slide.active{opacity:1}
.widget .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#000;z-index:0}
.widget .review{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.35rem;padding:12px 16px;color:#e5f0ff;background:rgba(0,0,0,.28);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);border-top:1px solid rgba(255,255,255,.18);z-index:1}
.widget .review p{color:inherit}
.widget .author{color:inherit;opacity:1}
.widget .stars{color:#fde68a}
.widget .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.widget .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
.widget .dot.active{background:#fff}
.form .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.input,input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid #e2e8f0;border-radius:.6rem}
.helper{color:var(--muted)}.actions{margin-top:1rem}
.site-footer{padding:2rem 0;border-top:1px solid #e5e7eb;background:#fff}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:1rem;align-items:start}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.25rem}
.footer-links a{text-decoration:none;color:var(--fg)}.footer-links a:hover{color:var(--brand-600)}
.footer-meta{color:var(--muted);font-size:.95rem}
@media (max-width:900px){
  .cards,.footer-grid{grid-template-columns:1fr}
  .form .grid{grid-template-columns:1fr}
  .menu{display:none;position:absolute;right:4%;top:56px;background:#fff;border:1px solid #e2e8f0;padding:.5rem;border-radius:.75rem;flex-direction:column}
  .hamburger{display:inline-block}
  .widget{height:300px}
  .hero h1{ line-height: 1.1; }
  .hero p { line-height: 1.2;  }
}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:var(--btn-radius);font-weight:700;text-decoration:none;border:1px solid transparent;transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 6px 16px rgba(14,165,233,.18)}
.btn-primary:hover{background:var(--brand-600)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(14,165,233,.3)}
.menu a.btn{padding:.55rem .9rem;font-size:.95rem;border-radius:var(--btn-radius)}
