:root { --bg:#0d0d0c; --text:#f3eee6; --muted:#c6bbad; --faint:#93887a; --line:rgba(243,236,225,.11); --panel:rgba(255,255,255,.025); --panel-2:rgba(255,255,255,.035); --primary:#9af10c; --content:1180px; --shadow:0 18px 50px rgba(0,0,0,.28); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:Inter, Arial, sans-serif; background:linear-gradient(180deg, #0a0a09, #12110f 25%, #0e0e0d); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip-link { position:absolute; left:12px; top:-48px; background:var(--primary); color:#101109; padding:10px 14px; border-radius:999px; font-weight:700; z-index:30; }
.skip-link:focus { top:12px; }
main.wrap { max-width:var(--content); margin:0 auto; padding:22px 16px 56px; }
.preview { background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }
.frame { padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%); }
.mock { border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--bg); }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; color:#f7f3ea; background:rgba(0,0,0,.18); border-bottom:1px solid rgba(255,255,255,.06); }
.brand { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.brand img { width:42px; height:42px; object-fit:cover; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.nav { display:flex; gap:18px; flex-wrap:wrap; font-size:14px; }
.nav a { color:#efe8dc; opacity:.9; }
.nav a:hover { color:#ffffff; }
.hero-banner img { width:100%; height:auto; display:block; }
.hero-copy { padding:28px 18px 10px; text-align:center; }
.hero-inner { max-width:1100px; margin:0 auto; }
.hero-copy h1, .section-title { font-family:"Barlow Condensed", Arial, sans-serif; }
.hero-copy h1 { font-size:clamp(2rem, 3.6vw, 3.7rem); line-height:1; color:#fffaf1; white-space:nowrap; margin:0 auto; display:inline-block; letter-spacing:-.02em; }
.hero-copy p { max-width:46rem; margin:16px auto 0; color:var(--muted); font-size:1.04rem; }
.cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.btn { min-height:46px; padding:14px 18px; border-radius:999px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; }
.btn-primary { background:var(--primary); color:#101109; }
.btn-secondary { color:#fff8f0; border:1px solid rgba(255,248,240,.18); background:rgba(255,255,255,.03); }
.section { padding:28px 18px 0; }
.section-title { font-size:2rem; line-height:.95; text-align:center; margin-bottom:18px; }
.lede { padding:20px; border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.07); text-align:center; }
.lede p { color:var(--muted); max-width:68ch; margin-inline:auto; }
.pillars { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:18px; }
.pillars div { padding:16px; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); text-align:center; }
.pillars strong, .mini strong { display:block; margin-bottom:6px; color:#f4efe7; }
.pillars p, .panel p, .mini p, .foot-copy { color:var(--muted); }
.split { display:grid; grid-template-columns:1.02fr .98fr; gap:16px; margin-top:16px; }
.panel { background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:20px; text-align:center; }
.panel p { max-width:66ch; margin-inline:auto; }
.list { display:grid; gap:12px; margin-top:16px; }
.mini { padding:14px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); text-align:center; }
.brand-panel { display:grid; place-items:center; min-height:100%; }
.brand-panel img { width:100%; max-width:380px; border-radius:18px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); }
.contact-wrap { max-width:980px; margin:0 auto; }
.contact-panel { padding:26px 22px 24px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border-radius:20px; border:1px solid rgba(255,255,255,.07); text-align:center; }
.contact-icons-row { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:4px; flex-wrap:wrap; }
.contact-icon-link { width:44px; height:44px; border-radius:999px; display:inline-flex; justify-content:center; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.contact-icon-link:hover { background:rgba(255,255,255,.10); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.35); }
.contact-icon { width:20px; height:20px; display:block; }
.footer { margin-top:24px; padding:18px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; background:rgba(255,255,255,.015); text-align:center; }
.footer-left { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.badge-wrap { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.badge-wrap img { width:100%; height:100%; object-fit:cover; }
@media (max-width:980px) { .pillars { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:900px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nav {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }

  .nav a {
    padding: 6px 0;
  }

  .split {
    grid-template-columns: 1fr;
  }
}@media (max-width:560px) { main.wrap { padding:16px 10px 36px; } .frame { padding:10px; } .hero-copy { padding:18px 10px 4px; } .hero-copy h1 { font-size:1.38rem; white-space:nowrap; letter-spacing:-.01em; } .section { padding-inline:10px; } .pillars { grid-template-columns:1fr; } .contact-icons-row { gap:14px; } }