/* Tech Corners — scroll experience (applied from the user's design export) */

html {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  background: #050a16;
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

a, button { cursor: none; }
a { color: #8fd4ff; text-decoration: none; }
a:hover { color: #c9ecff; }
::selection { background: rgba(90, 170, 255, .35); }

/* dvh so the runway tracks the visual viewport as mobile browser chrome hides.
   main.js measures this element rather than trusting innerHeight, so the scroll
   math and the runway can never disagree. */
.snap { height: 100vh; height: 100dvh; scroll-snap-align: start; }

/* ---------- fixed background layers ---------- */
#tc-net {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}

#floor-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 115%, rgba(18, 42, 95, .4), transparent 60%);
}

#tc-3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* ---------- hero ---------- */
#hero {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-haze {
  position: absolute;
  inset: -5%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 42%, rgba(4, 10, 24, .55), rgba(4, 10, 24, .15) 55%, transparent 75%);
}

.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .3em;
  color: #7cc4ff;
  margin-bottom: 14px;
}

.hero-kicker {
  letter-spacing: .35em;
  color: rgba(195, 222, 255, .85);
  margin-bottom: 26px;
}

#hero-title {
  margin: 0;
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: 1.02;
  font-weight: 600;
  color: #dcebff;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 0 60px rgba(60, 140, 255, .35);
}

.pill {
  margin-top: 44px;
  padding: 16px 38px;
  border: none;
  border-radius: 999px;
  background: #eaf3ff;
  color: #0a1428;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 0 40px rgba(120, 190, 255, .25);
  display: inline-block;
}

a.pill { margin-top: 38px; }
a.pill, a.pill:hover { color: #0a1428; }

.hero-hint {
  margin-top: 30px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(160, 200, 250, .7);
}

/* ---------- horizontal track ---------- */
#track-wrap {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#track {
  display: flex;
  width: 400vw;
  height: 100vh;
  will-change: transform;
}

.panel {
  width: 100vw;
  height: 100vh;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 8vw;
  box-sizing: border-box;
}

.panel.right { justify-content: flex-end; }
.panel.left { justify-content: flex-start; }
.panel.center {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* replaces the old inline style="max-width:…" attributes */
.sec-narrow { max-width: 560px; }
#sec-about { max-width: 540px; }

.sec h2 {
  margin: 0 0 30px;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 600;
  color: #e3efff;
  letter-spacing: -.02em;
}

#sec-about h2 { margin-bottom: 24px; }

/* services list */
.svc-list { display: flex; flex-direction: column; }

.svc-item {
  display: flex;
  gap: 22px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(110, 170, 255, .2);
}

.svc-item:last-child { border-bottom: 1px solid rgba(110, 170, 255, .2); }

.svc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(140, 195, 255, .55);
}

.svc-title { font-size: 21px; font-weight: 600; color: #dcebff; }
.svc-desc { font-size: 14px; color: rgba(170, 200, 235, .65); margin-top: 4px; }

/* about */
.about-body {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(180, 205, 240, .75);
  text-wrap: pretty;
}

.stats { display: flex; gap: 44px; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 34px; color: #bfe0ff; }
.stat-label { font-size: 12.5px; letter-spacing: .14em; color: rgba(150, 185, 225, .6); margin-top: 6px; }

/* products */
.prod-list { display: flex; flex-direction: column; gap: 16px; }

.prod-card {
  padding: 22px 24px;
  border: 1px solid rgba(110, 170, 255, .25);
  border-radius: 10px;
  background: rgba(12, 26, 55, .55);
}

.prod-head { display: flex; justify-content: space-between; align-items: baseline; }
.prod-title { font-size: 19px; font-weight: 600; color: #dcebff; }
.prod-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(140, 195, 255, .55); }
.prod-desc { font-size: 14px; color: rgba(170, 200, 235, .65); margin-top: 6px; }

/* contact */
#sec-contact .kicker { margin-bottom: 16px; }

.contact-title {
  margin: 0 !important;
  font-size: clamp(42px, 5.5vw, 84px) !important;
  font-weight: 600;
  color: #eaf3ff !important;
  letter-spacing: -.02em;
  text-shadow: 0 4px 50px rgba(5, 10, 25, .9);
}

.footer-note {
  margin-top: 34px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 2;
  letter-spacing: .12em;
  color: rgba(150, 185, 225, .6);
}

/* ---------- custom cursor ---------- */
#tc-cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #dceeff;
}

#tc-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid rgba(180, 220, 255, .9);
  box-shadow: 0 0 14px rgba(120, 190, 255, .45);
}

/* ---------- chrome ---------- */
#chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px;
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-diamond {
  width: 20px;
  height: 20px;
  border: 2px solid #bfe0ff;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(120, 190, 255, .45);
}

.brand-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .22em;
  color: #eaf3ff;
}

/* ---------- language switcher ---------- */
#chrome { justify-content: center; }

