:root {
  --navy: #061a36;
  --navy-deep: #03152d;
  --navy-panel: #08264d;
  --blue: #168eff;
  --cyan: #00d1ff;
  --light: #eef4fa;
  --white: #fff;
  --ink: #09224a;
  --muted: #9eb0c9;
  --light-muted: #52657a;
  --light-blue: #0069bd;
  --line: rgb(88 170 255 / 24%);
  --light-line: #c7d8e8;
  --header-height: 78px;
  --content-width: 1400px;
  --page-gutter: clamp(22px, 4vw, 72px);
  --radius: 8px;
  --font-heading: "Sora", "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy-deep); scroll-behavior: auto; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--navy-deep); color: var(--white); font-family: var(--font-body); }
button, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.responsive-picture { display: contents; }
img[data-image-key] { object-position: var(--image-position, center center); }
button { color: inherit; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3, .eyebrow, .section-label, .chapter-number, .story-kicker { font-family: var(--font-heading); }
em { color: var(--blue); font-style: normal; }
::selection { background: var(--blue); color: var(--white); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; inset-block-start: 8px; inset-inline-start: 12px; padding: 12px 16px; background: var(--white); color: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.section-shell { width: min(var(--content-width), calc(100% - var(--page-gutter))); margin-inline: auto; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; min-height: var(--header-height); border-block-end: 1px solid rgb(111 183 255 / 18%); background: rgb(3 18 39 / 88%); backdrop-filter: blur(14px); }
.nav-shell { width: min(1420px, calc(100% - 48px)); min-height: var(--header-height); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.brand { width: 185px; display: flex; flex: 0 0 auto; align-items: center; }
.brand-logo { display: block; width: auto; height: auto; max-width: 176px; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; gap: clamp(18px, 2.2vw, 32px); margin-inline-start: auto; }
.desktop-nav a, .language-link { color: #dce7f6; font-size: 12.5px; font-weight: 500; transition: color .2s ease; }
.desktop-nav a:hover, .language-link:hover { color: #7fcaff; }
.language-link { white-space: nowrap; }
.header-cta { display: inline-flex; gap: 8px; align-items: center; padding: 12px 16px; border-radius: 7px; background: var(--blue); font-size: 12.5px; font-weight: 700; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; }
.menu-toggle i { display: block; width: 20px; height: 1px; margin: 5px auto; background: var(--white); transition: transform .2s ease; }
.mobile-nav { display: none; }

.hero { position: relative; min-height: 100svh; padding-block-start: var(--header-height); overflow: hidden; background: radial-gradient(circle at 70% 35%, rgb(0 145 255 / 17%), transparent 30%), linear-gradient(110deg, #03152f 0%, #061a36 48%, #072348 100%); }
.hero-grid { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgb(52 139 226 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(52 139 226 / 9%) 1px, transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(90deg, transparent, #000 55%); }
.hero-shell { position: relative; width: min(var(--content-width), calc(100% - var(--page-gutter))); min-height: calc(100svh - var(--header-height)); margin-inline: auto; display: grid; grid-template-columns: .9fr 1.2fr; gap: 46px; align-items: center; padding-block: 46px 58px; }
.eyebrow { margin-block-end: 22px; color: #4fb9ff; font-size: 10.5px; font-weight: 600; letter-spacing: .27em; }
.eyebrow span { margin-inline: .35em; }
.hero h1 { margin-block-end: 23px; font-size: clamp(48px, 4.6vw, 68px); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; }
.hero-intro { max-width: 610px; margin-block-end: 28px; color: #bed0e8; font-size: 15.5px; line-height: 1.72; }
.button-row, .contact-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 14px 21px; border: 1px solid rgb(100 174 255 / 52%); border-radius: 7px; font-size: 12.5px; font-weight: 700; transition: border-color .2s, background .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { border-color: transparent; background: var(--blue); box-shadow: 0 10px 32px rgb(0 132 255 / 22%); }
.button-secondary { background: rgb(4 22 48 / 38%); }
.trust-list { display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 30px 0 0; list-style: none; color: #d0ddee; font-size: 11px; }
.trust-list li { display: flex; align-items: center; gap: 8px; }
.trust-mark { width: 22px; height: 22px; border: 1px solid var(--blue); border-radius: 50%; position: relative; }
.trust-mark::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--cyan); border-radius: 50%; }
.hero-visual { position: relative; min-height: 540px; height: min(690px, 70vh); }
.hero-scenes { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgb(60 160 255 / 12%); background: #082144; }
.hero-scenes::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgb(6 26 54 / 10%) 38%, rgb(4 18 40 / 28%) 100%); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); filter: saturate(.85) contrast(1.06); transition: opacity .65s ease, transform 5s ease; }
.hero-image.is-active { opacity: 1; transform: scale(1); }
.network-overlay { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.network-overlay path { fill: none; stroke: var(--cyan); stroke-width: 1.3; filter: drop-shadow(0 0 5px var(--blue)); }
.network-overlay circle { fill: var(--navy-panel); stroke: #83e4ff; stroke-width: 2; filter: drop-shadow(0 0 5px var(--cyan)); }
.hero-tabs { position: absolute; z-index: 4; inset-inline-end: 18px; inset-block-end: 22px; width: min(660px, 90%); display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgb(71 162 250 / 32%); background: rgb(2 15 34 / 90%); backdrop-filter: blur(10px); }
.hero-tab { position: relative; min-width: 0; min-height: 142px; padding: 10px; border: 0; border-inline-end: 1px solid rgb(80 169 255 / 18%); background: transparent; text-align: start; cursor: pointer; }
.hero-tab:last-child { border-inline-end: 0; }
.hero-tab.is-active { background: rgb(8 83 148 / 35%); box-shadow: inset 0 0 0 2px var(--blue); }
.hero-tab img { width: 100%; height: 54px; margin-block-end: 8px; object-fit: cover; }
.hero-tab strong { display: block; font-size: 11.5px; line-height: 1.35; }
.hero-tab small { display: block; margin-block-start: 4px; color: #b7c7da; font-size: 10.5px; line-height: 1.4; }
.tab-number { position: absolute; inset-block-start: 15px; inset-inline-end: 14px; padding: 2px 4px; background: rgb(3 21 45 / 75%); color: #d4e9ff; font-size: 8px; }

.light-section { background: var(--light); color: var(--ink); }
.overview, .who, .why, .process, .contact { scroll-margin-top: var(--header-height); }
.overview .section-shell, .who .section-shell { padding-block: 90px; }
.section-heading { display: grid; grid-template-columns: .65fr 1.25fr .9fr; gap: 42px; align-items: start; margin-block-end: 48px; }
.section-label { margin: 0; padding-block-start: 7px; color: var(--light-blue); font-size: 10px; font-weight: 700; letter-spacing: .23em; }
.section-heading h2 { margin: 0; font-size: clamp(32px, 3.3vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; }
.section-heading > p:last-child { margin: 4px 0 0; color: var(--light-muted); font-size: 13px; line-height: 1.7; }
.service-list { display: grid; grid-template-columns: 1fr 1fr; border-block-start: 1px solid var(--light-line); }
.service-list article { display: grid; grid-template-columns: 48px 1fr; gap: 18px; min-height: 138px; padding: 26px 32px 28px 0; border-block-end: 1px solid var(--light-line); }
.service-list article:nth-child(odd) { border-inline-end: 1px solid var(--light-line); }
.service-list article:nth-child(even) { padding-inline-start: 34px; }
.service-list article > span { padding-block-start: 5px; color: var(--light-blue); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.service-list h3 { margin-block-end: 8px; font-size: 17px; font-weight: 500; }
.service-list p { margin: 0; color: var(--light-muted); font-size: 12.5px; line-height: 1.65; }

.who { border-block: 1px solid rgb(85 169 255 / 18%); background: #071c3a; }
.who .section-label, .why .section-label, .contact .section-label { color: #51bdff; }
.who .section-heading h2 { color: var(--white); }
.who .section-heading > p:last-child { color: var(--muted); }
.audience-list { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.audience-list article { min-height: 212px; padding: 30px 30px 32px 0; }
.audience-list article + article { padding-inline-start: 30px; border-inline-start: 1px solid var(--line); }
.audience-label { margin-block-end: 18px; color: #58c4ff; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; }
.audience-list h3 { margin-block-end: 12px; font-size: 20px; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; }
.audience-list article > p:last-child { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.story-entry { display: inline-flex; gap: 10px; align-items: center; margin-block-start: 28px; color: #bfe6ff; font-size: 11px; font-weight: 700; }

.story { position: relative; height: 460vh; min-height: 2600px; background: var(--navy-deep); scroll-margin-top: var(--header-height); }
.story-stage { position: sticky; inset-block-start: var(--header-height); height: calc(100svh - var(--header-height)); overflow: hidden; background: #04152c; }
.story-stage::before, .story-stage::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.story-stage::before { background: linear-gradient(90deg, rgb(2 17 38 / 96%) 0%, rgb(2 17 38 / 78%) 23%, rgb(2 17 38 / 10%) 54%, rgb(2 17 38 / 36%) 100%); }
.story-stage::after { opacity: .75; background-image: linear-gradient(rgb(59 150 240 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(59 150 240 / 7%) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent); }
.scene-stack { position: absolute; inset: 0; }
.scene-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.045); filter: saturate(.85) contrast(1.04); transition: opacity .48s ease, transform 1s ease; }
.scene-stack img.is-active { opacity: 1; transform: scale(1); }
.story-heading, .story-current { position: absolute; z-index: 10; inset-inline-start: max(30px, calc((100vw - 1400px) / 2)); width: min(360px, 34vw); }
.story-heading { inset-block-start: 8%; }
.chapter-number { margin-block-end: 12px; color: #55bfff; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; }
.story-kicker { margin-block-end: 12px; color: #8bcfff; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; }
.story-heading h2 { margin: 0; font-size: clamp(34px, 3.2vw, 50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.story-current { inset-block-end: 12%; }
.story-current > p:first-child { margin-block-end: 9px; color: #58c4ff; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; }
.story-current h3 { margin-block-end: 9px; font-size: 20px; font-weight: 500; line-height: 1.28; }
.story-current > p:last-child { margin: 0; color: #c0d0e4; font-size: 12.5px; line-height: 1.68; }
.story-progress { position: absolute; z-index: 10; inset-inline-end: max(32px, calc((100vw - 1400px) / 2)); inset-block-end: 34px; display: flex; gap: 9px; align-items: center; }
.story-progress i { width: 34px; height: 2px; background: rgb(158 196 232 / 32%); }
.story[data-active-step="0"] .story-progress i:nth-child(-n+1), .story[data-active-step="1"] .story-progress i:nth-child(-n+2), .story[data-active-step="2"] .story-progress i:nth-child(-n+3), .story[data-active-step="3"] .story-progress i:nth-child(-n+4), .story[data-active-step="4"] .story-progress i { background: #20b6ff; box-shadow: 0 0 12px #00a6ff; }
.story-progress b { margin-inline-start: 7px; color: #a9c0d9; font-size: 10px; }
.chapter-controls { position: absolute; z-index: 12; inset-inline-end: max(32px, calc((100vw - 1400px) / 2)); inset-block-end: 70px; display: flex; gap: 8px; }
.chapter-controls button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgb(92 177 255 / 48%); border-radius: 6px; background: rgb(3 19 42 / 78%); color: #dcebfa; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.chapter-controls button:hover { border-color: var(--cyan); background: rgb(8 81 145 / 62%); }
.story-effects { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.story-steps { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: normal; border: 0; }
.mobile-scenes, .mobile-chapter-controls { display: none; }

.door-effect { position: absolute; inset-inline-start: 57%; inset-block-start: 23%; width: 120px; height: 245px; border: 2px solid rgb(64 191 255 / 82%); background: linear-gradient(120deg, rgb(0 150 255 / 12%), rgb(255 255 255 / 3%)); opacity: 0; transform-origin: left center; }
.story[data-chapter="smart"][data-active-step="0"] .door-effect { opacity: 1; transform: perspective(800px) rotateY(calc(-78deg * var(--step-progress))); }
.light-effect { position: absolute; inset-inline-start: 57%; inset-block-start: 35%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(0 194 255 / 28%), transparent 66%); opacity: 0; filter: blur(8px); }
.story[data-chapter="smart"][data-active-step="1"] .light-effect { opacity: var(--step-progress); }
.curtain-effect { position: absolute; inset-block-start: 13%; width: 18%; height: 74%; background: linear-gradient(90deg, rgb(170 220 255 / 24%), rgb(255 255 255 / 6%)); opacity: 0; backdrop-filter: blur(2px); }
.curtain-effect.left { inset-inline-start: 49%; }.curtain-effect.right { inset-inline-end: 10%; }
.story[data-chapter="smart"][data-active-step="2"] .curtain-effect { opacity: .82; }
.story[data-chapter="smart"][data-active-step="2"] .curtain-effect.left { transform: translateX(calc(-80px * var(--step-progress))); }
.story[data-chapter="smart"][data-active-step="2"] .curtain-effect.right { transform: translateX(calc(80px * var(--step-progress))); }
.control-effect, .support-effect { position: absolute; inset-inline-end: 18%; inset-block-start: 27%; padding: 18px; border: 1px solid #2db7ff; background: rgb(5 28 59 / 80%); box-shadow: 0 0 35px rgb(0 165 255 / 25%); color: #a8ddff; font-size: 9px; font-style: normal; letter-spacing: .14em; opacity: 0; transform: translateY(14px); }
.story[data-chapter="smart"][data-active-step="3"] .control-effect { opacity: var(--step-progress); transform: translateY(calc(14px * (1 - var(--step-progress)))); }
.dead-zone { position: absolute; inset-inline-start: 63%; inset-block-start: 36%; width: 270px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(255 50 61 / 30%), transparent 70%); opacity: 0; }
.story[data-chapter="wifi"][data-active-step="0"] .dead-zone { opacity: calc(.9 - var(--step-progress) * .5); }
.access-point { position: absolute; width: 18px; height: 18px; border: 5px solid var(--blue); border-radius: 50%; background: var(--white); box-shadow: 0 0 25px var(--blue); opacity: 0; }
.access-point.a { inset-inline-start: 59%; inset-block-start: 43%; }.access-point.b { inset-inline-start: 77%; inset-block-start: 55%; }.access-point.c { inset-inline-start: 70%; inset-block-start: 25%; }
.story[data-chapter="wifi"][data-active-step="1"] .access-point.a, .story[data-chapter="wifi"][data-active-step="2"] .access-point, .story[data-chapter="wifi"][data-active-step="3"] .access-point, .story[data-chapter="wifi"][data-active-step="4"] .access-point { opacity: 1; }
.signal-ring { position: absolute; inset-inline-start: 56%; inset-block-start: 30%; border: 1px solid rgb(0 199 255 / 80%); border-radius: 50%; box-shadow: 0 0 15px rgb(0 179 255 / 22%); opacity: 0; transform: scale(.65); }
.signal-ring.one { width: 120px; height: 120px; }.signal-ring.two { width: 240px; height: 240px; inset-inline-start: 52%; inset-block-start: 24%; }.signal-ring.three { width: 380px; height: 380px; inset-inline-start: 47%; inset-block-start: 16%; }
.story[data-chapter="wifi"]:not([data-active-step="0"]) .signal-ring { opacity: .75; transform: scale(1); transition: .35s ease; }
.cabling-effects svg, .it-effects svg { width: 100%; height: 100%; opacity: 0; }
.cabling-effects path, .it-effects path { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px var(--blue)); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--story-progress)); }
.story[data-chapter="cabling"] .cabling-effects svg { opacity: calc(var(--story-progress) * 1.4); }
.issue-effect { position: absolute; inset-inline-start: 69%; inset-block-start: 40%; width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid #ff4b59; border-radius: 50%; background: rgb(82 5 15 / 42%); box-shadow: 0 0 35px rgb(255 51 68 / 35%); color: #ff737d; font-size: 30px; font-style: normal; font-weight: 800; opacity: 0; }
.story[data-chapter="it"][data-active-step="1"] .issue-effect { opacity: 1; }
.story[data-chapter="it"][data-active-step="2"] .it-effects svg { opacity: 1; }
.story[data-chapter="it"][data-active-step="2"] .it-effects path { stroke-dashoffset: calc(1 - var(--step-progress)); }
.story[data-chapter="it"][data-active-step="3"] .support-effect { opacity: var(--step-progress); transform: translateY(calc(14px * (1 - var(--step-progress)))); }

.why { border-block-start: 1px solid rgb(65 162 255 / 18%); background: var(--navy); }
.why-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; padding-block: 96px; }
.why h2 { margin: 18px 0 0; font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.principle-list { display: grid; grid-template-columns: 1fr 1fr; border-block-start: 1px solid var(--line); }
.principle-list article { min-height: 145px; padding: 28px 24px; border-block-end: 1px solid var(--line); }
.principle-list article:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.principle-list h3 { margin-block-end: 8px; font-size: 15px; font-weight: 600; }
.principle-list p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.68; }
.process { padding-block: 92px; }
.process h2 { max-width: 820px; margin: 14px 0 52px; font-size: clamp(34px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; }
.process-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0; list-style: none; }
.process-list::before { content: ""; position: absolute; inset-inline: 4%; inset-block-start: 18px; height: 2px; background: #b6cce4; }
.process-list li { position: relative; padding-inline-end: 30px; }
.process-list li > span { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; margin-block-end: 26px; border: 2px solid var(--light-blue); border-radius: 50%; background: var(--light); color: var(--light-blue); font-size: 10px; font-weight: 800; }
.process-list h3 { margin-block-end: 9px; font-size: 15px; font-weight: 600; }
.process-list p { margin: 0; color: var(--light-muted); font-size: 12.5px; line-height: 1.68; }
.contact { position: relative; overflow: hidden; padding-block: 94px; background: linear-gradient(120deg, var(--navy), #0a3476); }
.contact::before { content: ""; position: absolute; width: 70vw; height: 70vw; inset-inline-end: -27vw; inset-block-end: -55vw; border: 2px solid rgb(0 190 255 / 24%); border-radius: 50%; box-shadow: 0 0 120px rgb(0 137 255 / 13%); }
.contact-grid { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 60px; }
.contact h2 { margin: 15px 0 18px; font-size: clamp(40px, 4.2vw, 58px); font-weight: 500; letter-spacing: -.038em; line-height: 1.07; }
.contact p:not(.section-label) { max-width: 700px; margin: 0; color: #b8cae2; line-height: 1.7; }
.contact-actions { max-width: 360px; align-items: center; }
.contact-email { width: 100%; color: #bfe6ff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.site-footer { border-block-start: 1px solid rgb(100 170 255 / 18%); background: #031228; color: #8fa7c2; font-size: 11px; }
.site-footer .section-shell { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px; }

[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] a { font-family: var(--font-arabic); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .eyebrow, [dir="rtl"] .section-label, [dir="rtl"] .chapter-number, [dir="rtl"] .story-kicker { font-family: var(--font-arabic); }
[dir="rtl"] .brand-logo { object-position: right center; }
[dir="rtl"] .hero h1, [dir="rtl"] .section-heading h2, [dir="rtl"] .why h2, [dir="rtl"] .contact h2 { letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .section-label, [dir="rtl"] .chapter-number, [dir="rtl"] .story-kicker { letter-spacing: .08em; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .language-link { margin-inline-start: auto; }
  .menu-toggle { display: block; }
  .mobile-nav { position: absolute; inset: var(--header-height) 0 auto; display: grid; max-height: 0; overflow: hidden; background: rgb(3 18 39 / 98%); visibility: hidden; transition: max-height .25s ease, visibility .25s; }
  .mobile-nav[data-open="true"] { max-height: 420px; visibility: visible; border-block-end: 1px solid var(--line); }
  .mobile-nav a { padding: 15px max(24px, calc((100vw - 1000px) / 2)); border-block-end: 1px solid rgb(88 170 255 / 12%); font-size: 14px; }
  .mobile-nav .mobile-language { color: #7fcaff; font-weight: 700; }
  .mobile-nav .mobile-whatsapp { color: var(--white); background: rgb(22 142 255 / 18%); font-weight: 700; }
  .hero-shell { grid-template-columns: 1fr; padding-block-start: 72px; }
  .hero-copy { max-width: 780px; }
  .hero-visual { height: 600px; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .why-grid { grid-template-columns: 1fr; gap: 52px; }
}

@media (max-width: 900px) {
  .service-list, .audience-list { grid-template-columns: 1fr; }
  .service-list article:nth-child(odd) { border-inline-end: 0; }
  .service-list article:nth-child(even) { padding-inline-start: 0; }
  .audience-list article { min-height: auto; padding: 26px 0; }
  .audience-list article + article { padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .process-list { grid-template-columns: 1fr 1fr; gap: 38px 20px; }
  .process-list::before { display: none; }
  .contact-grid { display: grid; }
}

@media (max-width: 760px) {
  :root { --header-height: 68px; --page-gutter: 30px; }
  .nav-shell { width: calc(100% - 28px); gap: 10px; }
  .brand { width: min(145px, 42vw); }
  .brand-logo { width: auto; height: auto; max-width: min(145px, 42vw); object-fit: contain; }
  .header-cta { padding: 10px; font-size: 10.5px; }
  .language-link { font-size: 12px; }
  .hero { min-height: auto; }
  .hero-grid { mask-image: linear-gradient(#000, transparent 75%); }
  .hero-shell { min-height: auto; gap: 30px; padding-block: 48px 32px; }
  .eyebrow { max-width: 300px; font-size: 9px; line-height: 1.7; }
  .hero h1 { font-size: clamp(38px, 11vw, 44px); }
  .hero-intro { font-size: 14px; }
  .button { min-height: 48px; }
  .trust-list { display: grid; gap: 10px; }
  .hero-visual { height: 520px; min-height: 0; }
  .hero-tabs { inset-inline: 10px; inset-block-end: 10px; width: auto; grid-template-columns: 1fr 1fr; }
  .hero-tab { min-height: 124px; }
  .hero-tab img { height: 36px; }
  .hero-tab strong { font-size: 11px; }
  .hero-tab small { display: block; font-size: 10.5px; line-height: 1.35; }
  img[data-image-key] { object-position: var(--image-position-mobile, var(--image-position, center center)); }
  .overview .section-shell, .who .section-shell { padding-block: 68px; }
  .section-heading { margin-block-end: 34px; }
  .section-heading h2 { font-size: 30px; }
  .service-list article { grid-template-columns: 34px 1fr; min-height: 0; padding: 22px 0; }
  .story { height: auto; min-height: 0; padding: 66px 15px; border-block-start: 1px solid var(--line); }
  .story-stage { position: relative; inset: auto; height: auto; overflow: visible; background: transparent; }
  .story-stage::before, .story-stage::after, .scene-stack, .story-current, .story-progress, .story-effects, .story-stage > .chapter-controls { display: none; }
  .story-heading { position: relative; inset: auto; width: auto; padding-inline: 3px; }
  .story-heading h2 { max-width: 350px; font-size: 32px; }
  .story-steps { position: static; width: auto; height: auto; display: grid; gap: 0; padding: 0; margin: 30px 3px 24px; overflow: visible; clip: auto; white-space: normal; border-block-start: 1px solid var(--line); list-style: none; }
  .story-steps li { display: grid; grid-template-columns: minmax(120px, .8fr) 1.2fr; gap: 18px; padding-block: 18px; border-block-end: 1px solid var(--line); }
  .story-steps strong { font-family: var(--font-heading); font-size: 13px; font-weight: 500; }
  .story-steps span { color: var(--muted); font-size: 12px; line-height: 1.55; }
  .mobile-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-scenes img { width: 100%; height: 135px; object-fit: cover; }
  .mobile-scenes img:first-child { grid-column: 1 / -1; height: 190px; }
  .mobile-chapter-controls { position: static; display: flex; justify-content: space-between; margin-block-start: 20px; }
  .chapter-controls button { min-height: 44px; font-size: 9px; }
  .why-grid { padding-block: 70px; }
  .why h2 { font-size: 34px; }
  .principle-list { grid-template-columns: 1fr; }
  .principle-list article:nth-child(odd) { border-inline-end: 0; }
  .process { padding-block: 72px; }
  .process h2 { margin-block-end: 40px; font-size: 32px; }
  .process-list { grid-template-columns: 1fr; gap: 34px; }
  .process-list li { padding-inline-end: 0; }
  .process-list li > span { margin-block-end: 16px; }
  .contact { padding-block: 78px; }
  .contact h2 { font-size: 42px; }
  .contact-grid { gap: 32px; }
  .contact-actions { align-items: stretch; }
  .contact-actions .button { width: 100%; }
  .site-footer .section-shell { display: grid; line-height: 1.7; }
}

@media (max-width: 430px) {
  .language-link, .header-cta { display: none; }
  .menu-toggle { margin-inline-start: auto; }
  .story-steps li { grid-template-columns: 1fr; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .story { height: auto; min-height: 0; padding: 80px 0; border-block-start: 1px solid var(--line); }
  .story-stage { position: relative; inset: auto; width: min(var(--content-width), calc(100% - var(--page-gutter))); height: min(720px, 80vh); margin-inline: auto; }
  .story-steps { position: static; width: min(var(--content-width), calc(100% - var(--page-gutter))); height: auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; margin: 20px auto 0; overflow: visible; clip: auto; white-space: normal; border-block: 1px solid var(--line); list-style: none; }
  .story-steps li { padding: 16px; border-inline-end: 1px solid var(--line); }
  .story-steps strong, .story-steps span { display: block; }
  .story-steps strong { margin-block-end: 7px; font-size: 12px; }
  .story-steps span { color: var(--muted); font-size: 11px; line-height: 1.5; }
  .story-effects, .story-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .story { padding: 66px 15px; }
  .story-stage { width: auto; height: auto; }
  .story-steps { grid-template-columns: 1fr; width: auto; margin-inline: 3px; }
  .story-steps li { border-inline-end: 0; }
}