/* Suiza Clara — premium visual polish.
   CSS-only: no runtime DOM mutation, no product logic. */

:root{
  --sc-ease:cubic-bezier(.2,.8,.2,1);
  --sc-shadow-soft:0 12px 34px rgba(24,22,18,.08);
  --sc-shadow-lift:0 24px 60px rgba(24,22,18,.14);
  --sc-ring:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent);
}

html[data-theme="dark"]{
  --sc-shadow-soft:0 12px 34px rgba(0,0,0,.24);
  --sc-shadow-lift:0 24px 60px rgba(0,0,0,.38);
  --sc-ring:0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent);
}

/* Header / navigation */
.site-header{
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 8px 28px rgba(25,22,18,.035);
}
html[data-theme="dark"] .site-header{
  box-shadow:0 1px 0 rgba(255,255,255,.025),0 10px 32px rgba(0,0,0,.22);
}
.nav-links>a,.more-toggle,.nav-search,.theme-toggle,.menu-toggle,.btn{
  transition:transform .18s var(--sc-ease),box-shadow .18s var(--sc-ease),background-color .18s var(--sc-ease),border-color .18s var(--sc-ease),color .18s var(--sc-ease),opacity .18s var(--sc-ease);
}
.nav-links>a{position:relative}
.nav-links>a:after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-7px;
  height:2px;border-radius:99px;background:var(--red);
  transition:right .22s var(--sc-ease);
}
@media(hover:hover){
  .nav-links>a:hover:after{right:0}
  .nav-search:hover,.theme-toggle:hover,.menu-toggle:hover,.more-toggle:hover{transform:translateY(-1px);box-shadow:var(--sc-shadow-soft)}
}

/* Buttons */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-140%);
  transition:transform .55s var(--sc-ease);
  pointer-events:none;z-index:-1;
}
@media(hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:var(--sc-shadow-soft)}
  .btn:hover:after{transform:translateX(140%)}
  .btn-primary:hover{box-shadow:0 16px 34px color-mix(in srgb,var(--red) 28%,transparent)}
}
.btn:focus-visible,.nav-search:focus-visible,.theme-toggle:focus-visible,.menu-toggle:focus-visible,.more-toggle:focus-visible,
.input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--sc-ring);border-color:color-mix(in srgb,var(--red) 52%,var(--line));
}

/* Hero */
.hero-final{isolation:isolate}
.hero-final:after{
  content:"";position:absolute;inset:auto 8% 4% auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--red) 10%,transparent),transparent 66%);
  filter:blur(8px);pointer-events:none;z-index:-1;
}
.final-copy .display{filter:drop-shadow(0 8px 24px rgba(20,18,16,.035))}
.hero-command{
  box-shadow:0 34px 90px rgba(18,16,14,.2),inset 0 1px 0 rgba(255,255,255,.055);
  transition:transform .28s var(--sc-ease),box-shadow .28s var(--sc-ease);
}
@media(hover:hover) and (min-width:761px){
  .hero-command:hover{transform:translateY(-5px) rotate(.15deg);box-shadow:0 42px 100px rgba(18,16,14,.25),inset 0 1px 0 rgba(255,255,255,.07)}
}
.command-output>div{transition:background-color .18s ease,padding-left .18s ease}
@media(hover:hover){.command-output>div:hover{background:rgba(255,255,255,.035);padding-left:5px}}

/* Numeric strips */
.ticker b,.kpi strong,.salary-big-output strong,.score-badge strong,.plan-orb strong,.fact-card .big,
.market-kpis strong,.salary-triplet strong,.foreign-stats strong,.pyramid-value b{
  font-variant-numeric:tabular-nums;
}
.ticker-grid>div{transition:background-color .18s ease}
@media(hover:hover){.ticker-grid>div:hover{background:color-mix(in srgb,var(--red) 3.5%,transparent)}}

/* Core surfaces */
.card,.wow-card,.market-card,.profession-market-card,.canton-card,.profession-card,.method-card,.guide-card,.language-card,.job-card,
.salary-control,.salary-context,.atlas-controls,.atlas-ranking,.decision-results,.decision-form,.offer-form,.offer-results,.compare-pro-card,
.rumor-card,.community-method,.plan-profile,.plan-canton,.road-phase,.scenario-card,.scenario-insight,.prof-benchmark,.prof-top-canton{
  transition:transform .22s var(--sc-ease),box-shadow .22s var(--sc-ease),border-color .22s var(--sc-ease),background-color .22s var(--sc-ease);
}
@media(hover:hover){
  .card-hover:hover,.wow-card:hover,.market-card:hover,.profession-market-card:hover,.canton-card:hover,.profession-card:hover,.method-card:hover,.guide-card:hover,.language-card:hover,.job-card:hover,
  .plan-canton:hover,.road-phase:hover,.scenario-card:hover,.compare-pro-card:hover{
    transform:translateY(-4px);box-shadow:var(--sc-shadow-lift);border-color:color-mix(in srgb,var(--red) 20%,var(--line));
  }
}

