:root{
  --paper:#FEFDFB;
  --plum:#2E1B3F;
  --ink:#4B2E63;
  --ink-soft:#7A6090;
  --hair:rgba(75,46,99,.14);
  --orange:#FFA24E;
  --coral:#F7675F;
  --rose:#F0506B;
  --lavender:#CCB0E1;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --shell:76rem;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:5rem;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,1.05vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

h1,h2,h3{font-family:Nunito,"Be Vietnam Pro",system-ui,sans-serif;margin:0;}

a{color:inherit;}

/* ---------- перемикач мов ---------- */
/* селектори з html[lang] навмисно специфічніші за правила виду .fact > span,
   інакше вʼєтнамський рядок пробивається крізь приховування */
html[lang="en"] .vi{display:none;}
html[lang="vi"] .en{display:none;}

/* ---------- шапка ---------- */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(254,253,251,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  padding-top:env(safe-area-inset-top,0px);
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(.5rem,3vw,1rem);
  height:4.25rem;
}

.mark{
  font-family:Nunito,system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(1.05rem,4.5vw,1.2rem);
  letter-spacing:-.02em;
  text-decoration:none;
}
.mark .mile{
  background-image:linear-gradient(95deg,var(--orange),var(--coral) 60%,var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mark small{
  display:block;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.3em;
  color:var(--ink-soft);
  margin-top:-.1rem;
}

.lang{
  display:inline-flex;
  padding:.2rem;
  border:1px solid var(--hair);
  border-radius:999px;
  background:#fff;
}
.lang button{
  appearance:none;
  border:0;
  background:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:clamp(.3rem,1.2vw,.45rem);
  font:600 .8rem/1 "Be Vietnam Pro",system-ui,sans-serif;
  letter-spacing:.06em;
  color:var(--ink-soft);
  padding:.45rem clamp(.5rem,2.2vw,.8rem);
  border-radius:999px;
  transition:color .15s ease,background-color .15s ease;
}
.lang button svg{
  width:1.05rem;
  height:.7rem;
  border-radius:2px;
  display:block;
  box-shadow:0 0 0 1px rgba(75,46,99,.18);
}
.lang button[aria-pressed="false"] svg{opacity:.55;}
.lang button[aria-pressed="true"]{
  background:linear-gradient(95deg,var(--orange),var(--coral));
  color:#fff;
}
.lang button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ---------- навігація в шапці ---------- */
.tools{display:flex;align-items:center;gap:clamp(.5rem,2.5vw,1.5rem);}
.nav{
  font-weight:600;
  font-size:clamp(.8rem,2.6vw,.9rem);
  text-decoration:none;
  padding:.35rem .1rem;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav:hover,.nav[aria-current="page"]{border-bottom-color:var(--coral);}
.mark:focus-visible,.nav:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}

/* ---------- герой ---------- */
.hero{
  padding-block:clamp(3.5rem,11vh,7rem) clamp(3rem,8vh,5.5rem);
  text-align:center;
  animation:arrive .9s cubic-bezier(.16,.9,.3,1) both;
}
@keyframes arrive{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.lockup{position:relative;display:inline-block;}

.wordmark{
  font-weight:900;
  font-size:clamp(2.75rem,10.5vw,6.25rem);
  line-height:1;
  letter-spacing:-.035em;
}
.wordmark .mile{
  background-image:linear-gradient(95deg,var(--orange) 0%,var(--coral) 55%,var(--rose) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--coral);
}

.star{
  position:absolute;
  top:-.5em;
  right:-.45em;
  width:clamp(1.6rem,4.2vw,2.6rem);
  transform-origin:60% 60%;
  animation:pop .7s cubic-bezier(.2,1.5,.4,1) .5s both;
}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-25deg);}to{opacity:1;transform:none;}}

.sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9em;
  margin:.5rem 0 0;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(1.05rem,3.4vw,1.85rem);
  letter-spacing:.22em;
  text-indent:.22em;
}
.sub::before,.sub::after{
  content:"";height:3px;border-radius:2px;
  width:clamp(1.25rem,5vw,3rem);
  background:linear-gradient(90deg,var(--rose),var(--orange));
}
.sub::after{background:linear-gradient(90deg,var(--orange),var(--rose));}

