:root { --bg:#0b0d12; --card:#101522; --muted:#93a4c7; --text:#eaf0ff; --line:#1e2a44; --accent:#6aa6ff; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:radial-gradient(1200px 700px at 20% 10%, #18203a 0%, var(--bg) 50%); color:var(--text); }
a{ color:var(--accent); text-decoration:none; }
.container{ max-width:980px; margin:0 auto; padding:28px 18px; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ font-weight:800; letter-spacing:.3px; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:16px; padding:18px; }
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; margin-top:18px; }
h1{ font-size:44px; line-height:1.05; margin:0 0 10px; }
p{ color:var(--muted); line-height:1.5; margin:0 0 10px; }
.btn{ display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:#0f1422; color:var(--text); }
.btn.primary{ background:#1b2a52; border-color:#2a3f78; }
.input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#0f1422; color:var(--text); }
.small{ font-size:13px; color:var(--muted); }
.err{ color:#ff8b8b; }
@media (max-width:860px){ .grid{ grid-template-columns:1fr; } h1{ font-size:36px; } }

/* =========================
   Home page (Icarys landing)
   Scoped under .home-page
   ========================= */
.home-page{
  --bg0:#ffffff;
  --bg1:#f6f7f9;
  --ink:#0b0f14;
  --muted:#4b5563;
  --line:rgba(15,23,42,.10);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow2: 0 18px 50px rgba(2,6,23,.12);
  --radius:18px;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(2,6,23,.06), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(2,6,23,.05), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  min-height:100vh;
}

.home-header{
  max-width:1100px;
  margin:0 auto;
  padding:22px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.brand-mark{
  width:34px;
  height:34px;
  object-fit:contain;
  filter: grayscale(100%);
}
.brand-name{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
}

.home-nav{display:flex; gap:10px; align-items:center;}

.home-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.16);
  background:rgba(255,255,255,.75);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  backdrop-filter: blur(10px);
}
.home-page .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  background:#fff;
}
.home-page .btn.ghost{background:transparent;}

.home-main{max-width:1100px; margin:0 auto; padding:18px 18px 38px;}

.hero{text-align:center; padding:36px 10px 10px;}
.hero h1{margin:0; font-size:44px; line-height:1.08; letter-spacing:-0.03em;}
.hero-sub{margin:16px auto 0; max-width:780px; color:var(--muted); font-size:16px; line-height:1.7;}

.icon-row{
  margin:28px auto 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:rgba(2,6,23,.88);
}
.icon-step{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:110px;}
.icon{
  width:56px;height:56px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  display:flex; align-items:center; justify-content:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon svg{width:28px;height:28px; color:#0b0f14;}
.icon-step:hover .icon{transform: translateY(-1px); box-shadow: var(--shadow);}
.label{font-weight:800; font-size:14px; color:rgba(2,6,23,.78);}
.arrow{opacity:.35; font-size:18px; font-weight:900;}

.divider{height:1px; background:var(--line); margin:28px 0;}

.three-col{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;}
.col{
  padding:18px 18px 16px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  box-shadow: 0 10px 30px rgba(2,6,23,.05);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.col:hover{transform: translateY(-2px); box-shadow: var(--shadow2); background:rgba(255,255,255,.78);}
.col h3{margin:0 0 8px; font-size:18px; letter-spacing:-0.02em;}
.muted{color:var(--muted);}
.col ul{margin:12px 0 10px; padding-left:18px; color:rgba(2,6,23,.82); line-height:1.55; font-size:14px;}
.col li{margin:8px 0;}
.footnote{margin:10px 0 0; color:rgba(2,6,23,.55); font-size:12.5px; line-height:1.55;}

.closing{text-align:center; padding:10px 0 0;}
.closing h2{margin:0 0 10px; font-size:28px; letter-spacing:-0.02em;}
.cards{margin:22px auto 0; display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;}
.cards .card{
  text-align:left;
  padding:16px 16px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  box-shadow: 0 10px 30px rgba(2,6,23,.05);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cards .card:hover{transform: translateY(-2px); box-shadow: var(--shadow2); background:rgba(255,255,255,.80);}
.cards h4{margin:0 0 8px; font-size:15px; letter-spacing:-0.01em;}
.cards p{margin:0; color:rgba(2,6,23,.70); font-size:13.5px; line-height:1.55;}

.home-footer{
  max-width:1100px;
  margin:0 auto;
  padding:18px 18px 26px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  color:rgba(2,6,23,.60);
  font-size:12.5px;
}

@media (max-width: 980px){
  .three-col{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .hero h1{font-size:36px;}
  .arrow{display:none;}
}

/* =========================
   HOME HOTFIX (logo + icons + background)
   Append-only override so nothing breaks elsewhere
   ========================= */

/* Force true light background */
.home-page{
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%) !important;
  color:#0b0f14 !important;
}

/* If your global layout sets a dark body, make sure home covers it */
.home-page{ min-height:100vh; }

/* Fix "logo takes whole page" caused by global img rules */
.home-page .brand-mark{
  width:36px !important;
  height:36px !important;
  max-width:36px !important;
  max-height:36px !important;
  object-fit:contain !important;
  display:block !important;
}

/* Keep brand row tight */
.home-page .brand{ gap:10px; }
.home-page .brand-name{ font-size:22px; }

/* Shrink the workflow icons */
.home-page .icon{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
}
.home-page .icon svg{
  width:22px !important;
  height:22px !important;
}

/* Slightly tighter step blocks so they dont get huge */
/* =========================
   HOME HOTFIX (logo + icons + background)
   ========================= */

.home-page{
  background: #ffffff !important;
  color:#0b0f14 !important;
  min-height:100vh;
}

/* kill any global dark page bg bleeding through */
body:has(.home-page){
  background:#ffffff !important;
}

/* logo size override (beats global img{max-width:100%;height:auto} rules) */
.home-page .brand-mark{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  object-fit:contain !important;
  display:block !important;
}

/* if a global img rule exists, neutralize it only on home */
.home-page img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
}

/* shrink workflow icons */
.home-page .icon{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
}
.home-page .icon svg{
  width:22px !important;
  height:22px !important;
}

.home-page .arrow{ font-size:16px; opacity:.25; }

/* HOME: final sizing */
.home-page .brand-mark{ width:40px; height:40px; object-fit:contain; display:block; }
.home-page .icon{ width:44px; height:44px; border-radius:14px; }
.home-page .icon svg{ width:22px; height:22px; }

/* HOME: make it crisp + light, override global dark + global img sizing */
.is-home .wrap{ padding: 26px 18px 60px; }

.home-page{
  background:#ffffff;
  color:#0b0f14;
}

.home-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0 18px;
  border-bottom:1px solid rgba(15,23,42,.10);
}

.home-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  font-weight:800;
  letter-spacing:.2px;
}

.home-logo{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  object-fit:contain !important;
  display:block !important;
}

/* If you have global img{max-width:100%;height:auto} this stops it ONLY on home */
.home-page img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
}

.home-name{ font-size:20px; }
.home-nav{ display:flex; gap:10px; }

.hero{ padding:22px 0 14px; }
.hero h1{ margin:0 0 10px; font-size:44px; line-height:1.05; letter-spacing:-.02em; color:#0b0f14; }
.hero-sub{ margin:0 0 10px; color:rgba(2,6,23,.70); max-width:62ch; }
.hero-meta{ color:rgba(2,6,23,.55); font-size:13.5px; }

@media (max-width: 980px){
  .hero h1{ font-size:34px; }
}

/* HOME: prevent giant images (overrides any global img rules) */
.home-page .brand-mark{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  object-fit:contain !important;
  display:block !important;
}

/* Only on home, stop global img { width:100% } from nuking everything */
.home-page img{ width:auto !important; height:auto !important; max-width:100% !important; }


/* =========================
   HOME: HARD RESET (BLACK/WHITE ONLY)
   ========================= */

/* On home, nuke dark/gradient backgrounds from layout and old rules */
body.is-home, body.is-home *{
  text-shadow:none !important;
}

body.is-home{
  background:#ffffff !important;
  color:#000000 !important;
}

/* kill layout dark wrapper feel */
body.is-home .wrap{
  background:transparent !important;
  box-shadow:none !important;
}

/* hide global topbar ON HOME (prevents duplicate Login/Create links) */
body.is-home .topbar{ display:none !important; }

/* HOME container */
.home-page{
  background:#ffffff !important;
  color:#000000 !important;
}

/* STOP global img rules from exploding the logo */
.home-logo{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  object-fit:contain !important;
  display:block !important;
}

/* If some global rule is forcing ALL imgs huge, neutralize it on home */
body.is-home img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

/* Simple black/white layout */
.home-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid #e5e7eb;
}

.home-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#000000;
}