.lang-switch {
  position: absolute;
  top: 50%;
  inset-inline-end: 28px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .16em;
}

.lang-opt {
  color: rgba(160, 200, 250, .55);
  padding: 4px 2px;
  transition: color .18s ease;
}

.lang-opt:hover { color: #dcebff; }

.lang-opt.is-active {
  color: #eaf3ff;
  border-bottom: 1px solid rgba(150, 205, 255, .7);
}

.lang-sep { color: rgba(140, 180, 225, .3); }

/* ---------- Arabic ---------- */
/* The track's transform maths assumes a left-to-right axis, and the cube's flight
   path is keyframed to match each panel's position — mirroring the layout would
   desync them. So only the text direction flips; the choreography stays put. */
/* Both the overflow container and the track must stay LTR: in RTL an over-wide
   child anchors to the container's right edge, which would park the panels
   off-screen and leave every corner blank. Only .sec flips back to rtl. */
html[dir="rtl"] #track-wrap,
html[dir="rtl"] #track { direction: ltr; }
html[dir="rtl"] .sec { direction: rtl; }
html[dir="rtl"] .sec-narrow { text-align: right; }

html[lang="ar"] body,
html[lang="ar"] .pill,
html[lang="ar"] .sec h2,
html[lang="ar"] #hero-title {
  font-family: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif;
}

/* Arabic is a connected script — tracking pulls the joins apart, so the wide
   letter-spacing used for the Latin mono labels has to be dropped. */
html[lang="ar"] .kicker,
html[lang="ar"] .hero-kicker,
html[lang="ar"] .hero-hint,
html[lang="ar"] .stat-label,
html[lang="ar"] .footer-note,
html[lang="ar"] .svc-title,
html[lang="ar"] .svc-desc,
html[lang="ar"] .prod-desc,
html[lang="ar"] .about-body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: 0;
}

html[lang="ar"] #hero-title { letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] .sec h2 { letter-spacing: 0; line-height: 1.3; }
html[lang="ar"] .contact-title { letter-spacing: 0; }
/* Latin product names and the tag column keep their mono treatment. */
html[lang="ar"] .prod-title, html[lang="ar"] .stat-value { font-family: 'JetBrains Mono', monospace; }

/* ---------- touch devices: restore native cursor ---------- */
@media (hover: none) {
  body, a, button { cursor: auto; }
  #tc-cursor, #tc-cursor-dot { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  #chrome { padding: 16px 18px; }
  .brand-name { font-size: 15px; letter-spacing: .16em; }
  .brand-diamond { width: 16px; height: 16px; }
  .lang-switch { inset-inline-end: 18px; font-size: 11px; }

  /* Copy sits in the lower half, under the raised cube. */
  .panel { padding: 0 7vw; }
  .panel:not(.center) { align-items: flex-end; padding-bottom: 11vh; }
  .panel.center { justify-content: flex-end; padding-bottom: 13vh; }
  .sec-narrow { max-width: none; }

  /* Guarantees contrast wherever the cube happens to drift behind the text. */
  .sec { position: relative; }
  .sec::before {
    content: '';
    position: absolute;
    inset: -7vw -8vw;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(5, 10, 22, .88), rgba(5, 10, 22, .62) 58%, transparent 85%);
  }

  .hero-kicker { font-size: 10px; letter-spacing: .22em; margin-bottom: 18px; }
  #hero-title { font-size: clamp(34px, 10.5vw, 56px); }
  .hero-hint { font-size: 10px; letter-spacing: .22em; margin-top: 24px; }
  .pill { margin-top: 32px; padding: 14px 30px; font-size: 16px; }

  .sec h2 { font-size: clamp(28px, 7.6vw, 40px); margin-bottom: 22px; }
  .svc-item { gap: 14px; padding: 13px 0; }
  .svc-title { font-size: 17px; }
  .svc-desc { font-size: 13px; }

  .about-body { font-size: 15px; line-height: 1.6; margin-bottom: 26px; }
  .stats { gap: 22px; flex-wrap: wrap; }
  .stat-value { font-size: 26px; }
  .stat-label { font-size: 11px; }

  .prod-list { gap: 12px; }
  .prod-card { padding: 16px 18px; }
  .prod-title { font-size: 17px; }
  .prod-desc { font-size: 13px; }

  .contact-title { font-size: clamp(32px, 9.5vw, 52px) !important; }
  .footer-note { font-size: 10.5px; margin-top: 26px; }
}

/* Short landscape phones: the panels have to stop competing with the cube. */
@media (max-height: 520px) and (orientation: landscape) {
  #hero-title { font-size: clamp(28px, 6vw, 44px); }
  .pill { margin-top: 20px; padding: 11px 24px; }
  .hero-hint { display: none; }
  .sec h2 { font-size: clamp(24px, 4.4vw, 34px); margin-bottom: 14px; }
  .svc-item { padding: 9px 0; }
  .about-body { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}