/* ==========================================================================
   Samsung-Elite — Responsive layer (mobile-first, loaded last)
   Breakpoints: 480 · 640 · 768 · 1024 · 1200 · 1360 (desktop nav) · 1600 · 1920 · 2560
   ========================================================================== */

/* ---------- ≤ 479px: small phones ---------- */
@media (max-width: 479.98px) {
  .hero__actions .btn--lg { min-height: 50px; padding-inline: 14px; font-size: 0.95rem; }
  .hero-chip--diag { display: none; }
  .hero-chip { max-width: 190px; padding: 10px 12px; }
  .brand__name { font-size: 1.05rem; }
  .brand__mark { width: 36px; height: 36px; }
  .team__skills { grid-template-columns: 1fr; }
  .cta-band .btn-row .btn { width: 100%; }
  .area-card__actions .btn { width: 100%; }
}

/* ---------- ≤ 767px: phones — compact exploded view ---------- */
@media (max-width: 767.98px) {
  .xp.is-scroll .xp__inner { gap: 6px; align-content: center; }
  .xp.is-scroll .xp__visual { order: -1; max-width: 520px; margin-inline: auto; width: 100%; }
  .xp.is-scroll .xp__title { font-size: 1.35rem; margin-block: 8px 6px; }
  .xp.is-scroll .eyebrow { display: none; }
  .xp.is-scroll .xp__step { display: none; }
  .xp.is-scroll .xp__step.is-active { display: grid; padding: 8px 12px; }
  .xp.is-scroll .xp__step p { font-size: 0.85rem; line-height: 1.6; }
  .xp-label text { font-size: 19px; }
  .floating-cta { display: none !important; }
}

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  .brand__tag { display: block; }
}

/* ---------- ≥ 640px: large phones / small tablets ---------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cats__grid { grid-template-columns: repeat(2, 1fr); }
  .code-grid { grid-template-columns: repeat(2, 1fr); }
  .problems__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why-card--big { grid-column: 1 / -1; }
  .team__skills { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .hero__actions { display: flex; flex-wrap: wrap; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≥ 768px: tablets ---------- */
@media (min-width: 768px) {
  :root { --header-h: 76px; }
  .topbar { display: block; }
  .header__cta { display: inline-flex; }
  .lang-switch { display: inline-flex; }
  .floating-cta { display: flex; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
  .brand__mark { width: 44px; height: 44px; }
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: repeat(4, 1fr); }
  .footer__bottom { padding-inline-end: 84px; } /* keep clear of floating buttons */
  .search-dialog { padding: 24px; }
}