.home-name{
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:20px;
}

.home-nav{
  display:flex;
  gap:10px;
}

.home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border:1px solid #000000;
  border-radius:10px;
  text-decoration:none;
  color:#000000;
  background:#ffffff;
  font-weight:700;
}

.home-link:hover{
  background:#000000;
  color:#ffffff;
}

.home-link--primary{
  background:#000000;
  color:#ffffff;
}

.home-link--primary:hover{
  background:#111111;
  border-color:#111111;
}

.home-main{
  padding:26px 0 12px;
}

.home-h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.05;
  letter-spacing:-0.03em;
}

.home-sub{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#111111;
  max-width:72ch;
}

/* Make sure old “cards/icons/arrows” rules can’t show on home */
.home-page .cards,
.home-page .three-col,
.home-page .icon,
.home-page .arrow{
  display:none !important;
}


/* =========================
   HOME (B/W ONLY)
   ========================= */
.home-page{ background:#fff; color:#0b0f14; }
.home-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid rgba(15,23,42,.12);
}
.home-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#0b0f14; }
.home-logo{
  width:100px !important; height:100px !important;
  max-width:100px !important; max-height:100px !important;
  object-fit:contain !important; display:block !important;
  flex:0 0 auto !important;
}
.home-name{ font-weight:900; font-size:22px; letter-spacing:-0.02em; }

