/* ==========================================================================
   MahaWork — public website theme (loaded after app.css on public pages)
   ========================================================================== */
.site {
  --brand: #3350e8; --brand-600: #2840c9; --brand-700: #1f33a6; --brand-50: #eef1ff; --brand-100: #dde4ff;
  --accent: #f97316; --accent-600: #ea580c;
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e5e8f0; --line-2: #eef0f5; --bg: #f7f8fb; --surface: #fff;
  --radius: 16px; --radius-sm: 11px; --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px -6px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 60px -18px rgba(15,23,42,.28);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; color: var(--ink); background: var(--bg);
  letter-spacing: -.006em;
}
.site h1, .site h2, .site h3, .site .brand, .site .price, .site .plan-price { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.site h1 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.site h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.025em; }
.site h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.site .panel h2 { font-size: 1.05rem; letter-spacing: -.01em; }
.site .lead { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.site .container { max-width: 1220px; padding: 0 24px; }
.site .ic { flex: none; }
.site ::selection { background: var(--brand-100); }

/* Buttons */
.site .btn { border-radius: 11px; font-weight: 600; font-size: .92rem; height: 42px; padding: 0 18px; gap: 7px; letter-spacing: -.005em; }
.site .btn-sm { height: 34px; padding: 0 13px; font-size: .85rem; border-radius: 9px; }
.site .btn-lg { height: 50px; padding: 0 24px; font-size: 1rem; border-radius: 13px; }
.site .btn-primary { background: var(--brand); box-shadow: 0 1px 2px rgba(51,80,232,.4), inset 0 1px 0 rgba(255,255,255,.15); }
.site .btn-primary:hover { background: var(--brand-600); }
.site .btn-accent { background: var(--accent); box-shadow: 0 6px 16px -6px rgba(249,115,22,.6); }
.site .btn-accent:hover { background: var(--accent-600); }
.site .btn-outline { border: 1px solid var(--line); color: var(--ink-2); background: #fff; box-shadow: var(--shadow-sm); }
.site .btn-outline:hover { border-color: #cbd2e1; background: #fafbfd; }
.site .btn-ghost { color: var(--ink-2); }
.site .btn-soft { background: var(--brand-50); color: var(--brand-600); border: 0; }
.site .btn-soft:hover { background: var(--brand-100); }
.site .btn-light { background: #fff; color: var(--brand-700); box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
.site .btn-light:hover { background: #f5f7ff; }

/* Forms */
.site input:not([type=checkbox]):not([type=radio]):not([type=file]), .site select, .site textarea { border: 1px solid #dde1ea; border-radius: 11px; padding: 11px 14px; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.site input::placeholder, .site textarea::placeholder { color: #a3acbf; }
.site input:focus, .site select:focus, .site textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(51,80,232,.12); }
.site .field > span, .site .field > legend { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.site .field > span.row-between { display: flex; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; font-weight: 500; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { width: 38px; height: 22px; border-radius: 99px; background: #d5dae5; position: relative; transition: background .15s; flex: none; }
.switch-ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + .switch-ui { background: var(--brand); }
.switch input:checked + .switch-ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--brand-100); outline-offset: 2px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 8px; }
.pw-toggle:hover { color: var(--ink-2); background: var(--line-2); }
.pw-toggle.on { color: var(--brand); }
.pw-meter { display: flex; gap: 4px; margin-top: 2px; }
.pw-meter i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); transition: background .2s; }
.pw-meter[data-score="1"] i:nth-child(1) { background: #ef4444; }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: #f59e0b; }
.pw-meter[data-score="3"] i { background: #10b981; }

/* Alerts */
.site .alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 13px 16px; font-size: .92rem; }
.site .alert .ic { margin-top: 1px; }
.flash-wrap { padding-top: 16px; }
.flash-wrap .alert { margin: 0; }

/* Header */
.site .site-header { background: rgba(255,255,255,.82); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s; }
.site .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -14px rgba(15,23,42,.25); background: rgba(255,255,255,.94); }
.site .header-inner { height: 68px; gap: 28px; }
.site .brand { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.site .brand b { color: var(--brand); }
.site .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #3350e8 0%, #6a7dff 100%); box-shadow: 0 4px 12px -2px rgba(51,80,232,.5); }
.site .main-nav { gap: 2px; flex: 1; }
.site .main-nav > a { white-space: nowrap; font-size: .9rem; font-weight: 550; color: var(--ink-2); padding: 8px 12px; border-radius: 9px; }
.site .main-nav > a:hover { background: var(--line-2); color: var(--ink); }
.site .main-nav > a[aria-current] { color: var(--brand); background: var(--brand-50); }
.site .main-nav > a.nav-pro { color: var(--accent-600); }
.site .nav-actions { margin-left: auto; gap: 4px; }
.site .icon-btn { width: 40px; height: 40px; border-radius: 10px; color: var(--ink-2); }
.site .icon-btn:hover { background: var(--line-2); }
.site .dot-count { top: 3px; right: 2px; background: #ef4444; }
.site .profile-menu summary { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; border-radius: 999px; color: var(--muted); border: 1px solid transparent; }
.site .profile-menu summary:hover { border-color: var(--line); background: #fff; }
.site .menu { border-radius: 14px; padding: 6px; min-width: 240px; box-shadow: var(--shadow-lg); border-color: var(--line); }
.site .menu a, .site .menu button { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-2); padding: 9px 11px; }
.site .menu a .ic, .site .menu button .ic { color: var(--faint); }
.site .menu form button { color: #dc2626; } .site .menu form button .ic { color: #dc2626; }
.site .menu-head { flex-direction: row; align-items: center; gap: 10px; padding: 10px 11px 12px; }
.site .menu-head span { display: flex; flex-direction: column; min-width: 0; }
.site .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); margin: 0; }
.site .nav-toggle:hover { background: var(--line-2); }
.mobile-nav { position: fixed; inset: 68px 0 0 0; z-index: 49; background: rgba(15,23,42,.35); }
.mobile-nav-panel { background: #fff; padding: 14px 20px 22px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: dropIn .18s ease; max-height: calc(100vh - 68px); overflow: auto; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } }
.mobile-nav-panel > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line-2); color: var(--ink); font-weight: 600; text-decoration: none !important; }
.mobile-nav-panel > a[aria-current] { color: var(--brand); }
.mobile-nav-panel > a .ic { color: var(--faint); }
.mobile-search { position: relative; margin-bottom: 6px; }
.mobile-search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.mobile-search input { padding-left: 40px !important; background: var(--bg) !important; }
.mobile-nav-cta { display: grid; gap: 8px; margin-top: 16px; }

/* Shared section styles */
.site .section { padding-top: 72px; padding-bottom: 0; }
.site .section-tight { padding-top: 44px; }
.site main > :last-child { padding-bottom: 72px; }
.site .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.site .section-head h2 { margin: 0; }
.site .section-head p { margin: 8px 0 0; }
.site .center-head { justify-content: center; text-align: center; }
.kicker { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.link-arrow:hover { gap: 7px; text-decoration: none; }
.site .band { background: #fff; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding-bottom: 72px; margin-top: 72px; }
.site .band + .container.section, .site .band + .section { padding-top: 72px; }

/* Hero */
.site .hero { position: relative; overflow: hidden; padding: 64px 0 72px; background:
  radial-gradient(900px 480px at 85% -10%, rgba(249,115,22,.14), transparent 60%),
  radial-gradient(900px 520px at -5% 0%, rgba(51,80,232,.16), transparent 60%),
  linear-gradient(180deg, #f3f5ff 0%, var(--bg) 100%); }
.site .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(51,80,232,.09) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-copy { max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.site .hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; margin-bottom: 18px; }
.site .hero .lead { font-size: 1.12rem; max-width: 560px; margin-bottom: 0; }
.site .hero-search { display: flex; align-items: center; gap: 6px; margin: 28px 0 14px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); max-width: 620px; }
.hero-search-field { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.hero-search-field .ic { position: absolute; left: 14px; color: var(--faint); pointer-events: none; }
.site .hero-search input, .site .discover-search input { border: 0 !important; box-shadow: none !important; padding-left: 42px !important; height: 48px; background: transparent; font-size: 1rem !important; }
.site .hero-search select { width: auto; border: 0 !important; box-shadow: none !important; background: var(--bg); height: 44px; font-weight: 500; max-width: 150px; }
.site .hero-search .btn { height: 48px; padding: 0 24px; border-radius: 12px; }
.hero-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.hero-popular a { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.hero-popular a:hover { border-color: var(--brand-100); color: var(--brand); text-decoration: none; }
.site .hero-points { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-start; margin-top: 22px; font-weight: 500; font-size: .9rem; color: var(--ink-2); }
.site .hero-points li { display: flex; align-items: center; gap: 6px; }
.site .hero-points .ic { color: #10b981; }

/* Hero visual (illustrative product preview) */
.hero-visual { position: relative; height: 440px; }
.hv-card { position: absolute; top: 10px; right: 40px; width: 300px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; transform: rotate(2deg); animation: float 6s ease-in-out infinite; }
.hv-cover { height: 78px; background: linear-gradient(120deg, #3350e8, #7b8cff 60%, #fb923c); }
.hv-body { padding: 0 20px 20px; margin-top: -32px; }
.hv-body .avatar { border: 4px solid #fff; box-shadow: var(--shadow); }
.hv-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.1rem; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.hv-head { color: var(--muted); font-size: .86rem; margin-top: 2px; }
.hv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
.hv-tags span { font-size: .74rem; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.hv-cta { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; font-size: .88rem; }
.hv-chat { position: absolute; bottom: 20px; left: 0; width: 290px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 14px; transform: rotate(-2deg); animation: float 6s ease-in-out infinite reverse; }
.hv-chat-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; margin-bottom: 10px; color: var(--ink-2); }
.hv-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.hv-msg { font-size: .82rem; line-height: 1.4; padding: 8px 12px; border-radius: 14px; margin-bottom: 6px; max-width: 88%; }
.hv-them { background: #eef0f6; border-bottom-left-radius: 4px; }
.hv-me { background: var(--brand); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.hv-quota { font-size: .72rem; color: var(--muted); font-weight: 600; margin-top: 8px; }
.hv-badge { position: absolute; top: 210px; right: 0; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .8rem; font-weight: 700; color: #0e7490; box-shadow: var(--shadow); animation: float 5s ease-in-out infinite; }
.hv-badge .ic { color: #1d9bf0; }
@keyframes float { 50% { translate: 0 -8px; } }

/* Stats strip */
.stats-strip { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid div { padding: 22px 20px; text-align: center; border-left: 1px solid var(--line-2); }
.stats-grid div:first-child { border-left: 0; }
.stats-grid b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.stats-grid span { font-size: .85rem; color: var(--muted); font-weight: 500; }

/* Type tiles */
.site .type-grid { margin-top: 0; gap: 16px; }
.site .type-tile { position: relative; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); gap: 6px; overflow: hidden; }
.site .type-tile::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--tile-tint, var(--brand-50)); opacity: .7; transition: transform .25s; }
.site .type-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-100); }
.site .type-tile:hover::after { transform: scale(1.15); }
.site .type-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tile-tint, var(--brand-50)); color: var(--tile-ink, var(--brand)); margin-bottom: 8px; font-size: 0; }
.site .type-tile strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.08rem; position: relative; z-index: 1; }
.type-desc { color: var(--muted); font-size: .88rem; position: relative; z-index: 1; }
.site .type-count { display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 1; margin-top: 10px; font-size: .85rem; color: var(--tile-ink, var(--brand)); }
.type-tile-freelancer { --tile-tint: #eef1ff; --tile-ink: #3350e8; }
.type-tile-creator { --tile-tint: #fdf0fb; --tile-ink: #c026d3; }
.type-tile-agency { --tile-tint: #e9faf3; --tile-ink: #059669; }
.type-tile-workplace { --tile-tint: #fff4e8; --tile-ink: #ea580c; }

/* Profile cards */
.site .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.site .pcard { padding: 0 20px 20px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.site .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d6dcf5; }
.pcard-band { height: 56px; margin: 0 -20px; background: linear-gradient(120deg, var(--band-a, #dfe5ff), var(--band-b, #eef1ff)); }
.pcard-freelancer { --band-a: #dbe2ff; --band-b: #eef1ff; }
.pcard-creator { --band-a: #fbdcf5; --band-b: #fdf0fb; }
.pcard-agency { --band-a: #cff5e5; --band-b: #ecfbf4; }
.pcard-workplace { --band-a: #ffe3c7; --band-b: #fff4e8; }
.pcard-head { display: flex; justify-content: space-between; align-items: flex-end; margin: -30px 0 12px; }
.pcard-head .avatar-lg { width: 60px; height: 60px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.pcard-head .type-pill { margin-bottom: 4px; }
.site .pcard-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; font-weight: 750; letter-spacing: -.015em; }
.site .pcard-headline { color: var(--ink-2); font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; margin-bottom: 8px; }
.site .pcard-loc { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.site .pcard-bio { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site .pcard .tags { margin-bottom: 4px; }
.site .pcard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 16px; margin-top: auto; }
.site .tags li { background: #f6f7fb; border-color: var(--line-2); font-size: .75rem; font-weight: 550; color: var(--ink-2); padding: 3px 9px; }
.site .type-pill { font-size: .72rem; font-weight: 650; padding: 3px 9px; letter-spacing: .01em; }

/* Steps */
.site .steps { gap: 20px; margin-top: 8px; counter-reset: none; }
.site .steps li { position: relative; padding: 28px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line-2); }
.site .steps li > span:not(.step-ic):not(.step-n) { display: none; }
.step-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--brand); box-shadow: var(--shadow); margin-bottom: 18px; }
.step-n { position: absolute; top: 24px; right: 26px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--line); }
.site .steps p { color: var(--muted); margin: 0; line-height: 1.6; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 860px; margin: 0 auto; }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan .checks { flex: 1; margin: 18px 0 24px; }
.plan-name { font-weight: 700; color: var(--ink-2); font-size: .95rem; }
.plan-price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; margin: 6px 0 4px; line-height: 1; }
.plan-price small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.plan > p { margin: 0; }
.plan-pro { background: linear-gradient(160deg, #1b2a8f 0%, #3350e8 55%, #5b6dff 100%); color: #e6eaff; border-color: transparent; box-shadow: var(--shadow-lg); }
.plan-pro .plan-name { color: #c7d0ff; }
.plan-pro .plan-price { color: #fff; }
.plan-pro .plan-price small { color: #c7d0ff; }
.plan-pro .checks li { color: #fff; }
.plan-pro .checks li::before { background: rgba(255,255,255,.18); color: #fff; }
.plan-pro .small, .plan-pro .muted { color: #c7d0ff !important; }
.plan-pro .alert { color: #7c2d12; }
.plan-flag { position: absolute; top: 20px; right: 20px; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.plan-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; color: #c7d0ff; margin: 14px 0 0 !important; }
.site .checks li { padding-left: 30px; line-height: 1.5; }
.site .checks li::before { width: 20px; height: 20px; top: 1px; }
.pricing-head { padding: 56px 0 8px; background: radial-gradient(800px 360px at 50% -20%, rgba(51,80,232,.14), transparent 70%); }
.pricing-active { max-width: 860px; margin: 0 auto 20px !important; }
.pricing-legal { margin-top: 18px; }
.faq-narrow { max-width: 760px; margin: 44px auto 0; }

/* Safety */
.safety { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; padding-top: 72px; }
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.safety-grid > div { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg); }
.safety-grid h3 { font-size: .98rem; margin: 12px 0 4px; }
.safety-grid p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.sf-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

/* FAQ */
.faq-wrap { max-width: 820px; }
.site .faq { gap: 10px; }
.site .faq details { border-radius: 14px; padding: 0; border: 1px solid var(--line); background: #fff; transition: box-shadow .15s; }
.site .faq details[open] { box-shadow: var(--shadow); }
.site .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; list-style: none; font-weight: 650; }
.site .faq summary::-webkit-details-marker { display: none; }
.site .faq summary .ic { color: var(--faint); transition: transform .2s; }
.site .faq details[open] summary .ic { transform: rotate(180deg); }
.site .faq details p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.65; }

/* CTA */
.site .cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; text-align: left; padding: 40px 44px; border-radius: var(--radius-lg); background: radial-gradient(500px 240px at 90% 0%, rgba(249,115,22,.35), transparent 70%), linear-gradient(120deg, #1b2a8f, #3350e8 60%, #5b6dff); color: #fff; margin: 0; box-shadow: var(--shadow-lg); }
.site .cta-band h2 { color: #fff; margin: 0 0 6px; }
.site .cta-band p { margin: 0; color: #dfe4ff; opacity: 1; }

/* Page head + discover */
.site .page-head { padding: 44px 0 28px; background: linear-gradient(180deg, #f1f4ff, var(--bg)); border-bottom: 1px solid var(--line-2); }
.site .page-head h1 { margin-bottom: 6px; }
.discover-search { display: flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-width: 720px; margin-top: 20px; }
.discover-search .btn { height: 46px; }
.discover-search input { height: 46px !important; }
.type-tabs { display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.type-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.type-tabs a:hover { border-color: #cbd2e1; text-decoration: none; }
.type-tabs a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.site .discover { grid-template-columns: 280px 1fr; gap: 28px; padding-top: 28px; padding-bottom: 72px; }
.site .filter-toggle { top: 88px; }
.site .filters { top: auto; border-radius: var(--radius); padding: 20px; gap: 16px; box-shadow: var(--shadow-sm); }
.filters-head { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; }
.filters-head a { font-size: .82rem; font-weight: 600; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.site .result-count { margin: 0; color: var(--muted); }
.site .result-count strong { color: var(--ink); }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form select { width: auto; height: 38px; padding: 0 34px 0 12px !important; font-size: .88rem !important; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: .82rem; font-weight: 600; border: 1px solid var(--brand-100); }
.filter-chip span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(51,80,232,.12); font-size: .9rem; line-height: 1; }
.filter-chip:hover { text-decoration: none; background: var(--brand-100); }
.filter-clear { font-size: .82rem; font-weight: 600; color: var(--muted); }
.site .empty { border-radius: var(--radius); border: 1px dashed #d5dae5; background: #fff; padding: 56px 24px; }
.empty-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-50); color: var(--brand); margin-bottom: 14px; }
.skill-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 20px; }
.skill-cloud a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 500; color: var(--ink-2); background: var(--bg); }
.site .pagination a, .site .pagination span { border-radius: 10px; }

/* Profile page */
.site .cover { height: 260px; background: linear-gradient(120deg, #3350e8 0%, #7b8cff 55%, #fb923c 100%); position: relative; }
.site .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,23,42,.18)); }
.site .cover-creator:not(.has-img) { background: linear-gradient(120deg, #a21caf, #e879f9 55%, #fb923c); }
.site .cover-agency:not(.has-img) { background: linear-gradient(120deg, #047857, #34d399 55%, #60a5fa); }
.site .cover-workplace:not(.has-img) { background: linear-gradient(120deg, #c2410c, #fb923c 55%, #facc15); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: rgba(255,255,255,.92); margin-top: -244px; position: relative; z-index: 1; height: 20px; }
.crumbs a, .crumbs span { color: #fff; opacity: .9; }
.crumbs .ic { opacity: .7; color: #fff; }
.site .profile-head { margin-top: 136px; position: relative; z-index: 1; align-items: flex-end; gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow); }
.site .profile-head .avatar-xl { width: 128px; height: 128px; margin-top: -78px; border: 5px solid #fff; box-shadow: var(--shadow); }
.site .profile-id h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 3vw, 2rem); }
.profile-headline { font-size: 1.04rem; color: var(--ink-2); margin: 0 0 10px; }
.site .profile-meta { gap: 10px; }
.meta-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .86rem; }
.profile-tools { display: flex; gap: 8px; align-self: flex-start; }
.profile-tabs { display: flex; gap: 4px; margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; position: sticky; top: 68px; z-index: 5; background: rgba(247,248,251,.92); backdrop-filter: blur(8px); padding: 8px 0; }
.profile-tabs a { padding: 8px 14px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.profile-tabs a:hover, .profile-tabs a.active { background: #fff; color: var(--brand); text-decoration: none; box-shadow: var(--shadow-sm); }
.site .profile-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding: 18px 0 0; }
.site .panel { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-sm); padding: 24px; scroll-margin-top: 140px; }
.site .prose { line-height: 1.7; color: var(--ink-2); }
.detail-block + .detail-block { border-top: 1px solid var(--line-2); margin-top: 20px; padding-top: 20px; }
.detail-block p:last-child { margin-bottom: 0; }
.site .tags-lg li { border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.site .tags-lg li a { padding: 7px 13px; font-weight: 550; }
.site .tags-lg li:hover { border-color: var(--brand-100); background: var(--brand-50); }
.profile-side { display: flex; flex-direction: column; gap: 0; }
.contact-card { position: sticky; top: 132px; z-index: 2; border-top: 3px solid var(--brand) !important; }
.contact-card h2 { margin-bottom: 8px; }
.contact-card .btn + .btn { margin-top: 8px; }
.quota-note { display: grid; gap: 6px; margin: 14px 0 0; font-size: .82rem; color: var(--muted); font-weight: 600; }
.quota-note.pro { display: flex; align-items: center; gap: 6px; color: #059669; }
.quota-note + .btn { margin-top: 10px; }
.contact-trust { list-style: none; padding: 14px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; font-size: .8rem; color: var(--muted); }
.contact-trust li { display: flex; align-items: flex-start; gap: 7px; }
.contact-trust .ic { margin-top: 1px; color: var(--faint); }
.site .facts { font-size: .9rem; }
.site .link-list a { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; padding: 4px 0; }
.site .link-list a:hover { color: var(--brand); text-decoration: none; }
.site .link-list a .ic:last-child { margin-left: auto; color: var(--faint); }
.site .safety-panel { background: #fffaf2; border-color: #fbe6c6; }
.site .safety-panel h2 { display: flex; align-items: center; gap: 6px; color: #9a5b00; font-size: .95rem; }
.site .safety-panel p { margin: 0; color: #7c5a1d; }
.site .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.site .portfolio-item { border-radius: 14px; border-color: var(--line); transition: box-shadow .15s, transform .15s; }
.site .portfolio-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pf-media { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.site .portfolio-item img, .site .portfolio-ph { aspect-ratio: 4/3; }
.site .portfolio-item figcaption a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .85rem; }
.empty-panel { text-align: center; padding: 40px 24px !important; }
.similar { padding-bottom: 8px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10,14,30,.85); }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 14px; margin: 0 auto; box-shadow: var(--shadow-lg); }
.lightbox-cap { color: #e2e8f0; text-align: center; margin: 12px 0 0; font-weight: 500; }
.lightbox-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.25); }

/* Auth */
.site-auth .site-header { display: none; }
.site-auth main > :last-child { padding-bottom: 0 !important; }
.auth-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 100vh; }
.auth-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; color: #c9d1f5; background: radial-gradient(700px 400px at 0% 0%, rgba(99,123,255,.5), transparent 60%), radial-gradient(600px 420px at 100% 100%, rgba(249,115,22,.32), transparent 60%), #0d1330; }
.auth-aside::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 80%); pointer-events: none; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .brand { color: #fff; } .auth-aside .brand b { color: #a5b4ff; }
.auth-aside h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 28px; max-width: 420px; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; max-width: 420px; }
.auth-points li { display: flex; gap: 14px; }
.auth-points li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #a5b4ff; flex: none; }
.auth-points b { display: block; color: #fff; font-weight: 600; }
.auth-points small { font-size: .86rem; }
.auth-foot { font-size: .8rem; color: #7f89b3; }
.auth-main { display: grid; place-items: center; padding: 48px 24px; background: #fff; }
.site .auth-card { max-width: 420px; width: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; }
.site .auth-card.auth-wide { max-width: 600px; }
.site .auth-card h1 { font-size: 1.85rem; margin: 0 0 6px; }
.site .auth-card > p.muted { margin: 0 0 4px; }
.site .auth-card form { gap: 16px; margin: 24px 0 18px; }
.auth-brand-sm { display: none !important; margin-bottom: 28px; }
.auth-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-50); color: var(--brand); margin-bottom: 18px; }
.auth-switch { color: var(--muted); }
.site .type-choices { gap: 10px; }
.site .type-choice { position: relative; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 13px; border: 1.5px solid var(--line); transition: border-color .15s, background .15s; }
.site .type-choice:hover { border-color: #cbd2e1; }
.site .type-choice input { position: absolute; opacity: 0; }
.tc-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--ink-2); flex: none; }
.tc-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #d5dae5; display: grid; place-items: center; color: transparent; }
.site .type-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.site .type-choice:has(input:checked) .tc-ic { background: #fff; color: var(--brand); }
.site .type-choice:has(input:checked) .tc-check { background: var(--brand); border-color: var(--brand); color: #fff; }
.site .type-choice:has(input:focus-visible) { outline: 3px solid var(--brand-100); }
.site .type-choice strong { font-size: .92rem; }
.site .type-choice small { line-height: 1.35; }

/* Footer */
.site .site-footer { background: #0b1124; color: #a6afc9; padding: 64px 0 28px; margin-top: 0; }
.site .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin: 14px 0 18px; max-width: 320px; line-height: 1.6; }
.footer-trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .85rem; }
.footer-trust li { display: flex; align-items: center; gap: 8px; }
.footer-trust .ic { color: #7f8fff; }
.site .footer-grid h4 { font-family: 'Inter', sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #6f7aa0; margin-bottom: 14px; }
.site .footer-grid a:not(.brand) { color: #c9d0e6; font-size: .9rem; padding: 5px 0; }
.site .footer-grid a:not(.brand):hover { color: #fff; text-decoration: none; }
.site .footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top-color: #1c2440; color: #6f7aa0; font-size: .82rem; }

/* Member dashboard polish */
.site .dash { padding-top: 32px; padding-bottom: 72px; }
.site .dash-nav { border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-sm); }
.site .dash-nav a, .site .dash-nav .linklike { border-radius: 10px; font-weight: 550; font-size: .9rem; }
.site .stat { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.site .stat-value { font-family: 'Plus Jakarta Sans', sans-serif; }
.site .table-wrap { border-radius: var(--radius); }
.site .chip { font-weight: 650; }
.site .inbox { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Static pages / errors */
.site .static-page { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 44px; margin-top: 28px; line-height: 1.75; }
.site .error-code { font-family: 'Plus Jakarta Sans', sans-serif; background: linear-gradient(135deg, #3350e8, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 5rem; }

/* Chat launcher harmonised */
.site .chat-fab { background: linear-gradient(135deg, #3350e8, #5b6dff); }

/* Responsive */
@media (max-width: 1180px) and (min-width: 901px) {
  .site .main-nav > a { padding: 8px 9px; font-size: .86rem; }
  .site .header-inner { gap: 18px; }
}
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-copy { max-width: 720px; }
  .site .footer-grid { grid-template-columns: 1fr 1fr; }
  .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .site .main-nav { display: none !important; }
  .site .nav-toggle { display: grid; place-items: center; }
  .site .header-inner { gap: 12px; }
  .site .nav-actions { margin: 0 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; }
  .site .nav-actions .btn { height: 38px; padding: 0 14px; }
  .site .discover { grid-template-columns: 1fr; }
  .site .profile-body { grid-template-columns: 1fr; }
  .contact-card { position: static; }
  .profile-side { order: -1; }
  .safety { grid-template-columns: 1fr; gap: 28px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-brand-sm { display: inline-flex !important; }
  .site .type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .site .container { padding: 0 16px; }
  .site .section { padding-top: 52px; }
  .site .band { margin-top: 52px; padding-bottom: 52px; }
  .site .hero { padding: 40px 0 48px; }
  .site .hero-search { flex-wrap: wrap; }
  .hero-search-field { flex-basis: 100%; }
  .site .hero-search select { flex: 1; max-width: none; }
  .site .hero-search .btn { flex: 1; }
  .discover-search .btn { padding: 0 14px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid div:nth-child(3) { border-left: 0; }
  .stats-grid div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .site .type-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .site .type-tile { padding: 16px; }
  .type-desc { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 26px; }
  .safety-grid { grid-template-columns: 1fr; }
  .site .cta-band { padding: 28px 24px; }
  .site .cta-band .btn { width: 100%; }
  .card-grid-3 { grid-template-columns: 1fr !important; }
  .site .section-head { flex-direction: column; align-items: flex-start; }
  .center-head { align-items: center !important; }
  .site .cover { height: 180px; }
  .crumbs { display: none; }
  .site .profile-head { margin-top: -50px; flex-direction: column; align-items: flex-start; padding: 18px; }
  .site .profile-head .avatar-xl { width: 96px; height: 96px; margin-top: -60px; }
  .profile-tools { align-self: stretch; }
  .profile-tabs { top: 68px; }
  .site .static-page { padding: 24px 20px; }
  .site .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hide-sm { display: none !important; }
  .results-bar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .hv-card, .hv-chat, .hv-badge, .pulse { animation: none !important; } }