:root{
  --bg:#0f1724;
  --card:#071126;
  --muted:#98a3b3;
  --accent:#ff6b6b;
  --accent-2:#6b9bff;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --maxw:1100px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg,#071026 0%, #071224 100%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--maxw);margin:0 auto;padding:28px;}
.site-header{backdrop-filter: blur(6px); position:sticky; top:0; z-index:40; background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.4)); border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:800;color:var(--accent-2);text-decoration:none;font-size:20px}
.nav{display:flex;gap:12px}
.nav a{color:var(--muted);text-decoration:none;padding:10px;border-radius:8px}
.nav a:hover{color:#fff;background:var(--glass)}

.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:white;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06); color:var(--muted)}
.btn.small{padding:6px 10px;font-size:13px}

.hero{padding:40px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
.hero-text h1{font-size:40px;margin:0 0 12px}
.lead{color:var(--muted);margin:0 0 16px}
.cta-row{display:flex;gap:12px;margin-bottom:12px}
.highlights{display:flex;gap:12px;list-style:none;padding:0;margin:12px 0 0;color:var(--muted)}
.hero-media .mockup{border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(2,6,23,0.7);border:1px solid rgba(255,255,255,0.03)}
.hero-media img{display:block;width:100%;height:auto;min-width:260px;max-height:420px;object-fit:cover}

.guides{padding:36px 0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 8px}
.card-link{display:inline-block;margin-top:10px;color:var(--accent-2);text-decoration:none;font-weight:600}

.gallery{padding:36px 0}
.masonry{column-count:3;column-gap:12px}
.masonry img{width:100%;margin-bottom:12px;border-radius:10px;display:block;break-inside:avoid}

.tools{padding:36px 0}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool{background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

.about{padding:36px 0}
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.subscribe input[type="email"]{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;margin-bottom:8px}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:20px 0;margin-top:40px}
.footer-grid{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

.muted{color:var(--muted)}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-media{order:-1}
  .cards{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .masonry{column-count:2}
}
@media(max-width:600px){
  .masonry{column-count:1}
  .nav{display:none}
}