/* ARCLANCER Design System — Teal Studio Edition */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --color-charcoal:#12181B;
  --color-black:#07211D;
  --color-ivory:#FFFFFF;
  --color-stone:#F2F6F5;
  --color-gold:#0E8074;
  --color-gold-bright:#12A093;
  --color-bronze:#0B5D52;
  --color-white:#FFFFFF;
  --color-gray:#697380;
  --color-border:#E4E9E8;
  --color-success:#0E8074;
  --color-error:#D7594E;
  --color-warning:#C98A2C;

  /* Light base palette */
  --color-bg:#FFFFFF;
  --color-bg-alt:#F3F7F6;
  --color-surface:#FFFFFF;
  --color-surface-2:#F5F8F7;
  --color-text:#12181B;
  --color-muted:var(--color-gray);
  --glow-gold: 0 6px 20px rgba(14,128,116,.18);
  --glow-gold-strong: 0 10px 30px rgba(14,128,116,.28);

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --shadow-sm:0 2px 8px rgba(18,24,27,.06);
  --shadow-md:0 12px 32px rgba(18,24,27,.08);
  --shadow-lg:0 30px 70px rgba(18,24,27,.14);
  --container:1280px;
  --transition-fast:180ms cubic-bezier(.4,0,.2,1);
  --transition-normal:380ms cubic-bezier(.16,1,.3,1);
  --font-ui:'Manrope','Inter',-apple-system,sans-serif;
  --font-serif:'Manrope','Inter',-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-ui);color:var(--color-text);
  background:var(--color-bg);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%}
@media (max-width:900px){.container{padding:0 22px}}
@media (max-width:480px){.container{padding:0 16px}}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
.serif{font-family:var(--font-serif)}
.eyebrow{
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-gold);font-weight:600;display:flex;align-items:center;gap:10px;
  text-shadow:0 0 18px rgba(212,181,121,.35);
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--color-gold);display:inline-block;box-shadow:0 0 8px rgba(212,181,121,.7)}
.section-number{font-family:var(--font-serif);color:var(--color-gold);font-size:1.1rem;margin-right:10px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:var(--radius-sm);font-weight:600;font-size:.92rem;
  border:1px solid transparent;transition:all var(--transition-fast);white-space:nowrap;
  position:relative;
}
.btn-primary{background:var(--color-white);color:var(--color-black)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.15)}
.btn-gold{background:var(--color-bronze);color:#fff;box-shadow:var(--glow-gold);border-color:var(--color-bronze)}
.btn-gold:hover{transform:translateY(-2px);background:var(--color-gold);box-shadow:var(--glow-gold-strong)}
.btn-outline{background:transparent;border-color:var(--color-border);color:var(--color-charcoal)}
.btn-outline:hover{background:var(--color-stone);border-color:var(--color-gold);color:var(--color-gold)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:var(--color-white)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:var(--color-white)}
.btn-sm{padding:9px 18px;font-size:.82rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Header — dark architectural concrete-teal texture, matching brand mark */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;transition:padding var(--transition-normal),box-shadow var(--transition-normal);
  background:
    radial-gradient(120% 200% at 8% 0%, rgba(18,160,147,.16), transparent 55%),
    radial-gradient(80% 160% at 92% 100%, rgba(18,160,147,.10), transparent 60%),
    linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 35%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 84px),
    linear-gradient(180deg, #0A1613 0%, #0C1D1A 55%, #0A1613 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.site-header.is-solid{padding:12px 0;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}
.logo{font-family:var(--font-ui);font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:#fff;display:flex;align-items:center;gap:9px}
.logo .logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--color-gold-bright),var(--color-bronze));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-ui);font-weight:800;font-size:1.05rem;flex-shrink:0;box-shadow:0 0 20px rgba(18,160,147,.35)}
.logo .logo-tagline{display:block;font-size:.56rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.5);margin-top:1px}
.logo-img-wrap{position:relative;overflow:hidden;border-radius:6px;line-height:0}
.drawer-panel .logo-img-wrap{background:#0A1613;padding:8px 14px;border-radius:8px}
.logo-img{height:54px;width:auto;display:block}
@media (max-width:640px){.logo-img{height:42px}}
.logo-img-wrap::after{
  content:'';position:absolute;top:0;left:-60%;width:36%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:skewX(-20deg);mix-blend-mode:screen;pointer-events:none;
  animation:logo-shine 13s ease-in-out infinite;animation-delay:1.1s;
}
.logo-img-wrap:hover::after{filter:brightness(1.3)}
@keyframes logo-shine{
  0%,8%{left:-60%;opacity:0}
  11%{opacity:.9}
  17%,100%{left:135%;opacity:0}
}
@media (prefers-reduced-motion: reduce){.logo-img-wrap::after{animation:none;display:none}}

/* ══════ Header glass-light sweep — premium continuous 3D crystal beam ══════ */
.header-glass-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;mix-blend-mode:screen}
.header-glass-sweep span{position:absolute;top:-45%;bottom:-45%;will-change:transform,opacity;transform:translateX(-25vw) skewX(-14deg)}
.hgs-glow{width:16vw;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(67,198,181,.32),transparent 72%);filter:blur(26px);
  animation:hgs-sweep 13.5s cubic-bezier(.37,.02,.4,1) infinite;animation-delay:-1.2s}
.hgs-trail{width:24vw;background:linear-gradient(100deg,transparent,rgba(22,143,128,.09),transparent);filter:blur(18px);
  animation:hgs-sweep 13.2s cubic-bezier(.37,.02,.4,1) infinite;animation-delay:-1.4s}
.hgs-body{width:9vw;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.05) 18%,rgba(67,198,181,.24) 46%,rgba(22,143,128,.26) 58%,rgba(255,255,255,.07) 82%,transparent 100%);
  filter:blur(5px);animation:hgs-sweep 13s cubic-bezier(.37,.02,.4,1) infinite;animation-delay:-1s}
.hgs-reflect{width:4vw;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 50%,transparent);filter:blur(2px);
  animation:hgs-sweep 12.8s cubic-bezier(.37,.02,.4,1) infinite;animation-delay:-.85s}
.hgs-edge{width:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85),rgba(67,198,181,.55),transparent);
  box-shadow:0 0 10px 2px rgba(255,255,255,.45),0 0 22px 6px rgba(67,198,181,.3);
  animation:hgs-sweep 13s cubic-bezier(.37,.02,.4,1) infinite;animation-delay:-.7s}
