*{box-sizing:border-box}
:root{
  --text:#0c1a42;
  --muted:#5d6f8f;
  --line:#dce8f7;
  --bg:#f4f8fd;
  --panel:#ffffffee;
  --blue:#1671f5;
  --blue-dark:#0c4dcf;
  --shadow:0 10px 30px rgba(34,78,145,.08);
  --radius:24px;
}
html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#f8fbff 0%,#eef5fc 100%)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px;background:rgba(255,255,255,.92);border-bottom:1px solid #e8eff8;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:14px}
.brand img,.foot-brand img{width:82px;height:44px;object-fit:contain;border-radius:8px}
.brand b,.foot-brand b{display:block;font-size:20px;letter-spacing:-.02em}
.brand small,.foot-brand small{display:block;color:#6c7ea0;font-size:11px;letter-spacing:1.1px;margin-top:2px}
.topchips{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid #d7e4f6;border-radius:16px;background:#fff;color:#314c76;font-weight:600;box-shadow:0 2px 12px rgba(27,72,132,.04)}
.chip--accent{border-color:#9ec2ff;color:var(--blue);box-shadow:0 0 0 3px rgba(22,113,245,.06)}
.wrapper{max-width:1120px;margin:0 auto;padding:26px 18px 30px}
.hero{background:linear-gradient(95deg,#fbfdff 0%,#f2f7fd 47%,#dfebfb 100%);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.hero-main{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:22px;padding:34px 34px 30px;min-height:340px;background:
radial-gradient(circle at 18% 15%,rgba(255,255,255,.95),rgba(255,255,255,0) 33%),
radial-gradient(circle at 44% 38%,rgba(255,255,255,.75),rgba(255,255,255,0) 36%),
linear-gradient(180deg,rgba(126,167,224,.10),rgba(126,167,224,.03));}
.hero-main::after{content:"";position:absolute;inset:auto 110px 0 35%;height:58%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(22,113,245,.08));filter:blur(34px);pointer-events:none}
.hero-copy{position:relative;z-index:2;max-width:700px}
.hero h1{margin:0 0 18px;font-size:42px;line-height:1.03;letter-spacing:-.04em;font-weight:800}
.hero h1 span{color:var(--blue)}
.hero p{margin:0 0 22px;font-size:18px;line-height:1.45;color:#415573;max-width:760px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:16px;border:1px solid #d4e1f2;background:#fff;color:#1459cb;font-weight:700;box-shadow:0 6px 18px rgba(20,89,203,.06)}
.btn--primary{background:linear-gradient(180deg,#1f82ff,#0f5de4);color:#fff;border:none;box-shadow:0 14px 28px rgba(20,89,203,.25)}
.hero-side{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;padding-right:74px}
.salary-card{width:min(100%,320px);background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:28px;padding:24px 24px 18px;box-shadow:var(--shadow)}
.salary{font-size:22px;font-weight:800;color:var(--blue);margin-bottom:16px}
.salary span{font-size:15px;color:#0f2d5f;font-weight:700}
.salary-card ul{list-style:none;padding:0;margin:0;display:grid;gap:14px;color:#304c74}
.salary-card li{position:relative;padding-left:30px;line-height:1.3}
.salary-card li::before{content:"•";position:absolute;left:10px;top:-1px;color:var(--blue);font-size:24px;line-height:1}
.tower-wrap{position:absolute;right:0;bottom:0;top:0;width:128px;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;opacity:.96}
.tower-wrap img{height:100%;width:auto;object-fit:cover;object-position:center right}
.panel{margin-top:18px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:22px 20px}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.panel-head h2{margin:0;font-size:26px;letter-spacing:-.03em}
.panel-head p{margin:0;color:#6a7da0;font-size:14px}
.panel-head--single{margin-bottom:8px}
.chips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skill-chip{display:flex;align-items:center;min-height:60px;padding:0 18px;border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f6f9fe);border:1px solid #dce8f7;color:#26456f;font-weight:600;box-shadow:0 4px 14px rgba(38,69,111,.04)}
.exp-grid{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}
.exp-timeline{position:relative;display:flex;flex-direction:column;gap:120px;padding:18px 12px 18px 8px;min-height:100%}
.time-line{position:absolute;left:26px;top:44px;bottom:44px;width:2px;background:linear-gradient(180deg,#4b93ff,#d5e6ff)}
.time-item{position:relative;background:linear-gradient(180deg,#f8fbff,#f0f6fe);border:1px solid var(--line);border-radius:18px;padding:16px 18px 16px 34px;color:#31517c;box-shadow:0 5px 12px rgba(32,63,117,.04)}
.time-item::before{content:"";position:absolute;left:16px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(22,113,245,.12)}
.exp-cards{display:grid;gap:16px}
.job-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 20px 14px;box-shadow:0 6px 18px rgba(20,57,110,.05)}
.job-top{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:start;margin-bottom:12px}
.job-logo{display:grid;place-items:center;width:86px;height:72px;border-radius:18px;background:linear-gradient(180deg,#f7fbff,#eff5fd);border:1px solid #dae6f7;font-size:52px;font-weight:900;color:#1b1b1b}
.job-logo--t2{font-family:Arial Black,Arial,sans-serif;text-transform:lowercase;letter-spacing:-.05em}
.job-logo--box{font-size:34px;color:#677ca3}
.job-card h3{margin:0 0 4px;font-size:22px}
.job-card strong{display:block;color:#39557f;font-size:15px}
.job-tag{white-space:nowrap;background:#eff5ff;border:1px solid #d6e4fc;border-radius:999px;padding:10px 14px;font-size:13px;color:#3e79dd;align-self:start}
.job-card ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.job-card li{position:relative;padding-left:28px;color:#425779;line-height:1.4}
.job-card li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#ebf4ff;color:var(--blue);font-weight:800;font-size:12px}
.about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:24px;align-items:end}
.about p{margin:0;color:#445a7d;font-size:18px;line-height:1.5}
blockquote{margin:0;position:relative;background:linear-gradient(180deg,#f9fbff,#f2f7fd);border:1px solid var(--line);border-radius:22px;min-height:180px;padding:22px;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
blockquote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
blockquote span{position:relative;z-index:1;max-width:260px;color:#5f7291;font-size:17px;line-height:1.45;font-style:italic;text-align:right}
.foot{max-width:1120px;margin:0 auto 24px;padding:18px 18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#5f7294}
.foot-links a{padding:10px 14px;border:1px solid #d7e4f6;background:#fff;border-radius:14px;color:#1d63d7;font-weight:700}
@media (max-width:1080px){
  .topbar{padding:16px 18px}
  .brand b,.foot-brand b{font-size:18px}
  .wrapper{padding:18px 14px 28px}
  .hero-main{grid-template-columns:1fr; padding-right:24px}
  .hero-side{justify-content:flex-start;padding-right:0}
  .tower-wrap{width:110px;opacity:.28}
  .chips-grid{grid-template-columns:repeat(2,1fr)}
  .exp-grid,.about-grid{grid-template-columns:1fr}
  .exp-timeline{gap:14px;padding:0;display:grid;grid-template-columns:repeat(2,1fr)}
  .time-line{display:none}
  .job-top{grid-template-columns:72px 1fr;}
  .job-tag{grid-column:2}
}
@media (max-width:760px){
  .topbar{position:static;padding:14px 14px 16px}
  .brandbox,.brand{width:100%}
  .brand img,.foot-brand img{width:70px;height:38px}
  .topchips{justify-content:flex-start}
  .chip{padding:10px 13px;font-size:14px}
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  .hero-main{padding:24px 18px 22px}
  .tower-wrap{display:none}
  .salary-card{width:100%}
  .panel{padding:18px 16px}
  .panel-head{flex-direction:column;align-items:flex-start}
  .panel-head h2{font-size:24px}
  .chips-grid{grid-template-columns:1fr}
  .hero-actions,.foot-links{width:100%}
  .btn{width:100%}
  .job-card h3{font-size:19px}
  .job-top{grid-template-columns:1fr;}
  .job-logo{width:72px;height:60px}
  blockquote span{font-size:15px}
}

/* PNR 2.4-p1: hero without tower illustration */
.hero-side{padding-right:0}
.hero-main{grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr)}
@media(max-width:1080px){.hero-main{grid-template-columns:1fr}}

/* PNR 2.4-p2 — contact controls centered inside remaining header space. */
.topbar{justify-content:flex-start}
.brandbox{flex:0 0 auto}
.topchips{flex:1 1 auto;min-width:0;justify-content:center}
.foot{justify-content:center}
@media(max-width:760px){
  .topbar{flex-direction:column;align-items:center;gap:14px}
  .brandbox,.brand{width:auto}
  .topchips{width:100%;flex:0 1 auto;justify-content:center}
  .chip{max-width:100%}
}