/* Feature cards: stronger editorial hierarchy without changing layout */
.wow-card{position:relative;overflow:hidden}
.wow-card:before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--red),transparent 72%);opacity:.72;
}
.wow-card.red:before{background:rgba(255,255,255,.7)}
.wow-card.dark:before{background:linear-gradient(90deg,var(--red),transparent 72%)}
.market-card,.profession-market-card{position:relative;overflow:hidden}
.market-card:before,.profession-market-card:before{
  content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--red),transparent 68%);opacity:.55;
}
.market-card-foot{transition:color .18s ease,border-color .18s ease}
@media(hover:hover){.market-card:hover .market-card-foot,.profession-market-card:hover .market-card-foot{color:var(--red)!important}}

/* Inputs and controls */
.input,input,select,textarea,.searchbox input{
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.metric-tabs button,.chip,.pill{
  transition:transform .16s var(--sc-ease),background-color .16s ease,border-color .16s ease,color .16s ease;
}
@media(hover:hover){.metric-tabs button:hover,.chip:hover{transform:translateY(-1px)}}

/* Tables */
.data-table tbody tr,.salary-table tbody tr{transition:background-color .16s ease}
.data-table td,.salary-table td{transition:color .16s ease}

/* Decision engine */
.de-rank{position:relative;transition:background-color .16s ease,transform .16s var(--sc-ease)}
.de-rank:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:99px;background:var(--red);transform:scaleY(0);transition:transform .18s var(--sc-ease)}
@media(hover:hover){.de-rank:hover{transform:translateX(3px)}.de-rank:hover:before{transform:scaleY(1)}}
.score-badge,.plan-orb,.contract-score-orb{box-shadow:0 14px 32px color-mix(in srgb,var(--red) 18%,transparent)}

/* Salary visualisation */
.salary-visual{box-shadow:var(--sc-shadow-soft);border:1px solid color-mix(in srgb,var(--line) 76%,transparent)}
.pyramid-bar{box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.pyramid-bar i{transition:width .55s var(--sc-ease),filter .18s ease}
@media(hover:hover){.pyramid-row:hover .pyramid-bar i{filter:brightness(1.08)}}
.pyramid-row.median .pyramid-value b{text-shadow:0 8px 26px color-mix(in srgb,var(--red) 18%,transparent)}

/* Atlas */
.atlas-stage{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 24px 60px rgba(0,0,0,.16);
}
.map-pin{transition:transform .2s var(--sc-ease),box-shadow .2s var(--sc-ease),filter .18s ease}
@media(hover:hover){.map-pin:hover{filter:brightness(1.07);box-shadow:0 0 0 8px rgba(255,255,255,.11),0 14px 28px rgba(0,0,0,.28)}}
.map-tooltip{border:1px solid rgba(17,17,15,.08);backdrop-filter:blur(8px)}

/* Search / overlays */
.search-overlay{backdrop-filter:blur(5px)}
.search-modal{box-shadow:0 34px 100px rgba(0,0,0,.28)}
.search-result{transition:background-color .16s ease,transform .16s var(--sc-ease)}
@media(hover:hover){.search-result:hover{transform:translateX(2px)}}

/* Footer */
.footer-col a{transition:color .16s ease,transform .16s var(--sc-ease)}
@media(hover:hover){.footer-col a:hover{color:var(--red)!important;transform:translateX(2px)}}

/* Dark mode: keep depth without turning everything glossy */
html[data-theme="dark"] .salary-visual,
html[data-theme="dark"] .salary-control,
html[data-theme="dark"] .salary-context,
html[data-theme="dark"] .atlas-controls,
html[data-theme="dark"] .atlas-ranking,
html[data-theme="dark"] .decision-results,
html[data-theme="dark"] .offer-form,
html[data-theme="dark"] .offer-results{
  box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .hero-command{box-shadow:0 36px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.045)}

/* Mobile: preserve polish, remove unnecessary motion/depth. */
@media(max-width:760px){
  .site-header{box-shadow:0 1px 0 rgba(0,0,0,.06)}
  .hero-command{box-shadow:0 20px 48px rgba(18,16,14,.16)}
  .card,.wow-card,.market-card,.profession-market-card,.canton-card,.profession-card{box-shadow:none}
  .salary-visual{box-shadow:0 10px 28px rgba(20,18,16,.08)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}