/*
 * hawaliik® landing page — implemented from the Figma frame "hawaliik® Landing Page" (1920px).
 * Every dimension below is the Figma value in px at 1920. `--u` is the 1920 -> viewport scale (capped at 1px)
 * so the desktop layout scales proportionally; clamp() floors keep text readable on tablets/phones.
 * Tokens: Figma variables wild-sand #f5f5f5, mine-shaft #333, purple-heart #5b3ee8, wild-strawberry #ec1e8b, dove-gray #737373.
 */
@font-face { font-family: 'Chillax'; src: url('../fonts/Chillax-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --vw: 100vw;
    --u: min(calc(var(--vw) / 1920), 1px);
    --gx: clamp(20px, calc(150 * var(--u)), 150px);
    --wild-sand: #f5f5f5;
    --mine-shaft: #333333;
    --purple-heart: #5b3ee8;
    --purple-15: rgba(91, 62, 232, .15);
    --purple-20: rgba(91, 62, 232, .2);
    --purple-30: rgba(91, 62, 232, .3);
    --strawberry: #ec1e8b;
    --strawberry-8: rgba(236, 30, 139, .08);
    --strawberry-30: rgba(236, 30, 139, .3);
    --dove-gray: #737373;
    --night: #06070c;
    --ink-night: #090910;
    --grad-text: linear-gradient(-8deg, rgba(130, 45, 205, .4) 11%, rgba(179, 65, 159, .4) 68%, rgba(255, 233, 194, .4) 124%);
    --grad-text-dark: linear-gradient(-8deg, rgba(130, 45, 205, .85) 11%, rgba(179, 65, 159, .85) 68%, rgba(255, 233, 194, .85) 124%);
    --grad-card: linear-gradient(-47.8deg, rgba(130, 45, 205, .2) 11%, rgba(179, 65, 159, .2) 68%, rgba(255, 233, 194, .2) 124%);
    --grad-btn: linear-gradient(-1.6deg, rgb(115, 34, 255) 14%, rgb(155, 96, 255) 73.5%, rgb(255, 226, 175) 130%);
    --fs64: clamp(30px, calc(64 * var(--u)), 64px);
    --fs36: clamp(20px, calc(36 * var(--u)), 36px);
    --fs32: clamp(17px, calc(32 * var(--u)), 32px);
    --fs24: clamp(15px, calc(24 * var(--u)), 24px);
    --fs20: clamp(14px, calc(20 * var(--u)), 20px);
    --font-head: 'Chillax', 'Tajawal', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    --font-body: 'Poppins', 'Tajawal', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    --font-lexend: 'Lexend', 'Poppins', 'Tajawal', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    --ub: clamp(.3px, calc(var(--vw) / 1920), 1px);
    --grid: url('../images/landing/hawaliik/figma/grid-lines.png');
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.hw { margin: 0; background: var(--wild-sand); color: var(--mine-shaft); font-family: var(--font-body); font-size: var(--fs20); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
:where(.hw) :is(img, svg) { display: block; max-width: 100%; }
:where(.hw) :is(h1, h2, h3, p, ul) { margin: 0; padding: 0; }
:where(.hw) a { color: inherit; text-decoration: none; }
.hw :focus-visible { outline: 3px solid #8b5cf6; outline-offset: 3px; border-radius: 8px; }
.hw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hw-skip { position: absolute; inset-inline-start: 12px; top: -64px; z-index: 100; background: #fff; color: var(--mine-shaft); padding: 10px 16px; border-radius: 8px; }
.hw-skip:focus { top: 12px; }
.hw-wrap { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--gx); position: relative; }
[dir="rtl"] .hw-flip { transform: scaleX(-1); }

.hw-h2 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs64); line-height: 1.40625; color: var(--mine-shaft); }
.hw-grad { background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
:root[lang^="ar"] .hw-grad { padding-block: .1em; }

/* grid texture overlays (Figma "image 6/7/8/9", screen blend) */
.hw-tex { position: absolute; inset: 0; z-index: 0; pointer-events: none;  background: var(--grid) 0 0 / calc(959 * var(--ub)) calc(526 * var(--ub)) repeat; opacity: .04; }
.hw-blob { position: absolute; mix-blend-mode: hard-light; pointer-events: none; }
.hw-blob img, .hw-ext { position: absolute; max-width: none; left: calc(var(--iw) * -1%); top: calc(var(--ih) * -1%); width: calc(100% + var(--iw) * 2%); height: calc(100% + var(--ih) * 2%); }

/* ---------- download badge ("app" component) ---------- */
.hw-app { width: clamp(236px, calc(311 * var(--u)), 311px); }
.hw-app__label { display: block; font-weight: 500; font-family: var(--font-body); font-size: clamp(13px, calc(18 * var(--u)), 18px); line-height: 1; margin-bottom: clamp(8px, calc(12 * var(--u)), 12px); }
.hw-app__row { position: relative; aspect-ratio: 311 / 51.2; overflow: hidden; }
.hw-app__row img { width: 100%; height: auto; max-width: none; transform: translateY(-37.57%); }
.hw-app--bare .hw-app__row { aspect-ratio: 314 / 52; }
.hw-app--bare .hw-app__row img { transform: none; }
.hw-app a { position: absolute; top: 0; bottom: 0; }
.hw-app a.s1 { inset-inline-start: 0; width: 59%; }
.hw-app a.s2 { inset-inline-end: 0; width: 41%; }

/* ---------- hero ---------- */
.hw-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--wild-sand); min-height: calc(1052 * var(--u)); }
.hw-hero__bg { position: absolute; inset: 0; z-index: 0; }
.hw-hero__bg .img { position: absolute; inset: calc(-28 * var(--u)) 0 auto 0; height: calc(1080 * var(--u)); min-height: 100%; background: url('../images/landing/hawaliik/figma/hero-bg.png') right bottom / 100% 100% no-repeat; }
.hw-hero__bg .fade { position: absolute; inset: 0; background: linear-gradient(to left, rgba(5, 5, 11, 0) 50%, #06070c 69.92%); }
[dir="rtl"] .hw-hero__bg { transform: scaleX(-1); }
.hw-hero__bg .hw-blob.b33 { left: calc(1361 * var(--ub)); top: calc(310 * var(--ub)); width: calc(624 * var(--ub)); height: calc(617 * var(--ub)); }
.hw-hero__bg .hw-blob.b31 { left: calc(-290 * var(--ub)); top: calc(351 * var(--ub)); width: calc(942 * var(--ub)); height: calc(840 * var(--ub)); }
.hw-hero__bg .hw-blob.b32 { left: calc(69 * var(--ub)); top: calc(251 * var(--ub)); width: calc(790 * var(--ub)); height: calc(703 * var(--ub)); }
.hw-nav { position: relative; z-index: 3; display: flex; align-items: flex-start; height: clamp(72px, calc(108 * var(--u)), 108px); }
.hw-nav__logo, .hw-nav__tag { margin-top: clamp(20px, calc(49 * var(--u)), 49px); }
.hw-nav__actions { margin-top: clamp(16px, calc(42 * var(--u)), 42px); }
.hw-nav__logo { display: block; }
.hw-nav__logo img { width: clamp(84px, calc(106 * var(--u)), 106px); height: auto; }
.hw-nav__logo--custom img { width: auto; max-height: 36px; }
.hw-nav__tag { line-height: 1.5; margin-inline-start: clamp(14px, calc(31 * var(--u)), 31px); font-size: var(--fs20); opacity: .7; white-space: nowrap; }
.hw-nav__actions { margin-inline-start: auto; display: flex; align-items: center; gap: clamp(14px, calc(40 * var(--u)), 40px); }
.hw-nav__icon { width: clamp(24px, calc(30 * var(--u)), 30px); height: clamp(24px, calc(30 * var(--u)), 30px); display: block; }
.hw-nav__icon img { width: 100%; height: 100%; }
.hw-lang { position: relative; }
.hw-lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: var(--fs20); line-height: 1.5; padding-block: 0; user-select: none; }
.hw-lang summary::-webkit-details-marker { display: none; }
.hw-lang summary .chev { width: clamp(22px, calc(30 * var(--u)), 30px); transition: transform .2s; }
.hw-lang[open] summary .chev { transform: rotate(180deg); }
.hw-lang ul { position: absolute; inset-inline-end: 0; top: 100%; margin-top: 8px; list-style: none; min-width: 168px; padding: 6px; background: #14102b; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); z-index: 20; }
.hw-lang li a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 16px; }
.hw-lang li a:hover, .hw-lang li a[aria-current="true"] { background: rgba(139, 92, 246, .28); }
.hw-hero__body { position: relative; z-index: 2; padding-top: clamp(40px, calc(155 * var(--u)), 155px); padding-bottom: clamp(48px, calc(169 * var(--u)), 169px); }
.hw-hero h1 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs64); line-height: 1.40625; color: var(--wild-sand); max-width: max(calc(900 * var(--u)), min(100%, 560px)); }
.hw-hero .hw-grad, .hw-closer .hw-grad { background-image: var(--grad-text-dark); }
.hw-hero__text { margin-top: clamp(14px, calc(20 * var(--u)), 20px); font-size: var(--fs32); line-height: 1.5; opacity: .7; max-width: max(calc(937 * var(--u)), min(100%, 600px)); }
.hw-hero__text p + p { margin-top: 1.5em; }
.hw-hero .hw-app { margin-top: clamp(30px, calc(50 * var(--u)), 50px); }

