/* BIOX Landing — Final (v3)
   - Desktop container: centered, max 720px, fluid down to 500px
   - Mobile breakpoint: 500px
   - Dark/Light themes via CSS variables + data-theme attr
   - Scroll reveal (slower) + Hero line stagger (slower)
   - Smooth accordion height + fade/slide
*/

/* ========= Theme Tokens ========= */
:root{
  /* Typography */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Desktop Hero (from your Figma) */
  --hero-size-desktop: 64px;
  --hero-line: 1.2;          /* 120% */
  --hero-track: -0.02em;     /* -2% */
  --hero-weight: 500;        /* SF Pro Medium */

  /* Desktop body */
  --body-size: 16px;
  --body-line: 1.6;

  /* Layout */
  --container-max: 720px;
  --bp-mobile: 500px;
  --pad-mobile: 20px;

  /* Rhythm */
  --topbar-pad: 24px;
  --hero-top: 96px;
  --after-hero-top: 64px;
  --ps-top: 48px;
  --jobs-top: 64px;
  --footer-top: 96px;

  /* Motion (slower, per FIX #7) */
  --reveal-opacity-ms: 860ms;
  --reveal-move-ms: 980ms;
  --reveal-ease: cubic-bezier(.2,.7,.2,1);

  --hero-line-opacity-ms: 740ms;
  --hero-line-move-ms: 880ms;
  --hero-line-ease: cubic-bezier(.2,.7,.2,1);
  --hero-stagger: 240ms;

  --accordion-ms: 340ms;

  /* Accent (set exact from Figma if different) */
  --accent-green: #4BD616;
  --ctabg:#2A2A2A;
  --ctaminitext:#7A7A7A;

  /* Default theme = dark (Bg dark = #181818, whites are #FFF with alpha) */
  --bg: #181818;
  --text: rgba(255,255,255,1);      /* White 100 */
  --muted: #4f4f4f;   /* White 44 */
  --muted-24: rgba(255,255,255,.24);/* White 24 */
  --divider: rgba(255,255,255,.08); /* White 8 */

  --ptext:#4F4F4F;
  --pcolor:#4F4F4F;
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg: #FFFFFF;                    /* Bg white */
  --text: rgba(24,24,24,1);         /* Dark 100 (#181818) */
  --muted: rgba(24,24,24,.80);      /* Dark 80 */
  --muted-24: rgba(24,24,24,.24);   /* Dark 24 */
  --divider: rgba(24,24,24,.08);    /* Dark 8 */
  --ctabg:#f1f1f1;
  --ctaminitext:#4f4f4f;
  --ptext:#737171;  
  --pcolor:#737171;
}

/* ========= Base ========= */
/* Global box sizing + prevent accidental horizontal scroll */
*, *::before, *::after{ box-sizing: border-box; }

html, body{ height: 100%; background-color: var(--bg); overflow-x: hidden; }
html{ scroll-behavior: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);

  /*
    Make text rendering closer to what designers usually see in Figma.
    On iOS/macOS, transformed/animated text can look heavier or a bit blurry.
    These flags + finishing animations with `transform: none` help a lot.
  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

a{ color: var(--accent-green); text-decoration: none; }
a:hover{ opacity: .9; }

.container{
  xidth: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Prevent accidental section backgrounds */
.container, .topbar, .hero, .after-hero, .jobs, .footer{ background: transparent; }

/* ========= Header ========= */
.topbar{
  padding-top: var(--topbar-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
        -webkit-user-select: none; /* Chrome/Safari */  
    -moz-user-select: none; /* Firefox */  
    -ms-user-select: none; /* IE/Edge */  
    user-select: none; /* Стандартный синтаксис */
}
#topbar::selection{
    color: transparent;  
    background-color: transparent;  
}

/* Logo + theme icons swap per theme (must win over state rules) */
.icon--dark{ display: inline-flex; }
.icon--light{ display: none; }
html[data-theme="light"] .icon--dark{ display: none !important; }
html[data-theme="light"] .icon--light{ display: inline-flex !important; }
html:not([data-theme="light"]) .icon--light{ display: none !important; }
html:not([data-theme="light"]) .icon--dark{ display: inline-flex !important; }

.logo{
  display: inline-flex;
  align-items: center;
  color: var(--text); /* SVG uses currentColor */
}
.logo svg{ display: block; height: 24px; width: auto; }

.partnerz{
  display: inline-flex;
  align-items: center;
  justify-content: right;
  width: 65%; 
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-24); /* SVG currentColor */
  cursor: pointer;
  transition: color 320ms ease, opacity 320ms ease;
  color:var(--pcolor);
  opacity: 0.24;
      -webkit-user-select: none; /* Chrome/Safari */  
    -moz-user-select: none; /* Firefox */  
    -ms-user-select: none; /* IE/Edge */  
    user-select: none; /* Стандартный синтаксис */
}
.partnerz::selection {  
    color: transparent;  
    background-color: transparent;  
} 

