:root{
  --navy:#0e2a44; --ink:#0d2233; --body:#5a6b7b; --body-soft:#7b8a99;
  --orange:#ef5a24; --orange-dark:#d64d18; --orange-soft:#fff1ea;
  --bg:#ffffff; --surface:#f5f8fc; --surface-2:#eef3f9; --line:#e5eaf1;
  --footer:#0e2233; --cream:#fff7f2;
  --maxw:1280px; --radius:14px;
  --shadow-sm:0 4px 14px rgba(14,42,68,.06);
  --shadow:0 12px 34px rgba(14,42,68,.10);
  --shadow-lg:0 26px 60px rgba(14,42,68,.16);
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --script:'Caveat',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--navy);font-weight:800;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;font-weight:800;color:var(--orange);margin-bottom:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;
  font-weight:700;font-size:15px;padding:12px 20px;border:0;border-radius:10px;cursor:pointer;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-block{width:100%;padding:16px}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(239,90,36,.28)}
.btn-primary:hover{background:var(--orange-dark)}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#cdd7e2}
.wa{flex:none}

/* brand */
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{height:42px;width:auto;flex:none;color:var(--navy)}
.footer .brand{background:#fff;padding:14px 18px;border-radius:14px;align-self:flex-start}
.footer .brand-mark{color:var(--navy);height:40px}
.footer .brand .bw-1.on-dark{color:var(--navy)}
.footer .brand .brand-tag{color:#5a6b7b}
.brand-word{font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1;display:block}
.bw-1{color:var(--navy)} .bw-1.on-dark{color:#f4f7fb} .bw-2{color:var(--orange)}
.brand-tag{display:block;font-size:11px;color:var(--body-soft);font-weight:500;margin-top:3px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:76px}
.brand{flex:none}
.nav-links{flex:1;display:flex;justify-content:center;gap:clamp(16px,1.8vw,28px);font-size:14.5px;font-weight:600}
.nav-links a{position:relative;padding:4px 0;color:#33475b;white-space:nowrap;transition:color .15s ease}
.nav-links a:hover{color:var(--navy)}
.nav-links a.active{color:var(--navy)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2.5px;background:var(--orange);border-radius:2px}
.nav-right{flex:none;display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:14px;font-weight:600;color:#33475b;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;transition:border-color .15s ease}
.lang-btn:hover{border-color:#cdd7e2}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:184px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);list-style:none;margin:0;padding:6px;z-index:60}
.lang-menu li{padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#33475b;cursor:pointer}
.lang-menu li:hover{background:var(--surface)}
.lang-menu li[aria-selected="true"]{color:var(--orange);background:var(--orange-soft)}

/* hero — full-bleed banner */
.hero{position:relative;overflow:hidden;background:var(--cream)}
.hero-media{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;background-color:#f0dccd;background-position:center right;background-size:cover;background-repeat:no-repeat;opacity:0;animation:heroFade 21s infinite}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:7s}
.hero-slide:nth-child(3){animation-delay:14s}
@keyframes heroFade{0%{opacity:0}5%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 30%,rgba(255,247,242,.72) 46%,rgba(255,247,242,0) 66%)}
.hero-script{position:absolute;z-index:2;top:30px;right:5.5%;font-family:var(--script);font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.02;text-align:right;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-inner{position:relative;z-index:3;display:flex;align-items:center;min-height:560px}
.hero-copy{max-width:600px;padding:48px 0}
.hero-copy h1{font-size:clamp(38px,5.2vw,58px)}
.hero-sub{font-size:clamp(17px,1.6vw,20px);color:var(--body);max-width:44ch;margin:18px 0 28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px}
.hero-badges{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0}
.hero-badges li{display:flex;gap:11px}
.badge-ic{flex:none;color:var(--navy)}
.badge-ic svg{width:28px;height:28px}
.hero-badges strong{display:block;color:var(--navy);font-size:14px;line-height:1.2}
.hero-badges span{display:block;color:var(--body);font-size:12.5px;line-height:1.4;margin-top:3px}

/* sections */
.section{padding:64px 0;scroll-margin-top:88px}
.section.alt{background:var(--surface)}
h2{font-size:clamp(26px,3.2vw,36px)}
.lead{color:var(--body);max-width:70ch;margin:12px 0 0;font-size:17px}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
.about-lead h2{margin-top:2px}
.about-lead p{color:var(--body);font-size:17px;margin-top:16px;line-height:1.7}
.about-cards{display:grid;gap:16px}
.about-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.ac-ic{grid-row:1/3;width:46px;height:46px;border-radius:11px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center}
.ac-ic svg{width:24px;height:24px}
.about-card strong{color:var(--navy);font-size:16px;align-self:end}
.about-card p{color:var(--body);font-size:14px;line-height:1.5}

/* what we source — 7 aligned cards */
.cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;margin-top:36px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:scale(1.06);box-shadow:var(--shadow-lg);z-index:2}
.card-img{height:172px;flex:none;overflow:hidden;background:var(--surface-2)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-body h3{font-size:15.5px}
.card-body p{color:var(--body);font-size:12.5px;line-height:1.45}
.card-custom{background:var(--surface);justify-content:flex-start}
.card-ic{width:52px;height:52px;border-radius:12px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;margin:16px 14px 0}
.card-ic svg{width:26px;height:26px}

/* how it works */
.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.step-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-no{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:15px;flex:none}
.step-ic{color:var(--navy)}
.step-ic svg{width:26px;height:26px}
.steps h3{font-size:17px;margin-bottom:7px}
.steps p{color:var(--body);font-size:14px;line-height:1.55}

/* why */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:34px}
.reason{display:flex;flex-direction:column;gap:8px}
.reason-ic{width:48px;height:48px;border-radius:12px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center}
.reason-ic svg{width:25px;height:25px}
.reason strong{color:var(--navy);font-size:16.5px}
.reason p{color:var(--body);font-size:14px;line-height:1.55}

/* contact / form — standalone */
.contact{background:var(--surface)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.contact-info h2{margin-top:2px;font-size:clamp(28px,3.4vw,40px)}
.contact-info>p{color:var(--body);font-size:17px;margin:14px 0 22px;line-height:1.7}
.contact-points{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.contact-points li{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:600;font-size:15px}
.contact-points svg{width:20px;height:20px;flex:none;color:var(--orange);background:var(--orange-soft);border-radius:50%;padding:3px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow-lg)}
#sourcing-form{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;font:inherit;font-size:14.5px;color:var(--ink)}
.fld::placeholder{color:#98a6b4}
.fld:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(239,90,36,.12)}
.upload{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px dashed #c6d2df;border-radius:10px;padding:14px;cursor:pointer;color:var(--body);transition:border-color .15s ease,background .15s ease}
.upload:hover{border-color:var(--orange);background:var(--orange-soft)}
.upload-text{font-size:13.5px;line-height:1.35}
.upload-text small{color:var(--body-soft)}
.form-status{min-height:1.2em;font-weight:600;font-size:14px;margin:0}
.form-status.ok{color:#127a3a} .form-status.err{color:#c23}
.form-status a{color:var(--orange);text-decoration:underline}
select.fld{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px;cursor:pointer}
[dir="rtl"] select.fld{background-position:left 12px center;padding-right:14px;padding-left:38px}

/* for-suppliers section (dark, to distinguish the supplier side) */
.suppliers{background:var(--navy);color:#fff;scroll-margin-top:88px}
.suppliers h2{color:#fff}
.suppliers .contact-info>p{color:#c4d0dc}
.suppliers .contact-points li{color:#eaf0f6}
.suppliers .contact-points svg{color:var(--orange);background:rgba(239,90,36,.2)}
.suppliers .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22)}
.suppliers .btn-ghost:hover{border-color:rgba(255,255,255,.45)}

/* shared bits */
.accent{color:var(--orange)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.wrap-narrow{max-width:820px;margin-left:auto;margin-right:auto}
.step-img{height:170px;border-radius:14px;overflow:hidden;margin:0 0 16px}
.step-img img{width:100%;height:100%;object-fit:cover;display:block}
/* supplier steps: number badge overlaid on the image (no icon) */
.steps-media .step-img{position:relative}
.steps-media .step-no{position:absolute;top:12px;left:12px;margin:0;z-index:2;border:2px solid #fff;box-shadow:0 4px 12px rgba(14,42,68,.3)}
.kicker{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;font-weight:800;color:var(--orange);margin-bottom:10px}

/* audience toggle */
.aud-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.aud{padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:700;color:#33475b;white-space:nowrap;transition:background .15s ease,color .15s ease}
.aud.active{background:var(--navy);color:#fff}
.aud:not(.active):hover{color:var(--navy)}

/* suppliers teaser (buyer page) */
.suppliers-teaser{background:var(--navy);color:#fff}
.suppliers-teaser .eyebrow{color:var(--orange)}
.suppliers-teaser h2{color:#fff}
.suppliers-teaser p{color:#c4d0dc;margin-top:10px}
.teaser-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.teaser-copy{max-width:60ch}

/* supplier hero extras */
.hero-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:16px}
.hero-copy .accent{color:var(--orange)}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:24px 0 0;padding:0}
.hero-chips li{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:600}
.hero-chips svg{width:18px;height:18px;color:var(--orange);flex:none}

/* what you get / who can join */
.get-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.get-card{background:var(--navy);color:#fff;border-radius:18px;padding:32px}
.get-card h2{color:#fff;font-size:26px;margin-bottom:20px}
.get-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.get-list li{display:flex;gap:14px}
.get-ic{flex:none;width:42px;height:42px;border-radius:11px;background:rgba(239,90,36,.2);color:var(--orange);display:grid;place-items:center}
.get-ic svg{width:22px;height:22px}
.get-list strong{display:block;color:#fff;font-size:16px;margin-bottom:3px}
.get-list p{color:#c4d0dc;font-size:14px;line-height:1.5}
.who-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow-sm)}
.who-card h2{font-size:26px;margin-bottom:20px}
.who-types{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.who-type{background:var(--orange-soft);color:var(--orange-dark);border:1px solid #f7d9c9;border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:600}
.look-box{background:var(--surface);border-radius:12px;padding:22px}
.look-box h3{font-size:16px;margin-bottom:14px}
.look-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.look-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)}
.look-list svg{width:18px;height:18px;flex:none;color:var(--orange)}

/* closing band */
.sp-close{position:relative;overflow:hidden;color:#fff;padding:84px 0}
.sp-close-bg{position:absolute;inset:0;background:linear-gradient(rgba(14,42,68,.9),rgba(14,42,68,.93)),url("https://images.unsplash.com/photo-1717386255773-1e3037c81788?w=1600&q=65&auto=format&fit=crop") center/cover no-repeat}
.sp-close-inner{position:relative;text-align:center;max-width:720px;margin:0 auto}
.sp-close h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.sp-close p{color:#c9d6e2;font-size:18px;margin:16px 0 28px}

/* trust strip */
.sp-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.sp-trust-item{display:flex;gap:14px}
.sp-trust-item strong{display:block;color:var(--navy);font-size:16px;margin-bottom:5px}
.sp-trust-item p{color:var(--body);font-size:14px;line-height:1.55;margin-bottom:12px}

@media (max-width:860px){
  .get-grid{grid-template-columns:1fr}
  .sp-trust-grid{grid-template-columns:1fr}
}

/* footer */
.footer{position:relative;background:var(--footer);color:#c4d0dc;overflow:hidden}
.footer-bg{position:absolute;inset:0;z-index:0;opacity:.13;background:url("https://images.unsplash.com/photo-1553068519-4a0c6bd5ef68?w=1400&q=60&auto=format&fit=crop") center/cover no-repeat}
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:2fr 1fr 1.3fr 1.3fr;gap:40px;padding:56px 0 36px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand .brand-tag{color:#93a6b8}
.footer-brand p{color:#a9bccb;font-size:14px;max-width:42ch;line-height:1.6}
.footer-col h4{color:#fff;font-size:15px;margin-bottom:16px}
.footer-col a{display:block;color:#a9bccb;font-size:14px;padding:5px 0;transition:color .15s ease}
.footer-col a:hover{color:#fff}
.footer-col p{font-size:14px;color:#a9bccb;margin-bottom:10px}
.fc{display:flex;align-items:center;gap:10px}
.fc svg{width:17px;height:17px;flex:none;color:var(--orange)}
.footer-bottom{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:13px;color:#8ba0b2}

/* reveal */
.reveal{opacity:0;transform:translateY(var(--ry,22px));transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,.upload:focus-within{outline:3px solid var(--orange);outline-offset:2px}

/* responsive */
@media (max-width:1240px){
  .nav-links{position:absolute;top:100%;left:0;right:0;flex:none;flex-direction:column;align-items:stretch;
    gap:2px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);padding:10px 24px 16px;display:none}
  .site-header.open .nav-links{display:flex}
  .nav-links a{padding:12px 4px;font-size:16px;white-space:normal}
  .nav-links a.active::after{display:none}
  .nav-links a.active{color:var(--orange)}
  .nav-toggle{display:inline-flex}
  .nav-right .btn-primary{display:none}
}
@media (max-width:1160px){
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hero-media{background-position:center right -60px}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .reasons{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  .wrap{padding:0 22px}
  /* header: brand + lang + menu on row 1, audience toggle full-width on row 2 */
  .nav{flex-wrap:wrap;height:auto;gap:10px 12px;padding:12px 0}
  .brand{flex:1 1 auto;min-width:0}
  .nav-right{display:contents}
  .aud-toggle{order:3;flex:1 1 100%;display:flex}
  .aud{flex:1;text-align:center;white-space:normal;padding:7px 8px}
  .section,.suppliers{scroll-margin-top:140px}
  .hero-media::after{background:linear-gradient(180deg,rgba(255,247,242,.9),rgba(255,247,242,.6))}
  .hero-script{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .brand-tag{display:none}
  .hero-badges{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .hero-cta .btn{flex:1}
  .footer-grid{grid-template-columns:1fr}
}
/* CJK / Arabic fonts per language */
html[lang="zh"] body{font-family:'Noto Sans SC',var(--sans)}
html[lang="ar"] body{font-family:'Noto Sans Arabic',var(--sans)}
html[lang="zh"] .hero-script{font-family:'Noto Sans SC',sans-serif;font-weight:800;line-height:1.25}
html[lang="ar"] .hero-script{font-family:'Noto Sans Arabic',sans-serif;font-weight:800;line-height:1.45}

/* RTL (Arabic) */
[dir="rtl"] .hero-media{background-position:center left}
@media (min-width:761px){[dir="rtl"] .hero-media::after{background:linear-gradient(270deg,var(--cream) 0%,var(--cream) 30%,rgba(255,247,242,.72) 46%,rgba(255,247,242,0) 66%)}}
[dir="rtl"] .hero-script{right:auto;left:5.5%;text-align:left}
[dir="rtl"] .hero-sub{max-width:none}
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] .contact-points li,[dir="rtl"] .hero-badges li,[dir="rtl"] .fc{flex-direction:row-reverse}
[dir="rtl"] .lead{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
  .hero-slide{animation:none;opacity:0}
  .hero-slide:first-child{opacity:1}
  .chat-launcher:hover{transform:none}
}

/* ---------- chat / FAQ widget ---------- */
.chat-widget{position:fixed;bottom:22px;right:22px;z-index:80}
[dir="rtl"] .chat-widget{right:auto;left:22px}
.chat-launcher{width:60px;height:60px;border-radius:50%;background:var(--orange);color:#fff;border:0;cursor:pointer;box-shadow:0 12px 30px rgba(239,90,36,.4);display:grid;place-items:center;transition:transform .15s ease,background .15s ease}
.chat-launcher:hover{background:var(--orange-dark);transform:translateY(-2px)}
.chat-launcher svg{width:26px;height:26px}
.chat-launcher .ic-close{display:none}
.chat-widget.open .chat-launcher .ic-chat{display:none}
.chat-widget.open .chat-launcher .ic-close{display:block}
.chat-panel{position:absolute;bottom:74px;right:0;width:342px;max-width:calc(100vw - 44px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:min(560px,78vh)}
.chat-panel[hidden]{display:none}
[dir="rtl"] .chat-panel{right:auto;left:0}
.chat-head{background:var(--navy);color:#fff;padding:15px 18px;font-weight:700;font-size:16px;flex:none}
.chat-log{padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;background:var(--surface)}
.chat-msg{max-width:86%;padding:10px 13px;border-radius:13px;font-size:14px;line-height:1.5}
.chat-msg.bot{background:#fff;border:1px solid var(--line);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:var(--orange);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
[dir="rtl"] .chat-msg.bot{align-self:flex-end;border-bottom-left-radius:13px;border-bottom-right-radius:4px}
[dir="rtl"] .chat-msg.user{align-self:flex-start;border-bottom-right-radius:13px;border-bottom-left-radius:4px}
.chat-qs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line);max-height:148px;overflow-y:auto;flex:none}
.chat-q{background:var(--orange-soft);color:var(--orange-dark);border:1px solid #f7d9c9;border-radius:999px;padding:8px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s ease}
.chat-q:hover{background:#ffe4d6}
.chat-wa{margin:0 16px 16px;border-radius:10px;flex:none}
@media (max-width:520px){
  .chat-widget{bottom:16px;right:16px}
  [dir="rtl"] .chat-widget{left:16px}
}