/* ==========================================================================
   MizUp — Brand Miz Design System Implementation
   Fonts: Georgia/Cambria (headings) · Arial (body)
   Palette: Ink #17171A · Miz Red #E63D2E · Deep Red #C0392B · Paper #F6F6F4
   ========================================================================== */

:root{
  /* Brand Miz palette */
  --ink:        #17171A;
  --ink-soft:   #232327;
  --red:        #E63D2E;
  --red-deep:   #C0392B;
  --paper:      #F6F6F4;
  --white:      #FFFFFF;
  --grey-mid:   #8A8B90;
  --grey-line:  #E4E3E0;
  --success:    #00A651;
  --error:      #E63D2E;

  /* sphere accents — used at ~3%, decorative only */
  --sphere-green: #00BD3E;
  --sphere-blue:  #00A4FA;
  --sphere-gold:  #FDBE00;

  /* type */
  --font-display: Georgia, Cambria, "Times New Roman", serif;
  --font-body: Arial, Helvetica, sans-serif;

  /* spacing scale (4px base) */
  --sp-xs: 4px;
  --sp-s: 8px;
  --sp-m: 16px;
  --sp-l: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;

  --radius: 8px;
  --container-max: 1200px;
  --transition: 220ms ease;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--sp-m);
  color: var(--ink);
}
h1{ font-size: clamp(32px, 4.5vw, 58px); }
h2{ font-size: clamp(24px, 3vw, 38px); }
h3{ font-size: clamp(18px, 2vw, 21px); }
h4{ font-size: 15px; }

p{ margin: 0 0 var(--sp-m); color: var(--ink-soft); }
.text-large{ font-size: 17px; }
.text-small, .caption{ font-size: 12px; color: var(--grey-mid); }
a{ color: var(--red); text-decoration: none; }
a:hover{ color: var(--red-deep); }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-m);
}
@media (min-width: 1024px){
  .container{ padding: 0 64px; }
}

section{ padding: var(--sp-3xl) 0; }
.bg-paper{ background: var(--paper); }
.bg-white{ background: var(--white); }
.bg-ink{ background: var(--ink); color: var(--white); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink p{ color: var(--white); }
.bg-ink .caption{ color: #B9B9BE; }

/* ---------------------------------------------------------------
   Dark-section text safety net.
   The global `p{ color: var(--ink-soft) }` and `h1..h4{ color: var(--ink) }`
   rules above are element selectors, which win over an ancestor's
   *inherited* color no matter how dark that ancestor's own background is.
   Any section with a dark background (.bg-ink, .join-section, .auth-visual,
   .site-footer, .app-sidebar) needs its headings/paragraphs re-asserted
   to a light color here, or they render dark-on-dark / invisible.
   ------------------------------------------------------------- */
.join-section h1, .join-section h2, .join-section h3, .join-section h4,
.join-section p,
.auth-visual h1, .auth-visual h2, .auth-visual h3, .auth-visual h4, .auth-visual p,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.app-sidebar h1, .app-sidebar h2, .app-sidebar h3, .app-sidebar h4{
  color: var(--white);
}
.join-section .caption, .auth-visual .caption,
.site-footer .caption, .app-sidebar .caption{
  color: #B9B9BE;
}
/* the Join section's right-hand form card has its own white background —
   labels there must stay dark, not inherit the light-on-dark rule above */
.join-section .form-card label{ color: var(--ink); }

/* eyebrow label */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-s);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-m);
}
.eyebrow::before{
  content:"";
  width: 20px; height: 2px;
  background: var(--red);
  display:inline-block;
}

/* ---------------- Header ---------------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brand{
  display:flex; align-items:center; gap: var(--sp-s);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink);
}
.brand img{ height: 34px; width:auto; display:block; }
.brand .mark-fallback{
  width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(var(--sphere-blue), var(--sphere-green), var(--sphere-gold), var(--red));
  display:inline-block;
}
.brand-name-mizup{ color: var(--ink); }
.brand-name-mizup .accent{ color: var(--red); }

nav.main-nav{ display:flex; gap: var(--sp-l); }
nav.main-nav a{
  color: var(--ink); font-weight: 700; font-size: 14px;
  padding: var(--sp-s) 0; position: relative;
}
nav.main-nav a:hover{ color: var(--red); }

.header-actions{ display:flex; align-items:center; gap: var(--sp-m); }

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex; align-items: center; justify-content:center; gap: var(--sp-s);
  font-family: var(--font-body);
  font-weight: 700; font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}
.btn:active{ transform: scale(.98); }
.btn-primary{
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  color: var(--white);
}
.btn-primary:hover{
  color: var(--white);
  box-shadow: 0 8px 20px rgba(230,61,46,.35);
  transform: translateY(-2px);
}
.btn-secondary{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-secondary:hover{
  background: var(--ink); color: var(--white);
  transform: translateY(-2px);
}
.bg-ink .btn-secondary{ border-color: var(--white); color: var(--white); }
.bg-ink .btn-secondary:hover{ background: var(--white); color: var(--ink); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

.text-link{
  color: var(--red); font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:6px;
}
.text-link::after{ content:"→"; transition: transform var(--transition); }
.text-link:hover::after{ transform: translateX(4px); }

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  background: var(--paper);
  overflow: hidden;
  padding: var(--sp-3xl) 0;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .05;
  pointer-events:none;
}
.hero .container{ position:relative; }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-2xl);
  align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero-copy p.text-large{ max-width: 46ch; }
.hero-actions{ display:flex; gap: var(--sp-m); margin-top: var(--sp-l); flex-wrap:wrap; }

.hero-stats{ display:flex; gap: var(--sp-2xl); margin-top: var(--sp-2xl); flex-wrap: wrap; }
.hero-stats .stat-num{ font-family: var(--font-display); font-size: 34px; font-weight:700; color: var(--ink); }
.hero-stats .stat-label{ font-size: 12px; color: var(--grey-mid); text-transform: uppercase; letter-spacing:.08em; }

.hero-panel{
  background: var(--ink);
  border-radius: 12px;
  padding: var(--sp-l);
  box-shadow: 0 24px 60px rgba(23,23,26,.25);
}
.hero-panel .panel-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-panel .panel-row:last-child{ border-bottom:none; }
.hero-panel .pill{
  font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding: 4px 10px; border-radius: 999px;
}
.pill-todo{ background:#2A2A2E; color:#C9C9CE; }
.pill-progress{ background: rgba(0,164,250,.16); color:#5BC4FF; }
.pill-done{ background: rgba(0,166,81,.16); color:#3FD98A; }
.pill-review{ background: rgba(253,190,0,.18); color:#FDBE00; }

/* ---------------- Feature / module cards ---------------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-l); }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-l); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: var(--sp-l);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover{ box-shadow: 0 12px 30px rgba(23,23,26,.08); transform: translateY(-3px); }
.card .icon-badge{
  width: 44px; height:44px; border-radius: 10px;
  background: rgba(230,61,46,.08);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp-m);
  color: var(--red);
}
.card .icon-badge svg{ width:22px; height:22px; }
.card h4{ margin-bottom: 6px; }
.card p{ font-size: 14px; margin-bottom:0; }

/* ---------------- Section divider rule ---------------- */
.rule{ height: 3px; width: 56px; background: var(--red); border:none; margin: 0 0 var(--sp-l); }

