/* Tujitech website — base styles
   Most layout lives inline in index.html (exported from the design).
   This file holds resets, hover states, code tabs and mobile rules. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FAFAF7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }

a { color: #2A5BD7; text-decoration: none; }
a:hover { color: #1C44AE; }
a:focus-visible, button:focus-visible { outline: 2px solid #2A5BD7; outline-offset: 3px; border-radius: 6px; }

/* Nav links */
.nl { color: #3B4556; transition: color .15s; }
.nl:hover { color: #101828; }

/* Cards */
.card { transition: border-color .25s, box-shadow .25s, transform .25s; }
.card:hover { border-color: #CBD6EE !important; box-shadow: 0 24px 48px -32px rgba(16,24,40,.28); transform: translateY(-3px); }

/* Buttons */
.bp { transition: background .15s, transform .15s; }
.bp:hover { background: #1C44AE !important; color: #ffffff; }
.bd { transition: background .15s; }
.bd:hover { background: #26324A !important; color: #ffffff; }
.bg { transition: background .15s, border-color .15s; }
.bg:hover { background: rgba(255,255,255,.08) !important; color: #ffffff; }
.bo { transition: border-color .15s, background .15s; }
.bo:hover { border-color: #101828 !important; color: #101828; background: #ffffff !important; }

/* Footer links */
.fl { color: #5B6474; }
.fl:hover { color: #101828; }

/* Accent serif words */
.serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Code sample tabs */
.code-tab { font: inherit; font-weight: 500; cursor: pointer; border: 0; border-radius: 999px; padding: 8px 14px; min-height: 36px; background: transparent; color: #9AABC5; transition: background .15s, color .15s; }
.code-tab:hover { color: #ffffff; }
.code-tab.is-active { background: #ffffff; color: #101828; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 900px) {
  /* Photo cards: photo on top, text below */
  .photo-card { min-height: 0 !important; border-radius: 24px !important; }
  .hero-photo { position: relative !important; width: 100% !important; min-width: 0 !important; height: 340px; }
  .hero-photo > div { background: linear-gradient(0deg, #0A2340 0%, rgba(10,35,64,0.4) 35%, rgba(10,35,64,0) 60%) !important; }
  .hero-copy { padding: 8px 28px 48px !important; max-width: none !important; }

  h1 { font-size: 44px !important; }
  h1 .serif { font-size: 50px !important; }
  h2 { font-size: 34px !important; }
  h2 .serif { font-size: 38px !important; }

  section { padding-top: 72px !important; padding-bottom: 72px !important; }
  section[aria-label="Tujitech at a glance"] { padding-top: 0 !important; padding-bottom: 0 !important; }
  #industries { padding-top: 0 !important; }
}

@media (max-width: 640px) {
  .site-nav { justify-content: center !important; }
  .site-nav > div:nth-child(2) { gap: 18px !important; font-size: 14px !important; justify-content: center; }
  .hero-photo { height: 280px; }
  #products [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
  #how [style*="flex: 1 1 480px"], #how [style*="flex: 1 1 420px"],
  #developers [style*="flex: 1 1 360px"], #developers [style*="flex: 1 1 520px"] { flex-basis: 100% !important; }
  #developers > div > div { padding: 56px 22px !important; }
  pre { font-size: 12.5px !important; }
}