@keyframes hgs-sweep{
  0%{transform:translateX(-22vw) skewX(-14deg);opacity:0}
  9%{opacity:.85}
  50%{opacity:1}
  86%{opacity:.6}
  100%{transform:translateX(122vw) skewX(-14deg);opacity:0}
}
@media (max-width:900px){
  .hgs-glow{width:22vw}
  .hgs-trail{width:34vw;filter:blur(14px)}
  .hgs-body{width:12vw;filter:blur(4px)}
}
@media (max-width:640px){
  .header-glass-sweep{opacity:.7}
  .hgs-glow,.hgs-trail{display:none}
}
@media (prefers-reduced-motion: reduce){
  .header-glass-sweep{display:none}
}
.main-nav{display:flex;gap:30px;align-items:center}
.nav-link{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.82);transition:color var(--transition-fast);position:relative;padding-bottom:4px}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--color-gold-bright);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform var(--transition-normal)}
.nav-link:hover,.nav-link.active{color:var(--color-gold-bright)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.header-actions{display:flex;align-items:center;gap:14px}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background var(--transition-fast);color:rgba(255,255,255,.85)}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.menu-toggle{display:none;background:none;border:none;padding:8px;color:#fff}
.site-header .btn-outline{border-color:rgba(255,255,255,.28);color:#fff}
.site-header .btn-outline:hover{background:rgba(255,255,255,.1);border-color:var(--color-gold-bright);color:var(--color-gold-bright)}
@media (max-width:1024px){
  .main-nav{display:none}
  .menu-toggle{display:block}
}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0;z-index:2000;visibility:hidden}
.mobile-drawer.open{visibility:visible}
.drawer-backdrop{position:absolute;inset:0;background:rgba(7,33,29,.55);opacity:0;transition:opacity var(--transition-normal);backdrop-filter:blur(2px)}
.mobile-drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--color-white);border-left:1px solid var(--color-border);
  transform:translateX(100%);transition:transform var(--transition-normal);padding:28px;overflow-y:auto;box-shadow:var(--shadow-lg)}
.mobile-drawer.open .drawer-panel{transform:translateX(0)}
.drawer-panel .nav-link{display:block;padding:16px 4px;border-bottom:1px solid var(--color-border);color:var(--color-text);opacity:1;font-size:1rem}
.drawer-panel .nav-link::after{display:none}

/* Hero */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;color:var(--color-white);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.1);opacity:0;transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity 1.1s ease}
.hero.loaded .hero-bg{transform:scale(1);opacity:1;animation:hero-drift 22s ease-in-out infinite alternate}
@keyframes hero-drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.05) translateY(-14px)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,6,5,.94) 0%,rgba(6,6,5,.72) 45%,rgba(6,6,5,.35) 100%)}
.hero-glow{position:absolute;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,181,121,.16),transparent 70%);top:-10%;right:-15%;pointer-events:none;filter:blur(20px)}
.hero-content{position:relative;z-index:2;max-width:640px;padding-top:80px}
.hero .eyebrow{color:var(--color-gold);opacity:0;transform:translateY(16px);animation:reveal-up .7s cubic-bezier(.16,1,.3,1) .3s forwards}
.hero h1{font-family:var(--font-serif);font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.06;font-weight:500;margin:22px 0 20px;opacity:0;transform:translateY(20px);animation:reveal-up .8s cubic-bezier(.16,1,.3,1) .45s forwards;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.hero p{font-size:1.08rem;color:rgba(255,255,255,.82);max-width:480px;margin:0 0 34px;opacity:0;transform:translateY(16px);animation:reveal-up .7s cubic-bezier(.16,1,.3,1) .65s forwards}
.hero-search{opacity:0;transform:translateY(16px);animation:reveal-up .7s cubic-bezier(.16,1,.3,1) .85s forwards}
@keyframes reveal-up{to{opacity:1;transform:translateY(0)}}
.search-box{background:rgba(23,22,20,.9);border:1px solid rgba(212,181,121,.3);border-radius:var(--radius-md);padding:8px;display:flex;gap:8px;box-shadow:var(--glow-gold);backdrop-filter:blur(10px)}
.search-box input{flex:1;border:none;outline:none;padding:14px 16px;color:var(--color-white);background:transparent;min-width:0}
.search-box input::placeholder{color:rgba(255,255,255,.45)}
.search-chips{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.search-chip{font-size:.8rem;padding:7px 14px;border:1px solid rgba(255,255,255,.25);border-radius:20px;color:rgba(255,255,255,.85);transition:all var(--transition-fast)}
.search-chip:hover{border-color:var(--color-gold);color:var(--color-gold-bright);box-shadow:0 0 14px rgba(212,181,121,.3)}

/* ===== Homepage Hero v2 (split layout, matches reference) ===== */
.hero-split{padding:150px 0 70px;overflow:hidden;position:relative}
.hero-split .container{display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;align-items:center}
.hero-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold);margin-bottom:16px}
.hero-heading{font-family:var(--font-ui);font-size:clamp(2.1rem,4.3vw,3.15rem);font-weight:800;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;color:var(--color-charcoal)}
.hero-heading .accent{color:var(--color-gold)}
.hero-text{color:var(--color-muted);font-size:1.02rem;line-height:1.7;max-width:460px;margin:20px 0 30px}
.hero-text strong{color:var(--color-charcoal);font-weight:700}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-trust-label{font-size:.78rem;color:var(--color-muted);margin-bottom:10px}
.hero-trust-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.avatar-stack{display:flex;align-items:center}
.avatar-stack img{width:36px;height:36px;border-radius:50%;border:2.5px solid #fff;margin-left:-12px;object-fit:cover;box-shadow:0 2px 6px rgba(18,24,27,.12)}
.avatar-stack img:first-child{margin-left:0}
.avatar-stack .avatar-more{width:36px;height:36px;border-radius:50%;background:var(--color-gold);color:#fff;border:2.5px solid #fff;margin-left:-12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}
.rating-line{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem}
.rating-line .stars{color:var(--color-gold);letter-spacing:1px}
.rating-line span.rl-label{font-weight:500;color:var(--color-muted);font-size:.82rem}

.hero-visual{position:relative;transform:scale(1.22);transform-origin:center right;margin-right:-32px}
.hero-visual-blob{position:absolute;top:-8%;right:-10%;width:88%;height:88%;border-radius:50%;background:radial-gradient(circle,rgba(14,128,116,.14),transparent 72%);z-index:0}
.hero-visual-img{position:relative;z-index:1;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--shadow-lg)}
.hero-visual-img img{width:100%;height:100%;object-fit:cover}
.hero-visual-img-cutout{border-radius:0;overflow:visible;aspect-ratio:auto;box-shadow:none;display:flex;justify-content:center}
.hero-visual-img-cutout img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(18,24,27,.18))}