/* ---------- section 2: why download ---------- */
.hw-why { padding-block: clamp(48px, calc(150 * var(--u)), 150px) clamp(48px, calc(150 * var(--u)), 150px); }
.hw-why .hw-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .25em; }
.hw-why .hw-h2 img { height: clamp(26px, calc(50 * var(--u)), 50px); width: auto; }
.hw-rail { display: flex; gap: clamp(12px, calc(20 * var(--u)), 20px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gx) * -1); padding-inline: var(--gx); scroll-padding-inline: var(--gx); -webkit-overflow-scrolling: touch; padding-block: 0 28px; margin-block-end: -28px; }
.hw-rail::-webkit-scrollbar { display: none; }
.hw-why .hw-rail { margin-top: clamp(24px, calc(50 * var(--u)), 50px); }
.hw-why-card { flex: 0 0 min(calc(663 * var(--ub)), 88%); width: clamp(280px, calc(663 * var(--u)), 663px); flex-basis: auto; scroll-snap-align: start; display: flex; align-items: center; gap: clamp(14px, calc(20 * var(--u)), 20px); padding: clamp(20px, calc(40 * var(--u)), 40px); min-height: clamp(130px, calc(202 * var(--u)), 202px); background: var(--purple-15); border-radius: 24px; }
.hw-why-card > img { width: clamp(52px, calc(103 * var(--u)), 103px); height: auto; flex: none; }
.hw-why-card h3 { overflow-wrap: anywhere; font-family: var(--font-body); font-weight: 600; font-size: var(--fs36); line-height: 1.5; color: var(--purple-heart); }
.hw-why-card p { margin-top: 8px; font-size: var(--fs20); line-height: 1.5; opacity: .7; color: #333; }
.hw-arrows { display: flex; justify-content: center; gap: clamp(16px, calc(130 * var(--u)), 130px); margin-top: clamp(24px, calc(50 * var(--u)), 50px); }
.hw-arrows button { background: none; border: 0; padding: 0; cursor: pointer; width: clamp(40px, calc(64 * var(--u)), 64px); height: clamp(40px, calc(64 * var(--u)), 64px); }
.hw-arrows button img { width: 100%; height: 100%; }
.hw-arrows button.prev img { transform: scaleX(-1); }
[dir="rtl"] .hw-arrows button.prev img { transform: none; }
[dir="rtl"] .hw-arrows button.next img { transform: scaleX(-1); }
.hw-arrows button:disabled { opacity: .5; cursor: default; }
.hw-arrows--light button img { filter: brightness(0) invert(.96); }

/* ---------- section 3: manage everything ---------- */
.hw-manage { position: relative; isolation: isolate; overflow-x: clip; background: var(--wild-sand); }
.hw-blobs { position: absolute; z-index: -1; pointer-events: none; }
.hw-blobs img { position: absolute; max-width: none; }
.hw-manage .hw-blobs { left: calc(-643.4 * var(--ub)); top: calc(-250 * var(--ub)); width: calc(3233.3 * var(--ub)); height: calc(1491.2 * var(--ub)); }
.hw-consult .hw-blobs { left: calc(-976 * var(--ub)); top: calc(65 * var(--ub)); width: calc(3221.5 * var(--ub)); height: calc(1317 * var(--ub)); }
.hw-blobs img { left: 0; top: 0; width: 100%; height: 100%; }
.hw-consult .hw-blobs img { transform: scaleX(-1); }
.hw-manage__text { position: relative; z-index: 2; padding-block: clamp(36px, calc(305 * var(--u)), 305px) 0; }
.hw-manage .hw-h2 { max-width: max(calc(700 * var(--u)), min(100%, 600px)); }
.hw-manage__sub { margin-top: clamp(14px, calc(20 * var(--u)), 20px); font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; color: #000; max-width: max(calc(603 * var(--u)), min(100%, 460px)); }
.hw-manage .hw-app { margin-top: clamp(26px, calc(76 * var(--u)), 76px); }
.hw-manage__phone { position: relative; z-index: 1; width: min(100%, 560px); margin: clamp(20px, 4vw, 40px) auto 0; }
.hw-manage__phone img { width: 100%; height: auto; }
.hw-manage__foot { height: clamp(24px, calc(120 * var(--u)), 120px); }
.hw-qr { display: none; }
.hw-qr span { display: block; width: max-content; margin-inline: auto; background: #1a1a1a; color: #fff; font-size: clamp(9px, calc(10 * var(--u) * 1.15), 12px); line-height: 1; padding: 9px 12px; border-radius: 6px; position: relative; }
.hw-qr span::after { content: ""; position: absolute; top: 100%; inset-inline-start: 50%; margin-inline-start: -6px; border: 6px solid transparent; border-top-color: #1a1a1a; }
.hw-qr img, .hw-qr__code { width: 100%; height: auto; margin-top: clamp(12px, calc(37 * var(--u)), 37px); }
.hw-qr__code { aspect-ratio: 1; color: #000; }
.hw-qr__code svg { width: 100%; height: 100%; display: block; }

/* ---------- section 4: pocket ---------- */
.hw-pocket { position: relative; overflow-x: clip; text-align: center; padding-top: clamp(32px, calc(150 * var(--u)), 150px); }
.hw-pocket .hw-h2 { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .3em; }
.hw-pocket__text { margin: clamp(14px, calc(20 * var(--u)), 20px) auto 0; font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; max-width: max(calc(1621 * var(--u)), min(100%, 860px)); }
.hw-pocket__text p + p { margin-top: 0; }
.hw-pocket__text p.gap { margin-top: 1.5em; }
.hw-stage { position: relative; margin-top: clamp(24px, calc(100 * var(--u)), 100px); height: clamp(560px, calc(1481 * var(--u)), 1481px); }
.hw-stage__bg { position: absolute; inset: 0; }
.hw-stage__bg .phone { position: absolute; inset: 0; background: url('../images/landing/hawaliik/figma/pocket-bg.png') center bottom / 100% 100% no-repeat; }
.hw-stage__bg .phone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245, 245, 245, 0), var(--wild-sand)); }
.hw-stage__bg .glow { position: absolute; left: 50%; top: calc(258 * var(--ub)); width: calc(1386 * var(--ub)); height: calc(844 * var(--ub)); transform: translateX(-50%); }
.hw-stage .hw-tex { opacity: .2; inset: calc(204 * var(--ub)) 0 auto 0; height: calc(951 * var(--ub)); background-size: calc(959 * var(--ub)) calc(475.5 * var(--ub)); }
.hw-screens { position: absolute; z-index: 2; inset-inline: 0; top: clamp(150px, calc(306 * var(--u)), 306px); }
.hw-screens .hw-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, calc(20 * var(--u)), 20px); }
.hw-screen { position: relative; margin: 0; aspect-ratio: 390 / 844; border-radius: 16px; overflow: hidden; }
.hw-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hw-screen::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(245, 245, 245, 0.000) 50.00%, rgba(230, 227, 244, 0.100) 55.00%, rgba(214, 208, 242, 0.200) 60.00%, rgba(199, 190, 241, 0.300) 65.00%, rgba(183, 172, 240, 0.400) 70.00%, rgba(168, 154, 239, 0.500) 75.00%, rgba(153, 135, 237, 0.600) 80.00%, rgba(137, 117, 236, 0.700) 85.00%, rgba(122, 99, 235, 0.800) 90.00%, rgba(106, 80, 233, 0.900) 95.00%, rgba(91, 62, 232, 1.000) 100.00%); /* stops expanded: Figma interpolates colour and alpha separately */ }
.hw-screen figcaption { position: absolute; z-index: 2; inset-inline: clamp(8px, calc(30 * var(--u)), 30px); bottom: clamp(10px, calc(30 * var(--u)), 30px); font-family: var(--font-body); font-weight: 600; font-size: var(--fs36); line-height: 1.5; color: var(--wild-sand); text-align: start; }
.hw-pocket__cta { position: absolute; z-index: 3; inset-inline: 0; top: clamp(420px, calc(1250 * var(--u)), 1250px); text-align: center; }
.hw-pocket__cta .hw-h2 { text-align: center; }
.hw-link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: clamp(10px, calc(20 * var(--u)), 20px) clamp(20px, calc(40 * var(--u)), 40px); border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: var(--fs32); text-decoration: none; color: var(--mine-shaft); margin-top: clamp(10px, calc(30 * var(--u)), 30px); }
.hw-link span { text-decoration: underline; text-decoration-thickness: 6%; text-underline-offset: .15em; }
.hw-link img { width: clamp(30px, calc(48 * var(--u)), 48px); height: auto; transform: rotate(45deg); margin: clamp(0px, calc(10 * var(--u)), 10px); }
[dir="rtl"] .hw-link img { transform: rotate(-45deg) scaleX(-1); }
.hw-link:hover span { text-decoration-thickness: 2px; }
.hw-link--purple { color: var(--purple-heart); }

