@charset "utf-8";
:root{--gold:#d7b27b;--muted:#e7caa8;--paper:#fff7ec;--burgundy:#541b26;--line:rgba(219,156,112,.48)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#11090f}
body{margin:0;min-width:300px;color:var(--paper);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;background:radial-gradient(circle at top,#321219,#0c080e 84%);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #ffd892;outline-offset:5px}
.site{position:relative;isolation:isolate;overflow:hidden;width:min(100%,1088px);min-height:1446px;margin-inline:auto;padding:0 0 46px;background:#2c1318 url('/assets/fekrouch-background.webp') center top / 100% 100% no-repeat;box-shadow:0 22px 95px #0008}
.site::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,4,11,.54) 0%,rgba(18,4,11,.28) 37%,transparent 73%),linear-gradient(180deg,transparent 0%,rgba(23,7,13,.18) 35%,rgba(15,3,9,.65) 76%,rgba(18,4,12,.28) 100%);pointer-events:none}
.hero{height:552px;position:relative;isolation:isolate}
.hero__turtle{position:absolute;z-index:0;top:67px;right:127px;width:490px;height:auto;filter:drop-shadow(0 18px 25px rgba(0,0,0,.16));pointer-events:none;user-select:none}
.hero__content{position:relative;z-index:1;padding-top:91px;margin-left:11.3%;max-width:510px}
.brand{display:flex;align-items:flex-start;flex-direction:column;gap:8px;width:194px;align-items:center;color:var(--gold)}
.brand__box{display:grid;place-items:center;width:119px;height:120px;border-radius:35px;background:linear-gradient(146deg,rgba(112,34,48,.85),rgba(46,15,28,.94));border:1px solid rgba(232,173,111,.8);font:normal 66px/.9 Georgia,"Times New Roman",serif;color:#f5d7a6;box-shadow:0 12px 36px #0002}
.brand__latin{font-size:20px;font-weight:650;letter-spacing:.24em;line-height:1.4;padding-left:.24em}
.brand__arabic{font-size:18px;line-height:1.15;color:#f1cc9b}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,6.3vw,77px);line-height:.91;letter-spacing:-.059em;max-width:600px;font-weight:700;margin:21px 0 16px;text-shadow:0 3px 20px #17000760}
.hero h1 .warm{color:var(--gold);white-space:nowrap}
.hero__arabic{font-size:21px;line-height:1.8;color:#f5dac6;direction:rtl;text-align:left;margin:0 0 3px;white-space:nowrap}
.hero__english{font-size:20px;color:#dac3b6;margin:0}
.links-panel{position:relative;z-index:2;width:74.4%;margin:0 auto;border:1px solid rgba(205,146,104,.64);border-radius:35px;background:linear-gradient(135deg,rgba(55,17,26,.84),rgba(39,12,19,.88));box-shadow:0 25px 75px #0b050789, inset 0 1px 0 #ffffff12;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);padding:29px 33px 37px}
.panel-label{display:flex;align-items:center;gap:20px;margin:0 0 22px;color:#d9ad77;font-size:18px;font-weight:770;letter-spacing:.35em;white-space:nowrap}
.panel-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#c79862aa,transparent)}
.cards{display:grid;gap:11px}
.social-card{position:relative;isolation:isolate;display:flex;align-items:center;gap:23px;min-height:124px;border:1px solid rgba(217,155,113,.58);border-radius:25px;overflow:hidden;padding:15px 20px 15px 25px;background:#230e16;box-shadow:inset 0 1px 0 #ffffff22;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.social-card:hover{transform:translateY(-3px);border-color:#f6c693;box-shadow:0 11px 27px #09030b66}
.social-card:active{transform:scale(.993)}
.social-card::before{content:"";position:absolute;z-index:-1;inset:0;background-image:var(--banner);background-repeat:no-repeat;background-position:center 48%;background-size:cover;transform:scale(1.002);transition:transform .4s ease}
.social-card:hover::before{transform:scale(1.055)}
.social-card::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(16,3,11,.92) 0%,rgba(26,6,15,.89) 32%,rgba(27,8,17,.26) 64%,rgba(32,5,16,.34) 100%)}
.icon{display:grid;place-items:center;flex:0 0 auto;width:74px;height:74px;border-radius:20px;color:#fff;font-family:Arial,sans-serif;font-weight:700;line-height:1}
.icon--youtube{background:#ef1931}
.icon--youtube svg{width:42px;height:37px;display:block}
.icon--tiktok{background:#090b10;box-shadow:inset 0 0 0 1px #2c313a}
.icon--tiktok .music{font-size:59px;transform:translate(-1px,-2px);text-shadow:-3px -2px #23f0e5,3px 2px #ff255c}
.icon--instagram{background:linear-gradient(35deg,#ffbc4b 0%,#ff395c 34%,#d21bae 66%,#6135dc 100%)}
.icon--instagram svg{width:42px;height:42px}
.icon--facebook{background:#1775f2;font-size:64px;padding-top:18px;overflow:hidden;border-radius:17px;font-family:Arial;font-weight:800}
.platform{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0;text-shadow:0 1px 7px #17000eaa}
.platform__name{font-weight:800;font-size:25px;line-height:1.18}
.platform__subtitle{font-size:17px;color:#f0d3b5;line-height:1.28}
.go-icon{display:grid;place-items:center;flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:rgba(82,21,35,.94);border:1px solid rgba(226,158,103,.85);color:#fbdcaa;transition:background .2s,transform .2s}
.social-card:hover .go-icon{background:#843447;transform:translateX(3px)}
.go-icon svg{width:25px;height:25px}
.footer{position:relative;z-index:2;margin:43px auto 0;color:#dfc2ae;text-align:center;font-size:15px;text-shadow:0 2px 10px #0008}
.footer__decoration{display:flex;justify-content:center;align-items:center;gap:15px;margin:20px auto 0;color:#c79963}
.footer__decoration:before,.footer__decoration:after{content:"";width:90px;height:1px;background:linear-gradient(90deg,transparent,#bd895d)}
.footer__decoration:after{transform:rotate(180deg)}
@media(max-width:900px){.site{min-height:100vh;background-size:cover;background-position:center top}.hero{height:520px}.hero__content{margin-left:8%;padding-top:65px}.hero__turtle{width:47%;right:4%;top:60px}.links-panel{width:84%}.hero h1{font-size:clamp(44px,7vw,64px)}.hero__arabic{font-size:18px}.hero__english{font-size:17px}}
@media(max-width:620px){
 body{background:#13090f}
 /* Mobile background fits the screen width; never cropped/zoomed with cover */
 .site{width:100%;min-height:100svh;padding-bottom:22px;background-position:center top;background-size:100% auto;background-repeat:no-repeat}
 .site::before{background:linear-gradient(90deg,rgba(20,5,13,.65) 0%,rgba(20,5,13,.20) 62%,transparent 100%),linear-gradient(180deg,rgba(18,5,11,.13) 0%,rgba(15,4,10,.18) 26%,rgba(13,4,12,.65) 66%,rgba(13,4,12,.82) 100%)}
 /* Tighter hero to reveal the platform cards sooner */
 .hero{height:342px}
 .hero__content{padding-top:22px;margin-left:6.5%;max-width:89%}
 .brand{align-items:center;width:119px;gap:5px}
 .brand__box{width:72px;height:72px;border-radius:22px;font-size:45px}
 .brand__latin{font-size:12px;letter-spacing:.22em}.brand__arabic{font-size:12px}
 /* Standalone character uses its own size, no more oversized close-up */
 .hero__turtle{width:49%;max-width:254px;top:16px;right:0;opacity:.96;filter:drop-shadow(0 7px 15px #0005)}
 .hero h1{font-size:clamp(34px,8.7vw,48px);letter-spacing:-.053em;line-height:.98;margin:18px 0 11px;max-width:320px;position:relative;text-shadow:0 2px 9px #12010bef,0 0 12px #12010bdc;background:linear-gradient(90deg,#2008109e 0%,#20081066 60%,transparent 96%);padding-block:5px;border-radius:8px}
 .hero h1 .warm{white-space:normal}
 .hero__arabic{font-size:13px;white-space:normal;max-width:278px;text-align:left;line-height:1.55;text-shadow:0 2px 6px #180711}
 .hero__english{font-size:12px;max-width:245px;text-shadow:0 2px 8px #180711}
 /* Smaller, more balanced platform panels and banner areas */
 .links-panel{width:calc(100% - 24px);padding:13px 10px 14px;border-radius:22px;background:linear-gradient(140deg,#360f1ce0,#210d15ec)}
 .panel-label{font-size:11px;letter-spacing:.24em;gap:9px;margin:0 6px 11px}
 .cards{gap:7px}
 .social-card{min-height:74px;gap:10px;padding:8px 10px;border-radius:16px}
 .social-card::before{background-position:60% 44%;background-size:cover}
 .icon{width:41px;height:41px;border-radius:12px}
 .icon--youtube svg{width:26px;height:22px}
 .icon--tiktok .music{font-size:34px}
 .icon--instagram svg{width:27px;height:27px}
 .icon--facebook{font-size:38px;padding-top:10px;border-radius:11px}
 .platform{gap:2px}
 .platform__name{font-size:16px}
 .platform__subtitle{font-size:10px;line-height:1.15}
 .go-icon{width:32px;height:32px}
 .go-icon svg{width:15px;height:15px}
 .footer{font-size:11px;margin-top:18px}
 .footer__decoration{margin-top:12px}
 .footer__decoration:before,.footer__decoration:after{width:55px}
}
@media(max-width:370px){.hero{height:335px}.hero__turtle{top:13px;right:0;width:48%}.hero h1{font-size:34px}.hero__arabic{font-size:12px}.social-card{min-height:72px;gap:8px;padding:7px 8px}.platform__name{font-size:15px}.platform__subtitle{font-size:9.5px}.go-icon{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;scroll-behavior:auto !important}}

/* FEKROUCH official profile photo in home emblem */
.brand__box{overflow:hidden}
.brand__box img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}