:root{ --ink-950:#020617; --ink-900:#050b23; --ink-850:#081234; --ink-800:#0b1a45; --ink-700:#12285f; --gold-600:#5b7fc7; --gold-500:#7ea0e0; --gold-400:#a9c4f2; --gold-300:#d5e4fb; --cream-100:#f4f7ff; --cream-200:#dde6f6; --ink-soft:#c2cfe6; --ink-muted:#8b9bc0; --paper:#eef2fb; --parchment:#e2e9f6; --line-soft:#c8d4ea; --font-display:'Cormorant Garamond','Tajawal',serif; --font-body:'Tajawal',sans-serif; --container:1200px; --r-lg:20px; --r-md:12px; --r-sm:8px; --ease:cubic-bezier(.16,.84,.32,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Keep the viewport scrollbar on the right in every language: the root stays LTR and the content direction is carried by instead. */ html{scroll-behavior:smooth;direction:ltr} [dir="rtl"] body{direction:rtl} body{ font-family:var(--font-body); background:var(--ink-950); color:var(--cream-200); line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} .container{max-width:var(--container);margin:0 auto;padding:0 32px} ::selection{background:var(--gold-500);color:var(--ink-950)} :focus-visible{outline:2px solid var(--gold-400);outline-offset:3px} .grain{ position:fixed;inset:0;pointer-events:none;z-index:999; opacity:.03;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .progress-bar{ position:fixed;top:0;right:0;left:auto;height:2px;width:0; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); z-index:1001;transition:width .1s linear; } .gold-text{color:var(--gold-400)} .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);will-change:opacity,transform} .reveal.in-view{opacity:1;transform:none;will-change:auto} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} .split .word{transform:none!important} } /* ===== Software-rendering fallback (GPU / compositing off) ===== No compositor layers, so blur, mix-blend, and every animated pixel is a full CPU repaint. Keep the palette, drop the moving parts. */ html[data-gpu="off"] .grain{display:none} html[data-gpu="off"] .rail, html[data-gpu="off"] .site-header.scrolled, html[data-gpu="off"] .nav-backdrop.show{-webkit-backdrop-filter:none;backdrop-filter:none} html[data-gpu="off"] .rail{background:rgba(4,9,28,.85)} html[data-gpu="off"] .site-header.scrolled{background:rgba(4,9,28,.95)} html[data-gpu="off"] .nav-backdrop{background:rgba(2,6,20,.74)} html[data-gpu="off"] .hero-particles, html[data-gpu="off"] .rosette{display:none} html[data-gpu="off"] .hero[data-hero-bg] .hero-bg::before, html[data-gpu="off"] .hero[data-hero-bg] .hero-bg::after{animation:none!important} html[data-gpu="off"] .hero[data-hero-bg="aurora"] .hero-bg::before, html[data-gpu="off"] .hero[data-hero-bg="aurora"] .hero-bg::after{filter:none;opacity:.25} html[data-gpu="off"] .chip::after, html[data-gpu="off"] .hero-scroll span{animation:none;opacity:.5} html[data-gpu="off"] .marquee-track{animation:none;transform:none} html[data-gpu="off"] .split .word{transform:none;transition:none} html[data-gpu="off"] .reveal{transition-duration:.35s} /* ===== Universal: skip layout+paint for off-screen sections ===== */ .goals,.program,.partners,.speakers,.site-footer{ content-visibility:auto; contain-intrinsic-size:auto 900px; } /* pause the ticker whenever it is scrolled out of view */ .marquee-track.paused{animation-play-state:paused} .rail{ /* Section-position rail stays on the right edge in every language. */ position:fixed;right:22px;left:auto;top:50%;transform:translateY(-50%); z-index:40;display:flex;flex-direction:column;align-items:center;gap:14px; padding:16px 10px;border-radius:999px; background:rgba(4,9,28,.4);border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px) saturate(1.3); } .rail a{width:18px;height:18px;display:grid;place-items:center} .rail a span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-radius .35s var(--ease)} .rail a.active span{width:7px;height:22px;border-radius:5px;background:var(--gold-500)} @media (max-width:1100px){.rail{display:none}} .site-header{ position:fixed;top:0;left:0;right:0;z-index:900;padding:24px 0; transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease); } .site-header.scrolled{ padding:12px 0;background:rgba(4,9,28,.72); box-shadow:0 10px 34px rgba(0,0,0,.4),0 1px 0 rgba(126,160,224,.16); } @supports (backdrop-filter:blur(1px)){ .site-header.scrolled{background:rgba(4,9,28,.6);backdrop-filter:blur(16px) saturate(1.4)} } /* Header chrome stays physically fixed (logo left, controls right) in both languages, so the language switch never jumps sides. Only the text inside each element follows the document's reading direction. */ .header-inner{display:flex;align-items:center;gap:18px;direction:ltr} [dir="rtl"] .brand-text{direction:rtl} .brand{display:flex;align-items:center;gap:13px} .brand-mark{width:38px;height:38px;opacity:.95} .brand-text{display:grid;gap:1px;line-height:1.3} .brand-text b{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--cream-100)} .brand-text b em{font-style:normal;color:var(--gold-400)} .brand-text small{font-family:var(--font-display);font-style:italic;font-size:.72rem;letter-spacing:.03em;color:var(--ink-muted);direction:ltr;text-align:start} .main-nav{display:flex;align-items:center;gap:32px;margin-inline-start:auto} [dir="rtl"] .main-nav{direction:rtl} .main-nav a{font-size:.92rem;color:var(--ink-soft);position:relative;padding:6px 0;transition:color .25s} .main-nav a:not(.nav-cta)::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;background:var(--gold-500);transition:width .3s var(--ease)} .main-nav a:not(.nav-cta):hover{color:var(--cream-100)} .main-nav a:not(.nav-cta):hover::after{width:100%} .nav-cta{ border:1px solid var(--gold-500);color:var(--gold-300)!important; padding:9px 22px!important;border-radius:var(--r-sm);font-weight:500; transition:background .3s,color .3s,box-shadow .3s; } .nav-cta:hover{background:var(--gold-500);color:var(--ink-950)!important;box-shadow:0 0 26px rgba(126,160,224,.4)} .lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px;margin-inline-start:24px;flex:0 0 auto} .lang-switch .lang-btn{font-family:var(--font-body);font-size:.76rem;font-weight:500;letter-spacing:.02em;line-height:1;padding:7px 14px;border-radius:999px;color:var(--ink-soft);transition:color .25s var(--ease),background .25s var(--ease)} .lang-switch .lang-btn[aria-pressed="true"]{background:var(--gold-500);color:var(--ink-950);font-weight:700} .lang-switch .lang-btn:not([aria-pressed="true"]):hover{color:var(--cream-100)} .nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;height:20px;justify-content:center;z-index:950;position:relative} .nav-toggle span{display:block;height:2px;width:100%;background:var(--cream-100);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-backdrop{position:fixed;inset:0;background:rgba(2,6,20,.55);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:890} .nav-backdrop.show{opacity:1;pointer-events:auto} @supports (backdrop-filter:blur(1px)){.nav-backdrop.show{backdrop-filter:blur(3px)}} body.nav-locked{overflow:hidden} .hero{ position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; padding:150px 0 110px;overflow:hidden;isolation:isolate; background:radial-gradient(120% 100% at 50% 40%,#1c3f86 0%,#0a1b48 46%,#02050f 100%); color:#fff; } .hero-particles{position:absolute;inset:0;z-index:1;opacity:.75} .hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none} .hero-glow{ position:absolute;inset:auto 0 -12% 0;height:56%; background:radial-gradient(ellipse 62% 100% at 50% 100%,rgba(126,160,224,.16),transparent 70%); } @keyframes spin{to{transform:rotate(360deg)}} /* ===== Hero background variants · switch via data-hero-bg on .hero ===== constellation (default) · girih · dawn · contour · aurora */ .hero[data-hero-bg="girih"] .rosette, .hero[data-hero-bg="dawn"] .rosette, .hero[data-hero-bg="contour"] .rosette, .hero[data-hero-bg="aurora"] .rosette{display:none} .hero[data-hero-bg="dawn"] .hero-particles, .hero[data-hero-bg="aurora"] .hero-particles{display:none} /* girih · Islamic 8-point star tessellation, slow diagonal drift */ .hero[data-hero-bg="girih"] .hero-bg::before{ content:"";position:absolute;inset:-25%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a9c4f2' stroke-width='0.9'%3E%3Cpath d='M32 3 L40 24 L61 32 L40 40 L32 61 L24 40 L3 32 L24 24 Z'/%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3C/g%3E%3C/svg%3E"); background-size:132px 132px;opacity:.16; -webkit-mask-image:radial-gradient(ellipse 68% 66% at 50% 44%,#000 28%,transparent 78%); mask-image:radial-gradient(ellipse 68% 66% at 50% 44%,#000 28%,transparent 78%); animation:girihDrift 70s linear infinite; } @keyframes girihDrift{to{transform:translate3d(-132px,-132px,0)}} /* dawn · light rays rising from the horizon (fits "فرص الغد" / solstice) */ .hero[data-hero-bg="dawn"]{background:radial-gradient(120% 82% at 50% 100%,#16357e 0%,var(--ink-950) 55%,#02050f 100%)} .hero[data-hero-bg="dawn"] .hero-bg::before{ content:"";position:absolute;inset:0; background:conic-gradient(from 180deg at 50% 112%, transparent 0deg,rgba(169,196,242,.13) 10deg,transparent 22deg, rgba(213,228,251,.09) 36deg,transparent 50deg, rgba(169,196,242,.13) 64deg,transparent 78deg, rgba(213,228,251,.09) 92deg,transparent 106deg, rgba(169,196,242,.13) 120deg,transparent 134deg); -webkit-mask-image:linear-gradient(to top,#000,transparent 72%); mask-image:linear-gradient(to top,#000,transparent 72%); animation:dawnSweep 22s ease-in-out infinite alternate; } @keyframes dawnSweep{from{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.06)}} .hero[data-hero-bg="dawn"] .hero-glow{background:radial-gradient(ellipse 72% 100% at 50% 100%,rgba(213,228,251,.22),transparent 72%)} /* contour · offset topographic rings (geography / reconstruction) */ .hero[data-hero-bg="contour"] .hero-bg::before{ content:"";position:absolute;inset:-12%; background: repeating-radial-gradient(ellipse 78% 58% at 32% 42%,transparent 0 37px,rgba(126,160,224,.08) 37px 38px), repeating-radial-gradient(ellipse 70% 88% at 74% 66%,transparent 0 45px,rgba(183,199,230,.055) 45px 46px); -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 18%,transparent 80%); mask-image:radial-gradient(circle at 50% 45%,#000 18%,transparent 80%); animation:contourFloat 44s ease-in-out infinite alternate; } @keyframes contourFloat{to{transform:translateY(-26px)}} /* aurora · soft blurred gold + teal mesh, no geometry */ .hero[data-hero-bg="aurora"] .hero-bg::before, .hero[data-hero-bg="aurora"] .hero-bg::after{ content:"";position:absolute;border-radius:50%;filter:blur(80px); } .hero[data-hero-bg="aurora"] .hero-bg::before{ width:52vw;height:52vw;inset-inline-start:-10vw;top:-14vw;opacity:.5; background:radial-gradient(circle,rgba(126,160,224,.30),transparent 68%); animation:auroraA 26s ease-in-out infinite alternate; } .hero[data-hero-bg="aurora"] .hero-bg::after{ width:46vw;height:46vw;inset-inline-end:-12vw;bottom:-16vw;opacity:.65; background:radial-gradient(circle,rgba(26,52,120,.75),transparent 70%); animation:auroraB 30s ease-in-out infinite alternate; } @keyframes auroraA{to{transform:translate(12vw,8vw) scale(1.15)}} @keyframes auroraB{to{transform:translate(-10vw,-6vw) scale(1.1)}} .hero-content{position:relative;z-index:3;text-align:center;max-width:860px;margin:0 auto} .eyebrow{color:var(--gold-400);font-size:.85rem;letter-spacing:.06em;margin-bottom:24px;display:inline-block} .hero-title{ font-family:var(--font-display);font-weight:700; font-size:clamp(2.9rem,6.4vw,5.2rem);line-height:1.14;letter-spacing:-.01em; color:#f4f7ff;margin-bottom:18px; } .split .line{display:block;overflow:hidden} .split .word{display:inline-block;transform:translateY(110%) rotate(4deg);transition:transform 1.1s var(--ease)} .split.ready .word{transform:none} .hero-slogan{ font-family:var(--font-display);font-style:italic;font-weight:500; color:var(--gold-400);font-size:clamp(1.2rem,2.1vw,1.7rem);margin-bottom:26px; } .hero-founder{ color:var(--ink-soft);font-size:clamp(.82rem,1.1vw,.95rem);letter-spacing:.01em; margin:-8px auto 26px;max-width:640px;line-height:1.7; } .hero-founder strong{color:var(--gold-300);font-weight:700} .event-meta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px} .chip{ min-width:200px;padding:11px 20px;border:1px solid rgba(255,255,255,.18); color:#eaf0fb;font-size:.85rem;letter-spacing:.01em;position:relative;overflow:hidden; } .chip::after{ content:'';position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(105deg,transparent,rgba(169,196,242,.22),transparent); animation:shimmer 5s var(--ease) infinite; } @keyframes shimmer{0%,100%{transform:translateX(-120%)}45%,55%{transform:translateX(120%)}} .hero-desc{color:#c3d0e8;font-size:clamp(1rem,1.3vw,1.12rem);max-width:640px;margin:0 auto 40px;line-height:1.9} .hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:var(--r-sm); font-size:.98rem;font-weight:500;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s; } .btn svg{transform:scaleX(-1)} .btn-primary{background:linear-gradient(115deg,var(--gold-400),var(--gold-500));color:var(--ink-950);box-shadow:0 10px 26px rgba(126,160,224,.24);font-weight:700} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(126,160,224,.32)} .btn-primary:active{transform:translateY(0);box-shadow:0 8px 20px rgba(126,160,224,.22)} .btn-ghost{border:1px solid rgba(248,244,236,.28);color:var(--cream-100)} .btn-ghost:hover{background:rgba(248,244,236,.06);border-color:rgba(248,244,236,.55)} .hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3} .hero-scroll span{width:1px;height:36px;background:linear-gradient(var(--gold-500),transparent);animation:scrollLine 2s ease-in-out infinite} .hero-scroll p{font-size:.72rem;color:rgba(255,255,255,.45);letter-spacing:.1em} @keyframes scrollLine{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} .marquee{overflow:hidden;background:var(--ink-900);border-top:1px solid rgba(126,160,224,.16);border-bottom:1px solid rgba(126,160,224,.16);padding:17px 0} .marquee-track{display:flex;width:max-content;animation:marquee 36s linear infinite} .marquee-track span{font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:rgba(244,241,232,.5);padding:0 22px;white-space:nowrap} .marquee-track i{width:6px;height:6px;border-radius:50%;background:var(--gold-500);opacity:.7;align-self:center} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} section{position:relative;padding:clamp(90px,11vw,150px) 0} .section-tag{color:var(--gold-400);font-size:.82rem;letter-spacing:.09em;margin-bottom:16px;display:inline-block;position:relative;padding-inline-start:26px} .section-tag::before{content:'';position:absolute;inset-inline-start:0;top:50%;width:16px;height:1px;background:var(--gold-500)} .section-tag.light{color:var(--gold-300)} .section-title{font-family:var(--font-display);font-weight:700;color:var(--cream-100);font-size:clamp(2rem,4vw,3.2rem);line-height:1.22;letter-spacing:-.01em} .section-title.light{color:#f4f7ff} .section-note{color:var(--ink-muted);max-width:56ch;margin-top:16px;line-height:1.85} .section-note.light{color:rgba(248,244,236,.62)} .section-head{max-width:760px;margin-bottom:20px} .section-head.center{text-align:center;margin-inline:auto;margin-bottom:60px} .section-head.center .section-note{margin-inline:auto} .section-head.center .section-tag{padding-inline-start:0} .section-head.center .section-tag::before{display:none} .about{background:var(--ink-950);overflow:hidden} .about-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} .about-copy .lead{font-size:1.15rem;color:var(--cream-200);margin-bottom:26px;line-height:1.9} .pull-quote{ position:relative;margin:0 0 30px;padding-inline-start:24px; border-inline-start:2px solid rgba(126,160,224,.4); font-family:var(--font-display);font-style:italic;font-weight:500; font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.5;color:var(--gold-400); } .pull-quote .pq-mark{font-size:1.4em;line-height:0;vertical-align:-.3em;margin-inline-end:4px;color:var(--gold-500)} .about-stats{display:flex;gap:36px;margin-top:6px;padding-top:34px;border-top:1px solid rgba(126,160,224,.16);flex-wrap:wrap} .stat{display:flex;flex-direction:column;gap:4px} .stat-num{font-family:var(--font-display);font-size:2.3rem;color:var(--gold-400);font-weight:600} .stat-label{font-size:.82rem;color:var(--ink-muted)} .about-showcase{display:flex;flex-direction:column;align-items:center;gap:22px} .showcase-frame{ position:relative;width:100%;max-width:360px;aspect-ratio:3/4; border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(126,160,224,.28); box-shadow:0 34px 80px rgba(0,0,0,.5); } .embla{width:100%;height:100%;overflow:hidden} .embla__container{display:flex;height:100%} .embla__slide{flex:0 0 100%;min-width:0;height:100%} .embla__slide img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none} .showcase-frame-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 70px rgba(4,9,28,.55)} /* Carousel runs LTR in both languages so slide order and dot order always agree. */ .showcase-dots{direction:ltr;display:flex;justify-content:center;gap:8px} .showcase-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(248,244,236,.2);cursor:pointer;transition:.3s} .showcase-dot.active{background:var(--gold-500);width:22px;border-radius:5px} .goals{background:linear-gradient(180deg,var(--ink-950),var(--ink-900) 45%,var(--ink-800))} .goal-list{margin-top:60px;border-top:1px solid rgba(126,160,224,.16)} .goal-list li{ display:grid;grid-template-columns:64px minmax(220px,.8fr) minmax(300px,1.2fr); align-items:start;gap:32px;padding:40px 0; border-bottom:1px solid rgba(126,160,224,.16); transition:transform .35s var(--ease); } .goal-list li:hover{transform:translateX(-8px)} .goal-numeral{font-family:var(--font-display);font-style:italic;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1;color:var(--gold-500);opacity:.72;transition:opacity .3s} .goal-list li:hover .goal-numeral{opacity:1} .goal-list h3{font-family:var(--font-display);font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600;color:var(--cream-100);line-height:1.4} .goal-list p{max-width:60ch;color:var(--ink-muted);font-size:.98rem;line-height:1.85} .program{background:linear-gradient(180deg,var(--ink-800),var(--ink-950) 72%)} .day-timeline{display:flex;align-items:center;margin:44px 0 28px} .day-timeline .node{width:8px;height:8px;border-radius:50%;background:var(--gold-500);flex:0 0 auto} .day-timeline .line{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-500),rgba(126,160,224,.2))} .day-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(126,160,224,.16)} .day-grid article{ display:flex;flex-direction:column;min-height:520px; padding:clamp(32px,4vw,56px);transition:background .35s var(--ease); } .day-grid .private-day{background:var(--ink-900)} .day-grid .public-day{background:var(--ink-950)} .day-grid header{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid rgba(126,160,224,.35)} .day-grid .day-icon{ display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%; color:var(--gold-500);border:1px solid rgba(126,160,224,.4); } .day-grid .day-icon svg{width:18px;height:18px} .day-grid .day-numeral{font-family:var(--font-display);font-style:italic;color:var(--ink-muted);font-size:.9rem} .day-grid header b{margin-inline-start:auto;font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1.8vw,1.55rem);color:var(--cream-100)} .day-grid article > p{margin:34px 0 24px;color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.85} .day-grid ul{margin:0;padding:0;list-style:none} .day-grid li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.94rem;color:var(--ink-soft)} .day-grid small{margin-top:auto;padding-top:26px;color:var(--ink-muted);font-size:.8rem;font-family:var(--font-display);font-style:italic} .partners{background:var(--parchment);color:var(--ink-800)} .partners .section-title{color:#18243f} .partners .section-tag{color:var(--gold-600)} .partners .section-tag::before{background:var(--gold-600)} .partners .section-note{color:#5a6884} .partners-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;max-width:820px;margin:0 auto} .partner-card{ flex:1 1 300px;max-width:380px;margin:0; display:flex;flex-direction:column;align-items:center;gap:20px; padding:38px 34px 30px;border-radius:var(--r-md); background:#fff;border:1px solid rgba(23,36,63,.1); box-shadow:0 18px 46px rgba(23,36,63,.1); } .partner-card--founder{border-color:rgba(91,127,199,.45);box-shadow:0 18px 46px rgba(91,127,199,.22)} .partner-card img{width:100%;height:118px;object-fit:contain} .partner-card figcaption{ text-align:center;font-family:var(--font-display);font-weight:600; font-size:1.05rem;color:#18243f;line-height:1.4; } .partner-card figcaption .pc-sub{ display:block;margin-top:4px;font-family:var(--font-body);font-weight:400; font-size:.8rem;color:#5a6884;letter-spacing:.02em; } .placeholder-note{text-align:center;color:var(--ink-muted);font-size:.85rem;margin-top:28px;font-family:var(--font-display);font-style:italic} .partners .placeholder-note{color:#6a7488} .speakers{background:linear-gradient(180deg,var(--ink-950) 30%,var(--ink-800))} .honor{background:linear-gradient(180deg,var(--ink-800) 0%,var(--ink-950))} .honor + .speakers{background:linear-gradient(180deg,var(--ink-950),var(--ink-800))} .honor .speakers-grid{grid-template-columns:repeat(3,1fr);max-width:760px;margin-inline:auto} .speakers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .speaker-slot{border-radius:var(--r-md);border:1px solid rgba(126,160,224,.14);background:rgba(26,52,120,.24);padding:30px;display:flex;flex-direction:column;align-items:center;gap:16px} .speaker-avatar{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(126,160,224,.25),rgba(26,52,120,.4));border:1px solid rgba(126,160,224,.25)} .speaker-slot::after{content:'قريباً';color:var(--ink-muted);font-size:.85rem} .register{background:linear-gradient(180deg,var(--ink-800),var(--ink-950) 72%);overflow:hidden} .register-bg{position:absolute;inset:0;pointer-events:none} .register-mark{position:absolute;opacity:.04} .register-mark.m1{width:420px;top:-140px;left:-100px} .register-mark.m2{width:340px;bottom:-120px;right:-80px} .register-inner{position:relative;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:6vw;align-items:start} .register-title{position:sticky;top:120px} .register-title img{width:70px;height:70px;object-fit:contain;margin-bottom:28px;opacity:.9} .register-title .section-title{margin-bottom:0} .register-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .reg-card{ position:relative;background:rgba(4,9,28,.5);border:1px solid rgba(126,160,224,.18); border-radius:var(--r-md);padding:30px 26px 58px;transition:.4s var(--ease);overflow:hidden; } .reg-card::before{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(160deg,rgba(126,160,224,.12),transparent 60%);transition:.4s} .reg-card:hover{transform:translateY(-6px);border-color:var(--gold-500);box-shadow:0 24px 54px rgba(0,0,0,.4)} .reg-card:hover::before{opacity:1} .reg-icon{width:46px;height:46px;border-radius:12px;background:rgba(126,160,224,.12);color:var(--gold-400);display:flex;align-items:center;justify-content:center;margin-bottom:20px} .reg-icon svg{width:22px;height:22px} .reg-card h3{font-family:var(--font-display);font-size:1.2rem;color:var(--cream-100);margin-bottom:10px;font-weight:600} .reg-card p{color:var(--ink-muted);font-size:.9rem} .reg-arrow{position:absolute;bottom:24px;inset-inline-end:26px;color:var(--gold-400);font-size:1.2rem;transition:transform .35s var(--ease)} .reg-card:hover .reg-arrow{transform:translateX(-6px)} /* ===== Latin / LTR mode (Turkish) ===== */ [dir="ltr"] .btn svg{transform:none} [dir="ltr"] .goal-list li:hover{transform:translateX(8px)} [dir="ltr"] .reg-card:hover .reg-arrow{transform:translateX(6px)} [dir="ltr"] .speaker-slot::after{content:"Yakında"} .site-footer{background:var(--ink-900);padding:88px 0 36px;position:relative} .site-footer::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(126,160,224,.5) 50%,transparent)} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:56px} .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .footer-mark{width:40px;height:40px;opacity:.85;margin-bottom:6px} .footer-title{font-family:var(--font-display);color:var(--cream-100);font-size:1.1rem;font-weight:600} .footer-sub{color:var(--ink-muted);font-family:var(--font-display);font-style:italic;font-size:.82rem} .footer-tagline{margin-top:6px;max-width:32ch;color:var(--ink-muted);font-size:.9rem;line-height:1.8} .footer-founder{margin-top:12px;color:var(--gold-300);font-size:.82rem;font-weight:600;letter-spacing:.02em} .footer-links{display:flex;flex-direction:column;gap:13px} .footer-col-title{color:var(--gold-400);font-size:.72rem;font-weight:700;letter-spacing:.08em;margin-bottom:2px} .footer-links a{color:var(--ink-soft);font-size:.9rem;transition:color .2s} .footer-links a:hover{color:#fff} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:var(--ink-muted);font-size:.78rem} .footer-bottom a{border-bottom:1px solid rgba(126,160,224,.4);color:var(--ink-soft)} @media (max-width:980px){ .main-nav{ position:fixed;inset:0 0 0 auto;width:min(300px,82vw);height:100dvh; background:var(--ink-900);flex-direction:column;justify-content:flex-start;align-items:stretch; padding:calc(env(safe-area-inset-top) + 96px) 32px 40px;gap:6px; transform:translateX(100%);transition:transform .4s var(--ease); border-inline-start:1px solid rgba(126,160,224,.18);box-shadow:-24px 0 60px rgba(0,0,0,.4); overflow-y:auto; } .main-nav.open{transform:translateX(0)} .main-nav a{font-size:1.05rem;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.06)} .main-nav a:not(.nav-cta)::after{display:none} .main-nav .nav-cta{margin-top:20px;text-align:center;border-bottom:1px solid var(--gold-500);padding:14px 22px!important} .nav-toggle{display:flex} .lang-switch{margin-inline-start:auto;margin-inline-end:16px} .about-grid{grid-template-columns:1fr;gap:50px} .goal-list li{grid-template-columns:44px 1fr;gap:16px} .goal-list p{grid-column:2} .day-grid{grid-template-columns:1fr} .day-grid article{min-height:0} .partner-card{padding:30px 26px 24px} .speakers-grid{grid-template-columns:repeat(2,1fr)} .register-inner{grid-template-columns:1fr;gap:36px} .register-title{position:static} .footer-grid{grid-template-columns:1fr;gap:32px} } @media (max-width:560px){ .container{padding:0 22px} .partners-logos{gap:20px} .register-grid{grid-template-columns:1fr} .about-stats{gap:22px} .chip{min-width:0;flex:1} .lang-switch{margin-inline-end:12px} .lang-switch .lang-btn{padding:6px 10px;font-size:.72rem} }