.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg);position:relative;box-sizing:border-box}.section{padding:var(--space-3xl) 0;scroll-margin-top:var(--header-height);margin-bottom:var(--space-2xl)}.grid{display:grid;gap:var(--space-lg)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.flex{display:flex;gap:var(--space-md)}.flex-center{align-items:center;justify-content:center}.flex-between{align-items:center;justify-content:space-between}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:1000;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}.header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.5}.header-content{height:100%;display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.5rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em;transition:transform var(--transition-fast)}.logo:hover{transform:scale(1.05)}.mobile-menu-toggle{display:none;background:0 0;border:none;cursor:pointer;padding:var(--space-sm);z-index:1001;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:var(--radius-md);transition:background var(--transition-fast)}.mobile-menu-toggle:hover{background:var(--bg-subtle)}.hamburger-line{display:block;width:24px;height:2px;background:var(--text-primary);margin:5px 0;transition:all var(--transition-spring);border-radius:1px}.mobile-menu-toggle.is-active .hamburger-line:first-child{transform:rotate(45deg) translate(5px,5px)}.mobile-menu-toggle.is-active .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}.mobile-menu-toggle.is-active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.nav{display:flex;gap:var(--space-xs);list-style:none;margin:0;padding:0;align-items:center}.nav a{color:var(--text-secondary);font-size:.8125rem;font-weight:500;padding:6px var(--space-sm);border-radius:var(--radius-full);transition:all var(--transition-fast);position:relative;min-height:36px;min-width:unset;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.nav a::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%) scaleX(0);width:60%;height:2px;background:var(--accent-gradient);border-radius:var(--radius-full);transition:transform var(--transition-spring)}.nav a.active::after,.nav a:hover::after{transform:translateX(-50%) scaleX(1)}.nav a.active,.nav a:hover{color:var(--text-primary);background:var(--bg-subtle)}.nav a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.hero {
  background: var(--gradient-hero);
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}.hero::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 30% 20%,rgba(124,58,237,.1) 0,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(99,102,241,.08) 0,transparent 50%);pointer-events:none;z-index:-1}.hero-title{font-size:clamp(2.5rem, 6vw, 4rem);font-family:var(--font-display);margin-bottom:var(--space-lg);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInDown .8s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}.hero-description{font-size:clamp(1rem, 2vw, 1.25rem);max-width:700px;margin:0 auto var(--space-2xl);color:var(--text-secondary);line-height:1.7;animation:fadeInUp .8s .2s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}.hero .btn{animation:fadeInUp .8s .4s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-2xl)}.tool-card {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  transition: transform var(--transition-spring), box-shadow var(--transition-base), border-color var(--transition-base);
  will-change: transform;
}.tool-card-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-md);transition:all var(--transition-base);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.tool-card:hover .tool-card-icon{border-color:var(--primary-light);box-shadow:var(--shadow-card-hover);transform:scale(1.05)}.tool-card:hover .tool-card-icon{transform:scale(1.05)}.tool-card:hover .tool-card-icon svg{stroke:var(--primary-light)}.tool-card-title{font-size:1.25rem;margin-bottom:var(--space-sm);color:var(--text-primary)}.tool-card-desc{font-size:.9375rem;margin-bottom:var(--space-lg);color:var(--text-secondary);line-height:1.6;flex-grow:1}.tool-card .btn{margin-top:auto;width:100%;transition:all var(--transition-spring)}.footer{border-top:1px solid var(--border-subtle);padding:var(--space-2xl) 0;margin-top:var(--space-xl);text-align:center;position:relative}.footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:1px;background:var(--accent-gradient);opacity:.5}.footer-links{display:flex;justify-content:center;gap:var(--space-xl);flex-wrap:wrap;margin-bottom:var(--space-lg)}.footer-links a{color:var(--text-secondary);font-size:.9375rem;transition:color var(--transition-fast);position:relative}.footer-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--primary);transition:width var(--transition-base)}.footer-links a:hover::after{width:100%}.footer-links a:hover{color:var(--text-primary)}.footer-copyright{color:var(--text-muted);font-size:.875rem}.h2-flush{margin-top:0}.h2-centered{text-align:center}.section-alt-bg{background:var(--bg-subtle)}.section-gradient{background:linear-gradient(180deg,transparent 0,rgba(99,102,241,.03) 100%)}.flex-wrap{flex-wrap:wrap}.gap-md{gap:var(--space-md)}.mb-md{margin-bottom:var(--space-md)}.max-w-900{max-width:56.25rem}.mx-auto{margin-left:auto;margin-right:auto}.text-center{text-align:center}.logo-img{height:32px;width:auto;vertical-align:middle;margin-right:var(--space-sm)}.hero-cta-group{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-lg);flex-wrap:wrap}.hero-notion {
  background: var(--gradient-hero);
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
  text-align: center;
}.hero-notion .hero-title{font-size:clamp(2.25rem, 5.5vw, 4rem);font-weight:800;color:var(--text-primary);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:var(--space-xl) auto var(--space-md);max-width:800px;transition:opacity .2s ease,transform .2s ease}.hero-notion .hero-description{font-size:clamp(1rem, 2vw, 1.2rem);color:var(--text-secondary);max-width:620px;margin:0 auto var(--space-xl);line-height:1.7;transition:opacity .2s ease}.persona-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: 18px;
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  box-shadow: 0 4px 24px rgba(14,165,233,.1), 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  justify-content: center;
}.persona-bar-label{font-size: var(--text-sm);color:var(--text-muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-right:var(--space-6)}.persona-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:var(--space-10) var(--space-22);border-radius:13px;border:1.5px solid transparent;background:0 0;font-size:.875rem;font-weight:600;color:var(--text-secondary);cursor:pointer;font-family:var(--font-primary);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;transition:color .22s ease,background .22s ease,border-color .22s ease,transform .28s cubic-bezier(.34, 1.56, .64, 1),box-shadow .22s ease}.persona-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .55s ease}.persona-btn:hover::before{transform:translateX(120%)}.persona-btn::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:60%;height:2px;border-radius:2px;background:currentColor;opacity:.4;transition:transform .22s ease}.persona-btn:hover::after{transform:translateX(-50%) scaleX(1)}.persona-btn:hover{background:var(--bg-subtle);border-color:var(--border-subtle);color:var(--text-primary);transform:translateY(-2px)}.persona-btn.active{color:#fff;border-color:transparent;transform:translateY(-3px)}.persona-btn.active::after{display:none}.persona-btn[data-persona=freelancer].active{background:linear-gradient(135deg,var(--persona-remote-light) 0,var(--primary) 50%,var(--persona-remote-dark) 100%);box-shadow:0 8px 24px rgba(14,165,233,.4),0 2px 8px rgba(14,165,233,.25)}.persona-btn[data-persona=jobseeker].active{background:linear-gradient(135deg,var(--persona-jobseeker-light) 0,var(--persona-jobseeker) 50%,var(--persona-jobseeker-dark) 100%);box-shadow:0 8px 24px rgba(139,92,246,.4),0 2px 8px rgba(139,92,246,.25)}.persona-btn[data-persona=career].active{background:linear-gradient(135deg,var(--persona-career-light) 0,var(--persona-career) 50%,var(--persona-career-dark) 100%);box-shadow:0 8px 24px rgba(16,185,129,.4),0 2px 8px rgba(16,185,129,.25)}.persona-btn[data-persona=relocate].active{background:linear-gradient(135deg,var(--persona-relocate-light) 0,var(--persona-relocate) 50%,var(--persona-relocate-dark) 100%);box-shadow:0 8px 24px rgba(245,158,11,.4),0 2px 8px rgba(245,158,11,.25)}@keyframes persona-pulse{0%{box-shadow:0 0 0 0 rgba(14,165,233,.4)}70%{box-shadow:0 0 0 12px rgba(14,165,233,0)}100%{box-shadow:0 0 0 0 rgba(14,165,233,0)}}.persona-btn.active.just-activated{animation:persona-pulse .5s ease forwards}.persona-btn-icon{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;transition:transform .3s cubic-bezier(.34, 1.56, .64, 1)}.persona-btn.active .persona-btn-icon,.persona-btn:hover .persona-btn-icon{transform:scale(1.15) rotate(-5deg)}.hero-trust-bar{display:flex;justify-content:center;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-xl);font-size: var(--text-sm);color:var(--text-muted)}.trust-item{color:var(--text-secondary);font-weight:500}.trust-divider{color:var(--border-card)}.content-with-sidebar{grid-template-columns:1fr}@media (max-width:768px){.persona-bar{gap:var(--space-xs);padding:var(--space-sm)}.persona-btn{padding:10px 16px;font-size:.875rem;min-height:44px}.hero-trust-bar{gap:var(--space-xs)}.trust-divider{display:none}}@media (max-width:480px){.persona-bar{border-radius:var(--radius-lg)}}

/* Prevent horizontal overflow at 375px viewport */
@media (max-width: 375px) {
  canvas, img, pre, code, .chart-canvas, .ad-inner, .donut-legend {
    max-width: 100%;
    height: auto;
  }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .calculator-grid {
    grid-template-columns: 1fr;
  }

  .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    word-wrap: break-word;
    hyphens: auto;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .persona-bar {
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
  }
  .persona-bar-label {
    font-size: var(--text-sm);
    padding-right: 4px;
    white-space: normal;
  }
  .persona-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    min-height: 44px;
  }
  .persona-btn-icon {
    width: 14px;
    height: 14px;
  }
}

/* Ensure calculator section has enough spacing below */
#calculator {
  margin-bottom: var(--space-2xl);
}

body { padding-top: var(--header-height); }

@media (min-width: 768px) {
  body {
    padding-top: calc(var(--header-height) + var(--space-xl));
  }
}
.persona-bar { max-width: 100%; }

@media (max-width:768px){.tool-card{padding:var(--space-lg);}}
/* Safe area for iPhone home bar */
footer{padding-bottom:calc(var(--space-2xl) + env(safe-area-inset-bottom));}