/* ===========================================================
   OwnMic — landing page styles
   Light is the base theme; dark applies when the OS prefers it
   (unless the user forced light) OR when [data-theme="dark"] is set.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');
:root{
  --accent:#3B82F6; --accent-2:#2563EB; --accent-soft:#EAF1FE;
  --ink:#0F172A; --muted:#64748B; --bg:#FFFFFF; --soft:#F8FAFC;
  --card:#FFFFFF; --border:#E8ECF1; --shadow:0 18px 50px rgba(15,23,42,.10);
  --radius:18px;
}
/* dark tokens, shared by "system prefers dark" and the manual toggle */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#3B82F6; --accent-2:#2563EB; --accent-soft:#1B2740;
    --ink:#ECEEF2; --muted:#9CA3AF; --bg:#151515; --soft:#191919;
    --card:#202020; --border:#2A2A2A; --shadow:0 18px 50px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --accent:#3B82F6; --accent-2:#2563EB; --accent-soft:#1B2740;
  --ink:#ECEEF2; --muted:#9CA3AF; --bg:#151515; --soft:#191919;
  --card:#202020; --border:#2A2A2A; --shadow:0 18px 50px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}   /* offset anchor jumps below the sticky header */
/* custom scrollbar (webkit/Chromium/Edge — note: setting scrollbar-color here would make
   Chromium ignore these pseudo rules and use its own dark hover, so we don't set it) */
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius:10px; border:3px solid var(--bg); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:#3B82F6; border:3px solid var(--bg); background-clip:padding-box}
html{overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100%;
}
img{max-width:100%}
[hidden]{display:none !important}   /* keep the hidden attribute working even on flex/grid elements */
a{color:inherit; text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}

.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 22px; border-radius:12px; font-weight:600; font-size:15px;
  cursor:pointer; border:1px solid transparent; transition:.15s ease; white-space:nowrap;
}
.btn svg{width:20px; height:20px; flex:none}
.ic-android{color:#3DDC84}   /* Android brand green — stays visible in light & dark */
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2); transform:translateY(-1px)}
.btn-ghost{background:var(--card); color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{background:#3DDC84; color:#fff; border-color:#3DDC84; transform:translateY(-1px)}   /* fill with Android green */
.btn-ghost:hover .ic-android{color:#fff}
/* hero Windows button: outline by default, fills on hover */
.cta-row .btn-primary{background:var(--card); color:var(--accent); border-color:var(--border)}
.cta-row .btn-primary:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-1px)}
.sub{font-size:12px; opacity:.85; font-weight:500}

/* ── Nav ── */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--border);
}
nav{display:flex; align-items:center; justify-content:space-between; height:64px; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px}
.brand img{width:30px; height:30px; border-radius:8px}
.nav-right{display:flex; align-items:center; gap:22px}
.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{color:var(--muted); font-size:14px; font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:9px 16px; font-size:14px}

/* theme toggle */
.theme-toggle{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--muted); cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; transition:.15s ease;
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent)}
.theme-toggle svg{width:18px; height:18px}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
.theme-toggle.is-dark .i-sun{display:block}
.theme-toggle.is-dark .i-moon{display:none}

@media(max-width:720px){
  .nav-links{display:none}
}

/* ── Hero ── */
.hero{padding:52px 0 40px; text-align:center; position:relative; overflow:hidden}
.glow{
  position:absolute; inset:-30% 0 auto 0; height:520px; z-index:-1;
  background:radial-gradient(600px 300px at 50% 0, var(--accent-soft), transparent 70%);
}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600;
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.badge .dot{position:relative; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.badge .dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent);
  animation:dotPulse 1.6s ease-out infinite;
}
@keyframes dotPulse{
  0%{transform:scale(1); opacity:.55}
  100%{transform:scale(3); opacity:0}
}
h1{font-size:clamp(32px,6vw,54px); line-height:1.1; letter-spacing:-.02em; margin:22px auto 0; max-width:14ch}
h1 .hl{color:var(--accent)}
.lead{font-size:clamp(16px,2.3vw,19px); color:var(--muted); max-width:56ch; margin:18px auto 0}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.note{margin-top:16px; font-size:13px; color:var(--muted)}