.process-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:56px;flex-wrap:wrap}
.process-step{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.8rem;font-weight:700;color:var(--color-charcoal)}
.process-icon{width:56px;height:56px;border-radius:50%;background:var(--color-stone);display:flex;align-items:center;justify-content:center;color:var(--color-gold)}
.process-arrow{color:var(--color-border);font-size:1.2rem}

@media (max-width:1024px){
  .hero-split .container{grid-template-columns:1fr}
  .hero-visual{order:1;max-width:520px;margin:30px auto 0;transform:scale(1.06)}
}
@media (max-width:560px){
  .hero-split{padding:120px 0 50px}
  .hero-visual{transform:none;margin-top:20px}
  .process-row{gap:8px}
  .process-icon{width:44px;height:44px}
  .process-arrow{display:none}
}

/* Services strip */
.services-strip{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:34px 8px;display:grid;grid-template-columns:repeat(5,1fr)}
.services-strip .strip-item{display:flex;gap:12px;align-items:flex-start;padding:0 22px;border-right:1px solid var(--color-border)}
.services-strip .strip-item:last-child{border-right:none}
.services-strip .strip-icon{width:46px;height:46px;border-radius:12px;background:var(--color-stone);display:flex;align-items:center;justify-content:center;color:var(--color-gold);flex-shrink:0}
.services-strip .strip-title{font-weight:700;font-size:.88rem;margin-bottom:3px}
.services-strip .strip-desc{font-size:.76rem;color:var(--color-muted);line-height:1.4}
@media (max-width:1024px){.services-strip{grid-template-columns:repeat(3,1fr);gap:20px 0}.services-strip .strip-item{border-right:none;padding:14px 12px}}
@media (max-width:640px){.services-strip{grid-template-columns:1fr}}

/* How it works / steps */
.steps-section{background:var(--color-bg-alt)}
.steps-layout{display:grid;grid-template-columns:1.22fr 1fr;align-items:center;gap:40px}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;padding-top:2px}
.steps-dotted-line{position:absolute;top:11px;left:14px;right:14px;height:0;border-top:2px dotted var(--color-border);z-index:0}
.step-item{position:relative;z-index:1}
.step-num-row{display:flex;align-items:baseline;gap:1px;background:var(--color-bg-alt);padding-right:8px;width:fit-content}
.step-item .step-num{font-size:1.3rem;font-weight:800;color:var(--color-charcoal);font-family:var(--font-ui);letter-spacing:-.02em}
.step-num-dot{font-size:1.3rem;font-weight:800;color:var(--color-gold)}
.step-item .step-icon{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--color-gold);background:rgba(14,128,116,.05);color:var(--color-gold);display:flex;align-items:center;justify-content:center;margin:14px 0 14px;transition:background var(--transition-fast),transform var(--transition-fast)}
.step-item:hover .step-icon{background:var(--color-gold);color:#fff;transform:translateY(-2px)}
.step-item .step-title{font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--color-charcoal);letter-spacing:-.01em}
.step-item .step-desc{font-size:.78rem;color:var(--color-muted);line-height:1.55}
@media (max-width:1024px){.steps-layout{grid-template-columns:1fr}}
@media (max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr);gap:24px}.steps-dotted-line{display:none}}
@media (max-width:560px){.steps-grid{grid-template-columns:1fr}}

.steps-visual{position:relative;max-width:400px;margin:0 auto}
.steps-visual img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 32px rgba(18,24,27,.16))}
.steps-badge{position:absolute;bottom:-4%;right:0;background:#fff;border-radius:50%;width:96px;height:96px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px}
.steps-badge span{font-size:.58rem;color:var(--color-muted);font-weight:700}
.steps-badge strong{font-family:var(--font-ui);font-weight:800;font-size:1.35rem;color:var(--color-gold);line-height:1.15}
@media (max-width:1024px){.steps-visual{margin-top:10px}}

/* Freelancer card v2 (legacy, kept for compatibility) */
.pro-card-v2{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;background:#fff;position:relative;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}
.pro-card-v2:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.pro-card-v2 .bookmark{position:absolute;top:16px;right:16px;color:var(--color-muted);transition:color var(--transition-fast)}
.pro-card-v2 .bookmark:hover,.pro-card-v2 .bookmark.active{color:var(--color-gold)}
.pro-card-v2-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pro-card-v2-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover}
.pro-card-v2-name{font-weight:700;font-size:.92rem}
.pro-card-v2-badge{font-size:.74rem;color:var(--color-gold);font-weight:700;display:flex;align-items:center;gap:5px;margin-top:2px}
.pro-card-v2-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--color-border);font-size:.78rem;color:var(--color-muted)}
.pro-card-v2-foot strong{color:var(--color-charcoal);font-size:.92rem}

/* ══════ Reusable avatar/profile-image component ══════
   Apply `.avatar` + a size modifier to every profile/avatar <img> site-wide. */
.avatar{
  border-radius:50%;aspect-ratio:1/1;object-fit:cover;display:block;flex-shrink:0;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(6,15,14,.12);
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.avatar:hover{transform:scale(1.05);box-shadow:0 0 0 3px rgba(14,128,116,.16),0 10px 24px rgba(6,15,14,.18)}
.avatar-xs{width:24px;height:24px;border-width:1px}
.avatar-sm{width:36px;height:36px;border-width:1.5px}
.avatar-md{width:48px;height:48px;border-width:2px}
.avatar-lg{width:88px;height:88px;border-width:3px}
.avatar-xl{width:120px;height:120px;border-width:4px}
@media (prefers-reduced-motion: reduce){.avatar{transition:none}.avatar:hover{transform:none}}

/* Top Freelancers — premium editorial cards */
.pros-section{position:relative}
.pros-section::before{
  content:'';position:absolute;top:10%;left:-6%;width:38%;height:70%;border-radius:50%;
  background:radial-gradient(circle,rgba(14,128,116,.05),transparent 70%);pointer-events:none;z-index:0;
}
.pro-feature-card{position:relative;z-index:1;border-radius:var(--radius-md);overflow:hidden;background:#fff;
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);text-align:center;
  transition:box-shadow var(--transition-normal),transform var(--transition-normal),border-color var(--transition-normal)}
