:root{
  --bg:#0F1117;
  --card:#14171F;
  --pill:#1E222E;
  --text:#D1D5E1;
  --white:#FFFFFF;
  --accent:#515DC8;
  --linkedin:#0A66C2;
  --shadow:0 0.5rem 1rem rgba(0,0,0,.2);
  --gutter:3.125rem;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
/* all sizes are in rem: 1rem = 16px up to the 1920×960 design,
   then the whole layout scales with the screen (max 2×, matches the @2x photo) */
html{font-size:16px}
@media (min-width:1921px) and (min-height:961px){
  html{font-size:min(calc(100vw / 120), calc(100vh / 60), 32px)}
}
body{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);
  font:400 1.125rem/1.5 "Public Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}

/* header / footer */
.top,.bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
}
.top{padding-top:2.625rem}
.bottom{padding-bottom:2.875rem;font-size:1rem;line-height:1.5rem;color:#8F94A6}
.logo{display:block;line-height:0}
.logo svg{width:5.875rem;height:1.375rem}
.lang{
  display:inline-flex;align-items:center;gap:0.625rem;
  height:1.875rem;padding:0 0.875rem 0 0.875rem;border-radius:0.9375rem;
  background:var(--pill);color:var(--text);
  font:700 0.875rem/1 "Public Sans",sans-serif;text-decoration:none;
  transition:background .2s;
}
.lang:hover{background:#262B3A}
.lang img{width:1.375rem;height:0.875rem}
.heart{font-size:.9em}

/* main */
main{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:3.75rem var(--gutter);
}
.hold{display:flex;align-items:center;gap:4.4375rem}

.intro{width:27.25rem;max-width:100%}
h1{
  margin:0 0 1.5rem;
  font:800 3rem/3.3125rem "Montserrat Alternates",sans-serif;
  color:var(--white);letter-spacing:-.01em;
}
h1 .nw{white-space:nowrap}
h1 .spark{font-family:system-ui,sans-serif;font-weight:400;font-size:.8em}
.intro p{margin:0;font-size:1.125rem;line-height:1.6875rem}
.intro p a{color:var(--white);text-decoration:none;white-space:nowrap}
.intro p a:hover{text-decoration:underline;text-underline-offset:0.1875rem}

/* card */
.promo{position:relative;padding-left:0.6875rem;flex:none;text-align:left}
.promo::before{ /* circle */
  content:"";position:absolute;left:0;top:50%;
  width:21.5625rem;height:21.5625rem;margin-top:-10.7812rem;
  border-radius:50%;background:var(--accent);
}
.card{
  position:relative;width:27.25rem;min-height:17.0625rem;
  padding:3.375rem 0 3.4375rem 3.125rem;
  background:var(--card);border-radius:1rem;box-shadow:var(--shadow);
}
.card__text{position:relative;z-index:1;white-space:nowrap;margin:0 0 3.125rem;font-size:1rem;line-height:1.5rem}
.person{
  position:absolute;right:-2.6875rem;bottom:0;width:15.25rem;
  pointer-events:none;user-select:none;
}
.person img{width:100%;height:auto}

.li{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:1rem;text-decoration:none;
}
.li img{width:2.625rem;height:2.625rem;flex:none}
.li b{display:block;font-size:1rem;line-height:1.25rem;color:var(--white)}
.li span span{
  display:block;font-size:0.875rem;line-height:1.125rem;color:var(--text);
  text-decoration:underline;text-underline-offset:0.125rem;text-decoration-thickness:1px;
}
.li:hover span span{color:var(--white)}

/* ---------- tablet: stack, centred, desktop card ---------- */
@media (max-width:1100px){
  .hold{flex-direction:column;align-items:center;text-align:center;gap:5rem}
  .intro{width:32.5rem}
}
/* avatar: phone-only head crop */
.avatar{display:none}

/* ---------- phone: one centred column, max 26rem, card full column width ---------- */
@media (max-width:599px){
  :root{--gutter:clamp(1.5rem, 8vw, 3.125rem)}
  .top{padding-top:1.5rem}
  .bottom{padding-bottom:1.5rem;font-size:0.875rem;line-height:1.25rem}
  main{padding:3rem var(--gutter) 4rem}
  .hold{align-items:stretch;text-align:left;gap:2.5rem;width:100%;max-width:24rem}
  .intro{width:auto;text-align:center}
  h1{font-size:clamp(1.75rem, 9vw, 2.5rem);line-height:1.15;margin-bottom:1.5rem}
  .intro p{font-size:1rem;line-height:1.5rem}

  .promo{width:100%;padding-left:0}
  /* ellipse: 0.75rem wider than the card each side, hidden top edge, sticks out 1.0625rem below */
  .promo::before{
    left:-0.75rem;right:-0.75rem;top:0;bottom:-1.0625rem;margin:0;
    width:auto;height:auto;
  }
  .card{width:100%;min-height:0;padding:2rem 2rem 2.5rem}
  .person{display:none}
  .avatar{
    display:block;position:absolute;top:1.25rem;right:0.5rem;
    width:7.5rem;height:9rem;
  }
  .avatar img{width:100%;height:100%}
  .card__text{margin-bottom:2rem}
}
@media (max-width:419px){
  .avatar{width:7.5rem;height:9rem}
}
/* 360–399: smaller avatar, tighter card padding so the text never touches the head */
@media (max-width:399px){
  .card{padding-left:1.5rem;padding-right:1.5rem}
  .avatar{width:6.5rem;height:7.8rem;right:0.25rem}
}
/* narrow phones: no photo, text only */
@media (max-width:359px){
  .card{padding:1.75rem 1.5rem 2rem;text-align:center}
  .li{text-align:left}
  .avatar{display:none}
  .card__text{margin-bottom:1.5rem}
}