/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

html, body {
  min-height: 100%;
  background: #000;
  color: #e0e6f0;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* overflow-x:hidden on BOTH html and body turns body into its own scroll
   container, which can make page scrolling feel stuck. Only html clips now,
   and body uses "clip" (clips without creating a scroll container). */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* ================================================================
   CANVAS — fixed behind everything
   ================================================================ */
canvas#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100lvh;          /* constant on phones: no re-layout when the URL bar hides */
  z-index: 0;
  touch-action: pan-y;   /* was "none": that blocked finger-scrolling wherever the canvas was touched (e.g. the hero) */
  pointer-events: auto;
}

/* All content layers sit above the canvas */
.glass-nav,
.content {
  position: relative;
  z-index: 10;
}

/* ================================================================
   GLASSMORPHISM SHARED VARS
   ================================================================ */
:root {
  --glass-bg: rgba(30, 30, 30, 0.5);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.4);
  --glass-blur: 18px;
  --glass-radius: 18px;
  --neon-blue: #4da6ff;
  --neon-glow: rgba(77, 166, 255, 0.5);
}

/* ================================================================
   TOP NAVIGATION BAR
   ================================================================ */
.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0 0 var(--glass-radius) var(--glass-radius);
  box-shadow: 0 4px 24px var(--glass-shadow);
  z-index: 1000;
  transition: transform 0.35s ease;
}

.glass-nav.nav-hidden {
  transform: translateY(-110%);
}

.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 28px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 32px;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.nav-links a:hover {
  color: #fff;
  text-shadow: 0 0 12px var(--neon-glow);
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88vh;        /* slightly shorter than full viewport */
  min-height: 500px;
  pointer-events: none; /* let canvas underneath receive pointer events */
}

.hero-inner {
  text-align: center;
  pointer-events: auto; /* re-enable for text selection, etc. */
}

.hero-logo img {
  width: 160px;
  height: auto;
  margin-bottom: 24px;
  filter: var(--logo-filter, none) drop-shadow(0 0 30px rgba(77, 166, 255, 0.35));
}

.hero-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  font-size: 16px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.3);
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #4da6ff 50%, #b8d8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(200, 215, 240, 0.6);
  font-weight: 300;
}

/* ================================================================
   GLASS CARD SECTIONS (below hero)
   ================================================================ */
.glass-section {
  padding: 40px 60px;
}

.glass-card {
  display: flex;
  align-items: stretch;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 52px;
  background: rgba(38, 38, 38, 0.5);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--glass-radius);
  box-shadow: 0 8px 40px var(--glass-shadow);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.glass-card:hover {
  border-color: rgba(77, 166, 255, 0.25);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(77, 166, 255, 0.06);
}

.glass-card-text {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.glass-card-text h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff, #4da6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card-text p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(220, 220, 230, 0.7);
  margin-bottom: 14px;
}

.glass-card-image {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.glass-card-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.2);
}

/* ================================================================
   FADE-IN REVEAL ANIMATION
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   IMAGE HOLDERS THAT FILL THEIR CARD  (.glass-card-image.fill)
   ================================================================ */
.glass-card-image.fill {
  position: relative;
}

.glass-card-image.fill img,
.glass-card-image.fill .image-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================
   1) TALL CARD (About) — 50% taller than the original card
   --about-base-h = the original card height; change it if your
   content changes and you want the 1.5x to track it.
   ================================================================ */
.glass-card--tall {
  --about-base-h: 316px;
  min-height: calc(var(--about-base-h) * 1.5);
}

/* ================================================================
   SECTION TITLES + ANCHORS
   ================================================================ */
.glass-section[id] {
  scroll-margin-top: 90px;         /* keeps #about / #services / #portfolio clear of the nav */
}