.pro-feature-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(11,93,82,.15);border-color:rgba(14,128,116,.3)}
.pro-feature-rank{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--font-ui);font-weight:800;font-size:1.05rem;color:var(--color-border);letter-spacing:-.01em}
.pro-feature-card .bookmark{position:absolute;top:12px;right:12px;z-index:2;color:var(--color-muted);background:none;border:none;box-shadow:none;
  display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}
.pro-feature-card .bookmark:hover{color:var(--color-gold)}
.pro-feature-card .bookmark.active{color:var(--color-gold)}
.pro-feature-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 20px 22px;text-align:center}
.pro-feature-avatar-ring{position:relative;width:104px;height:104px;border-radius:50%;padding:4px;
  background:linear-gradient(135deg,var(--color-gold-bright),var(--color-bronze));margin-bottom:16px;
  box-shadow:0 10px 26px rgba(11,93,82,.18);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}
.pro-feature-card:hover .pro-feature-avatar-ring{transform:scale(1.06);box-shadow:0 0 0 6px rgba(14,128,116,.1),0 14px 30px rgba(11,93,82,.22)}
.pro-feature-avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid #fff}
.pro-feature-info{display:flex;flex-direction:column;gap:2px}
.pro-feature-name{color:var(--color-charcoal);font-weight:800;font-size:1.02rem}
.pro-feature-title{color:var(--color-gold);font-size:.78rem;font-weight:600}
.pro-feature-body{padding:0 20px 22px}
.pro-feature-rating{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.pro-feature-reviews{font-size:.76rem;color:var(--color-muted)}
.pro-feature-loc{font-size:.78rem;color:var(--color-muted);margin-bottom:14px}
.pro-feature-foot{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin-bottom:14px}
.pro-feature-cta{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--color-gold);transition:gap var(--transition-fast),color var(--transition-fast)}
.pro-feature-cta:hover{gap:12px;color:var(--color-gold-bright)}

/* Why Choose section — dark, subtle background image */
.why-section{position:relative;padding:100px 0;overflow:hidden;background:var(--color-black)}
.why-bg{position:absolute;inset:0;background-image:url('https://images.openai.com/static-rsc-4/Mp1d65xDI852wzJ1XP3AARW8uh5qpIR24TjC9ky1id0D0v8iYEGnM2n4TGvSTgyEf1PFeAZjncTex5LmaJwEOlG3zbSclktdqSQ1iZcERs0EpsQqCE_6R0oq0JaCA93e264T24ux0AdOR2Ni17Bg4J_VWd2lexiB3289ZBTAR6D_MDdOvX0RNkmykKcwkMCY?purpose=inline');background-size:cover;background-position:center;opacity:.35}
.why-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,33,29,.55),rgba(7,33,29,.92))}
.why-card{padding:26px;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);background:rgba(255,255,255,.03);transition:border-color var(--transition-fast),background var(--transition-fast)}
.why-card:hover{border-color:rgba(212,181,121,.35);background:rgba(255,255,255,.05)}
.why-icon{width:48px;height:48px;border-radius:12px;background:rgba(212,181,121,.12);color:var(--color-gold-bright);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.why-card h3{color:#fff;font-size:1.02rem;font-weight:700;margin-bottom:8px}
.why-card p{color:rgba(255,255,255,.62);font-size:.85rem;line-height:1.6;margin:0}
@media (max-width:768px){.why-section{padding:64px 0}}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-block{display:flex;flex-direction:column;gap:6px;padding:20px 10px;border-right:1px solid var(--color-border)}
.stat-block:last-child{border-right:none}
.stat-block-num{font-family:var(--font-ui);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--color-gold)}
.stat-block-label{font-size:.82rem;color:var(--color-muted);font-weight:600}
@media (max-width:768px){.stats-row{grid-template-columns:repeat(2,1fr);gap:10px}.stat-block:nth-child(2){border-right:none}.stat-block{border-bottom:1px solid var(--color-border);padding:16px 8px}.stat-block:nth-last-child(-n+2){border-bottom:none}}

/* CTA banner */
.cta-banner{
  background-image:
    linear-gradient(120deg,rgba(11,93,82,.88),rgba(14,128,116,.82)),
    url('https://images.openai.com/static-rsc-4/kTdp4s9y4vH4QfJ-3BBps-F9M78up70SdAl0AYhmgpSAV7l3LFl-KElj_mRMacbPEKoXTxcxXfzLooqv50d4Lknps6HK39ZEeyHRXbbsg16OhnvjZfl3EbJhRyUr9WywKvCVpj7RFE21bmfhN8QP1PldvBaBP_fv8CIoFWbgTmM?purpose=inline');
  background-size:cover;background-position:center;
  border-radius:var(--radius-lg);padding:60px 56px;display:flex;justify-content:space-between;align-items:center;color:#fff;overflow:hidden;position:relative;gap:30px;
  min-height:220px;
}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.cta-banner p{color:rgba(255,255,255,.85);margin-top:10px;max-width:380px}
@media (max-width:820px){.cta-banner{flex-direction:column;text-align:center;padding:40px 26px}.cta-banner p{margin-left:auto;margin-right:auto}}

/* Generic page hero (interior pages) */
.page-hero{min-height:56vh;position:relative;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding-bottom:60px}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06)}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,5,.96) 0%,rgba(6,6,5,.55) 60%,rgba(6,6,5,.35) 100%)}
.page-hero .container{position:relative;z-index:2;padding-top:120px}
.page-hero h1{font-family:var(--font-serif);font-size:clamp(2rem,4.6vw,3.2rem);margin:14px 0 8px}

