/* ==========================================================================
   HundteC v2 design layer (branch v2-hayo, test site hundtec-v2.hundai.tech)
   Ideas borrowed from hayo.net: a particle field that changes shape per
   section, a floating glass pill menu, serif headlines with fading last words,
   chapter pills, round-arrow buttons, stat and proof cards, a navy footer.
   Loaded after style.css on every page; everything here overrides it.
   ========================================================================== */
:root {
  --v2-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --v2-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --v2-footer: #0A1C45;
  --v2-card: rgba(11, 16, 35, 0.78);

  /* v2-only values, named so the layer uses tokens only; they join Hundtec_DESIGN.md if v2 goes live */
  --v2-display-1: clamp(42px, 6.6vw, 82px);
  --v2-display-1-sm: clamp(38px, 10vw, 52px);
  --v2-display-2: clamp(34px, 4.6vw, 58px);
  --v2-display-num: clamp(40px, 5vw, 58px);
  --v2-bg-60: rgba(5, 8, 22, 0.6);
  --v2-black-35: rgba(0, 0, 0, 0.35);
  --v2-black-55: rgba(0, 0, 0, 0.55);
  --v2-blue-35: rgba(10, 92, 224, 0.35);
  --v2-card-solid: #0E1530;
  --v2-cyan-25: rgba(0, 212, 255, 0.25);
  --v2-cyan-35: rgba(0, 212, 255, 0.35);
  --v2-navy: #0A1C45;
  --v2-panel-72: rgba(16, 23, 50, 0.72);
  --v2-panel-90: rgba(16, 23, 50, 0.9);
  --v2-tile: #E9EEF8;
  --v2-tile-text: #1B2340;
  --v2-white: #fff;
  --v2-white-05: rgba(255, 255, 255, 0.05);
  --v2-white-07: rgba(255, 255, 255, 0.07);
  --v2-white-09: rgba(255, 255, 255, 0.09);
  --v2-white-10: rgba(255, 255, 255, 0.1);
  --v2-white-16: rgba(255, 255, 255, 0.16);
  --v2-white-18: rgba(255, 255, 255, 0.18);
  --v2-white-25: rgba(255, 255, 255, 0.25);
  --v2-white-40: rgba(255, 255, 255, 0.4);
  --v2-white-50: rgba(255, 255, 255, 0.5);
  --v2-white-72: rgba(255, 255, 255, 0.72);
  --v2-white-78: rgba(255, 255, 255, 0.78);
}
html.is-ar { --v2-serif: var(--font-arabic); --v2-mono: var(--font-arabic); }

/* ---------- particle field behind every page ---------- */
#v2-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.v2-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 30%, var(--v2-bg-60) 78%); }
main, .site-footer { position: relative; z-index: 1; }
main section { background: transparent !important; }
.hero__bg, .hero__visual { display: none !important; }   /* the field replaces the old hero art */

/* ---------- floating pill menu ---------- */
.site-header {
  left: 0; right: 0; margin-inline: auto;
  top: calc(12px + env(safe-area-inset-top, 0px));
  width: min(1340px, calc(100% - 32px)); height: 64px;
  border-radius: var(--radius-full);
  background: var(--v2-panel-72);
  border: 1px solid var(--v2-white-18);
  box-shadow: 0 10px 30px var(--v2-black-35);
}
.site-header.is-scrolled { background: var(--v2-panel-90); border: 1px solid var(--v2-white-18); }
@media (min-width: 1241px) {
  .site-header, .site-header.is-scrolled { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
}
.site-header .nav { padding-inline: var(--space-md) var(--space-xs); max-width: none; }
.site-header .nav__links { gap: var(--space-2xs); }
.nav__link::after { display: none; }
.nav__link { padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-full); transition: background .2s, color .2s; }
.nav__link:hover, .nav__link.is-active { background: var(--v2-white-07); }

/* ---------- round-arrow buttons ---------- */
.btn--primary { gap: var(--space-xsm); padding-inline-end: var(--space-2xs);
  box-shadow: inset 0 1px 0 var(--v2-white-25), 0 8px 24px var(--v2-blue-35); }