.slogan{
  margin:1.1rem 0 0;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(.88rem,2.3vw,1.1rem);
  letter-spacing:.16em;
  text-indent:.16em;
  color:var(--ink-soft);
}

.hero p.pitch{
  margin:clamp(2rem,5vh,2.75rem) auto 0;
  max-width:34ch;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(1.1rem,2.6vw,1.45rem);
  line-height:1.45;
}

.cta{
  margin-top:2rem;
  display:inline-flex;
  align-items:center;
  padding:.9em 1.9em;
  border-radius:999px;
  background:linear-gradient(95deg,var(--orange),var(--coral));
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(247,103,95,.95);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(247,103,95,1);}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px;}

/* ---------- секції ---------- */
section{padding-block:clamp(3rem,8vh,5.5rem);}

.head{
  font-weight:800;
  font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:-.02em;
  line-height:1.15;
  max-width:24ch;
}
.head + p{margin-top:.85rem;max-width:52ch;color:var(--ink-soft);}

/* панелі у формі телефона: сама форма і є носієм теми */
.panels{
  margin-top:clamp(2rem,5vh,3rem);
  display:grid;
  gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:1fr; /* до 52rem одна колонка, далі рівно три: стану 2+1 не існує */
}

.panel{
  display:flex;
  flex-direction:column;
  padding:clamp(1.25rem,2.2vw,1.6rem);
  border:1px solid var(--hair);
  border-radius:1.75rem;
  background:linear-gradient(180deg,rgba(255,162,78,.12),rgba(254,253,251,0) 70%);
}
.panel:nth-child(2){background:linear-gradient(180deg,rgba(204,176,225,.26),rgba(254,253,251,0) 70%);}
.panel:nth-child(3){background:linear-gradient(180deg,rgba(247,103,95,.16),rgba(254,253,251,0) 70%);}

.panel .art{
  display:block;
  width:100%;
  max-width:12rem;
  height:auto;
  margin:0 auto clamp(1rem,2vw,1.4rem);
}

.panel h3{
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.01em;
  text-align:center;
}

@media (min-width:52rem){
  .panels{grid-template-columns:repeat(3,1fr);}
}

/* факти */
.facts{
  margin-top:clamp(2rem,5vh,3rem);
  display:grid;
  gap:1.75rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(2,1fr); /* 2x2 на вузьких, 4 в ряд від 52rem */
  border-top:1px solid var(--hair);
  padding-top:clamp(1.75rem,4vh,2.5rem);
}
/* має йти після базового .facts, інакше 2 колонки перекривають 4 */
@media (min-width:52rem){
  .facts{grid-template-columns:repeat(4,1fr);}
}
.fact b{
  display:block;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(1.5rem,3.4vw,2rem);
  letter-spacing:-.02em;
  line-height:1.1;
}
/* лише підпис під значенням; мовні span усередині <b> мають лишатися великими */
.fact > span{display:block;margin-top:.3rem;font-size:.9rem;color:var(--ink-soft);}

.about p{max-width:56ch;margin:.9rem 0 0;}

/* на головній розділи по центру, як герой і блок контактів */
#work .head,#studio .head{margin-inline:auto;text-align:center;}
#studio p{margin-inline:auto;text-align:center;}
#studio .fact{text-align:center;}

/* ---------- контакт ---------- */
.contact{
  background:var(--plum);
  color:var(--paper);
  border-radius:clamp(1.5rem,4vw,2.5rem);
  margin-block:clamp(1rem,4vh,2rem);
  padding:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,5vw,4rem);
  text-align:center;
}
.contact .head{margin-inline:auto;}
.contact .head + p{color:rgba(254,253,251,.72);margin-inline:auto;}

