/* ============================================================
   OCTANE FUEL — Design Tokens
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;700&display=swap');

   :root {
     /* Brand */
     --octane-orange:        #FF520A;
     --octane-orange-hover:  #E64709;
     --octane-orange-press:  #C73C07;
     --octane-yellow:        #FFDD1E;
     --octane-amber:         #FFBA18;
     --octane-orange-soft:   rgba(255, 82, 10, 0.20);
     --octane-yellow-soft:   rgba(255, 221, 30, 0.20);
   
     /* Brand gradients */
     --octane-gradient:      linear-gradient(180deg, #FFDD1E 0%, #FF520A 100%);
   
     /* Semantic */
     --success: #1F8A5B;
     --warning: #FFBA18;
     --danger:  #E0392B;
     --info:    #2A6FDB;
   
     /* Typography */
     --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
     --fw-light:   300;
     --fw-regular: 400;
     --fw-medium:  500;
     --fw-bold:    700;
   
     /* Radii */
     --r-xs:   4px;
     --r-sm:   6px;
     --r-md:   8px;
     --r-lg:   16px;
     --r-xl:   24px;
     --r-pill: 1600px;
     --r-full: 9999px;
   
     /* Spacing */
     --s-1: 4px;  --s-2: 8px;   --s-3: 10px; --s-4: 16px;
     --s-5: 20px; --s-6: 24px;  --s-7: 30px; --s-8: 40px;
     --s-9: 50px; --s-10: 60px; --s-11: 80px; --s-12: 100px;
   
     /* Motion */
     --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
     --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
     --t-fast: 120ms;
     --t-base: 200ms;
     --t-slow: 360ms;
   }
   
   /* ============================================================
      Octane Careers v3 — custom styles (light/dark, hero zoom,
      all sections).
      ============================================================ */
   
   * { box-sizing: border-box; }
   html, body { margin: 0; padding: 0; }
   html { overflow-x: clip; } /* clip doesn't create a scroll container, keeps position:sticky working */
   
   /* Override tokens.css body background and color — we use .page-bg layer and --ink-1 */
   html, body { background: transparent; }
   body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; color: var(--ink-1); }
   
   /* ─────────── Theme variables ─────────── */
   :root,
   .theme-light {
     --page-bg:          #F5F5F5;
     --surface:          #FFFFFF;
     --surface-2:        rgba(255,255,255,0.65);
     --surface-strong:   rgba(255,255,255,0.85);
     --ink-1:            #1A1A1A;
     --ink-2:            rgba(26,26,26,0.78);
     --ink-3:            rgba(26,26,26,0.55);
     --ink-4:            rgba(26,26,26,0.30);
     --hairline:         rgba(26,26,26,0.10);
     --hairline-soft:    rgba(26,26,26,0.06);
     --glass-bg:         rgba(255,255,255,0.55);
     --glass-bg-strong:  rgba(255,255,255,0.72);
     --glass-stroke:     rgba(255,255,255,0.65);
     --glass-stroke-soft:rgba(255,255,255,0.4);
     --glass-inner:      inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(26,26,26,0.04);
     --glow-1:           #FFDD1E;
     --glow-2:           #FF520A;
     --shadow-card:      0 2px 6px rgba(0,0,0,0.04), 0 18px 40px -8px rgba(0,0,0,0.10);
     --shadow-float:     0 4px 12px rgba(0,0,0,0.06), 0 30px 60px -16px rgba(0,0,0,0.14);
     --nav-bg:           rgba(245,245,245,0.62);
   }
   
   .theme-dark {
     --page-bg:          #0A0A0B;
     --surface:          #1A1A1C;
     --surface-2:        rgba(255,255,255,0.04);
     --surface-strong:   rgba(255,255,255,0.08);
     --ink-1:            #F5F5F5;
     --ink-2:            rgba(245,245,245,0.82);
     --ink-3:            rgba(245,245,245,0.58);
     --ink-4:            rgba(245,245,245,0.30);
     --hairline:         rgba(255,255,255,0.10);
     --hairline-soft:    rgba(255,255,255,0.05);
     --glass-bg:         rgba(255,255,255,0.04);
     --glass-bg-strong:  rgba(255,255,255,0.08);
     --glass-stroke:     rgba(255,255,255,0.12);
     --glass-stroke-soft:rgba(255,255,255,0.06);
     --glass-inner:      inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.30);
     --glow-1:           #FFB91E;
     --glow-2:           #FF520A;
     --shadow-card:      0 2px 6px rgba(0,0,0,0.4), 0 18px 40px -8px rgba(0,0,0,0.5);
     --shadow-float:     0 4px 12px rgba(0,0,0,0.4), 0 30px 60px -16px rgba(0,0,0,0.6);
     --nav-bg:           rgba(10,10,11,0.55);
   }
   
   /* ─────────── Page chrome ─────────── */
   .page-bg {
     position: fixed; inset: 0; z-index: 0;
     background: var(--page-bg);
     pointer-events: none;
     transition: background var(--t-slow) var(--ease-out);
   }
   .ambient {
     position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
   }
   .ambient::before, .ambient::after {
     content: ''; position: absolute; border-radius: 50%;
     filter: blur(110px); opacity: .55;
     will-change: transform;
   }
   .ambient::before {
     width: 720px; height: 720px;
     background: radial-gradient(circle, var(--glow-2) 0%, transparent 60%);
     top: -200px; right: -200px;
     animation: drift1 22s ease-in-out infinite alternate;
   }
   .ambient::after {
     width: 600px; height: 600px;
     background: radial-gradient(circle, var(--glow-1) 0%, transparent 60%);
     top: 40vh; left: -200px; opacity: .35;
     animation: drift2 28s ease-in-out infinite alternate;
   }
   .theme-dark .ambient::before { opacity: .25; }
   .theme-dark .ambient::after  { opacity: .14; }
   @keyframes drift1 { from{transform:translate(0,0)} to{transform:translate(-80px,60px)} }
   @keyframes drift2 { from{transform:translate(0,0)} to{transform:translate(120px,-80px)} }
   .ambient__noise {
     position: absolute; inset: 0;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
     opacity: .06; mix-blend-mode: overlay;
   }
   
   main { position: relative; z-index: 2; }
   
   /* ─────────── Container ─────────── */
   .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
   
   /* ─────────── Glass ─────────── */
   .glass {
     background: var(--glass-bg);
     backdrop-filter: blur(28px) saturate(180%);
     -webkit-backdrop-filter: blur(28px) saturate(180%);
     border: 1px solid var(--glass-stroke);
     box-shadow: var(--glass-inner), var(--shadow-card);
     border-radius: 24px;
   }
   
   /* ─────────── Buttons ─────────── */
   .btn {
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
     height: 44px; padding: 0 22px; border: 0; cursor: pointer;
     border-radius: 999px; font-family: var(--font-sans);
     font-weight: 500; font-size: 15px; line-height: 1;
     text-decoration: none; white-space: nowrap;
     transition: transform var(--t-base) var(--ease-out), background var(--t-fast), box-shadow var(--t-base);
     position: relative; overflow: hidden;
   }
   .btn--primary {
     background: var(--octane-orange); color: #fff;
     box-shadow: 0 6px 20px -4px rgba(255,82,10,.55), inset 0 1px 0 rgba(255,255,255,.25);
   }
   .btn--primary:hover  { background: var(--octane-orange-hover); transform: translateY(-1px); box-shadow: 0 10px 28px -4px rgba(255,82,10,.65), inset 0 1px 0 rgba(255,255,255,.25); color:#fff; }
   .btn--primary:active { transform: translateY(0); background: var(--octane-orange-press); }
   .btn--primary::after {
     content: ''; position: absolute; inset: 0;
     background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
     transform: translateX(-100%); transition: transform 1.1s var(--ease-out);
   }
   .btn--primary:hover::after { transform: translateX(100%); }
   .btn--ghost {
     background: rgba(255,255,255,0.14);
     border: 1px solid rgba(255,255,255,0.25);
     color: #fff;
     backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
   }
   .btn--ghost:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); color:#fff; }
   .btn--ghost--dark {
     background: var(--glass-bg-strong);
     border: 1px solid var(--glass-stroke-soft);
     color: var(--ink-1);
     backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
   }
   .btn--ghost--dark:hover { background: var(--surface-strong); transform: translateY(-1px); }
   .btn--lg  { height: 54px; padding: 0 30px; font-size: 16px; }
   .btn--sm  { height: 36px; padding: 0 16px; font-size: 16px; }
   .btn--block { width: 100%; display: flex; }
   
   /* ─────────── Typography ─────────── */
   h1,h2,h3,h4 { color: var(--ink-1); font-family: var(--font-sans); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
   h1 { font-size: clamp(44px,6vw,76px); }
   h2 { font-size: clamp(34px,4vw,52px); letter-spacing: -0.018em; line-height: 1.04; }
   h3 { font-size: clamp(22px,2.4vw,28px); letter-spacing: -0.01em; line-height: 1.15; }
   h4 { font-size: 20px; line-height: 1.2; }
   p  { color: var(--ink-2); font-weight: 300; line-height: 1.5; margin: 0; }
   .lead { font-size: clamp(18px,1.6vw,22px); font-weight: 300; color: var(--ink-2); line-height: 1.45; }
   .eyebrow {
     font-size: 18px; font-weight: 600; letter-spacing: 0.14em; color: var(--octane-orange);
     text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px;
   }
   .eyebrow::before { content:''; width:22px; height:1px; background: var(--octane-orange); display:inline-block; }
   .accent   { color: var(--octane-orange); }
   .grad-text {
     background: linear-gradient(180deg, var(--glow-1) 0%, var(--glow-2) 75%);
     -webkit-background-clip: text; background-clip: text; color: transparent;
   }
   strong { font-weight: 500; color: var(--ink-1); }
   ::selection { background: var(--octane-orange); color: #fff; }
   
   /* ─────────── Sections ─────────── */
   section { position: relative; padding: 96px 0; background: transparent; }
   section.hero--zoom { padding: 0; }
   .section__head { max-width: 720px; margin-bottom: 56px; display: flex; flex-direction: column; gap: 18px; }
   
   /* ─────────── NAV ─────────── */
   .nav {
     position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
     z-index: 50; width: calc(100% - 32px); max-width: 1080px;
     display: flex; align-items: center; justify-content: space-between;
     padding: 10px 14px 10px 22px; border-radius: 999px;
     background: var(--nav-bg);
     backdrop-filter: blur(28px) saturate(180%);
     -webkit-backdrop-filter: blur(28px) saturate(180%);
     border: 1px solid var(--glass-stroke-soft);
     box-shadow: var(--glass-inner), 0 12px 30px -10px rgba(0,0,0,0.12);
     transition: background var(--t-slow) var(--ease-out), border-color var(--t-slow);
   }
   .nav__brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
   .nav__logo { height: 22px; transition: filter var(--t-slow) var(--ease-out); }
   .theme-dark .nav__logo { filter: invert(1) brightness(2); }
   .nav__sub {
     font-size:13px; font-weight:400; letter-spacing:0.04em;
     color: var(--ink-3); padding-left:12px; border-left:1px solid var(--hairline);
   }
   .nav__links { display:flex; gap:28px; align-items:center; }
   .nav__links a { color: var(--ink-2); font-size:16px; text-decoration:none; font-weight:500; transition: color var(--t-fast); }
   .nav__links a:hover { color: var(--octane-orange); }
   .nav__actions { display:flex; gap:8px; align-items:center; }
   
   .theme-toggle {
     width:38px; height:38px; border-radius:999px;
     background: var(--glass-bg-strong);
     border:1px solid var(--glass-stroke-soft);
     cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
     color: var(--ink-1); transition: transform var(--t-base) var(--ease-out);
     position:relative; overflow:hidden;
   }
   .theme-toggle:hover { transform: rotate(15deg); }
   .theme-toggle svg { width:18px; height:18px; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow); }
   .theme-toggle .icon-sun, .theme-toggle .icon-moon { position:absolute; }
   .theme-toggle .icon-sun  { transform:scale(1) rotate(0); opacity:1; }
   .theme-toggle .icon-moon { transform:scale(.3) rotate(-90deg); opacity:0; }
   .theme-dark .theme-toggle .icon-sun  { transform:scale(.3) rotate(90deg); opacity:0; }
   .theme-dark .theme-toggle .icon-moon { transform:scale(1) rotate(0); opacity:1; }
   
   /* ═══════════════════════════════════════
      HERO ZOOM
   ═══════════════════════════════════════ */
   .hero--zoom {
     height: 300vh;
     background: transparent;
     overflow: visible;
     border-bottom: none;
   }
   .hero-sticky {
     position: sticky; top: 0;
     height: 100vh;
     overflow: hidden;
     background: #000;
   }
   .hero-grid-wrap {
     position: absolute; inset: 0;
     display: flex; align-items: center; justify-content: center;
   }
   .hero-grid {
     width: 100%;
     aspect-ratio: 16 / 9;
     min-height: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     gap: 15px;
     transform: scale3d(3.1, 3.1, 1);
     transform-origin: center;
     will-change: transform;
   }
   .hero-img {
     width: 100%; height: 100%;
     object-fit: cover; display: block;
     border-radius: 6px;
     image-rendering: high-quality;
     image-rendering: -webkit-optimize-contrast;
   }
   .hero-overlay {
     position: absolute; inset: 0;
     background: #000; opacity: 0.55;
     z-index: 1; pointer-events: none;
     will-change: opacity;
   }
   .hero-content {
     position: absolute; inset: 0; z-index: 2;
     display: flex; flex-direction: column;
     align-items: center;
     padding: 100px 28px 36px;
     pointer-events: none; color: #fff;
     will-change: opacity;
   }
   .hero-content__main {
     flex: 1;
     display: flex; flex-direction: column;
     align-items: center; justify-content: center;
     text-align: center; gap: 24px;
     max-width: 920px; width: 100%;
   }
   .hero-content a, .hero-content button { pointer-events: auto; }
   
   /* Hero signal pill */
   .hero-signal {
     display: inline-flex; align-items: center; gap: 10px;
     padding: 8px 16px 8px 12px; border-radius: 999px;
     background: rgba(255,255,255,0.12);
     backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255,255,255,0.2);
     font-size: 16px; color: rgba(255,255,255,0.9);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
   }
   .hero-pulse {
     width: 8px; height: 8px; border-radius: 50%;
     background: var(--octane-orange); position: relative; flex-shrink: 0;
   }
   .hero-pulse::after {
     content: ''; position: absolute; inset: 0; border-radius: 50%;
     background: var(--octane-orange);
     animation: ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
   }
   @keyframes ping {
     0%      { transform: scale(1); opacity: .7; }
     80%,100%{ transform: scale(2.6); opacity: 0; }
   }
   
   /* Hero h1 */
   .hero-h1 { color: #fff; font-size: clamp(48px, 7vw, 88px); line-height: 0.96; letter-spacing: -0.03em; text-wrap: balance; }
   
   /* Hero CTA row */
   .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
   
   /* Hero sub-text */
   .hero-sub { font-size: 16px; color: rgba(255,255,255,0.65); }
   
   /* Hero stats (glass on dark) */
   .hero-stats {
     width: 100%; max-width: 1100px;
     display: grid; grid-template-columns: repeat(3, 1fr);
     padding: 28px 32px;
     background: rgba(0,0,0,0.35);
     backdrop-filter: blur(28px) saturate(180%);
     -webkit-backdrop-filter: blur(28px) saturate(180%);
     border: 1px solid rgba(255,255,255,0.14);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
     border-radius: 20px;
     pointer-events: none;
   }
   .hero-stats .stat {
     display: flex; flex-direction: column; gap: 8px;
     padding: 0 24px; border-right: 1px solid rgba(255,255,255,0.10);
   }
   .hero-stats .stat:last-child { border-right: 0; }
   .hero-stats .stat .v { font-size: clamp(24px,3vw,38px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: #fff; }
   .hero-stats .stat .l { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.35; font-weight: 400; }
   
   /* Scroll hint */
   .scroll-hint {
     position: absolute; bottom: 32px; left: 50%;
     transform: translateX(-50%);
     z-index: 3; font-size: 12px; letter-spacing: 0.2em;
     text-transform: uppercase; color: #fff; opacity: 0.6;
     animation: hint-bounce 2s infinite;
     transition: opacity 0.4s; pointer-events: none;
   }
   .scroll-hint.is-hidden { opacity: 0; animation: none; }
   @keyframes hint-bounce {
     0%,100%{ transform: translate(-50%, 0); }
     50%    { transform: translate(-50%, 8px); }
   }
   
   /* ─────────── ABOUT ─────────── */
   .about { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: start; }
   .about__copy { display: flex; flex-direction: column; gap: 18px; }
   .about__copy p { font-size: 17px; line-height: 1.55; }
   .about__sidebar { display: flex; flex-direction: column; gap: 14px; padding: 28px; align-self: center; }
   .about__chip {
     display: inline-flex; align-items: center; gap: 10px;
     padding: 15px 25px; border-radius: 999px;
     background: var(--surface-2); border: 1px solid var(--hairline-soft);
     font-size: 16px; color: var(--ink-2); align-self: flex-start; font-weight: 600;
   }
   .about__chip .dot {
     width: 8px; height: 8px; border-radius: 50%; background: var(--octane-orange);
     box-shadow: 0 0 0 4px rgba(255,82,10,.18);
     animation: pulse 2.4s ease-out infinite;
   }
   @keyframes pulse {
     0%   { box-shadow: 0 0 0 0 rgba(255,82,10,.5); }
     100% { box-shadow: 0 0 0 14px rgba(255,82,10,0); }
   }
   .about__quote {
     font-size: 20px; font-weight: 400; line-height: 1.3;
     color: var(--ink-1); letter-spacing: -0.01em;
   }
   .about__byline { font-size: 16px; color: var(--ink-3); }
   .about__tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
   .tag {
     display: inline-flex; align-items: center; gap: 6px;
     padding: 5px 12px; border-radius: 999px; font-size: 16px; font-weight: 500;
     background: var(--surface-2); border: 1px solid var(--hairline-soft); color: var(--ink-2);
   }
   .tag svg{
       display:none;
   }
   .tag--accent {
     background: rgba(255,82,10,.12); color: var(--octane-orange);
     border-color: rgba(255,82,10,.25);
   }
   .tag--accent .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--octane-orange); animation: pulse 2s ease-out infinite; }
   
   /* Cards 3-column */
   .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
   .card {
     padding: 28px; border-radius: 20px;
     background: var(--glass-bg);
     backdrop-filter: blur(22px) saturate(180%);
     -webkit-backdrop-filter: blur(22px) saturate(180%);
     border: 1px solid var(--glass-stroke-soft);
     box-shadow: var(--glass-inner), var(--shadow-card);
     display: flex; flex-direction: column; gap: 14px;
     position: relative; overflow: hidden;
     transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
   }
   .card::before {
     content: '';
     position: absolute; inset: 0;
     border-radius: inherit;
     background: radial-gradient(500px circle at var(--shine-x, -200%) var(--shine-y, -200%), rgba(255,255,255,0.07), transparent 40%);
     pointer-events: none;
     z-index: 2;
   }
   .card:hover { box-shadow: var(--glass-inner), var(--shadow-float); }
   .card .ic {
     width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
     background: linear-gradient(180deg, var(--octane-yellow) 0%, var(--octane-orange) 100%);
     display: inline-flex; align-items: center; justify-content: center; color: #fff;
     box-shadow: 0 6px 14px -4px rgba(255,82,10,.45);
   }
   .card h3 { font-size: 21px; }
   .card p  { font-size: 15px; color: var(--ink-2); }
   
   /* ─────────── CULTURE pull-quote ─────────── */
   .pull {
     text-align: center; max-width: 880px; margin: 0 auto;
     padding: 64px 48px;
   }
   .pull h2 { font-size: clamp(26px,3.2vw,40px); font-weight: 600; line-height: 1.2; }
   .pull p  { color: var(--ink-2); }
   .marker {
     width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 28px;
     background: url(../photo/logo-black.png) no-repeat center;
     background-size: contain;
     
   }
   .theme-dark  .marker{
     background: url(../photo/logo-dark-theme.png) no-repeat center;
     background-size: contain;
   }
   
   /* ─────────── ROLE ─────────── */
   .role  { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
   .role__main  { padding: 36px; }
   .role__aside { padding: 28px; position: sticky; top: 100px; }
   .role__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
   .role__sub { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
   
   .role__tabs {
     display: flex; gap: 4px; padding: 4px; margin: 32px 0 24px;
     background: var(--surface-2); border-radius: 14px;
     border: 1px solid var(--hairline-soft); width: fit-content; flex-wrap: wrap;
   }
   .role__tab {
     border: 0; background: transparent; color: var(--ink-3);
     padding: 10px 18px; border-radius: 10px;
     font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
     transition: all var(--t-base) var(--ease-out); white-space: nowrap;
   }
   .role__tab:hover { color: var(--ink-1); }
   .role__tab.active { background: var(--surface); color: var(--ink-1); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
   .theme-dark .role__tab.active { background: rgba(255,255,255,.08); }
   
   .role__panel { display: flex; flex-direction: column; gap: 14px; }
   .role__panel--enter { animation: panelFade .4s var(--ease-out); }
   @keyframes panelFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
   
   .role-item {
     display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
     padding: 14px 4px; border-bottom: 1px solid var(--hairline-soft);
   }
   .role-item:last-child { border-bottom: 0; }
   .role-item__n { font-size: 16px; font-weight: 500; letter-spacing: 0.1em; color: var(--octane-orange); margin-top: 0px; }
   .role-item h4 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
   .role-item p  { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
   
   .role__aside h4 { font-size: 14px; color: var(--ink-3); letter-spacing: 0.08em; font-weight: 500; }
   .role-fact { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--hairline-soft); font-size: 14px; }
   .role-fact:first-of-type { border-top: 1px solid var(--hairline); margin-top: 18px; }
   .role-fact .k { color: var(--ink-3); }
   .role-fact .v { color: var(--ink-1); font-weight: 500; }
   
   /* ─────────── DEPARTMENTS ─────────── */
   .depts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
   .dept {
     padding: 22px; border-radius: 16px;
     background: var(--glass-bg);
     backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: 1px solid var(--glass-stroke-soft);
     box-shadow: var(--glass-inner);
     display: flex; flex-direction: column; gap: 10px;
     transition: transform var(--t-base) var(--ease-out), background var(--t-base);
     cursor: default;
     min-height:165px;
   }
   .dept:hover { transform: translateY(-2px); background: var(--glass-bg-strong); }
   .dept__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
   .dept__num  { font-size: 12px; color: var(--ink-4); font-weight: 500; letter-spacing: 0.08em; }
   .dept h4   { font-size: 20px; font-weight: 500; line-height: 1.25; }
   .dept__sub  { font-size: 16px; color: var(--ink-3); }
   .dept--hiring { background: linear-gradient(150deg, rgba(255,82,10,.16), rgba(255,221,30,.12)); border-color: rgba(255,82,10,.22); }
   
   /* ─────────── HONESTY ─────────── */
   .honesty { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
   .honesty__panel { padding: 32px; }
   .honesty__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
   .honesty__ic {
     width: 36px; height: 36px; border-radius: 12px;
     display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
   }
   .honesty__panel--yes .honesty__ic { background: rgba(31,138,91,.14); color: var(--success); }
   .honesty__panel--no  .honesty__ic { background: rgba(224,57,43,.12); color: var(--danger); }
   .honesty__title { font-size: 20px; font-weight: 500; color: var(--ink-1); }
   .honesty ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
   .honesty li {
     font-size: 16px; line-height: 1.45; color: var(--ink-2);
     padding-left: 28px; position: relative; font-weight: 300;
   }
   .honesty li::before {
     content: ''; position: absolute; left: 0; top: 8px;
     width: 16px; height: 2px; border-radius: 2px;
   }
   .honesty__panel--yes li::before { background: var(--success); }
   .honesty__panel--no  li::before { background: var(--danger); }
   
   /* ─────────── STEPS / HOW WE HIRE ─────────── */
   .steps__rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; position: relative; }
   .steps__line {
     position: absolute; top: 38px; left: 5%; right: 5%; height: 2px;
     background: linear-gradient(90deg, transparent, var(--hairline) 8%, var(--hairline) 92%, transparent);
     z-index: 0;
   }
   .steps__progress {
     position: absolute; top: 38px; left: 5%; height: 2px;
     background: linear-gradient(90deg, var(--octane-yellow), var(--octane-orange));
     z-index: 1; border-radius: 2px; width: 0;
   }
   .steps__progress--full { width: 90%; }
   .step {
     position: relative; z-index: 2;
     display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 12px 4px;
   }
   .step__bubble {
     width: 54px; height: 54px; border-radius: 50%;
     background: var(--surface);
     display: inline-flex; align-items: center; justify-content: center;
     font-size: 18px; font-weight: 500; color: var(--ink-1);
     box-shadow: 0 4px 14px -4px rgba(0,0,0,.12);
     transition: all var(--t-slow) var(--ease-out);
   }
   .step.is-active .step__bubble {
     background: linear-gradient(180deg, var(--octane-yellow), var(--octane-orange));
     color: #fff; border-color: transparent;
     box-shadow: 0 8px 20px -4px rgba(255,82,10,.45);
   }
   .step__body { padding: 18px 22px; border-radius: 16px; width: 100%; min-height: 140px; display: flex; flex-direction: column; justify-content: center;}
   .step__body h4 { font-size: 22px; font-weight: 500; margin-bottom: 6px; line-height: 1.2; }
   .step__body p  { font-size: 16px; color: var(--ink-2); line-height: 1.45; }
   
   /* ─────────── FINAL CTA ─────────── */
   .final-cta {
     padding: 80px 60px; text-align: center;
     background: linear-gradient(155deg, rgba(255,221,30,.18), rgba(255,82,10,.18)), var(--surface-strong);
     backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
     border: 1px solid var(--glass-stroke);
     border-radius: 32px;
     box-shadow: var(--glass-inner), var(--shadow-float);
     position: relative; overflow: hidden;
   }
   .final-cta::before {
     content: ''; position: absolute; inset: -2px;
     background: radial-gradient(circle at 50% 0%, rgba(255,82,10,.5), transparent 60%);
     filter: blur(60px); opacity: .5; pointer-events: none;
   }
   .final-cta > * { position: relative; z-index: 1; }
   .final-cta h2 { font-size: clamp(36px,4.5vw,56px); margin-bottom: 12px; }
   .final-cta p  { font-size: 17px; max-width: 560px; margin: 0 auto 28px; }
   .urgency { font-size: 14px; color: var(--ink-3); margin-top: 18px; }
   
   /* ─────────── MODAL ─────────── */
   .modal-overlay {
     position: fixed; inset: 0; z-index: 200;
     /* block layout — flex на overflow-контейнере ломает расчёт scroll-height в Chrome/WebKit */
     padding: 24px 20px;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     background: rgba(0,0,0,0.60);
     opacity: 0; pointer-events: none;
     transition: opacity 320ms var(--ease-out);
   }
   /* backdrop-filter на ::before, не на scroll-контейнере */
   .modal-overlay::before {
     content: '';
     position: fixed; inset: 0; z-index: 0;
     backdrop-filter: blur(10px) saturate(120%);
     -webkit-backdrop-filter: blur(10px) saturate(120%);
     pointer-events: none;
   }
   .modal-overlay.is-open { opacity: 1; pointer-events: auto; }

   .modal {
     position: relative; z-index: 1;
     width: 100%; max-width: 560px;
     margin: 32px auto;
     padding: 44px 44px 36px;
     border-radius: 28px;
     transform: translateY(32px) scale(0.97);
     transition: transform 380ms var(--ease-out);
     flex-shrink: 0;
   }
   .modal.glass::before{
     filter:none !important;
   }
   .modal-overlay::-webkit-scrollbar { width: 4px; }
   .modal-overlay::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
   
   /* Make modal glass more opaque so form is readable */
   .modal.glass::before {
     background: rgba(248,248,248,0.88);
     backdrop-filter: blur(32px) saturate(200%);
     -webkit-backdrop-filter: blur(32px) saturate(200%);
   }
   .theme-dark .modal.glass::before {
     background: rgba(16,16,18,0.90);
   }
   .modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
   
   .modal__close {
     position: absolute; top: 16px; right: 16px; z-index: 2;
     width: 36px; height: 36px; border-radius: 50%;
     background: var(--surface-2); border: 1px solid var(--hairline);
     cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
     color: var(--ink-3);
     transition: background var(--t-base), color var(--t-base), transform var(--t-base) var(--ease-out);
   }
   .modal__close:hover { background: var(--surface); color: var(--ink-1); transform: rotate(90deg); }
   .modal__close svg { width: 16px; height: 16px; }
   
   .modal__head { margin-bottom: 30px; }
   .modal__head .eyebrow { font-size: 13px; }
   .modal__head h3 { font-size: clamp(22px, 3vw, 28px); margin-top: 10px; line-height: 1.1; }
   .modal__head p  { font-size: 15px; color: var(--ink-3); margin-top: 8px; font-weight: 300; }
   
   /* ── Form layout ── */
   .modal__form { display: flex; flex-direction: column; gap: 20px; }
   .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
   
   .form-field { display: flex; flex-direction: column; gap: 7px; }
   
   .form-label {
     font-size: 13px; font-weight: 500;
     color: var(--ink-2); letter-spacing: 0.01em;
   }
   .form-label .req { color: var(--octane-orange); margin-left: 2px; }
   .form-label .opt { color: var(--ink-4); font-weight: 400; margin-left: 4px; font-size: 12px; }
   
   /* Base input / select */
   .form-input {
     width: 100%; height: 48px;
     padding: 0 16px;
     background: var(--surface);
     border: 1.5px solid var(--hairline);
     border-radius: 10px;
     font-family: var(--font-sans); font-size: 15px; font-weight: 400;
     color: var(--ink-1);
     outline: none;
     transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base);
     -webkit-appearance: none; appearance: none;
   }
   .theme-dark .form-input { background: rgba(255,255,255,0.06); }
   .form-input::placeholder { color: var(--ink-4); }
   .form-input:focus {
     border-color: var(--octane-orange);
     box-shadow: 0 0 0 3px rgba(255,82,10,.14);
   }
   .form-input.is-error {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(224,57,43,.10);
   }
   
   /* Telegram @ prefix */
   .input-prefix-wrap { position: relative; }
   .input-prefix-at {
     position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
     font-size: 15px; color: var(--ink-3); pointer-events: none; line-height: 1;
     user-select: none;
   }
   .input-prefix-wrap .form-input { padding-left: 26px; }
   
   /* Select wrapper + custom chevron */
   .select-wrap { position: relative; }
   .select-wrap::after {
     content: '';
     position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
     width: 10px; height: 6px; pointer-events: none;
     background-color: var(--ink-3);
     clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
   .select-wrap .form-input { padding-right: 36px; cursor: pointer; }
   .select-wrap .form-input option{
       color:#000;
   }
   /* Field-level error */
   .form-error {
     font-size: 12px; color: var(--danger);
     display: none; line-height: 1.3;
   }
   .form-error.is-visible { display: block; }
   
   /* ── File drop zone ── */
   .file-drop {
     position: relative;
     border: 1.5px dashed var(--hairline);
     border-radius: 12px;
     padding: 22px 18px;
     background: var(--surface-2);
     cursor: pointer;
     display: flex; flex-direction: column; align-items: center; gap: 7px;
     text-align: center;
     transition: border-color var(--t-base), background var(--t-base);
   }
   .file-drop:hover, .file-drop.is-over {
     border-color: var(--octane-orange);
     background: rgba(255,82,10,.04);
   }
   .file-drop__input {
     position: absolute; inset: 0; width: 100%; height: 100%;
     opacity: 0; cursor: pointer;
   }
   .file-drop__icon { color: var(--ink-3); }
   .file-drop__text { font-size: 14px; color: var(--ink-2); }
   .file-drop__link { color: var(--octane-orange); text-decoration: underline; }
   .file-drop__hint { font-size: 12px; color: var(--ink-4); }
   .file-drop__filename {
     font-size: 13px; color: var(--octane-orange); font-weight: 500;
     display: none;
     max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }
   .file-drop.has-file .file-drop__icon,
   .file-drop.has-file .file-drop__text,
   .file-drop.has-file .file-drop__hint { display: none; }
   .file-drop.has-file .file-drop__filename { display: block; }
   .file-drop.has-file { border-color: var(--octane-orange); border-style: solid; background: rgba(255,82,10,.04); }
   
   /* ── Submit button & legal ── */
   .modal__submit { margin-top: 4px; }
   .modal__legal {
     font-size: 12px; color: var(--ink-4); text-align: center;
     line-height: 1.45; font-weight: 300; margin-top: -6px;
   }
   
   /* ── Checkbox ── */
   .form-checkbox {
     display: flex; align-items: flex-start; gap: 12px;
     cursor: pointer; user-select: none;
   }
   .form-checkbox__input {
     position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
   }
   .form-checkbox__box {
     flex-shrink: 0;
     width: 20px; height: 20px; border-radius: 6px;
     border: 1.5px solid var(--hairline);
     background: var(--surface);
     display: inline-flex; align-items: center; justify-content: center;
     margin-top: 1px;
     transition: background var(--t-base) var(--ease-out), border-color var(--t-base), box-shadow var(--t-base);
   }
   .form-checkbox__box svg { width: 12px; height: 10px; opacity: 0; transition: opacity var(--t-fast); }
   .form-checkbox__input:checked + .form-checkbox__box {
     background: var(--octane-orange);
     border-color: var(--octane-orange);
     box-shadow: 0 4px 10px -2px rgba(255,82,10,.40);
   }
   .form-checkbox__input:checked + .form-checkbox__box svg { opacity: 1; }
   .form-checkbox:hover .form-checkbox__box { border-color: var(--octane-orange); }
   .form-checkbox__input:focus-visible + .form-checkbox__box {
     outline: 2px solid var(--octane-orange); outline-offset: 2px;
   }
   .form-checkbox--error .form-checkbox__box {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(224,57,43,.10);
   }
   .form-checkbox__label {
     font-size: 13px; color: var(--ink-2); line-height: 1.5; font-weight: 300;
   }
   
   /* ── Success state ── */
   .modal__success {
     display: none;
     flex-direction: column; align-items: center; text-align: center;
     gap: 14px; padding: 16px 0 8px;
   }
   .modal__success.is-visible { display: flex; }
   .success-orb {
     width: 68px; height: 68px; border-radius: 50%;
     background: linear-gradient(180deg, var(--octane-yellow), var(--octane-orange));
     display: inline-flex; align-items: center; justify-content: center;
     box-shadow: 0 10px 24px -6px rgba(255,82,10,.45);
   }
   .success-orb--reject {                                                                                                                                                                                       
      background: linear-gradient(180deg, #f87171, #dc2626);                                                                                                                                                     
      box-shadow: 0 10px 24px -6px rgba(220,38,38,.4);                                                                                                                                                           
     }    
   .modal__success h3 { font-size: 24px; margin-top: 4px; }
   .modal__success p  { font-size: 16px; color: var(--ink-2); font-weight: 300; max-width: 340px; line-height: 1.5; }
   
   /* ── Responsive ── */
   @media (max-width: 1440px) {
     /* Scale the modal to 0.7 — override both entrance and open states */
    
     .modal-overlay.is-open .modal{ transform: translateY(0)     scale(1);  }
   }
   @media (max-width: 520px) {
     .modal { padding: 32px 22px 28px; }
     .form-row { grid-template-columns: 1fr; }
     .modal__head h3 { font-size: 22px; }
   }
   
   /* ─────────── FOOTER ─────────── */
   footer {
     padding: 60px 0 50px; border-top: 1px solid var(--hairline-soft);
     margin-top: 60px; position: relative; z-index: 2;
     background: transparent;
   }
   .foot { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
   .foot__left { display: flex; align-items: center; gap: 16px; color: var(--ink-3); font-size: 16px; }
   .foot__logo { height: 18px; }
   .theme-dark .foot__logo { filter: invert(1) brightness(2); }
   .foot__links { display: flex; gap: 24px; }
   .foot__links a { color: var(--ink-3); font-size: 16px; text-decoration: none; }
   .foot__links a:hover { color: var(--octane-orange); }
   
   /* ─────────── REVEAL ─────────── */
   .reveal { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
   body.reveals-armed .reveal:not(.is-in) { opacity: 0; transform: translateY(28px); }
   body.reveals-armed .reveal.is-in { opacity: 1; transform: none; }
   .reveal[data-delay="1"] { transition-delay:  80ms; }
   .reveal[data-delay="2"] { transition-delay: 160ms; }
   .reveal[data-delay="3"] { transition-delay: 240ms; }
   .reveal[data-delay="4"] { transition-delay: 320ms; }
   .reveal[data-delay="5"] { transition-delay: 400ms; }
   
   /* ─────────── CULTURE sticky parallax ─────────── */
   .our-culture {
     height: 200vh;
     position: relative;
   }
   
   .culture-sticky {
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .culture-bg {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 800ms ease;
     pointer-events: none;
   }
   .culture-bg.is-visible { opacity: 1; }
   
   .culture-photo {
     position: absolute;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 28px -6px rgba(0,0,0,.20);
     will-change: transform;
   }
   .culture-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .culture-content {
     position: relative;
     z-index: 1;
     width: 100%;
   }
   
   @media (prefers-reduced-motion: reduce) {
     .hero-grid { transform: scale3d(1,1,1) !important; }
     .hero-content { opacity: 1 !important; }
     .hero-overlay { opacity: 0.55 !important; }
     .scroll-hint { animation: none; }
     .reveal, body.reveals-armed .reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
     .culture-photo { transition: none; }
     .culture-bg { opacity: 1; transition: none; }
     .glass::before { filter: none; }
   }
   
   /* ─────────── RESPONSIVE ─────────── */
   @media (max-width: 1480px) {
       .culture-photo{
         width:320px !important;
         height:240px  !important;
       }
       .culture-bg .culture-photo:nth-of-type(1){
           left:-30px !important;
       }
       .culture-bg .culture-photo:nth-of-type(2){
           left:-40px !important;
       }
       .culture-bg .culture-photo:nth-of-type(3){
           right:-30px !important;
       }
       .culture-bg .culture-photo:nth-of-type(4){
           right:-40px !important;
       }
   }
   @media (max-width: 960px) {
     /* Culture: уменьшаем карточки чтобы не залезали на текст */
     .culture-photo { width: 260px !important; height: 195px !important; }
   
     .nav__links { display: none; }
     .nav__sub { display: none; }
     .hero-stats { grid-template-columns: 1fr; gap: 4px 0; grid-template-rows: auto;}
     .hero-stats .stat { padding: 14px 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
     .hero-stats .stat:nth-child(odd) { }
     .hero-stats .stat:nth-last-child(-n+2) { }
     .hero-stats .stat.stat:nth-of-type(3){
       border:none !important;
     }
     .about { grid-template-columns: 1fr; gap: 32px; }
     .cards-3 { grid-template-columns: 1fr; }
     .role { grid-template-columns: 1fr; }
     .role__aside { position: static; }
     .about__sidebar { position: static; }
     .depts { grid-template-columns: 1fr 1fr; }
     .honesty { grid-template-columns: 1fr; }
     .steps__rail { grid-template-columns: repeat(1, 4fr); gap: 30px; }
     .steps__line, .steps__progress { display: none; }
     .final-cta { padding: 56px 28px; }
     section { padding: 64px 0; }
     .culture-photo{
         width:320px;
         height:240px;
     }
   }
   @media (max-width: 768px) {
     .steps__progress--full{
       display: block;
       width: 2px;
       height: 78%;
       top: 90px;
       left: 6%;
     }
     .step__bubble{
       width:40px;
       height: 40px;
     }
     .step{
       flex-direction: row;
       align-items: center;
     }
     .step__body{
       width:85%;
     }
     .eyebrow{
       font-size: 14px;
     }
     .nav__actions .btn--sm{
       display: none;
     }
     /* Culture: убираем sticky и параллакс, карточки по углам */
     .our-culture { height: auto; }
     .culture-sticky { position: relative; height: auto; padding: 180px 0; }
     .culture-photo { width: 240px !important; height: 180px !important; }
     .culture-bg .culture-photo:nth-child(1) { left: -90px !important; top: 6% !important; }
     .culture-bg .culture-photo:nth-child(2) { left: -90px !important; top: 80% !important; }
     .culture-bg .culture-photo:nth-child(3) { right: -90px !important; left: auto !important; top: 3% !important; }
     .culture-bg .culture-photo:nth-child(4) { right: -90px !important; left: auto !important; top: 82% !important; }
   
     .hero-h1 { font-size: clamp(36px,10vw,56px); }
     .hero-content { padding: 90px 20px 24px; }
     .hero-cta { flex-direction: column; align-items: center; }
     .role__tabs { flex-direction: column; width: 100%; }
     .role__tab { text-align: left; }
     .depts { grid-template-columns: 1fr; }
     .about__tags { grid-template-columns: 1fr; }
     .cards-3 { gap: 12px; }
   }