/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ALERSHAD · Clean Modern Minimalism
   Distinct from zesimo:
     · White background (not cream)
     · Plus Jakarta Sans only (not Cormorant + Inter)
     · No giant ghost letters, no /01 numbering,
       no italic-red accent word, no cursor follower
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ FALLBACK FONTS (metric overrides eliminate FOUT layout shift) ━━━
   Local Arial is the base. size-adjust + ascent/descent/line-gap-override
   tune Arial's metrics to match each web font as closely as possible, so when
   the real font swaps in, text occupies the same box and CLS stays at 0.
   Values approximated; refine with capsize.dev or fontaine if needed. */
@font-face {
  font-family: 'Jakarta Fallback';
  src: local('Arial');
  size-adjust: 102%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Cairo Fallback';
  src: local('Tahoma'), local('Arial');
  size-adjust: 95%;
  ascent-override: 108%;
  descent-override: 30%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* color */
  --bg:        #ffffff;
  --bg-soft:   #fafafa;
  --ink:       #0a0a0a;
  --ink-soft:  #1f1f1f;
  --muted:     #71717a;
  --line:      #ececec;
  --line-soft: #f4f4f5;
  --focus:     #0a7cff;

  /* shape */
  --radius:    14px;
  --maxw:      1200px;

  /* motion — directional easing per CSS Transitions Level 1
     ease-enter is applied on hover-IN, ease-exit on hover-OUT */
  --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

/* ━━━ FOCUS — keyboard only, WCAG 2.4.7 ━━━
   outline naturally follows the element's own border-radius in modern browsers,
   so we don't set border-radius here (would override pill/circle shapes). */
:where(a, button, [tabindex]):focus { outline: none; }
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ━━━ SKIP LINK — hidden until keyboard-focused ━━━ */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  transform: translateY(-120%);
  transition: transform var(--duration-base) var(--ease-exit);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--focus);
  outline-offset: -4px;
  transition: transform var(--duration-base) var(--ease-enter);
}

/* ━━━ REDUCED MOTION — disable decorative animation ━━━ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ━━━ NAV ━━━ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  height: 64px;
  padding: 0 32px;
  display: flex; justify-content: space-between; align-items: center;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px;
  letter-spacing: -.01em;
}
.brand-mark {
  width: 18px; height: 18px;
  background: var(--ink);
  border-radius: 5px;
  position: relative;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: 4px;
  border: 1.5px solid var(--bg);
  border-radius: 2px;
}
.menu { display: flex; align-items: center; gap: 32px; }
.menu a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--duration-fast) var(--ease-exit);
}
.menu a:hover {
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-enter);
}
.menu .menu-cta {
  background: var(--ink);
  color: var(--bg);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--duration-base) var(--ease-exit);
}
.menu .menu-cta:hover {
  background: var(--ink-soft);
  transition: background var(--duration-base) var(--ease-enter);
}

@media (max-width: 720px) {
  .nav { padding: 0 20px; }
  .menu { gap: 18px; }
  .menu a:not(.menu-cta) { display: none; }
}

/* ━━━ HERO ━━━ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 120px 32px 100px;
  text-align: center;
}
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 32px;
  letter-spacing: .01em;
}
.hero-title {
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: 28px;
  color: var(--ink);
}
.hero-title .thin {
  font-weight: 300;
  color: var(--muted);
}
.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.6;
  font-weight: 400;
}
.hero-actions {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition:
    background var(--duration-base) var(--ease-exit),
    transform var(--duration-base) var(--ease-exit);
}
.btn-primary:hover {
  background: var(--ink-soft);
  transform: translateY(-1px);
  transition:
    background var(--duration-base) var(--ease-enter),
    transform var(--duration-base) var(--ease-spring);
}
.btn-ghost {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--duration-base) var(--ease-exit);
}
.btn-ghost:hover {
  background: var(--line-soft);
  transition: background var(--duration-base) var(--ease-enter);
}

/* ━━━ STATS STRIP ━━━ */
.strip {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip-item {
  padding: 36px 24px;
  border-right: 1px solid var(--line);
  text-align: left;
}
.strip-item:last-child { border-right: none; }
.strip-value {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  color: var(--ink);
}
.strip-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 720px) {
  .strip { grid-template-columns: repeat(2, 1fr); padding: 0 20px 60px; }
  .strip-item:nth-child(2) { border-right: none; }
  .strip-item:nth-child(1), .strip-item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ━━━ TAG ━━━ */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 20px;
}

