/* ============ IMAP Cleaner - landing page ============ */
/* Palette matched to the app (brand #1890d8, ink #0a0f1a, Sora + Inter). */

:root{
  --brand:#1890d8; --brand-light:#3aa6ec; --brand-dark:#0f6fae;
  --ink:#0a0f1a; --panel:#111927; --panel2:#1a2433; --line:#27324a;
  --cream:#eef1f7; --muted:#94a0bd; --ok:#3ecf8e; --danger:#ff5d73;
  --r:14px;
  --maxw:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; color:var(--cream); background:var(--ink);
  font-family:"Inter",system-ui,sans-serif; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Sora",system-ui,sans-serif; line-height:1.12; margin:0}
a{color:inherit; text-decoration:none}
b{color:var(--cream); font-weight:600}
/* Only horizontal padding here, via longhand, so it never clobbers the
   vertical padding of .section / .hero / .nav that share the same element. */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding-left:22px; padding-right:22px}
.muted{color:var(--muted)}
.grad{
  background:linear-gradient(100deg,var(--brand-light),#7ad0ff 60%,var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- ambient background orbs ---- */
.bg-orbs{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.orb-1{width:560px;height:560px; top:-180px; right:-120px;
  background:radial-gradient(circle,rgba(24,144,216,.45),transparent 70%); animation:float1 18s ease-in-out infinite}
.orb-2{width:480px;height:480px; top:520px; left:-160px;
  background:radial-gradient(circle,rgba(58,166,236,.30),transparent 70%); animation:float2 22s ease-in-out infinite}
.orb-3{width:420px;height:420px; bottom:-160px; right:10%;
  background:radial-gradient(circle,rgba(62,207,142,.16),transparent 70%); animation:float1 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(40px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-50px)}}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; white-space:nowrap;
  padding:12px 20px; border-radius:11px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s; font-size:15px}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:8px 14px; font-size:14px}
.btn-primary{background:var(--brand); color:#06101f;
  box-shadow:0 10px 26px rgba(24,144,216,.35)}
.btn-primary:hover{background:var(--brand-light); box-shadow:0 14px 34px rgba(24,144,216,.5)}
.btn-ghost{border-color:var(--line); color:var(--cream); background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--brand); color:#fff; background:rgba(24,144,216,.08)}

/* ---- header ---- */
/* Page header only (scoped by id, so it never hits the <header> section titles).
   Static: scrolls away naturally with the page (no sticky artifacts). */
#top{position:relative; z-index:2; background:rgba(10,15,26,.55); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px}      /* horizontal padding from .container */
.brand{display:flex; align-items:center; gap:11px; font-family:"Sora"; font-weight:700; font-size:18px}
.brand img{border-radius:8px}
/* bigger header brand + logo */
.nav .brand{font-size:23px}
.nav .brand img{width:42px; height:42px; border-radius:10px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--muted); font-weight:500; transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-links .btn{color:var(--cream)}

/* ---- hero ---- */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:54px; align-items:center;
  padding-top:84px; padding-bottom:70px}
.hero > *{min-width:0}   /* let grid tracks shrink below content -> no horizontal overflow */
.eyebrow{display:inline-block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-light); background:rgba(24,144,216,.10); border:1px solid rgba(24,144,216,.30);
  padding:6px 12px; border-radius:999px; font-weight:600}
