:root{
 --brand: #1a1a1a;        /* deeper charcoal for buttons */
--brand-accent: #ff7b2e; /* orange that matches your logo/fav icon */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--charcoal);background:var(--peach)}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.nav{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);background:rgba(255,255,255,.55);z-index:10}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.logo-icon{width:36px;height:36px;border-radius:14px;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.logo-icon.small{width:32px;height:32px;border-radius:12px}
.brand-text{font-weight:600}
.accent{color:var(--orange);font-family:'Pacifico',cursive}
.italic{font-style:italic}
.nav-links{display:none;gap:1rem}
@media(min-width:768px){.nav-links{display:flex}}
.nav a{color:#333;text-decoration:none;opacity:.9}
.btn{display:inline-block;border:none;border-radius:14px;padding:.9rem 1.1rem;font-weight:600;text-decoration:none;cursor:pointer}
.btn--primary{background:var(--orange);color:#fff;box-shadow:0 10px 20px rgba(255,122,54,.25)}
.btn--sm{padding:.5rem .8rem;border-radius:10px}
.muted{color:#5a5a5a}
.tiny{font-size:.8rem}
.center{text-align:center}
.hero{padding:4rem 0}
.hero__grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1.1fr 1fr}}
.signup{display:flex;gap:.6rem;margin-top:1rem;max-width:520px}
.signup input{flex:1;border:1px solid rgba(0,0,0,.12);padding:.9rem 1rem;border-radius:12px;background:#fff;outline:none}
.card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:20px;padding:1rem;box-shadow:0 15px 30px rgba(0,0,0,.08)}
.preview-card{padding:1.2rem 1.2rem}
.preview-heading{display:flex;align-items:center;gap:.6rem}
.preview-title{font-weight:600}
.cv-grid{margin-top:1rem;display:grid;grid-template-columns:1fr 2fr;gap:1rem}
.left,.right{display:flex;flex-direction:column;gap:.5rem}
.bar{height:12px;border-radius:8px;background:rgba(0,0,0,.1)}
.bar--accent{background:rgba(255,122,54,.35)}
.w-60{width:60%}.w-50{width:50%}.w-70{width:70%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}
.box{border:1px solid rgba(0,0,0,.12);border-radius:14px;background:rgba(0,0,0,.03)}
.box.light{background:rgba(255,122,54,.06)}
.h-120{height:120px}.h-100{height:100px}.h-90{height:90px}
.preview-footer{margin-top:1rem;display:flex;align-items:center;justify-content:space-between}
.section{padding:3rem 0}
.cards3{display:grid;gap:1rem}
@media(min-width:900px){.cards3{grid-template-columns:repeat(3,1fr)}}
.alt{background:rgba(255,255,255,.6)}
.steps{display:grid;gap:1rem;margin-top:1.2rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.preview-2col{display:grid;gap:1.2rem;align-items:center}
@media(min-width:900px){.preview-2col{grid-template-columns:1fr 1fr}}
.cv-card{display:grid;grid-template-columns:96px 1fr;gap:1rem}
.avatar{width:96px;height:96px;border-radius:16px;background:rgba(255,122,54,.15)}
.cv-lines{display:flex;flex-direction:column;gap:.6rem}
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.list{padding-left:1rem}
footer.footer{padding:2rem 0}
.footer__grid{display:grid;gap:1rem;align-items:center;grid-template-columns:1fr auto}
/* ===== Auth Modal ===== */
.modal { position: fixed; inset: 0; display: none; z-index: 1000; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.modal__dialog {
  position: relative; z-index: 1; margin: 5vh auto; max-width: 520px; width: calc(100% - 32px);
  background: #fff; border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,.18); padding: 24px;
}
.modal__close { position: absolute; right: 12px; top: 12px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }

.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg,#FFF5D1); border-radius: 12px; padding: 6px; margin-bottom: 18px; }
.auth__tab { border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; color: #6b6b6b; }
.auth__tab.is-active { background: #fff; color: #222; box-shadow: inset 0 0 0 2px rgba(0,0,0,.04); }

.auth__panel { display: none; }
.auth__panel.is-active { display: block; }

.auth__title { font-size: 22px; line-height: 1.25; margin: 10px 0 16px; }
.auth__label { display: grid; gap: 6px; font-weight: 600; margin: 10px 0; }
.auth__input {
  height: 46px; border: 1px solid #eee; border-radius: 12px; padding: 0 14px; font-size: 15px;
  outline: none; transition: box-shadow .15s ease,border-color .15s ease;
}
.auth__input:focus { border-color: #ffd0a8; box-shadow: 0 0 0 4px rgba(255,127,80,.15); }

.auth__checkbox { display: flex; gap: 10px; align-items: center; margin: 8px 0 14px; font-size: 14px; }
.auth__row { display:flex; justify-content:flex-end; margin-top:-4px; }
.auth__link { color: #f95e28; text-decoration: none; font-weight: 600; }
.auth__link:hover { text-decoration: underline; }

.auth__submit { width: 100%; height: 48px; border-radius: 14px; margin-top: 8px; }
.auth__hint { text-align: center; margin: 12px 0 0; color:#6e6e6e; }

.auth__error { color:#b00020; margin-top:10px; background:#ffecec; border:1px solid #ffd3d3; padding:8px 10px; border-radius:8px; }
.btn--ghost { background: transparent; border: 1px solid rgba(0,0,0,.08); }
/* ===== GetHireMe UI polish ===== */
:root {
  --bg: #ffe5d1;
  --ink: #2e2e2e;
  --muted: #6b6b6b;
  --card: #fff;
  --border: #dedede;
  --brand: #222;
}

body { background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; }

.container { max-width: 920px; margin: 2rem auto; padding: 0 1rem; }

.ghm-header h1 { margin: 0 0 .25rem; font-size: 2.25rem; line-height: 1.2; }
.muted { color: var(--muted); margin: .25rem 0 1.25rem; }

.preset-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.pill { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: .4rem .75rem; cursor: pointer; }
.pill:hover { background: #fafafa; }

.ai-box { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }
#ai-input { width: 100%; resize: vertical; min-height: 140px; border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; font: inherit; }

.controls { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; }
.btns { display: flex; gap: .5rem; }
.btn { border: 1px solid var(--border); background: var(--card); padding: .6rem .9rem; border-radius: .5rem; cursor: pointer; }
.btn:hover { background: #fafafa; }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:disabled { opacity: .6; cursor: not-allowed; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; margin-top: 1rem; }
.card.hidden { display: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.card-actions { display: flex; gap: .5rem; }
.icon-btn { border: 1px solid var(--border); background: var(--card); border-radius: .5rem; padding: .45rem .75rem; cursor: pointer; }
.icon-btn:hover { background: #fafafa; }

.ai-output { padding: 1rem; white-space: pre-wrap; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ===== Brand polish ===== */
:root{
  --bg: #ffe6d3;           /* soft peach background */
  --bg-2: #ffeedd;         /* lighter bottom band */
  --ink: #222;             /* main text */
  --muted: #6c6c6c;        /* secondary text */
  --card: #ffffff;         /* panels/cards */
  --border: #e7e7e7;       /* borders */
  --brand: #202020;        /* primary button / brand */
  --brand-accent: #ff7f50; /* coral accent */
  --shadow: 0 8px 30px rgba(0,0,0,.06);
}

html, body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.container { max-width: 980px; margin: 36px auto; padding: 0 24px; }

/* Header with logo */
.ghm-header { margin-bottom: 16px; }
.brand { display:flex; align-items:center; gap: 14px; }
.logo { width: 40px; height: 40px; display:block; border-radius: 10px; }
.ghm-header h1 { margin:0; font-weight: 700; letter-spacing:.3px; }
.brand-accent { color: var(--brand-accent); }
.muted { color: var(--muted); margin: 6px 0 18px; }

/* Preset chips */
.preset-bar { gap: .6rem; margin-bottom: 14px; }
.pill {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: .5rem .9rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .06s ease, background .2s ease;
}
.pill:hover { background:#fafafa; transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

/* Input card */
.ai-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
}
#ai-input {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  background: #fff;
}
#ai-input:focus { outline: 2px solid rgba(255,127,80,.25); border-color: var(--brand-accent); }

/* Controls + buttons */
.controls { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.btns { display:flex; gap:.6rem; }

.btn {
  border: 1px solid var(--border);
  background: var(--card);
  padding: .7rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: background .2s ease, transform .06s ease;
}
.btn:hover { background:#fafafa; transform: translateY(-1px); }
.btn.primary { background: var(--brand); color:#fff; border-color: var(--brand); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.primary:disabled { opacity:.6; transform:none; cursor:not-allowed; }

/* Result card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.card.hidden { display:none; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.card-head h2 { margin:0; font-size: 1rem; }
.card-actions { display:flex; gap:.5rem; }
.icon-btn { border: 1px solid var(--border); background: var(--card); border-radius:10px; padding:.45rem .75rem; cursor:pointer; box-shadow: var(--shadow); }
.icon-btn:hover { background:#fafafa; }

.ai-output { padding: 16px; white-space: pre-wrap; line-height: 1.65; }

/* Small screens */
@media (max-width: 600px){
  .container { padding: 0 16px; }
  .preset-bar { gap:.5rem; }
  .btn { padding: .6rem .9rem; }
}
/* ===== Micro-animations & footer ===== */
@keyframes glowPulse {
  0%   { box-shadow: 0 8px 30px rgba(0,0,0,.06); }
  50%  { box-shadow: 0 12px 38px rgba(255,123,46,.35); }
  100% { box-shadow: 0 8px 30px rgba(0,0,0,.06); }
}

/* press feedback on buttons */
.btn:active { transform: translateY(1px) scale(.98); }

/* run a quick glow when new AI text appears */
.card.glow { animation: glowPulse 900ms ease-out 1; }

/* tiny footer */
.site-footer {
  max-width: 980px; margin: 28px auto 40px; padding: 0 24px;
  display: flex; gap: 12px; align-items: center; color: var(--muted);
  font-size: .95rem;
}
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.15); }
.site-footer a:hover { color: var(--brand-accent); border-bottom-color: var(--brand-accent); }