/* ========================================================================== Daliloucom — core stylesheet Single dark visual world. Works for LTR (English) and RTL (Arabic) through logical properties. ========================================================================== */ :root{ /* brand */ --v:#6D28F0; /* violet, from the logo */ --v-lo:#8B5CF6; --m:#22E3C4; /* mint */ --m-lo:#5FF0D8; --grad:linear-gradient(90deg,var(--v) 0%,#3B7BF0 52%,var(--m) 100%); --grad-soft:linear-gradient(90deg,rgba(109,40,240,.52) 0%,rgba(43,110,232,.44) 52%,rgba(34,227,196,.32) 100%); /* ground */ --bg:#000; --panel:#08090C; --panel-2:#0D0F14; --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.26); /* ink */ --text:#FFF; --muted:#B4BAC5; --dim:#79808D; --ok:#22E3C4; --r:24px; --r-sm:12px; --maxw:1200px; --font-latin:'Space Grotesk','Trebuchet MS',system-ui,sans-serif; --font-ar:'IBM Plex Sans Arabic',system-ui,sans-serif; /* Entrance offset: content arrives from the reading side. LTR reads left-to-right, so it starts to the left (negative). */ --slide-in:-42px; --slide-in-hero:-46px; } *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth; /* `clip` contains the sideways entrance without creating a scroll container, so it cannot interfere with touch scrolling or position:fixed on iOS. Older engines fall back to the `hidden` on below. */ overflow-x:clip; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-latin); font-weight:300; font-size:16px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; } body[dir="rtl"]{ font-family:var(--font-ar);font-weight:400;line-height:1.95; /* RTL reads right-to-left, so content arrives from the right */ --slide-in:42px; --slide-in-hero:46px; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ---------- Display type ---------- */ h1,h2,h3,h4{ font-family:var(--font-latin); font-weight:700; text-transform:uppercase; line-height:1.1; letter-spacing:-.005em; margin:0 0 .55em; text-wrap:balance; } body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3,body[dir="rtl"] h4{ font-family:var(--font-ar); text-transform:none; letter-spacing:0; line-height:1.62; } body[dir="rtl"] h3,body[dir="rtl"] h4{line-height:1.45} h1{font-size:clamp(2.15rem,5.4vw,3.85rem)} h2{font-size:clamp(1.75rem,3.9vw,2.9rem)} h3{font-size:clamp(1.05rem,1.7vw,1.22rem)} p{margin:0 0 1.1em} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;position:relative;z-index:1} /* A grid or flex item defaults to min-width:auto, so it refuses to shrink below its longest unbreakable child (a nowrap button label, for instance) and pushes the row wider than the screen. Letting these tracks shrink changes nothing while there is room; it only matters on very narrow phones. */ .grid > *,.split > *,.hero-grid > *,.team-grid > *, .price-grid > *,.steps > *,.stats > *,.foot-grid > *,.hero-cta > *{min-width:0} /* ---------- Ambient ---------- */ .bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#000} .grid-fx{display:none} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(0,0,0,.86); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:border-color .3s; } .site-header.scrolled{border-bottom-color:var(--line)} .nav{display:flex;align-items:center;gap:16px;height:78px} .brand{display:flex;align-items:center;gap:10px;flex-shrink:0} .brand img{height:34px;width:auto} .logo-text{font-family:var(--font-latin);font-weight:700;font-size:1.2rem;letter-spacing:-.02em} .nav-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto} .nav-links a{ padding:10px 14px;font-size:.79rem;font-weight:500; text-transform:uppercase;letter-spacing:.11em; color:var(--muted);transition:color .2s;white-space:nowrap;position:relative; } body[dir="rtl"] .nav-links a{text-transform:none;letter-spacing:0;font-size:.93rem} .nav-links a:hover{color:var(--text)} .nav-links a.active{color:var(--text)} .nav-links a.active::after{ content:"";position:absolute;inset-inline:14px;bottom:2px;height:2px;background:var(--grad); } .nav-actions{display:flex;align-items:center;gap:12px;margin-inline-start:16px} /* ---------- Language switcher ---------- Flags are drawn inline rather than written as emoji: Windows ships no flag glyphs, so "🇺🇸" renders there as the bare letters "US" in every browser. */ .lang{position:relative} .lang-btn{ display:inline-flex;align-items:center;gap:9px; padding:8px 12px;border-radius:99px;cursor:pointer; background:rgba(255,255,255,.05);border:1px solid var(--line); color:var(--text);font-family:inherit;font-size:.82rem;font-weight:600; letter-spacing:.02em;line-height:1;transition:border-color .2s,background .2s; } .lang-btn:hover{border-color:var(--line-2);background:rgba(255,255,255,.09)} .lang-name{white-space:nowrap} .flg{ width:20px;height:14px;flex-shrink:0;display:block; border-radius:3px;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.18); } .lang-caret{ width:0;height:0;flex-shrink:0; border-inline:4px solid transparent;border-top:5px solid var(--dim); transition:transform .2s; } .lang.open .lang-caret{transform:rotate(180deg)} .lang-menu{ position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:80; min-width:176px;padding:6px; background:#0A0B10;border:1px solid var(--line);border-radius:14px; box-shadow:0 22px 48px -16px rgba(0,0,0,.9); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; } .lang.open .lang-menu{opacity:1;visibility:visible;transform:none} .lang-menu a{ display:flex;align-items:center;gap:11px; padding:10px 12px;border-radius:9px; font-size:.9rem;font-weight:500;color:var(--muted); transition:background .18s,color .18s; } .lang-menu a:hover{background:rgba(255,255,255,.07);color:var(--text)} .lang-menu a.is-current{ background:linear-gradient(90deg,rgba(109,40,240,.28),rgba(34,227,196,.14)); color:var(--text);font-weight:700; } body[dir="rtl"] .lang-btn,body[dir="rtl"] .lang-menu a{font-size:.92rem;letter-spacing:0} /* On a narrow phone the header runs out of room, so the trigger drops to the flag alone. The menu still names both languages in full. */ @media (max-width:520px){ .lang-name{display:none} .lang-btn{padding:8px 10px;gap:6px} } @media (max-width:360px){ .brand img{height:30px} .logo-text{font-size:1.02rem} .nav-actions{gap:8px;margin-inline-start:10px} } .burger{ display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:2px; background:transparent;cursor:pointer;padding:0; align-items:center;justify-content:center;flex-direction:column;gap:5px; } .burger span{display:block;width:18px;height:2px;background:var(--text);transition:.25s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:14px;overflow:visible; padding:13px 22px;border-radius:99px; font-family:inherit;font-size:.86rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em; border:1px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap; position:relative; } body[dir="rtl"] .btn{text-transform:none;letter-spacing:0;font-size:.95rem} .btn::after{ content:"";width:38px;height:38px;border-radius:11px;flex-shrink:0; margin-inline-end:-14px; background:var(--m) center/13px 13px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); transition:transform .25s; } body[dir="rtl"] .btn::after{transform:scaleX(-1)} .btn:hover::after{transform:translateX(3px)} body[dir="rtl"] .btn:hover::after{transform:scaleX(-1) translateX(3px)} .btn.no-arrow::after{display:none} .btn-primary{background:var(--grad);color:#fff} .btn-primary:hover{filter:brightness(1.12)} .btn-primary::after{background-color:#000} .btn-primary::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); } .btn-ghost{ background:#000;color:var(--text); border:1px solid transparent; background-image:linear-gradient(#000,#000),var(--grad); background-origin:border-box;background-clip:padding-box,border-box; } .btn-ghost:hover{background-image:linear-gradient(#0B0D12,#0B0D12),var(--grad)} .btn-wa{background:#25D366;color:#03230F} .btn-wa::after{background-color:#03230F;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325D366' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")} .btn-lg{padding:16px 26px;font-size:.92rem} .btn-block{width:100%} .btn-block::after,.hero-cta .btn::after{margin-inline-end:0} @media(max-width:600px){.btn::after{margin-inline-end:0}} /* On the narrowest phones a long uppercase label cannot fit on one line; let it wrap rather than force the whole row off the screen. */ @media(max-width:400px){ .btn{white-space:normal;text-align:start} .btn-lg{padding:15px 20px} } /* ---------- Sections ---------- */ section{padding:clamp(64px,9vw,116px) 0;position:relative} .sec-head{max-width:720px;margin-bottom:56px} .sec-head.center{margin-inline:auto;text-align:center} /* Gradient chip — the recurring label device */ .eyebrow,.chip{ display:inline-block; padding:6px 14px; font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:#fff;background:var(--grad-soft); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); margin-bottom:22px;line-height:1.6; } body[dir="rtl"] .eyebrow,body[dir="rtl"] .chip{ text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:600; } .eyebrow .dot{display:none} /* Highlight box behind words inside a heading. Deliberately SHORTER than the capitals: the letters overflow the top, the block sits on the baseline. */ .grad{ position:relative;display:inline-block;isolation:isolate; color:#fff;padding:0;line-height:1.1; } .grad::before{ content:"";position:absolute;z-index:-1; inset-inline:-.10em; /* Offsets are measured from the real glyphs at runtime (main.js) so the gap above and below the letters is identical in any font. */ top:var(--hl-top,.29em);bottom:var(--hl-bottom,.235em); background:var(--grad-soft); border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } body[dir="rtl"] .grad{line-height:1.62} body[dir="rtl"] .grad::before{top:var(--hl-top,.56em);bottom:var(--hl-bottom,.495em);inset-inline:-.08em} /* ---------- Hero ---------- */ .hero{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(52px,7vw,92px)} .hero h1{margin-bottom:26px} .hero-sub{color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);max-width:600px;margin-bottom:34px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px} .hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:46px;align-items:center;margin-bottom:56px} .hero-grid .hero-cta{margin-bottom:0} .hero-grid h1{font-size:clamp(1.42rem,3.5vw,2.7rem);text-wrap:normal} /* ---------- Hero photo background ---------- Two stacked layers cross-fade into each other. Each one also drifts very slowly outward (a "Ken Burns" zoom-out) so the picture never looks frozen. The photograph puts the tower on one side and clear sky on the other, so on RTL pages the layer is mirrored — otherwise the Arabic headline, which sits on the right, would land on top of the tower. */ .hero-photo{ position:relative; min-height:clamp(560px,78vh,760px); display:flex;align-items:center; padding-top:clamp(56px,7vw,92px); padding-bottom:clamp(40px,5vw,64px); isolation:isolate; } .hero-photo > .container{width:100%} .hero-photo .hero-grid{margin-bottom:clamp(34px,4vw,48px)} /* The mirror lives on the wrapper, so the zoom keyframes below stay a plain scale() and never need an RTL duplicate that could outrank them. */ .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} body[dir="rtl"] .hero-bg{transform:scaleX(-1)} .hero-slide{ position:absolute;inset:0; background-image:var(--img-xs); background-size:cover; background-position:50% 50%; opacity:0; transition:opacity 1.5s ease; transform-origin:50% 50%; will-change:opacity,transform; } .hero-slide.is-on{opacity:1} @media (min-width:700px){ .hero-slide{background-image:var(--img-sm)} } @media (min-width:1300px){ .hero-slide{background-image:var(--img)} } /* The drift runs only while the layer is the visible one. */ html.js .hero-slide.is-on{animation:heroDrift 15s cubic-bezier(.2,.5,.25,1) forwards} @keyframes heroDrift{ from{transform:scale(1.13)} to{transform:scale(1)} } /* Readability: the headline sits over the darkest part of the picture, and the section still has to fade into the black page below it. */ /* The veil sits inside .hero-bg, so the RTL mirror on the wrapper flips this side-to-side gradient along with the photo. One definition covers both. */ .hero-veil{ position:absolute;inset:0; background: linear-gradient(to bottom,rgba(0,0,0,.66) 0%,rgba(0,0,0,.2) 24%,rgba(0,0,0,.3) 60%,#000 100%), linear-gradient(to right,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 36%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.28) 100%); } /* One column, text only — the photograph is the visual now. */ .hero-grid-solo{grid-template-columns:minmax(0,1fr)} .hero-grid-solo > div{max-width:680px} .hero-grid-solo h1{font-size:clamp(2rem,4.6vw,3.4rem)} .hero-photo .hero-sub{max-width:560px} .hero-photo .stats{border-bottom:none} @media (max-width:700px){ .hero-photo{min-height:0;padding-bottom:clamp(32px,6vw,48px)} /* On a phone the frame is much narrower than the photo, so pull the crop towards the tower instead of cutting through the empty sky. */ .hero-slide{background-position:74% 50%} /* The wrapper is already mirrored on RTL, so one rule covers both. */ .hero-veil,body[dir="rtl"] .hero-veil{ background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,.72) 68%,#000 100%); } } /* Stats strip */ .stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .stat{padding:26px 24px;border-inline-end:1px solid var(--line)} .stat:last-child{border-inline-end:none} .stat .num{ font-family:var(--font-latin);font-weight:700;text-transform:uppercase; font-size:1.6rem;line-height:1.15; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; } body[dir="rtl"] .stat .num{font-family:var(--font-ar);text-transform:none;font-size:1.4rem} .stat .lbl{color:var(--dim);font-size:.85rem;margin-top:6px} /* ---------- Browser mockup ---------- */ .mockup{ position:relative;border-radius:14px;overflow:hidden; border:1px solid var(--line);background:#06070A; box-shadow:0 50px 100px -50px #000,0 0 90px -50px var(--v); transform:perspective(1500px) rotateY(-7deg) rotateX(3deg);transition:transform .5s ease; } body[dir="rtl"] .mockup{transform:perspective(1500px) rotateY(7deg) rotateX(3deg)} .mockup:hover,body[dir="rtl"] .mockup:hover{transform:perspective(1500px) rotateY(0) rotateX(0)} .mockup-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0E1016;border-bottom:1px solid var(--line)} .mockup-bar i{width:9px;height:9px;border-radius:50%;background:#2A2F3C;display:block} .mockup-url{ flex:1;margin-inline-start:8px;background:#05060A;border-radius:5px;padding:5px 11px; font-size:.71rem;color:var(--dim);font-family:var(--font-latin);direction:ltr;text-align:start; } .mockup-body{padding:20px 18px 24px} .mk-nav{display:flex;align-items:center;gap:8px;margin-bottom:18px} .mk-logo{width:22px;height:22px;background:var(--grad)} .mk-nav .l{height:6px;background:rgba(255,255,255,.14)} .mk-hero{padding:20px 18px;margin-bottom:14px;background:var(--grad-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .mk-hero .t{height:11px;width:78%;background:rgba(255,255,255,.5);margin-bottom:9px} .mk-hero .t.s{width:52%;background:rgba(255,255,255,.26);height:8px} .mk-btn{height:26px;width:104px;margin-top:14px;border-radius:99px;background:#fff} .mk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .mk-card{border:1px solid var(--line);padding:12px 10px} .mk-card .i{width:18px;height:18px;background:var(--m);opacity:.7;margin-bottom:9px} .mk-card .l{height:5px;background:rgba(255,255,255,.15);margin-bottom:5px} .mk-card .l.short{width:62%} .float-badge{ position:absolute;z-index:3;background:#0A0B10;border:1px solid var(--line-2); padding:13px 16px;display:flex;align-items:center;gap:12px; } .float-badge .ico{width:32px;height:32px;display:grid;place-items:center;background:var(--grad);flex-shrink:0} .float-badge .ico svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2} .float-badge .t{font-size:.8rem;font-weight:700;line-height:1.3;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em} body[dir="rtl"] .float-badge .t{text-transform:none;letter-spacing:0;font-size:.85rem} .float-badge .s{font-size:.72rem;color:var(--dim);white-space:nowrap} .fb-1{bottom:-18px;inset-inline-start:-22px} .fb-2{top:-18px;inset-inline-end:-16px} /* ---------- Grids and feature blocks ---------- */ .grid{display:grid;gap:24px} .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .card{background:#000;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;transition:.3s} .card:hover{border-color:var(--line-2)} .card h3{margin-bottom:12px} .card p{color:var(--muted);font-size:.95rem;margin-bottom:0} /* bare variant — icon, chip title, centred copy, no box (the reference's signature block) */ .grid.bare{gap:44px 34px} .grid.bare .card{border:none;background:none;padding:0;text-align:center} .grid.bare .card:hover{border:none} .grid.bare .card h3{ display:inline-block;padding:6px 14px;margin-bottom:18px; font-size:.95rem;letter-spacing:.07em; background:var(--grad-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); } body[dir="rtl"] .grid.bare .card h3{letter-spacing:0;font-size:1rem} .grid.bare .icon-box{margin-inline:auto} .icon-box{ width:76px;height:76px;display:grid;place-items:center;margin-bottom:20px; } .icon-box svg{width:100%;height:100%;fill:none;stroke:url(#dcGrad);stroke-width:1.25; stroke-linecap:round;stroke-linejoin:round} /* ---------- Check lists ---------- */ .check-list{list-style:none;padding:0;margin:0} .check-list li{position:relative;padding-inline-start:28px;margin-bottom:12px;color:var(--muted);font-size:.94rem} .check-list li::before{ content:"";position:absolute;inset-inline-start:0;top:.6em;width:14px;height:2px;background:var(--m); } /* ---------- Pricing ---------- */ .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:24px;align-items:start} .price-card{ background:#000;border:1px solid var(--line);border-radius:var(--r); padding:34px 28px;display:flex;flex-direction:column;position:relative;transition:.3s; } .price-card:hover{border-color:var(--line-2)} .price-card.featured{ border-color:transparent; background-image:linear-gradient(#04050A,#04050A),var(--grad); background-origin:border-box;background-clip:padding-box,border-box; } .badge{ position:absolute;top:0;inset-inline-start:50%;transform:translate(-50%,-50%); background:var(--grad);color:#fff;padding:6px 16px; font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; } body[dir="rtl"] .badge{transform:translate(50%,-50%);text-transform:none;letter-spacing:0;font-size:.8rem} .price-name{ display:inline-block;font-family:var(--font-latin);font-weight:700; text-transform:uppercase;letter-spacing:.08em;font-size:.92rem; padding:6px 14px;margin-bottom:18px;align-self:flex-start; background:var(--grad-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); } body[dir="rtl"] .price-name{font-family:var(--font-ar);text-transform:none;letter-spacing:0;font-size:1rem} .price-desc{color:var(--dim);font-size:.88rem;margin-bottom:22px;min-height:2.6em} .price-tag{display:flex;align-items:baseline;gap:8px;margin-bottom:6px} .price-tag .amount{ font-family:var(--font-latin);font-size:2.7rem;font-weight:700;line-height:1; font-variant-numeric:tabular-nums; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; } .price-tag .cur{color:var(--muted);font-size:1rem;font-weight:500} .price-note{color:var(--dim);font-size:.82rem;margin-bottom:26px} .price-card .check-list{flex:1;margin-bottom:28px} /* ---------- Work ---------- */ .work-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;transition:.3s;display:block} .work-card:hover{border-color:var(--line-2)} .work-thumb{ aspect-ratio:16/10;display:grid;place-items:center;position:relative; background:radial-gradient(120% 120% at 20% 10%,rgba(109,40,240,.32),transparent 60%),#04050A; border-bottom:1px solid var(--line); } .work-thumb .mono{ font-family:var(--font-latin);font-size:2rem;font-weight:700;text-transform:uppercase; letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34); } .work-body{padding:26px} .work-body h3{margin-bottom:10px} .work-tag{ display:inline-block;padding:5px 12px;font-size:.7rem;font-weight:700; letter-spacing:.11em;text-transform:uppercase; background:var(--grad-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); margin-bottom:14px; } body[dir="rtl"] .work-tag{text-transform:none;letter-spacing:0;font-size:.78rem} .work-body p{color:var(--muted);font-size:.92rem;margin-bottom:0} /* ---------- Process ---------- */ .steps{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .step{padding-top:22px;border-top:1px solid var(--line);position:relative} .step::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:56px;height:2px;background:var(--grad)} .step .n{ display:block;font-family:var(--font-latin);font-size:2.4rem;font-weight:700;line-height:1;margin-bottom:16px; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; } .step h3{font-size:1.05rem;margin-bottom:10px} .step p{color:var(--muted);font-size:.92rem;margin-bottom:0} /* ---------- Team ---------- */ .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:26px} .member{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s} .member:hover{border-color:var(--line-2)} .member-photo{aspect-ratio:1/1;background:#0A0B10;display:grid;place-items:center;overflow:hidden} .member-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .member-photo .ph{font-family:var(--font-latin);font-size:3rem;font-weight:700;color:rgba(255,255,255,.14)} .member-body{padding:26px} .member-body h3{margin-bottom:10px} .member-role{ display:inline-block;padding:5px 12px;margin-bottom:16px; font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; background:var(--grad-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } body[dir="rtl"] .member-role{text-transform:none;letter-spacing:0;font-size:.82rem} .member-body p{color:var(--muted);font-size:.9rem;margin-bottom:0} /* ---------- Split ---------- */ .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:56px;align-items:center} .split-media{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#0A0B10} .split-media img{width:100%;height:auto} /* ---------- Forms ---------- */ .form-wrap{background:#000;border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,42px)} .field{margin-bottom:20px} .field label{ display:block;font-size:.74rem;font-weight:700;margin-bottom:9px; text-transform:uppercase;letter-spacing:.11em;color:var(--muted); } body[dir="rtl"] .field label{text-transform:none;letter-spacing:0;font-size:.88rem} .field .hint{color:var(--dim);font-weight:400;letter-spacing:0;text-transform:none} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border-radius:2px; background:#08090D;border:1px solid var(--line); color:var(--text);font-family:inherit;font-weight:300;font-size:.95rem;transition:.2s; } body[dir="rtl"] .field input,body[dir="rtl"] .field select,body[dir="rtl"] .field textarea{font-weight:400} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--m);box-shadow:0 0 0 3px rgba(34,227,196,.14); } .field textarea{resize:vertical;min-height:120px} .field select{cursor:pointer} .field select option{background:#0D0F14;color:var(--text)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-note{color:var(--dim);font-size:.83rem;margin-top:16px;margin-bottom:0} .form-msg{display:none;padding:14px 16px;margin-bottom:20px;font-size:.92rem;border-radius:2px} .form-msg.ok{display:block;background:rgba(34,227,196,.08);border:1px solid rgba(34,227,196,.4);color:var(--m-lo)} .form-msg.err{display:block;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.4);color:#FCA5A5} /* ---------- Contact tiles ---------- */ .contact-tile{ display:flex;gap:16px;align-items:flex-start; background:#000;border:1px solid var(--line);border-radius:var(--r-sm);padding:22px;transition:.3s; } .contact-tile:hover{border-color:var(--line-2)} .contact-tile .ic{width:26px;height:26px;flex-shrink:0} .contact-tile .ic svg{width:26px;height:26px;fill:none;stroke:url(#dcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .contact-tile h4{margin:0 0 5px;font-size:.8rem;letter-spacing:.11em} body[dir="rtl"] .contact-tile h4{letter-spacing:0;font-size:.95rem} .contact-tile p{margin:0;color:var(--muted);font-size:.9rem;direction:ltr;text-align:start} body[dir="rtl"] .contact-tile p:not([data-phone-text]):not([data-email-text]){direction:rtl} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid var(--line)} .faq-q{ width:100%;background:none;border:none;cursor:pointer;color:var(--text); padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px; font-family:inherit;font-size:1rem;font-weight:700;text-align:start; text-transform:uppercase;letter-spacing:.02em; } body[dir="rtl"] .faq-q{text-transform:none;letter-spacing:0;font-size:1.05rem} .faq-q .plus{color:var(--m);font-size:1.5rem;font-weight:300;flex-shrink:0;transition:transform .25s;line-height:1} .faq-item.open .plus{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq-a p{color:var(--muted);font-size:.95rem;padding-bottom:24px;margin:0;max-width:70ch} /* ---------- CTA band ---------- */ .cta-wrap{position:relative;padding-top:70px} .cta-ghost{ position:absolute;top:0;inset-inline:0;text-align:center; font-family:var(--font-latin);font-weight:700;text-transform:uppercase; font-size:clamp(2.6rem,7.6vw,6rem);line-height:1;white-space:nowrap; color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14); pointer-events:none;user-select:none;overflow:hidden; } body[dir="rtl"] .cta-ghost{font-family:var(--font-ar);text-transform:none;font-size:clamp(2rem,6vw,4.6rem)} .cta-band{ position:relative;border-radius:var(--r);overflow:hidden; background:var(--grad);padding:clamp(42px,6vw,68px);text-align:center; } .cta-band::after{ content:"";position:absolute;inset-inline:0;bottom:0;height:46%; background-image:radial-gradient(#000 1.4px,transparent 1.5px); background-size:14px 14px; -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 92%); mask-image:linear-gradient(to top,#000 8%,transparent 92%); opacity:.55;pointer-events:none; } .cta-band>*{position:relative;z-index:2} .cta-band h2{margin-bottom:16px} .cta-band p{color:rgba(255,255,255,.88);max-width:560px;margin-inline:auto;margin-bottom:32px} .cta-band .hero-cta{justify-content:center;margin-bottom:0} .cta-band .btn-primary{background:#000;color:#fff} .cta-band .btn-primary::after{background-color:var(--m);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")} .cta-band .btn-ghost{background-image:none;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.5);color:#fff} .cta-band .btn-ghost:hover{background:rgba(0,0,0,.38)} /* ---------- Footer ---------- */ .site-footer{border-top:1px solid var(--line);padding:60px 0 28px;background:#000;position:relative} .site-footer::before{content:"";position:absolute;top:-1px;inset-inline:0;height:2px;background:var(--grad);opacity:.85} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:44px} .foot-brand p{color:var(--muted);font-size:.92rem;max-width:310px;margin-top:16px} .foot-col h4{font-size:.74rem;letter-spacing:.14em;color:var(--dim);margin-bottom:18px} body[dir="rtl"] .foot-col h4{letter-spacing:0;font-size:.9rem} .foot-col a{display:block;color:var(--muted);font-size:.93rem;padding:6px 0;transition:color .2s} .foot-col a:hover{color:var(--m)} .foot-bottom{ border-top:1px solid var(--line);padding-top:24px; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--dim);font-size:.85rem; } /* ---------- Floating WhatsApp ---------- */ .wa-float{ position:fixed;bottom:24px;inset-inline-end:24px;z-index:70; width:56px;height:56px;border-radius:50%;background:#25D366; display:grid;place-items:center;box-shadow:0 12px 34px -10px rgba(37,211,102,.6);transition:transform .25s; } .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:29px;height:29px;fill:#fff} /* ---------- Reveal ---------- The entrance slides in from the reading side. The distance is held in a custom property that body[dir] flips, NOT in a duplicated `body[dir="rtl"]` selector: a direction-qualified rule outranks `.reveal.in` / `html.js.ready` on specificity, which would leave RTL pages permanently offset and clipped. */ .reveal{opacity:1;transform:none;filter:none} html.js .reveal{ opacity:0;transform:translateX(var(--slide-in));filter:blur(12px); transition:opacity .75s cubic-bezier(.22,.85,.3,1), transform .85s cubic-bezier(.22,.85,.3,1), filter .75s ease; } html.js .reveal.in{opacity:1;transform:none;filter:blur(0)} /* Hero entrance — runs once, on page load */ html.js .hero .eyebrow, html.js .hero h1, html.js .hero .hero-sub, html.js .hero .hero-cta, html.js .hero .hero-grid > div:last-child, html.js .hero .stats{ opacity:0;transform:translateX(var(--slide-in-hero));filter:blur(14px); transition:opacity .8s cubic-bezier(.22,.85,.3,1), transform .95s cubic-bezier(.22,.85,.3,1), filter .8s ease; } html.js .hero .eyebrow{transition-delay:.05s} html.js .hero h1{transition-delay:.16s} html.js .hero .hero-sub{transition-delay:.30s} html.js .hero .hero-cta{transition-delay:.42s} html.js .hero .hero-grid > div:last-child{transition-delay:.52s} html.js .hero .stats{transition-delay:.62s} html.js.ready .hero .eyebrow, html.js.ready .hero h1, html.js.ready .hero .hero-sub, html.js.ready .hero .hero-cta, html.js.ready .hero .hero-grid > div:last-child, html.js.ready .hero .stats{opacity:1;transform:none;filter:blur(0)} @media (prefers-reduced-motion:reduce){ /* Hold the first photograph still — no drift, no rotation. */ .hero-slide{animation:none!important;transform:none!important;transition:none!important} html.js .reveal, html.js .hero .eyebrow,html.js .hero h1,html.js .hero .hero-sub, html.js .hero .hero-cta,html.js .hero .hero-grid > div:last-child,html.js .hero .stats {opacity:1!important;transform:none!important;filter:none!important;transition:none!important} html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } /* ---------- Responsive ---------- */ @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:46px} .mockup,body[dir="rtl"] .mockup{transform:none;max-width:540px} .fb-1{inset-inline-start:-10px;bottom:-14px} .fb-2{inset-inline-end:-6px;top:-14px} } @media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} .stat{border-inline-end:none;border-bottom:1px solid var(--line)} } @media (max-width:860px){ .burger{display:flex} .nav-links{ position:fixed;inset-inline:0;top:78px;flex-direction:column;align-items:stretch;gap:0; background:#000;border-bottom:1px solid var(--line);padding:12px 24px 24px;margin:0; transform:translateY(-150%);transition:transform .3s ease; max-height:calc(100vh - 78px);overflow-y:auto; } .nav-links.open{transform:translateY(0)} .nav-links a{padding:15px 0;font-size:.95rem} .nav-links a.active::after{inset-inline:0} .nav-actions{margin-inline-start:auto} .nav-actions .btn{display:none} .form-row{grid-template-columns:1fr} .split{gap:36px} } @media (max-width:600px){ .float-badge{display:none} .hero-cta .btn{width:100%;justify-content:space-between} .cta-ghost{display:none} .cta-wrap{padding-top:0} .foot-grid{grid-template-columns:1fr} .grid.bare{gap:40px 26px} .icon-box{width:64px;height:64px} }