.section-title {
  max-width: 980px;
  margin: 0 auto 40px;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(135deg, #ffffff, #4da6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cards that fade in on scroll keep their hover transitions */
.glass-card.reveal {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out,
              border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ================================================================
   SPLIT CARDS — image on the upper part, description underneath
   Default = 50 / 50. Change the two flex numbers to change the split
   (portfolio cards use 3 : 1 = image 75% / text 25%).
   ================================================================ */
.glass-card--split {
  flex-direction: column;
  gap: 14px;
  max-width: none;
  margin: 0;
  padding: 16px;
  aspect-ratio: 6 / 10;
}

.glass-card--split .glass-card-image {
  flex: 1 1 0;
  min-height: 0;
}

.glass-card--split .glass-card-text {
  flex: 1 1 0;
  min-height: min-content;         /* card grows instead of overflowing if text is long */
  justify-content: flex-start;
  padding: 4px 12px 8px;
}

.glass-card--split .glass-card-text h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff, #4da6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card--split .glass-card-text p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.glass-card--split .glass-card-text p:last-child {
  margin-bottom: 0;
}

/* feature labels (text before the colon) in service cards */
.glass-card-text p .feat-label {
  color: var(--label) !important;
  -webkit-text-fill-color: var(--label) !important;
  font-weight: 700 !important;
}

/* ================================================================
   PACKAGE PRICE — accent badge anchored at the bottom of the text block
   ================================================================ */
.package-price {
  margin-top: auto;                       /* push to the bottom of the flex text column */
  padding: 10px 22px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(77, 166, 255, 0.25) 0%, rgba(77, 166, 255, 0.10) 100%);
  border: 1px solid rgba(77, 166, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(77, 166, 255, 0.10);
  -webkit-text-fill-color: #fff;         /* prevent gradient clip from parent h3 rules */
}

[data-theme="light"] .package-price {
  color: #0b1f44;
  -webkit-text-fill-color: #0b1f44;
  background: linear-gradient(135deg, rgba(31, 111, 214, 0.15) 0%, rgba(31, 111, 214, 0.06) 100%);
  border-color: rgba(31, 111, 214, 0.30);
  box-shadow: 0 0 16px rgba(31, 111, 214, 0.08);
}

@media (max-width: 768px) {
  .package-price { font-size: 1rem; padding: 9px 16px; }
}

/* ================================================================
   2) SERVICES — three cards in a "V"
   Two on top, one centred underneath (it sits in the gap between the
   two above) and a little bigger so it can hold more information.
   ================================================================ */
.card-cluster--v {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 64px;                  /* row gap / column gap — more air between cards */
  max-width: 980px;
  margin: 0 auto;
}

.card-cluster--v > .glass-card {
  flex: 0 0 calc(50% - 32px);      /* two per row (32px = half the column gap) */
}

.card-cluster--v > .glass-card--feature {
  flex: 0 0 56%;                   /* slightly bigger than the two above */
  aspect-ratio: 6 / 10;
}

.card-cluster--v .glass-card--feature .glass-card-text p {
  font-size: 0.95rem;
}

/* ================================================================
   3) PORTFOLIO — two image cards pushed to opposite sides
   Image = top 75%, text space = bottom 25%.
   ================================================================ */
.portfolio-row {
  display: flex;
  justify-content: space-between;  /* one hard left, one hard right */
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

.portfolio-row > .glass-card {
  flex: 0 0 40%;
}

.glass-card--portfolio {
  aspect-ratio: 4 / 5;
}

.glass-card--portfolio .glass-card-image { flex: 3 1 0; }
.glass-card--portfolio .glass-card-text  { flex: 1 1 0; padding-top: 0; }

.glass-card--portfolio .glass-card-text h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.glass-card--portfolio .glass-card-text p {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ================================================================
   TYPEWRITER — characters are wrapped by wave.js and revealed one by one.
   visibility (not opacity) is used so gradient-clipped headings still render.
   ================================================================ */
.tw-ch { visibility: hidden; }
.tw-ch.on { visibility: visible; }

/* Screen-reader copy of the full text (the animated characters are aria-hidden) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The "|" cursor. Zero width, so it never shifts the text or its centring. */
.tw-caret {
  position: relative;
}

.tw-caret::after {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.1em;
  bottom: 0.05em;
  width: 2px;
  background: var(--neon-blue);
  box-shadow: 0 0 8px var(--neon-glow);
}

.tw-caret.blink::after {
  animation: tw-blink 1.06s steps(1) infinite;
}

@keyframes tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-caret.blink::after { animation: none; }
}

/* ================================================================
   4) LOGO CHAIN — glass balls on a full-width micro sine wave
   Positions are set by the "ball chain" block in wave.js.
   ================================================================ */
.chain-section {
  padding: 48px 0 24px;
}

.chain-track {
  --ball: 88px;                    /* overwritten by wave.js to fit the screen */
  position: relative;
  width: 100%;
  height: 200px;                   /* overwritten by wave.js */
}

.chain-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.chain-line path {
  fill: none;
  stroke: rgba(77, 166, 255, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--neon-glow));
}

.ball {
  position: absolute;
  width: var(--ball);
  height: var(--ball);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(38, 38, 38, 0.5);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.ball:hover {
  border-color: rgba(77, 166, 255, 0.25);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(77, 166, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Balls are links: icon-only, no underline, glow on hover/keyboard focus */
a.ball {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
}

a.ball:hover,
a.ball:focus-visible {
  color: #fff;
  border-color: rgba(77, 166, 255, 0.45);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5), 0 0 22px var(--neon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  outline: none;
}

.ball svg {
  width: 40%;
  height: 40%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ball img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.ball-fallback {
  align-items: center;
  justify-content: center;
  width: 58%;
  height: 58%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.3);
}

/* ================================================================
   5) STANDALONE SERVICES — two parallelogram rows, 3 cards each.
   Same look as before (skewed, rounded glass cards). The ONLY change:
   the skew now lives on a background layer (::before) instead of on the
   whole card, so the text is never skewed / counter-skewed and renders
   perfectly sharp. The slant is set by --skew.
   ================================================================ */
.standalone-row {
  display: flex;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 24px;
}

/* a leftover transform from the scroll-reveal would keep the text soft */
.standalone-row.reveal.visible { transform: none; }

.standalone-card {
  --skew: skewX(-10deg);
  --lift: scale(1);
  flex: 1 1 0;
  position: relative;
  z-index: 1;
  display: flex;
  cursor: default;
  isolation: isolate;
}

/* glass layer: skewed, rounded, blurred — everything visual from the old card */
.standalone-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;   /* (not "inset": older iPhones/iPads ignore it) */
  z-index: -1;
  transform: var(--skew) var(--lift);
  border-radius: var(--glass-radius);
  background: rgba(38, 38, 38, 0.5);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px var(--glass-shadow);
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* content: a normal, un-transformed block -> crisp text.
   Side padding keeps text clear of the slanted edges. */
.standalone-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding: 36px 42px 32px;
  overflow-wrap: break-word;
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1);
}

/* hover: same effect as before (card grows, text + icon grow) — only on devices that can hover */
@media (hover: hover) {
  .standalone-card:hover { --lift: scale(1.08); z-index: 10; }
  .standalone-card:hover::before {
    border-color: rgba(77, 166, 255, 0.30);
    box-shadow: 0 12px 52px rgba(0, 0, 0, 0.6),
                0 0 24px rgba(77, 166, 255, 0.10);
  }
  .standalone-card:hover .standalone-inner { transform: scale(1.06); }
  .standalone-card:hover .standalone-icon svg { color: #fff; }
}

/* icon area — minimal stroke icons matching Contact section balls */
.standalone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.standalone-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.3s ease;
}

/* text */
.standalone-inner h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff, #4da6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.standalone-inner p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(220, 220, 230, 0.7);
}

/* ---- Light theme ---- */
[data-theme="light"] .standalone-card::before {
  background: rgba(225, 225, 225, 0.7);
  border-color: rgba(20, 50, 110, 0.12);
}
@media (hover: hover) {
  [data-theme="light"] .standalone-card:hover::before {
    border-color: rgba(31, 111, 214, 0.35);
    box-shadow: 0 12px 48px rgba(30, 60, 120, 0.24),
                0 0 22px var(--neon-glow);
  }
  [data-theme="light"] .standalone-card:hover .standalone-icon svg { color: #0b1f44; }
}
[data-theme="light"] .standalone-icon svg { color: rgba(15, 30, 60, 0.75); }
[data-theme="light"] .standalone-inner h3 { background-image: linear-gradient(135deg, #0b1f44, #1f6fd6); }
[data-theme="light"] .standalone-inner p { color: rgba(24, 36, 60, 0.82); }

/* ---- RTL / Persian: slant leans the other way ---- */
html[lang="fa"] .standalone-card { --skew: skewX(10deg); }
html[lang="fa"] .standalone-inner p { line-height: 1.9; }

/* ---- Tablet: 3 narrow columns would crush the text, so wrap 2 + 1 (same cards, same look) ---- */
@media (max-width: 1024px) {
  .standalone-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 20px;
    padding-inline: 30px;   /* room for the slanted corners so they never touch the screen edge */
  }
  .standalone-card { flex: 0 1 calc(50% - 10px); }
}

/* ---- Phone: stack vertically, gentle vertical slant ---- */
@media (max-width: 640px) {
  .standalone-row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    padding-inline: 0;
  }
  .standalone-card {
    --skew: skewY(-4deg);
    flex: 0 0 auto;
    width: 100%;
  }
  html[lang="fa"] .standalone-card { --skew: skewY(4deg); }
  .standalone-inner { padding: 34px 22px 34px; }
}

/* ================================================================
   FOOTER — glass "shoreline"
   The glass layer is strongest at the bottom and fades out toward
   the top, so the dots get clearer and sharper the higher you look.
   ================================================================ */
.site-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 8vh;
  padding: 170px 60px 36px;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 -40px 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(38, 38, 38, 0.9) 0%,
    rgba(38, 38, 38, 0.5) 45%,
    rgba(38, 38, 38, 0) 100%);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%);
  pointer-events: none;
}

