:root{
  --bg: #F4F6FF;          /* soft lavender */
  --card: #FFFFFF;
  --ink: #1E2A38;         /* deep slate */
  --muted: #6B7A90;
  --brand: #2F7E79;       /* teal from logo vibe */
  --brand-2: #9AD4CF;     /* soft teal */
  --ring: rgba(47,126,121,.25);
  --shadow: 0 10px 30px rgba(17, 24, 39, .08);
}

*{ box-sizing: border-box; }
html,body{ 
  margin:0; 
  padding:0; 
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  color:var(--ink); 
  background:
    radial-gradient(1200px 600px at 20% -10%, #EEF1FF 0%, transparent 60%),
    radial-gradient(900px 500px at 120% 10%, #EAF7F5 0%, transparent 60%),
    var(--bg);
}

.wrap{ width:min(1100px, 92vw); margin-inline:auto; }

header.wrap{
  text-align:center; padding:72px 0 24px;
}
.logo{
  width:min(480px, 70vw);
  height:auto;
  display:block;
  margin:0 auto 14px;
}
.tagline{
  margin:6px 0 2px;
  font-weight:800;
  letter-spacing:.2px;
  font-size: clamp(28px, 4vw, 40px);
}
.sub{
  margin:8px auto 16px;
  color:var(--muted);
  max-width:760px;
  font-size: clamp(14px, 1.9vw, 18px);
}
.tiny{ font-size:13px; color:var(--muted); }
.wip{ margin-top:10px; }

.cta-row{ display:flex; gap:12px; justify-content:center; margin:16px 0 8px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none;
  font-weight:600; border:2px solid transparent; transition:.15s ease; box-shadow: var(--shadow);
}
.btn.primary{ background:var(--brand); color:white; }
.btn.primary:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.btn.ghost{ background:#fff; color:var(--ink); border-color:var(--brand-2); }
.btn.ghost:hover{ border-color:var(--brand); transform: translateY(-1px); }

.features{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin:28px 0 8px;
}
@media (max-width: 900px){
  .features{ grid-template-columns: 1fr; }
}
.card{
  background:var(--card); border-radius:18px; padding:18px 18px; box-shadow: var(--shadow);
  border:1px solid #E8EEF6;
}
.card h3{ margin:0 0 8px; font-size:20px; }
.card p{ margin:0; color:var(--muted); }

.tabs{ margin:24px 0 8px; }
.tab-head{
  display:flex; gap:8px; border-bottom:1px solid #E7ECF5; padding-bottom:8px;
}
.tab-btn{
  appearance:none; background:#fff; border:1px solid #E3EAF2; color:var(--ink);
  padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer;
  transition:.15s ease;
}
.tab-btn:hover{ border-color:var(--brand-2); }
.tab-btn.active{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }
.tab-body{ padding:14px 2px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.about{ background:var(--card); border:1px solid #E9EFF7; border-radius:16px; padding:16px; box-shadow: var(--shadow); }
.bullets{ margin:10px 0 0 16px; color:var(--muted); }
.bullets li{ margin:6px 0; }

.shots{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
@media (max-width: 900px){
  .shots{ grid-template-columns: 1fr; }
}
.shots img{
  width:100%; height:auto; border-radius:16px; border:1px solid #E5ECF7; box-shadow: var(--shadow);
  background:#fff; transition:.15s ease;
}
.shots img:hover{ transform: translateY(-2px); box-shadow: 0 15px 40px rgba(17, 24, 39, .12); }

.feedback{
  margin:28px 0 40px; text-align:center; background:#fff; border:1px solid #E7EEF6;
  border-radius:16px; padding:18px; box-shadow: var(--shadow);
}
.feedback h3{ margin:0 0 6px; }
.feedback a{ color:var(--brand); font-weight:600; text-decoration: none; }
.feedback a:hover{ text-decoration: underline; }

.foot{
  text-align:center; padding:28px 0 60px; color:var(--muted);
}