@font-face{font-family:'Kao';src:url(assets/fonts/kao-yi.woff2) format('woff2');font-display:swap;unicode-range:U+A4B0-A4B1}
@font-face{font-family:'Kao';src:url(assets/fonts/kao-geo.woff2) format('woff2');font-display:swap;unicode-range:U+10D0,U+10E6}
@font-face{font-family:'Kao';src:url(assets/fonts/kao-lao.woff2) format('woff2');font-display:swap;unicode-range:U+0ED2}
@font-face{font-family:'Kao';src:url(assets/fonts/kao-sym.woff2) format('woff2');font-display:swap;unicode-range:U+02DA,U+208A,U+2027}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/fredoka-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/fredoka-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/fredoka-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lalezar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/lalezar-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Lalezar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/lalezar-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/nunito-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/nunito-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/nunito-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/tajawal-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/tajawal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/tajawal-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/tajawal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/tajawal-800-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/tajawal-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--pink:#F6A8CB;--rose:#D95A92;--cream:#FDEEE6;--mauve:#BBA3DA;--plum:#30262F;--purple:#614C75;
--gold1:#FFF1C1;--gold2:#E9C46A;--gold3:#B98A2E;--bg:#FDEEE6;--card:#FFF7F3;
--hero1:#7A5E93;--hero2:#4A3A5C;--hero3:#30262F;
--fd:"Fredoka","Lalezar",system-ui,sans-serif;--fb:"Nunito","Tajawal",system-ui,sans-serif;}
html:not(.is-en) body .en,html.is-en body .ar{display:none!important}
html.is-en{--fd:"Fredoka","Lalezar",system-ui,sans-serif}
html:not(.is-en){--fd:"Lalezar","Fredoka",system-ui,sans-serif;--fb:"Tajawal","Nunito",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fb);color:var(--plum);background:var(--bg);line-height:1.6;overflow-x:hidden;
background-image:radial-gradient(circle at 12% 18%,rgba(246,168,203,.35),transparent 38%),radial-gradient(circle at 88% 52%,rgba(187,163,218,.35),transparent 40%),radial-gradient(circle at 20% 88%,rgba(246,168,203,.3),transparent 40%),radial-gradient(rgba(217,90,146,.10) 1.2px,transparent 1.3px);
background-size:auto,auto,auto,22px 22px;background-attachment:fixed,fixed,fixed,scroll}
img{max-width:100%;display:block}
a{color:inherit}
svg{width:1em;height:1em}
.ar,.en{display:inline}

