/* ═══════════════════════════════════════════════════════════
   PropClean — Shared Landing-Page Styles
   Single source of truth for all public pages.
   (index, pricing, product, demo, register, login, reset-password)
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Base tokens ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --g:    #1d6fa4;
  --g2:   #0d1b2a;
  --g3:   #155e8a;
  --gl:   #dbeeff;
  --gxl:  #f0f8ff;
  --gold: #e8b84b;
  --gol:  #fdf8ec;
  /* Neutrals */
  --tx:   #111827;
  --tx2:  #374151;
  --mu:   #6b7280;
  --mu2:  #9ca3af;
  --bg:   #f9fafb;
  --wh:   #ffffff;
  --bd:   #e5e7eb;
  /* Effects */
  --sh:   0 4px 24px rgba(0,0,0,.07);
  --shl:  0 20px 60px rgba(0,0,0,.12);
  --r:    14px;
}

html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: 'DM Sans', sans-serif; background: var(--wh); color: var(--tx); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a     { text-decoration: none; color: inherit; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.section    { padding: 96px 0; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn         { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 10px; font-size: .93rem; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all .2s; white-space: nowrap; }
.btn-green   { background: var(--g); color: #fff; box-shadow: 0 4px 14px rgba(29,111,164,.28); }
.btn-green:hover { background: var(--g3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29,111,164,.33); }
.btn-outline { background: transparent; color: var(--g); border: 2px solid var(--g); }
.btn-outline:hover { background: var(--gl); }
.btn-ghost   { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-white   { background: #fff; color: var(--g); box-shadow: var(--sh); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shl); }
.btn-lg      { padding: 15px 32px; font-size: 1rem; border-radius: 12px; }
.btn-sm      { padding: 8px 16px; font-size: .82rem; }

/* ── Navigation ──────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 68px; display: flex; align-items: center; transition: all .3s; }
.nav.solid { background: rgba(255,255,255,.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--bd); box-shadow: 0 1px 12px rgba(0,0,0,.06); }
.nav-inner  { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-logo   { display: flex; align-items: center; gap: 10px; }
.nav-icon   { width: 40px; height: 40px; background: var(--g); border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 28px; height: 28px; }
.nav-name   { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--g); }
.nav-links  { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 7px 14px; border-radius: 8px; font-size: .9rem; font-weight: 500; color: var(--tx2); transition: all .15s; }
.nav-links a:hover { background: var(--gxl); color: var(--g); }
.nav-links a.active { color: var(--g); font-weight: 600; }
.nav-right  { display: flex; align-items: center; gap: 10px; }
.nav-login  { font-size: .9rem; font-weight: 600; color: var(--g); padding: 8px 16px; border-radius: 8px; transition: background .15s; cursor: pointer; }
.nav-login:hover { background: var(--gl); }
.hamburger  { display: none; background: none; border: none; cursor: pointer; padding: 4px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer      { background: #060e18; color: rgba(255,255,255,.45); padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .fb-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand .fb-logo span { font-family: 'Playfair Display',serif; font-size: 1.15rem; color: rgba(255,255,255,.8); font-weight: 700; }
.footer-brand p { font-size: .87rem; color: rgba(255,255,255,.4); line-height: 1.7; max-width: 280px; }
.footer-col h4 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.footer-col a  { display: block; font-size: .87rem; color: rgba(255,255,255,.38); margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: rgba(255,255,255,.75); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 24px; display: flex; justify-content: space-between; font-size: .82rem; }

/* ── Login Modal ─────────────────────────────────────────── */
.modal-ov  { display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.modal-ov.open { display:flex; }
.modal-box { background:#fff; border-radius:22px; width:100%; max-width:430px; margin:16px; box-shadow:0 32px 80px rgba(0,0,0,.22); overflow:hidden; animation:mup .28s cubic-bezier(.34,1.4,.64,1); }
@keyframes mup { from { transform:translateY(24px); opacity:0 } to { transform:translateY(0); opacity:1 } }
.modal-top   { background: var(--g); padding: 28px 32px 24px; position:relative; }
.modal-close { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.15); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; color:#fff; font-size:.9rem; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:rgba(255,255,255,.25); }
.m-logo      { font-family:'Playfair Display',serif; font-size:1.4rem; color:#fff; font-weight:700; }
.m-sub       { font-size:.82rem; color:rgba(255,255,255,.55); margin-top:4px; }
.modal-body  { padding:28px 32px 32px; }
.mf-group    { margin-bottom:16px; }
.mf-group label { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--tx); }
.mf-group input { width:100%; padding:11px 15px; border:1.5px solid var(--bd); border-radius:9px; font-size:.93rem; font-family:inherit; background:var(--bg); transition:all .2s; }
.mf-group input:focus { outline:none; border-color:var(--g); background:#fff; box-shadow:0 0 0 3px rgba(29,111,164,.07); }
.m-btn  { width:100%; padding:13px; background:var(--g); color:#fff; border:none; border-radius:9px; font-size:.97rem; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; }
.m-btn:hover { background:var(--g3); }
.m-err  { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; padding:10px 14px; border-radius:8px; font-size:.83rem; margin-top:12px; display:none; }
.m-foot { text-align:center; margin-top:16px; font-size:.82rem; color:var(--mu); }
.m-foot a { color:var(--g); font-weight:600; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; gap:32px } }
@media (max-width:600px) { .footer-grid { grid-template-columns:1fr } .footer-bottom { flex-direction:column; gap:10px; text-align:center } }

@media (max-width:860px) {
  .nav-links { display:none; }
  .hamburger { display:flex; flex-direction:column; gap:4px; }
  .hamburger span { width:22px; height:2px; background:var(--tx); border-radius:2px; transition:all .2s; }
  .nav-links.open { display:flex; flex-direction:column; position:fixed; top:68px; left:0; right:0; background:#fff; border-bottom:1px solid var(--bd); padding:12px 0; gap:0; box-shadow:var(--sh); }
  .nav-links.open a { padding:12px 28px; border-radius:0; }
}