/* ===== Round 2: logo lockup, timeline, contact, social, partner hovers, slider arrows ===== */
@keyframes bounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}65%{transform:translateY(2px)}}
@keyframes spin360{to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-2)}50%{box-shadow:0 0 0 8px transparent,var(--shadow-2)}}

/* ---------- Logo lockup ---------- */
.lockup{align-items:center;gap:13px}
.lockup .mark{width:48px;height:48px}
.lockup .word{align-items:center;justify-content:center;gap:9px;line-height:1}
.lockup .word b{font-size:2rem;line-height:.95;padding-top:3px;letter-spacing:0;text-align:center}
.lockup .word .en{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.7rem;letter-spacing:.34em;color:var(--text-2);margin-inline-end:-.34em}
.lockup .word .en span{font-weight:800}
.lockup .word .en i{font-style:normal;letter-spacing:.08em;background:var(--accent);color:var(--accent-ink);padding:2px 6px 2px 7px;border-radius:6px;font-size:.66rem;line-height:1.2;margin-inline-end:0}
.site-footer .lockup .word .en{color:#b9c9e5}
.site-footer .lockup .word .en i{background:var(--amber-400);color:#2B1A00}
.lockup.xl .mark{width:92px;height:92px}
.lockup.xl .word b{font-size:3.6rem}
.lockup.xl .word .en{font-size:1.05rem}
.lockup.xl .word .en i{font-size:.95rem;padding:3px 9px;border-radius:8px}
@media (max-width:520px){
  .lockup{gap:10px}
  .lockup .mark{width:40px;height:40px}
  .lockup .word b{font-size:1.65rem}
  .lockup .word .en{font-size:.58rem;letter-spacing:.28em}
  .lockup .word .en i{font-size:.56rem;padding:1px 5px}
}
@media (max-width:370px){.lockup .word .en{display:flex}.lockup .word b{font-size:1.45rem}.lockup .word .en{letter-spacing:.2em}}

/* ---------- Timeline (about) ---------- */
.timeline{max-width:720px}
.tl{display:grid;grid-template-columns:96px 1fr;column-gap:52px;align-items:start;padding-bottom:32px;position:relative}
.tl b{color:var(--accent-text);font-weight:800;font-size:1.1rem;padding-top:2px}
.tl>div{padding-inline-start:0;color:var(--text-2);padding-top:2px}
.tl::before{content:"";position:absolute;inset-inline-start:117px;top:14px;bottom:-14px;width:2px;background:var(--line-2);translate:0 0}
.tl:last-child::before{display:none}
.tl::after{content:"";position:absolute;inset-inline-start:111px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);translate:0 0;transition:transform .3s var(--ease)}
@media (max-width:520px){.tl{grid-template-columns:70px 1fr;column-gap:40px}.tl::before{inset-inline-start:84px}.tl::after{inset-inline-start:78px}}

/* ---------- Contact channels ---------- */
.channels{display:grid;gap:16px;align-content:start}
.card.channel{flex-direction:row;align-items:center;gap:18px;padding:22px 24px;margin:0}
.card.channel+.card.channel{margin-top:0}
.card.channel .ic{flex:none;width:56px;height:56px}
.ch-txt{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:flex-start}
.ch-label{font-size:.85rem;color:var(--text-3);font-weight:700;line-height:1.2}
.ch-val{font-weight:800;color:var(--text);font-size:1.05rem;line-height:1.3;word-break:break-all;unicode-bidi:isolate}
a.ch-val{color:var(--brand-strong);direction:ltr;transition:color .2s}
a.ch-val:hover{color:var(--accent-text)}
.ch-val.plain{font-weight:700}

/* ---------- Social icons ---------- */
.social{display:flex;flex-wrap:wrap;gap:8px}
.soc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);transition:transform .3s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .3s}
.soc svg{width:19px;height:19px}
.soc:hover{transform:translateY(-4px) scale(1.06);color:#fff;border-color:transparent;box-shadow:0 10px 20px -8px rgba(0,0,0,.35)}
.soc-facebook:hover{background:#1877F2}.soc-x:hover{background:#111}.soc-linkedin:hover{background:#0A66C2}.soc-youtube:hover{background:#FF0000}
.soc-instagram:hover{background:linear-gradient(45deg,#F9A13C,#E1306C 55%,#833AB4)}.soc-whatsapp:hover{background:#25D366}.soc-tiktok:hover{background:#010101}
.soc.off{opacity:.6;cursor:default}
.soc.off:hover{transform:translateY(-2px);box-shadow:none}
.social.on-dark{margin-top:20px}
.social.on-dark .soc{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#d3def2}

/* ---------- Slider arrows (RTL-aware) ---------- */
[dir=rtl] .sl-btn svg{transform:scaleX(-1)}

.soc{width:38px;height:38px}.soc svg{width:17px;height:17px}.social{gap:7px}

/* inner pages: tighter gap under the page hero */
.page-hero + .section,.page-hero + .lab-backdrop + .section{padding-top:48px}

/* footer social: brand-color hover (same as contact page) */
.social.on-dark .soc:hover{color:#fff;border-color:transparent}
.social.on-dark .soc-facebook:hover{background:#1877F2}.social.on-dark .soc-x:hover{background:#111;border-color:rgba(255,255,255,.35)}.social.on-dark .soc-linkedin:hover{background:#0A66C2}.social.on-dark .soc-youtube:hover{background:#FF0000}
.social.on-dark .soc-instagram:hover{background:linear-gradient(45deg,#F9A13C,#E1306C 55%,#833AB4)}.social.on-dark .soc-whatsapp:hover{background:#25D366}.social.on-dark .soc-tiktok:hover{background:#000;border-color:rgba(255,255,255,.35)}
.social.on-dark .soc.off:hover{opacity:.9}