@media (prefers-reduced-motion: reduce){
  .hero-bg,.hero .eyebrow,.hero h1,.hero p,.hero-search,[data-reveal]{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

/* Sections */
.section{padding:110px 0}
.section-sm{padding:64px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap}
.section-head h2{font-family:var(--font-serif);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:500;margin-top:12px}
.section-dark{background:var(--color-black)}
.section-dark .eyebrow{color:var(--color-gold)}
@media (max-width:768px){
  .section{padding:64px 0}
  .section-sm{padding:44px 0}
  .section-head{margin-bottom:34px}
}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
[data-reveal].in-view{opacity:1;transform:translateY(0)}
[data-reveal="scale"]{transform:scale(.92) translateY(20px)}
[data-reveal="scale"].in-view{transform:scale(1) translateY(0)}

/* Grid */
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split-2-1{grid-template-columns:2fr 1fr}
.split-1-2{grid-template-columns:1fr 2fr}
.split-16-1{grid-template-columns:1.6fr 1fr}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.split-2-1,.split-16-1{grid-template-columns:1fr}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2,.split-1-2{grid-template-columns:1fr}.grid{gap:18px}}

/* Service Card */
.service-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--transition-normal),transform var(--transition-normal),border-color var(--transition-normal)}
.service-card:hover{box-shadow:var(--shadow-md),0 0 0 1px rgba(212,181,121,.35);transform:translateY(-5px);border-color:rgba(212,181,121,.4)}
.service-card-img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--color-stone)}
.service-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.service-card:hover .service-card-img img{transform:scale(1.08)}
.fav-btn{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(10,10,9,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);transition:transform var(--transition-fast),box-shadow var(--transition-fast);color:#fff}
.fav-btn:hover{transform:scale(1.1);box-shadow:0 0 16px rgba(212,181,121,.3)}
.fav-btn.active svg{fill:var(--color-error);stroke:var(--color-error)}
.service-card-body{padding:18px 20px 20px}
.freelancer-mini{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.freelancer-mini img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.freelancer-mini span{font-size:.82rem;color:var(--color-muted)}
.service-title{font-size:.98rem;font-weight:600;margin:0 0 10px;line-height:1.4;color:var(--color-text)}
.service-meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--color-muted);padding-top:12px;border-top:1px solid var(--color-border)}
.rating{display:flex;align-items:center;gap:5px;color:var(--color-text);font-weight:600}
.rating svg{fill:var(--color-gold);stroke:var(--color-gold);filter:drop-shadow(0 0 4px rgba(212,181,121,.5))}
.price-from{font-size:.72rem;color:var(--color-muted);display:block}
.price-val{font-weight:700;color:var(--color-gold-bright)}

/* Freelancer Card */
.pro-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:26px;text-align:center;transition:box-shadow var(--transition-normal),transform var(--transition-normal),border-color var(--transition-normal)}
.pro-card:hover{box-shadow:var(--shadow-md);transform:translateY(-5px);border-color:rgba(212,181,121,.4)}
.pro-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:2px solid rgba(212,181,121,.4);box-shadow:0 0 24px rgba(212,181,121,.15)}
.pro-card h3{font-size:1.05rem}
.pro-title{color:var(--color-muted);font-size:.85rem;margin:4px 0 12px}
.pro-stats{display:flex;justify-content:center;gap:16px;font-size:.82rem;color:var(--color-muted);margin-bottom:16px;flex-wrap:wrap}

/* Cards row generic */
.step-card{padding:30px 0;border-top:1px solid var(--color-border)}
.step-num{font-family:var(--font-serif);font-size:2.2rem;color:var(--color-gold);text-shadow:0 0 30px rgba(212,181,121,.4)}

/* Footer */
.site-footer{background:var(--color-black);color:rgba(255,255,255,.7);padding:90px 0 30px;border-top:1px solid var(--color-border)}
.site-footer .logo{color:var(--color-white)}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-top h4{color:var(--color-white);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.footer-top a{display:block;font-size:.88rem;padding:6px 0;color:rgba(255,255,255,.6);transition:color var(--transition-fast)}
.footer-top a:hover{color:var(--color-gold)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:26px;font-size:.8rem;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:12px}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}.site-footer{padding:60px 0 26px}}

/* Forms */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px;color:var(--color-text)}
.form-help{font-size:.78rem;color:var(--color-muted);margin-top:6px}
.form-control{width:100%;padding:13px 15px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.form-control::placeholder{color:#6b665c}
.form-control:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 3px rgba(212,181,121,.15)}
.form-error{color:var(--color-error);font-size:.8rem;margin-top:6px}
.form-success{color:var(--color-success)}
.auth-page{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#070E0F}
.auth-page-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);opacity:0;transition:transform 1.8s cubic-bezier(.16,1,.3,1),opacity 1.2s ease}
.auth-page.loaded .auth-page-bg{transform:scale(1);opacity:.55}
.auth-page-overlay{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 20% 15%, rgba(18,160,147,.22), transparent 60%),
  radial-gradient(50% 45% at 88% 85%, rgba(212,181,121,.14), transparent 60%),
  linear-gradient(160deg,rgba(5,10,11,.94) 0%,rgba(6,12,13,.88) 45%,rgba(5,10,11,.82) 100%)}
