/* Crew redesign — approved design. Do not edit values; see README. */
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: one shared glass nav over a light blue-white ground; each page is a centred column built from the locked homepage parts (3D logo lettering, glow frames, glass cards with 3D icons). Single light theme by design. */
:root{
  --ground:#F7F9FD; --ink:#0F1E3D; --ink-2:#43506A; --muted:#5B6782;
  --blue:#1F5BFF; --blue-deep:#1646CC; --violet:#6A3DF0; --pink:#E0247F; --aqua:#16B8CC;
  --red:#F80058; --cyan:#8FF0FF; --ok:#0C6A4B; --ok-soft:#E3F6EE; --warn:#A6461A; --warn-soft:#FDEEE5;
  --glass:rgba(255,255,255,.64); --glass-strong:rgba(255,255,255,.86);
  --glow-blue:rgba(31,91,255,.30); --glow-aqua:rgba(22,184,204,.30); --glow-pink:rgba(224,36,127,.24); --glow-violet:rgba(106,61,240,.24);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
::selection{background:#FFD6E5;color:var(--ink)}
a{color:var(--blue-deep)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:14px}
h1,h2,h3{text-wrap:balance}

.shell{min-height:100vh;overflow-x:clip;padding-block:18px 120px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(55% 30% at 50% 22%,rgba(224,36,127,.07),transparent 70%),radial-gradient(70% 40% at 50% 30%,rgba(31,91,255,.09),transparent 70%),linear-gradient(180deg,#FFFFFF 0%,#F1F5FF 40%,#EAF1FF 100%)}
.wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}

/* ---------- nav ---------- */
.nav{position:relative;z-index:20;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand > img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 10px var(--glow-pink))}
.brand-name{display:flex;flex-direction:column;line-height:1.05;gap:2px}
.brand-name img{flex:none;width:auto;max-width:none;height:30px;filter:drop-shadow(0 4px 8px rgba(106,61,240,.25))}
.brand-name span{font-size:13px;font-weight:600;color:var(--blue-deep)}
.tabs{position:relative;display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(31,91,255,.14),0 8px 28px -8px var(--glow-blue),0 6px 22px -8px var(--glow-pink)}
.tab{position:relative;z-index:1;font:500 15px/1 var(--font);color:var(--ink-2);padding:12px 16px;border-radius:999px;text-decoration:none;transition:color .3s var(--ease)}
.tab[aria-current="page"]{color:var(--blue-deep)}
.tab-pill{position:absolute;z-index:0;top:5px;bottom:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(31,91,255,.2),0 4px 14px -4px var(--glow-blue),0 6px 18px -6px var(--glow-pink);transition:left .5s var(--ease),width .5s var(--ease),opacity .3s}
.nav-cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 8px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink);background:var(--glass-strong);box-shadow:0 0 0 1px rgba(14,30,58,.08),0 8px 20px -12px var(--glow-blue);backdrop-filter:blur(12px);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.nav-cta img{width:34px;height:34px;object-fit:contain}
.nav-cta:hover{box-shadow:0 0 0 1px rgba(31,91,255,.3),0 10px 24px -10px var(--glow-blue)}
.nav-cta:active{transform:scale(.96)}
.menu-btn{display:none}
.menu-panel{display:none}

/* ---------- 3D logo lettering (CSS) ---------- */
.t3d{margin:0;font:800 clamp(36px,6.2vw,74px)/1.02 var(--font);text-transform:uppercase;letter-spacing:-.01em}
.t3d .c,.t3d .r{paint-order:stroke fill;-webkit-text-stroke:2px currentColor}
.t3d .c{color:#1336C4;-webkit-text-fill-color:var(--cyan);
  text-shadow:0 1px 0 #1F4FE8,0 2px 0 #1C47DA,0 3px 0 #1A40CC,0 4px 0 #1738BE,0 5px 0 #1530AE,0 10px 16px rgba(31,91,255,.35),0 6px 26px rgba(31,91,255,.30)}
.t3d .r{color:#9A0034;-webkit-text-fill-color:var(--red);
  text-shadow:0 1px 0 #D6004C,0 2px 0 #C40046,0 3px 0 #B20040,0 4px 0 #A0003A,0 5px 0 #8E0034,0 10px 16px rgba(248,0,88,.32),0 6px 26px rgba(248,0,88,.28)}
.page-head{text-align:center;margin:clamp(36px,6vh,72px) auto 0;max-width:900px}
.page-head p{margin:20px auto 0;font-size:clamp(18px,1.8vw,21px);color:var(--ink-2);max-width:50ch}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;text-decoration:none;color:var(--blue-deep);margin-bottom:18px}
.back svg{width:16px;height:16px;transform:rotate(180deg)}

/* ---------- home hero ---------- */
.head{position:relative;z-index:4;text-align:center;max-width:900px;margin:clamp(40px,7vh,80px) auto 0}
.head p{margin:22px auto 0;font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--ink-2);max-width:44ch}
.head p strong{color:var(--ink);font-weight:700}
.h1-glass{position:relative;margin:0 auto;width:min(900px,100%);line-height:0}
.h1-glass img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(31,91,255,.18)) drop-shadow(0 22px 40px rgba(224,36,127,.14))}
.h1-glass .sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(../img/h1-red.webp) center/100% 100% no-repeat;mask:url(../img/h1-red.webp) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 47%,rgba(255,255,255,.15) 53%,transparent 62%) -160% 0/60% 100% no-repeat;animation:sheen 6.5s var(--ease) 1s infinite}
@keyframes sheen{0%{background-position:-160% 0}35%,100%{background-position:260% 0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ctas{margin-top:30px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.stage{position:relative;max-width:1180px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:22px}
.side .frame{aspect-ratio:3/4}
.side{transform:translateY(30px)}
.center{position:relative;display:grid;place-items:center}
.halo{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.96) 0%,rgba(244,232,255,.75) 40%,rgba(227,236,255,.5) 58%,transparent 72%);box-shadow:0 24px 80px 6px rgba(224,36,127,.14),0 30px 90px 10px rgba(31,91,255,.16)}
.ring{position:absolute;width:92%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(106,61,240,.22);animation:breathe 5s ease-in-out infinite}
.ring.two{width:108%;border-color:rgba(224,36,127,.18);animation-delay:1.2s}
@keyframes breathe{0%,100%{scale:1;opacity:.9}50%{scale:1.04;opacity:.4}}
.spin3d{position:relative;width:86%;aspect-ratio:1;animation:float 7s ease-in-out infinite;cursor:grab}
.spin3d model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent;filter:drop-shadow(0 26px 34px rgba(106,61,240,.28)) drop-shadow(0 12px 30px rgba(224,36,127,.22))}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--font);text-decoration:none;cursor:pointer;border:0;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn-primary{color:#fff;background:linear-gradient(180deg,#3567F5 0%,#1F5BFF 45%,#1946CF 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(10,30,110,.25) inset,0 12px 24px -10px rgba(31,91,255,.8),0 8px 24px -10px var(--glow-pink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{color:var(--blue-deep);background:linear-gradient(180deg,#FFFFFF,#F2F6FF);box-shadow:0 0 0 1.5px rgba(31,91,255,.42) inset,0 1px 0 #fff inset,0 10px 22px -14px var(--glow-blue)}
.btn-ghost:hover{box-shadow:0 0 0 1.5px var(--blue) inset,0 12px 26px -12px var(--glow-blue)}
.btn-quiet{color:#A3123F;background:#fff;box-shadow:0 0 0 1.5px rgba(163,18,63,.35) inset}
.btn-block{width:100%}
.btn:active{transform:scale(.96) translateY(1px)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.6;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(224,36,127,.35) 40%,rgba(22,184,204,.25) 55%,transparent 70%);animation:ripple .7s var(--ease) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- glow frame + glass ---------- */
.frame{position:relative;border-radius:28px;padding:6px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 30px 60px -30px rgba(14,30,58,.35),0 0 0 1px rgba(31,91,255,.12)}
.frame::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),rgba(31,91,255,0),rgba(31,91,255,.7),rgba(224,36,127,.65),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(22,184,204,.65),rgba(31,91,255,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 9s linear infinite}
.frame::after{content:"";position:absolute;inset:-22px;border-radius:44px;z-index:-1;pointer-events:none;background:radial-gradient(60% 60% at 30% 20%,var(--glow-aqua),transparent 70%),radial-gradient(60% 60% at 80% 90%,var(--glow-pink),transparent 70%);filter:blur(18px);opacity:.6;transition:opacity .5s var(--ease)}
.frame:hover::after{opacity:.95}
.frame > img{border-radius:22px;width:100%;height:100%;object-fit:cover}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.panel{position:relative;border-radius:26px;padding:32px;background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 1px rgba(31,91,255,.1),0 24px 50px -30px rgba(14,30,58,.35)}
.panel.glow{border-radius:28px}
.panel h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.panel h3{margin:0;font-size:18px;font-weight:700}

/* ---------- glass role cards (home) ---------- */
.roles{position:relative;z-index:4;max-width:1180px;margin:76px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.role{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 10px;border-radius:22px;text-decoration:none;color:var(--ink);background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(31,91,255,.1),0 12px 28px -16px var(--glow-blue);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.role:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(31,91,255,.3),0 18px 32px -14px var(--glow-blue),0 12px 26px -10px var(--glow-pink)}
.role:active{transform:scale(.97)}
.ico{flex:0 0 58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(160deg,#FFFFFF,#EEF3FF);box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(31,91,255,.10),0 8px 18px -10px var(--glow-violet)}
.ico img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(31,91,255,.25));transition:transform .5s var(--ease)}
.ico.lg{flex-basis:76px;width:76px;height:76px;border-radius:20px}.ico.lg img{width:64px;height:64px}
a:hover .ico img,.hoverable:hover .ico img{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.bump .ico img{animation:bump .6s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-10deg)}100%{transform:scale(1)}}
.role .txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.role b{font-size:17px;font-weight:700;letter-spacing:-.015em}
.role span{font-size:14px;color:var(--muted);white-space:nowrap}

/* ---------- open positions ---------- */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:34px auto 0;max-width:980px}
.chip{border:0;font:600 15px/1 var(--font);color:var(--ink-2);min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(14,30,58,.08);transition:all .35s var(--ease)}
.chip:hover{color:var(--ink);box-shadow:0 0 0 1px rgba(31,91,255,.35),0 6px 18px -8px var(--glow-blue)}
.chip[aria-pressed="true"]{color:#fff;background:var(--blue);box-shadow:0 8px 20px -8px rgba(31,91,255,.8),0 6px 18px -6px var(--glow-pink)}
.chip:active{transform:scale(.95)}
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.job{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--glass-strong);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 1px rgba(31,91,255,.1),0 24px 46px -30px rgba(14,30,58,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.job:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 1px rgba(31,91,255,.3),0 30px 50px -26px var(--glow-blue),0 18px 40px -20px var(--glow-pink)}
.job .pic{position:relative;aspect-ratio:16/8;overflow:hidden}
.job .pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.job:hover .pic img{transform:scale(1.04)}
.job .pic .ico{position:absolute;left:18px;bottom:-30px;z-index:2}
.job .body{padding:44px 24px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.job h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.015em}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);background:#EEF3FF}
.tag.open{color:var(--ok);background:var(--ok-soft)}
.tag svg{width:15px;height:15px}
.job p{margin:0;color:var(--ink-2)}
.job .more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue-deep)}
.job .more svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.job:hover .more svg{transform:translateX(4px)}

