/* MSG German-Swiss Pharmaceuticals — site styles
   Palette comes from the logo: black, red, white, plus the gold of the flag. */
@import url("../fonts/fonts.css");

:root {
  --ink: #0a0a0b;
  --ink-2: #141416;
  --ink-3: #1e1e21;
  --red: #d61c2a;
  --red-deep: #9c0f1a;
  --gold: #ffcc00;
  --paper: #f6f4ef;
  --white: #fff;
  --text: #17171a;
  --muted: #62626b;
  --line: rgba(10, 10, 11, .1);
  --line-d: rgba(255, 255, 255, .12);
  --acc: var(--red);
  --acc-soft: rgba(214, 28, 42, .14);
  --r: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wrap: 1240px;
  --font: "Outfit", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:lang(ar) { --font: "Alexandria", "Segoe UI", Tahoma, sans-serif; }

.t-adult { --acc: #6fb4e6; --acc-soft: rgba(111, 180, 230, .16); --acc-ink: #0d3552; }
.t-kids  { --acc: #f7d832; --acc-soft: rgba(247, 216, 50, .18); --acc-ink: #5a4500; }
.t-d3    { --acc: #f59a23; --acc-soft: rgba(245, 154, 35, .18); --acc-ink: #5c3200; }
.t-b12   { --acc: #e0313d; --acc-soft: rgba(224, 49, 61, .16); --acc-ink: #6d0c14; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 1.0625rem/1.75 var(--font); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:lang(ar) body, body:lang(ar) { line-height: 1.95; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
@view-transition { navigation: auto; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--gold); color: #000; padding: .5rem 1rem; border-radius: 8px; z-index: 200; }
.skip:focus { top: 1rem; }

/* ---------- type ---------- */
.display { font-weight: 800; font-size: clamp(2.5rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.035em; }
:lang(ar) .display { line-height: 1.3; letter-spacing: 0; font-size: clamp(2.2rem, 5.4vw, 4.5rem); }
.h2 { font-weight: 700; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -.025em; }
:lang(ar) .h2 { line-height: 1.4; letter-spacing: 0; font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.35; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 56ch; }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
:lang(ar) .eyebrow { letter-spacing: 0; font-size: .9rem; }
.eyebrow::before { content: ""; width: 2.2rem; height: 2px; background: currentColor; }
.red { color: var(--red); }
.acc { color: var(--acc); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--red); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .7rem; isolation: isolate; overflow: hidden;
  padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background: var(--bg); color: var(--fg); font-weight: 600; font-size: 1rem; line-height: 1.2;
  transition: transform .5s var(--ease), color .4s, border-color .4s, box-shadow .4s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); border-radius: inherit; transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover { box-shadow: 0 14px 34px -14px rgba(214, 28, 42, .7); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform .4s var(--ease); }
[dir=rtl] .btn svg.arr { transform: scaleX(-1); }
.btn:hover svg.arr { transform: translateX(4px); }
[dir=rtl] .btn:hover svg.arr { transform: scaleX(-1) translateX(4px); }
.btn--ghost { --bg: transparent; --fg: #fff; border-color: var(--line-d); }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover { color: var(--ink); box-shadow: none; }
.btn--dark { --bg: var(--ink); }
.btn--dark::before { background: var(--red); }
.on-dark .btn::before { background: #fff; }
.on-dark .btn:not(.btn--ghost):hover { color: var(--ink); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; color: #fff; transition: background .4s, backdrop-filter .4s, box-shadow .4s; }
.hdr.is-stuck { background: rgba(10, 10, 11, .78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--line-d); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 84px; transition: height .4s var(--ease); }
.hdr.is-stuck .hdr__in { height: 66px; }
.brand img { height: 46px; width: auto; transition: height .4s var(--ease); }
.hdr.is-stuck .brand img { height: 38px; }
.nav { display: flex; align-items: center; gap: .3rem; }
.nav a { position: relative; padding: .5rem .9rem; font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .78); transition: color .3s; }
.nav a::after { content: ""; position: absolute; inset-inline: .9rem; bottom: .2rem; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: inline-start; transition: transform .4s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.hdr__end { display: flex; align-items: center; gap: .6rem; }
.lang { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border: 1px solid var(--line-d); border-radius: 999px; font-size: .88rem; font-weight: 600; transition: background .3s, color .3s; }
.lang:hover { background: #fff; color: var(--ink); }
.lang svg { width: 1rem; height: 1rem; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-d); border-radius: 50%; background: none; cursor: pointer; position: relative; }
.burger i { position: absolute; inset-inline: 12px; height: 2px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 25px; }
.nav-open .burger i:first-child { top: 21px; transform: rotate(45deg); }
.nav-open .burger i:last-child { top: 21px; transform: rotate(-45deg); }
.progress { position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--red), var(--gold)); transform: scaleX(var(--p, 0)); transform-origin: left; }
[dir=rtl] .progress { transform-origin: right; }

@media (max-width: 940px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: .2rem;
    padding: 6rem 1.5rem 2rem; background: var(--ink); clip-path: circle(0 at calc(100% - 3rem) 2.6rem); visibility: hidden;
    transition: clip-path .7s var(--ease), visibility 0s .7s;
  }
  [dir=rtl] .nav { clip-path: circle(0 at 3rem 2.6rem); }
  .nav-open .nav { clip-path: circle(150% at calc(100% - 3rem) 2.6rem); visibility: visible; transition: clip-path .7s var(--ease); }
  [dir=rtl] .nav-open .nav { clip-path: circle(150% at 3rem 2.6rem); }
  .nav a { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; color: #fff; padding: .35rem 0; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s var(--ease); }
  .nav a::after { inset-inline: 0; }
  .nav-open .nav a { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i, 0) * .06s); }
  .nav-open { overflow: hidden; }
}

/* ---------- hero (home) ---------- */
.dark { background: var(--ink); color: #fff; }
.dark .lead { color: rgba(255, 255, 255, .68); }
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 8rem 0 5rem; overflow: hidden; isolation: isolate; }
.fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx::after { /* fine grid */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .35;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}
.blob { position: absolute; width: 46vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.blob--1 { background: var(--acc); inset: -18vmax -10vmax auto auto; }
.blob--2 { background: var(--gold); opacity: .16; inset: auto auto -26vmax -14vmax; animation-duration: 24s; animation-direction: alternate-reverse; }
.blob--3 { background: var(--red); opacity: .28; width: 26vmax; inset: 30% auto auto 38%; animation-duration: 15s; }
@keyframes drift { to { transform: translate3d(-6vmax, 5vmax, 0) scale(1.15); } }
.hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero__in > *, .phero__in > *, .about > *, .two > *, .contact > * { min-width: 0; }
.hero__copy > * + * { margin-top: 1.6rem; }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line-d); margin-top: 2.6rem !important; }
.hero__facts b { display: block; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.hero__facts span { font-size: .88rem; color: rgba(255, 255, 255, .6); }

.fan { position: relative; height: clamp(380px, 48vw, 600px); perspective: 1400px; }
.fan__card {
  --mx: 0px; --my: 0px;
  position: absolute; left: 50%; top: 50%; width: min(48%, 270px); aspect-ratio: 928 / 1152; border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1);
  transform: translate(calc(-50% + var(--tx) + var(--mx) * var(--k)), calc(-50% + var(--ty) + var(--my) * var(--k))) rotate(var(--rot)) scale(var(--s, 1));
  transition: transform 1.2s var(--ease), opacity .8s, box-shadow .5s; will-change: transform;
}
.fan__card img { width: 100%; height: 100%; object-fit: cover; }
.fan__card span { position: absolute; inset: auto .8rem .8rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(10, 10, 11, .72); backdrop-filter: blur(8px); font-size: .82rem; font-weight: 600; text-align: center; }
.fan__card:nth-child(1) { --tx: -60%; --ty: 5%; --rot: -10deg; --k: .6; z-index: 1; }
.fan__card:nth-child(2) { --tx: 0%; --ty: -3%; --rot: 0deg; --k: 1.2; --s: 1.1; z-index: 3; }
.fan__card:nth-child(3) { --tx: 60%; --ty: 5%; --rot: 10deg; --k: .6; z-index: 2; }
.fan__card:not(:nth-child(2)) span { inset: .8rem .8rem auto; }
.fan__card:hover { --s: 1.14; z-index: 5; box-shadow: 0 50px 90px -30px var(--red), 0 0 0 1px rgba(255, 255, 255, .25); }
.js .fan:not(.is-in) .fan__card { --tx: 0%; --ty: 14%; --rot: 0deg; opacity: 0; }
.fan.is-in .fan__card:nth-child(1) { transition-delay: .25s; }
.fan.is-in .fan__card:nth-child(3) { transition-delay: .35s; }
.fan.is-settled .fan__card { transition: transform .6s var(--ease), box-shadow .5s; transition-delay: 0s !important; }
.ring { position: absolute; inset-inline-end: 0; top: -2%; width: 112px; height: 112px; z-index: 6; direction: ltr; animation: spin 22s linear infinite; }
.ring text { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; fill: #fff; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
.scrollcue { position: absolute; inset: auto 0 1.6rem; display: grid; justify-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.scrollcue i { width: 1px; height: 44px; background: linear-gradient(#fff, transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.curtain { position: fixed; inset: 0; z-index: 300; background: var(--ink); display: grid; place-items: center; pointer-events: none; animation: curtain .9s var(--ease) 1s forwards; }
.curtain img { width: min(240px, 50vw); animation: pop 1s var(--ease) both; }
@keyframes curtain { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes pop { from { opacity: 0; transform: scale(.86); filter: blur(8px); } }

/* ---------- marquee ---------- */
.marq { direction: ltr; overflow: hidden; padding: 1.4rem 0; background: var(--red); color: #fff; transform: rotate(-1.2deg) scale(1.03); margin-block: -1.2rem; position: relative; z-index: 2; }
.marq__track { display: flex; width: max-content; gap: 2.5rem; animation: marq 36s linear infinite; }
.marq__track span { display: inline-flex; align-items: center; gap: 2.5rem; font-size: clamp(1.2rem, 2.4vw, 1.9rem); font-weight: 700; white-space: nowrap; }
.marq__track span::after { content: "✦"; color: var(--gold); font-size: .7em; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; position: relative; }
.section--white { background: #fff; }
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 760px; }
.head--row { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 700px) { .head--row { grid-template-columns: 1fr; } }

/* product cards */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--ink); color: #fff; transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s; }
.pcard:hover { box-shadow: 0 40px 70px -40px var(--acc); }
.pcard__img { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.07); }
.pcard__img::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, var(--ink)); }
.pcard__tag { position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 2; padding: .35rem .85rem; border-radius: 999px; background: var(--acc); color: #000; font-size: .78rem; font-weight: 700; }
.pcard__body { padding: 0 1.6rem 1.7rem; margin-top: -3.2rem; position: relative; display: grid; gap: .5rem; }
.pcard__body h3 { font-size: 1.75rem; font-weight: 800; line-height: 1.25; }
.pcard__body small { font-size: .85rem; color: var(--acc); font-weight: 600; letter-spacing: .04em; }
.pcard__body p { color: rgba(255, 255, 255, .68); font-size: .97rem; }
.more { display: inline-flex; align-items: center; gap: .6rem; margin-top: .7rem; font-weight: 600; }
.more i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--acc); color: #000; transition: transform .5s var(--ease); }
.more svg { width: 1rem; height: 1rem; }
[dir=rtl] .more svg { transform: scaleX(-1); }
.pcard:hover .more i { transform: rotate(-45deg); }
[dir=rtl] .pcard:hover .more i { transform: rotate(45deg); }
.glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 45%); opacity: 0; transition: opacity .4s; z-index: 3; }
.pcard:hover .glare { opacity: 1; }

/* about */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__media::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border: 2px solid var(--red); border-radius: var(--r); z-index: -1; }
.about__badge { position: absolute; inset-inline-end: -1.2rem; bottom: 2rem; background: var(--ink); color: #fff; padding: 1.1rem 1.4rem; border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); display: flex; align-items: center; gap: .9rem; font-weight: 600; font-size: .92rem; line-height: 1.4; }
.flag { width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(#000 33.3%, #dd0000 0 66.6%, #ffcc00 0); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.about__copy > * + * { margin-top: 1.4rem; }
.about__copy p { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem !important; }
.stat { padding: 1.2rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.stat b { display: block; font-size: 2.2rem; font-weight: 800; color: var(--red); line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--muted); line-height: 1.4; display: block; margin-top: .3rem; }

/* features */
.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; }
.feat { padding: 2rem 1.6rem 2.2rem; background: var(--ink); transition: background .5s; display: grid; gap: .8rem; align-content: start; }
.feat:hover { background: var(--ink-3); }
.feat__n { font-size: .85rem; font-weight: 700; color: var(--red); letter-spacing: .1em; }
.feat p { color: rgba(255, 255, 255, .62); font-size: .95rem; }
.feat svg { width: 2.4rem; height: 2.4rem; color: var(--gold); }

/* image strip */
.strip { direction: ltr; display: grid; gap: 1rem; overflow: hidden; padding-block: .5rem; }
.strip__row { display: flex; gap: 1rem; width: max-content; animation: marq 70s linear infinite; }
.strip__row:nth-child(2) { animation-direction: reverse; animation-duration: 80s; }
.strip:hover .strip__row { animation-play-state: paused; }
.strip a { display: block; width: clamp(170px, 20vw, 260px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; flex: none; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; }
.strip a:hover img { transform: scale(1.08); }

/* CTA band */
.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: calc(var(--r) * 1.6); background: var(--red); color: #fff; padding: clamp(2.5rem, 7vw, 5.5rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.cta::before { content: ""; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%; inset: -60% -10% auto auto; background: radial-gradient(circle, var(--gold), transparent 65%); opacity: .45; animation: drift 12s ease-in-out infinite alternate; }
.cta::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, .5), transparent 55%); }
.cta p { color: rgba(255, 255, 255, .85); margin-top: .8rem; max-width: 48ch; }
.cta .btn { --bg: var(--ink); }
.cta .btn::before { background: #fff; }
.cta .btn:hover { color: var(--ink); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: rgba(255, 255, 255, .66); padding: 5rem 0 2rem; font-size: .95rem; }
.ftr__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-d); }
.ftr img { height: 64px; width: auto; margin-bottom: 1.2rem; }
.ftr h4 { margin: 0 0 1.1rem; color: #fff; font-size: 1rem; font-weight: 600; }
.ftr li + li { margin-top: .55rem; }
.ftr a { transition: color .3s; } .ftr a:hover { color: #fff; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; font-size: .85rem; }
.ftr__note { margin-top: 1.6rem; padding: 1rem 1.2rem; border: 1px solid var(--line-d); border-radius: 14px; font-size: .85rem; line-height: 1.7; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- inner page head ---------- */
.phead { position: relative; overflow: hidden; isolation: isolate; padding: 11rem 0 5rem; }
.phead .display { font-size: clamp(2.3rem, 5.4vw, 4.4rem); }
.phead > .wrap > * + * { margin-top: 1.2rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: rgba(255, 255, 255, .55); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }

/* ---------- product page ---------- */
.phero { position: relative; overflow: hidden; isolation: isolate; padding: 9.5rem 0 5rem; min-height: 100svh; display: grid; align-items: center; }
.phero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.phero__copy > * + * { margin-top: 1.4rem; }
.phero__en { font-size: 1.05rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.aka { font-size: .88rem; color: rgba(255, 255, 255, .5); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .05); font-size: .9rem; font-weight: 500; }
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acc); }
.phero__media { position: relative; justify-self: center; width: min(100%, 440px); }
.phero__media img { border-radius: 30px; width: 100%; aspect-ratio: 928 / 1152; object-fit: cover; box-shadow: 0 50px 100px -40px var(--acc), 0 0 0 1px rgba(255, 255, 255, .12); animation: float 7s ease-in-out infinite; }
.phero__media::before { content: ""; position: absolute; inset: -9%; border: 1px dashed rgba(255, 255, 255, .22); border-radius: 50%; animation: spin 60s linear infinite; z-index: -1; }
.phero__media::after { content: ""; position: absolute; inset: 8% -14% -4% 30%; background: var(--acc); opacity: .35; filter: blur(70px); z-index: -2; }
@keyframes float { 50% { transform: translateY(-16px) rotate(-1deg); } }
.bubble { position: absolute; z-index: 2; display: grid; place-items: center; text-align: center; width: 112px; height: 112px; border-radius: 50%; background: var(--acc); color: #000; font-weight: 800; font-size: 1.8rem; line-height: 1; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); animation: float 6s ease-in-out -2s infinite; inset: auto auto 7% -8%; }
.bubble small { display: block; font-size: .6rem; padding-inline: .5rem; font-weight: 600; margin-top: .25rem; line-height: 1.2; }

.two { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.two__side { position: sticky; top: 7rem; display: grid; gap: 1.1rem; }
.prose > * + * { margin-top: 1.2rem; }
.prose p { color: #3a3a41; font-size: 1.1rem; }
.prose p:first-child { font-size: 1.3rem; color: var(--text); font-weight: 500; }

.bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ben { position: relative; overflow: hidden; padding: 2rem 1.7rem; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); transition: transform .5s var(--ease), background .5s, color .5s, border-color .5s; display: grid; gap: .7rem; align-content: start; }
.ben:hover { transform: translateY(-8px); background: var(--ink); color: #fff; border-color: var(--ink); }
.ben__n { font-size: 3rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.ben p { color: var(--muted); font-size: .97rem; transition: color .5s; }
.ben:hover p { color: rgba(255, 255, 255, .7); }
.ben::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--acc); transform: scaleX(0); transform-origin: inline-start; transition: transform .6s var(--ease); }
.ben:hover::after { transform: scaleX(1); }

.comp { display: grid; gap: 1.2rem; }
.comp__g { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; padding: 1.8rem; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line-d); }
.comp__g h3 { display: flex; flex-direction: column; gap: .3rem; }
.comp__g h3 b { font-size: 3.2rem; font-weight: 800; color: var(--acc); line-height: 1; }
.comp__g > p { grid-column: 2; color: rgba(255, 255, 255, .6); font-size: .93rem; }
.pills { display: flex; flex-wrap: wrap; gap: .55rem; align-content: start; }
.pill { padding: .5rem 1.05rem; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-d); font-size: .93rem; font-weight: 500; transition: background .3s, color .3s, transform .3s var(--ease); }
.pill:hover { background: var(--acc); color: #000; transform: translateY(-3px); }

.dose { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.dose__c { padding: 2rem 1.7rem; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: grid; gap: .4rem; position: relative; overflow: hidden; }
.dose__c::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--acc); }
.dose__c small { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dose__c b { font-size: 2.3rem; font-weight: 800; line-height: 1.2; }
.dose__c span { color: var(--muted); font-size: .95rem; }
.notes { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 2rem; }
.notes li { position: relative; padding-inline-start: 1.9rem; color: #3a3a41; }
.notes li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--acc-soft); border: 2px solid var(--red); }
.facts-img { margin-top: 2.5rem; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; background: #fff; }
.facts-img figcaption { padding: .9rem 1.2rem; font-size: .9rem; color: var(--muted); }

.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mini a { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.mini a:nth-child(even) { transform: translateY(2rem); }
.mini img, .gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.mini a:hover img, .gal a:hover img { transform: scale(1.07); }

.faq { display: grid; gap: .8rem; }
.faq details { border-radius: 18px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: var(--red); box-shadow: 0 20px 40px -30px rgba(214, 28, 42, .6); }
.faq summary { list-style: none; cursor: pointer; padding: 1.3rem 1.5rem; font-weight: 600; font-size: 1.08rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper); font-size: 1.3rem; font-weight: 400; line-height: 1; transition: transform .4s var(--ease), background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq details p { padding: 0 1.5rem 1.4rem; color: var(--muted); }

.warn { display: flex; gap: 1rem; padding: 1.4rem 1.6rem; border-radius: 18px; background: #fff7d6; border: 1px solid #f0d878; color: #4d3f00; font-size: .95rem; }
.warn svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .25rem; }
.warn a { text-decoration: underline; font-weight: 600; }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.2rem; }
.filters button { padding: .6rem 1.3rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.filters button:hover { transform: translateY(-2px); border-color: var(--ink); }
.filters button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gal a { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: #e9e6df; transition: opacity .4s, transform .5s var(--ease); }
.gal a.is-hidden { display: none; }
.gal a::after { content: attr(data-cap); position: absolute; inset: auto 0 0; padding: 2.4rem 1rem .9rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; font-size: .85rem; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); }
.gal a:hover::after, .gal a:focus-visible::after { opacity: 1; transform: none; }

.lb { position: fixed; inset: 0; z-index: 400; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 6, 7, .94); color: #fff; }
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; animation: fade .35s; }
.lb img { max-height: calc(100svh - 7rem); max-width: min(92vw, 900px); width: auto; border-radius: 16px; animation: zoom .45s var(--ease); }
.lb p { padding: 1rem 1.5rem 1.6rem; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.lb button { position: absolute; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; font-size: 1.4rem; transition: background .3s; }
.lb button:hover { background: var(--red); }
.lb__x { top: 1.2rem; right: 1.2rem; } .lb__p { left: 1.2rem; top: 50%; } .lb__n { right: 1.2rem; top: 50%; }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom { from { opacity: 0; transform: scale(.94); } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cinfo { display: grid; gap: 1rem; }
.cinfo__c { display: flex; gap: 1.1rem; align-items: center; padding: 1.4rem 1.5rem; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s; }
a.cinfo__c:hover { transform: translateX(6px); border-color: var(--red); }
[dir=rtl] a.cinfo__c:hover { transform: translateX(-6px); }
.cinfo__c i { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--ink); color: #fff; }
.cinfo__c svg { width: 1.3rem; height: 1.3rem; }
.cinfo__c small { display: block; font-size: .82rem; color: var(--muted); }
.cinfo__c b { font-weight: 600; font-size: 1.05rem; }
.form { padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: calc(var(--r) * 1.3); background: var(--ink); color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7); }
.form h2 { grid-column: 1 / -1; font-size: 1.6rem; font-weight: 700; margin-bottom: .4rem; }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 500; color: rgba(255, 255, 255, .7); }
.field input, .field textarea, .field select { width: 100%; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .05); color: #fff; transition: border-color .3s, background .3s, box-shadow .3s; }
.field select option { color: #000; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 4px rgba(214, 28, 42, .25); }
.hp { position: absolute !important; left: -9999px; opacity: 0; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__msg { font-size: .93rem; }
.form__msg.ok { color: #7ee2a0; } .form__msg.err { color: #ff9aa2; }
.form small { grid-column: 1 / -1; color: rgba(255, 255, 255, .5); font-size: .82rem; }
.form small a { text-decoration: underline; }
.tbd { display: inline-block; margin-inline-start: .5rem; padding: .1rem .5rem; border-radius: 6px; background: #fff3c2; color: #6b5600; font-size: .7rem; font-weight: 600; vertical-align: middle; }

/* ---------- legal ---------- */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.45rem; font-weight: 700; margin-top: 2.8rem; margin-bottom: .7rem; padding-inline-start: 1rem; border-inline-start: 4px solid var(--red); line-height: 1.5; }
.legal p, .legal li { color: #3a3a41; }
.legal p + p { margin-top: .9rem; }
.legal ul { list-style: disc; padding-inline-start: 1.4rem; margin-top: .6rem; }
.legal a { color: var(--red); text-decoration: underline; }
.legal .upd { color: var(--muted); font-size: .9rem; }

/* ---------- motion ---------- */
.js [data-r] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-r=zoom] { transform: scale(.93); }
.js [data-r=clip] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-r].is-in { opacity: 1; transform: none; }
.js [data-r=clip].is-in { clip-path: inset(0); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.split .w > i { display: inline-block; font-style: normal; transform: translateY(115%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--sd, 0ms)); }
.split.is-in .w > i { transform: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 500; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }

/* ---------- responsive ---------- */
/* social icons + products without a page yet */
.soc { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.soc .soc__i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-d); color: #fff; background: none; transition: transform .4s var(--ease), background .3s, border-color .3s; }
.soc .soc__i svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.soc a.soc__i:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.soc .soc__i.is-off { opacity: .45; cursor: default; }
.soc--light { margin-top: .6rem; }
.soc--light .soc__i { border-color: var(--line); color: var(--ink); }
.cinfo__c--soc > span { flex: 1; }
.soon__h { margin-top: 3.5rem; font-weight: 600; font-size: 1.1rem; }
.soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.soon--list { margin-top: 0; }
.soon__c { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; border-radius: var(--r); background: #fff; border: 1px dashed rgba(10, 10, 11, .28); min-width: 0; }
.soon__c b { display: block; font-size: 1.15rem; font-weight: 700; }
.soon__c small { color: var(--muted); font-size: .88rem; }
.soon__s { flex: none; padding: .3rem .8rem; border-radius: 999px; background: var(--acc-soft); color: var(--red-deep); font-size: .8rem; font-weight: 600; }
a.soon__c { border-style: solid; border-color: var(--line); transition: transform .5s var(--ease), border-color .3s; }
a.soon__c:hover { transform: translateY(-4px); border-color: var(--red); }
a.soon__c i { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ink); color: #fff; }
a.soon__c i svg { width: 1rem; height: 1rem; }
[dir=rtl] a.soon__c i svg { transform: scaleX(-1); }
.soon:not(.soon--list) { grid-template-columns: minmax(0, 36rem); }
.soon__c img { flex: none; width: 8.5rem; height: auto; border-radius: 12px; }
.soon__c img + span { flex: 1; }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pgrid--4 .pcard__body { padding-inline: 1.3rem; }
@media (max-width: 1180px) { .pgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 941px) and (max-width: 1320px) { .nav a { padding-inline: .5rem; font-size: .88rem; } .hdr__in { gap: .8rem; } }

@media (max-width: 1040px) {
  .pgrid, .bens { grid-template-columns: repeat(2, 1fr); }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .gal { grid-template-columns: repeat(3, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero__in, .phero__in, .about, .two, .contact { grid-template-columns: 1fr; }
  .hero { padding-top: 7rem; }
  .fan { order: -1; height: 340px; margin-bottom: 1rem; }
  .fan__card:nth-child(1) { --tx: -54%; } .fan__card:nth-child(3) { --tx: 54%; }
  .ring, .scrollcue { display: none; }
  .phero { padding-top: 7.5rem; min-height: 0; }
  .phero__media { width: min(78%, 340px); order: -1; }
  .two__side { position: static; }
  .comp__g { grid-template-columns: 1fr; } .comp__g > p { grid-column: 1; }
  .notes { grid-template-columns: 1fr; }
  .about__media { max-width: 440px; }
  .about__media::before { inset: 1rem -.6rem -1rem .6rem; }
  .about__badge { inset-inline-end: .6rem; }
  .phead { padding: 8.5rem 0 3.5rem; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .pgrid, .bens, .feats { grid-template-columns: 1fr; }
  .gal, .mini { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .form { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr; gap: 2rem; }
  .hero__facts { gap: 1.4rem; }
  .hero__facts b { font-size: 1.6rem; }
  .brand img { height: 38px; }
  .lang span { display: none; }
  .bubble { width: 84px; height: 84px; font-size: 1.4rem; inset-inline-start: -4%; }
  .btn { padding: .85rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .curtain { display: none; }
  .marq__track, .strip__row { animation: none; }
  @view-transition { navigation: none; }
}