:root {
  --violet: #6c5ce7; --violet-dark: #5646d6; --lilac: #efecff; --soft: #f7f5ff;
  --paper: #fcfbf8; --ink: #17181d; --muted: #6f7280; --line: rgba(23,24,29,.14);
  --white: #fff; --section-x: 96px; --shadow: 0 28px 70px rgba(24,18,64,.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:#d9d7df; color:var(--ink); font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
[lang="ar"] { font-family:"Noto Sans Arabic","Geeza Pro",sans-serif; }
.case-study { display:grid; gap:24px; width:min(1400px,100%); margin:0 auto; padding:24px 0; }
.export-mode .case-study { gap:0; padding:0; }
.board { position:relative; width:100%; min-height:900px; padding:64px var(--section-x); overflow:hidden; isolation:isolate; }
.paper { background:var(--paper); } .soft { background:var(--soft); } .lavender { background:var(--lilac); }
.violet { background:var(--violet); color:var(--white); } .ink { background:var(--ink); color:var(--white); }
h1,h2,h3,p,figure,blockquote { margin:0; } h1,h2,h3 { letter-spacing:-.055em; }
h1 { font-size:clamp(72px,8vw,124px); line-height:.9; font-weight:700; }
h2 { font-size:clamp(58px,6.2vw,94px); line-height:.98; font-weight:650; }
h2 em,h1 em { color:var(--violet); font-style:normal; } .violet h1 em,.violet h2 em,.ink h2 em { color:#c9c1ff; }
.overline { color:var(--violet); font-size:14px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:22px; }
.overline.light { color:#d8d2ff; } .light-copy { color:rgba(255,255,255,.76); }
.chapter-label { position:relative; display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; z-index:3; }
.chapter-label.inverse { color:rgba(255,255,255,.62); border-color:rgba(255,255,255,.2); }
.phone { position:relative; margin:0; border:10px solid #121317; border-radius:42px; background:#fff; overflow:hidden; box-shadow:var(--shadow); }
.phone::before { content:""; position:absolute; z-index:2; top:10px; left:50%; width:28%; height:24px; transform:translateX(-50%); border-radius:20px; background:#121317; opacity:.96; }
.phone img { display:block; width:100%; height:auto; }

/* 01 Cover */
.cover { min-height:1120px; padding-top:44px; background-image:radial-gradient(circle at 82% 17%,rgba(255,255,255,.16),transparent 24%); }
.cover::after { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(255,255,255,.18); border-radius:50%; right:-240px; top:210px; box-shadow:0 0 0 120px rgba(255,255,255,.04),0 0 0 240px rgba(255,255,255,.025); z-index:-1; }
.cover-nav,.cover-footer { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.cover-nav { padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.25); }
.cover-copy { max-width:830px; margin-top:72px; position:relative; z-index:2; }
.cover-copy .lede { max-width:560px; margin-top:30px; font-size:20px; line-height:1.6; }
.cover-phones { position:absolute; right:68px; bottom:-425px; width:640px; height:1050px; }
.cover-phones .phone { position:absolute; width:295px; } .phone-front { left:170px; top:0; z-index:3; }
.phone-back { top:150px; width:260px!important; opacity:.94; } .phone-left { left:-20px; transform:rotate(-8deg); } .phone-right { right:-20px; transform:rotate(8deg); }
.cover-footer { position:absolute; left:var(--section-x); bottom:48px; width:440px; color:rgba(255,255,255,.72); }

/* Premium product image */
.mockup-feature { min-height:0; padding:0; background:#080a10; }
.mockup-feature>img { display:block; width:100%; height:auto; }
.mockup-caption { position:absolute; left:42px; right:42px; bottom:30px; display:flex; justify-content:space-between; color:rgba(255,255,255,.72); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

/* 02 Premise */
.premise { min-height:980px; } .editorial-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:110px; margin-top:90px; }
.reading-column { padding-top:52px; max-width:470px; } .reading-column p { font-size:18px; line-height:1.75; color:var(--muted); margin-bottom:22px; }
.reading-column .lead-paragraph,.lead-paragraph { color:var(--ink); font-size:23px; line-height:1.55; }
blockquote { margin-top:85px; padding:44px 60px; background:var(--lilac); display:flex; gap:26px; align-items:flex-start; }
blockquote span { font-size:84px; line-height:.8; color:var(--violet); } blockquote p { font-size:36px; line-height:1.35; letter-spacing:-.035em; font-weight:650; }
.fact-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:48px; }
.fact-row div { border-top:1px solid var(--line); padding-top:16px; display:grid; gap:7px; } .fact-row small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; }
.fact-row strong { font-size:14px; }

/* 03 Flow */
.core-flow { min-height:960px; } .flow-heading { margin-top:78px; }
.flow-line { margin-top:90px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.22); }
.flow-line article { position:relative; padding:34px 36px 0 0; display:flex; gap:20px; } .flow-line article::before { content:""; position:absolute; top:-6px; left:0; width:11px; height:11px; background:#c9c1ff; border-radius:50%; }
.flow-number { color:#c9c1ff; font-size:13px; font-weight:800; } .flow-line h3 { font-size:27px; margin-bottom:10px; }
.flow-line p { color:rgba(255,255,255,.58); font-size:15px; line-height:1.65; max-width:260px; }

/* 04 Intent */
.intent { min-height:1120px; } .split-feature,.screen-analysis,.arrival-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:90px; margin-top:72px; align-items:center; }
.feature-copy h2 { font-size:72px; } .feature-copy>p:not(.overline) { margin-top:28px; max-width:520px; color:var(--muted); font-size:17px; line-height:1.72; }
.feature-copy>p.lead-paragraph { color:var(--ink); font-size:22px; line-height:1.55; }
.microcopy-callout { margin-top:38px; padding:24px 26px; background:rgba(255,255,255,.72); border-left:4px solid var(--violet); display:grid; gap:8px; }
.microcopy-callout small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:800; } .microcopy-callout strong { font-size:28px; letter-spacing:-.04em; }
.microcopy-callout span { color:var(--muted); font-size:13px; } .phone-stage { position:relative; min-height:900px; display:grid; place-items:center; }
.hero-phone { width:378px; z-index:2; } .orbit { position:absolute; border:1px solid rgba(108,92,231,.22); border-radius:50%; }
.orbit.one { width:650px; height:650px; } .orbit.two { width:820px; height:820px; }

/* 05 Two sides */
.two-sides { min-height:850px; } .center-heading { margin:74px auto 0; text-align:center; max-width:900px; }
.center-heading>p:last-child { max-width:600px; margin:30px auto 0; color:var(--muted); font-size:19px; line-height:1.65; }
.role-switch { max-width:1050px; margin:82px auto 0; display:grid; grid-template-columns:1fr 120px 1fr; align-items:center; gap:32px; }
.role { padding:32px; border:1px solid var(--line); min-height:190px; } .role.active { background:var(--violet); color:#fff; border-color:var(--violet); }
.role>span { font-size:11px; font-weight:800; opacity:.6; } .role strong { display:block; font-size:32px; margin:20px 0 10px; letter-spacing:-.04em; }
.role p { font-size:14px; line-height:1.6; opacity:.7; } .switch-track { height:48px; border-radius:30px; background:var(--lilac); padding:6px; }
.switch-track i { display:block; width:36px; height:36px; border-radius:50%; background:var(--violet); }

/* 06 Search */
.search-state { min-height:1160px; } .screen-analysis { grid-template-columns:1fr 1fr; } .radar-stage { min-height:900px; }
.radar-ring { position:absolute; border:1px solid rgba(108,92,231,.18); border-radius:50%; } .radar-ring.r1 { width:470px; height:470px; }
.radar-ring.r2 { width:650px; height:650px; } .radar-ring.r3 { width:820px; height:820px; } .right-copy { z-index:2; }
.known-list { margin-top:42px; } .known-list div { display:grid; grid-template-columns:82px 1fr; gap:18px; padding:19px 0; border-top:1px solid var(--line); }
.known-list span { color:var(--violet); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; } .known-list strong { font-size:16px; }
.known-list .unknown { opacity:.42; }

/* 07 Certainty */
.certainty { min-height:920px; } .certainty-copy { margin-top:70px; }
.state-comparison { display:grid; grid-template-columns:1fr 160px 1fr; gap:30px; align-items:center; margin-top:85px; }
.state-comparison article { border:1px solid rgba(255,255,255,.24); padding:35px; min-height:325px; background:rgba(255,255,255,.06); }
.state-tag { font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#d8d2ff; } .user-question { margin-top:30px; font-size:34px; line-height:1.25; font-weight:650; letter-spacing:-.04em; }
.state-message { margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); display:grid; gap:8px; } .state-message small { color:rgba(255,255,255,.56); }
.state-message strong { font-size:20px; } .transition-arrow { display:grid; place-items:center; gap:10px; color:rgba(255,255,255,.6); }
.transition-arrow span { font-size:56px; color:#d8d2ff; } .transition-arrow small { text-transform:uppercase; font-size:9px; letter-spacing:.12em; }

/* 08 Arrival */
.arrival { min-height:1120px; } .arrival-grid { align-items:center; }
.hierarchy-list { list-style:none; padding:0; margin:40px 0 0; } .hierarchy-list li { display:grid; grid-template-columns:90px 1fr; gap:18px; border-top:1px solid var(--line); padding:18px 0; }
.hierarchy-list span { color:var(--violet); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.1em; } .hierarchy-list strong { font-size:15px; }
.arrival-phone-wrap { position:relative; min-height:900px; display:grid; place-items:center; } .eta-pill { position:absolute; z-index:3; right:5px; top:160px; display:grid; place-items:center; width:150px; height:150px; border-radius:50%; background:var(--violet); color:#fff; font-size:30px; font-weight:800; box-shadow:0 22px 60px rgba(108,92,231,.35); }

/* 09 Writing */
.writing { min-height:980px; } .writing-intro { margin-top:70px; display:grid; grid-template-columns:1.25fr .75fr; column-gap:80px; align-items:end; }
.writing-intro .overline { grid-column:1/-1; } .writing-intro p:last-child { color:rgba(255,255,255,.6); font-size:18px; line-height:1.7; padding-bottom:8px; }
.writing-principles { display:grid; grid-template-columns:repeat(4,1fr); margin-top:90px; border-top:1px solid rgba(255,255,255,.18); }
.writing-principles article { min-height:280px; padding:28px 24px 24px 0; border-right:1px solid rgba(255,255,255,.18); } .writing-principles article+article { padding-left:24px; }
.writing-principles article:last-child { border-right:0; } .writing-principles span { color:#c9c1ff; font-size:11px; font-weight:800; }
.writing-principles h3 { font-size:24px; margin:26px 0 14px; } .writing-principles p { color:rgba(255,255,255,.52); line-height:1.6; font-size:14px; min-height:72px; }
.writing-principles strong { display:block; color:#c9c1ff; font-size:14px; margin-top:24px; }

/* 10 Arabic UX writing */
.arabic-writing { min-height:1020px; color:#fff; background:linear-gradient(135deg,#5d4adb 0%,#6c5ce7 55%,#7b6aee 100%); }
.arabic-writing::after { content:"ع"; position:absolute; right:20px; bottom:-210px; color:rgba(255,255,255,.055); font-family:"Noto Sans Arabic",sans-serif; font-size:720px; font-weight:800; line-height:1; z-index:-1; }
.arabic-writing-head { display:grid; grid-template-columns:1.2fr .8fr; gap:100px; margin-top:70px; align-items:end; }
.arabic-writing-head [lang="ar"] p { color:#dcd6ff; font-size:15px; font-weight:700; margin-bottom:22px; }
.arabic-writing-head [lang="ar"] h2 { font-family:"Noto Sans Arabic",sans-serif; font-size:76px; line-height:1.28; letter-spacing:-.045em; }
.arabic-writing-head [lang="ar"] h2 em { color:#d8d2ff; font-style:normal; }
.arabic-writing-head>div:last-child { padding-bottom:12px; }
.arabic-writing-head h3 { font-size:28px; line-height:1.35; letter-spacing:-.035em; }
.arabic-writing-head>div:last-child>p:last-child { margin-top:20px; color:rgba(255,255,255,.62); font-size:15px; line-height:1.7; }
.copy-pairs { display:grid; grid-template-columns:repeat(3,1fr); margin-top:82px; border-top:1px solid rgba(255,255,255,.22); }
.copy-pairs article { min-height:280px; padding:26px 30px 20px 0; border-right:1px solid rgba(255,255,255,.2); }
.copy-pairs article+article { padding-left:30px; }
.copy-pairs article:last-child { border-right:0; }
.copy-pairs small { color:#d8d2ff; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.copy-pairs span { display:block; margin-top:25px; color:rgba(255,255,255,.6); font-size:13px; }
.copy-pairs strong { display:block; min-height:86px; margin-top:10px; font-family:"Noto Sans Arabic",sans-serif; font-size:29px; line-height:1.5; font-weight:700; }
.copy-pairs p { padding-top:18px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.58); font-size:13px; line-height:1.6; }

/* 10 Bilingual */
.bilingual { min-height:1320px; } .bilingual-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:120px; margin-top:72px; align-items:end; }
.bilingual-heading>p { color:var(--muted); font-size:18px; line-height:1.7; padding-bottom:10px; }
.pair-labels { margin-top:70px; padding:16px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.pair-labels span:last-child { text-align:right; color:var(--violet); } .screen-pairs { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:34px; align-items:start; }
.screen-pair { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .screen-pair .phone { border-width:6px; border-radius:26px; }
.screen-pair .phone::before { height:14px; top:6px; } .screen-pair:not(.featured-pair) { padding-top:90px; }

/* 11 RTL */
.rtl { min-height:1220px; } .rtl-heading { margin-top:70px; max-width:880px; }
.rtl-demo { display:grid; grid-template-columns:1.35fr .65fr; gap:70px; margin-top:75px; } .login-pair { display:grid; grid-template-columns:1fr 80px 1fr; align-items:center; gap:16px; }
.login-pair .phone { border-width:7px; border-radius:30px; } .login-pair .phone::before { height:16px; top:7px; }
.direction-axis { display:grid; gap:14px; justify-items:center; color:var(--violet); font-size:10px; font-weight:800; } .direction-axis i { width:1px; height:340px; background:rgba(108,92,231,.28); }
.rtl-notes { padding-top:50px; } .rtl-notes article { border-top:1px solid rgba(108,92,231,.2); padding:20px 0; display:grid; grid-template-columns:44px 1fr; }
.rtl-notes span { color:var(--violet); font-size:11px; font-weight:800; grid-row:1/3; } .rtl-notes strong { font-size:16px; }
.rtl-notes p { margin-top:7px; color:var(--muted); font-size:13px; line-height:1.55; }

/* 12 Visual system */
.visual-system { min-height:1040px; } .system-heading { margin-top:70px; }
.system-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:24px; margin-top:75px; } .system-grid>article { min-height:460px; border:1px solid var(--line); padding:28px; }
.palette-card { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .swatch { min-height:188px; padding:18px; display:flex; align-items:flex-end; }
.swatch small { font-size:10px; font-weight:800; letter-spacing:.08em; } .violet-swatch { background:var(--violet); color:#fff; } .lilac-swatch { background:var(--lilac); }
.ink-swatch { background:var(--ink); color:#fff; } .white-swatch { background:#fff; border:1px solid var(--line); }
.type-card small { text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-size:10px; font-weight:800; } .type-card>strong { display:block; font-size:110px; line-height:1; letter-spacing:-.09em; color:var(--violet); margin-top:25px; }
.type-card h3 { font-size:26px; margin-top:10px; } .type-card p { color:var(--muted); font-size:13px; margin-top:8px; } .type-card div { margin-top:32px; padding-top:22px; border-top:1px solid var(--line); }
.type-card div strong { float:right; color:var(--violet); font-size:52px; line-height:1; } .type-card div h3 { padding-top:12px; }
.space-card { display:flex; flex-direction:column; justify-content:flex-end; } .space-demo { flex:1; display:flex; align-items:center; justify-content:center; gap:22px; }
.space-demo i { display:block; width:48px; height:48px; background:var(--violet); border-radius:50%; } .space-demo i:nth-child(2) { margin-left:30px; width:78px; height:78px; opacity:.55; }
.space-demo i:nth-child(3) { margin-left:55px; width:28px; height:28px; opacity:.3; } .space-card h3 { font-size:25px; } .space-card p { color:var(--muted); font-size:13px; line-height:1.6; margin-top:12px; }

/* 13 Supporting screens */
.supporting { min-height:1160px; } .supporting::after { content:""; position:absolute; inset:45% 0 0; background:rgba(255,255,255,.06); transform:skewY(-5deg); z-index:-1; }
.support-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; margin-top:70px; align-items:end; } .support-heading p { color:rgba(255,255,255,.66); max-width:430px; line-height:1.7; font-size:17px; padding-bottom:8px; }
.support-screens { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:75px; align-items:start; } .support-screens .phone { border-width:7px; border-radius:30px; }
.support-screens .phone::before { height:16px; top:7px; } .support-screens .raised { margin-top:55px; }

/* 14 Closing */
.closing { min-height:1260px; } .closing-copy { position:relative; z-index:3; margin-top:28px; max-width:760px; }
.closing-copy>p:last-child { max-width:500px; margin-top:28px; color:rgba(255,255,255,.58); font-size:18px; line-height:1.65; }
.closing-phones { position:absolute; right:60px; top:420px; width:690px; height:800px; } .closing-phones .phone { position:absolute; width:280px; }
.closing-phones .phone:first-child { left:0; top:110px; transform:rotate(-8deg); } .closing-phones .center { left:205px; top:0; z-index:2; }
.closing-phones .phone:last-child { right:0; top:130px; transform:rotate(8deg); }
.closing-footer { position:absolute; left:var(--section-x); right:var(--section-x); bottom:45px; display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.5); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

@media print { @page { size:1400px 1000px; margin:0; } body { background:#fff; } .case-study { gap:0; padding:0; width:1400px; } .board { break-after:page; } }
@media (max-width:900px) {
  :root { --section-x:28px; } .case-study { gap:10px; padding:10px 0; } .board { min-height:auto; padding-top:42px; padding-bottom:60px; }
  h1 { font-size:64px; } h2,.feature-copy h2 { font-size:48px; }
  .editorial-grid,.split-feature,.screen-analysis,.arrival-grid,.writing-intro,.bilingual-heading,.rtl-demo,.support-heading,.arabic-writing-head { grid-template-columns:1fr; gap:44px; }
  .reading-column { padding-top:0; } .fact-row,.writing-principles { grid-template-columns:1fr 1fr; } .flow-line { grid-template-columns:1fr; gap:30px; }
  .role-switch { grid-template-columns:1fr; } .switch-track { width:90px; transform:rotate(90deg); margin:10px auto; } .state-comparison { grid-template-columns:1fr; }
  .transition-arrow { transform:rotate(90deg); } .phone-stage,.arrival-phone-wrap { min-height:800px; } .bilingual { overflow:hidden; }
  .screen-pairs { width:1150px; transform:scale(.72); transform-origin:left top; margin-bottom:-260px; } .rtl-demo { margin-top:45px; }
  .system-grid { grid-template-columns:1fr; } .copy-pairs { grid-template-columns:1fr; } .copy-pairs article { border-right:0; border-bottom:1px solid rgba(255,255,255,.2); padding:24px 0; } .copy-pairs article+article { padding-left:0; }
  .cover { min-height:1050px; } .cover-phones { transform:scale(.72); transform-origin:right bottom; }
  .cover-footer { width:auto; right:var(--section-x); gap:15px; flex-wrap:wrap; } .support-screens { grid-template-columns:repeat(4,230px); width:max-content; transform:scale(.72); transform-origin:left top; margin-bottom:-250px; }
  .closing { min-height:1100px; } .closing-phones { top:auto; bottom:-140px; transform:scale(.7); transform-origin:right bottom; }
}
@media (max-width:560px) {
  h1 { font-size:50px; } h2,.feature-copy h2 { font-size:39px; } .cover-copy { margin-top:50px; } .cover-phones { right:-120px; } .cover-footer { font-size:9px; }
  .fact-row,.writing-principles { grid-template-columns:1fr; } .phone-stage,.arrival-phone-wrap { min-height:700px; transform:scale(.86); }
  .login-pair { grid-template-columns:1fr 24px 1fr; } .direction-axis span { display:none; } .direction-axis i { height:220px; }
  .screen-pairs { transform:scale(.45); margin-bottom:-540px; } .support-screens { transform:scale(.46); margin-bottom:-520px; } .closing-phones { right:-210px; }
}