:root{
  --blue:#2F80ED;
  --orange:#FF6B00;
  --purple:#F24B8D;
  --ink:#050505;
  --gray:#AAAAAB;
  --bg:#FFFFFF;
  --divider:#E5E7EB;
  --blink:0.9s;

  --fit-scale: 1;
  --nav-h: 56px;
}

/* Base --------------------------------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{
  scroll-behavior:smooth;
  scrollbar-gutter: stable both-edges;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  overflow-y:auto;
  overflow-anchor:none;
}

/* Header ------------------------------------------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(12px,3vw,28px);
  border-bottom:1px solid rgba(17,17,17,.06);
  z-index:1000;
  background:transparent;              /* no background itself */
  isolation:isolate;                   /* isolate blur layer */
}

/* Glass layer for header */
.site-nav::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0; height:var(--nav-h);
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(17,17,17,.06);
  z-index:-1;
  pointer-events:none;
}

.nav-brand{
  display:flex; align-items:center; gap:0rem;
  font-weight:800; text-decoration:none;
  font-size:clamp(18px,2.6vw,22px);
}
.nav-brand .clari{ color:var(--blue); }
.nav-brand .factory{ color:var(--orange); }
.nav-brand .dot{ color:var(--purple); }

.nav-links{ display:flex; gap: clamp(12px, 2.4vw, 28px); align-items:center; }
.nav-links a{
  font-size:clamp(14px, 2.9vw, 18px);
  color:var(--gray); text-decoration:none; opacity:1; transition:opacity .2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{ color:var(--ink); outline:none; }
.nav-links a.is-active{ opacity:1; }

/* Hamburger button --------------------------------------- */
.nav-toggle{
  display:none;
  position:relative;
  width:40px; height:40px;
  border:none; background:none; cursor:pointer; padding:0; margin:0;
  z-index:1100;
}
.nav-toggle span{
  display:block; position:absolute; left:8px; right:8px; height:2px;
  background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span:nth-child(1){ top:12px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:26px; }
.site-nav.is-open .nav-toggle span:nth-child(1){ transform: rotate(45deg); top:19px; }
.site-nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.is-open .nav-toggle span:nth-child(3){ transform: rotate(-45deg); top:19px; }

/* Sections ----------------------------------------------- */
.section{
  min-height:100svh;
  position:relative;
  padding: calc(var(--nav-h) + 12vh) 0 12vh 0;
}
.section + .section{ border-top:1px solid var(--divider); }

.hero{
  border-bottom:1px solid var(--divider);
  display:grid; place-items:center;
  padding: 14vh 0 18vh 0;
}

/* Containers --------------------------------------------- */
.wrap,
.section .content{
  width:min(920px,92vw);
  text-align:left;
  position:relative;
  margin-inline:auto;
  padding: 0 4vw 0 1vw;
}

/* Brand --------------------------------------------------- */
.brand{
  margin:0;
  font-weight:800;
  --brand-base: clamp(44px,10vw,98px);
  font-size: calc(var(--brand-base) * var(--fit-scale));
  letter-spacing:.15px;
}
.brand .clari{ color:var(--blue); }
.brand .factory{ color:var(--orange); }
.brand .dot{ color:var(--purple); }

/* Typewriter --------------------------------------------- */
.type{ display:inline-block; position:relative; white-space:nowrap; }
.cursor{ position:absolute; bottom:.06em; width:2px; height:1em; background:#A7A7A7; animation:blink var(--blink) steps(1,end) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* Tagline ------------------------------------------------- */
.tag{
  margin-top: clamp(18px, 4vh, 36px);
  --tag-base: clamp(18px,2.8vw,34px);
  font-size: var(--tag-base);
  line-height: 1.85; /* more spacing between lines */
  color:#333;
  font-weight:400;
}
.tag + .tag{ margin-top:-10px; }
.tagWrap{ white-space: normal; }

.tagWrap .cursor{
  position: static;
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.1em;
  animation: blink var(--blink) steps(1,end) infinite;
}

.type .cursor{ right:-2px; left:auto; }

/* Welcome line ------------------------------------------- */
.welcome{
  margin: 0 0 .5rem;
  --tag-base: clamp(20px,3.1vw,38px);
  font-size: calc(var(--tag-base) * var(--fit-scale));
  line-height:1.15;
  color:var(--ink);
  font-weight:700;
}

/* CTA button --------------------------------------------- */
.scroll-link{
  position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%);
  --cta-base: clamp(18px,2.8vw,24px);
  font-weight:400; font-size: calc(var(--cta-base) * var(--fit-scale));
  color:var(--blue);
  opacity:1; transition:opacity .3s ease;
  text-decoration:none; background:none; border:none; cursor:pointer;
}
.scroll-link:hover,
.scroll-link:focus-visible{ opacity:1; text-decoration:none; outline:none; }

/* Content typography ------------------------------------- */
.section .content > h2{
  margin:0 0 1.2rem 0;
  font-size: clamp(28px,5.5vw,48px);
  letter-spacing:.2px;
  font-weight:600;
  color:var(--blue);
}
.section .content > p{
  margin:.75rem 0;
  font-size: clamp(16px,2.4vw,22px);
  line-height:1.6;
  color:var(--ink);
  font-weight:400;
}
.mission .intro{ font-weight:400; color:#1e1e1e; }

.bullet{
  margin:.75rem 0 0 1.2rem;
  padding:0;
  list-style:disc;
  font-size: clamp(16px,2.4vw,22px);
  line-height:1.6; color:var(--ink);
}
.bullet li{ margin:.5rem 0; }

/* Partner logos ------------------------------------------ */
.logo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(16px, 3vh, 28px);
  align-items:center;
  grid-auto-rows: 100px;
}
.logo{
  display:flex; align-items:center; justify-content:center;
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid var(--divider);
  border-radius: 12px;
  background:#fff; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.logo:hover, .logo:focus-visible{
  transform: translateY(-2px) scale(1.15);
  border-color:#D7DBE0; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  outline:none;
}
.logo img{
  width:100%; height:64px; object-fit:contain; filter:none; opacity:1;
  transition: transform .2s ease;
}

/* Footer -------------------------------------------------- */
.site-footer{
  position: static;
  border-top:1px solid var(--divider);
  height: var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  padding: 0 clamp(12px, 3vw, 28px);
  background: var(--bg);
}
.footer-bottom{
  font-size: clamp(14px,3vw,18px);
  color: var(--gray);
}

/* Contact link ------------------------------------------- */
.contact a{
  color: var(--blue);
  text-decoration: none;
}
.contact a:hover,
.contact a:focus-visible{ text-decoration: underline; }

/* Mobile menu layout ------------------------------------- */
@media (max-width: 768px){
  .nav-toggle{ display:inline-block; }

  .nav-links{
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(255,255,255,.68);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(17,17,17,.08);
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, padding .3s ease;
    z-index: 1100;
  }

  /* OPEN state — full remaining viewport height, scrollable */
  .site-nav.is-open .nav-links{
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    padding-top: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom)); /* respect notches */
  }


  .nav-links a{
    padding: 12px 0;
    width: 100%;
    font-size: clamp(14px, 3vw, 18px);
    color: var(--gray);
    font-weight: 400;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible{
    color: var(--ink);
  }

  .tag{ line-height:1.52; }
}

/* Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cursor{ display:none; }
}