/* ---------- role page ---------- */
.role-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:start;margin-top:30px}
.role-head{text-align:left}
.role-head .t3d{font-size:clamp(34px,5vw,60px)}
.role-head .lead{margin:18px 0 0;font-size:20px;color:var(--ink-2);max-width:46ch}
.prose{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.prose p{margin:0;color:var(--ink-2);max-width:66ch}
.prose h2{margin:6px 0 0;font-size:22px;font-weight:800}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.checks li::before{content:"";flex:0 0 22px;height:22px;margin-top:1px;border-radius:999px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 4px 10px -4px var(--glow-blue)}
.side-card{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.facts{display:grid;gap:12px;margin:0}
.facts div{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(14,30,58,.07)}
.facts div:last-child{border:0;padding:0}
.facts dt{color:var(--muted);font-weight:500}
.facts dd{margin:0;font-weight:700}
.small{font-size:14px;color:var(--muted);margin:0}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:#F2F6FF;font-size:15px;color:var(--ink-2)}
.note img{width:36px;height:36px;flex:none}

/* ---------- forms ---------- */
.steps{display:flex;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.steps li{flex:1;display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.steps li::before{content:"";height:6px;border-radius:999px;background:rgba(31,91,255,.12)}
.steps li.done::before{background:var(--blue)}
.steps li.now{color:var(--blue-deep)}
.steps li.now::before{background:linear-gradient(90deg,var(--blue),var(--aqua));box-shadow:0 4px 12px -2px var(--glow-aqua)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field .lab{font-weight:700;font-size:15px}
.field .hint{font-size:14px;color:var(--muted)}
.input,select.input{font:500 16px/1.2 var(--font);color:var(--ink);min-height:52px;padding:0 16px;border-radius:16px;border:0;background:#fff;
  box-shadow:0 0 0 1.5px rgba(14,30,58,.12) inset,0 1px 0 #fff;transition:box-shadow .3s var(--ease)}
.input:focus{outline:none;box-shadow:0 0 0 2px var(--blue) inset,0 0 0 5px rgba(31,91,255,.14),0 6px 18px -6px var(--glow-aqua)}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{position:relative}
.radios input{position:absolute;opacity:0}
.radios span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;background:#fff;box-shadow:0 0 0 1.5px rgba(14,30,58,.12) inset;cursor:pointer;transition:all .3s var(--ease)}
.radios input:checked + span{color:#fff;background:var(--blue);box-shadow:0 8px 18px -8px rgba(31,91,255,.8)}
.radios input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}
.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.statement{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(14,30,58,.07)}
.statement p{margin:0;font-size:19px;font-weight:600;color:var(--ink)}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.scale label{position:relative}
.scale input{position:absolute;opacity:0}
.scale span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:6px;border-radius:14px;font-size:13px;font-weight:600;line-height:1.2;background:#F4F7FF;color:var(--ink-2);cursor:pointer;transition:all .3s var(--ease)}
.scale input:checked + span{color:#fff;background-color:#1F5BFF;background-image:linear-gradient(180deg,#3567F5,#1946CF);box-shadow:0 8px 18px -8px rgba(31,91,255,.8),0 6px 16px -8px var(--glow-pink);transform:translateY(-2px)}
.scale input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.example{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--warn);background:var(--warn-soft);padding:6px 10px;border-radius:999px}

/* ---------- confirmation / status ---------- */
.ref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:20px;background:linear-gradient(180deg,#fff,#F3F7FF);box-shadow:0 0 0 1.5px rgba(31,91,255,.25) inset,0 10px 26px -16px var(--glow-blue)}
.ref code{white-space:nowrap;font:800 clamp(20px,3vw,30px)/1 var(--font);letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.copy{border:0;font:700 14px/1 var(--font);color:var(--blue-deep);background:#E9F0FF;min-height:40px;padding:0 14px;border-radius:999px;cursor:pointer}
.copy.done{color:var(--ok);background:var(--ok-soft)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{position:relative;display:flex;gap:14px;padding:0 0 22px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:rgba(31,91,255,.15)}
.timeline li:last-child::before{display:none}
.dot{flex:0 0 28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#E9EEF8;color:var(--muted);font-weight:800;font-size:13px}
.dot svg{width:15px;height:15px}
.timeline .done .dot{background:var(--blue);color:#fff}
.timeline .now .dot{background:#fff;color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 4px 16px -2px var(--glow-aqua);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 2px var(--blue),0 6px 22px 2px var(--glow-aqua)}}
.timeline b{display:block;font-size:16px}
.timeline span{font-size:15px;color:var(--muted)}
.status-pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--blue-deep);background:#E9F0FF}
.status-pill::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--blue);box-shadow:0 2px 8px var(--glow-blue)}

/* ---------- timed test ---------- */
.test-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.timer{display:flex;align-items:center;gap:12px}
.timer svg{width:64px;height:64px;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:6}
.timer .track{stroke:rgba(31,91,255,.12)}
.timer .bar{stroke:url(#tg);stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:62;filter:drop-shadow(0 0 4px rgba(22,184,204,.5))}
.timer b{font-size:24px;font-variant-numeric:tabular-nums}
.timer span{display:block;font-size:13px;color:var(--muted)}
.options{display:flex;flex-direction:column;gap:10px}
.option{position:relative}
.option input{position:absolute;opacity:0}
.option span{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1.5px rgba(14,30,58,.1) inset;cursor:pointer;color:var(--ink-2);transition:all .3s var(--ease)}
.option span i{flex:0 0 30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--blue-deep);background:#EEF3FF}
.option input:checked + span{color:var(--ink);box-shadow:0 0 0 2px var(--blue) inset,0 10px 24px -14px var(--glow-blue),0 8px 22px -14px var(--glow-pink)}
.option input:checked + span i{color:#fff;background:var(--blue)}
.option input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rule{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(14,30,58,.07)}
.rule b{display:block;margin-bottom:2px}
.rule span{font-size:15px;color:var(--ink-2)}

/* ---------- stores / how it works ---------- */
.regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:40px}
.region .frame{aspect-ratio:16/8}
.region h2{margin:26px 0 14px;font-size:24px;font-weight:800}
.store-list{display:grid;gap:12px}
.store{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 10px;border-radius:20px;text-decoration:none;color:var(--ink);background:var(--glass-strong);box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(31,91,255,.1),0 10px 24px -16px var(--glow-blue);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.store:hover{transform:translateX(4px);box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(31,91,255,.28),0 14px 28px -14px var(--glow-blue)}
.store b{display:block;font-size:17px}
.store span{font-size:14px;color:var(--muted)}
.store .go{margin-left:auto;font-weight:700;font-size:14px;color:var(--blue-deep);white-space:nowrap}
.flow{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.flow li{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:26px;background:var(--glass-strong);box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 1px rgba(31,91,255,.1),0 20px 40px -28px rgba(14,30,58,.4)}
.flow li::after{counter-increment:s;content:counter(s);position:absolute;top:18px;right:20px;font:800 34px/1 var(--font);color:transparent;-webkit-text-stroke:1.5px rgba(31,91,255,.28)}
.flow h3{margin:0;font-size:19px;font-weight:800}
.flow p{margin:0;font-size:15px;color:var(--ink-2)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px}
.privacy-list{display:grid;gap:16px;margin-top:36px}
.privacy-list .panel{display:flex;gap:18px;align-items:flex-start}
.privacy-list p{margin:6px 0 0;color:var(--ink-2)}

/* ---------- footer ---------- */
.foot{max-width:1180px;margin:80px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.foot a{font-weight:600}

/* ---------- page switching + review bar ---------- */
.page{display:none}
.page.on{display:block;animation:enter .6s var(--ease)}
@keyframes enter{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}


/* ===== v2 polish: moving gradient 3D text, glowing rims, colourful questions ===== */
.g3d,.job h3,.store b,.prose h2,.panel h2,.panel h3,.flow h3,.rule b,.region h2,.timeline b,.chip .gt{
  background:linear-gradient(90deg,#0E8FA6 0%,#1F5BFF 14%,#6A3DF0 30%,#E0004F 46%,#6A3DF0 62%,#1F5BFF 80%,#0E8FA6 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(20,36,110,.45)) drop-shadow(0 2px 0 rgba(20,36,110,.22)) drop-shadow(0 6px 10px rgba(31,91,255,.22));
  animation:gshift 9s ease-in-out infinite alternate}
.chip{position:relative}
.filters{isolation:isolate}
.job h3,.prose h2,.panel h2,.panel h3,.flow h3,.region h2{display:inline-block;align-self:flex-start}
.chip{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#16B8CC,#1F5BFF,#6A3DF0,#F80058) border-box;font-weight:700;box-shadow:0 8px 18px -12px var(--glow-violet)}
.chip:hover{box-shadow:0 10px 22px -10px var(--glow-violet),0 6px 16px -10px rgba(248,0,88,.4);transform:translateY(-2px)}
.chip[aria-pressed="true"]{border-color:transparent;background:linear-gradient(135deg,#16B8CC,#1F5BFF 40%,#6A3DF0 75%,#F80058) border-box;background-size:200% 100%;animation:gshift 6s ease-in-out infinite alternate}
.chip[aria-pressed="true"] .gt{background:none;-webkit-text-fill-color:#fff;color:#fff;filter:none;animation:none}
.chip .gt{filter:drop-shadow(0 1px 0 rgba(20,36,110,.3))}
/* store chips v4: same look as the Apply now button */
.chip,.chip[aria-pressed="true"]{border:0;color:#fff;background:linear-gradient(180deg,#3567F5 0%,#1F5BFF 45%,#1946CF 100%);animation:none;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(10,30,110,.25) inset,0 10px 20px -10px rgba(31,91,255,.8),0 8px 20px -12px var(--glow-pink)}
.chip .gt,.chip[aria-pressed="true"] .gt{background:none;-webkit-text-fill-color:#fff;color:#fff;animation:none;filter:none}
.chip:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(10,30,110,.25) inset,0 14px 26px -10px rgba(31,91,255,.9),0 8px 20px -10px var(--glow-pink)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,#1F4FE0 0%,#1440C4 55%,#0E2F9E 100%);
  box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(31,91,255,.55),0 2px 0 rgba(255,255,255,.3) inset,0 14px 26px -10px rgba(31,91,255,.9)}

/* tags v4: same look as the Apply now button, smaller */
.tag{color:#fff;background:linear-gradient(180deg,#3567F5 0%,#1F5BFF 45%,#1946CF 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(10,30,110,.25) inset,0 6px 14px -8px rgba(31,91,255,.8)}
.tag > span{background:none;-webkit-text-fill-color:#fff;color:#fff}
.tag svg{color:#fff}
@keyframes gshift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.job h3{font-size:26px}
.store b{font-size:18px;font-weight:800}

/* glowing animated rim, reusable */
.rim{position:relative;isolation:isolate}
.rim::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--a,0deg),rgba(31,91,255,0),rgba(31,91,255,.85),rgba(106,61,240,.75),rgba(248,0,88,.8),rgba(255,255,255,0) 45%,rgba(255,255,255,0) 58%,rgba(22,184,204,.85),rgba(31,91,255,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear infinite}
.rim::after{content:"";position:absolute;inset:-14px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 20% 20%,rgba(22,184,204,.35),transparent 70%),radial-gradient(60% 70% at 85% 85%,rgba(248,0,88,.28),transparent 70%),radial-gradient(50% 60% at 60% 40%,rgba(106,61,240,.22),transparent 70%);
  filter:blur(16px);opacity:.75;animation:breatheGlow 5s ease-in-out infinite;transition:opacity .5s var(--ease)}
.rim:hover::after{opacity:1}
@keyframes breatheGlow{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.95;transform:scale(1.02)}}

/* job cards: photo inside, glow rim outside, gently moving photo */
.job{overflow:visible}
.job .pic{border-radius:28px 28px 0 0}
.job .pic img{animation:drift 16s ease-in-out infinite alternate}
.job:nth-child(2) .pic img{animation-delay:-5s}.job:nth-child(3) .pic img{animation-delay:-9s}.job:nth-child(4) .pic img{animation-delay:-13s}
@keyframes drift{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-2%,-2%)}}
.job:hover .pic img{animation-play-state:paused}
.job .body{padding:22px 24px 24px}
.job .pic::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(31,91,255,.18));pointer-events:none}

/* question pages: colourful statement cards */
.statement{position:relative;background:linear-gradient(135deg,#FFFFFF 0%,#F5F1FF 45%,#EEF6FF 100%);box-shadow:0 20px 40px -28px rgba(31,91,255,.5);border-radius:24px}
.statement p{font-size:20px}
.statement:has(input:checked)::before{animation-duration:3.5s}
.statement:has(input:checked)::after{opacity:1}
.scale span{position:relative;font-weight:700;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.scale label:nth-child(1) span{background:#FFE3EC;color:#9E0F3F}
.scale label:nth-child(2) span{background:#FBEAF6;color:#8A1A6A}
.scale label:nth-child(3) span{background:#EFEAFE;color:#4B2BB8}
.scale label:nth-child(4) span{background:#E4ECFF;color:#1646CC}
.scale label:nth-child(5) span{background:#DDF6FB;color:#0B6F82}
.scale span:hover{transform:translateY(-3px);box-shadow:0 10px 20px -12px var(--glow-violet)}
.scale label:nth-child(1) input:checked + span{color:#fff;background:linear-gradient(135deg,#FF2E6E,#C80046)}
.scale label:nth-child(2) input:checked + span{color:#fff;background:linear-gradient(135deg,#E0247F,#8E2BD0)}
.scale label:nth-child(3) input:checked + span{color:#fff;background:linear-gradient(135deg,#7B4BFF,#5229D6)}
.scale label:nth-child(4) input:checked + span{color:#fff;background-color:#1946CF;background-image:linear-gradient(135deg,#3B6BFF,#1946CF)}
.scale label:nth-child(5) input:checked + span{color:#fff;background:linear-gradient(135deg,#16B8CC,#1F5BFF)}
.scale input:checked + span{box-shadow:0 12px 24px -10px var(--glow-violet),0 0 0 3px rgba(255,255,255,.9);transform:translateY(-3px) scale(1.03)}
.qnum{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,#1F5BFF,#6A3DF0 55%,#C8004A);box-shadow:0 8px 16px -8px var(--glow-violet)}
.statement .qrow{display:flex;gap:14px;align-items:flex-start}
.progress{height:8px;border-radius:999px;background:rgba(31,91,255,.12);overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,#16B8CC,#1F5BFF,#6A3DF0,#F80058);background-size:200% 100%;animation:gshift 4s linear infinite alternate}
.option span{background:linear-gradient(135deg,#FFFFFF,#F6F3FF)}
.option span i{background:linear-gradient(135deg,#E4ECFF,#F3E6FF)}
.option input:checked + span{background:linear-gradient(135deg,#FFFFFF,#EEF3FF 60%,#FDEBF2)}
.option input:checked + span i{background-color:#1F5BFF;background-image:linear-gradient(135deg,#1F5BFF,#6A3DF0,#C8004A)}

/* job cards v3: rounder 3D shell, light blue outer glow, blue gradient inside on the right */
.job{border-radius:34px;
  background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 38%,#EAF2FF 62%,#C9DCFF 84%,#9DBEFF 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,1),inset 0 -8px 18px -6px rgba(31,91,255,.28),inset -10px 0 24px -14px rgba(20,60,200,.45),
    0 0 0 1px rgba(120,180,255,.55),0 0 26px 2px rgba(90,170,255,.42),0 26px 44px -26px rgba(20,60,200,.55)}
.job:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,1),inset 0 -8px 18px -6px rgba(31,91,255,.3),inset -10px 0 24px -14px rgba(20,60,200,.5),
    0 0 0 1px rgba(120,180,255,.8),0 0 40px 6px rgba(90,170,255,.55),0 34px 54px -26px rgba(20,60,200,.6)}
.job .pic{border-radius:34px 34px 0 0}
.job.rim::before{background:conic-gradient(from var(--a,0deg),rgba(90,190,255,0),rgba(90,190,255,.95),rgba(31,91,255,.9),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(120,210,255,.9),rgba(90,190,255,0))}
.job.rim::after{background:radial-gradient(60% 70% at 25% 20%,rgba(110,200,255,.45),transparent 70%),radial-gradient(60% 70% at 85% 80%,rgba(31,91,255,.35),transparent 70%)}
.job p{color:#33415C}


/* question cards v3: white inside, blue glowing rim, plain blue numbers */
.statement{background:#fff;box-shadow:0 0 0 1px rgba(120,180,255,.6),0 0 24px 2px rgba(90,170,255,.38),0 20px 36px -26px rgba(20,60,200,.5)}
.statement.rim::before{background:conic-gradient(from var(--a,0deg),rgba(90,190,255,0),rgba(90,190,255,.95),rgba(31,91,255,.9),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(120,210,255,.9),rgba(90,190,255,0))}
.statement.rim::after{background:radial-gradient(60% 70% at 20% 30%,rgba(110,200,255,.4),transparent 70%),radial-gradient(60% 70% at 85% 75%,rgba(31,91,255,.3),transparent 70%)}
.qnum{background:#1F5BFF;box-shadow:0 8px 16px -8px rgba(31,91,255,.7)}

/* page title images */
.timg{position:relative;margin:0 auto;line-height:0;width:min(var(--w,820px),100%)}
.timg img{width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(31,91,255,.16)) drop-shadow(0 18px 30px rgba(248,0,88,.12))}
.timg .sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.1) 53%,transparent 62%) -160% 0/60% 100% no-repeat;mix-blend-mode:soft-light;animation:sheen 7s var(--ease) 1.2s infinite}
.role-head .timg{margin:0}
.page-head[style*="text-align:left"] .timg{margin:0}
@media (max-width:880px){.statement p{font-size:18px}}

/* ---------- responsive ---------- */
@media (max-width:1060px){ .roles{grid-template-columns:repeat(2,minmax(0,1fr))} .flow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:880px){
  .tabs,.nav-cta{display:none}
  .brand-name img{height:20px}
  .brand > img{width:40px;height:40px}
  .menu-btn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:999px;border:0;background:var(--glass-strong);box-shadow:0 0 0 1px rgba(14,30,58,.1),0 6px 18px -8px var(--glow-blue);color:var(--ink);cursor:pointer}
  .menu-btn svg{width:20px;height:20px}
  .menu-panel.open{display:flex;position:absolute;right:0;top:58px;flex-direction:column;gap:4px;min-width:230px;padding:8px;border-radius:22px;background:var(--glass-strong);backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(31,91,255,.12),0 20px 40px -20px rgba(14,30,58,.45);animation:enter .4s var(--ease)}
  .menu-panel a{padding:14px 16px;border-radius:14px;text-decoration:none;font-weight:600;color:var(--ink)}
  .menu-panel a:hover{background:#EEF3FF}
  .stage{grid-template-columns:1fr 1fr}
  .center{grid-column:1/-1;order:-1;width:74%;margin:0 auto}
  .side{transform:none}
  .roles{grid-template-columns:1fr;margin-top:28px}
  .jobs,.regions,.two,.rules{grid-template-columns:1fr}
  .role-grid{grid-template-columns:1fr}
  .side-card{position:static}
  .form{grid-template-columns:1fr}
  .panel{padding:22px}
  .flow{grid-template-columns:1fr}
  .scale{grid-template-columns:1fr}
  .scale span{min-height:46px;justify-content:flex-start;padding:0 16px}
  .steps li{font-size:12px}
  }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}