.home-nav{ display:flex; gap:10px; }
.home-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(15,23,42,.20);
  background:#fff; color:#0b0f14;
  text-decoration:none; font-weight:800;
}
.home-btn--primary{ background:#0b0f14; color:#fff; border-color:#0b0f14; }

.home-main{ padding:26px 0 54px; }
.home-h1{ margin:0 0 10px; font-size:44px; line-height:1.05; letter-spacing:-0.03em; }
.home-sub{ margin:0 0 12px; max-width:74ch; color:rgba(2,6,23,.72); font-size:16px; line-height:1.6; }
.home-tags{ font-size:13px; color:rgba(2,6,23,.55); }

.home-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.home-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  text-decoration:none; color:#0b0f14;
}
.home-arrow{ opacity:.35; font-size:18px; }

.home-footer{ border-top:1px solid rgba(15,23,42,.10); padding:14px 0 0; color:rgba(2,6,23,.60); font-size:12.5px; }

@media (max-width:980px){
  .home-cards{ grid-template-columns:1fr; }
  .home-h1{ font-size:36px; }
}


/* =========================
   HOME (B/W ONLY)
   ========================= */
.home-page{ background:#fff; color:#0b0f14; }
.home-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid rgba(15,23,42,.12);
}
.home-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#0b0f14; }
.home-logo{
  width:100px !important; height:100px !important;
  max-width:100px !important; max-height:100px !important;
  object-fit:contain !important; display:block !important;
  flex:0 0 auto !important;
}
.home-name{ font-weight:900; font-size:22px; letter-spacing:-0.02em; }

.home-nav{ display:flex; gap:10px; }
.home-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(15,23,42,.20);
  background:#fff; color:#0b0f14;
  text-decoration:none; font-weight:800;
}
.home-btn--primary{ background:#0b0f14; color:#fff; border-color:#0b0f14; }

.home-main{ padding:26px 0 54px; }
.home-h1{ margin:0 0 10px; font-size:44px; line-height:1.05; letter-spacing:-0.03em; }
.home-sub{ margin:0 0 12px; max-width:74ch; color:rgba(2,6,23,.72); font-size:16px; line-height:1.6; }
.home-tags{ font-size:13px; color:rgba(2,6,23,.55); }

.home-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.home-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  text-decoration:none; color:#0b0f14;
}
.home-arrow{ opacity:.35; font-size:18px; }

.home-footer{ border-top:1px solid rgba(15,23,42,.10); padding:14px 0 0; color:rgba(2,6,23,.60); font-size:12.5px; }

@media (max-width:980px){
  .home-cards{ grid-template-columns:1fr; }
  .home-h1{ font-size:36px; }
}


