/* ==========================================================================
   Tralon Digital Agency — home page (index.php)
   Depends on assets/css/style.css (tokens, keyframes, .band--*, .cta).
   1. Hero                   3. Metrics
   2. Hero architecture      4. Services overview (tabs)
   ========================================================================== */


/* 1. Hero
   One orchestrated entrance on load: headline lines, lead, actions, diagram.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(2.5rem, 2rem + 3vw, 5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.hero__title {
  font-size: clamp(2.6rem, 1.3rem + 5.2vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 24px rgb(29 10 54 / 0.08);
}

.hero__line {
  display: block;
  animation: fade-up 0.9s var(--ease-out) both;
}

.hero__line:nth-child(2) { animation-delay: 0.12s; }
.hero__line:nth-child(3) { animation-delay: 0.24s; }

.hero__lead {
  max-width: 54ch;
  margin-top: var(--sp-5);
  animation: fade-up 0.9s var(--ease-out) 0.45s both;
}

.hero__actions {
  margin-top: var(--sp-6);
  animation: fade-up 0.9s var(--ease-out) 0.6s both;
}


/* 2. Hero architecture diagram
   HTML rather than SVG so the text stays crisp and wraps on small screens.
   Pulses travel down the connectors (strategy, then data, then software),
   using only transform and opacity.
   ========================================================================== */
.arch {
  --shift-step: 0.75rem;
  max-width: 34rem;
  animation: scale-in 1s var(--ease-out) 0.35s both;
}

@media (min-width: 40rem) {
  .arch { --shift-step: 1.5rem; }
}

@media (min-width: 60rem) {
  .arch { justify-self: end; width: 100%; }
}

.arch__layer {
  margin-inline-start: calc(var(--shift, 0) * var(--shift-step));
  padding: 1.15rem 1.35rem 1.3rem;
  border-left: 3px solid var(--band);
  border-radius: var(--r-lg);
  box-shadow: 0 0 48px -22px var(--band);
}

.arch__title {
  margin-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.arch__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.arch__nodes li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-color: color-mix(in srgb, var(--band) 45%, transparent);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
}

.arch__link {
  display: flex;
  gap: 2.25rem;
  height: 2rem;
  margin-inline-start: calc(var(--shift, 0) * var(--shift-step) + 1.5rem);
}

.arch__link span {
  position: relative;
  width: 1px;
  background: var(--border-strong);
}

.arch__link span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--band);
  box-shadow: 0 0 10px var(--band);
  opacity: 0;
  animation: pulse-down 2.4s var(--ease-out) infinite;
}

.arch__link span:nth-child(2)::after { animation-delay: 0.5s; }
.arch__link span:nth-child(3)::after { animation-delay: 1s; }

@keyframes pulse-down {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(1.75rem); }
}


/* 3. Metrics
   ========================================================================== */
.metrics__panel {
  overflow: hidden;
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat {
  padding: 1.5rem 1.5rem 1.6rem;
}

.stat:nth-child(even)   { border-left: 1px solid var(--border); }
.stat:nth-child(n + 3)  { border-top: 1px solid var(--border); }

@media (min-width: 48rem) {
  .metrics__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: 1.9rem 2rem 2rem; }
  .stat:nth-child(n + 3) { border-top: 0; }
  .stat + .stat { border-left: 1px solid var(--border); }
}

.stat__value {
  min-inline-size: calc(var(--digits, 2) * 1ch);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
}


/* 4. Services overview (tabs)
   Without JS the tab list stays hidden and all three panels are shown in
   full. main.js reveals the tab list and shows one panel at a time.
   ========================================================================== */
.svc {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

/* Grid only splits into two columns once the tab list is visible (main.js
   clears [hidden] on it). While it is hidden — no JS, or before it runs —
   .svc__panels is the only grid item, so keeping one full-width column here
   stops that lone item being squeezed into the 21rem first track. */
@media (min-width: 60rem) {
  .svc:has(.svc__tabs:not([hidden])) {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.svc__tabs {
  display: grid;
  gap: 0.5rem;
}

.svc__tabs[hidden] { display: none !important; }

.svc__panels {
  display: grid;
  gap: var(--sp-5);
}

.svc-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-align: left;
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.svc-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

.svc-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 0 36px -16px var(--band);
}

.svc-tab__dot {
  grid-row: 1 / span 2;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--band);
  opacity: 0.6;
  transition: opacity var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.svc-tab[aria-selected="true"] .svc-tab__dot {
  opacity: 1;
  box-shadow: 0 0 12px var(--band);
}

.svc-tab__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.svc-tab__short {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

.svc-panel {
  --card-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 2px solid var(--band);
}

.svc-panel:not([hidden]) {
  animation: fade-in 0.35s var(--ease-out);
}

.svc-panel__summary {
  margin-top: var(--sp-3);
  max-width: 56ch;
}

.svc-list {
  display: grid;
  gap: 1.15rem;
  margin-block: var(--sp-5) var(--sp-6);
}

.svc-list dt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
}

.svc-list dt::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--band);
  transform: rotate(45deg);
}

.svc-list dd {
  margin: 0.2rem 0 0 1.15rem;
  max-width: 54ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}