.btn--primary::after { content: "↗"; display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--v2-white-16);
  font-size: var(--text-sm); line-height: 1; transition: transform .25s; }
.btn--sm.btn--primary::after { width: 22px; height: 22px; font-size: var(--text-xs); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--primary:hover::after { transform: rotate(-45deg); }
.btn--primary .btn__icon, .btn--primary > span[aria-hidden="true"] { display: none; }
html.is-ar .btn--primary::after { content: "↖"; }
.btn--outline, .btn--whatsapp { transition: transform .25s, background .25s; }
.btn--outline:hover, .btn--whatsapp:hover { transform: translateY(-2px); }

/* ---------- serif headlines, last words fade ---------- */
.hero__heading, .section-header__title, .py-hero__title, .vg-title, .vg-head h2, .cta__title, .consult__title {
  font-family: var(--v2-serif); font-weight: 600; letter-spacing: -0.02em;
}
.section-header__title { font-size: var(--v2-display-2); line-height: 1.06; }
.v2-fade { background: linear-gradient(90deg, var(--v2-white) 0%, var(--v2-white-40) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
html.is-ar .v2-fade { background: linear-gradient(270deg, var(--v2-white) 0%, var(--v2-white-40) 100%); -webkit-background-clip: text; background-clip: text; }

/* ---------- home hero: centred, like hayo ---------- */
.hero { min-height: 92vh; }
.hero__inner { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
.hero__content { max-width: 980px; }
.hero__heading { font-size: var(--v2-display-1); line-height: 1.03; }
.hero__heading-line { display: inline; }
.hero__subheading { margin-inline: auto; max-width: 62ch; }
.hero__actions { justify-content: center; }

/* ---------- chapter pills ---------- */
.section-header__eyebrow, .hero__tagline, .vg-eyebrow, .vg-head span, .v2-chapter {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xsm); border-radius: var(--radius-full);
  font-family: var(--v2-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--v2-white-78); background: var(--v2-white-05); border: 1px solid var(--v2-white-10);
}
.section-header__eyebrow::before, .hero__tagline::before, .vg-eyebrow::before, .vg-head span::before, .v2-chapter::before {
  content: ""; width: 12px; height: 12px; flex: none; background: var(--color-brand-cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 3.5v7L8 15l-6-3.5v-7z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 3.5v7L8 15l-6-3.5v-7z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- cards: see-through so the field shows, lively on hover ---------- */
.glass-card, .vg-card, .erp-mod, .nw-aud__card {
  background: var(--v2-card) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
}
.products__grid .product-card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius-lg); }

/* ---------- "built on" wall: white tiles like hayo's partner wall ---------- */
.tech__item { background: var(--v2-tile); border-color: transparent; border-radius: var(--radius-md); min-height: 58px; }
.tech__name { color: var(--v2-tile-text); }
.tech__item:hover { background: var(--v2-white); border-color: transparent; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 24px var(--v2-cyan-25); }
.tech__item:hover .tech__name { color: var(--v2-navy); }

/* ---------- footer ---------- */
.site-footer { background: var(--v2-footer); border-top: 0; }

/* ---------- home: stats, rotating steps, proof (v2 only) ---------- */
.v2-stats, .v2-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.v2-stat { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); text-align: center; background: var(--v2-card);
  border: 1px solid var(--v2-white-09); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .3s, border-color .3s, box-shadow .3s; }
.v2-stat:hover { transform: translateY(-5px); border-color: var(--v2-cyan-35); box-shadow: var(--shadow-glow); }
.v2-stat__label { font: 500 var(--text-xs)/1.3 var(--v2-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-white-72); }
.v2-stat__value { font: 600 var(--v2-display-num)/1 var(--v2-serif); color: var(--color-teal); margin-top: var(--space-xsm); font-variant-numeric: tabular-nums; }
.v2-stat__note { font-size: var(--text-xs); color: var(--v2-white-50); margin-top: var(--space-xs); }

.v2-proof a { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-lg); text-align: start;
  background: var(--v2-card); border: 1px solid var(--v2-white-09); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .3s, border-color .3s, box-shadow .3s; }
.v2-proof a:hover { transform: translateY(-5px); border-color: var(--color-accent); box-shadow: var(--shadow-glow); }
.v2-proof__tag { font: 500 var(--text-xs)/1 var(--v2-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-white-50); }
.v2-proof__metric { font: 600 var(--text-3xl)/1 var(--v2-serif); color: var(--color-brand-cyan); }
.v2-proof p { margin: 0; font-size: var(--text-sm); color: var(--v2-white-72); flex: 1; }
.v2-proof__go { font: 500 var(--text-xs)/1 var(--v2-mono); color: var(--color-link); }

.v2-steps { height: 280vh; position: relative; padding: 0 !important; overflow-x: clip; }
.v2-steps__stick { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; padding-top: var(--space-3xl); }
.v2-steps__head { text-align: center; }
.v2-tabs { display: inline-flex; gap: var(--space-2xs); margin-top: var(--space-md); padding: var(--space-2xs); border-radius: var(--radius-full); background: var(--v2-white-05); border: 1px solid var(--v2-white-09); }
.v2-tabs button { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font: 500 var(--text-xs)/1 var(--v2-mono); color: var(--v2-white-72); transition: background .25s, color .25s; }
.v2-tabs button.on { background: var(--color-accent-fill); color: var(--v2-white); }
.v2-stage { position: relative; perspective: 1400px; display: grid; place-items: center; }
.v2-card3d { position: absolute; width: min(520px, 84vw); padding: var(--space-lg) var(--space-lg) var(--space-lg); border-radius: var(--radius-xl); text-align: start;
  background: var(--v2-card-solid); border: 1px solid var(--v2-white-18); box-shadow: 0 30px 60px var(--v2-black-55);
  transform-style: preserve-3d; will-change: transform, opacity; }
.v2-card3d__kicker { font: 500 var(--text-xs)/1 var(--v2-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-white-72); }
.v2-card3d__num { font: 600 var(--text-4xl)/1 var(--v2-serif); color: var(--color-teal); margin: var(--space-xsm) 0 var(--space-xs); }
.v2-card3d h3 { font: 600 var(--text-xl)/1.2 var(--v2-serif); margin: 0 0 var(--space-xs); }
.v2-card3d p { color: var(--v2-white-72); margin: 0; }
.v2-card3d ul { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.v2-card3d li { font: 500 var(--text-xs)/1 var(--v2-mono); padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-full); border: 1px solid var(--v2-white-18); color: var(--v2-white-72); }

@media (max-width: 960px) {
  .v2-stats, .v2-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .v2-steps { height: auto; padding: var(--space-3xl) var(--container-padding) !important; }
  .v2-steps__stick { position: static; height: auto; padding-top: 0; }
  .v2-stage { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); perspective: none; }
  .v2-card3d { position: static; width: 100%; transform: none !important; opacity: 1 !important; }
  .v2-tabs { display: none; }
}
@media (max-width: 768px) {
  .site-header { height: 58px; }
  .hero__heading { font-size: var(--v2-display-1-sm); }
}
@media (max-width: 520px) {
  .v2-stats, .v2-proof { grid-template-columns: 1fr; }
}

/* The pill has room for every link only above 1240px: below that, use the phone menu (rules copied from style.css) */
@media (min-width: 769px) and (max-width: 1240px) {
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-height) + var(--space-xs)) 0 max(var(--space-lg), env(safe-area-inset-bottom));
    background: var(--color-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base);
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-inline: var(--container-padding);
  }

  .nav__links li {
    width: 100%;
    text-align: start;
  }

  .nav__links li {
    border-bottom: 1px solid var(--v2-white-07);
  }

  .nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    font-size: var(--text-base);
    font-weight: 700;
  }

  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    padding-inline: var(--container-padding);
  }

  .nav__actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .site-header { z-index: 300;
  }

  .nav__toggle, .lang-switch, .nav__logo { position: relative; z-index: 310;
  }

  body.nav-open { overflow: hidden;
  }
}