/* ---------- ≥ 1024px: small laptops ---------- */
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero__visual { max-width: none; }
  .xp__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; }
  .codes__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; }
  .team__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; }
  .areas__layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; }
  .areas__map { position: sticky; top: calc(var(--header-h) + 24px); }
  .faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; }
  .faq__inner .section-head { position: sticky; top: calc(var(--header-h) + 24px); }
  .cta-band { grid-template-columns: 1fr auto; }
  .why__grid { grid-template-columns: repeat(4, 1fr); }
  .why-card--big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .why-card--big .why-card__meter { margin-top: auto; align-self: center; }
  .footer__top { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .footer__brand { grid-column: auto; }

  /* Process: horizontal timeline with a connecting line */
  .process__list { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .process__line { display: block; position: absolute; top: 28px; inset-inline: 10%; height: 2px; background: var(--c-line); list-style: none; }
  .process__line span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
  [dir='rtl'] .process__line span { transform-origin: right; background: linear-gradient(-90deg, var(--c-primary), var(--c-accent)); }
  .no-js .process__line span, .process__list.is-visible .process__line span { transform: scaleX(1); }
  .process__step { grid-template-columns: 1fr; text-align: center; justify-items: center; background: transparent; border: 0; padding: 0; gap: 12px; }
  .process__step p { grid-column: auto; }
  .process__icon { grid-row: auto; }
}

/* ---------- ≥ 1100px ---------- */
@media (min-width: 1100px) {
  .cats__grid { grid-template-columns: repeat(4, 1fr); }
  .problems__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≥ 1200px ---------- */
@media (min-width: 1200px) {
  .svc-grid { grid-template-columns: repeat(4, 1fr); }
  .code-grid { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tabs__list { justify-content: center; gap: 24px; }
  .tabs__tab { flex: 0 0 auto; min-width: 150px; }
}

/* ---------- ≥ 1360px: full desktop navigation ---------- */
@media (min-width: 1360px) {
  .nav-burger { display: none; }
  .nav-backdrop { display: none !important; }
  .nav {
    position: static; z-index: auto; width: auto; flex-direction: row; overflow: visible;
    background: none; box-shadow: none; transform: none !important; visibility: visible; transition: none;
    margin-inline-start: 18px;
  }
  .nav__drawer-head, .nav__drawer-cta { display: none; }
  .nav__list { display: flex; align-items: center; gap: 2px; padding: 0; }
  .nav__item { border: 0; flex-wrap: nowrap; }
  .nav__link { position: relative; padding: 10px 8px; font-size: 0.9rem; font-weight: 500; color: var(--c-ink-2); white-space: nowrap; transition: color var(--t-fast); }
  .nav__link::after { content: ''; position: absolute; inset-inline: 9px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--c-primary); transform: scaleX(0); transition: transform var(--t) var(--ease); }
  .nav__link:hover { color: var(--c-ink); }
  .nav__link:hover::after, .nav__link[aria-current='page']::after { transform: scaleX(1); }
  .nav__toggle { width: 20px; height: 28px; margin-inline-start: -6px; border-radius: 6px; }
  .nav__toggle .icon { width: 14px; height: 14px; }
  .nav__menu {
    position: absolute; top: calc(100% + 12px); inset-inline-start: -14px; width: 310px; display: block;
    padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.98); border: 1px solid var(--c-line); box-shadow: var(--sh-lg);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  }
  .nav__menu::before { content: ''; position: absolute; inset-inline: 0; top: -14px; height: 14px; }
  .nav__item--menu:hover .nav__menu, .nav__item--menu:focus-within .nav__menu, .nav__item.is-open .nav__menu {
    opacity: 1; visibility: visible; transform: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s;
  }
  .nav__item--menu:hover .nav__toggle .icon { transform: rotate(180deg); }
  .nav__menu-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--c-line); font-weight: 700; }
  .nav__menu-head .icon { width: 30px; height: 30px; color: var(--c-primary); stroke-width: 1.4; }
  body.nav-open { overflow: auto; }
  /* Keep the header on one line: compact brand + language switch until 1600px */
  .brand__tag { display: none; }
  .lang-switch [aria-current], .lang-switch > span { display: none; }
  .lang-switch a:not([aria-current]) { padding: 7px 12px; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-weight: 600; color: var(--c-ink); }
  .nav__item:first-child { display: none; } /* the logo links home */
}
@media (min-width: 1600px) {
  .nav__item:first-child { display: flex; }
}

/* ---------- ≥ 1600px ---------- */
@media (min-width: 1600px) {
  .code-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Large & 4K screens: scale the whole system up ---------- */
@media (min-width: 1920px) {
  html { font-size: 17px; }
  :root { --container: 1520px; }
}
@media (min-width: 2560px) {
  html { font-size: 20px; }
  :root { --container: 1760px; }
}

/* ---------- Touch devices: no hover tilt artefacts ---------- */
@media (hover: none) {
  .cat-card { transform: none !important; }
  .svc-card:hover, .card:hover { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header, .floating-cta, .mobile-bar, .search-dialog, .marquee, .hero__visual, .xp, .footer__cta { display: none !important; }
  body { padding: 0; color: #000; background: #fff; }
  .section--dark, .hero { background: #fff !important; color: #000 !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}