:root{--navy:#0B1F3A;--ink:#081528;--coral:#FF6B4A;--coral-d:#B8401A;--sand:#F5F0E6;--lime:#D6FF4B;--sky:#9CC9FF;--mute:#3D4A5F;--mute-d:#C9D3E3;
--disp:'Bricolage Grotesque',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--navy);background:var(--sand);overflow-x:hidden}
h1,h2,h3,p,ul,ol,blockquote{margin:0}ul,ol{padding:0;list-style:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--navy);padding:10px 16px;border-radius:8px;z-index:100}.skip:focus{left:8px}

.btn{display:inline-block;font-family:inherit;font-weight:600;font-size:16px;text-decoration:none;padding:12px 22px;border-radius:999px;border:2px solid var(--navy);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--navy)}
.btn-lg{font-size:18px;padding:16px 30px}
.btn-coral{background:var(--coral);color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{box-shadow:5px 5px 0 var(--coral)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}.btn-ghost:hover{box-shadow:5px 5px 0 var(--lime)}
.hero .btn-coral:hover,.top .btn-coral:hover{box-shadow:5px 5px 0 var(--lime)}

.top{position:sticky;top:0;z-index:50;background:rgba(11,31,58,.92);backdrop-filter:blur(10px);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.04em}
.brand svg{color:var(--coral)}
nav{display:flex;align-items:center;gap:6px 26px;flex-wrap:wrap}
nav a:not(.btn){text-decoration:none;font-weight:500;padding:10px 0;position:relative}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .2s}
nav a:not(.btn):hover::after{transform:scaleX(1)}
.lang{border:1.5px solid #5B6C87;border-radius:999px;padding:6px 12px!important;font-weight:600!important}
.burger{display:none;font:inherit;font-weight:600;color:#fff;background:transparent;border:2px solid #fff;border-radius:999px;padding:10px 18px;cursor:pointer}

.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-in{position:relative;padding-top:84px;padding-bottom:210px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.sticker{display:inline-block;background:var(--lime);color:var(--navy);font-weight:600;font-size:15px;padding:8px 16px;border-radius:999px;transform:rotate(-2deg)}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(46px,9vw,124px);line-height:.96;letter-spacing:-.03em;max-width:1100px}
h1 em{color:var(--coral);font-size:1.08em}
.rot{display:inline-block;color:var(--lime);white-space:nowrap;transition:opacity .28s,transform .28s}
.rot.out{opacity:0;transform:translateY(.25em)}
.lead{font-size:clamp(18px,2vw,22px);color:var(--mute-d);max-width:640px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px}
.badge{position:absolute;right:28px;top:96px;width:clamp(120px,15vw,190px);background:var(--coral);border-radius:50%}
.badge text{font-family:var(--disp);font-weight:700;font-size:13.5px;fill:var(--navy)}
.spin{transform-origin:100px 100px;animation:spin 22s linear infinite}
.sea{position:absolute;left:0;right:0;bottom:-1px;height:150px}
.w{position:absolute;bottom:0;left:0;width:200%;height:100%}
.w1{fill:var(--sky);opacity:.55;height:150px;animation:drift 19s linear infinite}
.w2{fill:var(--coral);height:112px;animation:drift 13s linear infinite reverse}
.w3{fill:var(--lime);height:74px;animation:drift 9s linear infinite}
@keyframes drift{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

.ticker{background:var(--lime);color:var(--navy);overflow:hidden;border-block:2px solid var(--navy)}
.track{display:flex;align-items:center;gap:28px;width:max-content;padding:16px 0;animation:drift 32s linear infinite;font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.track i{font-style:normal;color:var(--coral-d)}

.sec{padding:110px 0}
.sand{background:var(--sand)}.white{background:#fff}.navy{background:var(--navy);color:#fff}.coral{background:var(--coral)}
.head{display:flex;flex-direction:column;gap:16px;max-width:820px;margin-bottom:52px}
.head.row{flex-direction:row;align-items:flex-end;justify-content:space-between;max-width:none;gap:24px;flex-wrap:wrap}
.head.row>div:first-child{display:flex;flex-direction:column;gap:16px}
.eye{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-d)}
.navy .eye{color:var(--lime)}.coral .eye{color:var(--navy)}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(36px,5.6vw,68px);line-height:1;letter-spacing:-.02em}
h2 em{font-size:1.06em}
.sand h2 em,.white h2 em{color:var(--coral-d)}.navy h2 em{color:var(--coral)}
.head p:not(.eye){color:var(--mute);font-size:19px;max-width:640px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.card{background:#fff;border:2px solid var(--navy);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s,background .2s}
.card:hover{transform:translate(-5px,-5px);box-shadow:8px 8px 0 var(--navy)}
.card:nth-child(4n+1):hover{background:var(--lime)}.card:nth-child(4n+2):hover{background:var(--sky)}.card:nth-child(4n+3):hover{background:#FFD1C4}.card:nth-child(4n):hover{background:#EDE4FF}
.num{align-self:flex-start;font-family:var(--disp);font-weight:800;font-size:15px;background:var(--navy);color:#fff;border-radius:999px;padding:4px 12px}
.card h3{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.1}
.card p{color:var(--mute);font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.tags li{font-size:13px;font-weight:600;border:1.5px solid var(--navy);border-radius:999px;padding:3px 10px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.step{border-top:2px solid #5B6C87;padding-top:22px;display:flex;flex-direction:column;gap:10px}
.big{font-family:var(--disp);font-weight:800;font-size:96px;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--lime)}
.step:hover .big{color:var(--lime)}
.step h3{font-family:var(--disp);font-weight:800;font-size:26px}
.step p{color:var(--mute-d);font-size:16px}

.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.promise{background:#fff;border:2px solid var(--navy);border-radius:24px;padding:32px;box-shadow:8px 8px 0 var(--navy);display:flex;flex-direction:column;gap:12px}
.promise:nth-child(1){transform:rotate(-1.2deg)}.promise:nth-child(3){transform:rotate(1.2deg)}
.promise h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:44px;line-height:1}
.promise p{color:var(--mute)}

.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:2px solid var(--navy);border-left:2px solid var(--navy)}
.logo{min-height:110px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.15;transition:background .2s}
.logo:hover{background:var(--lime)}
.logo img{max-width:130px;max-height:56px;width:auto;height:auto;object-fit:contain}
.logos.small{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.logos.small .logo{min-height:84px;font-size:16px}.logos.small .logo img{max-width:104px;max-height:40px}
.sub{font-family:var(--disp);font-weight:800;font-size:30px;margin:64px 0 24px}

.arrows{display:flex;gap:10px}
.arrows button{width:54px;height:54px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;font-size:22px;cursor:pointer;transition:background .2s,color .2s}
.arrows button:hover{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.reviews{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(28px,calc((100vw - 1184px)/2)) 30px;scrollbar-width:none}
.reviews::-webkit-scrollbar{display:none}
.review{flex:0 0 min(400px,82vw);scroll-snap-align:center;background:#fff;color:var(--navy);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:18px}
.review:nth-child(odd){transform:rotate(-1deg)}.review:nth-child(even){transform:rotate(1deg);background:var(--sand)}
.stars{display:flex;gap:3px}.stars svg{width:22px;height:22px;fill:var(--coral)}
blockquote{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.3}
blockquote[lang=ar]{font-family:system-ui,sans-serif;font-size:20px;line-height:1.7}
.by{margin-top:auto;display:flex;flex-direction:column;font-size:15px;color:var(--mute)}
.by strong{color:var(--navy);font-size:16px}.place{color:var(--coral-d);font-weight:600}

.split{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.split>div{flex:999 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px}
.split>div>p:not(.eye){color:var(--mute)}
.mawj{flex:1 1 320px;background:var(--navy);color:#fff;border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:16px;box-shadow:10px 10px 0 var(--coral);transform:rotate(1.5deg)}
.word{font-family:var(--disp);font-weight:800;font-size:44px;line-height:1.1}.word span{color:var(--coral)}
.mawj p:last-child{color:var(--mute-d)}

.band{background:var(--lime);padding:90px 0;border-block:2px solid var(--navy)}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.band h2{font-size:clamp(40px,7vw,96px);max-width:900px}.band h2 em{color:var(--coral-d)}

.direct{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.direct a{color:var(--coral-d);font-weight:600;font-size:21px;padding:8px 0}
form{flex:999 1 480px;min-width:0;background:var(--sand);border:2px solid var(--navy);border-radius:28px;padding:34px;display:flex;flex-direction:column;gap:20px;box-shadow:10px 10px 0 var(--navy)}
.pair{display:flex;flex-wrap:wrap;gap:20px}
.field{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
label{font-weight:600;font-size:15px}
input,textarea{font:inherit;padding:13px 14px;border:2px solid var(--navy);border-radius:12px;background:#fff;color:var(--navy)}
textarea{resize:vertical}
form .btn{align-self:flex-start}

.foot{background:var(--navy);color:var(--mute-d);padding:70px 0 34px;overflow:hidden}
.giant{font-family:var(--disp);font-weight:800;font-size:clamp(56px,15.5vw,230px);line-height:.85;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px #5B6C87;white-space:nowrap}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:34px;font-size:15px}
.foot-row a{color:#fff}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.promise.reveal.in:nth-child(1){transform:rotate(-1.2deg)}.promise.reveal.in:nth-child(3){transform:rotate(1.2deg)}
.mawj.reveal.in{transform:rotate(1.5deg)}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:900px){
.burger{display:block}
nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--navy);flex-direction:column;align-items:flex-start;padding:16px 28px 26px;gap:6px}
nav.open{display:flex}
.badge{position:static;order:5;align-self:flex-end;margin-top:-10px}
.hero-in{padding-top:56px;padding-bottom:170px}
.sec{padding:76px 0}
.head.row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.spin,.w,.track{animation:none}
.reveal{opacity:1;transform:none;transition:none}
.btn,.card{transition:none}
}