/* =========================================================
   SelectivePro - Landing
   Native CSS. One accent (teal/petrol from the logo).
   System font stack (authentic for a macOS product).
   ========================================================= */

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* neutrals (cool-warm slate) */
  --bg:        #f4f6f5;
  --bg-2:      #eceeed;
  --surface:   #ffffff;
  --ink:       #17211f;
  --ink-soft:  #46524f;
  --muted:     #6a7672;
  --line:      #e2e6e4;
  --line-soft: #edefee;

  /* brand - single locked accent */
  --brand:     #216b74;   /* petrol, from the logo */
  --brand-600: #1c5c64;
  --brand-700: #164952;
  --brand-900: #123a41;
  --accent:    #14757f;   /* interactive teal */
  --accent-ink:#0e5a63;

  /* status (semantic - eyes) */
  --open:   #2f9e6f;
  --half:   #e08a2b;
  --closed: #d1544e;

  --radius:   16px;
  --radius-s: 11px;
  --radius-l: 24px;
  --shadow:   0 1px 2px rgba(18,58,65,.05), 0 12px 30px -12px rgba(18,58,65,.16);
  --shadow-lg:0 2px 6px rgba(18,58,65,.06), 0 40px 70px -30px rgba(18,58,65,.30);
  --maxw: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"]{
  --bg:        #0e1514;
  --bg-2:      #131c1b;
  --surface:   #16211f;
  --ink:       #eef2f0;
  --ink-soft:  #b6c1bd;
  --muted:     #8a9793;
  --line:      #223230;
  --line-soft: #1b2725;

  --brand:     #4fb2bd;
  --brand-600: #6ac4ce;
  --brand-700: #8ad4dc;
  --brand-900: #cfe9ec;
  --accent:    #56b8c2;
  --accent-ink:#8fd6dd;

  --open:   #46c489;
  --half:   #f0a94b;
  --closed: #e86b64;
  --shadow:   0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(0,0,0,.6);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 50px 90px -40px rgba(0,0,0,.75);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:640; }
h2{ font-size:clamp(1.7rem,1rem+2.4vw,2.7rem); letter-spacing:-.028em; }
h3{ font-size:1.16rem; letter-spacing:-.015em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
kbd{ font-family:var(--font); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

.eyebrow{
  display:inline-block; font-size:.74rem; font-weight:640;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;
}

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain{ mix-blend-mode:screen; opacity:.22; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-weight:560; font-size:.94rem; letter-spacing:-.01em;
  padding:11px 18px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--lg{ padding:14px 24px; font-size:1rem; }
.btn--solid{ background:var(--brand); color:#fff; box-shadow:0 8px 20px -8px rgba(33,107,116,.7); }
.btn--solid:hover{ background:var(--brand-600); transform:translateY(-1px); }
[data-theme="dark"] .btn--solid{ color:#08201f; box-shadow:0 8px 24px -10px rgba(79,178,189,.5); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn--onbrand{ background:#fff; color:var(--brand-700); }
.btn--onbrand:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(0,0,0,.35); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:0 24px;
  height:66px; display:flex; align-items:center; gap:22px;
}
.brand{ display:inline-flex; align-items:center; gap:9px; font-weight:680; }
.brand__logo{
  display:block; width:42px; height:42px; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px -3px rgba(18,58,65,.35);
}
.brand__logo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); transform-origin:center 46%;
}
[data-theme="dark"] .brand__logo{ box-shadow:0 2px 10px -3px rgba(0,0,0,.6); }
.brand__word{ font-size:1.06rem; letter-spacing:-.03em; }
.brand__pro{ color:var(--accent); }
.nav__links{ display:flex; gap:26px; margin-left:8px; }
.nav__links a{ font-size:.92rem; color:var(--ink-soft); transition:color .18s; }
.nav__links a:hover{ color:var(--ink); }
.nav__actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav__login{ font-size:.92rem; font-weight:520; color:var(--ink-soft); transition:color .18s; }
.nav__login:hover{ color:var(--accent-ink); }
@media (max-width:520px){ .nav__login{ display:none; } }
.theme-toggle{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); cursor:pointer;
  display:grid; place-items:center; transition:border-color .18s, color .18s;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent-ink); }
