:root{
  --ink:#0b123e;
  --ink-soft:#1f285b;
  --muted:#6f779a;
  --line:rgba(23,33,88,.11);
  --blue:#5265ea;
  --blue-deep:#3448ca;
  --violet:#9367ee;
  --lavender:#eeeaff;
  --surface:rgba(255,255,255,.72);
  --white:#fff;
  --shadow:0 30px 80px rgba(53,64,143,.15);
}

*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 19% 15%, rgba(205,213,255,.36), transparent 27%),
    radial-gradient(circle at 88% 78%, rgba(221,208,255,.54), transparent 33%),
    linear-gradient(145deg,#fff 0%,#fbfcff 48%,#f7f6ff 100%);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ambient{
  position:fixed;
  z-index:-3;
  width:46vw;
  height:46vw;
  border-radius:999px;
  filter:blur(26px);
  opacity:.52;
  pointer-events:none;
  animation:drift 14s ease-in-out infinite alternate;
}
.ambient-one{top:-24vw;right:-8vw;background:radial-gradient(circle,rgba(125,114,239,.22),transparent 64%)}
.ambient-two{bottom:-30vw;left:-16vw;background:radial-gradient(circle,rgba(100,151,250,.14),transparent 66%);animation-delay:-6s}
.grain{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")
}

.page-shell{
  width:min(1460px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:34px clamp(24px,5vw,78px) 26px;
  display:flex;
  flex-direction:column;
}

.site-header{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
  max-width:220px;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:220px;
  max-width:100%;
  overflow:hidden;
}
.site-header .brand .brand-logo,
.site-header .brand img{
  display:block !important;
  width:auto !important;
  height:52px !important;
  max-width:220px !important;
  max-height:52px !important;
  object-fit:contain;
}

.header-link{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-soft);
  font-size:13px;font-weight:650;padding:12px 14px 12px 16px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);
  transition:.25s ease;
}
.header-link:hover{transform:translateY(-2px);border-color:rgba(82,101,234,.24);box-shadow:0 12px 30px rgba(64,76,151,.08)}
.header-link svg{width:17px;height:17px}