.contact .cta{margin-top:1.9rem;box-shadow:0 10px 26px -12px rgba(255,162,78,.8);}
.contact .cta:focus-visible{outline-color:var(--orange);}

/* дві кнопки поруч: пошта для партнерів і вакансії; на вузьких переносяться одна під одну */
.actions{
  margin-top:1.9rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}
.contact .actions .cta{margin-top:0;}
.contact .cta.ghost{
  background:none;
  box-shadow:none;
  border:2px solid rgba(254,253,251,.45);
  padding:calc(.9em - 2px) calc(1.9em - 2px);
  color:var(--paper);
}
.contact .cta.ghost:hover{box-shadow:none;border-color:var(--orange);}

/* ---------- підвал ---------- */
footer{
  border-top:1px solid var(--hair);
  padding-block:2rem calc(2rem + env(safe-area-inset-bottom,0px));
  font-size:.82rem;
  color:var(--ink-soft);
}
.foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem 2rem;
}

/* ---------- вакансії ---------- */
.page{padding-block:clamp(3.5rem,10vh,6rem) clamp(1rem,3vh,2rem);}
.page .head{font-size:clamp(2rem,6vw,3.4rem);font-weight:900;}
.page .cta{margin-top:1.75rem;}

.roles{padding-top:clamp(1rem,3vh,2rem);}
.roles .count{
  margin:.85rem 0 0;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:800;
  font-size:1.05rem;
  color:var(--ink-soft);
}
.roles .count b{color:var(--ink);font-weight:900;}

/* рядок вакансії: на вузьких назва і кнопка поруч, під назвою відділ і місто;
   від 52rem рівно чотири колонки, як таблиця */
.jobs{list-style:none;margin:clamp(1rem,3vh,1.5rem) 0 0;padding:0;}
.jobs-head + .jobs{margin-top:0;}
.job,.jobs-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title apply" "dept apply" "loc apply";
  align-items:center;
  column-gap:1.25rem;
}
.job{padding-block:1.1rem;border-top:1px solid var(--hair);}
.job:last-child{border-bottom:1px solid var(--hair);}
.job h3{grid-area:title;font-size:clamp(1.1rem,2.2vw,1.3rem);font-weight:800;letter-spacing:-.01em;}
.job .dept,.jobs-head .dept{grid-area:dept;}
.job .loc,.jobs-head .loc{grid-area:loc;}
.job .dept,.job .loc{margin:0;font-size:.9rem;color:var(--ink-soft);}
.job .apply{grid-area:apply;}

.jobs-head{display:none;}

.apply{
  display:inline-flex;
  align-items:center;
  padding:.55em 1.3em;
  border:2px solid var(--coral);
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  transition:color .15s ease,background-color .15s ease;
}
.apply:hover{background:var(--coral);color:#fff;}
.apply:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.roles .fallback{margin:1rem 0 0;color:var(--ink-soft);}

.job h3 a{text-decoration:none;}
.job h3 a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:.2em;}
.job h3 a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px;}

/* ---------- сторінка вакансії ---------- */
.job-page{padding-block:clamp(2rem,6vh,3.5rem) clamp(3rem,8vh,5rem);}

.back{
  display:inline-block;
  font-weight:600;
  font-size:.9rem;
  color:var(--ink-soft);
  text-decoration:none;
}
.back::before{content:"\2190";margin-right:.45em;}
.back:hover{color:var(--ink);}
.back:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px;}

/* на вузьких спочатку опис, потім картка заявки; від 52rem картка праворуч і липне */
.job-layout{
  margin-top:clamp(1.25rem,3vh,2rem);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}

.job-body .head{font-size:clamp(2rem,6vw,3.2rem);font-weight:900;}
.job-body h2{
  margin-top:clamp(2rem,5vh,2.75rem);
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.job-body p{max-width:62ch;margin:.75rem 0 0;}
.job-body p.lead{
  margin-top:1.5rem;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.3rem);
  line-height:1.45;
}
.job-body ul{max-width:62ch;margin:.75rem 0 0;padding-left:1.2rem;}
.job-body li{margin-top:.45rem;}
.job-body li::marker{color:var(--coral);}