.theme-toggle .i-moon{ display:none; }
[data-theme="dark"] .theme-toggle .i-sun{ display:none; }
[data-theme="dark"] .theme-toggle .i-moon{ display:block; }

@media (max-width:820px){
  .nav__links{ display:none; }
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(48px,7vw,92px) 0 clamp(56px,7vw,96px); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 82% 8%, color-mix(in srgb,var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(50% 50% at 8% 30%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 72%);
}
.hero__grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:24px;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,60px); align-items:center;
}
.hero__title{
  font-size:clamp(2.4rem,1.2rem+4.3vw,4.15rem); font-weight:680;
  letter-spacing:-.035em; line-height:1.02; margin-bottom:22px;
}
.hero__title em{ font-style:italic; color:var(--accent); font-weight:660; }
.hero__sub{ font-size:clamp(1.02rem,.95rem+.4vw,1.2rem); color:var(--ink-soft); max-width:34ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 16px; }
.hero__meta{ font-size:.85rem; color:var(--muted); }

/* window mock */
.window{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-lg);
}
.window__bar{
  display:flex; align-items:center; gap:7px; padding:12px 15px;
  border-bottom:1px solid var(--line-soft); background:var(--bg-2);
}
.dot{ width:11px; height:11px; border-radius:50%; }
.dot--r{ background:#ec6a5e; } .dot--y{ background:#f4bf4f; } .dot--g{ background:#61c554; }
.window__title{ margin-left:10px; font-size:.78rem; color:var(--muted); letter-spacing:-.01em; }
.window__body{ position:relative; }
.shot{ width:100%; height:auto; display:block; }

.chip{
  position:absolute; top:14px; right:14px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; padding:6px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--open) 92%, #000); color:#fff;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
}
.tag{
  position:absolute; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:#fff; box-shadow:0 4px 12px -3px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.85);
}
.tag--open{ background:var(--open); }
.tag--half{ background:var(--half); }
.tag--closed{ background:var(--closed); }

.window__legend{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; padding-left:4px;
  font-size:.82rem; color:var(--muted);
}
.window__legend span{ display:inline-flex; align-items:center; gap:7px; }
.key{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.key--open{ background:var(--open); } .key--half{ background:var(--half); } .key--closed{ background:var(--closed); }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__sub{ max-width:48ch; }
  .hero__visual{ order:2; }
}

/* ---------- value ---------- */
.value{ padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--line-soft); }
.value__grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(28px,5vw,72px); align-items:center; }
.value__lead h2{ margin-bottom:18px; }
.value__lead p{ color:var(--ink-soft); font-size:1.06rem; max-width:52ch; }
.value__stats{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.value__stats li{
  display:flex; flex-direction:column; padding:16px 0; border-top:1px solid var(--line);
}
.value__stats li:last-child{ border-bottom:1px solid var(--line); }
.value__stats b{ font-size:1.5rem; letter-spacing:-.02em; color:var(--brand); font-weight:660; }
[data-theme="dark"] .value__stats b{ color:var(--brand-600); }
.value__stats span{ font-size:.92rem; color:var(--muted); }
@media (max-width:820px){ .value__grid{ grid-template-columns:1fr; } }

/* ---------- section head ---------- */
.section-head{ max-width:640px; margin-bottom:clamp(30px,4vw,52px); }
.section-head h2{ margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.section-head--center{ margin-inline:auto; text-align:center; }

/* ---------- features / bento ---------- */
.features{ padding:clamp(50px,7vw,100px) 0; }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.cell{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); transition:transform .3s var(--ease), border-color .3s;
}
.cell:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%, var(--line)); }
.cell__ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--brand) 12%, var(--surface)); color:var(--brand);
  margin-bottom:16px;
}
[data-theme="dark"] .cell__ico{ background:color-mix(in srgb,var(--brand) 20%, var(--surface)); color:var(--brand-600); }
.cell h3{ margin-bottom:9px; }
.cell p{ color:var(--ink-soft); font-size:.96rem; }