.auth-page::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 75%);
}
.auth-page-glow{position:absolute;width:50vw;height:50vw;max-width:640px;max-height:640px;border-radius:50%;background:radial-gradient(circle,rgba(18,160,147,.2),transparent 70%);top:-10%;left:-10%;pointer-events:none;filter:blur(20px);animation:auth-drift 14s ease-in-out infinite alternate}
.auth-page-glow.secondary{top:auto;left:auto;bottom:-15%;right:-10%;width:38vw;height:38vw;background:radial-gradient(circle,rgba(212,181,121,.16),transparent 70%);animation-delay:2s}
@keyframes auth-drift{from{transform:translate(0,0)}to{transform:translate(24px,-16px)}}
@media (prefers-reduced-motion: reduce){.auth-page-glow{animation:none}}
.auth-card{
  position:relative;z-index:2;max-width:440px;margin:0 auto;
  background:linear-gradient(180deg, rgba(20,30,32,.72), rgba(14,22,24,.68));
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:46px;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(18,160,147,.12), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(18px);animation:auth-card-in .7s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.auth-card::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(18,160,147,.7),rgba(212,181,121,.5),transparent);
}
@keyframes auth-card-in{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.auth-card{animation:none;opacity:1;transform:none}}
.auth-card .eyebrow{color:var(--color-gold-bright);text-shadow:0 0 20px rgba(18,160,147,.4)}
.auth-card h2,.auth-card h1{color:#fff}
.auth-card .form-label{color:rgba(255,255,255,.82)}
.auth-card .form-control{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff}
.auth-card .form-control::placeholder{color:rgba(255,255,255,.32)}
.auth-card .form-control:focus{border-color:var(--color-gold-bright);box-shadow:0 0 0 3px rgba(18,160,147,.18),0 0 24px rgba(18,160,147,.15);background:rgba(255,255,255,.07)}
.auth-card .form-help{color:rgba(255,255,255,.5)}
.auth-card p[style*="color:var(--color-muted)"]{color:rgba(255,255,255,.55)!important}
.auth-card [style*="border-top:1px solid var(--color-border)"]{border-color:rgba(255,255,255,.1)!important}
.auth-card .btn-gold{box-shadow:0 10px 30px rgba(18,160,147,.3),0 0 0 1px rgba(18,160,147,.4)}
.auth-card .btn-gold:hover{box-shadow:0 14px 40px rgba(18,160,147,.4),0 0 0 1px rgba(18,160,147,.6)}
.alert{padding:14px 16px;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:20px}
.alert-error{background:rgba(226,104,95,.1);color:var(--color-error);border:1px solid rgba(226,104,95,.3)}
.alert-success{background:rgba(63,203,140,.1);color:var(--color-success);border:1px solid rgba(63,203,140,.3)}
@media (max-width:560px){.auth-card{padding:30px 22px}.auth-page .container{padding:110px 16px 40px}}

/* Freelancer profile hero banner — full image, dark gradient only, no white wash */
.profile-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--color-border);display:flex;align-items:flex-end}
.profile-hero .container{position:relative;z-index:1}
.profile-hero .rating{color:#fff}
.profile-hero .rating svg{fill:var(--color-gold-bright);stroke:var(--color-gold-bright)}

/* Discovery hero (Find Freelancers / Projects) — full image, dark gradient only, no white wash */
.discover-hero{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden;padding:120px 0 50px}
.discover-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.discover-hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,33,29,.92) 0%,rgba(7,33,29,.6) 42%,rgba(7,33,29,.18) 75%,rgba(7,33,29,.05) 100%)}
.discover-hero .container{position:relative;z-index:1}
.discover-hero-title{font-family:var(--font-ui);font-weight:800;font-size:clamp(2rem,4.4vw,3.1rem);color:#fff;margin:14px 0 14px;letter-spacing:-.01em}
.discover-hero-text{color:rgba(255,255,255,.82);max-width:520px;margin-bottom:28px;font-size:1.02rem;line-height:1.65}
.discover-hero .search-box{background:rgba(255,255,255,.97)}
.discover-hero .search-box input{color:var(--color-charcoal)}
.discover-hero .search-box input::placeholder{color:var(--color-muted)}
@media (max-width:640px){.discover-hero{min-height:42vh;padding:105px 0 40px}}

/* Premium freelancer search card */
.pro-search-card{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;text-align:center;transition:box-shadow var(--transition-normal),transform var(--transition-normal),border-color var(--transition-normal)}
.pro-search-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:rgba(14,128,116,.3)}
.pro-search-card .fav-btn{position:absolute;top:12px;right:12px;z-index:2}
.psc-img{position:relative;display:flex;align-items:center;justify-content:center;padding:28px 20px 6px}
.pro-search-card:hover .psc-img .avatar{transform:scale(1.06)}
.psc-verified{display:inline-flex;align-items:center;gap:3px;background:rgba(14,128,116,.1);color:var(--color-gold);font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:20px;margin-left:6px;vertical-align:middle}
.psc-body{padding:14px 20px 20px}
.psc-name-row{display:flex;align-items:center;justify-content:center}
.psc-name{font-size:1.02rem;font-weight:700;margin:0}
.psc-title{font-size:.82rem;color:var(--color-gold);font-weight:600;margin:3px 0 10px}
.psc-meta{display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--color-muted);margin-bottom:10px;flex-wrap:wrap;gap:10px}
.psc-loc{white-space:nowrap}
.psc-specialty{font-size:.82rem;color:var(--color-muted);line-height:1.5;margin:0 0 12px;min-height:2.4em}
.psc-stats-row{font-size:.76rem;color:var(--color-gold);font-weight:600;margin-bottom:14px}
.psc-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--color-border);gap:10px;flex-wrap:wrap}

/* Project grid — uniform card sizing */
.project-masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.proj-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--transition-normal),transform var(--transition-normal),border-color var(--transition-normal);display:flex;flex-direction:column}
.proj-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:rgba(14,128,116,.3)}
.proj-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-stone)}
.proj-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.proj-card:hover .proj-card-img img{transform:scale(1.06)}
.proj-card-overlay{position:absolute;top:12px;left:12px}
.proj-card-cat{background:rgba(7,33,29,.82);color:#fff;font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:20px;backdrop-filter:blur(4px)}
.proj-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.proj-card-title{font-size:1.02rem;font-weight:700;margin:0 0 8px;line-height:1.35}
.proj-card-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--color-muted);margin-bottom:12px;gap:8px;flex-wrap:wrap}
.proj-card-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
@media (max-width:1024px){.project-masonry{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.project-masonry{grid-template-columns:1fr;gap:18px}}

/* Marketplace layout */
.marketplace-header{padding:150px 0 40px;border-bottom:1px solid var(--color-border);position:relative;overflow:hidden}
.marketplace-header::before{content:'';position:absolute;top:-30%;right:-10%;width:50vw;height:50vw;max-width:700px;max-height:700px;border-radius:50%;background:radial-gradient(circle,rgba(212,181,121,.1),transparent 70%);pointer-events:none}
.marketplace-body{display:flex;gap:36px;padding-top:36px;padding-bottom:100px;align-items:flex-start}
.filters-panel{width:270px;flex-shrink:0;position:sticky;top:110px}
.filter-group{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--color-border)}
.filter-group h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;color:var(--color-muted)}
.filter-option{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:.88rem;cursor:pointer}
.results-panel{flex:1;min-width:0}
.results-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.results-count{color:var(--color-muted);font-size:.9rem}
select.form-control{width:auto}

