/* ═══════════════════════════════════════════════════════
   Lint — lint.admeliorael.com
   Marketing landing page + nav auth dropdown + in-page app.
   Brand-matched to admeliorael.com. Responsive mobile → desktop.
   ═══════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap");

:root {
  --green-900:#1f2a1c; --green-850:#243024; --green-800:#2d3d2d;
  --green-700:#354535; --green-600:#3f513e;
  --border:#4a5d4a; --border-lt:#5a6e5a;
  --cream:#f5f3ec; --cream-card:#ffffff; --cream-bd:#e4e1d6;
  --text:#ffffff; --text-muted:#b4c2b2; --text-dim:#8a9c88;
  --ink:#2d3d2d; --ink-muted:#5d6b5b; --success:#5cb85c; --danger:#e07a5f;
  --radius:12px; --radius-sm:9px; --radius-pill:999px;
  --shadow:0 12px 30px rgba(0,0,0,.18); --shadow-sm:0 4px 14px rgba(0,0,0,.12);
  --maxw:1140px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--green-800); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand { font-family:"Poppins","Inter",sans-serif; line-height:1.2; }
a { color:inherit; text-decoration:none; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-pill); border:none;
  font-family:"Inter",sans-serif; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .15s, background .2s, opacity .2s;
}
.btn:hover:not(:disabled){ transform:translateY(-1px); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn-cta{ background:#fff; color:var(--ink); }
.btn-cta:hover:not(:disabled){ background:#ececec; }
.btn-ghost{ background:transparent; color:#fff; border:1px solid var(--border-lt); }
.btn-ghost:hover:not(:disabled){ background:rgba(255,255,255,.07); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 16px; font-size:13px; }
.mt{ margin-top:12px; }

/* ── Header / nav ── */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(31,42,28,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:14px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-size:22px; font-weight:800; letter-spacing:.3px; }
.brand.sm{ font-size:18px; }
.brand .logo-dot{ width:11px; height:11px; border-radius:50%; background:var(--success); }
.nav-mid{ display:flex; align-items:center; gap:26px; }
.nav-mid a{ font-size:14px; font-weight:500; color:var(--text-muted); transition:color .2s; }
.nav-mid a:hover{ color:#fff; }
.nav-right{ display:flex; align-items:center; gap:12px; position:relative; }
.user-chip{
  padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--green-700); border:1px solid var(--border);
  font-size:12.5px; color:var(--text-muted); max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Auth dropdown ── */
.auth-wrap{ position:relative; }
.caret{ font-size:10px; opacity:.8; }
.auth-dropdown{
  position:absolute; top:calc(100% + 12px); right:0; width:320px;
  background:var(--green-700); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.auth-dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); }
.auth-dropdown::before{
  content:""; position:absolute; top:-6px; right:24px; width:12px; height:12px;
  background:var(--green-700); border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform:rotate(45deg);
}
.tabs{ display:flex; gap:4px; padding:6px; background:var(--green-850); border-radius:var(--radius); margin-bottom:14px; }
.tab{ flex:1; padding:9px; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--text-dim); font-family:"Inter",sans-serif; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .2s; }
.tab.is-active{ background:#fff; color:var(--ink); }
.auth-panel{ display:none; padding:0 10px 6px; }
.auth-panel.is-active{ display:block; animation:fadeIn .22s ease; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:translateY(0);} }
.auth-status{ min-height:16px; padding:6px 12px 4px; font-size:12.5px; color:var(--text-muted); }
.auth-status.ok{ color:var(--success); }
.auth-status.err{ color:var(--danger); }

/* ── Form fields ── */
label{ display:block; font-size:12px; font-weight:500; color:var(--text-muted); margin:11px 0 5px; }
.auth-panel label:first-child{ margin-top:0; }
input, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--green-850); color:var(--text); font-size:14px; font-family:inherit;
  transition:border-color .2s, box-shadow .2s; resize:vertical;
}
input:focus, textarea:focus{ outline:none; border-color:var(--success); box-shadow:0 0 0 3px rgba(92,184,92,.14); }
textarea{ min-height:120px; }
input[type="file"]{ padding:9px; color:var(--text-muted); font-size:13px; }
input[type="file"]::file-selector-button{ padding:7px 13px; margin-right:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--green-600); color:#fff; font-weight:600; cursor:pointer; }
.auth-panel .btn-block{ margin-top:16px; }