/* ---------- section 5: steps ---------- */
.hw-steps { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, calc(150 * var(--u)), 150px); padding-block: 0 clamp(40px, calc(98 * var(--u)), 98px); min-height: calc(990 * var(--u)); }
.hw-steps::before { content: ""; position: absolute; inset: 0 calc(-460 * var(--ub)); z-index: -2; background: linear-gradient(0.03deg, rgba(64, 36, 129, 0.900) 5.42%, rgba(68, 40, 129, 0.850) 12.16%, rgba(72, 45, 129, 0.800) 18.89%, rgba(76, 49, 129, 0.750) 25.63%, rgba(80, 54, 130, 0.700) 32.36%, rgba(84, 58, 130, 0.650) 39.10%, rgba(88, 62, 130, 0.600) 45.83%, rgba(92, 67, 130, 0.550) 52.56%, rgba(96, 71, 130, 0.500) 59.30%, rgba(115, 93, 144, 0.475) 64.38%, rgba(133, 115, 159, 0.450) 69.46%, rgba(152, 136, 173, 0.425) 74.53%, rgba(171, 158, 188, 0.400) 79.61%, rgba(189, 180, 202, 0.375) 84.69%, rgba(208, 202, 216, 0.350) 89.77%, rgba(226, 223, 231, 0.325) 94.85%, rgba(245, 245, 245, 0.300) 99.92%); }
.hw-steps__bg { position: absolute; inset: 0; }
.hw-steps__bg > * { z-index: -1; }
.hw-steps__bg, .hw-steps::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(200 * var(--ub))); mask-image: linear-gradient(180deg, transparent 0, #000 calc(200 * var(--ub))); }
.hw-steps .hw-blob.b33 { left: calc(1562 * var(--ub)); top: calc(363 * var(--ub)); width: calc(740 * var(--ub)); height: calc(733 * var(--ub)); }
.hw-steps .hw-blob.b31 { left: calc(-597 * var(--ub)); top: calc(204 * var(--ub)); width: calc(1179 * var(--ub)); height: calc(1051 * var(--ub)); }
.hw-steps .hw-blob.b32 { left: calc(187 * var(--ub)); top: calc(78 * var(--ub)); width: calc(790 * var(--ub)); height: calc(780 * var(--ub)); }
.hw-steps .hw-tex { opacity: .1; background-size: calc(959 * var(--ub)) calc(545 * var(--ub)); background-position: 0 calc(-97 * var(--ub)); }
.hw-steps .hw-h2 { text-align: center; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .3em; }
.hw-steps .hw-rail { margin-top: clamp(30px, calc(100 * var(--u)), 100px); padding-block: 0 40px; margin-block-end: -40px; }
.hw-step { position: relative; flex: 0 0 auto; width: clamp(250px, calc(390 * var(--u)), 390px); height: clamp(360px, calc(520 * var(--u)), 520px); border-radius: 16px; scroll-snap-align: start; color: var(--wild-sand); box-shadow: 0 20px 50px 4px rgba(48, 36, 61, .2); background: var(--grad-card); }
.hw-step::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .5); mix-blend-mode: soft-light; z-index: 0; pointer-events: none; }
.hw-step > * { z-index: 1; }
.hw-step .n { position: absolute; inset-inline: clamp(16px, calc(30 * var(--u)), 30px); top: clamp(14px, calc(30 * var(--u)), 30px); font-family: var(--font-body); font-weight: 600; font-size: var(--fs36); line-height: 1.5; }
.hw-step .ico { position: absolute; top: clamp(70px, calc(117 * var(--u)), 117px); inset-inline-start: 50%; height: clamp(90px, calc(205 * var(--u)), 205px); aspect-ratio: var(--ar); transform: translateX(-50%); }
[dir="rtl"] .hw-step .ico { transform: translateX(50%); }
.hw-step .ico img { --iw: var(--iwv); --ih: 36.59; position: absolute; max-width: none; left: calc(var(--iw) * -1%); top: -36.59%; width: calc(100% + var(--iw) * 2%); height: calc(100% + 73.18%); }
.hw-step .txt { position: absolute; inset-inline: clamp(16px, calc(30 * var(--u)), 30px) clamp(12px, calc(24 * var(--u)), 24px); bottom: clamp(16px, calc(30 * var(--u)), 30px); }
.hw-step h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs36); line-height: 1.5; }
.hw-step p { margin-top: 8px; font-size: var(--fs24); line-height: 1.5; opacity: .7; }
.hw-steps .hw-arrows { margin-top: clamp(20px, calc(50 * var(--u)), 50px); }
.hw-steps .hw-app { margin-top: clamp(24px, calc(50 * var(--u)), 50px); }
@media (min-width: 1100px) { .hw-steps .hw-app { margin-top: calc(-14 * var(--u)); } }
.hw-steps .hw-app .hw-app__label { color: var(--wild-sand); }