.theme-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-24); /* SVG currentColor */
 color: var(--pcolor); /* SVG currentColor */
  cursor: pointer;
  transition: color 320ms ease, opacity 320ms ease;
}
.theme-btn:hover{ color: var(--muted); }
.theme-btn:active{ color: var(--text); }
.theme-btn svg{ display: block; }

/* ========= Hero ========= */
.hero{ padding-top: var(--hero-top); }

.hero-title{
  margin: 0;
  font-weight: var(--hero-weight);
  font-size: var(--hero-size-desktop);
  line-height: var(--hero-line);
  letter-spacing: var(--hero-track);
}

/* Only color differs */
.focus{ color: var(--text); }
.muted{ color: var(--muted); }
.accent{ color: var(--accent-green); }

/* ========= Content blocks ========= */
.after-hero{ padding-top: var(--after-hero-top); }

.text{
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text);
}
.text p{ margin: 0 0 24px 0; }

.ps{
  margin-top: var(--ps-top);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text);
}
.ps .label{
  font-weight: 600;
  margin-bottom: 6px;
}

/* Divider */
.divider{
  height: 1px;
  background: var(--divider);
  border: 0;
  margin: 24px 0;
}

/* ========= Jobs ========= */
.jobs{ margin-top: var(--jobs-top); }

.job{ border: 0; padding: 0; }
summary{ list-style: none; }
summary::-webkit-details-marker{ display: none; }

.job-summary{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  user-select: none;
}

.job-title{
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
}


/* ===== Jobs: icon behavior (re-built) =====
Desktop (hover-capable):
- closed: icon hidden
- hover closed row: show PLUS
- open: show MINUS and keep visible (no hover needed)
Mobile/touch:
- closed: show PLUS always
- open: show MINUS always
*/

/* icon box pinned to the right edge */
.job-icon{
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--muted-24);
}

/* stack all icons in the same spot */
.job-icon .icon{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.job-icon svg{ display: block; }

/* theme swap must be stronger than state swap */
.icon--dark{ display: inline-flex; }
.icon--light{ display: none; }
html[data-theme="light"] .icon--dark{ display: none !important; }
html[data-theme="light"] .icon--light{ display: inline-flex !important; }

/* plus/minus swap (same position) */
.job-icon .icon--plus{ opacity: 1; }
.job-icon .icon--minus{ opacity: 0; }
.job[open] .job-icon .icon--plus{ opacity: 0; }
.job[open] .job-icon .icon--minus{ opacity: 1; }

/* smooth swap */
.job-icon .icon{ transition: opacity 280ms ease; }

/* icon visibility rules */
@media (hover: hover) and (pointer: fine){
  /* hidden by default */
  .job-icon{
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 320ms ease, transform 380ms ease, color 320ms ease;
  }
  /* show on hover for closed rows */
  .job:not([open]) .job-summary:hover .job-icon{
    opacity: 1;
    transform: translateY(0);
  }
  /* keep visible when open */
  .job[open] .job-icon{
    opacity: 1;
    transform: translateY(0);
    color: var(--muted);
  }
}

/* touch/mobile: always visible */
@media (hover: none), (pointer: coarse){
  .job-icon{
    opacity: 1;
    transform: none;
    transition: color 320ms ease;
  }
  .job[open] .job-icon{ color: var(--muted); }
}



/* Smooth accordion height */
.job-content{
  overflow: hidden;
  height: 0;
  transition: height var(--accordion-ms) ease;
  will-change: height;
}

/* Fade/slide body */
.job-body{
  padding: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 260ms ease;
}
.job-body p{ margin: 0 0 14px 0; }
.job-body p:last-child{ margin-bottom: 0; }

.job[open] .job-body{
  opacity: 1;
  /* finish with `none` for clearer text rendering */
  transform: none;
}

/* ========= Footer ========= */
.footer{
  margin-top: var(--footer-top);
  padding-bottom: 40px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.footer h3{
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: .85;
}
.copyright{ margin-top: 18px; }

/* ========= Scroll reveal (slower) ========= */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--reveal-opacity-ms) ease,
    transform var(--reveal-move-ms) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  /* finish with `none` (keeps subpixel text rendering crisp on iOS/macOS) */
  transform: none;
  will-change: auto;
}