@media (max-width:1024px){
  .marketplace-header{padding:130px 0 30px}
  .filters-panel{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;background:var(--color-bg-alt);z-index:1500;padding:24px;overflow-y:auto;transform:translateY(100%);transition:transform var(--transition-normal)}
  .filters-panel.open{transform:translateY(0)}
  .marketplace-body{flex-direction:column;padding-top:24px;padding-bottom:60px;align-items:stretch}
}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:600}
.badge-gold{background:rgba(212,181,121,.14);color:var(--color-gold-bright)}
.badge-success{background:rgba(63,203,140,.12);color:var(--color-success)}
.badge-error{background:rgba(226,104,95,.14);color:var(--color-error)}
.badge-warning{background:rgba(224,166,80,.14);color:var(--color-warning)}
.badge-muted{background:var(--color-stone);color:var(--color-gray)}

/* Dashboard shell */
.app-shell{display:flex;min-height:100vh;background:var(--color-bg)}
.app-sidebar{width:260px;flex-shrink:0;background:var(--color-black);color:rgba(255,255,255,.75);padding:26px 18px;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--color-border)}
.app-sidebar .logo{color:#fff;display:block;padding:0 10px 26px;font-size:1.3rem}
.app-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:2px;transition:background var(--transition-fast),color var(--transition-fast)}
.app-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.app-nav a.active{background:rgba(212,181,121,.14);color:var(--color-gold-bright);box-shadow:inset 2px 0 0 var(--color-gold)}
.app-main{flex:1;min-width:0;padding:34px 40px}
.app-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:14px}
.app-topbar h1{font-family:var(--font-serif);font-size:1.9rem;font-weight:500}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px}
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}
.stat-card:hover{border-color:rgba(212,181,121,.35);box-shadow:0 0 24px rgba(212,181,121,.08)}
.stat-card .stat-label{font-size:.76rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em}
.stat-card .stat-value{font-family:var(--font-serif);font-size:2rem;margin-top:8px;color:var(--color-gold-bright)}

.app-sidebar-backdrop{display:none}
@media (max-width:1080px){
  .app-sidebar{position:fixed;left:-280px;z-index:1800;transition:left var(--transition-normal);top:0;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .app-sidebar.open{left:0}
  .app-main{padding:24px 16px}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .app-sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1700;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}
  .app-sidebar-backdrop.show{opacity:1;pointer-events:auto}
}
@media (max-width:480px){
  .stat-cards{grid-template-columns:1fr}
  .app-topbar h1{font-size:1.5rem}
  .panel{padding:18px}
}