/* === HOME LANDING START === */
/* Home is clean B/W only. Scoped. */
.is-home { background:#ffffff !important; color:#0b0f14 !important; }
.is-home .wrap{ max-width:1100px; margin:0 auto; padding:28px 22px 60px; }

/* prevent global styles from turning links purple/blue on home */
.is-home a{ color:inherit; }

.home-page{ background:#fff; color:#0b0f14; }
.home-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0 22px;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.home-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.home-logo{
  width:52px !important; height:52px !important;
  max-width:52px !important; max-height:52px !important;
  object-fit:contain !important; display:block !important;
}
.home-name{ font-weight:900; font-size:22px; letter-spacing:-0.02em; }

.home-nav{ display:flex; align-items:center; gap:14px; }
.home-link{ text-decoration:none; font-weight:700; opacity:.75; }
.home-link:hover{ opacity:1; text-decoration:underline; }

.home-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  text-decoration:none;
  background:#0b0f14;
  color:#fff;
  font-weight:800;
}
.home-btn:hover{ transform:translateY(-1px); }

.home-main{ padding:34px 0 0; }
.home-hero{ text-align:center; padding:34px 0 18px; }
.home-h1{
  margin:0 auto 12px;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-0.04em;
  max-width:18ch;
}
.home-sub{
  margin:0 auto 14px;
  max-width:78ch;
  font-size:16px;
  line-height:1.7;
  color:rgba(2,6,23,.70);
}
.home-tags{ font-size:13px; color:rgba(2,6,23,.55); }

.home-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:28px 0 6px;
}
.home-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:16px 16px 14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.home-card h3{ margin:0 0 6px; font-size:15px; letter-spacing:-0.01em; }
.home-card p{ margin:0; font-size:13.5px; color:rgba(2,6,23,.68); line-height:1.55; }

.home-cta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:18px 0 0;
  padding-bottom:26px;
}
.home-cta-card{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:16px 16px;
  text-decoration:none;
  background:#fff;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}
.home-cta-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(2,6,23,.10); }
.home-cta-title{ font-weight:900; }
.home-cta-sub{ font-size:13px; color:rgba(2,6,23,.62); margin-top:4px; }
.home-arrow{ opacity:.35; font-size:20px; }

.home-footer{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(15,23,42,.10);
  padding:14px 0 0;
  margin-top:10px;
  font-size:12.5px;
  color:rgba(2,6,23,.55);
}

@media (max-width:980px){
  .home-h1{ font-size:40px; max-width:22ch; }
  .home-grid{ grid-template-columns:1fr; }
  .home-cta{ grid-template-columns:1fr; }
  .home-hero{ text-align:left; }
}
/* === HOME LANDING END === */


/* =========================
   HOME — CLEAN BLACK/WHITE
   (scoped, won't touch login/register)
   ========================= */

.home-page{
  background:#fff;
  color:#0b0f14;
}

/* If global CSS makes images full-width, kill it on home */
.home-page img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

.home-page .home-header{
  max-width:1100px;
  margin:0 auto;
  padding:26px 22px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(15,23,42,.10);
}

.home-page .home-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

.home-page .home-logo{
  width:56px !important;
  height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  object-fit:contain !important;
  display:block !important;
  flex:0 0 auto !important;
}

.home-page .home-name{
  font-weight:900;
  font-size:22px;
  letter-spacing:-0.02em;
}

.home-page .home-nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.home-page .home-nav-link{
  text-decoration:none;
  font-weight:700;
  color:rgba(2,6,23,.70);
}

.home-page .home-nav-link:hover{
  color:#0b0f14;
  text-decoration:underline;
}

.home-page .home-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.16);
  background:#0b0f14;
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

.home-page .home-nav-btn:hover{
  transform:translateY(-1px);
}

.home-page .home-main{
  max-width:1100px;
  margin:0 auto;
  padding:30px 22px 18px;
}

.home-page .home-hero{
  text-align:center;
  padding:26px 0 18px;
}

.home-page .home-h1{
  margin:0 auto 12px;
  font-size:52px;
  line-height:1.05;
  letter-spacing:-0.04em;
  max-width:22ch;
}

.home-page .home-sub{
  margin:0 auto 12px;
  max-width:82ch;
  font-size:16px;
  line-height:1.7;
  color:rgba(2,6,23,.70);
}

