/* ===================== Thmanyah Sans (self-hosted) ===================== */ @font-face{font-family:'Thmanya Sans';src:url('../assets/fonts/ThmanyaSans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:'Thmanya Sans';src:url('../assets/fonts/ThmanyaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Thmanya Sans';src:url('../assets/fonts/ThmanyaSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Thmanya Sans';src:url('../assets/fonts/ThmanyaSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Thmanya Sans';src:url('../assets/fonts/ThmanyaSans-Bold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;} @font-face{font-family:'Thmanya Sans';src:url('../assets/fonts/ThmanyaSans-Bold.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;} /* ============================================================ Rashad — dark landing (navy #0A1730 / orange #F97316) Faithful re-implementation of the Claude Design handoff. ============================================================ */ :root{ --navy:#0A1730; --ink:#D7E2EA; --accent:#F97316; --card:#122541; --circle:#18305A; --muted:#AEB9C9; --muted2:#C7D2E2; --chip-border:#2A3E5E; --grad-text:linear-gradient(180deg,#7C2D12 0%, var(--accent) 100%); --grad-btn:linear-gradient(123deg,#0A1730 7%,#C2410C 37%,#EA580C 72%,#F97316 100%); --btn-shadow:0px 4px 4px rgba(234,88,12,0.3), 4px 4px 12px #C2410C inset; } *{box-sizing:border-box;margin:0;padding:0;} /* Loaded only on the landing route. !important overrides the shared app layout's body utility classes (bg-surface-canvas / text-ink-primary / font-sans) so the landing keeps its own navy bg + Kanit/Thmanya type. */ /* Only force the navy *color* (beats Tailwind's bg-surface-canvas util + globals body{background}). Must NOT use the `background` shorthand here — that would reset background-image:none and erase the diagonal beams defined further down. */ html,body{background-color:var(--navy) !important;} body{ font-family:'Kanit','Thmanya Sans',sans-serif !important; color:var(--ink) !important; -webkit-font-smoothing:antialiased; overflow-x:clip; width:100%; } img{display:block;} a{text-decoration:none;color:inherit;} /* The original handoff page was LTR () with per-section dir="rtl". This app's root layout is dir="rtl", so no-dir sections inherit RTL. The auto-scrolling marquee's translateX(-50%) loop assumes an LTR flex track, so under inherited RTL the track origin flips and leaves empty gaps. Pin the marquee tracks back to LTR (they hold only images; the head keeps its dir). */ .marquee__row,.marquee__track{direction:ltr;} /* Landing scrollbar — match the original handoff (dark navy track + #1c2c47 thumb). Scoped to `html` so it outranks globals.css's lighter `*::-webkit-scrollbar` design-system style (which otherwise wins on the page scroller). */ html{scrollbar-color:#1c2c47 var(--navy);scrollbar-width:auto; /* Disable Chrome/Android mobile font-boosting (text autosizing) — it inflates wrapping text blocks (it bloated the hero title to ~118px once it wrapped), overriding our intended clamp() sizes. Keep 100% (not none) for iOS safety. */ -webkit-text-size-adjust:100%;text-size-adjust:100%; /* Hard stop on any horizontal scroll. */ overflow-x:hidden;} html::-webkit-scrollbar{width:10px;height:10px;} html::-webkit-scrollbar-track{background:var(--navy);} html::-webkit-scrollbar-thumb{background:#1c2c47;border-radius:5px;border:none;} html::-webkit-scrollbar-thumb:hover{background:#243a5c;} html::-webkit-scrollbar-corner{background:var(--navy);} /* gradient-clipped display text */ .grad-text{ background:var(--grad-text); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* the pill gradient buttons (START NOW / START) */ .cta-grad{ border:none;cursor:pointer;border-radius:9999px;color:#fff;font-weight:700; text-transform:uppercase;letter-spacing:0.12em; background:var(--grad-btn);box-shadow:var(--btn-shadow); outline:2px solid #fff;outline-offset:-3px; font-family:'Kanit',sans-serif;white-space:nowrap; display:flex;align-items:center;justify-content:center;gap:10px; } .cta-grad img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 11%;background:#fff;border:1.5px solid #fff;flex:none;} /* fade-in entrance */ [data-fade]{opacity:0;transform:translateY(18px);} [data-fade].in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);} @media (prefers-reduced-motion: reduce){ [data-fade]{opacity:1!important;transform:none!important;} } /* ===================== HERO ===================== */ /* height:100dvh tracks the *visible* viewport on mobile (where 100vh measures the larger toolbar-hidden viewport, making the hero overshoot the screen and push the tagline/CTA below the fold). vh kept first as the fallback for old browsers. */ .hero{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-x:clip;position:relative;padding-inline:40px;cursor:default;} .nav{display:flex;justify-content:space-between;align-items:center;padding-top:clamp(20px,3vw,32px);position:relative;z-index:20;} .nav a{color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;font-size:clamp(0.85rem,1.2vw,1.4rem);transition:opacity .2s;} .nav a:hover{opacity:0.7;} .hero__title-wrap{flex:1;display:flex;align-items:center;overflow:hidden;} .hero__title{font-weight:900;text-transform:uppercase;letter-spacing:-0.03em;line-height:0.85;white-space:nowrap;width:100%;font-size:clamp(2.2rem,13vw,240px);margin-top:clamp(-20px,0vw,24px);text-align:center;} /* Mobile-only forced break in the hero title (toggled at ≤560px). display:none here so the title stays a single line on desktop/tablet (the fit JS scales it to width). */ .hero__title-br{display:none;} .hero__foot{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:clamp(28px,4vw,40px);position:relative;z-index:20;} .hero__tagline{color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;line-height:1.3;font-size:clamp(0.75rem,1.4vw,1.5rem);max-width:340px;} .hero__cta{padding:clamp(10px,1.4vw,16px) clamp(28px,3.4vw,42px);font-size:clamp(0.72rem,1vw,1rem);min-width:clamp(170px,17vw,230px);min-height:clamp(44px,4vw,58px);} .hero__cta [data-hello-hover]{display:none;align-items:center;gap:9px;} .portrait-window{position:absolute;inset:0;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;z-index:10;pointer-events:none;} .portrait-pan{will-change:transform;} .portrait-magnet,.portrait-magnet-inner{will-change:transform;} .portrait-img{width:clamp(260px,32vw,356px);display:block;pointer-events:auto;} /* ===================== MARQUEE (auto-scrolling Rashad components) ===================== */ .marquee{background:var(--navy);overflow:hidden;display:flex;flex-direction:column;gap:18px;padding-top:clamp(72px,10vw,120px);padding-bottom:52px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .marquee__row{overflow:hidden;} .marquee__track{display:flex;gap:18px;width:max-content;will-change:transform;} .marquee__track--l{animation:mq-l 42s linear infinite;} .marquee__track--r{animation:mq-r 34s linear infinite;} .marquee:hover .marquee__track{animation-play-state:paused;} .marquee__track img{height:clamp(150px,17vw,224px);width:auto;border-radius:16px;flex:none; border:1px solid rgba(215,226,234,0.08);box-shadow:0 16px 40px rgba(0,0,0,0.40);background:#0E1B33; transition:transform .35s ease, box-shadow .35s ease;} .marquee__track img:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 52px rgba(0,0,0,0.55);} @keyframes mq-l{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes mq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}} @media (prefers-reduced-motion: reduce){.marquee__track{animation:none;}} /* ===================== ABOUT ===================== */ .about{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(72px,9vw,96px) clamp(20px,4vw,40px);} .about__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,6vw,64px);position:relative;z-index:2;} .about__title{font-weight:900;line-height:1.15;font-size:clamp(3rem,12vw,160px);font-family:'Thmanya Sans',sans-serif;} .about__text{color:var(--ink);font-weight:500;line-height:1.9;max-width:620px;font-size:clamp(1rem,2vw,1.35rem);font-family:'Thmanya Sans',sans-serif;} .about__cta-wrap{position:relative;z-index:2;margin-top:clamp(64px,8vw,96px);} .about__cta{padding:clamp(12px,1.6vw,18px) clamp(32px,4vw,48px);font-size:clamp(0.72rem,1vw,1rem);min-width:clamp(150px,15vw,200px);min-height:clamp(46px,4vw,60px);font-weight:500;} .about__cta [data-await-hover]{display:none;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-family:'Thmanya Sans',sans-serif;font-weight:700;} .about__cta [data-await-hover] img{width:30px;height:30px;} /* ===================== AUDIENCES ===================== */ .aud{background:var(--navy);padding:clamp(64px,9vw,120px) clamp(20px,4vw,48px);position:relative;z-index:6;font-family:'Thmanya Sans',sans-serif;} .aud__wrap{max-width:1120px;margin:0 auto;} .aud__head{text-align:center;max-width:700px;margin:0 auto clamp(48px,7vw,84px);} .aud__head h2{font-family:'Thmanya Sans',sans-serif;font-weight:800;color:#F2F6FB;font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.3;margin-bottom:18px;} .aud__head p{font-family:'Thmanya Sans',sans-serif;font-weight:400;color:var(--muted);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.9;} .aud__list{display:flex;flex-direction:column;gap:clamp(44px,6vw,76px);} .aud__row{direction:ltr;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,4vw,64px);} .aud__media{flex:1 1 360px;max-width:460px;min-width:280px;position:relative;aspect-ratio:1/1;border-radius:30px;background:var(--card);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;} .aud__num{position:absolute;top:6%;font-family:'Thmanya Sans',sans-serif;font-weight:900;font-size:clamp(80px,15vw,180px);color:rgba(215,226,234,0.07);line-height:1;pointer-events:none;} .aud__num.r{right:7%;} .aud__num.l{left:7%;} .aud__circle{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);width:74%;aspect-ratio:1/1;border-radius:50%;background:var(--circle);} .aud__char{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);z-index:2;width:94%;aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;} .aud__char img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;object-position:bottom center;image-rendering:auto;} .aud__char.wide img{height:108%;} .aud__text{flex:1 1 360px;min-width:280px;max-width:480px;direction:rtl;text-align:right;} .aud__tag{display:inline-block;font-weight:700;font-size:0.78rem;color:var(--accent);background:rgba(249,115,22,0.14);padding:6px 15px;border-radius:9999px;white-space:nowrap;margin-bottom:18px;} .aud__text h3{font-weight:800;color:var(--accent);font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:14px;} .aud__text p{font-weight:400;color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.9;margin-bottom:22px;} .aud__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin-bottom:26px;} .aud__chips span{font-weight:500;font-size:0.85rem;color:var(--muted2);background:transparent;border:1px solid var(--chip-border);padding:8px 16px;border-radius:9999px;} .aud__btn{border:none;cursor:pointer;font-family:'Thmanya Sans',sans-serif;font-weight:700;color:#fff;background:var(--accent);padding:13px 32px;border-radius:9999px;font-size:0.95rem;transition:opacity .2s, transform .2s;} .aud__btn:hover{opacity:0.92;transform:translateY(-2px);} /* ===================== SERVICES ===================== */ .services{background:#fff;border-top-left-radius:clamp(40px,5vw,60px);border-top-right-radius:clamp(40px,5vw,60px);padding:clamp(80px,10vw,128px) clamp(20px,4vw,40px);position:relative;z-index:5;} .services h2{font-weight:900;text-transform:uppercase;text-align:center;color:var(--navy);font-size:clamp(3rem,12vw,160px);line-height:0.9;margin-bottom:clamp(64px,8vw,112px);} .services__list{max-width:64rem;margin:0 auto;border-top:1px solid rgba(12,18,48,0.15);} .services__row{display:flex;gap:clamp(16px,3vw,48px);align-items:flex-start;padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid rgba(12,18,48,0.15);} .services__num{font-weight:900;font-size:clamp(3rem,10vw,140px);line-height:0.85;color:var(--navy);flex:none;} .services__body{display:flex;flex-direction:column;gap:12px;padding-top:clamp(4px,1vw,18px);} .services__body h3{font-weight:500;text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);color:var(--navy);line-height:1.1;} .services__body p{font-weight:300;line-height:1.6;max-width:42rem;font-size:clamp(0.85rem,1.6vw,1.25rem);color:var(--navy);opacity:0.6;} /* ===================== PROJECTS ===================== */ .projects{background:var(--navy);border-top-left-radius:clamp(40px,5vw,60px);border-top-right-radius:clamp(40px,5vw,60px);margin-top:clamp(-56px,-6vw,-40px);position:relative;z-index:10;padding:clamp(80px,9vw,120px) clamp(20px,4vw,40px) clamp(60px,8vw,120px);} .projects h2{font-weight:900;text-transform:uppercase;letter-spacing:-0.02em;line-height:0.9;text-align:center;font-size:clamp(3rem,12vw,160px);margin-bottom:clamp(40px,6vw,80px);} .projects__list{max-width:1200px;margin:0 auto;} .project-slot{height:85vh;display:flex;justify-content:center;align-items:flex-start;} .project-card{position:sticky;top:100px;transform-origin:top center;width:100%;border-radius:clamp(40px,5vw,60px);border:2px solid var(--ink);background:var(--navy);padding:clamp(16px,2.5vw,32px);will-change:transform;} .project-card__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(8px,1.5vw,18px) clamp(8px,1.5vw,24px) clamp(16px,2vw,28px);} .project-card__id{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);min-width:0;} .project-card__num{font-weight:900;font-size:clamp(2.5rem,8vw,110px);line-height:0.85;color:var(--ink);flex:none;} .project-card__meta{display:flex;flex-direction:column;gap:4px;min-width:0;} .project-card__cat{text-transform:uppercase;letter-spacing:0.15em;font-size:clamp(0.7rem,1vw,0.95rem);color:var(--accent);font-weight:500;} .project-card__name{text-transform:uppercase;font-weight:500;font-size:clamp(1.1rem,2.4vw,2.2rem);color:var(--ink);line-height:1.05;} .project-card__live{background:transparent;cursor:pointer;border-radius:9999px;border:2px solid var(--ink);color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:0.15em;padding:clamp(10px,1.2vw,14px) clamp(24px,3vw,40px);font-size:clamp(0.78rem,1vw,1rem);font-family:'Kanit',sans-serif;white-space:nowrap;flex:none;transition:background .2s;} .project-card__live:hover{background:rgba(215,226,234,0.1);} .project-card__grid{display:grid;grid-template-columns:40% 60%;gap:clamp(8px,1.2vw,16px);} .project-card__col{display:flex;flex-direction:column;gap:clamp(8px,1.2vw,16px);} .project-card__grid img{width:100%;object-fit:cover;background:#13203a;} .project-card__grid .a{height:clamp(130px,16vw,230px);border-radius:clamp(30px,4vw,50px);} .project-card__grid .b{height:clamp(160px,22vw,340px);border-radius:clamp(30px,4vw,50px);} .project-card__grid .c{height:100%;min-height:clamp(310px,38vw,590px);border-radius:clamp(30px,4vw,50px);} @media (max-width:560px){ .nav{gap:14px;font-size:.8rem;} .hero{padding-inline:20px;height:80vh;height:80dvh;} } /* ===================== AUDIENCES — scroll reveal + parallax (reversible) ===================== */ .aud__head{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1);} .aud__head.in{opacity:1;transform:none;} .aud__media{opacity:0;transform:translateX(-66px) scale(.955);transition:opacity .72s cubic-bezier(.16,.84,.44,1),transform .72s cubic-bezier(.16,.84,.44,1);will-change:opacity,transform;} .aud__row:nth-child(even) .aud__media{transform:translateX(66px) scale(.955);} .aud__row.in .aud__media{opacity:1;transform:none;} .aud__text > *{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.44,1);} .aud__row.in .aud__text > *{opacity:1;transform:none;} .aud__row.in .aud__text > *:nth-child(1){transition-delay:.10s} .aud__row.in .aud__text > *:nth-child(2){transition-delay:.17s} .aud__row.in .aud__text > *:nth-child(3){transition-delay:.24s} .aud__row.in .aud__text > *:nth-child(4){transition-delay:.31s} .aud__row.in .aud__text > *:nth-child(5){transition-delay:.38s} .aud__char{transform:none;translate:-50% calc(var(--pY,0)*1px);scale:.86;opacity:0;transition:opacity .8s ease .12s,scale .8s cubic-bezier(.16,.84,.44,1) .12s;} .aud__row.in .aud__char{opacity:1;scale:1;} .aud__circle{transform:none;translate:-50% calc(var(--pC,0)*1px);scale:.66;opacity:.3;transition:scale .85s cubic-bezier(.16,.84,.44,1) .04s,opacity .85s ease .04s;} .aud__row.in .aud__circle{scale:1;opacity:1;} .aud__num{translate:0 calc(var(--pN,0)*1px);opacity:0;transition:opacity .9s ease .22s;} .aud__row.in .aud__num{opacity:1;} @media (prefers-reduced-motion:reduce){ .aud__head,.aud__media,.aud__text>*,.aud__char,.aud__circle,.aud__num{opacity:1!important;transform:none!important;translate:-50% 0;scale:1;transition:none!important;} } /* Audiences — center the text block once it stacks on mobile */ @media (max-width:760px){ .aud__text{text-align:center;max-width:480px;margin-inline:auto;} .aud__chips{justify-content:center;} .aud__text .rbtn{margin-inline:auto;} } /* ===================== ADDED DARK SECTIONS (social proof / before-after / testimonials / FAQ) ===================== */ .dsec{background:var(--navy);padding:clamp(72px,10vw,132px) clamp(20px,4vw,48px);font-family:'Thmanya Sans',sans-serif;} .dsec__h2{text-align:center;color:var(--accent);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.3;max-width:22ch;margin:0 auto clamp(34px,5vw,56px);} .dwrap{max-width:1120px;margin:0 auto;} [data-fade].dfade{opacity:0;transform:translateY(26px);} [data-fade].dfade.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);} /* social proof */ .dproof__panel{background:var(--card);border:1px solid rgba(215,226,234,.08);border-radius:28px;padding:clamp(34px,4.5vw,62px);} .dproof__top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap-reverse;} .dproof__top h3{font-weight:800;color:var(--accent);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.4;max-width:24ch;text-align:right;direction:rtl;margin:0;} .davatars{display:flex;flex-direction:row-reverse;flex:none;} .davatars span{width:46px;height:46px;border-radius:50%;border:3px solid var(--card);margin-inline-start:-15px;} .dproof__sentence{direction:rtl;text-align:right;color:var(--muted);font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.9;margin:26px 0 0;} .dproof__sentence b{color:var(--ink);font-weight:700;} .dproof__sentence .hot{color:var(--accent);font-weight:700;} .dproof__row{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid rgba(215,226,234,.1);direction:rtl;} .dpill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:1px solid var(--chip-border);font-size:.85rem;font-weight:500;color:var(--muted2);} .dpill svg{width:14px;height:14px;color:#4caf78;flex:none;} .dpill--v{border-color:rgba(249,115,22,.45);color:var(--accent);} .dpill--v svg{color:var(--accent);} /* before / after */ .dba__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;direction:ltr;} .dba__card{border-radius:24px;padding:clamp(32px,3.6vw,46px);direction:rtl;text-align:right;} .dba__with{background:#13284a;border:1.5px solid var(--accent);} .dba__without{background:#0E1B33;border:1px solid rgba(215,226,234,.08);} .dba__card h3{font-weight:800;margin:0 0 24px;font-size:1.35rem;} .dba__with h3{color:var(--accent);} .dba__without h3{color:var(--muted);} .dba__row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;font-size:1.05rem;line-height:1.65;color:var(--ink);} .dba__without .dba__row{color:var(--muted);} .dba__row svg{flex:none;width:22px;height:22px;margin-top:2px;} .dba__with .dba__row svg{color:#4caf78;} .dba__without .dba__row svg{color:#5d6e86;} /* testimonials */ .dtest__hero{background:var(--card);border:1px solid rgba(215,226,234,.08);border-radius:28px;display:grid;grid-template-columns:1fr 300px;align-items:stretch;overflow:hidden;direction:ltr;max-width:1080px;margin-inline:auto;} .dtest__q{padding:clamp(30px,4vw,52px);position:relative;direction:rtl;text-align:right;display:flex;flex-direction:column;justify-content:center;} .dtest__q em{font-style:normal;color:var(--accent);font-weight:700;} .dtest__result{margin-top:18px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.28);color:var(--ink);font-size:.86rem;font-weight:600;line-height:1.5;padding:10px 14px;border-radius:12px;} .dtest__result .dot{color:var(--accent);font-size:.95rem;} .dtest__q .mark{position:absolute;top:18px;left:clamp(30px,4vw,52px);font-size:96px;line-height:1;color:var(--accent);opacity:.5;font-family:Georgia,serif;} .dtest__q blockquote{color:var(--ink);font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.7;margin:18px 0 0;} .dtest__name{margin-top:22px;color:var(--accent);font-weight:700;font-size:.95rem;} .dtest__pic{background:linear-gradient(155deg,#C2410C,#F97316);display:grid;place-items:center;min-height:200px;} .dtest__pic .av{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.92);} .dtest__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;} .dtest__card{background:#0E1B33;border:1px solid rgba(215,226,234,.08);border-radius:18px;padding:28px;direction:rtl;text-align:right;} .dtest__card p{margin:0;color:var(--muted2);font-size:.96rem;line-height:1.75;} .dtest__by{margin-top:16px;display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:.88rem;} .dtest__ini{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff;} /* faq */ .dfaq__wrap{display:grid;grid-template-columns:1fr 290px;gap:clamp(24px,4vw,52px);align-items:start;direction:ltr;} .dfaq__list{display:flex;flex-direction:column;gap:18px;} .dacc{background:var(--card);border:1px solid rgba(215,226,234,.1);border-radius:16px;overflow:hidden;} .dacc summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:center;min-height:72px;padding:24px 30px 24px 78px;color:var(--ink);font-weight:700;font-size:clamp(1rem,1.4vw,1.12rem);direction:rtl;text-align:right;} .dacc summary::-webkit-details-marker{display:none;} .dacc summary span{display:block;width:100%;text-align:right;} /* toggle is absolutely anchored — it can never move when a question opens */ .dacc .tog{position:absolute;top:50%;left:30px;transform:translateY(-50%) rotate(0deg);width:30px;height:30px;border-radius:9px;border:1.5px solid var(--chip-border);transition:border-color .25s,background .25s,transform .3s cubic-bezier(.22,.61,.36,1);} .dacc[open] .tog{transform:translateY(-50%) rotate(180deg);} .dacc .tog::before,.dacc .tog::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:2.4px;margin:-1.2px 0 0 -6.5px;background:var(--accent);border-radius:2px;} .dacc .tog::after{transform:rotate(90deg);transition:opacity .25s;} .dacc[open] .tog{border-color:var(--accent);background:rgba(249,115,22,.12);} .dacc[open] .tog::after{opacity:0;} .dacc__body{padding:0 30px 28px 78px;color:var(--muted);line-height:1.9;direction:rtl;text-align:right;font-size:1rem;} /* open animation: body content fades + slides in when a question is opened */ .dacc[open] .dacc__body{animation:daccReveal .38s cubic-bezier(.22,.61,.36,1) both;} @keyframes daccReveal{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}} /* progressive height growth for browsers that support keyword interpolation (Chrome/Edge) */ @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords;} .dacc::details-content{height:0;overflow:hidden;transition:height .38s cubic-bezier(.22,.61,.36,1),content-visibility .38s allow-discrete;} .dacc[open]::details-content{height:auto;} } @media (prefers-reduced-motion:reduce){ .dacc[open] .dacc__body{animation:none;} .dacc::details-content,.dacc[open]::details-content{transition:none;} } .dfaq__char{display:flex;justify-content:center;align-items:flex-start;position:sticky;top:96px;} .dfaq__char img{width:100%;max-width:280px;filter:drop-shadow(0 24px 30px rgba(0,0,0,.4));} @media (max-width:820px){ .dba__grid,.dtest__hero,.dtest__grid,.dfaq__wrap{grid-template-columns:1fr;} .dtest__pic{min-height:150px;} .dfaq__char{display:none;} } /* ===================== BEFORE / AFTER — comparison slider ===================== */ .dba-slider{position:relative;max-width:1040px;margin:0 auto;border-radius:26px;overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;--x:50%;} .dba-sc{padding:clamp(32px,3.6vw,46px);} .dba-sc h3{font-weight:800;font-size:1.5rem;margin:0 0 24px;} .dba-sr{display:flex;align-items:flex-start;gap:14px;padding:15px 0;font-size:1.05rem;line-height:1.65;} .dba-sr svg{width:22px;height:22px;flex:none;margin-top:3px;} /* بدون = base card, right-aligned (lives on the RIGHT half) */ .dba-sc--without{position:relative;background:#0E1B33;border:1px solid rgba(215,226,234,.08);border-radius:26px;direction:rtl;text-align:right;} .dba-sc--without h3,.dba-sc--without .dba-sr{color:var(--muted);} /* مع = overlay card revealed from the left; content is RIGHT-aligned and pinned to a FIXED column in the left half (right edge just left of centre) so it mirrors بدون. The padding must NOT track --x — otherwise the text re-wraps and overflows the fixed-height card as the handle slides; only the clip moves. */ .dba-sc--with{position:absolute;inset:0;background:#13284a;border:2px solid var(--accent);border-radius:26px;direction:rtl;text-align:right;padding-right:calc(50% + clamp(32px,3.6vw,46px));clip-path:inset(0 calc(100% - var(--x)) 0 0);} .dba-sc--with h3{color:var(--accent);} .dba-sc--with .dba-sr{color:#fff;} .dba-handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--accent);transform:translateX(-50%);z-index:5;pointer-events:none;box-shadow:0 0 16px rgba(249,115,22,.5);} .dba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 6px 22px rgba(249,115,22,.55);cursor:ew-resize;} .dba-grip svg{width:24px;height:24px;} .dba-hint{text-align:center;color:var(--muted);font-size:.9rem;margin-top:20px;font-family:'Thmanya Sans';} @media (max-width:680px){.dba-sc{padding:24px;} .dba-sc h3{font-size:1.25rem;}} @media (prefers-reduced-motion:reduce){.dba-sc--with{clip-path:inset(0 50% 0 0);}} /* ===================== TESTIMONIALS — real portraits + reversible reveal ===================== */ .dtest__pic{position:relative!important;overflow:hidden;min-height:360px;} .dtest__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;} .dtest__ava{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1a2c4a;border:1px solid rgba(215,226,234,.12);} /* hero rises + fades */ .dtest__hero{opacity:0;transform:translateY(64px) scale(.97);transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1);} .dtest__hero.in{opacity:1;transform:none;} /* secondary cards alternate slide-in from the sides + slight rotate */ .dtest__card{opacity:0;transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);} .dtest__grid .dtest__card:nth-child(1){transform:translateX(48px) translateY(28px) rotate(2deg);} .dtest__grid .dtest__card:nth-child(2){transform:translateY(52px);} .dtest__grid .dtest__card:nth-child(3){transform:translateX(-48px) translateY(28px) rotate(-2deg);} .dtest__card.in{opacity:1;} /* settle must out-specify the .dtest__grid .dtest__card:nth-child(n) start transforms above (0,3,0) — otherwise translateX(±48px) never clears and the cards stay shifted (latent on the 3-col desktop grid; a real ~30px horizontal overflow once the grid collapses to 1-col at ≤820px). These .in rules are (0,4,0) and win. */ .dtest__grid .dtest__card:nth-child(1).in, .dtest__grid .dtest__card:nth-child(2).in, .dtest__grid .dtest__card:nth-child(3).in{transform:none;} .dtest__grid .dtest__card:nth-child(1).in{transition-delay:.10s} .dtest__grid .dtest__card:nth-child(2).in{transition-delay:.22s} .dtest__grid .dtest__card:nth-child(3).in{transition-delay:.34s} /* portrait slides up from inside the orange block + settles */ .dtest__pic img{transition:opacity 1s ease .25s, transform 1s cubic-bezier(.16,.84,.44,1) .25s;} .dtest__hero:not(.in) .dtest__pic img{opacity:0;transform:translateY(60px) scale(1.08);} /* avatars pop in */ .dtest__ava{transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.5,1);} .dtest__card:not(.in) .dtest__ava{opacity:0;transform:scale(.3);} .dtest__card .dtest__ava{transition-delay:.2s;} /* big quote-mark springs in */ .dtest__q .mark{transition:opacity .8s ease .3s, transform .8s cubic-bezier(.34,1.5,.5,1) .3s;display:inline-block;} .dtest__hero:not(.in) .dtest__q .mark{opacity:0;transform:scale(.3) rotate(-18deg);} @media (prefers-reduced-motion:reduce){.dtest__hero,.dtest__card,.dtest__pic img,.dtest__q .mark{opacity:1!important;transform:none!important;}} /* ===================== SOCIAL PROOF v2 — Split Editorial + looping counters ===================== */ .dpf2{background:var(--card);border:1px solid rgba(215,226,234,.10);border-radius:30px; padding:clamp(30px,4vw,56px);display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;} .dpf2__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--accent); background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.26);padding:7px 14px;border-radius:999px;margin-bottom:18px;} .dpf2__h{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;line-height:1.45;margin:0 0 16px;color:var(--ink);} .dpf2__h .o{color:var(--accent);} .dpf2__sub{color:var(--muted);font-size:1rem;line-height:1.8;margin:0 0 26px;} .dpf2__who{display:flex;align-items:center;gap:14px;margin-bottom:28px;} .dpf2__who b{color:var(--ink);font-weight:800;display:block;} .dpf2__who small{color:var(--muted2);display:block;font-weight:600;} .dpf2__stack{display:flex;flex-direction:row-reverse;align-items:center;} .dpf2__stack img{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--card);margin-inline-start:-14px; background:#1a2c4a;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.3);} .dpf2__cta{display:inline-block;background:linear-gradient(120deg,#C2410C,var(--accent));color:#fff; font-weight:800;font-size:1rem;padding:15px 30px;border-radius:14px;text-decoration:none; box-shadow:0 10px 24px rgba(249,115,22,.28);transition:transform .25s ease, box-shadow .25s ease;} .dpf2__cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(249,115,22,.4);} .dpf2__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .dpf2__c{background:#112540;border:1px solid rgba(215,226,234,.10);border-radius:18px;padding:24px; transition:transform .25s ease, border-color .25s ease;} .dpf2__c:hover{transform:translateY(-3px);border-color:rgba(249,115,22,.35);} .dpf2__num{font-size:2.2rem;font-weight:900;color:var(--accent);display:block;line-height:1.1; font-variant-numeric:tabular-nums;letter-spacing:-.5px;direction:ltr;} .dpf2__c small{color:var(--muted);font-size:.9rem;font-weight:600;} /* testimonial cards */ .dpf2__q{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px;overflow:hidden;} .dpf2__quote{position:absolute;top:6px;inset-inline-end:16px;font-size:3.4rem;line-height:1;font-weight:900; color:var(--accent);opacity:.18;pointer-events:none;} .dpf2__qt{color:var(--ink);font-size:.96rem;line-height:1.85;font-weight:600;margin:0;position:relative;} .dpf2__qp{display:flex;align-items:center;gap:10px;margin-top:auto;} .dpf2__qp img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--card);flex:0 0 auto;} .dpf2__qp b{color:var(--ink);font-weight:800;display:block;font-size:.92rem;} .dpf2__qp small{color:var(--muted2);display:block;font-weight:600;font-size:.82rem;} .dpf2__trust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;} /* reveal */ .dpf2 .dpf2__left>*,.dpf2__c{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1);} .dpf2.in .dpf2__left>*,.dpf2.in .dpf2__c{opacity:1;transform:none;} .dpf2.in .dpf2__left>*:nth-child(2){transition-delay:.06s} .dpf2.in .dpf2__left>*:nth-child(3){transition-delay:.12s} .dpf2.in .dpf2__left>*:nth-child(4){transition-delay:.18s} .dpf2.in .dpf2__left>*:nth-child(5){transition-delay:.24s} .dpf2.in .dpf2__c:nth-child(1){transition-delay:.10s} .dpf2.in .dpf2__c:nth-child(2){transition-delay:.18s} .dpf2.in .dpf2__c:nth-child(3){transition-delay:.26s} .dpf2.in .dpf2__c:nth-child(4){transition-delay:.34s} @media(max-width:880px){.dpf2{grid-template-columns:1fr;gap:30px;}} @media(max-width:560px){ .dpf2{padding:24px 20px;border-radius:24px;text-align:center;} .dpf2__eyebrow{margin-inline:auto;} .dpf2__who{flex-direction:column;text-align:center;gap:10px;} .dpf2__left>.rbtn{margin-inline:auto;} .dpf2__cards{grid-template-columns:1fr;} .dpf2__q{text-align:right;} .dpf2__trust{justify-content:center;} } @media(prefers-reduced-motion:reduce){.dpf2 .dpf2__left>*,.dpf2__c{opacity:1!important;transform:none!important;}} /* ===================== PROCESS TIMELINE — Rashad journey ===================== */ .dtl-sec{font-family:'Thmanya Sans',sans-serif;} .dtl__head{text-align:center;max-width:680px;margin:0 auto clamp(48px,6vw,72px);} .dtl__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--accent); background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.26);padding:7px 14px;border-radius:999px;margin-bottom:18px;} .dtl__intro{color:var(--muted);font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.9;margin-top:14px;} .dtl{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(30px,4.5vw,52px);} /* the rail */ .dtl__line{position:absolute;top:18px;bottom:18px;inset-inline-start:auto;right:27px;width:3px; background:rgba(215,226,234,.12);border-radius:3px;overflow:hidden;} .dtl__fill{position:absolute;top:0;left:0;right:0;height:0;border-radius:3px; background:linear-gradient(180deg,var(--accent),#C2410C);box-shadow:0 0 14px rgba(249,115,22,.5); transition:height .2s linear;} .dtl__step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:clamp(18px,2.6vw,30px);align-items:start; opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1);} .dtl__step.in{opacity:1;transform:none;} .dtl__node{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:#0E1B33;border:2px solid rgba(215,226,234,.18);transition:border-color .4s ease, box-shadow .4s ease, background .4s ease;} .dtl__num{font-weight:900;font-size:1.18rem;color:var(--muted);transition:color .4s ease;} .dtl__node.on{border-color:var(--accent);background:linear-gradient(150deg,#1a2c4a,#0E1B33);box-shadow:0 0 0 5px rgba(249,115,22,.12),0 0 22px rgba(249,115,22,.4);} .dtl__node.on .dtl__num{color:var(--accent);} .dtl__card{background:var(--card);border:1px solid rgba(215,226,234,.09);border-radius:20px; padding:clamp(22px,3vw,30px);text-align:right;transition:transform .35s ease, border-color .35s ease;} .dtl__step.in:hover .dtl__card{transform:translateX(-6px);border-color:rgba(249,115,22,.30);} .dtl__phase{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.04em;color:var(--accent); background:rgba(249,115,22,.09);border-radius:6px;padding:4px 10px;margin-bottom:12px;} .dtl__card h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:900;color:#F2F6FB;margin:0 0 10px;} .dtl__card p{color:var(--muted);font-size:1rem;line-height:1.85;margin:0;} .dtl__card em{font-style:normal;color:var(--accent);font-weight:800;} @media(max-width:560px){.dtl__step{grid-template-columns:46px 1fr;}.dtl__line{right:22px;} .dtl__node{width:46px;height:46px;}.dtl__num{font-size:1rem;}} @media(prefers-reduced-motion:reduce){.dtl__step{opacity:1!important;transform:none!important;} .dtl__fill{height:100%!important;}.dtl__node{border-color:var(--accent);}.dtl__num{color:var(--accent);}} /* ===================== FINAL CTA ===================== */ .fcta{font-family:'Thmanya Sans',sans-serif;padding:clamp(40px,7vw,90px) clamp(20px,4vw,48px) clamp(20px,3vw,40px);} .fcta__panel{position:relative;max-width:1120px;margin:0 auto;overflow:hidden;border-radius:32px; background:radial-gradient(120% 140% at 88% 110%,#F97316 0%,#C2410C 24%,#7c2d12 44%,#13243f 70%,#0E1B33 100%); border:1px solid rgba(249,115,22,.30);display:block;min-height:420px; box-shadow:0 30px 80px rgba(0,0,0,.45);} .fcta__glow{position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 100%,rgba(255,180,90,.35),transparent 70%);pointer-events:none;} .fcta__text{position:relative;z-index:2;padding:clamp(34px,5vw,68px);max-width:720px;margin-inline-start:auto;} .fcta__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;color:#FFD9B0; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:999px;margin-bottom:20px;} .fcta__h{font-size:clamp(1.7rem,3.6vw,3rem);font-weight:900;line-height:1.32;color:#fff;margin:0 0 16px;max-width:680px;} .fcta__h .o{color:#FFCF9B;} .fcta__sub{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.85;max-width:560px;margin:0 0 30px;} .fcta__btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px;} .fcta__btn{display:inline-block;font-weight:800;font-size:1.02rem;padding:15px 32px;border-radius:14px;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;} .fcta__btn--primary{background:#fff;color:#C2410C;box-shadow:0 12px 30px rgba(0,0,0,.3);} .fcta__btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.42);} .fcta__btn--ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.4);} .fcta__btn--ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);} .fcta__micro{display:flex;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.9);font-size:.9rem;font-weight:600;} .fcta__micro span{display:inline-flex;align-items:center;gap:7px;} .fcta__micro svg{width:16px;height:16px;color:#7CF0A8;} .fcta__char{position:absolute;z-index:1;bottom:0;top:0;inset-inline-start:clamp(10px,3vw,48px); width:clamp(180px,24%,300px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;} .fcta__char img{width:auto;height:92%;max-width:100%;object-fit:contain;object-position:bottom; filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));} @media(max-width:820px){.fcta__text{max-width:none;}.fcta__char{display:none;}} /* ===================== FOOTER ===================== */ .dfoot{font-family:'Thmanya Sans',sans-serif;background:#0A1730;border-top:1px solid rgba(215,226,234,.08); padding:clamp(48px,6vw,80px) clamp(20px,4vw,48px) 28px;} .dfoot__top{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(36px,5vw,72px); padding-bottom:42px;border-bottom:1px solid rgba(215,226,234,.08);} .dfoot__logo{font-size:1.9rem;font-weight:900;color:var(--accent);margin-bottom:14px;} .dfoot__brand p{color:var(--muted);line-height:1.9;font-size:.98rem;max-width:360px;margin-bottom:22px;} .dfoot__social{display:flex;gap:12px;} .dfoot__social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--muted); background:#112540;border:1px solid rgba(215,226,234,.10);transition:color .25s ease, border-color .25s ease, transform .25s ease;} .dfoot__social a:hover{color:var(--accent);border-color:rgba(249,115,22,.4);transform:translateY(-2px);} .dfoot__social svg{width:19px;height:19px;} .dfoot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .dfoot__col h4{color:#F2F6FB;font-size:1rem;font-weight:800;margin-bottom:16px;} .dfoot__col a{display:block;color:var(--muted);font-size:.95rem;margin-bottom:11px;transition:color .2s ease, padding .2s ease;} .dfoot__col a:hover{color:var(--accent);padding-inline-start:4px;} .dfoot__bar{max-width:1120px;margin:0 auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:14px; justify-content:space-between;align-items:center;color:var(--muted2);font-size:.88rem;} .dfoot__vision{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;} .dfoot__vision svg{width:18px;height:18px;} .dfoot__credit{max-width:1120px;margin:28px auto 0;padding-top:26px;border-top:1px solid rgba(215,226,234,.08); display:flex;flex-flow:row wrap;align-items:center;justify-content:center;gap:14px;text-align:center;} .dfoot__credit-label{color:var(--accent);font-size:.9rem;font-weight:700;letter-spacing:.1em;} .dfoot__credit-logo{display:inline-flex;align-items:center;justify-content:center;padding:11px 26px;border-radius:16px; background:rgba(255,255,255,.035);border:1px solid rgba(215,226,234,.1); transition:transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;} .dfoot__credit-logo img{height:44px;width:auto;display:block; filter:drop-shadow(0 2px 12px rgba(0,0,0,.35));transition:filter .28s ease;} .dfoot__credit-logo:hover{transform:translateY(-3px);background:rgba(249,115,22,.08); border-color:rgba(249,115,22,.4);box-shadow:0 12px 34px rgba(249,115,22,.2);} .dfoot__credit-logo:hover img{filter:drop-shadow(0 5px 18px rgba(249,115,22,.4));} @media(max-width:820px){.dfoot__top{grid-template-columns:1fr;}.dfoot__cols{grid-template-columns:1fr 1fr;}} /* ===================== FINAL CTA — two-path ===================== */ .fcta5{font-family:'Thmanya Sans',sans-serif;padding:clamp(56px,8vw,110px) clamp(20px,4vw,48px) clamp(30px,4vw,56px);text-align:center;} .fcta5 .dwrap{max-width:1000px;margin:0 auto;} .fcta5__h{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:900;line-height:1.35;color:#F2F6FB;margin:0 auto clamp(36px,5vw,52px);max-width:760px;} .fcta5__paths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;} .fcta5__path{background:var(--card);border:1px solid rgba(215,226,234,.10);border-radius:22px;padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,28px); text-align:right;display:flex;flex-direction:column;gap:9px;cursor:pointer; transition:transform .3s cubic-bezier(.16,.84,.44,1),border-color .3s ease,background .3s ease,box-shadow .3s ease; opacity:0;} .fcta5__path:hover{transform:translateY(-6px);border-color:rgba(249,115,22,.45);background:#16294a;box-shadow:0 20px 44px rgba(0,0,0,.4);} .fcta5__ic{width:54px;height:54px;border-radius:15px;background:rgba(249,115,22,.12);display:grid;place-items:center;margin-bottom:6px;transition:background .3s ease;} .fcta5__path:hover .fcta5__ic{background:rgba(249,115,22,.20);} .fcta5__ic svg{width:28px;height:28px;color:var(--accent);} .fcta5__path h3{font-size:1.3rem;font-weight:900;color:#F2F6FB;margin:0;} .fcta5__path p{color:var(--muted);font-size:.96rem;line-height:1.75;margin:0;} .fcta5__go{color:var(--accent);font-weight:800;font-size:.92rem;margin-top:6px;transition:padding .25s ease;} .fcta5__path:hover .fcta5__go{padding-inline-start:5px;} .fcta5__foot{color:var(--muted);font-size:1rem;margin:0;} .fcta5__foot a{color:var(--accent);font-weight:800;} /* staggered reveal */ .fcta5__paths.in .fcta5__path{opacity:1;transform:translateY(0);} .fcta5__path{transform:translateY(34px);} .fcta5__paths.in .fcta5__path:nth-child(1){transition-delay:.05s} .fcta5__paths.in .fcta5__path:nth-child(2){transition-delay:.16s} .fcta5__paths.in .fcta5__path:nth-child(3){transition-delay:.27s} @media(max-width:760px){.fcta5__paths{grid-template-columns:1fr;}} @media(prefers-reduced-motion:reduce){.fcta5__path{opacity:1!important;transform:none!important;}} /* ===================== HERO — Arabic (Thmanyah, RTL, no letter-spacing) ===================== */ .hero[dir="rtl"] .nav a{font-family:'Thmanya Sans',sans-serif;text-transform:none;letter-spacing:0;font-weight:500;} .hero[dir="rtl"] .hero__title{font-family:'Thmanya Sans',sans-serif;text-transform:none;letter-spacing:-0.01em;font-weight:900;line-height:1.12;padding-block:0.08em;} .hero[dir="rtl"] .hero__title-wrap{overflow:visible;} .hero[dir="rtl"] .hero__tagline{font-family:'Thmanya Sans',sans-serif;text-transform:none;letter-spacing:0;font-weight:700;line-height:1.7;max-width:380px;} .hero[dir="rtl"] .hero__cta{font-family:'Thmanya Sans',sans-serif;text-transform:none;letter-spacing:0;font-weight:700;} /* ===================== UNIFIED ORANGE BUTTON (.rbtn) — rashad-face hover ===================== */ .rbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer; border-radius:9999px;color:#fff;font-weight:700;font-family:'Thmanya Sans',sans-serif;white-space:nowrap;text-decoration:none; background:var(--grad-btn);box-shadow:var(--btn-shadow);outline:2px solid #fff;outline-offset:-3px; padding:14px 30px;font-size:1rem;min-height:50px;transition:transform .25s ease, box-shadow .25s ease;} .rbtn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(249,115,22,.42), 4px 4px 12px #C2410C inset;} .rbtn__d,.rbtn__h{display:inline-flex;align-items:center;gap:9px;transition:opacity .25s ease;} .rbtn__h{position:absolute;inset:0;justify-content:center;opacity:0;} .rbtn__h img{width:27px;height:27px;border-radius:50%;object-fit:cover;object-position:50% 11%;background:#fff;border:1.5px solid #fff;flex:none;} /* The rashad-face hover swap is gated behind `.hover-armed` (added to on the first real pointermove — see app.js). This prevents a stale cursor that happens to sit over a button at page load (e.g. after F5) from flashing the avatar layer the instant the preloader clears, then hiding it again as the button's data-fade reveal shifts out from under the cursor. */ .hover-armed .rbtn:hover .rbtn__d{opacity:0;} .hover-armed .rbtn:hover .rbtn__h{opacity:1;} .rbtn--lg{padding:16px 42px;font-size:1.06rem;min-height:58px;min-width:200px;} /* ===================== UNIFIED SECTION TITLES + SUBTITLES ===================== */ .dsec__h2{color:#F2F6FB;} /* was orange — unify all section titles to white */ .dsec__h2 .o,.aud__head h2 .o{color:var(--accent);} .aud__head h2,.fcta5__h{color:#F2F6FB;} /* unified subtitle/intro: one muted color, centered */ .aud__head p,.dtl__intro,.fcta5__foot,.dba-hint{color:var(--muted)!important;text-align:center;margin-left:auto;margin-right:auto;} /* ===================== MARQUEE — section heading ===================== */ .marquee__head{text-align:center;max-width:700px;margin:0 auto clamp(40px,5vw,60px); padding-inline:24px;font-family:'Thmanya Sans',sans-serif;} .marquee__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--accent); background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.26);padding:7px 14px;border-radius:999px;margin-bottom:18px;} .marquee__head h2{color:#F2F6FB;font-weight:900;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.35;margin:0 0 14px;} .marquee__head p{color:var(--muted);font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.9;margin:0;} /* ===================== HERO 3D CHARACTER VIDEO ===================== */ .hero__stage{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center; z-index:10;pointer-events:none;perspective:1200px;} .hero__char{transform-style:preserve-3d;will-change:transform;} .hero__char-float,.hero__char-rotate,.hero__char-breathe{transform-style:preserve-3d;} .hero__char-rotate{will-change:transform;} .hero__video{display:block;height:66vh;width:auto;max-width:94vw;object-fit:contain;background:transparent; filter:drop-shadow(0 28px 46px rgba(0,0,0,.5));} /* WebKit alpha-WebM fallback: the animated transparent WebP mirrors the video's box. Hidden by default; hero-character.js flips html.no-alpha-webm on Apple WebKit. */ .hero__fallback{display:none;height:66vh;width:auto;max-width:94vw;object-fit:contain; filter:drop-shadow(0 28px 46px rgba(0,0,0,.5));} /* WebKit transparent-video via stacked HEVC + WebGL: the canvas mirrors the video's box (aspect-ratio = a single un-stacked frame). Hidden until hero-character.js flips html.no-alpha-webm. The .hero__hevc