/* ── Hero mock ── */
.mock{
  margin:52px auto 0; max-width:760px; background:var(--card); border:1px solid var(--border);
  border-radius:24px; box-shadow:var(--shadow); padding:26px;
  display:flex; align-items:center; gap:26px; justify-content:center; flex-wrap:wrap;
}
/* each device + its OS label, stacked */
.mock-col{display:flex; flex-direction:column; align-items:center; gap:14px}
.dev-tag{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--muted)}
.dev-ic{width:15px; height:15px; color:var(--muted); flex:none}
.phone{
  width:172px; height:340px; border-radius:18px; border:1px solid #E6E9EF;
  background:#FFFFFF; position:relative; flex:none; box-shadow:0 10px 30px rgba(15,23,42,.08);
}
/* the whole phone face is the app screen (white, light theme) */
.p-screen{
  position:absolute; inset:0; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; padding:7px 14px 4px;
}
.p-status{width:100%; display:flex; justify-content:space-between; font-size:8.5px; font-weight:600; color:#94A3B8; letter-spacing:.02em}
.p-head{align-self:stretch; display:flex; align-items:center; gap:7px; margin:2px -14px 0; padding:0 14px 4px; border-bottom:1px solid #EEF1F5}
.p-logo{width:16px; height:16px; border-radius:5px; object-fit:cover; flex:none}
.p-name{font-weight:600; font-size:11px; color:#0F172A}
.p-theme{width:13px; height:13px; color:#94A3B8; margin-left:auto}
.p-chip{
  margin-top:14px; display:inline-flex; align-items:center; gap:5px; line-height:1;
  padding:2.5px 9px; border-radius:999px; border:1px solid #E2E6EC;
  font-size:9px; font-weight:700; color:#0F172A; background:#FFFFFF;
}
.p-dot{width:5px; height:5px; border-radius:50%; background:#22C55E; flex:none}
.p-label{align-self:flex-start; text-align:left; margin-top:16px; font-family:"Inter",sans-serif; font-size:8px; font-weight:600; letter-spacing:.1em; color:#9CA3AF}
.p-wave{display:flex; align-items:center; height:26px; margin-top:8px; width:100%; overflow:hidden}
.p-wave-track{display:flex; align-items:center; height:100%; animation:waveScroll 16s linear infinite; will-change:transform}
.p-wave-track i{
  width:3px; margin-right:3px; flex:none; border-radius:999px;   /* rounded pill bars, like the app */
  background:#22C55E;
}
/* app colours: idle dots gray, active voice green, loud peaks red */
.p-wave-track i.idle{background:#CBD5E1}
.p-wave-track i.mid{background:#22C55E}
.p-wave-track i.loud{background:#EF4444}
/* the whole strip slides right → left; the pattern is duplicated so it loops seamlessly */
@keyframes waveScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.p-mic{
  width:62px; height:62px; border-radius:50%; margin-top:16px; cursor:pointer;
  background:#EAF1FE; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
}
.p-mic svg{width:25px; height:25px; color:var(--accent); display:block; transform:translate(0, 1.5px)}
.p-mute{margin-top:14px; font-size:10.5px; font-weight:700; color:var(--accent)}
/* muted state (tap the mic) */
.p-screen.muted .p-mic{background:#FEECEC; border-color:color-mix(in srgb, #EF4444 35%, transparent)}
.p-screen.muted .p-mic svg{color:#EF4444}
.p-screen.muted .p-mute{color:#EF4444}
/* on mute the waves keep scrolling — they just turn gray */
.p-screen.muted .p-wave-track i{background:#CBD5E1}
.p-stop{align-self:stretch; margin:auto -14px 0; padding:6px 14px 2px; border-top:1px solid #EEF1F5; text-align:center; font-size:9.5px; font-weight:600; color:#94A3B8; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
/* connected body fills the screen so Stop can sit at the bottom */
.p-connected{flex:1; align-self:stretch; display:flex; flex-direction:column; align-items:center}
/* disconnected / "looking for your PC" state */
.p-search{flex:1; align-self:stretch; display:flex; flex-direction:column; padding:9px 8px 6px}
.ps-looking{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.ps-found{align-self:stretch}
.ps-found-head{font-family:"Inter",sans-serif; font-size:8px; font-weight:700; letter-spacing:.08em; color:#94A3B8; margin-bottom:8px; text-align:left}
/* windows: a touch more compact */
.w-search{padding-top:4px}                              /* pull the header up */
.w-search .ps-found-head{font-size:6.5px; margin-bottom:5px}
.w-search .dev-card{padding:2px 5px 2px 6px}            /* shorter card */
.w-search .dev-card-ic{width:15px; height:15px; background:none; border-radius:0}   /* icon only, no background */
.w-search .dev-card-ic svg{width:14px; height:14px}
.w-search .dev-card-btn{font-size:7px; padding:3px 7px; border-radius:5px}   /* smaller button */
/* phone: compact treatment + wider card */
#pSearch{padding:12px 4px 6px}                           /* header a bit lower; card wider (less side pad) */
#pSearch .ps-found-head{font-size:6.5px; font-weight:500; margin-bottom:6px; padding-left:2px}
#pSearch .dev-card{padding:2px 4px 2px 5px}              /* same height as the windows card */
#pSearch .dev-card-ic{width:18px; height:18px; border-radius:50%}   /* circle background */
#pSearch .dev-card-ic svg{width:10px; height:10px}
#pSearch .dev-card-btn{font-size:7px; padding:3px 7px; border-radius:5px}   /* match the windows button */
.ps-icon{
  position:relative; width:64px; height:64px; border-radius:50%; background:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
}
/* the circle border pulses like a radar ping (grows + fades), like the Android app */
.ps-icon::before{
  content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid #DBEAFE;
  animation:ringPing 2s linear infinite;
}
/* matches the Android ring: eases out as it grows + fades, then eases back over the last 30% */
@keyframes ringPing{
  0%{transform:scale(.96); opacity:.9}
  10%{transform:scale(.984); opacity:.73}
  20%{transform:scale(1.004); opacity:.58}
  35%{transform:scale(1.028); opacity:.41}
  50%{transform:scale(1.043); opacity:.30}
  70%{transform:scale(1.05); opacity:.25}
  85%{transform:scale(.983); opacity:.74}
  100%{transform:scale(.96); opacity:.9}
}
.ps-wifi{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:27px; height:27px}
.ps-wifi path{stroke-width:2.5}                        /* a touch bolder, like the app */
.ps-wifi-idle path{stroke:#BFDBFE}                     /* light-blue idle wifi underneath (app color) */
.ps-wifi-live path{stroke:var(--accent)}               /* blue on top */
.ps-wifi-live .dot{opacity:1}                          /* dot stays solid */
/* arcs fill from the inside out, then fade — inner first, then middle, then outer
   (smoothstep edges + a held peak, matching the app's arcAlpha) */
.ps-wifi-live .arc{opacity:0; animation:wifiScan 2s linear infinite}
.ps-wifi-live .a-inner{animation-delay:0s}
.ps-wifi-live .a-mid{animation-delay:.16s}
.ps-wifi-live .a-outer{animation-delay:.32s}
@keyframes wifiScan{
  0%{opacity:0} 6%{opacity:.5} 12%{opacity:1}
  46%{opacity:1} 59%{opacity:.5} 72%{opacity:0} 100%{opacity:0}
}
/* a "found device" card on the searching screen (matches the app's DeviceRow) */
.dev-card{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:4px 6px; border-radius:9px; background:#F8FAFC; border:1px solid #E5E9EF;
  text-align:left; cursor:pointer;
}
.dev-card-ic{width:19px; height:19px; border-radius:6px; background:color-mix(in srgb, var(--accent) 15%, transparent); display:flex; align-items:center; justify-content:center; flex:none}
.dev-card-ic svg{width:11px; height:11px; color:var(--accent); display:block}
.dev-card-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; padding-top:2px}
.dev-card-name{font-size:8px; font-weight:700; color:#1E293B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dev-card-ip{font-size:7px; color:#94A3B8; font-family:"Consolas",monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dev-card-btn{flex:none; background:var(--accent); color:#fff; font-size:8px; font-weight:700; padding:4px 8px; border-radius:6px; cursor:pointer}
.ps-title{margin-top:16px; font-family:"Inter",sans-serif; font-size:11px; font-weight:700; color:#1E293B; white-space:nowrap}
.ps-sub{margin-top:8px; font-family:"Inter",sans-serif; font-size:8.5px; line-height:1.6; color:#64748B; white-space:nowrap}
.link{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--accent)}
.link .pulse{display:flex; gap:5px}
.link .pulse i{width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.35; animation:bounce 1s infinite}
.link .pulse i:nth-child(2){animation-delay:.15s}
.link .pulse i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-4px)}}
.pc{width:500px; flex:none}
/* whole monitor (screen + taskbar) — the ring/shadow live here, no clipping so no white sliver */
.pc-monitor{
  border-radius:8px;
  box-shadow:0 0 0 1px #E6E9EF, 0 22px 46px rgba(15,23,42,.22);
}
.pc .screen{
  height:300px; border-radius:8px 8px 0 0;
  background:transparent; overflow:hidden;
}
/* monitor stand: a short neck into a wide base */
.pc-neck{width:46px; height:24px; margin:0 auto; background:linear-gradient(#D7DCE3, #C4CBD4)}
.pc-base{width:170px; height:13px; margin:1px auto 0; background:#C4CBD4; border-radius:4px 4px 9px 9px}

/* Windows desktop inside the monitor */
.win-desk{
  position:relative; width:100%; height:100%; overflow:hidden;
  /* clean Windows 11 "Bloom" — smooth blue glow, no blur artifacts */
  background:
    radial-gradient(55% 48% at 50% 46%, rgba(125,214,255,.75) 0%, rgba(70,160,255,.35) 38%, transparent 64%),
    radial-gradient(45% 40% at 50% 50%, rgba(180,235,255,.55) 0%, transparent 55%),
    radial-gradient(120% 110% at 50% 62%, #1b3fa0 0%, #0c2166 70%, #081642 100%),
    #0a1747;
}
/* OwnMic app window on the desktop (mirrors the Windows app) */
.win-app{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:182px; height:276px; border-radius:11px; overflow:hidden;
  display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid rgba(0,0,0,.12); box-shadow:0 16px 34px rgba(0,0,0,.38);
}
.win-app-bar{display:flex; align-items:center; gap:6px; padding:5px 10px; border-bottom:1px solid #EEF1F5}
.win-app-logo{width:16px; height:16px; border-radius:5px; object-fit:cover}
.win-app-title{font-size:11px; font-weight:600; color:#0F172A}
.win-app-tools{margin-left:auto; display:flex; align-items:center; gap:9px; color:#94A3B8}
.wt-ic{width:12px; height:12px}
.win-app-body{flex:1; padding:10px 10px 5px; display:flex; flex-direction:column}
.w-chip{
  align-self:stretch; display:flex; align-items:center; gap:6px; line-height:1;
  padding:3px 10px; border-radius:999px; border:1px solid #E2E6EC;
  font-size:9px; font-weight:700; color:#0F172A;
}
.w-label{align-self:flex-start; text-align:left; margin-top:10px; font-family:"Inter",sans-serif; font-size:8px; font-weight:600; letter-spacing:.12em; color:#9CA3AF}
.w-wave{height:20px; margin-top:7px; overflow:hidden; display:flex; align-items:center}
.w-wave-track{display:flex; align-items:center; height:100%; animation:waveScroll 16s linear infinite; will-change:transform}
.w-wave-track i{width:3px; margin-right:3px; flex:none; border-radius:999px; background:#22C55E}
.w-wave-track i.idle{background:#CBD5E1}
.w-wave-track i.mid{background:#22C55E}
.w-wave-track i.loud{background:#EF4444}
/* Mute button */
.w-mute{
  margin-top:11px; display:flex; align-items:center; justify-content:center; gap:3px;
  padding:4px 0; border-radius:8px; background:#EAF1FE; cursor:pointer;
  border:1px solid color-mix(in srgb, #3B82F6 25%, transparent);
  color:#3B82F6; font-size:11px; font-weight:700;
}
.w-mute-ic{width:13px; height:13px; color:#3B82F6; display:block}
/* muted state */
.win-app.muted .w-mute{background:#FEECEC; border-color:color-mix(in srgb, #EF4444 30%, transparent); color:#EF4444}
.win-app.muted .w-mute-ic{color:#EF4444}
/* on mute the on-screen waves just grey out (JS scrolls them off and feeds in dots) */
.win-app.muted .w-wave-track i{background:#CBD5E1}
.w-disc{margin-top:auto; text-align:center; font-size:8.5px; font-weight:600; color:#94A3B8; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
/* connected body fills the window so Disconnect sits at the bottom */
.w-connected{flex:1; display:flex; flex-direction:column}
/* bottom status bar */
.win-status{
  display:flex; align-items:center; gap:5px; padding:5px 11px; line-height:1.4;
  border-top:1px solid #EEF1F5; font-size:7.5px; font-weight:600; color:#22C55E;
}
/* disconnected: grey dot + grey text */
.p-dot.off{background:#94A3B8}
.win-app.off .win-status{color:#94A3B8}
/* taskbar — slim, Windows 11 style */
.win-taskbar{
  position:relative; height:22px;
  background:#F8F0F6; border-radius:0 0 8px 8px;
  border-top:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center;
}
.tb-center{display:flex; align-items:center; gap:11px}
.tb-start{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:#2563EB}
.tb-app{width:14px; height:14px; border-radius:4px; object-fit:cover; display:block; cursor:pointer}
/* system tray on the right: wifi, sound, clock */
.tb-tray{position:absolute; right:11px; display:flex; align-items:center; gap:7px}
.tb-ic{width:12px; height:12px; color:#1F2937; display:block}
.tb-time{font-size:9px; font-weight:600; color:#1F2937; cursor:pointer}

/* Windows 11-style clock/calendar flyout (bottom-right of the screen, above the taskbar) */
.win-flyout{
  position:absolute; right:8px; bottom:8px; width:210px; z-index:6;
  background:#FBFBFB; border:1px solid rgba(0,0,0,.09); border-radius:12px;
  box-shadow:0 16px 38px rgba(0,0,0,.30); padding:12px 13px 13px; color:#1F2937;
  font-family:"Segoe UI",system-ui,sans-serif;
}
.wf-time{font-size:22px; font-weight:600; line-height:1.1; letter-spacing:.2px}
.wf-date{font-size:10px; color:#5B6470; margin-top:2px}
.wf-cal{margin-top:10px; border-top:1px solid rgba(0,0,0,.08); padding-top:9px}
.wf-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.wf-month{
  background:none; border:0; font:inherit; font-size:11px; font-weight:600; color:#1F2937;
  padding:3px 6px; border-radius:6px; cursor:pointer;
}
.wf-month:hover{background:rgba(0,0,0,.06)}
.wf-nav{display:flex; gap:2px}
.wf-arrow{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:6px; cursor:pointer; color:#5B6470;
}
.wf-arrow:hover{background:rgba(0,0,0,.07); color:#1F2937}
.wf-arrow svg{width:12px; height:12px; display:block}
.wf-week{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:3px}
.wf-week span{text-align:center; font-size:8.5px; font-weight:600; color:#8A929E}
.wf-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.wf-grid span{
  height:22px; line-height:1; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; border-radius:6px; color:#1F2937; cursor:pointer;
  transition:background .12s;
}
.wf-grid span:hover{background:rgba(0,0,0,.08)}
.wf-grid span.mut{color:#B9C0CA}
.wf-grid span.today{box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); font-weight:700}
.wf-grid span.sel{background:var(--accent); color:#fff; font-weight:700; box-shadow:none}
.wf-grid span.sel:hover{background:var(--accent-2)}

/* ── Sections ── */
section{padding:64px 0}
.eyebrow{color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-align:center}
h2{font-size:clamp(26px,4vw,36px); text-align:center; margin:10px auto 8px; letter-spacing:-.02em}
.section-lead{text-align:center; color:var(--muted); max-width:52ch; margin:0 auto 40px}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.feature{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.feature .ic{width:44px; height:44px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.feature .ic svg{width:22px; height:22px; color:var(--accent)}
.feature h3{margin:0 0 6px; font-size:17px}
.feature p{margin:0; color:var(--muted); font-size:14.5px}

/* ── Steps ── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--soft); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative}
.step .n{counter-increment:s; width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px}
.step .n::before{content:counter(s)}
.step h3{margin:0 0 5px; font-size:16px}
.step p{margin:0; color:var(--muted); font-size:14.5px}

/* ── Download ── */
#download{background:var(--soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.dl-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:36px auto 0}
@media(max-width:640px){.dl-grid{grid-template-columns:1fr}}
.dl-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; text-align:center}
.dl-card .plat{width:56px; height:56px; border-radius:16px; background:var(--accent-soft); margin:0 auto 14px; display:flex; align-items:center; justify-content:center}
.dl-card .plat svg{width:30px; height:30px; color:var(--accent)}
.dl-card h3{margin:0 0 4px; font-size:20px}
.dl-card .meta{color:var(--muted); font-size:13px; margin-bottom:18px}
.dl-card .btn{width:100%}
.dl-card .req{margin-top:14px; font-size:12.5px; color:var(--muted)}

/* ── FAQ ── */
.faq{max-width:760px; margin:34px auto 0; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left; font:inherit;
  font-weight:600; color:var(--ink); padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
/* animated +/− icon: two centred bars; the vertical one rotates away to become − */
.faq-ic{position:relative; width:16px; height:16px; flex:none}
.faq-ic::before,.faq-ic::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .3s ease;
}
.faq-ic::before{top:50%; left:0; width:100%; height:2px; transform:translateY(-50%)}
.faq-ic::after{left:50%; top:0; width:2px; height:100%; transform:translateX(-50%)}
.faq-item.open .faq-ic::after{transform:translateX(-50%) rotate(90deg)}
/* smooth open/close via grid-template-rows 0fr → 1fr */
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{margin:0; padding:0 18px 15px; color:var(--muted); font-size:14.5px}

/* ── Footer (frosted glass over soft colour blobs) ── */
.site-footer{
  position:relative; overflow:hidden; margin-top:8px;
  background:var(--soft); color:var(--muted); font-size:14px;
}
/* colourful blobs sit behind... */
.site-footer::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(320px 220px at 12% 25%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(340px 240px at 82% 12%, color-mix(in srgb, #22C55E 48%, transparent), transparent 70%),
    radial-gradient(300px 220px at 58% 95%, color-mix(in srgb, #8B5CF6 42%, transparent), transparent 70%);
}
/* ...and a frosted glass layer blurs them */
.site-footer::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  backdrop-filter:blur(60px) saturate(1.25); -webkit-backdrop-filter:blur(60px) saturate(1.25);
  background:color-mix(in srgb, var(--bg) 58%, transparent);
  border-top:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.foot-top{position:relative; z-index:1; display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; padding:52px 22px 34px}
.foot-brand{max-width:320px}
.site-footer .brand{margin-bottom:14px}
.site-footer .brand img{width:30px; height:30px; border-radius:8px}
.foot-tag{margin:0; color:var(--muted); font-size:14px; line-height:1.7}
.foot-cols{display:flex; gap:60px; flex-wrap:wrap}
.foot-col{display:flex; flex-direction:column; gap:12px}
.foot-col h4{margin:0 0 4px; font-size:12px; font-weight:700; color:var(--ink); letter-spacing:.09em; text-transform:uppercase}
.foot-col a{color:var(--muted); font-size:14px; width:fit-content; transition:color .15s ease, transform .15s ease}
.foot-col a:hover{color:var(--accent); transform:translateX(3px)}
.foot-bottom{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:18px 22px; border-top:1px solid var(--border); font-size:13px; color:var(--muted)}
.foot-made{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); padding:6px 12px; border-radius:999px}
.foot-made .dot{width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.22)}
@media(max-width:600px){.foot-top{padding:40px 20px 28px; gap:30px} .foot-cols{gap:36px} .foot-bottom{padding:16px 20px}}

/* ── Floating contact widget ── */
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:80; width:56px; height:56px; border-radius:50%;
  border:none; cursor:pointer; background:linear-gradient(135deg, var(--accent), #2563EB); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 45%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}
.chat-fab:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 16px 34px color-mix(in srgb, var(--accent) 55%, transparent)}
/* soft attention pulse-ring behind the button (stops when open) */
.chat-fab::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); z-index:-1;
  animation:fabPulse 2.6s ease-out infinite}
.chat-fab.open::before{animation:none; opacity:0}
@keyframes fabPulse{0%{transform:scale(1); opacity:.45} 70%{transform:scale(1.6); opacity:0} 100%{opacity:0}}
/* chat / close icons cross-fade + rotate (no abrupt swap) */
.chat-fab svg{position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px;
  transition:opacity .22s ease, transform .38s cubic-bezier(.34,1.56,.64,1)}
.chat-fab .ic-chat{opacity:1; transform:rotate(0) scale(1)}
.chat-fab .ic-close{opacity:0; transform:rotate(-90deg) scale(.5)}
.chat-fab.open .ic-chat{opacity:0; transform:rotate(90deg) scale(.5)}
.chat-fab.open .ic-close{opacity:1; transform:rotate(0) scale(1)}
/* unread-message count badge */
.chat-badge{position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 5px; border-radius:11px;
  background:#EF4444; color:#fff; font-size:11.5px; font-weight:700;
  text-align:center; line-height:14px; padding:2px 5px 0; /* nudge the digit down so it sits centered */
  border:2.5px solid var(--bg);
  box-shadow:0 3px 8px rgba(239,68,68,.5); animation:badgePop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{from{transform:scale(0)} to{transform:scale(1)}}

.chat-panel{
  position:fixed; right:22px; bottom:88px; z-index:80; width:328px; max-width:calc(100vw - 32px);
  background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:0 26px 64px rgba(15,23,42,.26); transform:translateY(24px) scale(.6); opacity:0; pointer-events:none;
  transform-origin:bottom right; transition:transform .24s ease, opacity .18s ease;
}
/* bouncy grow on open, smooth shrink on close (transition handles both directions) */
.chat-panel.open{opacity:1; pointer-events:auto; transform:none;
  transition:transform .36s cubic-bezier(.34,1.42,.5,1), opacity .2s ease}
.chat-head{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, #3B82F6, #2563EB 55%, #4F46E5); color:#fff; padding:15px 16px}
.chat-head::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120px 90px at 88% -10%, rgba(255,255,255,.28), transparent 70%),
             radial-gradient(120px 90px at 12% 120%, rgba(255,255,255,.12), transparent 70%)}
.ch-avatar{position:relative; flex:none; width:42px; height:42px; border-radius:50%;
  box-shadow:0 2px 8px rgba(15,23,42,.18); overflow:visible}
.ch-avatar img{width:42px; height:42px; border-radius:50%; object-fit:cover; display:block}
.ch-dot{position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%;
  background:#4ADE80; border:2.5px solid #2563EB}
.ch-meta{position:relative; flex:1 1 auto; min-width:0}
.ch-meta h4{margin:0; font-size:15.5px; font-weight:700; letter-spacing:-.01em}
.ch-meta p{margin:3px 0 0; font-size:12px; opacity:.94; display:flex; align-items:center; gap:6px; white-space:nowrap}
.ch-live-dot{width:7px; height:7px; border-radius:50%; background:#4ADE80; flex:none;
  box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:chLive 2s ease-out infinite}
@keyframes chLive{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 70%{box-shadow:0 0 0 6px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.ch-close{position:relative; flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:none; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, transform .16s ease}
.ch-close svg{width:16px; height:16px}
.ch-close:hover{background:rgba(255,255,255,.28); transform:rotate(90deg)}
.chat-body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:10px}
.chat-body input, .chat-body textarea{
  width:100%; font:inherit; font-size:13.5px; color:var(--ink); background:var(--soft);
  border:1px solid var(--border); border-radius:11px; padding:11px 13px; resize:none; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.chat-body input:focus, .chat-body textarea:focus{border-color:var(--accent); background:var(--card); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.chat-send{
  position:relative; overflow:hidden; margin-top:2px; border:none; cursor:pointer; color:#fff; font-weight:700; font-size:14px;
  background:linear-gradient(135deg, var(--accent), #2563EB); padding:12px; border-radius:11px;
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:transform .15s ease, box-shadow .15s ease;
}
.chat-send:hover{transform:translateY(-2px); box-shadow:0 12px 24px color-mix(in srgb, var(--accent) 45%, transparent)}
.chat-send::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); pointer-events:none}
.chat-send:hover::after{animation:shine .75s ease}
.chat-alt{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12.5px; color:var(--muted)}
.chat-alt a{display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:600}
.chat-note{margin:6px 0 0; font-size:11.5px; color:var(--muted); text-align:center}
.chat-ok{display:none; padding:22px 18px; text-align:center}
.chat-ok svg{width:44px; height:44px; color:#22C55E; margin:0 auto 10px; display:block}
.chat-ok h4{margin:0 0 5px; font-size:16px; color:var(--ink)}
.chat-ok p{margin:0; font-size:13px; color:var(--muted)}
.chat-panel.sent .chat-body{display:none}
.chat-panel.sent .chat-ok{display:block}
@media(max-width:600px){.chat-fab{right:16px; bottom:16px} .chat-panel{right:16px; bottom:82px}}

/* live-chat UI (intro step + message thread) */
.chat-intro{padding:22px 18px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px}
.ci-hi{font-size:34px; line-height:1; transform-origin:70% 80%; animation:ciWave 2.4s ease-in-out infinite}
@keyframes ciWave{0%,55%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-8deg)} 45%{transform:rotate(12deg)}}
.ci-title{font-size:18px; font-weight:700; color:var(--ink)}
.ci-sub{font-size:13px; color:var(--muted); margin-top:-3px; margin-bottom:5px}
.ci-field{position:relative; width:100%}
.ci-field svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none}
.ci-field input{width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--soft);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px 12px 38px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.ci-field input:focus{border-color:var(--accent); background:var(--card); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.chat-intro .chat-send{width:100%; margin-top:2px}
.chat-live{display:flex; flex-direction:column; height:385px}
/* welcome strip under the top bar */
.chat-welcome{flex:none; position:relative; padding:14px 16px; background:var(--soft); text-align:center}
.chat-welcome::after{content:""; position:absolute; left:18px; right:18px; bottom:0; height:1px; background:var(--border)}
.cw-title{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.01em; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap}
.cw-title #chatWhoName{color:var(--accent)}
.cw-wave{display:inline-block; margin-left:4px; transform-origin:70% 70%; animation:cwWave 2.4s ease-in-out infinite}
@keyframes cwWave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(14deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(12deg)}}
.cw-grad{color:var(--accent)}
.cw-sub{margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.4; min-height:1.2em}
.chat-msgs{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--soft)}
/* date / unread dividers (WhatsApp-style) */
.chat-div{display:flex; align-items:center; justify-content:center; margin:4px 0}
.chat-div span{font-size:11px; font-weight:600; color:var(--muted); background:var(--card);
  border:1px solid var(--border); padding:3px 11px; border-radius:11px; box-shadow:0 1px 2px rgba(15,23,42,.05)}
.chat-div.unread{margin:8px 0 2px}
.chat-div.unread span{color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.chat-msgs .b{position:relative; max-width:84%; padding:5px 11px 5px 11px; border-radius:13px; font-size:14px; line-height:1.3; word-wrap:break-word; box-shadow:0 1px 1px rgba(15,23,42,.05); animation:bubbleIn .18s ease}
.chat-msgs .b.visitor{align-self:flex-end; background:#EEF1F6; color:#1F2937; border-bottom-right-radius:5px}
.chat-msgs .b.admin{align-self:flex-start; background:var(--card); border:1px solid var(--border); color:var(--ink); border-bottom-left-radius:5px}
.chat-msgs .b.has-media{padding:4px; max-width:76%}
.chat-msgs .b.has-media .b-tx{padding:3px 6px 0; display:block}
.chat-msgs .b.has-media .b-sp{display:none}
.chat-msgs .b.has-media .b-tm{position:static; display:block; text-align:right; padding:2px 6px 0; opacity:.7}
/* single attachment */
.b-gal-one{border-radius:10px; overflow:hidden}
.b-gal-one .b-media{display:block; width:100%; max-width:220px; max-height:260px; object-fit:cover; background:var(--soft)}
.b-gal-one video.b-media{object-fit:contain; background:#000}
/* multi-image gallery grid */
.b-gal{display:grid; grid-template-columns:1fr 1fr; gap:3px; width:216px; max-width:100%}
.b-tile{position:relative; overflow:hidden; border-radius:7px; cursor:pointer}
.b-tile img, .b-tile video{display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--soft)}
.b-gal[data-count="3"] .b-tile:first-child{grid-column:1 / -1}
.b-gal[data-count="3"] .b-tile:first-child img, .b-gal[data-count="3"] .b-tile:first-child video{aspect-ratio:2.2}
.b-more{position:absolute; inset:0; background:rgba(0,0,0,.55); color:#fff; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center}
.b-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none}
/* staged preview strip (before send) */
.chat-preview{flex:none; display:flex; flex-wrap:wrap; gap:9px; padding:10px 12px 2px; max-height:150px; overflow-y:auto; background:var(--card); border-top:1px solid var(--border)}
.cp-item{position:relative; width:56px; height:56px; flex:none}
.cp-item img, .cp-item video{width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--border); display:block}
.cp-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none}
.cp-x{position:absolute; top:-6px; right:-6px; width:20px; height:20px; border:none; border-radius:50%; background:var(--ink); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 2px 6px rgba(15,23,42,.3)}
.cp-x svg{width:11px; height:11px}
.cp-x:hover{background:#ef4444}
/* fullscreen lightbox */
.chat-lb{position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; padding:24px}
.chat-lb.show{display:flex}
.lb-stage{display:flex; align-items:center; justify-content:center; max-width:94vw; max-height:84vh}
.lb-media{max-width:94vw; max-height:84vh; border-radius:10px; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-x{position:absolute; top:16px; right:16px}
.lb-back{position:absolute; top:16px; left:16px; display:none}
.lb-x, .lb-back, .lb-nav{width:42px; height:42px; border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:grid; place-items:center}
.lb-x:hover, .lb-back:hover, .lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-x svg, .lb-back svg, .lb-nav svg{width:22px; height:22px}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%)}
.lb-prev{left:14px} .lb-next{right:14px}
.lb-count{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; background:rgba(0,0,0,.5); padding:5px 12px; border-radius:99px}
.lb-grid{display:none; grid-template-columns:1fr 1fr; gap:10px; width:min(92vw,460px); max-height:84vh; overflow-y:auto; padding:14px; background:var(--card); border-radius:16px}
.lb-grid img, .lb-grid video{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:pointer; display:block}
.chat-lb.grid .lb-grid{display:grid}
.chat-lb.grid .lb-stage, .chat-lb.grid .lb-nav, .chat-lb.grid .lb-count{display:none !important}
.chat-msgs .b-tx{white-space:pre-wrap; overflow-wrap:anywhere}
.chat-msgs .b-tail{white-space:nowrap}
.chat-msgs .b-sp{display:inline-block; width:44px}
.chat-msgs .b-tm{position:absolute; right:11px; bottom:5px; font-size:9.5px; line-height:1; letter-spacing:.02em; opacity:.8}
.chat-msgs .b.visitor .b-tm{color:#94A3B8}
.chat-msgs .b.admin .b-tm{color:var(--muted)}
.chat-msgs .b-more{cursor:pointer; font-weight:700; color:var(--accent); white-space:nowrap}
.chat-msgs .b.visitor .b-more{color:#2563EB}
.chat-msgs .b-more:hover{text-decoration:underline}
@keyframes bubbleIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.chat-compose{position:relative; flex:none; display:flex; align-items:flex-end; gap:8px; padding:10px; border-top:1px solid var(--border); background:var(--card)}
/* input wrapper holds the + inside the field */
.ci-input{position:relative; flex:1; display:flex; align-items:flex-end}
.chat-compose textarea{flex:1; width:100%; font:inherit; font-size:13.5px; line-height:20px; color:var(--ink);
  padding:7px 14px 9px 42px; height:38px; min-height:38px; max-height:78px; border:1px solid var(--border); border-radius:20px;
  outline:none; background:var(--soft); resize:none; overflow-y:hidden; box-sizing:border-box; display:block;
  scrollbar-width:none; transition:border-color .15s ease, background .15s ease}
.chat-compose textarea::-webkit-scrollbar{width:0; height:0; display:none}
.chat-compose textarea:focus{border-color:var(--accent); background:var(--card)}
.chat-compose > button[type=submit]{flex:none; width:38px; height:38px; padding:0; border:none; border-radius:50%; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--accent), #2563EB); display:grid; place-items:center; line-height:0;
  transition:transform .15s ease, box-shadow .15s ease}
.chat-compose > button[type=submit]:hover{transform:scale(1.08); box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 40%, transparent)}
/* keep the blue look while it's disabled during the intro animation (no grey/click change) */
.chat-compose > button[type=submit]:disabled{opacity:1; cursor:default; pointer-events:none; transform:none; box-shadow:none;
  background:linear-gradient(135deg, var(--accent), #2563EB)}
.chat-compose > button[type=submit] svg{width:17px; height:17px; display:block; transform:translateX(-0.5px)}
/* + attach button — inside the input, left side */
.chat-compose .chat-plus{position:absolute; left:5px; bottom:4px; z-index:2;
  width:30px; height:30px; border:none; border-radius:50%; cursor:pointer; background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; box-shadow:none; transition:background .15s ease, color .15s ease}
.chat-compose .chat-plus:hover{background:color-mix(in srgb, var(--accent) 12%, var(--soft)); color:var(--accent)}
.chat-compose .chat-plus svg{width:19px; height:19px; display:block}
/* attach popup menu */
.chat-attach{position:absolute; left:0; bottom:calc(100% + 8px); z-index:6; min-width:150px; padding:6px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,.18);
  display:flex; flex-direction:column; gap:2px; animation:bubbleIn .16s ease}
.chat-attach .ca-item{width:100%; height:auto; border:none; border-radius:9px; background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:9px 12px; font:inherit; font-size:13.5px; cursor:pointer}
.chat-attach .ca-item:hover{background:var(--soft); transform:none; box-shadow:none}
.chat-attach .ca-item svg{width:18px; height:18px; color:var(--accent); flex:none; transform:none}
/* transient toast */
.chat-toast{position:absolute; left:50%; bottom:62px; transform:translateX(-50%); z-index:7; white-space:nowrap;
  background:var(--ink); color:#fff; font-size:12.5px; padding:7px 14px; border-radius:20px;
  box-shadow:0 8px 20px rgba(15,23,42,.28); opacity:0; transition:opacity .2s ease; pointer-events:none}
.chat-toast.show{opacity:.96}

/* ── Content pages (privacy / terms / setup / support) ── */
.page-hero{padding:64px 0 6px; text-align:center; position:relative}
.page-hero .eyebrow{margin-bottom:2px}
.page-hero h1{font-size:clamp(28px,5vw,44px); line-height:1.12; letter-spacing:-.02em; margin:12px auto 0; max-width:18ch}
.page-hero .lead{margin-top:14px}
.page-body{max-width:760px; margin:0 auto; padding:24px 22px 72px}
.page-body h2{font-size:22px; text-align:left; margin:32px 0 10px; letter-spacing:-.01em; color:var(--ink)}
.page-body h3{font-size:17px; margin:22px 0 6px; color:var(--ink)}
.page-body p, .page-body li{color:var(--muted); font-size:15.5px; line-height:1.75}
.page-body ul, .page-body ol{padding-left:20px; margin:8px 0}
.page-body li{margin:6px 0}
.page-body a{color:var(--accent); font-weight:600}
.page-body strong{color:var(--ink)}
.page-body .updated{font-size:13px; color:var(--muted); margin-top:6px}
.page-body .callout{background:var(--soft); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:14px 16px; margin:18px 0}
.page-body .callout p{margin:0}
/* setup guide steps */
.guide-step{display:flex; gap:16px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; margin:14px 0; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.guide-step:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.09); border-color:color-mix(in srgb, var(--accent) 28%, var(--border))}
.guide-step .gnum{flex:none; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#2563EB); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.guide-step h3{margin:0 0 4px; font-size:16px}
.guide-step p{margin:0}
/* support cards */
.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0}
@media(max-width:600px){.help-grid{grid-template-columns:1fr}}
.help-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.help-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,23,42,.10); border-color:color-mix(in srgb, var(--accent) 28%, var(--border))}
.help-card .ic{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, #22C55E 16%, transparent))}
.help-card .ic svg{width:21px; height:21px; color:var(--accent)}
.help-card h3{margin:0 0 6px; font-size:16px}
.help-card p{margin:0; color:var(--muted); font-size:14.5px}
.help-card .card-link{display:inline-block; margin-top:10px; font-weight:600; color:var(--accent); font-size:14px}

/* ==========================================================
   Visual polish
   ========================================================== */
/* gradient headline highlight */
h1 .hl{
  background:linear-gradient(90deg, var(--accent), #22C55E 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* subtle dotted depth behind the hero */
.hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:520px; z-index:-1;
  background-image:radial-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(#000, transparent 72%); mask-image:linear-gradient(#000, transparent 72%);
  pointer-events:none;
}

/* section eyebrow gets a little underline flourish (centered via margin auto — no transform,
   so it doesn't clash with the reveal animation) */
.eyebrow::after{content:""; display:block; width:26px; height:3px; margin:7px auto 0; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), #22C55E)}

/* feature cards: gradient top-bar reveal + lift + coloured glow + gradient icon */
.feature{position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.feature::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), #22C55E); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.feature:hover::before{transform:scaleX(1)}
.feature:hover{transform:translateY(-6px); box-shadow:0 22px 44px color-mix(in srgb, var(--accent) 16%, transparent);
  border-color:color-mix(in srgb, var(--accent) 32%, var(--border))}
.feature .ic{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, #22C55E 16%, transparent)); transition:transform .22s ease, box-shadow .22s ease}
.feature:hover .ic{transform:scale(1.08) rotate(-3deg); box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent)}

/* download cards: gradient top-bar reveal + lift + coloured glow */
.dl-card{position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.dl-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), #22C55E); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.dl-card:hover::before{transform:scaleX(1)}
.dl-card:hover{transform:translateY(-6px); box-shadow:0 24px 48px color-mix(in srgb, var(--accent) 16%, transparent);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border))}
.dl-card .plat{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, #22C55E 16%, transparent)); transition:transform .22s ease}
.dl-card:hover .plat{transform:scale(1.06)}
/* the Android download card gets a green accent bar to match */
.dl-grid .dl-card:last-child::before{background:linear-gradient(90deg, #3DDC84, #22C55E)}

/* steps: gradient number chip + top-bar reveal + hover */
.steps{position:relative}
.step{position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.step::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), #22C55E); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.step:hover::before{transform:scaleX(1)}
.step:hover{transform:translateY(-5px); box-shadow:0 18px 38px color-mix(in srgb, var(--accent) 15%, transparent);
  border-color:color-mix(in srgb, var(--accent) 28%, var(--border))}
.step .n{background:linear-gradient(135deg, var(--accent), #2563EB); box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); transition:transform .22s ease}
.step:hover .n{transform:scale(1.08) rotate(-3deg)}
/* support help cards get the same top-bar + coloured glow */
.help-card{position:relative; overflow:hidden}
.help-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), #22C55E); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.help-card:hover::before{transform:scaleX(1)}
.help-card:hover{box-shadow:0 18px 38px color-mix(in srgb, var(--accent) 15%, transparent)}
.help-card .ic{transition:transform .22s ease}
.help-card:hover .ic{transform:scale(1.08) rotate(-3deg)}

/* faq: hover + open shadow */
.faq-item{transition:border-color .15s ease, box-shadow .15s ease}
.faq-item:hover{border-color:color-mix(in srgb, var(--accent) 26%, var(--border))}
.faq-item.open{box-shadow:0 12px 28px rgba(15,23,42,.08); border-color:color-mix(in srgb, var(--accent) 30%, var(--border))}

/* scroll-reveal (added by JS; no-JS shows everything) */
.reveal{opacity:0; transform:translateY(20px) scale(.98); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.07s} .reveal.d2{transition-delay:.14s} .reveal.d3{transition-delay:.21s}

/* ===== motion & flourishes ===== */
/* animated gradient headline */
h1 .hl{background-size:220% 100%; animation:hlShift 7s ease-in-out infinite}
@keyframes hlShift{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}

/* hero glow gently breathes + a soft green blob drifts */
.glow{animation:glowBreathe 9s ease-in-out infinite}
@keyframes glowBreathe{0%,100%{opacity:.75; transform:scale(1)} 50%{opacity:1; transform:scale(1.1)}}
.hero::after{
  content:""; position:absolute; z-index:-1; width:400px; height:400px; right:-130px; top:30px;
  background:radial-gradient(circle, color-mix(in srgb,#22C55E 16%,transparent), transparent 70%);
  animation:drift 15s ease-in-out infinite; pointer-events:none;
}
@keyframes drift{0%,100%{transform:translate(0,0)} 50%{transform:translate(-46px,34px)}}

/* the hero mock gently floats */
.mock{animation:floaty 6.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}

/* nav links: animated gradient underline */
.nav-links a{position:relative}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), #22C55E);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-links a:hover::after{transform:scaleX(1)}

/* primary buttons: a light shine sweeps across on hover */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after{animation:shine .75s ease}
@keyframes shine{from{left:-130%} to{left:150%}}

/* theme toggle: soft accent tint + a clean pop (scales in place, no drift) on hover */
.theme-toggle:hover{background:var(--accent-soft); border-color:transparent}
.theme-toggle svg{transform-origin:center center; transform-box:fill-box}
.theme-toggle:hover svg{animation:themePop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes themePop{
  0%{transform:scale(1)}
  45%{transform:scale(1.3)}
  100%{transform:scale(1)}
}

/* brand: gradient wordmark + the logo gives a springy pop on hover */
.brand{
  background:linear-gradient(90deg, var(--accent), #22C55E);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.brand img{-webkit-text-fill-color:initial; transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.1)}
/* keep the footer wordmark on the solid ink colour */
footer .brand{background:none; -webkit-text-fill-color:initial; color:var(--ink)}

/* download-section buttons match the hero: Windows fills blue, APK fills green (on hover) */
.dl-card .btn-primary{background:var(--card); color:var(--accent); border-color:var(--border)}
.dl-card .btn-primary:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-1px)}
.dl-card .btn-ghost{border-color:#3DDC84}
/* Android card: green platform icon + green-tinted badge */
.dl-grid .dl-card:last-child .plat{background:linear-gradient(135deg, color-mix(in srgb,#3DDC84 24%,transparent), color-mix(in srgb,#22C55E 16%,transparent))}
.dl-grid .dl-card:last-child .plat svg{color:#22B866}

/* ── Mobile: hide the monitor/taskbar/desktop, show only the OwnMic app window ── */
@media(max-width:600px){
  /* drop the outer card chrome — let the devices float on the hero */
  .mock{padding:0; gap:26px; background:none; border:none; box-shadow:none; border-radius:0}
  .pc{width:auto}
  .pc-monitor{border-radius:0; box-shadow:none}
  .pc .screen{height:auto; border-radius:0; overflow:visible; background:transparent}
  .win-desk{position:static; background:none; height:auto; overflow:visible}
  .win-app{position:static; transform:none; margin:0 auto; box-shadow:0 10px 30px rgba(15,23,42,.08)}
  .win-taskbar, .pc-neck, .pc-base{display:none}
}

/* ── General mobile polish: a little tighter, but layout unchanged ── */
@media(max-width:600px){
  section{padding:48px 0}
  .hero{padding:34px 0 30px}
  .mock{margin-top:34px}
}
@media(max-width:400px){
  .wrap{padding:0 16px}
}

.ci-platform { text-align: left; }
.ci-platform label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin: 0 0 6px 2px; }
.ci-platform label span { font-weight: 400; color: var(--muted); }
.ci-platform select { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ci-platform select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

.ci-name { text-align: left; }
.ci-name label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin: 0 0 6px 2px; }
.ci-name svg { top: auto; bottom: 14px; transform: none; }
.ci-name input, .ci-name input:focus, .ci-platform select, .ci-platform select:focus { background: transparent; }

.chat-intro .chat-send:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.chat-intro .chat-send:disabled::after{animation:none}

.b-gal-one{position:relative}
.b-video-open,.lb-video-play{display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.b-video-open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.b-video-open svg{width:22px;height:22px}
.lb-video-frame{position:relative;display:flex;align-items:center;justify-content:center;max-width:90vw}
.lb-video-frame video{display:block;max-width:90vw;max-height:76vh;background:#101014}
.lb-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px}
.lb-video-play svg{width:30px;height:30px}
.lb-video-play[hidden],.lv-error[hidden]{display:none}
.lb-video-controls{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(10,12,18,.85);color:#fff;backdrop-filter:blur(12px)}
.lb-video-controls button{border:0;background:transparent;color:#fff;cursor:pointer;width:28px;height:28px;flex:none;display:grid;place-items:center}
.lb-video-controls svg{width:20px;height:20px}
.lb-video-controls input{padding:0;accent-color:#fff;cursor:pointer;min-width:0}
.lv-seek{flex:1;width:100px}.lv-volume{width:70px;flex:none}.lv-time{font-size:11px;white-space:nowrap}.lv-mute.is-muted{opacity:.5}
.lv-error{position:absolute;left:15px;right:15px;top:20px;padding:12px;border-radius:10px;background:rgba(0,0,0,.8);color:#fff;text-align:center;font-size:13px}
@media(max-width:600px){.lb-video-controls{gap:5px;padding:8px;left:4px;right:4px}.lv-volume{width:45px}.lv-time{font-size:10px}.lb-video-controls button{width:24px}.lb-video-frame{min-width:85vw}}

.chat-panel video::-webkit-media-controls,.chat-lb video::-webkit-media-controls,.chat-panel video::-webkit-media-controls-enclosure,.chat-lb video::-webkit-media-controls-enclosure,.chat-panel video::-webkit-media-controls-overlay-enclosure,.chat-lb video::-webkit-media-controls-overlay-enclosure,.chat-panel video::-webkit-media-controls-overlay-play-button,.chat-lb video::-webkit-media-controls-overlay-play-button{display:none!important}

.lb-video-controls{gap:7px;padding:5px 9px;bottom:10px;left:10px;right:10px;border-radius:9px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.lb-video-frame.controls-visible .lb-video-controls,.lb-video-controls:focus-within{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
.lb-video-controls button{width:24px;height:24px;border-radius:6px;transition:background .2s ease,transform .2s ease}
.lb-video-controls button:hover{background:rgba(255,255,255,.14)}
.lb-video-controls button:active{transform:scale(.92)}
.lb-video-controls button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.lb-video-controls svg{width:16px;height:16px}.lv-volume{width:55px}.lv-time{font-size:10px}
.lb-video-play{width:56px;height:56px;transition:background .2s ease,box-shadow .2s ease}
.lb-video-play svg{width:24px;height:24px}
.lb-video-play:hover{background:rgba(0,0,0,.75);box-shadow:0 0 0 5px rgba(255,255,255,.08)}
@media(max-width:600px){.lb-video-controls{padding:5px 6px;gap:4px}.lb-video-controls button{width:22px;height:22px}.lv-volume{width:40px}}

.lb-video-controls button{padding:0;display:flex;align-items:center;justify-content:center;line-height:1}
.lb-video-controls button svg{display:block;flex:none;margin:0}
.lb-video-play{padding:0;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s,background .2s ease,box-shadow .2s ease}
.lb-video-play svg{display:block;flex:none;margin:0;transform:translateX(-1px)}
.lb-video-play.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.b-video-open{padding:0;line-height:1}.b-video-open svg{display:block;transform:translateX(1px)}

.lb-video-controls button:disabled,.lb-nav:disabled{opacity:.3;cursor:default;pointer-events:none}
.lb-video-controls button[hidden],.lb-nav[hidden]{display:none}

.chat-lb{background:#fff}
.chat-lb > .lb-x,.chat-lb > .lb-back,.chat-lb > .lb-nav{background:#f0f2f5;color:#1f2937;border:1px solid #e2e6ec}
.chat-lb > .lb-x:hover,.chat-lb > .lb-back:hover,.chat-lb > .lb-nav:hover{background:#e5e9ef}
.chat-lb .lb-count{background:#f0f2f5;color:#475569}
.chat-lb .lb-media{box-shadow:0 8px 30px rgba(15,23,42,.12)}

.chat-panel,.chat-welcome,.chat-msgs,.chat-live{background:#fff}

.chat-msgs > .chat-welcome{flex:none;align-self:stretch;margin:-14px -14px 6px;padding:14px 16px}

.chat-msgs .b.has-media{display:flow-root}
.chat-msgs .b.has-media .b-tx{display:inline;padding:0;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msgs .b.has-media .b-sp{display:inline-block;width:44px}
.chat-msgs .b.has-media .b-tm{position:absolute;right:8px;bottom:6px;padding:0;line-height:1}
.chat-msgs .b.has-media:has(.b-tx){padding-bottom:6px}
.chat-msgs .b.has-media:has(.b-tx) .b-tx{margin-left:5px;line-height:1.3}
.chat-msgs .b.has-media > .b-gal-one,.chat-msgs .b.has-media > .b-gal{margin-bottom:4px}
.chat-msgs .b.has-media:not(:has(.b-tx)) .b-tm{position:static;display:block;text-align:right;padding:2px 4px;line-height:1}
.chat-msgs .b.has-media:not(:has(.b-tx)) .b-sp{display:none}

.chat-preview .cp-x{padding:0;display:flex;align-items:center;justify-content:center;line-height:1}
.chat-preview .cp-x svg{display:block;flex:none;margin:0}

[data-download-platform][aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* ── Mobile menu (2026-10-15): ☰ button under 720px opens the nav links as a drop-down card ── */
.nav-menu{display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--ink); cursor:pointer; flex:none; align-items:center; justify-content:center; transition:.15s ease}
.nav-menu:hover{color:var(--accent); border-color:var(--accent)}
.nav-menu svg{width:20px; height:20px}
.nav-menu .i-close{display:none}
@keyframes navDrop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media(max-width:720px){
  .nav-menu{display:flex}
  .nav-right{gap:10px}
  header.menu-open .nav-links{display:flex; position:absolute; top:calc(100% + 6px); left:12px; right:12px; flex-direction:column; align-items:stretch; gap:2px; padding:8px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); animation:navDrop .22s ease}
  header.menu-open .nav-links a{padding:12px 14px; border-radius:10px; font-size:15px; color:var(--ink)}
  header.menu-open .nav-links a:hover{background:var(--soft)}
  header.menu-open .nav-links a::after{display:none}
  header.menu-open .nav-menu .i-open{display:none}
  header.menu-open .nav-menu .i-close{display:block}
}
@media(prefers-reduced-motion:reduce){header.menu-open .nav-links{animation:none}}

/* ═══ Hero product slideshow (real app screens, auto-sliding) ═══ */
.t-dark{display:none !important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .t-light{display:none !important}
  :root:not([data-theme="light"]) .t-dark{display:block !important}
}
:root[data-theme="dark"] .t-light{display:none !important}
:root[data-theme="dark"] .t-dark{display:block !important}

.slides{max-width:1080px; margin:44px auto 0; position:relative}
.slides-view{position:relative; aspect-ratio:1400/791; border-radius:28px; overflow:hidden;
  background:radial-gradient(90% 90% at 50% 15%, var(--accent-soft, #EAF2FF), var(--soft) 72%);
  box-shadow:0 0 0 1px var(--border), 0 40px 80px -40px rgba(15,23,42,.35)}
.slide{position:absolute; inset:4% 3% 2%; margin:0; opacity:0; transform:translateX(6%) scale(.97);
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.slide.on{opacity:1; transform:none}
.slide.out{opacity:0; transform:translateX(-6%) scale(.97)}
.slide img{display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(15,23,42,.18))}
.slides-bar{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px}
.slides-info{display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0}
.slides-cap{font-size:15px; font-weight:600; color:var(--ink); text-align:center; min-height:1.4em}
.slides-dots{display:flex; gap:8px}
.slides-dots button{position:relative; width:28px; height:6px; padding:0; border:0; border-radius:99px; background:var(--border); cursor:pointer; overflow:hidden}
.slides-dots button i{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); background:var(--accent)}
.slides-dots button.done i{transform:scaleX(1)}
.slides-arrow{flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; transition:border-color .2s, color .2s, transform .2s}
.slides-arrow:hover{border-color:var(--accent); color:var(--accent); transform:scale(1.06)}
.slides-arrow svg{width:18px; height:18px}
@media (max-width:560px){ .slides{margin-top:30px} .slides-view{border-radius:18px} .slides-cap{font-size:13.5px} .slides-dots button{width:18px} }

/* slideshow: a real slide (the next screen pushes the current one out), no fade */
.slides-view{overflow:hidden}
.slide{opacity:1; transform:translateX(105%); transition:transform .8s cubic-bezier(.65,0,.25,1); visibility:hidden}
.slide.on{transform:translateX(0); visibility:visible}
.slide.out{opacity:1; transform:translateX(-105%); visibility:visible}
.slide.from-left{transform:translateX(-105%)}
.slide.out.to-right{transform:translateX(105%)}
.slide.no-anim{transition:none}

/* slideshow arrows sit on the sides of the picture, vertically centred (not under it) */
.slides{--arrow-y:calc((min(1080px, 100vw - 40px) * 791 / 1400) / 2)}
.slides-arrow{position:absolute; top:var(--arrow-y); transform:translateY(-50%); z-index:3; width:46px; height:46px;
  background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:blur(6px); box-shadow:0 8px 20px -8px rgba(15,23,42,.3)}
.slides-arrow[data-dir="-1"]{left:16px}
.slides-arrow[data-dir="1"]{right:16px}
.slides-arrow:hover{transform:translateY(-50%) scale(1.06)}
@media (max-width:560px){ .slides-arrow{width:36px; height:36px} .slides-arrow[data-dir="-1"]{left:8px} .slides-arrow[data-dir="1"]{right:8px} }

/* slideshow caption + dots: a glass pill inside the card, bottom centre */
.slide{inset:3% 3% 11%}
.slides-bar{position:absolute; left:50%; top:calc(var(--arrow-y) * 2 - 16px); transform:translate(-50%, -100%); z-index:3; margin:0;
  padding:9px 18px 10px; border-radius:16px; background:color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px var(--border), 0 10px 24px -12px rgba(15,23,42,.3); max-width:calc(100% - 140px)}
.slides-info{gap:7px}
.slides-cap{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
@media (max-width:560px){ .slide{inset:3% 3% 15%} .slides-bar{padding:6px 12px 7px; top:calc(var(--arrow-y) * 2 - 8px); max-width:calc(100% - 96px)} .slides-cap{font-size:12px} }
/* the bar is out of the flow, so .slides is exactly the card: place by its edges */
.slides-arrow{top:50%}
.slides-bar{top:auto; bottom:16px; transform:translateX(-50%)}
@media (max-width:560px){ .slides-bar{top:auto; bottom:8px} }

/* caption + dots: one line under the card — caption on the left, dots on the right */
.slide{inset:4% 3% 3%}
.slides-bar{position:static; transform:none; max-width:none; margin:16px 6px 0; padding:0; background:none; backdrop-filter:none; box-shadow:none; border-radius:0}
.slides-info{flex-direction:row; justify-content:space-between; align-items:center; gap:16px; width:100%}
.slides-cap{font-size:15px; text-align:left}
.slides-arrow{top:calc(50% - 22px)}
@media (max-width:560px){ .slide{inset:4% 3% 3%} .slides-bar{margin:12px 2px 0} .slides-info{flex-direction:column; align-items:center; gap:8px} .slides-cap{font-size:13px; text-align:center} .slides-arrow{top:calc(50% - 30px)} }

/* smaller card, so the card and its caption/dots line fit on screen together */
.slides{max-width:min(860px, calc((100vh - 150px) * 1400 / 791))}
.slides-bar{margin-top:14px}
/* progress dots: easier to see */
.slides-dots{gap:6px}
.slides-dots button{width:34px; height:5px; background:color-mix(in srgb, var(--ink) 16%, transparent)}
.slides-dots button i{background:var(--accent)}

/* progress dots: inside the card, at the top centre; the caption stays under the card */
.slides-dots{position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:3}
.slide{inset:8% 3% 3%}
.slides-info{justify-content:center}
.slides-cap{text-align:center}
@media (max-width:560px){ .slides-dots{top:10px} .slides-dots button{width:22px} .slide{inset:10% 3% 3%} }

/* caption + dots both inside the card, top centre (caption, then the dots under it) */
.slides-bar{position:absolute; top:16px; left:50%; transform:translateX(-50%); margin:0; z-index:3; width:max-content; max-width:calc(100% - 140px)}
.slides-info{flex-direction:column; align-items:center; gap:8px}
.slides-dots{position:static; transform:none}
.slides-cap{font-size:15px}
.slide{inset:13% 3% 3%}
@media (max-width:560px){ .slides-bar{top:8px; max-width:calc(100% - 24px)} .slides-cap{font-size:12px} .slide{inset:17% 3% 3%} .slides-arrow{top:calc(50% - 18px)} }
.slides-bar{bottom:auto}
@media (max-width:560px){ .slides-bar{bottom:auto} }

/* arrows centred on the picture area (below the caption), caption well clear of the devices */
.slides-arrow{top:55%; transform:translateY(-50%)}
.slides-arrow:hover{transform:translateY(-50%) scale(1.06)}
@media (max-width:560px){
  .slides-bar{top:12px}
  .slides-cap{font-size:12.5px; font-weight:600}
  .slides-info{gap:7px}
  .slides-dots{gap:4px}
  .slides-dots button{width:16px; height:4px}
  .slide{inset:25% 4% 4%}
  .slides-arrow{top:62.5%; width:30px; height:30px; box-shadow:0 4px 12px -4px rgba(15,23,42,.3)}
  .slides-arrow svg{width:14px; height:14px}
  .slides-arrow[data-dir="-1"]{left:6px}
  .slides-arrow[data-dir="1"]{right:6px}
}
/* arrows level with the middle of the monitor screen (what reads as the centre), not the stand */
.slides-arrow{top:50%}
@media (max-width:560px){ .slides-arrow{top:54%} }

/* desktop: a bigger card (the pictures are shrunk less, so they stay sharper) */
@media (min-width:561px){ .slides{max-width:min(1120px, calc((100vh - 110px) * 1400 / 791))} }
/* mobile: arrows a little higher, and hidden until the card is tapped */
@media (max-width:560px){
  .slides-arrow{top:50%; opacity:0; pointer-events:none; transition:opacity .25s ease}
  .slides.show-arrows .slides-arrow{opacity:1; pointer-events:auto}
}

/* desktop: arrows hidden until the mouse is over the card */
@media (min-width:561px){
  .slides-arrow{opacity:0; pointer-events:none; transition:opacity .25s ease, transform .2s ease, border-color .2s, color .2s}
  .slides:hover .slides-arrow, .slides:focus-within .slides-arrow{opacity:1; pointer-events:auto}
}

/* desktop: the card breaks out of the 1080px column and grows with the window (sharper pictures) */
@media (min-width:561px){
  .slides{width:min(1360px, calc(100vw - 48px), calc((100vh - 60px) * 1400 / 791)); max-width:none;
    position:relative; left:50%; transform:translateX(-50%); margin-left:0; margin-right:0}
}

/* ═══ Ratings (real ratings from the apps; hidden until there is one) ═══ */
#ratings[hidden]{display:none}
.rt-grid{display:grid; grid-template-columns:minmax(240px, 300px) 1fr; gap:22px; align-items:start; max-width:960px; margin:0 auto}
.rt-no-reviews .rt-grid{grid-template-columns:minmax(240px, 340px); justify-content:center}
.rt-summary{padding:24px; border-radius:20px; border:1px solid var(--border); background:var(--card); text-align:center}
.rt-avg{font-size:54px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink)}
.rt-stars{display:flex; justify-content:center; gap:3px; margin:10px 0 6px}
.rt-count{font-size:13.5px; color:var(--muted)}
.rt-dist{display:flex; flex-direction:column; gap:7px; margin-top:18px}
.rt-row{display:grid; grid-template-columns:30px 1fr 34px; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.rt-lab{display:inline-flex; align-items:center; gap:3px}
.rt-lab svg{width:12px; height:12px; fill:#F59E0B}
.rt-track{height:7px; border-radius:99px; background:var(--soft); overflow:hidden}
.rt-track i{display:block; height:100%; border-radius:99px; background:#F59E0B}
.rt-n{text-align:right}
.rt-star{position:relative; display:inline-block; width:20px; height:20px}
.rt-star svg{position:absolute; inset:0; width:100%; height:100%}
.rt-star svg:first-child{fill:color-mix(in srgb, var(--ink) 14%, transparent)}
.rt-star svg + svg{fill:#F59E0B; clip-path:inset(0 calc(100% - var(--fill)) 0 0)}
.rt-reviews{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
.rt-card{margin:0; padding:18px 18px 16px; border-radius:18px; border:1px solid var(--border); background:var(--card); display:flex; flex-direction:column; gap:10px}
.rt-card-stars{display:flex; gap:2px}
.rt-card-stars .rt-star{width:15px; height:15px}
.rt-card blockquote{margin:0; font-size:14.5px; line-height:1.55; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere}
.rt-card figcaption{margin-top:auto; font-size:12.5px; color:var(--muted)}
@media (max-width:760px){ .rt-grid{grid-template-columns:1fr} .rt-reviews{grid-template-columns:1fr} }