:root{
  --bg: linear-gradient(180deg,#ffffff,#fbfff8);
  --card: #ffffff;
  --text: #071126;
  --muted: #4e6160;
  --primary: #b6c192;
  --primary-soft: #d4e9a6;
  --primary-strong: #8e8f74;
  --accent-2: #ff8a65;
  --radius: 18px;
  --maxw:1200px;
  --shadow: 0 14px 40px rgba(2,6,23,0.08);
}
[data-theme='dark']{
  --bg: linear-gradient(180deg,#031016,#041827);
  --card: #071827;
  --text: #e9f7ef;
  --muted: #9fb6af;
  --shadow: 0 20px 50px rgba(0,0,0,0.6);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;padding:32px 20px;display:flex;justify-content:center}
.container{max-width:var(--maxw);width:100%;display:grid;gap:26px}

/* header */
.header{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:72px;height:72px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);background:linear-gradient(135deg,var(--primary),var(--primary-strong));}
.title{font-size:20px;font-weight:800}
.subtitle{font-size:13px;color:var(--muted)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 520px;gap:36px;align-items:center;padding:36px;border-radius:22px;background:rgba(255,255,255,0.6);box-shadow:var(--shadow)}
h1{margin:0;font-size:44px;line-height:1.02}
.lead{color:var(--muted);margin-top:12px;font-size:17px;max-width:640px}
.ctas{display:flex;gap:14px;margin-top:20px}
.btn{background:var(--primary);color:white;padding:14px 18px;border-radius:14px;text-decoration:none;font-weight:800}
.btn.secondary{background:transparent;border:2px solid rgba(0,0,0,0.06);color:var(--text);}

/* mockup */
.mockup{border-radius:18px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,0.85),transparent);box-shadow:var(--shadow)}
.mockphone{width:480px;border-radius:22px;overflow:hidden;border:1px solid rgba(0,0,0,0.04)}
.mockphone img{width:100%;height:100%;object-fit:cover}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:20px;border-radius:14px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px 0}
.muted{color:var(--muted)}

/* gallery */
.gallery{display:flex;gap:14px;overflow:auto;padding:8px 4px}
.gallery img{width:300px;border-radius:16px;box-shadow:0 12px 36px rgba(2,6,23,0.08)}

/* about */
.about{display:flex;gap:18px;align-items:center;padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.75),transparent);box-shadow:var(--shadow)}
.avatar{width:96px;height:96px;border-radius:14px;overflow:hidden}

/* footer */
footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);padding-top:18px}

/* responsive */
@media (max-width:1000px){.hero{grid-template-columns:1fr} .mockphone{width:100%} .gallery img{width:220px}}
@media (max-width:520px){body{padding:18px} .logo{width:56px;height:56px} .avatar{width:72px;height:72px} .features{grid-template-columns:1fr}}