.cell--eyes{ grid-column:span 3; grid-row:span 2;
  background:linear-gradient(155deg, color-mix(in srgb,var(--brand) 10%, var(--surface)), var(--surface) 60%); }
.cell--sharp{ grid-column:span 3; }
.cell--rate{ grid-column:span 3; }
.cell--filter{ grid-column:span 3; }
.cell--crop{ grid-column:span 6; }

.cell__demo{ display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; }
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:560;
  padding:6px 13px; border-radius:999px; background:var(--bg-2); color:var(--ink-soft); }
.pill i{ width:9px; height:9px; border-radius:50%; }
.pill--open i{ background:var(--open); } .pill--half i{ background:var(--half); } .pill--closed i{ background:var(--closed); }

.cell__wide{ display:grid; grid-template-columns:1.4fr .8fr; gap:28px; align-items:center; }
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:26px; font-size:.94rem; color:var(--ink-soft); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:50%;
  background:var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (max-width:920px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .cell--eyes{ grid-column:span 2; grid-row:auto; }
  .cell--sharp,.cell--rate,.cell--filter{ grid-column:span 1; }
  .cell--crop{ grid-column:span 2; }
  .cell__wide{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .cell--eyes,.cell--sharp,.cell--rate,.cell--filter,.cell--crop{ grid-column:span 1; }
}

/* ---------- mini row (hairline, not cards) ---------- */
.mini{
  margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 40px; border-top:1px solid var(--line);
}
.mini__item{ padding:26px 0; border-bottom:1px solid var(--line-soft); }
.mini__item h4{ font-size:1.02rem; margin-bottom:7px; letter-spacing:-.015em; }
.mini__item h4::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:2px;
  background:var(--accent); margin-right:9px; vertical-align:middle; }
.mini__item p{ color:var(--muted); font-size:.92rem; }
@media (max-width:820px){ .mini{ grid-template-columns:1fr 1fr; gap:0 28px; } }
@media (max-width:520px){ .mini{ grid-template-columns:1fr; } }