.home-page .home-tags{
  font-size:13px;
  color:rgba(2,6,23,.55);
}

.home-page .home-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin:18px 0 6px;
}

.home-page .home-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}

.home-page .home-card-title{
  font-weight:900;
  margin-bottom:6px;
}

.home-page .home-card-text{
  font-size:13.5px;
  line-height:1.55;
  color:rgba(2,6,23,.68);
}

.home-page .home-cta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.home-page .home-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}

.home-page .home-cta-row:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
}

.home-page .home-cta-title{ font-weight:900; }
.home-page .home-cta-sub{
  margin-top:4px;
  font-size:13px;
  color:rgba(2,6,23,.62);
}

.home-page .home-arrow{
  font-size:20px;
  opacity:.35;
}

.home-page .home-footer{
  max-width:1100px;
  margin:18px auto 0;
  padding:14px 22px 40px;
  border-top:1px solid rgba(15,23,42,.10);
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  color:rgba(2,6,23,.55);
}

@media (max-width:980px){
  .home-page .home-hero{ text-align:left; }
  .home-page .home-h1{ font-size:38px; max-width:28ch; }
  .home-page .home-cards{ grid-template-columns:1fr; }
  .home-page .home-cta{ grid-template-columns:1fr; }
}

/* =========================
   HOME — CLEAN BLACK/WHITE
   scoped to .home-page only
   ========================= */

/* kill global "img width:100%" rules ONLY on home */
.home-page img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

.home-page{
  background:#ffffff;
  color:#0b0f14;
}

.home-header{
  max-width:1100px;
  margin:0 auto;
  padding:18px 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(15,23,42,.10);
}

.home-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#0b0f14;
}

.home-logo{
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
  display:block !important;
  flex:0 0 auto !important;
}

.home-name{
  font-weight:800;
  font-size:22px;
  letter-spacing:-0.02em;
}

.home-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.home-nav-link{
  text-decoration:none;
  color:#0b0f14;
  font-weight:600;
  padding:10px 12px;
  border-radius:10px;
}

.home-nav-link:hover{
  background: rgba(15,23,42,.04);
}

.home-nav-btn{
  text-decoration:none;
  color:#0b0f14;
  font-weight:700;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.16);
  background:#ffffff;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
}

.home-nav-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
}

.home-main{
  max-width:1100px;
  margin:0 auto;
  padding:44px 0 40px;
}

.home-hero{
  max-width:760px;
}

.home-h1{
  margin:0 0 14px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-0.03em;
}

.home-sub{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.65;
  color: rgba(2,6,23,.72);
}

.home-muted{
  color: rgba(2,6,23,.55);
  font-size:13.5px;
}

.home-footer{
  max-width:1100px;
  margin:0 auto;
  padding:18px 0 0;
  border-top:1px solid rgba(15,23,42,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12.5px;
  color: rgba(2,6,23,.55);
}

@media (max-width: 900px){
  .home-main{ padding:34px 0 34px; }
  .home-h1{ font-size:34px; }
  .home-header{ padding:14px 0; }
}

/* ===== HOME SECTIONS (B/W) ===== */

.home-page .home-section{
  max-width:1100px;
  margin:0 auto;
  padding:32px 22px;
  border-top:1px solid rgba(15,23,42,.10);
}

.home-page .home-grid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:26px;
}

.home-page .home-block h3{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-0.01em;
}

.home-page .home-block ul{
  margin:0;
  padding-left:18px;
  color: rgba(15,23,42,.72);
  line-height:1.7;
}

.home-page .home-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.home-page .home-step{
  display:flex;
  gap:12px;
  padding:18px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:#fff;
}

.home-page .home-step-num{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.18);
  font-weight:800;
}

.home-page .home-step h4{
  margin:0 0 6px;
  font-size:16px;
}

.home-page .home-step p{
  margin:0;
  color: rgba(15,23,42,.70);
  line-height:1.6;
  font-size:14px;
}

@media (max-width: 980px){
  .home-page .home-grid4{ grid-template-columns:1fr; }
  .home-page .home-steps{ grid-template-columns:1fr; }
}

/* === HOME CLEAN START === */
/* Clean black/white landing page (scoped to .home-page) */

.home-page {
  background:#fff;
  color:#0b0f14;
}