.hero{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);
  align-items:center;
  gap:clamp(38px,5vw,84px);
  padding:clamp(44px,6vh,78px) 0 clamp(56px,8vh,96px);
}
.hero-copy{max-width:650px;position:relative;z-index:3}
.intro{
  margin:0 0 20px;color:var(--blue-deep);font-size:clamp(14px,1.25vw,17px);font-weight:650;letter-spacing:-.012em;
}
h1{
  margin:0;
  font-size:clamp(56px,5.7vw,88px);
  line-height:.96;
  letter-spacing:-.058em;
  font-weight:760;
  color:var(--ink);
}
h1 span{
  color:transparent;
  background:linear-gradient(102deg,#8364e6 0%,#536ceb 48%,#5864d6 100%);
  -webkit-background-clip:text;background-clip:text;
}
.lead{
  margin:28px 0 0;
  max-width:610px;
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.72;
  letter-spacing:-.012em;
  color:#626b91;
}
.status-line{
  margin-top:27px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#313a6d;
  font-size:13px;
  font-weight:650;
}
.status-dot{
  width:9px;height:9px;border-radius:50%;background:#6475ed;position:relative;box-shadow:0 0 0 6px rgba(100,117,237,.10)
}
.status-dot:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(100,117,237,.35);border-radius:50%;animation:pulse 2.2s ease-out infinite}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.button{
  min-height:49px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 20px;border-radius:14px;text-decoration:none;font-size:14px;font-weight:700;transition:.24s ease;
}
.button svg{width:17px;height:17px}
.button-primary{color:#fff;background:linear-gradient(135deg,#4d60de,#6b65e3);box-shadow:0 14px 32px rgba(78,92,211,.24)}
.button-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(78,92,211,.31)}
.button-secondary{background:rgba(255,255,255,.72);border:1px solid var(--line);color:var(--ink-soft);backdrop-filter:blur(10px)}
.button-secondary:hover{transform:translateY(-2px);border-color:rgba(82,101,234,.24);background:#fff}

.future-flow{
  margin-top:45px;
  padding-top:23px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.future-flow div{min-width:0;display:grid;grid-template-columns:27px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.future-flow span{grid-row:1/3;font-size:10px;color:#8c94b2;font-weight:750;align-self:start;margin-top:3px}
.future-flow strong{font-size:13px;color:#27305f;line-height:1.3}
.future-flow small{font-size:11.5px;color:#8b92ac;margin-top:2px;white-space:nowrap}

.hero-visual{
  min-height:590px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
}
.hero-visual:before{
  content:"";position:absolute;width:82%;height:76%;border-radius:50%;
  background:radial-gradient(circle,rgba(110,113,230,.15) 0%,rgba(128,112,236,.08) 35%,transparent 72%);
  filter:blur(1px);
}
.orbit{position:absolute;border:1px solid rgba(116,126,213,.14);border-radius:50%;pointer-events:none}
.orbit-a{width:530px;height:530px;transform:rotate(14deg);animation:orbitFloat 8s ease-in-out infinite alternate}
.orbit-b{width:430px;height:430px;transform:rotate(-15deg);border-style:dashed;opacity:.52;animation:orbitFloat 10s ease-in-out infinite alternate-reverse}

.portal-window{
  width:min(100%,585px);
  min-height:426px;
  position:relative;
  z-index:2;
  border:1px solid rgba(56,68,139,.11);
  border-radius:28px;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(24px);
  box-shadow:0 42px 100px rgba(53,64,143,.18),inset 0 1px 0 rgba(255,255,255,.8);
  transform:rotateY(-7deg) rotateX(2deg) rotateZ(-1deg);
  overflow:hidden;
  animation:windowFloat 6s ease-in-out infinite;
}
.window-topbar{
  min-height:55px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:0 20px;
  border-bottom:1px solid rgba(31,43,107,.08);background:rgba(255,255,255,.55);font-size:10px;color:#939ab4;letter-spacing:.02em;
}
.window-dots{display:flex;gap:6px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#d7dbee}.window-dots i:nth-child(2){background:#c8cfeb}.window-dots i:nth-child(3){background:#b9c1e7}
.window-status{justify-self:end;display:flex;align-items:center;gap:6px;font-size:9.5px;color:#69739d}.window-status i{width:6px;height:6px;border-radius:50%;background:#6f80eb;box-shadow:0 0 0 4px rgba(111,128,235,.1)}
.window-body{padding:35px 34px 31px}
.preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.preview-heading small{font-size:10px;color:#7d86a8;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.preview-heading h2{font-size:33px;line-height:1.06;letter-spacing:-.045em;margin:9px 0 0;color:#111947;font-weight:750}
.preview-mark{width:66px;height:66px;border-radius:22px;background:linear-gradient(145deg,#eceeff,#f6f3ff);position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding-bottom:18px;box-shadow:inset 0 0 0 1px rgba(78,95,190,.07)}
.preview-mark span{width:8px;border-radius:4px;background:linear-gradient(180deg,#7482eb,#926fea);transform:skew(-12deg)}
.preview-mark span:nth-child(1){height:16px}.preview-mark span:nth-child(2){height:25px}.preview-mark span:nth-child(3){height:19px}
.role-list{margin-top:36px;display:flex;flex-direction:column;gap:10px}
.role-row{min-height:72px;border-radius:17px;display:flex;align-items:center;gap:14px;padding:11px 13px;border:1px solid rgba(50,63,134,.08)}
.role-row-main{background:linear-gradient(115deg,rgba(238,240,255,.9),rgba(248,246,255,.9));box-shadow:0 12px 32px rgba(70,80,149,.07)}
.role-icon{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;color:#596ce2;box-shadow:0 8px 22px rgba(54,65,141,.08)}
.role-icon svg{width:20px;height:20px}
.role-copy{flex:1;display:flex;flex-direction:column;min-width:0}.role-copy b{font-size:12px;color:#27305f}.role-copy em{font-style:normal;color:#8a91ac;font-size:10px;margin-top:5px}
.role-arrow{width:32px;height:32px;border-radius:10px;background:#fff;display:grid;place-items:center;color:#606fe0}.role-arrow svg{width:15px;height:15px}
.ghost-row{min-height:58px;background:rgba(255,255,255,.45);opacity:.72}.ghost-row.second{opacity:.48}
.skeleton{display:block;background:linear-gradient(90deg,#e8ebf7,#f1effa,#e8ebf7);background-size:220% 100%;animation:shimmer 2.6s linear infinite}.sk-icon{width:35px;height:35px;border-radius:11px}.skeleton-stack{flex:1;display:flex;flex-direction:column;gap:7px}.skeleton-stack i{display:block;height:7px;border-radius:999px;background:#e8ebf5;width:46%}.skeleton-stack i:last-child{width:68%;height:6px;background:#eef0f7}.sk-button{width:42px;height:24px;border-radius:8px}

.floating-card{
  position:absolute;z-index:4;display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:16px;
  background:rgba(255,255,255,.83);backdrop-filter:blur(16px);border:1px solid rgba(64,75,147,.10);
  box-shadow:0 18px 50px rgba(67,75,143,.14);animation:cardFloat 5s ease-in-out infinite;
}
.floating-card>span:nth-child(2){display:flex;flex-direction:column}.floating-card b{font-size:10.5px;color:#2d3565}.floating-card small{font-size:8.8px;color:#9299b3;margin-top:3px}
.applicant-card{left:-12px;bottom:105px}.progress-card{right:-12px;top:89px;animation-delay:-2.5s}
.mini-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,#f0f1ff,#f5f0ff);display:grid;place-items:center;position:relative}
.mini-icon.person:before{content:"";width:8px;height:8px;border-radius:50%;background:#7b7ce9;position:absolute;top:7px}.mini-icon.person:after{content:"";width:15px;height:8px;border-radius:9px 9px 4px 4px;background:#7b7ce9;position:absolute;bottom:7px}
.mini-icon.pulse:before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #7d7ee8;box-shadow:0 0 0 4px rgba(125,126,232,.10)}
.mini-icon.pulse i{position:absolute;width:5px;height:5px;border-radius:50%;background:#7d7ee8}
.check{font-style:normal;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#eef7f3;color:#40a178;font-size:10px;font-weight:800;margin-left:4px}
.visual-caption{position:absolute;bottom:25px;right:50px;color:#7e86a5;font-size:10px;letter-spacing:.03em}

.site-footer{
  min-height:55px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  color:#8c93ae;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:10.5px;
}
.site-footer p{margin:0}.site-footer p span{color:#a1a6bc}
.footer-contact{display:flex;align-items:center;gap:10px;text-align:right}.footer-contact a{text-decoration:none;color:#727a9b}.footer-contact i{width:3px;height:3px;border-radius:50%;background:#b5bacd}

@keyframes pulse{0%{transform:scale(.75);opacity:.85}80%,100%{transform:scale(2.2);opacity:0}}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3vw,2vh,0) scale(1.07)}}
@keyframes orbitFloat{0%{transform:translateY(-7px) rotate(14deg)}100%{transform:translateY(12px) rotate(18deg)}}
@keyframes windowFloat{0%,100%{transform:rotateY(-7deg) rotateX(2deg) rotateZ(-1deg) translateY(0)}50%{transform:rotateY(-5deg) rotateX(1deg) rotateZ(-.5deg) translateY(-10px)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media (max-width:1120px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(400px,.92fr);gap:38px}
  h1{font-size:clamp(53px,6vw,72px)}
  .hero-visual{min-height:530px}
  .portal-window{min-height:395px}.window-body{padding:30px 28px}.preview-heading h2{font-size:29px}
  .applicant-card{left:-18px}.progress-card{right:-10px}
}

@media (max-width:900px){
  .page-shell{padding:24px 24px 22px}
  .site-header{min-height:62px}
  .hero{grid-template-columns:1fr;padding:54px 0 58px;gap:58px}
  .hero-copy{max-width:680px}
  h1{font-size:clamp(54px,10vw,82px);max-width:760px}
  .lead{max-width:650px}
  .hero-visual{width:min(680px,100%);min-height:540px;margin:0 auto}
  .portal-window{width:90%}
  .applicant-card{left:0}.progress-card{right:0}
  .site-footer{align-items:flex-start;flex-direction:column;gap:10px}
  .footer-contact{text-align:left}
}

@media (max-width:620px){
  .page-shell{padding:18px 17px 20px}
  .brand{max-width:180px}
  .brand-mark{width:180px}
  .site-header .brand .brand-logo,
  .site-header .brand img{height:43px !important;max-width:180px !important;max-height:43px !important}
  .header-link{width:43px;height:43px;padding:0;justify-content:center}.header-link span{display:none}.header-link svg{width:18px;height:18px}
  .hero{padding:46px 0 44px;gap:43px}
  .intro{font-size:13px;margin-bottom:15px}
  h1{font-size:clamp(47px,14.3vw,68px);line-height:.98;letter-spacing:-.052em}
  .lead{font-size:15.2px;line-height:1.65;margin-top:22px}
  .status-line{font-size:11.5px;margin-top:22px}
  .actions{margin-top:27px}.button{min-height:47px;padding:0 17px;font-size:13px}
  .future-flow{margin-top:35px;padding-top:18px;gap:10px}.future-flow div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.future-flow span{font-size:9px;margin:0}.future-flow strong{font-size:11.5px}.future-flow small{font-size:9.5px;white-space:normal}
  .hero-visual{min-height:430px;margin-top:0}
  .portal-window{width:94%;min-height:330px;border-radius:21px;transform:none;animation:mobileWindowFloat 6s ease-in-out infinite}
  .window-topbar{min-height:46px;padding:0 14px;grid-template-columns:1fr auto}.window-topbar>span{display:none}.window-body{padding:22px 19px 19px}.preview-heading h2{font-size:24px}.preview-mark{width:51px;height:51px;border-radius:16px;padding-bottom:13px}.preview-mark span{width:6px}.preview-mark span:nth-child(1){height:12px}.preview-mark span:nth-child(2){height:19px}.preview-mark span:nth-child(3){height:15px}
  .role-list{margin-top:25px;gap:8px}.role-row{min-height:61px;border-radius:14px;padding:9px 10px;gap:10px}.role-icon{width:38px;height:38px;border-radius:11px}.role-copy b{font-size:10.5px}.role-copy em{font-size:8.5px}.role-arrow{width:28px;height:28px}.ghost-row{min-height:48px}
  .floating-card{padding:10px 11px;border-radius:14px}.floating-card b{font-size:9px}.floating-card small{font-size:7.5px}.mini-icon{width:28px;height:28px}.check{display:none}
  .applicant-card{left:-3px;bottom:44px}.progress-card{right:-2px;top:50px}
  .visual-caption{display:none}.orbit-a{width:390px;height:390px}.orbit-b{width:310px;height:310px}
  .site-footer{font-size:9.5px;padding-top:15px}.footer-contact{flex-wrap:wrap;gap:7px}.footer-contact i{display:none}.footer-contact span{width:100%}
}

@keyframes mobileWindowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (max-width:390px){
  .future-flow{gap:6px}.future-flow strong{font-size:10.8px}
  .portal-window{width:97%}.progress-card{right:-7px}.applicant-card{left:-7px}
}

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