/* ---------- section 6: consultation ---------- */
.hw-consult { padding-top: clamp(48px, calc(150 * var(--u)), 150px); position: relative; isolation: isolate; overflow-x: clip; }
.hw-consult__grid { display: grid; grid-template-columns: minmax(0, 548fr) minmax(0, 1fr); column-gap: clamp(20px, calc(136 * var(--u)), 136px); align-items: start; }
.hw-consult__art { position: relative; align-self: start; margin-top: clamp(0px, calc(49 * var(--u)), 49px); aspect-ratio: 548 / 463; }
.hw-consult__art img { position: absolute; max-width: none; left: -36.5%; top: -38.88%; width: 173%; height: 186.4%; }
.hw-consult__art::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; margin-top: calc(26 * var(--u)); height: calc(69 * var(--u)); border-radius: 50%; background: rgba(60, 40, 90, .18); filter: blur(22px); }
.hw-consult .hw-h2 .hw-grad { display: block; }
.hw-consult__text p + p { margin-top: 1.5em; }
.hw-consult__text { margin-top: clamp(24px, calc(50 * var(--u)), 50px); font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; max-width: max(calc(969 * var(--u)), min(100%, 560px)); }
.hw-consult__text strong { font-weight: 600; }
.hw-consult .hw-link { margin-top: clamp(14px, calc(30 * var(--u)), 30px); padding-inline-start: 0; }

