:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --brand:#3b82f6;
  --brand-2:#39d353;
  --ring:rgba(59,130,246,.35);
  --shadow:0 10px 30px rgba(2,6,23,.35);
}
:root.light{
  --bg:#f7fafc;
  --panel:#ffffff;
  --text:#111827;
  --muted:#657487;
  --brand:#2563eb;
  --brand-2:#16a34a;
  --ring:rgba(37,99,235,.25);
  --shadow:0 14px 34px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans"; background:radial-gradient(1200px 600px at 20% -10%, #1b2640 0%, transparent 70%), radial-gradient(800px 500px at 100% 0%, #10213a 0%, transparent 68%), var(--bg); color:var(--text)}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--panel);padding:.6rem 1rem;border-radius:.75rem;box-shadow:var(--shadow)}

.banner{position:relative;z-index:50;display:grid;place-items:center;padding:.6rem 1rem;background:linear-gradient(90deg,var(--brand) 0%, var(--brand-2) 100%);color:white;font-weight:700;letter-spacing:.3px}

.header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(180%) blur(10px); background:color-mix(in srgb, var(--panel) 80%, transparent); border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent)}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding: .8rem 1rem}
.brand{display:flex;gap:.75rem;align-items:center;text-decoration:none;color:var(--text)}
.brand img{width:40px;height:40px;border-radius:50%;border:2px solid var(--brand);background:#fff}
.brand .name{font-weight:800;letter-spacing:-.02em}
.bn{font-size:.85rem;color:var(--muted);border:1px dashed color-mix(in srgb,var(--text) 20%, transparent); padding:.25rem .5rem;border-radius:.5rem}
.links{display:flex;gap:1rem;align-items:center}
.links a{color:var(--muted);text-decoration:none;font-weight:600}
.links a:hover,.links a[aria-current="page"]{color:var(--text)}
.hamburger{display:none; background:transparent;border:0; width:40px;height:40px;border-radius:.6rem;color:var(--text)}
.theme{border:0;border-radius:.6rem;height:40px;padding:0 10px;background:color-mix(in srgb, var(--panel) 70%, transparent);color:var(--text)}

.drawer{display:none}

.hero{max-width:1100px;margin:2rem auto 0;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:0 1rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--brand)}
.h1{font-size:clamp(2rem, 4vw + 1rem, 3.2rem);letter-spacing:-.02em;margin:.5rem 0}
.lead{color:var(--muted);font-size:1.1rem;max-width:56ch}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:0 1.1rem;border-radius:1rem;border:1px solid color-mix(in srgb, var(--text) 14%, transparent);background:var(--panel);color:var(--text);font-weight:700;text-decoration:none;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));border:0;color:white}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.mock{position:relative;background:var(--panel);border:1px solid color-mix(in srgb, var(--text) 10%, transparent);border-radius:1.2rem;padding:.75rem;box-shadow:var(--shadow)}
.mock img{width:100%;height:auto;border-radius:.8rem;display:block}

.section{max-width:1100px;margin:3rem auto 0;padding:0 1rem}
.panel{background:var(--panel);border:1px solid color-mix(in srgb, var(--text) 10%, transparent);border-radius:1.2rem;box-shadow:var(--shadow)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;padding:1.5rem}
.about .big{font-size:1.6rem;font-weight:800;margin:0}
.about p{color:var(--muted);margin:.2rem 0 0}

.gallery{display:grid;grid-template-columns:repeat(3, 1fr);gap:1rem;margin-top:1rem}
.card{overflow:hidden;border-radius:1rem;background:var(--panel);border:1px solid color-mix(in srgb, var(--text) 10%, transparent);box-shadow:var(--shadow)}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card .cap{padding:.8rem;font-weight:700;color:var(--muted)}

.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.5rem}
.muted{color:var(--muted)}

.blog{padding:1.5rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.blog p{color:var(--muted);margin:.2rem 0 0}

.join{text-align:center;padding:2rem 1rem}

.testimonials{padding:1.5rem}
.t-quote{min-height:96px;color:var(--muted);font-style:italic}

footer{max-width:1100px;margin:2rem auto 3rem;padding:0 1rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;gap:1rem}
  .about{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .links{display:none}
  .hamburger{display:inline-grid;place-items:center}
  .drawer{display:none; border-top:1px solid color-mix(in srgb, var(--text) 10%, transparent); background:color-mix(in srgb, var(--panel) 85%, transparent)}
  .drawer.open{display:block}
  .drawer a{display:block;padding:1rem;color:var(--text);text-decoration:none;border-bottom:1px dashed color-mix(in srgb, var(--text) 12%, transparent)}
}

@media (max-width: 560px){
  .gallery{grid-template-columns:1fr}
  .gallery .card img{
    object-fit:contain;
    height:auto;
  }
}

@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(10px); transition: all .6s ease}
  .reveal.show{opacity:1; transform:none}
  .btn:hover{transform:translateY(-1px)}
  .card:hover img{scale:1.03; transition:scale .25s ease}
}