.hero h1{font-size:clamp(38px,5.4vw,62px); font-weight:800; margin:18px 0 16px; letter-spacing:-.02em}
.lead{font-size:18px; color:#c4ccde; max-width:560px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.trust{list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:26px 0 0; color:var(--muted); font-size:14px}
.trust li{white-space:nowrap}

/* ---- command box ---- */
.cmd{display:flex; align-items:center; gap:12px; flex-wrap:wrap; max-width:100%;
  margin-top:26px; background:#0c1322; border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; font-family:"Consolas",ui-monospace,monospace; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.cmd code{flex:1 1 auto; min-width:0; color:#dbe7ff; font-size:14.5px;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere}
.cmd .muted{color:var(--brand-light); margin-right:6px}
.cmd.small{margin-top:14px}
.copy{flex:0 0 auto; margin-left:auto; background:rgba(24,144,216,.14); color:var(--brand-light);
  border:1px solid rgba(24,144,216,.34); border-radius:8px; padding:6px 12px;
  font-weight:600; cursor:pointer; font-size:13px; transition:.15s}
.copy:hover{background:var(--brand); color:#06101f}
.copy.done{background:var(--ok); color:#06101f; border-color:transparent}

/* ---- hero faux window ---- */
.hero-art{perspective:1400px}
.window{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.55);
  transform:rotateY(-9deg) rotateX(4deg); transition:transform .5s ease}
.hero-art:hover .window{transform:rotateY(-3deg) rotateX(1deg)}
.win-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:#0c1322; border-bottom:1px solid var(--line)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.win-bar{min-width:0}
.win-title{margin-left:10px; font-family:"Consolas",monospace; font-size:12px; color:var(--muted);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.win-body{padding:18px}
.win-head{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.win-head img{border-radius:7px}
.win-h1{font-family:"Sora"; font-weight:700; font-size:16px}
.win-sub{font-size:12px; color:var(--muted)}
.rule-pill{font-size:12.5px; background:rgba(24,144,216,.10); border:1px solid rgba(24,144,216,.28);
  color:#cfe4f7; padding:8px 11px; border-radius:9px; margin-bottom:14px}
.rule-pill b{color:var(--brand-light)}
.folder{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:8px; font-size:13.5px; background:#0e1626}
.folder .count{margin-left:auto; color:var(--muted); font-family:"Consolas",monospace; font-size:12px}
.chk{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line);flex:none}
.chk.on{background:var(--brand); border-color:var(--brand); position:relative}
.chk.on::after{content:"";position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #06101f; border-width:0 2px 2px 0; transform:rotate(45deg)}
.win-actions{display:flex; gap:10px; margin:14px 0 12px}
.mini-btn{font-size:13px; font-weight:600; padding:8px 14px; border-radius:9px;
  border:1px solid var(--line); color:var(--muted)}
.mini-btn.primary{background:var(--brand); color:#06101f; border-color:transparent}
.win-log{font-family:"Consolas",monospace; font-size:12px; color:#bcd0ea;
  background:#0c1322; border:1px solid var(--line); border-radius:8px; padding:9px 11px}
.win-log .ok{color:var(--ok)}

/* ---- sections ---- */
.section{padding-top:88px; padding-bottom:88px; scroll-margin-top:28px}
.section-head{text-align:center; max-width:680px; margin:0 auto 46px}
.section-head h2{font-size:clamp(28px,3.6vw,40px); font-weight:700; letter-spacing:-.01em}
.section-head p{color:var(--muted); margin-top:12px; font-size:17px}

/* ---- features grid ---- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:linear-gradient(180deg,var(--panel),#0e1525); border:1px solid var(--line);
  border-radius:var(--r); padding:22px; transition:transform .2s ease, border-color .2s, box-shadow .25s; position:relative}
.card:hover{transform:translateY(-5px); border-color:rgba(24,144,216,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card .ic{width:44px;height:44px;border-radius:11px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(24,144,216,.12); border:1px solid rgba(24,144,216,.28)}
.card .ic svg{width:22px;height:22px; fill:none; stroke:var(--brand-light); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.card h3{font-size:17px; font-weight:600; margin-bottom:7px}
.card p{font-size:14.5px; color:#aeb8cf; margin:0}
.card code{background:var(--panel2); padding:1px 5px; border-radius:5px; font-size:12.5px; color:#cfe4f7}

/* ---- steps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px; position:relative}
.step .num{display:grid; place-items:center; width:38px;height:38px; border-radius:10px;
  font-family:"Sora"; font-weight:700; background:var(--brand); color:#06101f; margin-bottom:14px}
.step h3{font-size:18px; margin-bottom:6px}
.step p{color:var(--muted); font-size:14.5px; margin:0 0 14px}

/* ---- open source band ---- */
.band{text-align:center; background:
    radial-gradient(700px 240px at 50% -40%,rgba(24,144,216,.22),transparent),
    linear-gradient(180deg,var(--panel),#0d1422);
  border:1px solid var(--line); border-radius:22px; padding:54px 28px}
.band h2{font-size:clamp(26px,3.4vw,38px); font-weight:700}
.band p{color:#bcc6db; max-width:560px; margin:14px auto 26px; font-size:17px}
.band .cta{justify-content:center}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); margin-top:40px; padding:30px 0; background:rgba(10,15,26,.6)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.foot-links{display:flex; gap:22px}
.foot-links a{color:var(--muted); font-weight:500; transition:color .2s}
.foot-links a:hover{color:var(--cream)}
.made{color:var(--muted); font-size:14.5px; margin:0}
.heart{display:inline-block; animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}}

/* ---- scroll reveal ---- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ---- responsive ---- */
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr); gap:36px; padding-top:48px; padding-bottom:44px}
  .hero-art{order:-1; max-width:380px; width:100%; margin:0 auto}
  .window{transform:none}
  .hero-art:hover .window{transform:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
  .section{padding-top:54px; padding-bottom:54px; scroll-margin-top:20px}
  .section-head{margin-bottom:32px}
}
@media (max-width:560px){
  .container{padding-left:16px; padding-right:16px}
  .nav{gap:10px}
  .nav .brand{font-size:18px; gap:9px}
  .nav .brand img{width:34px; height:34px}
  .nav-links .btn{padding:7px 11px; font-size:12.5px}   /* keep GitHub button compact */
  .grid{grid-template-columns:1fr}
  .hero-art{max-width:340px}
  .hero h1{font-size:33px}
  .lead{font-size:16.5px}
  .cmd code{font-size:13.5px}
  .cta{gap:10px}
  .btn{padding:11px 16px; font-size:14.5px}
  .band{padding:40px 20px}
  .foot{flex-direction:column; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
}