:root{
  --bg: #D8D5C9;
  --card: #2E2F31;
  --ink: #111111;
  --muted: #6B6B6B;
  --accent: #5EC4A2;
  --ring: rgba(0,0,0,0.08);
  --maxw: 1040px;
  --radius: 16px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#111316; --card:#1B1E20; --ink:#E6E8EA; --muted:#A8B0B6; --ring:rgba(255,255,255,0.12); }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink); line-height:1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a{color:inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.2);}
.wrapper{max-width:var(--maxw); margin:0 auto; padding:24px;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.logo{display:flex; align-items:center; gap:10px; font-weight:600;}
.logo img{width:54px; height:54px; border-radius:6px}
.logo span.studio {font-size: 14px; font-weight: 400; color: var(--muted); /* softer gray tone */}
.hero{padding:52px 0 32px 0; display:grid; gap:24px;}
.hero h1{font-size: clamp(28px, 4.5vw, 48px); line-height:1.15; margin:0;}
.hero p,
.lead {
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--muted);
  margin: 0;
}
.ctas{display:flex; gap:12px; flex-wrap:wrap;}
.btn{padding:12px 18px; border-radius:999px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ring); color: var(--ink); background: transparent;}
.btn.primary{ background: var(--accent); color: #0b0d0f; border-color: var(--accent);}
.btn.secondary{border:1px solid var(--ring); color: var(--ink);}
.grid{display:grid; gap:18px;}
.features{grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); margin:8px 0 32px;}
.card {
  background: rgba(46, 47, 49, 0.80);   /* fallback: semi-transparent dark */
  backdrop-filter: blur(8px);           /* modern browsers */
  -webkit-backdrop-filter: blur(8px);   /* Safari */
  padding: 18px;
  border-radius: var(--radius);
  color: #E6E8EA;
}
.card h3{margin:0 0 6px 0; font-size:18px}
.card p{margin:0; color:#B9C0C6}
.device {
  width: 100%;
  max-width: 360px;             /* tweak 320–400px as you like */
  border: none;
  border-radius: 30px;
  background: #000;
  overflow: hidden;
  margin: 0 auto;               /* center the frame */
  display: block;
}
.kicker{letter-spacing:.15em; text-transform:uppercase; font-size:12px; color:var(--muted)}
.section{padding:12px 0 32px}
.section h2{margin:0 0 8px 0; font-size:24px}
.footer{padding:32px 0; font-size:14px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.linkrow{display:flex; gap:14px; flex-wrap:wrap;}
.notice{font-size:13px; color:var(--muted)}
hr{border:none; border-top:1px solid var(--ring); margin:24px 0;}
.badges{display:flex; gap:12px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ring); padding:8px 12px; border-radius:12px; background:rgba(0,0,0,0.04)}
.badge .dot{width:8px;height:8px;border-radius:50%; background:var(--accent)}
ul.clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Line under each FAQ item except the last one */
ul.clean li {
  padding: 8px 0 14px;                /* space above and below */
  border-bottom: 2px dotted #999;     /* solid black line */
}

/* Optional: remove line after the last item */
ul.clean li:last-child {
  border-bottom: none;
}
.small{font-size:13px}
.center{display:grid; place-items:center; text-align:center}
.device img,
.device video {
  width: 100%;
  height: auto;                 /* let height be natural */
  display: block;
  object-fit: contain;          /* safe, but mostly irrelevant with height:auto */
}
/* Make the dark cards comfy inside */
.section.card {
  /*background: var(--card);  /* overall padding */
  padding: 24px;            /* overall padding */
  padding-left: 32px;       /* extra left inset */
  border-radius: var(--radius);
}

/* Space between the stacked card sections */
.section.card + .section.card {
  margin-top: 16px;         /* vertical gap between cards */
}

/* (Optional) tiny side breathing room against wrapper edges */
.section.card {
  margin-left: 8px;
  margin-right: 8px;
}