@font-face{font-family:DW Arabic;src:url('../fonts/noto-sans-arabic-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:DW Arabic;src:url('../fonts/noto-sans-arabic-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF}
:root{--night:#080b11;--ink:#e9eef5;--subtle:#b9c7d7;--water:#b9e4e6;--line:rgba(185,199,215,.18);font-family:DW Arabic,system-ui,sans-serif;color-scheme:dark only}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--night);color:var(--ink);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}body::before{content:"";position:fixed;inset:0;z-index:-1;background:url('../img/studio/sky-field.svg') center/cover no-repeat;opacity:.35;pointer-events:none}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500;text-wrap:balance}h2{font-size:clamp(30px,3.7vw,48px);line-height:1.45}h3{line-height:1.5}p{color:var(--subtle);text-wrap:pretty}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%;height:auto}[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}::selection{background:#426973;color:#fff}:focus-visible{outline:2px solid #c5e1e6;outline-offset:5px;border-radius:5px}main:focus{outline:none}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.anchor{display:block;position:absolute;top:-100px}.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{position:fixed;top:10px;right:16px;z-index:100;padding:10px 18px;background:#23313e;transform:translateY(-160%)}.skip:focus{transform:none}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 23px;border:1px solid rgba(185,199,215,.38);border-radius:10px;font-size:14px;font-weight:500;line-height:1.6;white-space:nowrap;transition:background .18s,border-color .18s;box-shadow:inset 0 1px 0 rgba(233,238,245,.07),0 8px 18px -12px #000;background:var(--clear-action);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.button:hover{background:#24323d;border-color:#748895}.button:active{background:#18232e}.quiet-link{font-size:13px;color:var(--subtle);padding:5px 8px}.quiet-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);border-bottom:1px solid #6d8794;font-size:14px}.text-link:hover{color:var(--water);border-color:var(--water)}
/* Quiet chrome leaves the jewel's action lane clear. */
.nav{height:80px;position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(32px,calc((100% - 1320px)/2));border-bottom:1px solid transparent;transition:background .2s,border-color .2s}.nav.scrolled,.nav.open{background:rgba(8,11,17,.89);border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:11px;direction:ltr;font:500 18px/1.5 DW Arabic,system-ui;white-space:nowrap}.brand img{width:23px;height:30px}.nav__links{display:flex;gap:18px}.nav__links a{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--subtle)}.nav__links a:hover{color:var(--ink)}.nav__actions{display:flex;align-items:center;gap:12px}.nav__enter{min-height:44px;padding:9px 17px}.motion-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:10px}.motion-toggle:hover{background:rgba(185,199,215,.07)}.motion-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.motion-play{display:none}.motion-toggle[aria-pressed=true] .motion-play{display:block}.motion-toggle[aria-pressed=true] .motion-pause{display:none}.motion-toggle:disabled{opacity:.5;cursor:default}.nav__burger{display:none;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:10px;position:relative}.nav__burger span{position:absolute;width:17px;height:1px;left:12px;background:var(--ink);transition:transform .18s}.nav__burger span:first-child{top:16px}.nav__burger span:last-child{top:24px}.nav.open .nav__burger span:first-child{top:20px;transform:rotate(45deg)}.nav.open .nav__burger span:last-child{top:20px;transform:rotate(-45deg)}
/* Preserve the full frame and the preferred subject scale. */
.mobile-break{display:none}.ask{display:flex;align-items:center;gap:10px;width:min(540px,100%);min-height:58px;margin-top:2px;padding:7px;border:1px solid rgba(185,199,215,.33);border-radius:13px;background:rgba(9,14,22,.68);box-shadow:inset 0 1px 0 rgba(185,199,215,.06),0 20px 40px -26px #000;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.ask:focus-within{border-color:#94aebd;background:#101923}.ask input{width:100%;min-width:0;flex:1;background:transparent;border:none;outline:none;padding:4px 12px;font-size:16px}.ask input::placeholder{color:#b4c1cf}.ask button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #546677;border-radius:9px;background:var(--clear-action)}.ask button:hover{background:#2a3c49}
/* Real tools, editorial proportions, one connected workflow. */
.introduction{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:100px;align-items:center;padding-block:120px 100px}.introduction h2{font-size:clamp(30px,3vw,42px);max-width:540px}.introduction>p{font-size:17px;line-height:2.1;max-width:510px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:48px}.section-heading p{max-width:420px;font-size:15px;line-height:1.9}.tools{position:relative;padding-block:45px 80px}.tool-row{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center;padding-block:64px;border-top:1px solid var(--line)}.tool-row__copy{max-width:390px}.tool-name{font-size:14px;display:block;color:#93acbc;margin-bottom:19px}.tool-row h3{font-size:clamp(28px,3vw,39px);margin-bottom:20px}.tool-row p{font-size:15px;line-height:2}.tool-details{list-style:none;padding:0;margin:24px 0 29px;display:flex;gap:7px 18px;flex-wrap:wrap;color:#c2cdd8;font-size:12px}.tool-details li{padding-block:3px;border-bottom:1px solid rgba(185,199,215,.24)}.editor-frame{background:var(--clear-plane);padding:8px;border:1px solid rgba(185,199,215,.25);border-radius:15px;box-shadow:inset 0 1px 0 rgba(185,199,215,.05),0 30px 55px -35px #000;min-width:0;transform:perspective(1500px) rotateY(3deg);transform-origin:right}.editor-frame img{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:7px}.editor-frame__bar{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 14px;color:#aebdcc;font-size:11px}.editor-frame figcaption{font-size:11px;color:#91a5b6;padding:11px 7px 4px}.tool-row--reverse .tool-row__copy{grid-column:2;grid-row:1}.tool-row--reverse .editor-frame{grid-column:1;grid-row:1;transform:perspective(1500px) rotateY(-3deg);transform-origin:left}.tool-row--reverse{grid-template-columns:1.22fr .78fr}.tools__note{font-size:12px;padding-top:12px;color:#95a8b9}
.workflow{padding-block:95px 110px;background:linear-gradient(180deg,rgba(32,66,77,.14),rgba(12,26,36,.2) 80%,transparent)}.workflow__surface{border:1px solid rgba(185,199,215,.24);background:var(--clear-plane);border-radius:18px;padding:10px;box-shadow:var(--clear-shadow)}.workflow__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-bottom:1px solid var(--line)}.workflow__tabs button{border:1px solid transparent;border-radius:9px;min-height:60px;background:transparent;font-size:14px;text-align:right;padding:12px}.workflow__tabs button span{font-size:11px;color:#8198ab;display:block;margin-bottom:4px}.workflow__tabs button:hover{background:rgba(185,199,215,.04)}.workflow__tabs button[aria-selected=true]{border-color:#536675;background:rgba(185,199,215,.065);box-shadow:var(--clear-edge)}.workflow__tabs button[aria-selected=true] span{color:var(--water)}.workflow__body{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;padding:42px 28px 28px}.workflow__panels{min-height:340px}.workflow__character{height:64px;width:auto;object-fit:contain;object-position:center;margin-bottom:22px;filter:saturate(.55)}.workflow__character--gem{height:52px;margin-block:6px 28px}.workflow__panels h3{font-size:27px;margin-bottom:16px}.workflow__panels p{font-size:15px;line-height:2;margin-bottom:20px}.workflow__preview{min-width:0}.workflow__preview>img{width:100%;aspect-ratio:1.6;object-fit:cover;object-position:top;border:1px solid #34434e;border-radius:9px}.workflow__preview figcaption{color:#91a5b6;font-size:11px;padding-top:12px;line-height:1.9}
.questions{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px;padding-block:95px 115px}.questions>div>p{font-size:14px;margin-top:16px}.questions__list details{border-top:1px solid var(--line)}.questions__list details:last-child{border-bottom:1px solid var(--line)}.questions summary{list-style:none;position:relative;padding:24px 0 24px 40px;font-size:16px;cursor:pointer;line-height:1.8}.questions summary::-webkit-details-marker{display:none}.questions summary::after{content:'+';position:absolute;left:4px;top:24px;font:300 23px/1.2 system-ui;color:#a5beca}.questions details[open] summary::after{content:'−'}.questions details p{font-size:14px;line-height:2;padding:0 0 25px;max-width:62ch}.closing{position:relative;display:grid;grid-template-columns:1.2fr 1fr;min-height:400px;align-items:center;gap:50px;padding-block:40px 60px}.closing__water{position:relative;border:1px solid rgba(185,199,215,.2);border-radius:50% 50% 16px 16px/35% 35% 16px 16px;overflow:hidden;background:#19343d}.closing__water img{width:100%;aspect-ratio:1.45;object-fit:cover}.closing__water::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 70px 16px rgba(8,11,17,.22);pointer-events:none}.closing__copy{padding:20px 0}.closing__copy h2{font-size:clamp(32px,3.7vw,48px)}.closing__copy p{font-size:15px;margin:20px 0 26px}.footer{margin-top:65px;padding-block:32px 25px;border-top:1px solid var(--line)}.footer__top{display:flex;justify-content:space-between;align-items:center;gap:28px}.footer nav{display:flex;flex-wrap:wrap;gap:10px 25px}.footer nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--subtle)}.footer nav a:hover{color:var(--ink)}.footer__base{display:flex;justify-content:space-between;gap:20px;margin-top:32px;padding-top:20px;border-top:1px solid rgba(185,199,215,.1);font-size:11px;color:#91a5b6}
@media(max-width:1100px){.nav{padding-inline:24px;gap:16px}.nav__links{gap:12px}.nav__links a{font-size:12px}.nav__enter{font-size:12px;padding-inline:13px}.wrap{width:calc(100% - 56px)}.tool-row{gap:40px}.workflow__body{gap:30px;padding-inline:18px}.introduction{column-gap:55px}}
@media(max-width:850px){.nav{height:72px}.brand{font-size:16px;gap:8px}.nav__links{gap:10px}.nav__actions{gap:8px}.nav__enter{padding-inline:10px}.wrap{width:calc(100% - 44px)}.section-heading{display:block;margin-bottom:35px}.section-heading p{margin-top:18px;max-width:550px}.introduction{column-gap:34px}.tool-row{grid-template-columns:.9fr 1.1fr;gap:30px}.tool-row--reverse{grid-template-columns:1.1fr .9fr}.tool-row h3{font-size:28px}.tool-row p{font-size:14px}.tool-details{gap:5px 12px}.workflow__body{grid-template-columns:.8fr 1fr;gap:24px;padding-block:30px}.workflow__panels h3{font-size:24px}.workflow__tabs button{font-size:12px}.questions{gap:45px}.closing{gap:32px}}
@media(max-width:720px){.nav{padding-inline:18px;height:70px}.nav__burger{display:block}.nav__links{display:none;position:absolute;inset:70px 14px auto;padding:15px 20px;background:#101925;border:1px solid #3d4e5d;border-radius:12px;box-shadow:var(--clear-shadow)}.nav.open .nav__links{display:flex;flex-direction:column;gap:0}.nav__links a{font-size:15px;min-height:48px}.nav__enter{display:none}.brand{font-size:17px}.nav__actions{gap:9px}.wrap{width:calc(100% - 40px)}.ask{max-width:460px}.quiet-link{font-size:12px}.introduction{grid-template-columns:1fr;gap:24px;padding-block:75px 55px}.introduction h2{font-size:33px}.introduction>p{font-size:15px;line-height:2}.tools{padding-block:28px 55px}.tool-row,.tool-row--reverse{display:flex;flex-direction:column;gap:35px;align-items:stretch;padding-block:42px}.tool-row__copy{max-width:100%}.tool-row h3{font-size:32px;margin-bottom:14px}.tool-row h3 br{display:none}.tool-row p{font-size:15px;max-width:48ch}.tool-name{margin-bottom:12px}.tool-details{margin-block:20px 23px}.editor-frame,.tool-row--reverse .editor-frame{transform:none;border-radius:12px}.editor-frame__bar{padding-top:4px}.workflow{padding-block:65px}.workflow__tabs{grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;gap:5px}.workflow__tabs button{min-height:65px;font-size:13px}.workflow__body{grid-template-columns:1fr;padding:24px 13px 13px;gap:24px}.workflow__panels{min-height:285px}.workflow__panels h3{font-size:26px}.workflow__panels p{font-size:14px}.workflow__character{height:54px;margin-bottom:18px}.workflow__character--gem{height:46px;margin-block:4px 22px}.questions{grid-template-columns:1fr;gap:35px;padding-block:65px 60px}.questions summary{font-size:15px;padding-block:23px}.questions details p{font-size:14px}.closing{grid-template-columns:1fr;gap:28px;padding-block:35px;min-height:0}.closing__water{max-width:560px;width:100%;margin-inline:auto}.closing__water img{aspect-ratio:1.6}.closing__copy{padding:0}.closing__copy h2{font-size:36px}.closing__copy h2 br{display:none}.closing__copy p{margin-block:16px 23px}.footer{margin-top:45px}.footer__top{align-items:start;flex-direction:column;gap:25px}.footer nav{gap:3px 24px}.footer__base{flex-direction:column;gap:5px;margin-top:22px}.tools__note{font-size:12px}}
@media(max-width:360px){.nav{padding-inline:14px}.brand{font-size:15px}.wrap{width:calc(100% - 32px)}.workflow__tabs button{font-size:12px;padding:10px}.tool-row h3{font-size:29px}.section-heading h2,.introduction h2{font-size:30px}}
@media(max-height:650px) and (min-width:721px){.ask{min-height:50px;padding-block:4px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.button,.ask,.workflow__surface,.editor-frame{background:#151f2a}}
@media(prefers-reduced-transparency:reduce){.button,.ask,.ask:focus-within,.workflow__surface,.editor-frame,.nav.scrolled,.nav.open{background:#151f2a;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.editor-frame,.tool-row--reverse .editor-frame{transform:none}}