:root{--ink:#18191b;--muted:#707176;--blue:#1764ea;--red:#e34042}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:#fafaf9;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
header{height:88px;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 36px}
.logo{font-size:25px;font-weight:850;letter-spacing:-1.4px;display:flex;gap:10px;align-items:center}
.logomark{width:27px;height:27px;background:var(--ink);border-radius:8px;display:grid;place-items:center;color:#fff;font-size:19px;letter-spacing:-4px;padding-right:4px}
nav{display:flex;gap:30px;font-size:13px;align-items:center}
.button{background:var(--ink);color:white;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:15px 23px;border-radius:30px;font-size:13px;font-weight:600;transition:transform .2s}
.button:hover{transform:translateY(-3px)}
.hero{text-align:center;padding:62px 24px 0}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2.4px;font-weight:650;color:var(--muted)}
.eyebrow i{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:100%;margin-right:9px}
h1{font-size:clamp(46px,6.6vw,84px);line-height:1.03;letter-spacing:-4.5px;margin:25px 0 20px;font-weight:720}
.hero p{color:var(--muted);font-size:19px;letter-spacing:-.3px}
.hero-links{display:flex;gap:25px;align-items:center;justify-content:center;margin-top:28px}
.textlink{font-size:13px;border-bottom:1px solid #ccc;padding:8px 0}
.stage{position:relative;max-width:1050px;margin:20px auto 0;height:350px;overflow:hidden}
.stage:after{content:"";position:absolute;bottom:25px;left:7%;width:86%;height:48px;border-radius:50%;background:#e6e7e9;filter:blur(23px);z-index:-1}
.robots{width:100%;height:100%}
.program-label{font-size:13px;font-weight:650;letter-spacing:2px}
.programs{max-width:1120px;margin:auto;padding:65px 36px 80px}
.section-top{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}
.section-top p{font-size:13px;color:var(--muted)}
h2{font-size:clamp(30px,3.6vw,45px);line-height:1.12;letter-spacing:-1.8px;margin:12px 0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{padding:32px;border-radius:25px;min-height:280px;position:relative;overflow:hidden;transition:transform .25s}
.card:hover{transform:translateY(-5px)}
.card h3{font-size:29px;letter-spacing:-1px;margin:18px 0 8px}
.card p{font-size:14px;line-height:1.6;max-width:240px;margin:0;color:#61666f}
.card .number{font-size:10px;letter-spacing:2px;opacity:.6}
.card .arrow{position:absolute;right:26px;top:26px;border-radius:50%;background:#ffffffc0;width:35px;height:35px;display:grid;place-items:center}
.card .symbol{position:absolute;right:25px;bottom:20px;opacity:.7;width:110px;height:110px}
.iq{background:#eaf2ff;color:#1764d8}
.v5{background:#ffedeb;color:#d63b40}
.cad{background:#eaf4ef;color:#267461}
.coding{background:#f0edfb;color:#7456b4}
.tag{display:inline-block;margin-top:25px;font-size:10px;letter-spacing:.5px;border:1px solid currentColor;border-radius:20px;padding:5px 10px}
.thinking{background:#fff;padding:80px 36px}
.thinking-inner{max-width:1048px;margin:auto}
.thinking h2{max-width:700px}
.thinking-intro{color:var(--muted);max-width:610px;font-size:16px;line-height:1.7}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:45px}
.step{border-top:1px solid #ddd;padding-top:22px}
.step span{font-size:11px;color:#8871b6}
.step h3{font-size:16px}
.step p{font-size:13px;color:var(--muted);line-height:1.7}
.about{max-width:1120px;margin:auto;padding:85px 36px;display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.lab-art{background:#eeeef0;min-height:300px;display:flex;align-items:center;justify-content:center;border-radius:25px;position:relative;overflow:hidden}
.lab-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#d9d9dd66 1px,transparent 1px),linear-gradient(90deg,#d9d9dd66 1px,transparent 1px);background-size:28px 28px}
.lab-art svg{width:80%;position:relative}
.about p{color:var(--muted);font-size:15px;line-height:1.8}
.join{background:#1b1c1f;color:#fff;max-width:1048px;margin:0 auto 60px;border-radius:28px;padding:55px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.join h2{margin:0 0 15px}
.join p{color:#b9bac0;font-size:14px;line-height:1.7}
.join .button{background:white;color:#18191b;white-space:nowrap}
footer{max-width:1120px;margin:auto;padding:20px 36px 35px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}
:focus-visible{outline:3px solid #1764ea;outline-offset:6px}
.mobile-menu{display:none}

/* Keep words together without forcing mobile browser line breaks. */
.hero h1 span { display: block; }

.button { white-space: nowrap; }

.contact-details { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.contact-details a { white-space: nowrap; }


/* Tablet: retain the desktop hierarchy with room for each column. */
@media (min-width: 701px) and (max-width: 1000px) {
  .card { min-height: 310px; padding: 26px; }
  .card .number { font-size: 9px; letter-spacing: 1.2px; padding-right: 25px; display: block; }
  .card .symbol { width: 80px; height: 80px; right: 20px; }
  .card .tag { max-width: calc(100% - 60px); font-size: 9px; }

  .about { gap: 36px; }

  .join { margin-left: 36px; margin-right: 36px; padding: 36px; }

  .join h2 { font-size: 36px; }

  footer { flex-wrap: wrap; }

}


/* Phone: one calm reading column, deliberate title lines, generous touch targets. */
@media (max-width: 700px) {
  html { scroll-padding-top: 24px; }

  header { padding: 0 22px; height: 76px; gap: 16px; }

  header .logo { font-size: 21px; letter-spacing: -1px; gap: 8px; flex-shrink: 0; }

  .logomark { width: 25px; height: 25px; border-radius: 7px; font-size: 17px; }

  nav { gap: 0; }

  nav .navlink { display: none; }

  nav .button { min-height: 44px; padding: 12px 16px; font-size: 11px; gap: 12px; }

  .hero { padding: 44px 22px 0; }

  .eyebrow { font-size: 9px; line-height: 1.6; letter-spacing: 1.6px; }

  .hero .eyebrow { font-size: 8px; letter-spacing: 1.25px; white-space: nowrap; }

  .eyebrow i { width: 5px; height: 5px; margin-right: 7px; vertical-align: 1px; }

  h1 { font-size: clamp(29px, 9.3vw, 46px); line-height: 1.08; letter-spacing: -1.6px; margin: 22px 0 18px; }

  .hero h1 span { white-space: nowrap; }

  .hero p { font-size: 15px; line-height: 1.6; margin: 0; letter-spacing: -.25px; }

  .hero-links { flex-direction: column; gap: 13px; margin-top: 26px; }

  .hero-links .button { min-height: 48px; padding: 14px 24px; font-size: 12px; gap: 24px; }

  .hero-links .textlink { min-height: 44px; display: inline-flex; align-items: center; border: 0; font-size: 12px; padding: 8px 0; color: var(--muted); }

  .stage { height: auto; aspect-ratio: 2.35; margin: 26px -14px 0; overflow: visible; }

  .robots { display: block; }

  .stage:after { display: none; }

  .program-label { font-size: 20px; }

  .programs { padding: 48px 22px 60px; }

  .section-top { display: block; margin-bottom: 26px; }

  .section-top p { display: none; }

  h2 { font-size: clamp(29px, 8vw, 38px); line-height: 1.12; letter-spacing: -1.15px; margin: 12px 0 0; }

  .cards { grid-template-columns: 1fr; gap: 16px; }

  .card { min-height: 284px; padding: 26px; border-radius: 22px; display: flex; flex-direction: column; align-items: flex-start; }

  .card .number { font-size: 8px; line-height: 1.7; letter-spacing: 1.25px; padding-right: 34px; }

  .card .arrow { top: 20px; right: 20px; width: 32px; height: 32px; }

  .card h3 { font-size: 29px; margin: 20px 0 10px; }

  .card p { font-size: 14px; line-height: 1.65; max-width: 250px; padding-bottom: 16px; }

  .card .symbol { width: 70px; height: 70px; right: 20px; bottom: 18px; }

  .tag { font-size: 8px; letter-spacing: .1px; padding: 6px 8px; margin-top: auto; max-width: calc(100% - 65px); }

  .thinking { padding: 60px 22px; }

  .thinking-intro { font-size: 15px; line-height: 1.8; margin: 22px 0 0; }

  .steps { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }

  .step { position: relative; padding: 24px 0 24px 42px; }

  .step span { display: block; font-size: 9px; letter-spacing: 1px; }

  .step:before { content: ''; position: absolute; left: 4px; top: 29px; width: 12px; height: 12px; border: 1px solid #b9a6d9; border-radius: 50%; }

  .step h3 { font-size: 19px; letter-spacing: -.4px; margin: 10px 0; }

  .step p { font-size: 14px; line-height: 1.75; margin: 0; max-width: 350px; }

  .step:last-child { padding-bottom: 0; }

  .about { padding: 60px 22px; grid-template-columns: 1fr; gap: 32px; }

  .lab-art { min-height: 0; aspect-ratio: 1.3; border-radius: 22px; }

  .about p { font-size: 15px; line-height: 1.8; margin: 22px 0; }

  .about .textlink { display: inline-flex; align-items: center; min-height: 44px; }

  .join { margin: 0 22px 42px; padding: 32px 26px; border-radius: 24px; display: block; }

  .join .eyebrow { font-size: 8px; letter-spacing: 1.3px; }

  .join h2 { font-size: 32px; line-height: 1.12; letter-spacing: -1px; max-width: 300px; }

  .join p { font-size: 14px; line-height: 1.75; margin: 20px 0; }

  .contact-details { flex-direction: column; gap: 0; }

  .contact-details a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }

  .join .button { margin-top: 8px; min-height: 48px; padding: 14px 22px; font-size: 12px; }

  footer { margin: 0 22px; padding: 28px 0 30px; border-top: 1px solid #e3e3e5; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 0; font-size: 12px; }

  footer .logo { margin-bottom: 14px; }

  footer > a:not(.logo) { display: inline-flex; align-items: center; min-height: 44px; }

  footer > span { font-size: 10px; line-height: 1.7; }

  footer > span:first-of-type { margin: 18px 0 5px; }

}

@media (max-width: 360px) {
  header { padding: 0 18px; gap: 10px; }

  header .logo { font-size: 19px; gap: 7px; }

  nav .button { padding: 12px; gap: 8px; }

  .hero { padding-left: 18px; padding-right: 18px; }

  .hero .eyebrow { font-size: 7px; letter-spacing: 1px; }

  h1 { letter-spacing: -1.4px; }

  .card { padding: 24px; }

  .card .symbol { width: 56px; height: 56px; right: 16px; }

  .tag { max-width: calc(100% - 50px); }

  .join { padding: 28px 22px; }

  .join h2 { font-size: 29px; }

}

@media (hover: none) { .card:hover, .button:hover { transform: none; }
 }

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}