.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:26px}
table.data-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
.data-table th{text-align:left;padding:12px 14px;color:var(--color-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border)}
.data-table td{padding:14px;border-bottom:1px solid var(--color-border)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr{transition:background var(--transition-fast)}
.data-table tbody tr:hover{background:rgba(212,181,121,.04)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.empty-state{text-align:center;padding:70px 20px;color:var(--color-muted)}
.empty-state h3{color:var(--color-text);margin-bottom:10px;font-family:var(--font-serif);font-size:1.4rem}

.skeleton{background:linear-gradient(90deg,var(--color-surface-2) 25%,#252320 37%,var(--color-surface-2) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:var(--radius-sm)}
@keyframes skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.85rem}
.pagination a:hover{border-color:var(--color-gold);color:var(--color-gold-bright);box-shadow:0 0 12px rgba(212,181,121,.25)}
.pagination .active{background:var(--color-gold);color:#1a1408;border-color:var(--color-gold);box-shadow:var(--glow-gold)}

/* Utility */
.text-muted{color:var(--color-muted)}
.glow-card{box-shadow:var(--glow-gold)}
@keyframes pulse-glow{
  0%,100%{box-shadow:var(--glow-gold)}
  50%{box-shadow:var(--glow-gold-strong)}
}
.pulse-glow{animation:pulse-glow 2.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.pulse-glow{animation:none}}

/* Animated gradient underline for active step numbers */
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-anim{animation:float-y 4s ease-in-out infinite}
::selection{background:rgba(212,181,121,.35);color:#fff}
*{scrollbar-color:var(--color-border) transparent}

/* Responsive base clamps for common inline-styled headings */
h1{font-size:clamp(1.9rem,4vw,2.6rem)}

@media (max-width:640px){
  .btn{padding:12px 22px;font-size:.86rem}
  .service-card-body{padding:14px 16px 16px}
  .grid{gap:16px}
}

@media (max-width:900px){[data-responsive-320]{grid-template-columns:1fr!important}}

/* Sticky sidebars must release on smaller screens */
@media (max-width:1024px){
  [style*="position:sticky"]{position:relative!important;top:auto!important}
}

/* Generic responsive image aspect on hero/profile blocks that used inline aspect-ratio */
@media (max-width:640px){
  .page-hero{min-height:44vh}
  .page-hero .container{padding-top:100px}
}

/* Search box + hero content on small screens */
@media (max-width:480px){
  .search-box{flex-direction:column}
  .search-box input{width:100%}
  .search-box .btn{width:100%}
  .hero-content{padding-top:60px}
  .hero{min-height:100svh}
}

/* Dashboard topbar + tables on narrow phones */
@media (max-width:420px){
  .app-topbar{gap:10px}
  .data-table{font-size:.82rem}
  .data-table td,.data-table th{padding:10px 8px}
}

/* Booking wizard + service edit forms: ensure full width controls */
@media (max-width:640px){
  .auth-card,.panel{width:100%}
  input[type=file]{font-size:.8rem}
}

/* Prevent any fixed/large inline max-widths from overflowing small screens */
@media (max-width:480px){
  [style*="max-width:640px"]{max-width:100%!important}
  [style*="max-width:700px"]{max-width:100%!important}
  [style*="max-width:820px"]{max-width:100%!important}
}

/* ══════════════════════════════════════════════════════════════════
   GLASS DESIGN SYSTEM — scoped to .app-shell (dashboards / admin)
   Public marketing pages keep the light teal theme untouched.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --glass-bg: rgba(23,32,34,.62);
  --glass-bg-soft: rgba(23,32,34,.4);
  --glass-border: rgba(255,255,255,.09);
  --glass-border-hover: rgba(18,160,147,.45);
  --glass-blur: 20px;
  --glass-glow: 0 0 0 1px rgba(18,160,147,.12), 0 20px 50px rgba(0,0,0,.35);
  --glass-glow-strong: 0 0 0 1px rgba(18,160,147,.35), 0 0 32px rgba(18,160,147,.22), 0 24px 60px rgba(0,0,0,.45);
  --app-bg: #0A1213;
  --app-text: #EAF2F1;
  --app-muted: #8FA3A0;
  --app-border: rgba(255,255,255,.08);
}

.app-shell{
  /* Re-scope shared tokens so every inline style="color:var(--color-muted)" etc.
     across existing dashboard pages automatically becomes dark-glass-appropriate
     without touching those files. */
  --color-text:#EAF2F1;
  --color-muted:#8FA3A0;
  --color-charcoal:#FFFFFF;
  --color-border:rgba(255,255,255,.08);
  --color-surface:rgba(23,32,34,.62);
  --color-surface-2:rgba(255,255,255,.05);
  --color-stone:rgba(255,255,255,.07);
  --color-bg:#0A1213;
  --color-bg-alt:#0A1213;

  background:
    radial-gradient(760px 480px at 8% -6%, rgba(18,160,147,.16), transparent 60%),
    radial-gradient(620px 480px at 96% 8%, rgba(212,181,121,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(18,160,147,.08), transparent 60%),
    var(--app-bg);
  color:var(--app-text);
  position:relative;
}
.app-shell::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%);
}
.app-sidebar{
  background:rgba(9,15,16,.72);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-right:1px solid var(--app-border);
  z-index:2;
}
.app-sidebar .logo{text-shadow:0 0 20px rgba(18,160,147,.35)}
.app-nav a{color:rgba(234,242,241,.68)}
.app-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.app-nav a.active{background:linear-gradient(90deg, rgba(18,160,147,.18), rgba(18,160,147,.04));color:var(--color-gold-bright);box-shadow:inset 3px 0 0 var(--color-gold-bright), 0 0 20px rgba(18,160,147,.12)}
.app-main{position:relative;z-index:1}
.app-topbar h1{color:#fff;text-shadow:0 0 30px rgba(18,160,147,.15)}
.app-topbar span[style*="color:var(--color-muted)"]{color:var(--app-muted)!important}

.app-shell .panel,
.app-shell .stat-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-glow);
  border-radius:var(--radius-md);
  transition:border-color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-normal);
}
.app-shell .stat-card{position:relative;overflow:hidden}
.app-shell .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-gold-bright),transparent);opacity:.6}
.app-shell .stat-card:hover{border-color:var(--glass-border-hover);box-shadow:var(--glass-glow-strong);transform:translateY(-3px)}
.app-shell .stat-card .stat-label{color:var(--app-muted)}
.app-shell .stat-card .stat-value{color:#fff;text-shadow:0 0 24px rgba(18,160,147,.3)}
.app-shell .panel:hover{border-color:rgba(255,255,255,.14)}
.app-shell .panel h3,.app-shell .panel h4{color:#fff}

.app-shell table.data-table{color:var(--app-text)}
.app-shell .data-table th{color:var(--app-muted);border-bottom:1px solid var(--app-border)}
.app-shell .data-table td{border-bottom:1px solid var(--app-border)}
.app-shell .data-table tbody tr:hover{background:rgba(18,160,147,.06)}

.app-shell .form-control{background:rgba(255,255,255,.04);border:1px solid var(--app-border);color:#fff}
.app-shell .form-control::placeholder{color:rgba(234,242,241,.35)}
.app-shell .form-control:focus{border-color:var(--color-gold-bright);box-shadow:0 0 0 3px rgba(18,160,147,.16),0 0 20px rgba(18,160,147,.12)}
.app-shell .form-label{color:rgba(234,242,241,.85)}
.app-shell .form-help{color:var(--app-muted)}
.app-shell select.form-control{color:#fff}
.app-shell select.form-control option{background:#0F1A1C;color:#fff}

.app-shell .badge-gold{background:rgba(18,160,147,.16);color:var(--color-gold-bright)}
.app-shell .badge-success{background:rgba(63,203,140,.16);color:#4ADE80}
.app-shell .badge-error{background:rgba(226,104,95,.18);color:#F87171}
.app-shell .badge-warning{background:rgba(224,166,80,.18);color:#F0B94E}
.app-shell .badge-muted{background:rgba(255,255,255,.08);color:var(--app-muted)}

.app-shell .empty-state{color:var(--app-muted)}
.app-shell .empty-state h3{color:#fff}
.app-shell .btn-outline{border-color:var(--app-border);color:var(--app-text)}
.app-shell .btn-outline:hover{background:rgba(18,160,147,.1);border-color:var(--color-gold-bright);color:var(--color-gold-bright)}
.app-shell a:not(.btn):not(.nav-link):not(.app-nav a){color:var(--color-gold-bright)}
.app-shell hr,.app-shell [style*="border-top:1px solid var(--color-border)"],.app-shell [style*="border-bottom:1px solid var(--color-border)"]{border-color:var(--app-border)!important}

/* Reveal animation for glass panels entering view */
.app-shell .panel,.app-shell .stat-card{animation:glass-in .5s cubic-bezier(.16,1,.3,1) both}
@keyframes glass-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.app-shell .panel,.app-shell .stat-card{animation:none}}

@media (max-width:1080px){
  .app-sidebar{background:rgba(9,15,16,.92)}
}

/* Onboarding banner (freelancer application) */
.onboarding-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:200px;display:flex;align-items:center;margin-bottom:24px;border:1px solid var(--glass-border)}
.onboarding-banner-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.onboarding-banner-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,12,13,.94) 0%,rgba(6,12,13,.7) 50%,rgba(6,12,13,.25) 100%)}
.onboarding-banner-content{position:relative;z-index:1;padding:32px 36px;max-width:520px}
.onboarding-banner-content h2{color:#fff;font-size:1.5rem;font-weight:800;margin:10px 0 8px}
.onboarding-banner-content p{color:rgba(255,255,255,.72);font-size:.9rem;margin:0}
@media (max-width:640px){.onboarding-banner-content{padding:24px 20px}.onboarding-banner-content h2{font-size:1.2rem}}