.home-page a { color:inherit; }

.home-page img {
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

.home-header {
  max-width:1100px;
  margin:0 auto;
  padding:26px 22px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(15,23,42,.10);
}

.home-brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.home-logo {
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
  display:block !important;
  flex:0 0 auto !important;
}

.home-name {
  font-weight:900;
  font-size:22px;
  letter-spacing:-0.02em;
}

.home-nav {
  display:flex;
  gap:12px;
  align-items:center;
}

.home-nav-link {
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  opacity:.75;
}

.home-nav-link:hover { opacity:1; }

.home-nav-btn {
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  padding:10px 14px;
  border:1px solid rgba(15,23,42,.20);
  border-radius:12px;
  background:#0b0f14;
  color:#fff;
}

.home-nav-btn:hover { filter:brightness(1.05); }

.home-main {
  max-width:1100px;
  margin:0 auto;
  padding:26px 22px 50px;
}

.home-hero {
  padding:36px 0 28px;
  text-align:center;
}

.home-h1 {
  margin:0 0 14px;
  font-size:52px;
  line-height:1.04;
  letter-spacing:-0.03em;
}

.home-sub {
  margin:0 auto;
  max-width:72ch;
  font-size:16px;
  line-height:1.6;
  opacity:.78;
}

.home-muted {
  margin-top:14px;
  font-size:13px;
  opacity:.55;
}

.home-hero-cta {
  margin-top:22px;
}

.home-cta-btn {
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.20);
  background:#fff;
}

.home-cta-btn:hover {
  background:rgba(11,15,20,.04);
}

.home-rule {
  border:0;
  border-top:1px solid rgba(15,23,42,.10);
  margin:26px 0;
}

.home-personas {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  align-items:start;
}

.home-persona h2 {
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:-0.01em;
}

.home-persona p {
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  opacity:.72;
}

.home-features {
  text-align:center;
  padding:18px 0 10px;
}

.home-feature h3 {
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-0.02em;
}

.home-feature p {
  margin:0 auto;
  max-width:80ch;
  font-size:14.5px;
  line-height:1.65;
  opacity:.72;
}

.home-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-top:22px;
  border-top:1px solid rgba(15,23,42,.10);
  margin-top:28px;
  font-size:12.5px;
  opacity:.65;
}

@media (max-width: 980px) {
  .home-h1 { font-size:40px; }
  .home-personas { grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px) {
  .home-header { padding:18px 16px 14px; }
  .home-main { padding:18px 16px 40px; }
  .home-h1 { font-size:34px; }
  .home-personas { grid-template-columns:1fr; }
}
/* === HOME CLEAN END === */


/* =========================
   HOME header hover/focus polish
   ========================= */
.home-page .home-nav-link,
.home-page .home-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#ffffff;
  color:#0b0f14;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* hover + keyboard focus */
.home-page .home-nav-link:hover,
.home-page .home-link:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.28);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  background:#ffffff;
}

.home-page .home-nav-link:focus-visible,
.home-page .home-link:focus-visible{
  outline: 3px solid rgba(2,6,23,.18);
  outline-offset: 2px;
}

/* If your create-account uses these classes, polish them too */
.home-page .home-nav-btn,
.home-page .home-btn,
.home-page .home-btn--primary{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.16);
  background:#0b0f14;
  color:#ffffff;
  font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.home-page .home-nav-btn:hover,
.home-page .home-btn:hover,
.home-page .home-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  background:#111827;
  border-color: rgba(15,23,42,.22);
}

.home-page .home-nav-btn:focus-visible,
.home-page .home-btn:focus-visible,
.home-page .home-btn--primary:focus-visible{
  outline: 3px solid rgba(2,6,23,.22);
  outline-offset: 2px;
}

/* HOME: ensure buttons always behave like buttons */
.home-page .home-nav-btn{ cursor:pointer; }

/* GLOBAL: make login/register buttons visibly hover (matches homepage feel) */
.btn{ cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; }
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  border-color: rgba(15,23,42,.28);
}

/* AUTH/UI: hover for clickable buttons on non-home pages (login/register/dashboard/etc) */
body:not(.is-home) .btn{
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

body:not(.is-home) .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  border-color: rgba(96,165,250,.35);
}

body:not(.is-home) .btn.primary:hover{
  filter: brightness(1.03);
}