.footer-brand {
  font-size: clamp(3.5rem, 11vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #ffffff 0%, #4da6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-meta {
  text-align: end;
}

.footer-meta p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(220, 220, 230, 0.7);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .glass-nav {
    padding: 6px 16px;
    border-radius: 0 0 14px 14px;
  }

  .nav-links {
    gap: 16px;
  }

  .nav-links a {
    font-size: 11px;
  }

  .glass-section {
    padding: 24px 16px;
  }

  .glass-card {
    flex-direction: column;
    padding: 32px 24px;
    gap: 24px;
  }

  .glass-card-image {
    order: -1;  /* image on top on mobile */
  }

  /* tall card: stacked layout is taller, and the image takes the extra height */
  .glass-card--tall {
    --about-base-h: 646px;
  }

  .glass-card--tall .glass-card-image {
    flex: 1 1 auto;
  }

  /* split cards: keep their compact padding, stack everything in one column */
  .glass-card--split {
    padding: 14px;
    gap: 12px;
  }

  .glass-card--split .glass-card-image {
    order: 0;
  }

  .card-cluster--v {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;
  }

  .card-cluster--v > .glass-card,
  .card-cluster--v > .glass-card--feature {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .portfolio-row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .portfolio-row > .glass-card {
    flex: 0 0 auto;
    width: 100%;
  }

  .section-title {
    font-size: 1.6rem;
    margin-bottom: 28px;
  }

  /* footer: stack, brand above details */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 130px 24px 28px;
    gap: 20px;
  }

  .footer-meta {
    text-align: start;
  }
}