/* ---------- section 7: already in the business ---------- */
.hw-biz { padding-top: clamp(48px, calc(150 * var(--u)), 150px); text-align: center; }
.hw-biz .hw-h2 { text-align: center; }
.hw-biz .hw-h2 .hw-grad { display: block; }
.hw-biz__sub { margin-top: clamp(14px, calc(20 * var(--u)), 20px); font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; }
.hw-chips { display: flex; gap: clamp(12px, calc(40 * var(--u)), 40px); margin-top: clamp(24px, calc(100 * var(--u)), 100px); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gx) * -1); padding-inline: var(--gx); list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gx); }
.hw-chips::-webkit-scrollbar { display: none; }
.hw-chip { flex: none; scroll-snap-align: start; font-family: var(--font-body); font-weight: 600; font-size: var(--fs36); line-height: 1.5; white-space: nowrap; padding: clamp(6px, calc(16 * var(--u)), 16px) clamp(18px, calc(36 * var(--u)), 36px); border-radius: 999px; border: 4px solid var(--purple-20); background: var(--purple-15); color: var(--purple-heart); }
.hw-chip.is-pink { border-color: var(--strawberry-30); background: var(--strawberry-8); color: var(--strawberry); }
.hw-biz__small { margin-top: clamp(24px, calc(100 * var(--u)), 100px); font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; }
.hw-biz__big { margin-top: clamp(14px, calc(20 * var(--u)), 20px); font-family: var(--font-head); font-weight: 600; font-size: var(--fs64); line-height: 1.40625; color: var(--mine-shaft); }