/* Hero: line stagger reveal once hero is visible */
.hero-reveal .reveal-line{
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--hero-line-opacity-ms) ease,
    transform var(--hero-line-move-ms) var(--hero-line-ease);
  will-change: opacity, transform;
}
.hero-reveal.is-visible .reveal-line{
  opacity: 1;
  /* finish with `none` (keeps subpixel text rendering crisp on iOS/macOS) */
  transform: none;
  will-change: auto;
}
.hero-reveal.is-visible .reveal-line:nth-child(1){ transition-delay: 0ms; }
.hero-reveal.is-visible .reveal-line:nth-child(2){ transition-delay: calc(var(--hero-stagger) * 1); }
.hero-reveal.is-visible .reveal-line:nth-child(3){ transition-delay: calc(var(--hero-stagger) * 2); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .hero-reveal .reveal-line, .job-content, .job-body{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.ctabuttons{
margin-top:40px;
}

.ctabutton{
  background:var(--ctabg);
  width: 720;
  height: 100;
  gap: 10px;
  color:var(--text);
  opacity: 1;
  border-radius: 16px;
  padding: 24px;

  font-weight: 400;
  font-style: Regular;
  font-size: 18px;

  line-height: 26px;
  letter-spacing: 0%;
  vertical-align: middle;

  position:relative;
  margin-bottom:5px;

}

.ctasvg{
    position: absolute;
    background: url(/assets/download.svg) center center no-repeat;
    top: 38px;
    right: 40px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.ctalink{
  text-decoration:none;
  cursor: pointer;
}

.ctaminitext{

  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
color:var(--ctaminitext);
  line-height: 22px;
  letter-spacing: 2%;

}
.ptext{

font-weight: 400;
font-style: Regular;
font-size: 18px;

line-height: 26px;
letter-spacing: 0%;
vertical-align: middle;
color:var(--ptext);
}
.bgp{
  color:var(--ptext);

  font-weight: 590;
  font-style: Semibold;
  font-size: 24px;
  
  line-height: 32px;
  letter-spacing: -1%;
  vertical-align: middle;
  margin-bottom: 0;
  margin-top: 0;

}

.whitecontent{
  color:var(--text);

font-style: Semibold;
font-size: 32px;
margin-top:80px;
line-height: 40px;
letter-spacing: 0%;
vertical-align: middle;
}

.whitecta{
  color:var(--text);
  font-size:48px;
  line-height:56px;
  letter-spacing:-1px;
  margin-top:80px;
  margin-bottom:40px;
}



   .headlink{
        color:#7a7a7a;
        font-size:18px;
        line-height:24px;
    }
    .headlink:hover{
        color:#ffffff;
    }

    .headactive{
         color:var(--accent-green);
    }
    .headsvg{
        width:24px;
        height:24px;
    }
    #topbar{
      position: fixed;
    left:20px;
    width: calc(100% - 40px);
    backdrop-filter: blur(24px);
    padding-top:0;
border-bottom:1px #292929;
    }
    #topbarcontent{
        width:720px;
        margin:0 auto 0;
   height: 72px;
   zpadding-top: var(--topbar-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
     } 

     body{
          scrollbar-color: #333333 transparent;
  scrollbar-width: thin;
     }
    
    @media all and (max-width:500px){
        .headsvg{
            width:16px;
            height:16px;
        }       
        .headlink{
            color:#7a7a7a;
            font-size:14px;
            line-height:16px;
        }    
        #topbarcontent{
    padding-left: var(--pad-mobile);
        padding-right: var(--pad-mobile);
        width:100%;
    }
    #topbar{
            left: 0;
    width: 100%;
    }
    }





/* ========= Mobile ========= */
@media (max-width: 500px){

:root{
  --hero-size-desktop:48px;
}
  .ctaminitext{
    font-size:12px;
  }
  .ctabutton{
      font-size: 17px;

  }
  .whitecta{
      font-size:32px;
  }
  .whitecontent{
  
font-size: 24px;
}

  .container{
    max-width: none;
    padding-left: var(--pad-mobile);
    padding-right: var(--pad-mobile);
  }

  .hero{ padding-top: 64px; }
  .after-hero{ padding-top: 40px; }

  /* NOTE: Figma mobile token access was blocked in this environment.
     These values are reasonable defaults; replace with exact mobile tokens if needed. */
  .hero-title{ font-size: 44px; }  /* replace with Mobile Figma */
  .text, .ps{ font-size: 15px; }   /* replace with Mobile Figma */

  .job-summary{
    padding: 14px 0;
    min-height: 48px;
  }
  .job-title{ font-size: 16px; }   /* replace with Mobile Figma */

  .footer{ margin-top: 80px; }
}

@media (max-width: 420px){


  .ctaminitext{
max-width: 220px;
        display: inline-block;

}
}


/* FIX v4 — staged load (bg -> header -> main) */
.boot .topbar,
.boot .main{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.boot.boot--header .topbar{
  opacity: 1;
  /* finish with `none` for clearer text rendering */
  transform: none;
  pointer-events: auto;
  transition: opacity 520ms ease, transform 720ms var(--reveal-ease);
}

.boot.boot--main .main{
  opacity: 1;
  /* finish with `none` for clearer text rendering */
  transform: none;
  pointer-events: auto;
  padding-top:72px;
  transition: opacity 620ms ease, transform 820ms var(--reveal-ease);
}