/* ================================================================
   THEME VARIABLES  (dark = default, light = :root[data-theme="light"])
   Logo is white/light-coloured? Set  --logo-filter: invert(1);  in the light block.
   ================================================================ */
:root {
  color-scheme: dark;
  --label: #ffffff;
  --nav-fg: rgba(255, 255, 255, 0.8);
  --logo-filter: none;
}
:root[data-theme="light"] {
  color-scheme: light;
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(20, 50, 110, 0.14);
  --glass-shadow: rgba(30, 60, 120, 0.16);
  --neon-blue: #1f6fd6;
  --neon-glow: rgba(31, 111, 214, 0.35);
  --label: #0b1f44;
  --nav-fg: rgba(15, 30, 60, 0.8);
  --logo-filter: none;
}
html, body { transition: background-color 0.35s ease, color 0.35s ease; -webkit-text-size-adjust: 100%; }

:root[data-theme="light"],
:root[data-theme="light"] body { background: #f3f6fb; color: #1b2433; }
[data-theme="light"] .nav-links a { color: rgba(15, 30, 60, 0.75); }
[data-theme="light"] .nav-links a:hover { color: #0b1f44; }
[data-theme="light"] .logo-fallback,
[data-theme="light"] .hero-logo-fallback,
[data-theme="light"] .image-fallback,
[data-theme="light"] .ball-fallback { border-color: rgba(20, 50, 110, 0.25); color: rgba(20, 50, 110, 0.5); }
[data-theme="light"] .hero-logo img { filter: var(--logo-filter) drop-shadow(0 0 24px rgba(31, 111, 214, 0.25)); }
[data-theme="light"] .nav-logo img { filter: var(--logo-filter); }
[data-theme="light"] .hero-title,
[data-theme="light"] .footer-brand { background-image: linear-gradient(135deg, #0b1f44 0%, #1f6fd6 60%, #4d9be8 100%); }
[data-theme="light"] .glass-card-text h2,
[data-theme="light"] .section-title,
[data-theme="light"] .glass-card--split .glass-card-text h3 { background-image: linear-gradient(135deg, #0b1f44, #1f6fd6); }
[data-theme="light"] .hero-subtitle { color: rgba(20, 40, 80, 0.65); }
[data-theme="light"] .glass-card,
[data-theme="light"] .ball { background: rgba(225, 225, 225, 0.7); border-color: rgba(20, 50, 110, 0.12); }
[data-theme="light"] .glass-card:hover { border-color: rgba(31, 111, 214, 0.35); box-shadow: 0 8px 44px rgba(30, 60, 120, 0.22); }
[data-theme="light"] .glass-card-text p { color: rgba(24, 36, 60, 0.82); }
[data-theme="light"] .chain-line path { stroke: rgba(31, 111, 214, 0.5); }
[data-theme="light"] a.ball { color: rgba(15, 30, 60, 0.75); }
[data-theme="light"] a.ball:hover,
[data-theme="light"] a.ball:focus-visible { color: #0b1f44; border-color: rgba(31, 111, 214, 0.5); box-shadow: 0 8px 44px rgba(30, 60, 120, 0.25), 0 0 22px var(--neon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
[data-theme="light"] .site-footer::before { background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0) 100%); }
[data-theme="light"] .footer-meta p { color: rgba(24, 36, 60, 0.75); }
.footer-meta a { color: var(--neon-blue); text-decoration: none; font-size: 0.85rem; }
.footer-meta a:hover { text-decoration: underline; }

/* ================================================================
   NAV: [logo][links] ............ [language][theme]
   ================================================================ */
.nav-start { display: flex; align-items: center; gap: 32px; min-width: 0; }
.nav-controls { display: flex; align-items: center; gap: 8px; }
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-width: 34px; padding: 0 12px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--nav-fg);
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid var(--glass-border); border-radius: 999px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.nav-btn--icon { padding: 0; }
.nav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn:hover, .nav-btn:focus-visible { border-color: var(--neon-blue); box-shadow: 0 0 14px var(--neon-glow); outline: none; }
.i-moon { display: none; }
[data-theme="light"] .i-sun { display: none; }
[data-theme="light"] .i-moon { display: block; }
.nav-links a:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 4px; border-radius: 4px; }

/* ================================================================
   PERSIAN / RTL  (html lang="fa" dir="rtl" is set by prefs.js + i18n.js)
   Letter-spacing is removed because it breaks the joined Persian letters.
   ================================================================ */
html[lang="fa"] body, html[lang="fa"] button {
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Noto Naskh Arabic', system-ui, sans-serif;
}
html[lang="fa"] .nav-links a { font-size: 14px; letter-spacing: 0; }
html[lang="fa"] .hero-title,
html[lang="fa"] .logo-fallback,
html[lang="fa"] .hero-logo-fallback,
html[lang="fa"] .image-fallback { letter-spacing: 0; }
html[lang="fa"] .glass-card-text p { line-height: 1.95; }
html[lang="fa"] .hero-subtitle { font-weight: 400; }

/* ================================================================
   PHONE OPTIMISATION — same look and same section order, just tuned
   ================================================================ */
@media (max-width: 768px) {
  :root { --glass-blur: 12px; }

  /* two-row nav: logo + buttons on top, links underneath */
  .glass-nav { flex-wrap: wrap; row-gap: 0; padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 4px; }
  .nav-start { display: contents; }
  .nav-logo { order: 1; }
  .nav-controls { order: 2; margin-inline-start: auto; }
  .nav-links { order: 3; flex: 1 0 100%; justify-content: space-between; gap: 6px; margin-top: 4px; border-top: 1px solid var(--glass-border); }
  .nav-links a { display: block; padding: 9px 2px; font-size: 12px; letter-spacing: 0; }
  html[lang="fa"] .nav-links a { font-size: 13px; }
  .nav-btn { height: 38px; min-width: 38px; }
  .glass-section[id] { scroll-margin-top: 120px; }

  .hero { height: 88vh; height: 88svh; min-height: 460px; }
  .hero-inner { padding: 0 20px; }
  .hero-title { text-wrap: balance; }

  /* cards: image gets a fixed ratio so text-heavy cards can never squash it */
  .glass-card--tall { min-height: 0; }
  .glass-card--tall .glass-card-image { flex: 0 0 auto; aspect-ratio: 1 / 1; min-height: 0; }
  .glass-card--split,
  .card-cluster--v > .glass-card,
  .card-cluster--v > .glass-card--feature { aspect-ratio: auto; }
  .glass-card--split .glass-card-image { flex: 0 0 auto; aspect-ratio: 4 / 3; }
  .glass-card--portfolio .glass-card-image { flex: 0 0 auto; aspect-ratio: 1 / 1; }
  .glass-card--split .glass-card-text,
  .glass-card--portfolio .glass-card-text { flex: 0 0 auto; padding: 4px 8px 8px; }
  .glass-card--portfolio .glass-card-text p { font-size: 0.9rem; }

  .ball svg { width: 46%; height: 46%; }
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* logo swap: light-theme logo (image/vortex-light.png) */
img.logo-light { display: none; }
[data-theme="light"] img.logo-light { display: block; }
[data-theme="light"] img.logo-dark { display: none; }
.hero-logo img.logo-light { margin-inline: auto; }   /* keeps the light logo centred */

/* ===== Board of Directors: compact cards + anchor for the Contact link ===== */
.chain-section[id] { scroll-margin-top: 90px; }
.portfolio-row > .glass-card--portfolio { flex: 0 0 260px; aspect-ratio: auto; padding: 14px; }
.portfolio-row .glass-card--portfolio .glass-card-image { flex: 0 0 auto; aspect-ratio: 1 / 1; }
.portfolio-row .glass-card--portfolio .glass-card-text { flex: 0 0 auto; padding: 4px 4px 2px; }
.portfolio-row .glass-card--portfolio .glass-card-text h3 { font-size: 1rem; margin-bottom: 4px; }
.portfolio-row .glass-card--portfolio .glass-card-text p { font-size: 0.78rem; line-height: 1.45; }
html[lang="fa"] .portfolio-row .glass-card--portfolio .glass-card-text p { line-height: 1.7; }
@media (max-width: 768px) {
  .portfolio-row { align-items: center; }
  .portfolio-row > .glass-card--portfolio { width: min(100%, 280px); flex: 0 0 auto; }
  .portfolio-row .glass-card--portfolio .glass-card-text p { font-size: 0.8rem; }
}
.portfolio-row { align-items: stretch; }   /* both cards the same height */
@media (max-width: 768px) { .portfolio-row { align-items: center; } }

/* ===== spacing: Board of Directors + Contact ===== */
.portfolio-row { justify-content: center; gap: 72px; }   /* cards closer together (was pushed to the far edges) */
#board { padding-bottom: 0; }                            /* less room below the cards */
.site-footer { margin-top: 2vh; }
.chain-section { margin-top: 60px; margin-bottom: 90px; } /* extra space above and below Contact */
@media (max-width: 768px) {
  .portfolio-row { gap: 20px; }
  .chain-section { margin-top: 48px; margin-bottom: 20px; }
}


/* ===== Standalone Services: intro line under the title ===== */
.section-lead {
  max-width: 760px;
  margin: -16px auto 36px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(220, 220, 230, 0.78);
}
html[lang="fa"] .section-lead { line-height: 1.9; }
[data-theme="light"] .section-lead { color: rgba(24, 36, 60, 0.82); }
@media (max-width: 768px) {
  .section-lead { margin: -8px auto 26px; font-size: 0.95rem; padding: 0 8px; }
}

/* ===== Package cards: five items each -> height follows the content,
   the image keeps a fixed ratio so it is never squashed by the longer text ===== */
.card-cluster--v > .glass-card--split { aspect-ratio: auto; }
@media (min-width: 769px) {
  .card-cluster--v .glass-card--split .glass-card-image { flex: 0 0 auto; aspect-ratio: 16 / 10; }
}

/* ===== Board of Directors: three cards — wrap instead of overflowing on mid-size screens ===== */
.portfolio-row { flex-wrap: wrap; }


/* ================================================================
   TOUCH DEVICES — the desktop hover look, applied automatically to the card
   that is across the middle of the screen (the "in-focus" class is set in wave.js)
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
  .glass-card.in-focus {
    border-color: rgba(77, 166, 255, 0.25);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(77, 166, 255, 0.06);
  }
  [data-theme="light"] .glass-card.in-focus { border-color: rgba(31, 111, 214, 0.35); box-shadow: 0 8px 44px rgba(30, 60, 120, 0.22); }

  .standalone-card.in-focus { --lift: scale(1.08); z-index: 10; }
  .standalone-card.in-focus::before {
    border-color: rgba(77, 166, 255, 0.30);
    box-shadow: 0 12px 52px rgba(0, 0, 0, 0.6), 0 0 24px rgba(77, 166, 255, 0.10);
  }
  .standalone-card.in-focus .standalone-inner { transform: scale(1.06); }
  .standalone-card.in-focus .standalone-icon svg { color: #fff; }
  [data-theme="light"] .standalone-card.in-focus::before {
    border-color: rgba(31, 111, 214, 0.35);
    box-shadow: 0 12px 48px rgba(30, 60, 120, 0.24), 0 0 22px var(--neon-glow);
  }
  [data-theme="light"] .standalone-card.in-focus .standalone-icon svg { color: #0b1f44; }
}