/* ---------- testimonials (dynamic; only rendered when approved reviews exist) ---------- */
.hw-testi { padding-top: clamp(48px, calc(150 * var(--u)), 150px); }
.hw-testi .hw-rail { margin-top: clamp(24px, calc(50 * var(--u)), 50px); }
.hw-testi-card { flex: 0 0 auto; width: clamp(260px, calc(520 * var(--u)), 520px); scroll-snap-align: start; margin: 0; padding: clamp(20px, calc(40 * var(--u)), 40px); background: var(--purple-15); border-radius: 24px; display: flex; flex-direction: column; gap: 12px; }
.hw-testi-card .stars { color: var(--strawberry); letter-spacing: 2px; font-size: var(--fs24); }
.hw-testi-card blockquote { margin: 0; font-size: var(--fs24); line-height: 1.5; opacity: .85; white-space: pre-wrap; overflow-wrap: anywhere; }
.hw-testi-card figcaption { margin-top: auto; font-size: var(--fs20); color: var(--purple-heart); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- section 8: FAQ ---------- */
.hw-faq { padding-top: clamp(48px, calc(150 * var(--u)), 150px); }
.hw-faq__list { margin-top: clamp(24px, calc(100 * var(--u)), 100px); display: grid; gap: clamp(16px, calc(50 * var(--u)), 50px); }
.hw-faq details { border-bottom: 2px solid var(--dove-gray); padding-bottom: clamp(12px, calc(20 * var(--u)), 20px); }
.hw-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-body); font-weight: 600; font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; }
.hw-faq summary::-webkit-details-marker { display: none; }
.hw-faq summary img { width: clamp(28px, calc(48 * var(--u)), 48px); height: auto; flex: none; transition: transform .2s; }
.hw-faq details[open] summary img { transform: scaleY(-1); }
.hw-faq details p { margin-top: 10px; font-size: var(--fs32); line-height: 1.5; opacity: .7; color: #000; }
.hw-cta-wide { margin-top: clamp(30px, calc(100 * var(--u)), 100px); display: flex; align-items: center; justify-content: center; gap: 4px; min-height: clamp(70px, calc(124 * var(--u)), 124px); padding: clamp(10px, calc(28 * var(--u)), 28px) clamp(20px, calc(52 * var(--u)), 52px); border-radius: 999px; background: var(--grad-btn); color: var(--wild-sand); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: var(--fs32); transition: filter .2s, transform .2s; }
.hw-cta-wide span { text-decoration: underline; text-decoration-thickness: 6%; text-underline-offset: .15em; }
.hw-cta-wide img { width: clamp(30px, calc(48 * var(--u)), 48px); height: auto; transform: rotate(45deg); margin: clamp(0px, calc(10 * var(--u)), 10px); }
[dir="rtl"] .hw-cta-wide img { transform: rotate(-45deg) scaleX(-1); }
.hw-cta-wide:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- section 9: closer + footer ---------- */
.hw-closer { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, calc(150 * var(--u)), 150px); color: var(--wild-sand); background: radial-gradient(ellipse calc(790 * var(--ub)) calc(710 * var(--ub)) at 74.5% calc(498 * var(--ub)), #2b1c66 0, #160f3a 45%, #100c25 72.5%, var(--ink-night) 100%), var(--ink-night); }
.hw-closer .hw-tex { opacity: .06; background-size: calc(987.7 * var(--ub)) calc(482 * var(--ub)); background-position: calc(-28.7 * var(--ub)) 0; }
.hw-closer__grid { display: grid; grid-template-columns: minmax(0, 914fr) minmax(0, 706fr); align-items: start; padding-top: clamp(40px, calc(93 * var(--u)), 93px); min-height: calc(750 * var(--u)); }
.hw-closer__col { display: flex; flex-direction: column; gap: clamp(24px, calc(50 * var(--u)), 50px); align-items: flex-start; padding-top: clamp(0px, calc(52 * var(--u)), 52px); }
.hw-closer h2 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs64); line-height: 1.125; }
.hw-closer h2 .hw-grad { display: block; max-width: max(calc(372 * var(--u)), min(100%, 360px)); }
.hw-closer__lead { margin-top: clamp(12px, calc(20 * var(--u)), 20px); font-size: var(--fs24); line-height: 1.2; opacity: .7; max-width: max(calc(501 * var(--u)), min(100%, 440px)); }
.hw-closer__one { font-family: var(--font-lexend); font-weight: 500; font-size: var(--fs24); line-height: 1.283; max-width: max(calc(477 * var(--u)), min(100%, 400px)); }
.hw-closer__links { display: flex; flex-direction: column; gap: clamp(20px, calc(40 * var(--u)), 40px); }
.hw-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: clamp(48px, calc(60 * var(--u)), 60px); padding: clamp(10px, calc(16 * var(--u)), 16px) clamp(22px, calc(36 * var(--u)), 36px); border-radius: 999px; background: var(--grad-btn); box-shadow: 0 14px 34px -14px rgba(123, 63, 242, .8), inset 0 1px 0 rgba(255, 255, 255, .25); color: var(--wild-sand); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: var(--fs24); width: max-content; max-width: 100%; transition: filter .2s, transform .2s; }
.hw-pill span { text-decoration: underline; text-decoration-thickness: 6%; text-underline-offset: .15em; }
.hw-pill img { width: clamp(20px, calc(26.2 * var(--u)), 26.2px); height: auto; margin: clamp(0px, calc(5.4 * var(--u)), 5.4px); transform: rotate(45deg); }
[dir="rtl"] .hw-pill img { transform: rotate(-45deg) scaleX(-1); }
.hw-pill:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hw-visual { position: relative; width: 100%; max-width: 706px; aspect-ratio: 706 / 750; justify-self: end; }
.hw-visual > * { position: absolute; }
.hw-visual .orb { left: 6.8%; top: 9.4%; width: 86.4%; aspect-ratio: 1; border-radius: 50%; filter: blur(5.9px); background: radial-gradient(circle at 40% 35%, rgba(229, 139, 214, .45) 0, rgba(139, 92, 246, .35) 35%, rgba(139, 92, 246, 0) 70%); transform: scale(1.03); }
.hw-visual .ring1 { left: 3.3%; top: 6.1%; width: 93.4%; aspect-ratio: 1; border-radius: 50%; border: 1.17px solid rgba(183, 156, 255, .18); }
.hw-visual .ring2 { left: 15%; top: 17%; width: 70.1%; aspect-ratio: 1; border-radius: 50%; border: 1.17px dashed rgba(183, 156, 255, .22); }
.hw-visual .arc { left: -3.2%; top: 6.3%; width: 106.3%; height: auto; aspect-ratio: 750.56 / 398.74; }
.hw-visual .dot { width: 2.15%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5.86px rgba(255, 255, 255, .18), 0 0 21px #e7a3e0; left: calc(58.5% - 1.07%); top: calc(18.5% + 0px); }
.hw-visual .dot + .dot { display: none; }
.hw-place { display: flex; flex-direction: column; gap: 2.3px; padding: 12.9px 17.6px; border-radius: 16.4px; background: rgba(255, 255, 255, .07); border: 1.17px solid rgba(255, 255, 255, .14); backdrop-filter: blur(5.9px); -webkit-backdrop-filter: blur(5.9px); }
.hw-place small { font-size: 12.9px; line-height: 1.5; letter-spacing: 1.03px; text-transform: uppercase; color: #e7a3e0; }
.hw-place strong { font-family: var(--font-lexend); font-weight: 600; font-size: 18.76px; line-height: 1.2; color: #fff; }
.hw-place--from { left: 0; bottom: 18.6%; }
.hw-place--to { right: -.16%; top: 51.6%; }
.hw-place--to small { color: #c9b5ff; }
.hw-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 30px; row-gap: clamp(24px, calc(50 * var(--u)), 50px); padding-block: clamp(50px, calc(243 * var(--u)), 243px) clamp(40px, calc(150 * var(--u)), 150px); }
.hw-foot__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 30px; }
.hw-foot__brand { display: flex; align-items: center; gap: clamp(14px, calc(31 * var(--u)), 31px); flex-wrap: wrap; }
.hw-foot__brand img { width: clamp(84px, calc(106 * var(--u)), 106px); height: auto; }
.hw-foot__brand span { font-size: var(--fs20); opacity: .7; }
.hw-social { list-style: none; margin: 0; display: grid; gap: clamp(12px, calc(20 * var(--u)), 20px); }
.hw-social a { display: inline-flex; align-items: center; gap: clamp(12px, calc(20 * var(--u)), 20px); text-decoration: none; font-size: var(--fs24); line-height: 1.2; }
.hw-social img { width: clamp(24px, calc(30 * var(--u)), 30px); height: auto; }
.hw-social a:hover { opacity: .8; }
.hw-news { display: flex; width: min(100%, max(calc(683 * var(--u)), 460px)); }
.hw-news input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs24); line-height: 1.2; color: var(--purple-heart); background: var(--purple-20); border: 2px solid var(--purple-30); border-inline-end: 0; border-start-start-radius: 999px; border-end-start-radius: 999px; padding: clamp(14px, calc(20 * var(--u)), 20px) clamp(24px, calc(100 * var(--u)), 100px); text-align: center; }
.hw-news input::placeholder { color: var(--purple-heart); opacity: 1; }
.hw-news input:focus-visible { outline-offset: -3px; }
.hw-news button { flex: none; font: inherit; font-size: var(--fs24); line-height: 1.2; color: var(--mine-shaft); background: var(--wild-sand); border: 0; cursor: pointer; border-start-end-radius: 999px; border-end-end-radius: 999px; padding: clamp(14px, calc(20 * var(--u)), 20px) clamp(18px, calc(32 * var(--u)), 32px); white-space: nowrap; }
.hw-news button:hover { background: #fff; }
.hw-news button:disabled { opacity: .6; cursor: wait; }
.hw-news__msg { flex-basis: 100%; margin-top: 10px; font-size: 14px; min-height: 1.3em; }
.hw-news__msg.err { color: #ffb4cd; }

/* ---------- desktop: pixel placement of the hero art in sections 3 ---------- */
@media (min-width: 1280px) { .hw-why-card h3 { white-space: nowrap; overflow-wrap: normal; } }
@media (min-width: 1100px) {
    .hw-manage { min-height: calc(1080 * var(--u)); }
    .hw-manage__phone { position: absolute; width: calc(1180 * var(--u)); inset-inline-end: calc(400 * var(--u)); top: calc(20 * var(--u)); margin: 0; }
    .hw-manage__foot { display: none; }
    .hw-qr { display: block; position: absolute; z-index: 3; inset-inline-end: calc(144 * var(--u)); top: calc(593 * var(--u)); width: calc(129 * var(--u)); }
    .hw-consult__grid { grid-template-columns: calc(548 * var(--u)) minmax(0, 1fr); }
    .hw-consult__text { width: calc(969 * var(--u)); max-width: none; }
    .hw-closer__col { min-width: 0; }
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 1099px) {
    .hw-consult__grid { grid-template-columns: 1fr; row-gap: 40px; }
    .hw-consult__art { width: min(70%, 360px); margin-inline: auto; aspect-ratio: 548 / 463; }
}
@media (max-width: 899px) {
    .hw-nav__tag { display: none; }
    .hw-closer__grid { grid-template-columns: 1fr; row-gap: 40px; min-height: 0; }
    .hw-visual { justify-self: center; max-width: 520px; }
    .hw-hero__bg .img { background-position: 72% bottom; background-size: cover; }
    .hw-hero__bg .fade { background: linear-gradient(180deg, rgba(5, 5, 11, .78) 0%, rgba(5, 5, 11, .55) 60%, rgba(5, 5, 11, .35) 100%); }
    .hw-hero { min-height: 640px; }
    .hw-stage { height: auto; margin-top: 24px; padding-bottom: 40px; }
    .hw-stage__bg { display: none; }
    .hw-screens { position: relative; top: auto; }
    .hw-screens .hw-wrap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; padding-block: 12px 20px; }
    .hw-screens .hw-wrap::-webkit-scrollbar { display: none; }
    .hw-screen { flex: 0 0 min(260px, 70%); scroll-snap-align: center; box-shadow: 0 16px 40px rgba(91, 62, 232, .22); }
    .hw-pocket__cta { position: relative; top: auto; margin-top: 20px; }
    .hw-steps { min-height: 0; padding-block: 56px 48px; }
    .hw-steps::before { inset-inline: 0; }
    .hw-faq summary { align-items: flex-start; }
    .hw-foot { grid-template-columns: 1fr; }
    .hw-news { width: 100%; }
}
@media (max-width: 520px) {
    .hw-news { flex-wrap: wrap; }
    .hw-news input { flex-basis: 100%; border-radius: 999px; border-inline-end: 2px solid var(--purple-30); padding-inline: 20px; }
    .hw-news button { flex-basis: 100%; border-radius: 999px; margin-top: 10px; }
    .hw-why-card { width: 86vw; }
    .hw-chip { border-width: 3px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hw *, .hw *::before { transition: none !important; } }

/* language flags: real SVG flags (Egypt with the eagle, USA, China) from flag-icons (MIT) */
.hw-flag { width: 28px; height: 21px; border-radius: 3px; flex: none; display: inline-block; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.hw-flag--ar { background-image: url('../images/landing/flags/eg.svg'); }
.hw-flag--en { background-image: url('../images/landing/flags/us.svg'); }
.hw-flag--zh { background-image: url('../images/landing/flags/cn.svg'); }

/* >= 900px: widths follow the Figma frame exactly (the max(..., min(100%, N)) floors above are for phones) */
@media (min-width: 900px) {
    .hw-hero h1 { max-width: calc(900 * var(--u)); }
    .hw-hero__text { max-width: calc(937 * var(--u)); }
    .hw-manage .hw-h2 { max-width: calc(700 * var(--u)); }
    .hw-manage__sub { max-width: calc(603 * var(--u)); }
    .hw-pocket__text { max-width: calc(1621 * var(--u)); }
    .hw-consult__text { max-width: calc(969 * var(--u)); }
    .hw-closer__lead { max-width: calc(501 * var(--u)); }
    .hw-closer__one { max-width: calc(477 * var(--u)); }
    .hw-closer h2 .hw-grad { max-width: calc(372 * var(--u)); }
}

/* Arabic: the hand/phone sits on the left so it never overlaps the right-aligned text */
@media (min-width: 1100px) {
    [dir="rtl"] .hw-manage__phone { inset-inline: auto; right: auto; left: calc(-250 * var(--u)); }
    [dir="rtl"] .hw-manage .hw-blobs { transform: scaleX(-1); }
}
.hw-credit { margin: 0; font-size: var(--fs20); line-height: 1.5; opacity: .8; }
.hw-credit a { text-decoration: underline; text-underline-offset: .2em; font-weight: 600; }
.hw-credit a:hover { opacity: .85; }

/* Arabic: the route reads right-to-left, From China (right) -> To Egypt (left) */
[dir="rtl"] .hw-visual { transform: scaleX(-1); }
[dir="rtl"] .hw-visual .hw-place { transform: scaleX(-1); }

/* Legal links in the footer (privacy policy / terms of use) */
.hw-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: clamp(14px, calc(18 * var(--u)), 18px); }
.hw-legal a { color: inherit; opacity: .75; text-decoration: none; border-bottom: 1px solid transparent; transition: opacity .2s, border-color .2s; }
.hw-legal a:hover, .hw-legal a:focus-visible { opacity: 1; border-bottom-color: currentColor; }