/* Hainan Tropical Export — shared stylesheet
   Clean B2B export site. Fast, no frameworks, no JS required. */
:root{
  --green-900:#123f22; --green-700:#1b5e20; --green-500:#2e7d32; --green-100:#e8f5e9;
  --sand:#f7f4ec; --ink:#1f2933; --muted:#5b6570; --line:#e3e8e3; --accent:#c8963e;
  --max:1120px; --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji";color:var(--ink);line-height:1.65;background:#fff}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
/* header */
header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;font-size:18px;color:var(--green-900);letter-spacing:.3px}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.6px}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--ink);font-size:15px}
.nav-links a.active{color:var(--green-700);font-weight:700}
.langs{display:flex;gap:8px;font-size:13px}
.langs a{padding:4px 10px;border:1px solid var(--line);border-radius:20px;color:var(--muted)}
.langs a.on{background:var(--green-700);color:#fff;border-color:var(--green-700)}
/* hero */
.hero{background:linear-gradient(120deg,var(--green-900),var(--green-500));color:#fff;padding:64px 0 56px}
.hero h1{font-size:40px;line-height:1.25;margin:0 0 14px;max-width:760px}
.hero p.lead{font-size:18px;opacity:.92;max-width:720px;margin:0 0 26px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:12px 26px;border-radius:var(--radius);font-size:16px}
.btn:hover{background:#b3852f;text-decoration:none}
.btn.ghost{background:transparent;border:2px solid #fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
/* sections */
section{padding:52px 0}
section.alt{background:var(--sand)}
h2.sec{font-size:28px;margin:0 0 8px;color:var(--green-900)}
p.sub{color:var(--muted);margin:0 0 28px;max-width:760px}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff}
.card h3{margin:0 0 10px;font-size:20px;color:var(--green-900)}
.card p{color:var(--muted);font-size:15px;margin:0 0 14px}
/* tables */
table.spec{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
table.spec th,table.spec td{border:1px solid var(--line);padding:10px 14px;text-align:left}
table.spec th{background:var(--green-100);color:var(--green-900);white-space:nowrap}
/* faq */
.faq{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:#fff}
.faq summary{padding:16px 20px;font-weight:700;cursor:pointer;color:var(--green-900)}
.faq .a{padding:0 20px 18px;color:var(--muted)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:26px 0}
.stat{background:var(--green-100);border-radius:var(--radius);padding:20px;text-align:center}
.stat b{display:block;font-size:30px;color:var(--green-700)}
.stat span{font-size:14px;color:var(--muted)}
/* steps */
.steps{counter-reset:step;display:grid;gap:14px}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px 18px 64px;position:relative;background:#fff}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--green-700);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
/* footer */
footer.site{background:var(--green-900);color:#dfe9df;padding:44px 0 30px;margin-top:20px}
footer.site a{color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:24px}
.foot-grid h4{margin:0 0 10px;color:#fff;font-size:15px}
.foot-grid p,.foot-grid li{font-size:14px;color:#c4d4c4;margin:4px 0;list-style:none;padding:0}
.copy{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;font-size:13px;color:#a9bda9}
/* breadcrumb-ish kicker */
.kicker{display:inline-block;background:var(--green-100);color:var(--green-700);font-size:13px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:14px}
ul.ticks{padding-left:0;list-style:none}
ul.ticks li{padding:6px 0 6px 30px;position:relative}
ul.ticks li::before{content:"✓";position:absolute;left:4px;color:var(--green-500);font-weight:800}
/* RTL for Arabic */
[dir="rtl"] .step{padding:18px 64px 18px 20px}
[dir="rtl"] .step::before{left:auto;right:18px}
[dir="rtl"] ul.ticks li{padding:6px 30px 6px 0}
[dir="rtl"] ul.ticks li::before{left:auto;right:4px}
@media(max-width:640px){.hero h1{font-size:30px}.nav-links{display:none}}

.brand{flex:none}
.brand img{height:46px;width:auto;max-width:52vw;object-fit:contain;display:block}
@media (max-width:640px){.brand img{height:36px}}
.brand{text-decoration:none}