/* ============================================================
   Tornante Technology — site stylesheet (navy/blue variant)
   Translated 1:1 from the design reference prototype.
   ============================================================ */

:root {
  --navy: #181868;
  --blue: #4F75DC;
  --blue-deep: #160AB2;
  --blue-mid: #2E46A7;
  --blue-bright: #3588F2;
  --cyan: #02CCFC;
  --cyan-light: #6DE4FC;
  --btn-text-navy: #0a1046;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--navy);
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-light); }
button { font-family: inherit; }
img { max-width: 100%; }

@keyframes ttfade {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(20, 20, 90, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img { height: 26px; width: auto; display: block; }

.header-nav { display: flex; align-items: center; gap: 30px; }

.header-nav .nav-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.66);
}

.nav-link:hover { color: #ffffff; }
.nav-link.is-active { color: #ffffff; }

.header-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.18); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.lang-switch a { color: rgba(255, 255, 255, 0.6); }
.lang-switch a:hover { color: var(--cyan-light); }
.lang-switch a.is-active { color: var(--cyan-light); }
.lang-switch .sep { color: rgba(255, 255, 255, 0.3); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}

.mobile-menu {
  display: none;
  padding: 12px 24px 22px;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 90, 0.96);
}

.mobile-menu .nav-link {
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  padding: 14px 0;
  color: rgba(255, 255, 255, 0.66);
}

.mobile-menu .lang-switch {
  font-size: 15px;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 819px) {
  .header-nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu.is-open { display: flex; }
}

main { padding-top: 72px; }

/* ------------------------------------------------------------
   Buttons & kicker
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(180deg, var(--cyan-light), var(--cyan));
  color: var(--btn-text-navy);
  font-weight: 700;
  transition: box-shadow 0.22s ease;
}

.btn-primary:hover {
  color: var(--btn-text-navy);
  box-shadow: 0 12px 34px rgba(2, 204, 252, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 600;
  transition: background 0.22s ease;
}

.btn-secondary:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: 22px;
}

/* ------------------------------------------------------------
   Home — hero variant A (centered)
   ------------------------------------------------------------ */

.hero-a {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px 24px 72px;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: -140px;
  transform: translateX(-50%);
  width: 760px;
  max-width: 120vw;
  height: 440px;
  background: radial-gradient(closest-side, rgba(2, 204, 252, 0.2), transparent);
  pointer-events: none;
}

.hero-mark { position: absolute; pointer-events: none; user-select: none; }
.hero-mark-tr { right: -70px; top: 60px; width: 400px; opacity: 0.06; }
.hero-mark-bl { left: -90px; bottom: -80px; width: 300px; opacity: 0.05; transform: rotate(14deg); }

.hero-inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  animation: ttfade 0.6s ease both;
}

.hero-a h1 {
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 26px;
}

.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin: 0 auto 38px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Home — hero variant B (split with gradient panel)
   ------------------------------------------------------------ */

.hero-b {
  position: relative;
  overflow: hidden;
  padding: 104px 24px 64px;
}

.hero-b-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.hero-b-copy {
  flex: 1 1 440px;
  min-width: 300px;
  animation: ttfade 0.6s ease both;
}

.hero-b h1 {
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}

.hero-b .hero-sub { max-width: 540px; margin: 0 0 36px; }
.hero-b .hero-ctas { justify-content: flex-start; }

.hero-b-visual { flex: 1 1 380px; min-width: 280px; }

.hero-b-panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(155deg, var(--blue-mid), var(--blue-deep));
  padding: 52px 44px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.hero-b-panel .panel-glow {
  position: absolute;
  left: -30px;
  top: -30px;
  width: 220px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(2, 204, 252, 0.35), transparent);
  pointer-events: none;
}

.hero-b-panel .panel-symbol {
  width: 150px;
  height: auto;
  position: relative;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

/* ------------------------------------------------------------
   Home — specialties
   ------------------------------------------------------------ */

.specs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 104px;
}

.specs h2 {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 14px;
}

.specs-sub {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
  margin: 0 auto 48px;
  font-size: 17px;
  line-height: 1.6;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.spec-card {
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #ffffff;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.spec-card:hover {
  color: #ffffff;
  border-color: rgba(109, 228, 252, 0.55);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-5px);
}

.spec-card h3 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.spec-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.62;
  font-size: 16px;
  flex-grow: 1;
}

.spec-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-weight: 600;
  font-size: 15px;
  margin-top: 8px;
}

/* ------------------------------------------------------------
   Subpages — hero
   ------------------------------------------------------------ */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 112px 0 40px;
}

.hero-mark-side {
  position: absolute;
  right: -60px;
  top: 70px;
  width: 340px;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.page-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  animation: ttfade 0.5s ease both;
}

.page-hero .kicker { margin-bottom: 18px; }

.page-hero h1 {
  font-size: clamp(33px, 5vw, 60px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 820px;
}

.page-hero .intro {
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.78);
  max-width: 690px;
  margin-top: 22px;
  line-height: 1.62;
}

/* ------------------------------------------------------------
   Subpages — sections, cards, chips, CTA
   ------------------------------------------------------------ */

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 20px;
}

.section h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  margin-bottom: 26px;
  letter-spacing: -0.01em;
}

.info-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 34px 32px;
}

.info-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.info-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.62;
  font-size: 16px;
}

.chips-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

.chips-section h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.chips { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(109, 228, 252, 0.28);
  font-size: 15px;
  font-weight: 500;
  color: #dfe9ff;
}

.chip-strong { padding: 13px 24px; font-weight: 600; }

.cta-section {
  max-width: 1180px;
  margin: 0 auto 96px;
  padding: 0 24px;
}

.cta-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--blue-mid), var(--blue-deep));
  border-radius: 30px;
  padding: 60px 40px;
  text-align: center;
}

.cta-panel h2 {
  position: relative;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  margin-bottom: 26px;
  letter-spacing: -0.01em;
}

.cta-panel .btn { position: relative; padding: 16px 32px; }

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */

.contact-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 96px;
}

.contact-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.contact-details {
  flex: 1 1 380px;
  min-width: 280px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-row { display: flex; flex-direction: column; gap: 5px; }

.contact-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-light);
}

.contact-value {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  word-break: break-word;
}

a.contact-value:hover { color: var(--cyan-light); }

.contact-card {
  flex: 1 1 360px;
  min-width: 280px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--blue-mid), var(--blue-deep));
  border-radius: 26px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}


.contact-card h2 {
  position: relative;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contact-card p {
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
  max-width: 360px;
}

.card-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 6px;
}

.contact-card .btn {
  position: relative;
  align-self: flex-start;
}

.card-email {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.card-email a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.card-email a:hover { color: var(--cyan-light); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 46px 24px;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
}

.footer-brand { display: flex; flex-direction: column; gap: 10px; }

.footer-brand img {
  height: 52px;
  width: auto;
  align-self: flex-start;
  filter: brightness(0) invert(1);
}

.footer-tagline { color: rgba(255, 255, 255, 0.55); font-size: 14px; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }

.footer-nav a { color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.footer-nav a:hover { color: #ffffff; }

.footer-copy { color: rgba(255, 255, 255, 0.45); font-size: 13px; }

/* ------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-inner,
  .hero-b-copy,
  .page-hero-inner { animation: none; }
  .spec-card,
  .btn-primary,
  .btn-secondary { transition: none; }
}