/* ━━━ PRODUCT ━━━ */
.product {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 100px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.product-copy h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 24px;
}
.product-copy > p {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 480px;
}
.check-list { list-style: none; }
.check-list li {
  font-size: 15px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
}
.check-list li::before {
  content: '';
  width: 16px; height: 16px;
  margin-right: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230a0a0a' stroke-width='2.5'><path d='M4 10l4 4 8-8'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* PHONE MOCKUP — E-Net app accurate */
.product-art { display: flex; justify-content: center; }

.phone {
  width: 320px;
  height: 660px;
  background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
  border-radius: 48px;
  padding: 9px;
  position: relative;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, .05) inset,
    0 30px 60px -20px rgba(0, 0, 0, .25),
    0 50px 100px -40px rgba(0, 0, 0, .15);
}
.phone-screen {
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 40px;
  padding: 14px 18px 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, 'SF Pro Text', 'Plus Jakarta Sans', sans-serif;
  color: #0a0a0a;
  position: relative;
}

/* Status bar with Dynamic Island */
.status-bar {
  height: 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
  position: relative;
  margin-bottom: 18px;
}
.status-bar::before {
  content: '';
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 24px;
  background: #000;
  border-radius: 14px;
}
.status-icons { display: inline-flex; gap: 5px; align-items: center; color: #0a0a0a; }

/* Welcome greeting */
.enet-greet {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px;
}
.enet-greet small { display: block; font-size: 13px; color: #71717a; font-weight: 400; margin-bottom: 2px; }
.enet-greet strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.bell {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: #0a0a0a;
}

/* Active eSIM card */
.enet-active {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
}
.enet-active-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.enet-flag {
  width: 42px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.enet-status {
  display: inline-flex; align-items: center; gap: 5px;
  background: #d6f5e3;
  color: #15803d;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.enet-status-dot {
  width: 6px; height: 6px; background: #16a34a; border-radius: 50%;
}
.enet-active-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.enet-active-plan { font-size: 12px; color: #71717a; margin-top: 2px; }
.enet-active-divider { height: 1px; background: #f1f1f4; margin: 10px 0; }
.enet-data-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #71717a;
  margin-bottom: 6px;
}
.enet-data-row b { color: #0a0a0a; font-weight: 700; font-size: 13px; }
.enet-progress {
  width: 100%; height: 4px; border-radius: 2px;
  background: #f1f1f4; overflow: hidden;
  margin-bottom: 8px;
}
.enet-progress span {
  display: block; width: 100%; height: 100%;
  background: #16a34a; border-radius: 2px;
}
.enet-expires {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #71717a;
}

/* Buttons */
.enet-buttons {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.enet-btn {
  display: block;
  text-align: center;
  border: none;
  padding: 11px 8px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  font-family: inherit;
}
.enet-btn--fill { background: #0a7cff; color: #fff; }
.enet-btn--out { background: #fff; color: #0a7cff; border: 1.5px solid #0a7cff; }

/* Section header */
.enet-section {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.enet-section h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.enet-see { font-size: 12px; font-weight: 500; color: #0a7cff; }

/* Country grid */
.enet-countries {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.enet-country { display: flex; flex-direction: column; gap: 4px; }
.enet-country b { font-size: 11px; font-weight: 600; text-align: center; }

/* Country flags — real SVGs from flagcdn.com */
.ef {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* Bottom tab bar */
.enet-tabbar {
  margin-left: -18px; margin-right: -18px;
  margin-top: auto;
  padding: 10px 16px 22px;
  border-top: 1px solid #f1f1f4;
  background: #fff;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #71717a;
  font-size: 10px; font-weight: 500;
}
.tab.active { color: #0a7cff; }
.tab b { font-weight: 500; font-size: 10px; }

@media (max-width: 880px) {
  .product { grid-template-columns: 1fr; gap: 56px; padding: 70px 20px; }
  .product-art { order: -1; }
}

/* ━━━ SECTION HEAD ━━━ */
.section-head {
  max-width: var(--maxw);
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}

/* ━━━ SERVICES ━━━ */
.services {
  background: var(--bg-soft);
  padding: 100px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition:
    border-color var(--duration-base) var(--ease-exit),
    transform var(--duration-base) var(--ease-exit),
    box-shadow var(--duration-base) var(--ease-exit);
}
.service:hover {
  border-color: #d4d4d8;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .08);
  transition:
    border-color var(--duration-base) var(--ease-enter),
    transform var(--duration-base) var(--ease-enter),
    box-shadow var(--duration-base) var(--ease-enter);
}
.service-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 56px;
  letter-spacing: .02em;
}
.service h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}
.service p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 880px) {
  .services { padding: 70px 20px; }
  .service-grid { grid-template-columns: 1fr; }
}

/* ━━━ ABOUT ━━━ */
.about {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 110px 32px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.about-left h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.about-right p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 20px;
}
.about-right p:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .about { padding: 70px 20px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ━━━ AUDIENCE ━━━ */
.audience {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.aud-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.aud-item {
  padding: 40px 24px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -.01em;
  border-right: 1px solid var(--line);
  text-align: center;
}
.aud-item:last-child { border-right: none; }
@media (max-width: 720px) {
  .aud-row { grid-template-columns: repeat(2, 1fr); }
  .aud-item:nth-child(2) { border-right: none; }
  .aud-item:nth-child(1), .aud-item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ━━━ CONTACT ━━━ */
.contact {
  max-width: 720px;
  margin: 0 auto;
  padding: 130px 32px;
  text-align: center;
}
.contact h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.contact p {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 32px;
}

/* ━━━ FOOTER ━━━ */
.footer {
  border-top: 1px solid var(--line);
  padding: 28px 32px;
}
.footer-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.footer-meta {
  display: flex; gap: 24px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .footer-row { flex-direction: column; gap: 16px; }
  .footer-meta { flex-wrap: wrap; justify-content: center; gap: 14px; }
}

/* ━━━ LANGUAGE SWITCH ━━━ */
.menu .lang-switch {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition:
    background var(--duration-fast) var(--ease-exit),
    border-color var(--duration-fast) var(--ease-exit);
}
.menu .lang-switch:hover {
  background: var(--bg-soft);
  border-color: var(--ink);
  transition:
    background var(--duration-fast) var(--ease-enter),
    border-color var(--duration-fast) var(--ease-enter);
}

/* ━━━ ARABIC / RTL ━━━ */
html[dir="rtl"] body {
  font-family: 'Cairo', 'Cairo Fallback', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] .hero-title,
html[dir="rtl"] .product-copy h2,
html[dir="rtl"] .section-head h2,
html[dir="rtl"] .about-left h2,
html[dir="rtl"] .contact h2 {
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}
html[dir="rtl"] .hero-title .thin { font-weight: 300; }
html[dir="rtl"] .service h3 { font-weight: 700; }

/* Flip vertical-divider borders */
html[dir="rtl"] .strip-item {
  border-right: none;
  border-left: 1px solid var(--line);
}
html[dir="rtl"] .strip-item:last-child { border-left: none; }
html[dir="rtl"] .aud-item {
  border-right: none;
  border-left: 1px solid var(--line);
}
html[dir="rtl"] .aud-item:last-child { border-left: none; }
@media (max-width: 720px) {
  html[dir="rtl"] .strip-item:nth-child(2) { border-left: none; }
  html[dir="rtl"] .aud-item:nth-child(2) { border-left: none; }
}

/* Phone stays LTR (it's a product UI) — already handled by inline dir="ltr" */
html[dir="rtl"] .phone-screen { font-family: 'Cairo', 'Cairo Fallback', sans-serif; }
html[dir="rtl"] .enet-active-name,
html[dir="rtl"] .enet-greet strong,
html[dir="rtl"] .enet-section h4 {
  font-weight: 700;
}
html[dir="rtl"] .check-list li::before {
  margin-right: 0;
  margin-left: 14px;
}

/* ━━━ SCROLL REVEAL ━━━ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-exit),
    transform var(--duration-slow) var(--ease-enter);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ━━━ PERFORMANCE — containment & content-visibility ━━━
   `contain: layout style` lets the browser skip layout/style work on these blocks
   when their internals change. Paint is intentionally excluded (Mistake #9 — we
   may add overflowing decorative pseudos later and don't want them clipped).
   `content-visibility: auto` skips rendering work for sections off-screen.
   `contain-intrinsic-size` reserves space so off-screen content doesn't cause
   CLS or scroll-jump when revealed. */
.service,
.persona,
.strip-item,
.aud-item,
.enet-active {
  contain: layout style;
}

.services,
.about,
.audience,
.contact,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}