/* NAV */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0 auto;
background:rgba(48,38,47,.8);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(255,241,193,.18)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:.3px}
.brand img{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(246,168,203,.8));animation:bob 3.2s ease-in-out infinite}
.links{display:none;gap:4px;margin-inline-start:auto}
.links a{color:#fff;text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.95rem;opacity:.9}
.links a:hover{background:rgba(246,168,203,.25);opacity:1}
.lang{margin-inline-start:auto;font:700 .9rem var(--fb);color:var(--plum);border:0;border-radius:999px;padding:8px 16px;cursor:pointer;
background:linear-gradient(180deg,var(--gold1),var(--gold2));box-shadow:inset 0 1px 0 #fff,0 2px 8px rgba(0,0,0,.25)}
.lang .en{font-family:"Tajawal",sans-serif}
@media(min-width:900px){.links{display:flex}.lang{margin-inline-start:8px}.nav{padding:10px 28px}}

/* HERO */
.hero{position:relative;overflow:hidden;color:#fff;padding:28px 0 0;border-radius:0 0 40px 40px;
background:radial-gradient(ellipse at 50% 0%,rgba(246,168,203,.45),transparent 55%),radial-gradient(circle at 85% 70%,rgba(217,90,146,.35),transparent 45%),linear-gradient(170deg,var(--hero1),var(--hero2) 55%,var(--hero3));
box-shadow:0 20px 50px -20px rgba(97,76,117,.6)}
.hero-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 18px;display:grid;gap:8px;text-align:center}
.chip{display:inline-block;font-family:var(--fd);font-size:1rem;padding:6px 16px;border-radius:999px;color:var(--plum);
background:linear-gradient(180deg,#fff,var(--pink));box-shadow:inset 0 -2px 0 rgba(217,90,146,.35),0 0 18px rgba(246,168,203,.7);font-weight:600}
.logo-h{margin:6px auto 0;max-width:620px}
.logo{width:100%;height:auto;filter:drop-shadow(0 6px 22px rgba(246,168,203,.55));animation:logoIn 1.1s cubic-bezier(.2,1.4,.4,1) both, glow 4s ease-in-out 1.2s infinite}
.logo-h{position:relative}
.logo-h::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:250% 100%;
-webkit-mask:url(assets/logo.webp) center/contain no-repeat;mask:url(assets/logo.webp) center/contain no-repeat;animation:sheen 5s ease-in-out 1.4s infinite}
.tagline{font-family:"Kao",var(--fb);font-size:1.08rem;max-width:520px;margin:4px auto 0;color:#FDEEE6;line-height:1.75}.tagline .kao{display:inline-block;font-size:1.15em;letter-spacing:.04em;color:#F6A8CB}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--fd);font-size:1.12rem;font-weight:600;padding:13px 24px;border-radius:999px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.btn svg{width:1.25em;height:1.25em}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn.gold{color:var(--plum);background:linear-gradient(180deg,var(--gold1) 0%,var(--gold2) 60%,#D9AE52 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(185,138,46,.5),0 6px 20px rgba(233,196,106,.45)}
.btn.gold::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-20deg);animation:btnShine 3.6s ease-in-out infinite}
.btn.glass{color:#fff;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,241,193,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.btn.rose{color:#fff;background:linear-gradient(180deg,#F38BB8,var(--rose));box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(140,40,90,.35),0 8px 22px rgba(217,90,146,.4)}
.btn.big{font-size:1.25rem;padding:16px 32px}
.mini-count{display:inline-block;margin:14px auto 0;font-size:.95rem;color:var(--gold1);text-decoration:none;opacity:.95}
.mini-count b{font-family:"Fredoka",sans-serif;font-size:1.15rem;color:#fff}
.hero-art{position:relative;margin:18px auto 0;width:min(78vw,380px);aspect-ratio:692/1035}
.arch{position:absolute;inset:8% -6% 0;border-radius:999px 999px 26px 26px;
background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.55),transparent 45%),linear-gradient(180deg,var(--pink),#E886B3 60%,var(--mauve));
border:3px solid transparent;background-clip:padding-box;box-shadow:0 0 0 3px var(--gold2),0 0 0 7px rgba(255,241,193,.35),0 0 50px rgba(246,168,203,.7),inset 0 -30px 60px rgba(97,76,117,.35)}
.arch::before{content:"";position:absolute;inset:10px;border-radius:inherit;border:1.5px dashed rgba(255,255,255,.65)}
.model{position:relative;width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(48,38,47,.35));animation:floatY 6s ease-in-out infinite}
.sticker{position:absolute;width:84px;height:auto;z-index:3;filter:drop-shadow(0 4px 8px rgba(48,38,47,.3))}
.st-hi{bottom:16%;inset-inline-start:-14%;animation:wiggle 3s ease-in-out infinite}
@media(min-width:900px){
 .hero{padding-top:40px}
 .hero-in{grid-template-columns:1.15fr .85fr;align-items:end;text-align:start;gap:30px}
 .hero-copy{padding-bottom:70px}
 .cta-row{justify-content:flex-start}
 .logo-h{margin-inline:0}
 .tagline{margin-inline:0;font-size:1.2rem}
 .hero-art{width:100%;max-width:430px;margin:0}
 .chip{justify-self:start}
}
.ribbon{position:relative;z-index:4;margin-top:-6px;background:repeating-linear-gradient(-45deg,var(--rose) 0 18px,var(--pink) 18px 36px);border-top:2px solid var(--gold2);border-bottom:2px solid var(--gold2);overflow:hidden;padding:9px 0;box-shadow:0 6px 18px rgba(217,90,146,.3)}
.ribbon-track{display:flex;gap:18px;white-space:nowrap;width:max-content;animation:marquee 26s linear infinite;font-family:"Fredoka","Lalezar",sans-serif;font-weight:600;font-size:1.05rem;color:#fff;text-shadow:0 1px 2px rgba(48,38,47,.45)}
.ribbon-track i{font-style:normal;color:var(--gold1)}
[dir=rtl] .ribbon-track{animation-direction:reverse}
.sky{position:absolute;inset:0;z-index:1;pointer-events:none}
.fc{position:absolute;width:54px;height:auto;opacity:.9;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));animation:floatC 9s ease-in-out infinite}
.fc0{top:6%;left:4%;width:46px}.fc1{top:14%;right:6%;animation-delay:-2s}.fc2{top:42%;left:2%;width:40px;animation-delay:-4s}.fc3{top:58%;right:3%;width:60px;animation-delay:-1s}
.fc4{top:76%;left:8%;width:44px;animation-delay:-6s}.fc5{top:30%;right:28%;width:30px;opacity:.6;animation-delay:-3s}.fc6{top:88%;right:22%;width:38px;animation-delay:-5s}.fc7{top:4%;left:42%;width:28px;opacity:.55;animation-delay:-7s}
.sp{position:absolute;color:var(--gold1);filter:drop-shadow(0 0 6px #fff);animation:twinkle 2.6s ease-in-out infinite}
.sp1{top:12%;left:22%;width:18px;height:18px}.sp2{top:22%;right:16%;width:12px;height:12px;animation-delay:-.8s}.sp3{top:50%;left:12%;width:14px;height:14px;animation-delay:-1.4s}.sp4{top:66%;right:12%;width:20px;height:20px;animation-delay:-2s}.sp5{top:36%;left:48%;width:10px;height:10px;animation-delay:-.4s}

/* SECTIONS */
.sec{max-width:1100px;margin:0 auto;padding:56px 16px 8px}
.title{font-family:var(--fd);font-weight:600;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.15;text-align:center;margin:0 0 6px;color:var(--plum);
background:linear-gradient(180deg,var(--rose),#A8407A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #fff)}
html:not(.is-en) .title{font-weight:400;line-height:1.4}
.title.light{background:none;-webkit-text-fill-color:#fff;color:#fff;filter:drop-shadow(0 2px 10px rgba(217,90,146,.6))}
.sub{text-align:center;margin:0 auto 22px;max-width:560px;color:#6B5368;font-size:1.02rem}
.sub.light{color:#FDEEE6}
.jelly{position:relative;border-radius:28px;background:linear-gradient(180deg,#fff 0%,var(--card) 45%,#FBE1EC 100%);
box-shadow:inset 0 2px 0 #fff,inset 0 -6px 14px rgba(217,90,146,.14),0 1px 0 rgba(217,90,146,.25),0 14px 30px -12px rgba(217,90,146,.45);border:1.5px solid rgba(246,168,203,.7)}
.jelly::before{content:"";position:absolute;top:6px;inset-inline:16px;height:38%;border-radius:22px 22px 60% 60%/22px 22px 30px 30px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}

/* PLATFORMS */
.pgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.pgrid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.pcard:hover{transform:translateY(-4px) rotate(-.6deg)}
.picon{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;position:relative;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.15),0 6px 14px -4px rgba(48,38,47,.4)}
.picon svg{width:30px;height:30px}
.p-twitch .picon{background:linear-gradient(160deg,#B08BFF,#7B3FE4)}
.p-youtube .picon{background:linear-gradient(160deg,#FF7A85,#E0263A)}
.p-tiktok .picon{background:linear-gradient(160deg,#4A3D49,#121012);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),-2px 0 0 #25F4EE,2px 0 0 #FE2C55,0 6px 14px -4px rgba(48,38,47,.4)}
.p-instagram .picon{background:radial-gradient(circle at 30% 110%,#FFD776,#F56040 35%,#C13584 65%,#833AB4)}
.p-discord .picon{background:linear-gradient(160deg,#8C97FF,#5865F2)}
.ptext{display:flex;flex-direction:column;min-width:0;position:relative}
.ptext b{font-family:"Fredoka",sans-serif;font-size:1.2rem;line-height:1.2}
.ptext small{font-size:.92rem;color:#8A6B85;font-weight:700}
.ptext em{font-style:normal;font-size:.9rem;color:var(--rose)}
.badge{display:inline-block;width:max-content;margin:3px 0 2px;font-size:.78rem;font-weight:800;padding:2px 10px;border-radius:999px;color:var(--plum);background:linear-gradient(180deg,var(--gold1),var(--gold2));box-shadow:inset 0 1px 0 #fff}
.parrow{margin-inline-start:auto;flex:none;width:22px;height:22px;color:var(--rose);opacity:.7}
[dir=rtl] .parrow{transform:scaleX(-1)}

/* PROFILE */
.profile{display:grid;gap:10px;padding:22px 18px;align-items:center}
.profile-art{position:relative;width:min(56vw,230px);margin:0 auto}
.profile-art>img:first-child{width:100%;height:auto;animation:floatY 5s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(217,90,146,.35))}
.st-love{top:-6px;inset-inline-end:-30px;width:70px}
.facts{margin:0;display:grid;grid-template-columns:1fr;gap:8px}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.75);border:1px dashed rgba(217,90,146,.35)}
.facts dt{font-weight:800;color:var(--rose);font-size:.95rem;flex:none}
.facts dd{margin:0;font-weight:700;text-align:end}
#age{font-family:"Fredoka",sans-serif;font-size:1.1rem}
@media(min-width:820px){.profile{grid-template-columns:280px 1fr;padding:30px}.facts{grid-template-columns:1fr 1fr}.profile-art{width:100%}}

/* FAVOURITES */
.favgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:820px){.favgrid{grid-template-columns:repeat(4,1fr)}}
.fav{text-align:center;padding:20px 12px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.fav:hover{transform:translateY(-5px) scale(1.03)}
.favicon-i{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,var(--pink));box-shadow:inset 0 -4px 8px rgba(217,90,146,.25),0 0 0 3px #fff,0 0 0 5px var(--gold2);margin-bottom:6px}
.favicon-i svg{width:52px;height:52px}
.fav small{color:#8A6B85;font-weight:700;font-size:.85rem}
.fav b{font-family:var(--fd);font-weight:500;font-size:1.25rem;color:var(--plum);line-height:1.25}
.f-chatnoir .favicon-i{background:radial-gradient(circle at 35% 30%,#fff,#C9F2C3)}
.f-gojo .favicon-i{background:radial-gradient(circle at 35% 30%,#fff,#C7E3FF)}

/* BIRTHDAY */
.bday{padding:58px 16px 26px;text-align:center;border:0;color:#fff;overflow:hidden;
background:radial-gradient(circle at 50% -10%,rgba(255,255,255,.45),transparent 50%),linear-gradient(160deg,#F38BB8,var(--rose) 50%,#9E5BA8);
box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -8px 20px rgba(97,76,117,.35),0 20px 40px -16px rgba(217,90,146,.6),0 0 0 3px var(--gold2)}
.bday::before{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.st-cake{top:6px;inset-inline-end:14px;width:46px;animation:wiggle 3s ease-in-out infinite;transform-origin:50% 0}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px;margin:4px auto 10px;direction:ltr}
html:not(.is-en) .cd{direction:rtl}
.tile{border-radius:20px;padding:14px 4px 10px;background:linear-gradient(180deg,rgba(255,255,255,.95),#FFE3EF);color:var(--plum);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 0 rgba(217,90,146,.25),0 8px 18px -6px rgba(48,38,47,.35);position:relative}
.tile b{display:block;font-family:"Fredoka",sans-serif;font-weight:700;font-size:clamp(1.8rem,9vw,3rem);line-height:1;background:linear-gradient(180deg,var(--rose),#8E3C78);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.tile small{font-weight:800;font-size:.85rem;color:#8A6B85}
.bd-note{margin:8px 0 0;font-size:.95rem;color:#FFF1F7}
.bd-party{display:none!important}

/* VOICE */
.featured{position:relative;max-width:820px;margin:0 auto 16px}
.feat-tag{position:absolute;top:12px;inset-inline-start:12px;z-index:3;font-weight:800;font-size:.85rem;padding:4px 12px;border-radius:999px;color:var(--plum);background:linear-gradient(180deg,var(--gold1),var(--gold2));pointer-events:none}
.yt{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;overflow:hidden;border-radius:22px;background:var(--plum);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink),0 14px 28px -10px rgba(97,76,117,.55);font:inherit;color:#fff}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.yt:hover img{transform:scale(1.05)}
.yt.wide{aspect-ratio:16/9}
.yt.short{aspect-ratio:9/16}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#F38BB8,var(--rose));box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 4px rgba(255,255,255,.7),0 6px 18px rgba(0,0,0,.35)}
.yt-play svg{width:28px;height:28px;margin-left:3px}
.yt-title{position:absolute;inset:auto 0 0 0;padding:28px 10px 10px;font-weight:700;font-size:.85rem;line-height:1.35;text-align:right;background:linear-gradient(transparent,rgba(48,38,47,.88));font-family:"Tajawal",sans-serif}
.yt.wide .yt-title{font-size:1rem;padding:40px 16px 14px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shorts{display:grid;grid-auto-flow:column;grid-auto-columns:44%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 6px 18px;margin:0 -10px;scrollbar-width:thin}
.shorts .yt{scroll-snap-align:start}
@media(min-width:820px){.shorts{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible;margin:0}}
.more{display:flex;width:max-content;margin:10px auto 0}

/* DISCORD */
.discord{position:relative;overflow:hidden;text-align:center;padding:40px 18px 34px;border-radius:32px;color:#fff;
background:radial-gradient(circle at 50% 0%,rgba(187,163,218,.55),transparent 60%),linear-gradient(165deg,var(--purple),#3E3150 60%,var(--plum));
box-shadow:0 0 0 3px var(--gold2),0 0 0 8px rgba(233,196,106,.2),0 24px 50px -18px rgba(48,38,47,.7)}
.dc-logo{width:64px;height:64px;color:#fff;filter:drop-shadow(0 0 16px rgba(140,151,255,.9));margin-bottom:6px;animation:bob 3s ease-in-out infinite}
.emote-rain img{position:absolute;width:68px;opacity:.9;animation:floatC 7s ease-in-out infinite}
.emote-rain img:nth-child(1){top:14px;left:12px}.emote-rain img:nth-child(2){top:18px;right:14px;animation-delay:-2s}.emote-rain img:nth-child(3){bottom:16px;left:6%;animation-delay:-4s;width:56px}.emote-rain img:nth-child(4){bottom:12px;right:6%;animation-delay:-1s;width:58px}
.discord .title,.discord .sub,.discord .btn{position:relative;z-index:2}
@media(max-width:520px){.emote-rain img{width:48px}.emote-rain img:nth-child(3),.emote-rain img:nth-child(4){display:none}.discord{padding-top:60px}}

/* FOOTER */
.foot{text-align:center;padding:50px 16px 40px;margin-top:40px;color:#6B5368}
.foot-mini{width:120px;height:120px;margin:0 auto 6px;filter:drop-shadow(0 6px 12px rgba(217,90,146,.35))}
.foot-links{display:flex;justify-content:center;gap:10px;margin:8px 0 12px}
.foot-links a{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#F38BB8,var(--rose));box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 10px rgba(217,90,146,.35)}
.foot-links svg{width:22px;height:22px}
.foot p{margin:0;font-size:.9rem;font-weight:700}

/* BIRTHDAY MODE */
.bday-banner{position:relative;z-index:60;text-align:center;font-family:var(--fd);font-size:clamp(1.05rem,4.4vw,1.6rem);padding:10px 12px;color:#fff;
background:linear-gradient(90deg,#D95A92,#F38BB8,#E9C46A,#F38BB8,#D95A92);background-size:300% 100%;animation:bannerFlow 6s linear infinite;text-shadow:0 2px 4px rgba(48,38,47,.4);box-shadow:0 4px 16px rgba(217,90,146,.5)}
#party{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70;display:none}
body.birthday{--bg:#FFE4F0;--card:#FFF0F7;--hero1:#F38BB8;--hero2:#D95A92;--hero3:#8E4A8C}
body.birthday .bday-banner{display:block}
body.birthday #party{display:block}
body.birthday .bd-normal{display:none!important}
body.birthday .bd-party{display:inline!important}
body.birthday .bday{background:radial-gradient(circle at 50% -10%,rgba(255,255,255,.5),transparent 50%),linear-gradient(160deg,#E9C46A,#F38BB8 40%,var(--rose))}
body.birthday .chip{animation:pulse 1.4s ease-in-out infinite}

/* KEYFRAMES */
@keyframes logoIn{0%{opacity:0;transform:scale(.6) translateY(20px)}100%{opacity:1;transform:none}}
@keyframes glow{0%,100%{filter:drop-shadow(0 6px 22px rgba(246,168,203,.5))}50%{filter:drop-shadow(0 6px 34px rgba(255,241,193,.75))}}
@keyframes sheen{0%,55%{background-position:150% 0}100%{background-position:-60% 0}}
@keyframes btnShine{0%,60%{left:-60%}100%{left:130%}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-18px) rotate(10deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes bannerFlow{to{background-position:300% 0}}
@keyframes pulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media(max-width:899px){.fc5,.fc7{display:none}.fc1{top:9%}.fc3{top:52%}}
@media(min-width:900px){.fc5{top:8%;right:4%}.bday{padding-top:40px}}

@media (max-width:480px){.tagline{font-size:clamp(.9rem,4vw,1.08rem)}}
.tagline .nw{white-space:nowrap;font-size:.9em}

/* welcome line */
.welcome{margin:0 0 8px;font-family:var(--fd);font-size:1.12rem;font-weight:600;letter-spacing:.2px;background:linear-gradient(180deg,#FFF1C1,#F6A8CB 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 6px rgba(246,168,203,.55));opacity:0;animation:wIn 1.2s .3s ease-out forwards}
@keyframes wIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.welcome{animation:none;opacity:1}}
/* candy mailbox */
.mailbox{max-width:620px;margin:0 auto;padding:24px 18px 22px;display:flex;flex-direction:column;gap:12px}
.mailbox>*{position:relative;z-index:1}
.st-mail{position:absolute!important;top:-30px;inset-inline-end:-6px;width:78px;height:auto;transform:rotate(8deg)}
.mf{display:flex;flex-direction:column;gap:6px;font-weight:800;color:var(--rose)}
.mf input,.mf textarea{font:inherit;font-weight:400;color:var(--plum);background:#fff;border:2px solid var(--pink);border-radius:16px;padding:12px 14px;resize:vertical;box-shadow:inset 0 2px 6px rgba(217,90,146,.12);outline:none;transition:border-color .2s,box-shadow .2s}
.mf input:focus,.mf textarea:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(246,168,203,.45)}
.mcount{align-self:flex-end;font-weight:400;color:#8a7488;font-size:.8rem}
.hp{position:absolute!important;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none;white-space:nowrap}
.mfile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;cursor:pointer}
.mfile-btn{display:inline-block;padding:10px 16px;border-radius:999px;border:2px dashed var(--mauve);background:rgba(187,163,218,.15);color:var(--purple);font-weight:700}
.mfile-name{font-size:.85rem;color:#8a7488;word-break:break-all}
.mprev{max-width:100%;max-height:220px;border-radius:16px;align-self:center;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink)}
.merr{margin:0;color:#B0305E;font-weight:700;text-align:center}
.msend{align-self:center}.msend.sending{opacity:.7;pointer-events:none}
.mdone{text-align:center;padding:10px 0}.mdone img{width:110px;height:auto;animation:floatY 4s ease-in-out infinite}
.mdone p{font-family:var(--fd);font-size:1.35rem;color:var(--rose);margin:8px 0 14px}
.mdone .btn.glass{color:var(--plum);border-color:var(--pink)}
[hidden]{display:none!important}
.emo{font-style:normal;-webkit-text-fill-color:initial;background:none;filter:none}

/* admin-editable extras: emoji favourite icon + generic link card */
.f-emoji .favicon-i{background:radial-gradient(circle at 35% 30%,#fff,#FFD9E8)}
.fav-emo{font-style:normal;font-size:2.4rem;line-height:1}
.p-link .picon{background:linear-gradient(160deg,#F6A8CB,#D95A92)}