.job-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem clamp(2rem,6vw,4rem);
  margin:1.25rem 0 0;
  padding-block:1rem;
  border-block:1px solid var(--hair);
}
.job-meta dt{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.job-meta dd{margin:.15rem 0 0;font-weight:600;}

.apply-card{
  background:var(--plum);
  color:var(--paper);
  border-radius:clamp(1.25rem,3vw,1.75rem);
  padding:clamp(1.5rem,3vw,2rem);
  scroll-margin-top:6rem;
}
.apply-card h2{font-size:1.3rem;font-weight:800;letter-spacing:-.01em;}
.apply-card p{margin:.75rem 0 0;font-size:.95rem;color:rgba(254,253,251,.72);}
.apply-card .cta{margin-top:1.5rem;box-shadow:0 10px 26px -12px rgba(255,162,78,.8);}
.apply-card .cta:focus-visible{outline-color:var(--orange);}

/* форма заявки на темній картці */
.apply-form{margin-top:.5rem;}
.apply-form label{
  display:block;
  margin-top:1.1rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--paper);
}
.apply-form .req{color:var(--orange);font-weight:600;}
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form input[type="url"],
.apply-form input[type="file"]{
  display:block;
  width:100%;
  margin-top:.4rem;
  padding:.7rem .85rem;
  border:1px solid rgba(254,253,251,.28);
  border-radius:.8rem;
  background:rgba(254,253,251,.07);
  color:var(--paper);
  font:inherit;
  font-size:.95rem;
}
.apply-form input[type="file"]{border-style:dashed;font-size:.88rem;cursor:pointer;}
.apply-form input[type="file"]::file-selector-button{
  margin-right:.75rem;
  padding:.4rem .9rem;
  border:0;
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.apply-form input:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.apply-form input[aria-invalid="true"]{border-color:var(--orange);}
.apply-form .hint{margin:.4rem 0 0;font-size:.8rem;}

.apply-form .consent{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin-top:1.25rem;
  font-weight:400;
  font-size:.85rem;
  line-height:1.45;
  color:rgba(254,253,251,.8);
}
.apply-form .consent input{
  flex:none;
  width:1.1rem;
  height:1.1rem;
  margin:.15rem 0 0;
  accent-color:var(--coral);
}

/* Turnstile зазвичай невидимий; відступ з'являється, лише коли він просить людину
   щось натиснути (клас ставить app.js, коли віконце має висоту) */
.apply-form .cf-turnstile.shown{margin-top:1.25rem;}

button.cta{border:0;cursor:pointer;font:inherit;font-weight:600;}
.apply-form .cta{width:100%;justify-content:center;}
.apply-form .cta:disabled{opacity:.6;cursor:progress;}

.form-status{margin:.85rem 0 0;font-size:.88rem;min-height:1.2em;}
.form-status.error{color:var(--orange);}

.apply-done{margin-top:1rem;}
.apply-done:focus{outline:none;}
.apply-done .done-title{color:var(--paper);font-weight:600;font-size:1.05rem;}

.apply-card .alt{margin-top:1.25rem;font-size:.85rem;}
.apply-card .alt a{color:var(--paper);}
.apply-card .alt a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px;}

/* пастка для ботів: поза екраном, не для людей і не для читачів екрана */
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}

.job-missing p{max-width:52ch;color:var(--ink-soft);}


@media (min-width:52rem){
  .job,.jobs-head{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 8rem;
    grid-template-areas:"title dept loc apply";
  }
  .job .apply{justify-self:end;}
  .jobs-head{
    display:grid;
    margin-top:clamp(1.5rem,4vh,2.25rem);
    padding-bottom:.6rem;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .jobs-head .title{grid-area:title;}
  .job-layout{grid-template-columns:minmax(0,1fr) 24rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero,.star{animation:none;}
  .cta,.apply{transition:none;}
  .cta:hover{transform:none;}
}