/* ---------------- Join / CTA form ---------------- */
.join-section{ background: var(--ink); }
.join-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl);
  align-items: start;
}
@media (max-width: 900px){ .join-grid{ grid-template-columns: 1fr; } }

.join-points{ list-style:none; margin: var(--sp-l) 0 0; padding:0; display:flex; flex-direction:column; gap: var(--sp-m); }
.join-points li{ display:flex; gap: var(--sp-s); align-items:flex-start; color:#D7D7DB; font-size:14px; }
.join-points li::before{ content:"–"; color: var(--red); font-weight:700; }
.join-section .text-large{ color: #D7D7DB; }

.form-card{
  background: var(--white);
  border-radius: 12px;
  padding: var(--sp-l);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.form-row{ margin-bottom: var(--sp-m); }
label{ display:block; font-size: 12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--ink); margin-bottom: 6px; }
input, select, textarea{
  width:100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border: 1px solid #D6D6D3;
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,61,46,.12);
}
textarea{ resize: vertical; min-height: 90px; }

.form-msg{
  display:none;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: var(--sp-m);
  border-left: 3px solid transparent;
}
.form-msg.show{ display:block; }
.form-msg.success{ background:#EAF7EF; border-color: var(--success); color:#0A6631; }
.form-msg.error{ background:#FBE9E7; border-color: var(--error); color:#8A2A20; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--ink); color:#D7D7DB; padding: var(--sp-2xl) 0 var(--sp-l); }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-l);
  padding-bottom: var(--sp-l);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ color:#fff; margin-bottom: var(--sp-m); }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 10px; }
.footer-grid a{ color:#B9B9BE; font-size: 14px; }
.footer-grid a:hover{ color: var(--red); }
.footer-bottom{
  padding-top: var(--sp-l);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-m);
  font-size: 12px; color: var(--grey-mid);
}

/* ---------------- WhatsApp click-to-chat ---------------- */
.whatsapp-fab{
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  width: 56px; height:56px; border-radius: 50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform var(--transition);
}
.whatsapp-fab:hover{ transform: scale(1.06); color:#fff; }

/* ---------------- Login page ---------------- */
.auth-shell{
  min-height: 100vh;
  display:grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){ .auth-shell{ grid-template-columns: 1fr; } }
.auth-visual{
  background: var(--ink);
  color:#fff;
  padding: var(--sp-3xl) var(--sp-2xl);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-visual::before{
  content:"";
  position:absolute; right:-120px; top:-120px;
  width:360px; height:360px; border-radius:50%;
  background: conic-gradient(var(--sphere-blue), var(--sphere-green), var(--sphere-gold), var(--red));
  opacity:.14; filter: blur(2px);
}
.auth-visual .quote{ font-family: var(--font-display); font-size: 26px; line-height:1.35; max-width: 30ch; }
.auth-visual .quote-attr{ color:#B9B9BE; margin-top: var(--sp-m); font-size:14px; }

.auth-form-wrap{
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-2xl) var(--sp-m);
  background: var(--paper);
}
.auth-card{ width:100%; max-width: 400px; }
.auth-card .brand{ margin-bottom: var(--sp-2xl); }
.auth-card h1{ font-size: 28px; margin-bottom: 6px; }
.auth-card .sub{ color: var(--grey-mid); font-size:14px; margin-bottom: var(--sp-l); }
.auth-options{ display:flex; justify-content:space-between; align-items:center; margin: var(--sp-s) 0 var(--sp-l); font-size:13px; }
.auth-options label{ display:flex; align-items:center; gap:6px; text-transform:none; font-weight:400; font-size:13px; margin:0; }
.auth-options input[type=checkbox]{ width:auto; }
.auth-divider{ display:flex; align-items:center; gap: var(--sp-m); margin: var(--sp-l) 0; color: var(--grey-mid); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--grey-line); }
.auth-footer-note{ text-align:center; margin-top: var(--sp-l); font-size:13px; color: var(--grey-mid); }

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

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}