/* ── Hero ── */
.hero{ padding:72px 0 64px; background:radial-gradient(1200px 500px at 80% -10%, rgba(92,184,92,.10), transparent 60%), var(--green-800); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
.eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--success); margin-bottom:18px; }
.hero h1{ font-size:clamp(32px,5vw,52px); font-weight:800; margin-bottom:18px; }
.hero h1 .accent{ color:var(--text-dim); }
.hero p.lead{ font-size:clamp(15px,2vw,18px); color:var(--text-muted); max-width:540px; margin-bottom:28px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-visual{ display:flex; justify-content:center; }
.mock{ width:100%; max-width:360px; background:var(--green-700); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.mock-bar{ display:flex; gap:6px; padding:12px 14px; background:var(--green-850); border-bottom:1px solid var(--border); }
.mock-bar span{ width:10px; height:10px; border-radius:50%; background:var(--border-lt); }
.mock-body{ padding:18px; }
.mock-line{ height:10px; border-radius:6px; background:var(--green-600); margin-bottom:10px; }
.mock-line.w-90{ width:90%; } .mock-line.w-70{ width:70%; } .mock-line.w-50{ width:50%; }
.mock-chip{ display:inline-block; margin-top:8px; padding:6px 12px; border-radius:var(--radius-pill); background:#fff; color:var(--ink); font-size:12px; font-weight:600; }

/* ── Sections ── */
.section{ padding:72px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head .eyebrow{ margin-bottom:12px; }
.section-head h2{ font-size:clamp(26px,4vw,38px); font-weight:700; margin-bottom:12px; }
.section-head p{ color:var(--text-muted); font-size:16px; }
.section--light{ background:var(--cream); color:var(--ink); }
.section--light .section-head h2{ color:var(--ink); }
.section--light .section-head p{ color:var(--ink-muted); }

/* ── Gaps ── */
.gaps{ display:grid; grid-template-columns:1fr; gap:22px; }
.gap-card{ background:var(--green-700); border:1px solid var(--border); border-radius:var(--radius); padding:26px; }
.gap-card .num{ font-family:"Poppins",sans-serif; font-size:28px; font-weight:800; color:var(--success); margin-bottom:10px; }
.gap-card h3{ font-size:18px; margin-bottom:8px; }
.gap-card p{ color:var(--text-muted); font-size:14px; }

/* ── Features ── */
.features{ display:grid; grid-template-columns:1fr; gap:20px; }
.feature{ background:var(--cream-card); border:1px solid var(--cream-bd); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.feature .ficon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--green-800); color:#fff; font-size:20px; margin-bottom:14px; }
.feature h3{ font-size:17px; color:var(--ink); margin-bottom:6px; }
.feature p{ font-size:14px; color:var(--ink-muted); }

/* ── App section ── */
.app-section{ padding:72px 0; background:var(--green-850); }
.app-lockcta{ text-align:center; }
.app-lockcta .btn{ padding:14px 32px; font-size:15px; }
.app-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.card{ background:var(--green-700); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.card-title{ font-size:16px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.card-title .ico{ font-size:18px; }
.hint{ font-size:13px; color:var(--text-dim); margin-top:10px; }
.divider{ height:1px; background:var(--border); margin:18px 0; }
.app-status{ margin-top:22px; text-align:center; font-size:13px; color:var(--text-muted); min-height:18px; }

/* ── Footer ── */
.site-footer{ background:var(--green-900); border-top:1px solid rgba(255,255,255,.06); padding:48px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:28px; }
.footer-brand .brand{ margin-bottom:10px; }
.footer-brand p{ color:var(--text-muted); font-size:14px; max-width:280px; }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:14px; }
.footer-col a, .footer-col address{ display:block; font-style:normal; font-size:14px; color:var(--text-muted); margin-bottom:9px; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.06); padding-top:20px; text-align:center; font-size:13px; color:var(--text-dim); }

/* ── Responsive ── */
@media (max-width:719px){
  .nav-mid{ display:none; }
  .auth-dropdown{ position:fixed; top:70px; left:16px; right:16px; width:auto; }
  .auth-dropdown::before{ display:none; }
}
@media (min-width:720px){
  .gaps{ grid-template-columns:repeat(3,1fr); }
  .features{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:2fr 1fr 1fr; }
  .app-grid{ grid-template-columns:1fr 1fr; }
  .letter-card{ grid-column:1 / -1; }
}
@media (min-width:980px){
  .hero{ padding:96px 0 88px; }
  .hero-grid{ grid-template-columns:1.1fr .9fr; }
  .features{ grid-template-columns:repeat(3,1fr); }
}