/* ---------- how ---------- */
.how{ padding:clamp(50px,7vw,100px) 0; background:var(--bg-2); border-block:1px solid var(--line-soft); }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow); position:relative; }
.step__ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px;
  background:var(--brand); color:#fff;
}
[data-theme="dark"] .step__ico{ color:#08201f; }
.step h3{ margin-bottom:9px; }
.step p{ color:var(--ink-soft); font-size:.96rem; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* ---------- showcase ---------- */
.showcase{ padding:clamp(50px,7vw,100px) 0; }
.showcase__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center; }
.showcase__copy h2{ margin-bottom:16px; }
.showcase__copy p{ color:var(--ink-soft); font-size:1.05rem; max-width:46ch; margin-bottom:26px; }
.kbd-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.kbd-list li{ display:flex; align-items:center; gap:10px; }
.kbd-list kbd{
  min-width:34px; height:34px; padding:0 10px; display:inline-grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:8px; font-size:.9rem; font-weight:600; color:var(--ink);
}
.kbd-list span{ color:var(--ink-soft); font-size:.96rem; }
.window--flat{ box-shadow:var(--shadow); }
@media (max-width:860px){ .showcase__grid{ grid-template-columns:1fr; } .showcase__shot{ order:2; } }

/* ---------- privacy ---------- */
.privacy{ padding:clamp(56px,8vw,110px) 0; background:
   linear-gradient(160deg, var(--brand-700), var(--brand-900)); color:#fff; }
[data-theme="dark"] .privacy{ background:linear-gradient(160deg, #10262a, #0b1b1e); border-block:1px solid var(--line); }
.privacy__inner{ max-width:680px; margin-inline:auto; text-align:center; }
.privacy__mark{ width:64px; height:64px; margin:0 auto 22px; border-radius:18px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; }
.privacy h2{ color:#fff; margin-bottom:16px; }
.privacy p{ color:rgba(255,255,255,.82); font-size:1.1rem; max-width:52ch; margin:0 auto; }
.privacy__tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.privacy__tags span{ font-size:.86rem; font-weight:560; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); }

/* ---------- requirements ---------- */
.req{ padding:clamp(50px,7vw,96px) 0; }
.req__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start; }
.req__head p{ color:var(--muted); margin-top:12px; }
.req__list{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.req__list > div{ padding:20px 0; border-top:1px solid var(--line); }
.req__list dt{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px; }
.req__list dd{ margin:0; font-size:1.02rem; font-weight:520; color:var(--ink); letter-spacing:-.01em; }
@media (max-width:820px){ .req__grid{ grid-template-columns:1fr; } .req__list{ grid-template-columns:1fr; } }

/* ---------- download ---------- */
.download{ padding:clamp(50px,7vw,96px) 0; }
.download__inner{
  max-width:820px; margin-inline:auto; text-align:center;
  background:linear-gradient(155deg, var(--brand), var(--brand-700));
  border-radius:var(--radius-l); padding:clamp(40px,6vw,72px) 28px; color:#fff;
  box-shadow:var(--shadow-lg);
}
[data-theme="dark"] .download__inner{ background:linear-gradient(155deg,#1a4a52,#123338); }
.download h2{ color:#fff; margin-bottom:14px; }
.download p{ color:rgba(255,255,255,.85); font-size:1.08rem; max-width:44ch; margin:0 auto 30px; }
.download__fine{ font-size:.84rem !important; color:rgba(255,255,255,.66) !important; margin-top:18px !important; }
.download__reg{ font-size:.9rem; color:rgba(255,255,255,.8); margin-top:10px; }
.download__reg a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* ---------- faq ---------- */
.faq{ padding:clamp(50px,7vw,96px) 0; background:var(--bg-2); border-top:1px solid var(--line-soft); }
.acc{ max-width:800px; }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__item summary{
  list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; gap:16px;
  font-size:1.08rem; font-weight:560; letter-spacing:-.015em; color:var(--ink);
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__plus{ margin-left:auto; position:relative; width:18px; height:18px; flex-shrink:0; }
.acc__plus::before,.acc__plus::after{ content:""; position:absolute; background:var(--accent); border-radius:2px;
  transition:transform .25s var(--ease); }
.acc__plus::before{ left:0; top:8px; width:18px; height:2px; }
.acc__plus::after{ left:8px; top:0; width:2px; height:18px; }
.acc__item[open] .acc__plus::after{ transform:rotate(90deg) scaleX(0); }
.acc__body{ padding:0 4px 24px; }
.acc__body p{ color:var(--ink-soft); max-width:62ch; }

/* ---------- footer ---------- */
.foot{ background:var(--surface); border-top:1px solid var(--line); padding:clamp(40px,5vw,64px) 0 30px; }
.foot__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-soft); }
.foot__logo{ width:66px; height:66px; border-radius:15px; display:block; box-shadow:0 3px 12px -4px rgba(18,58,65,.4); }
[data-theme="dark"] .foot__logo{ box-shadow:0 3px 14px -4px rgba(0,0,0,.6); }
.foot__brand p{ color:var(--muted); font-size:.92rem; margin-top:14px; max-width:34ch; }
.foot__nav,.foot__legal{ display:grid; gap:11px; align-content:start; }
.foot__nav a,.foot__legal a{ color:var(--ink-soft); font-size:.92rem; }
.foot__nav a:hover,.foot__legal a:hover{ color:var(--accent-ink); }
.foot__base{ display:flex; justify-content:space-between; padding-top:24px; color:var(--muted); font-size:.85rem; }
@media (max-width:720px){ .foot__inner{ grid-template-columns:1fr 1fr; } .foot__brand{ grid-column:1/-1; } }
@media (max-width:460px){ .foot__base{ flex-direction:column; gap:6px; } }