/* ═══════════════════════════════════════════════════
HOME PAGE — PROFESSIONAL DESIGN SYSTEM
All new .hp-* classes — zero conflicts with style.css
═══════════════════════════════════════════════════ */
/* ── NAV ── */
/* Keeps the hamburger button anchored next to the logo instead of at the opposite end —
both sit at the flex "start", which flow direction naturally puts on the right in
Arabic (RTL) and the left in English/Chinese (LTR), with no per-language rule needed. */
.home-nav-start { display: flex; align-items: center; gap: 10px; }
.home-nav.nav-scrolled {
background: rgba(6,13,26,0.97) !important;
box-shadow: 0 2px 32px rgba(0,0,0,.45), 0 1px 0 rgba(245,166,35,.08);
border-bottom-color: rgba(245,166,35,.12) !important;
}
/* ── HERO ── */
.hp-hero {
position: relative;
min-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
background: #060d1a;
}
.hp-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
z-index: 0;
}
.hp-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to bottom, rgba(6,13,26,.78) 0%, rgba(6,13,26,.48) 45%, rgba(6,13,26,.9) 95%),
linear-gradient(to right, rgba(6,13,26,.55) 0%, transparent 60%);
}
.hp-hero-body {
position: relative;
z-index: 2;
flex: 1;
display: flex;
align-items: center;
padding-top: 96px;
padding-bottom: 140px; /* clears the 54px stats strip */
}
.hp-hero-text {
max-width: 680px;
}
body.rtl .hp-hero-text { margin-inline-end: auto; }
body.ltr .hp-hero-text { margin-inline-start: 0; }
/* The shared Google Fonts stylesheet uses font-display:swap for every weight, which is the
right tradeoff for body text (show fallback immediately, swap in the real font whenever it
arrives) — but for this one huge, above-the-fold heading that swap was measured as ~0.21 of
this page's ~0.215 total CLS score (basically the entire problem). These two faces reuse the
exact same files already ed in , under a distinct family name, with
font-display:optional instead: the browser waits only a very short beat for the (already
in-flight) preloaded file, and if it's not ready commits to the fallback for this render
instead of swapping later — since it's preloaded, it's normally ready in time regardless. */
@font-face {
font-family: 'TajawalHero';
font-style: normal;
font-weight: 900;
font-display: optional;
src: url(https://fonts.gstatic.com/s/tajawal/v12/Iurf6YBj_oCad4k1l7KmHrRpiYlJ.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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: 'TajawalHero';
font-style: normal;
font-weight: 900;
font-display: optional;
src: url(https://fonts.gstatic.com/s/tajawal/v12/Iurf6YBj_oCad4k1l7KmHrFpiQ.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;
}
/* Headline */
.hp-hero-text h1 {
font-family: 'TajawalHero', 'Tajawal', 'Inter', sans-serif;
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 900;
line-height: 1.15;
color: #fff;
margin: 0 0 18px;
letter-spacing: -.025em;
}
.hp-hero-text h1 em {
font-style: normal;
background: linear-gradient(120deg, #f5a623 20%, #fcd34d 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hp-hero-sub {
font-size: clamp(.9rem, 1.8vw, 1.05rem);
color: rgba(255,255,255,.68);
line-height: 1.8;
margin: 0 0 26px;
max-width: 520px;
}
/* Feature pills */
.hp-pills {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255,255,255,.09);
}
.hp-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.13);
border-radius: 100px;
font-size: .84rem;
font-weight: 600;
color: rgba(255,255,255,.88);
backdrop-filter: blur(6px);
transition: background .2s;
}
.hp-pill:hover { background: rgba(255,255,255,.12); }
.hp-pill-check { color: #4ade80; font-size: .8rem; font-weight: 900; }
/* Hero CTA row */
.hp-cta-row {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;
}
.hp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 22px;
border-radius: 10px;
font-size: .88rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: all .22s ease;
text-decoration: none;
font-family: inherit;
white-space: nowrap;
box-sizing: border-box;
}
.hp-btn-wa { background: #22c55e; color: #fff; box-shadow: 0 4px 18px rgba(34,197,94,.3); }
.hp-btn-wa:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(34,197,94,.38); }
/* Same visual weight class as .hp-btn-wc — used where WhatsApp should read as a secondary
contact option rather than the primary action (e.g. the hero, where "submit shipment
details" is the real conversion path and shouldn't be out-shadowed by a solid CTA next
to it). .hp-btn-wa itself stays solid/primary for its other uses (price panel, CTA box). */
.hp-btn-wa-soft {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
box-shadow: none;
}
.hp-btn-wa-soft:hover {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.5);
transform: translateY(-2px);
}
.hp-btn-wc {
background: rgba(7, 193, 96, 0.12);
color: #10e576;
border: 1px solid rgba(7, 193, 96, 0.3);
box-shadow: none;
}
.hp-btn-wc:hover {
background: rgba(7, 193, 96, 0.2);
border-color: rgba(7, 193, 96, 0.5);
transform: translateY(-2px);
}
.hp-btn-gold {
background: linear-gradient(135deg, #f5a623, #fcd34d);
color: #111827;
box-shadow: 0 4px 18px rgba(245,166,35,.3);
}
.hp-btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 8px 26px rgba(245,166,35,.4);
}
.hp-btn-outline {
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(6px);
}
.hp-btn-outline:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
/* Stats strip */
.hp-stats {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 3;
display: flex;
align-items: stretch;
background: rgba(3,8,18,.9);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border-top: 1px solid rgba(255,255,255,.07);
}
.hp-stat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 10px;
gap: 4px;
text-align: center;
}
.hp-stat strong {
font-size: 1.15rem;
font-weight: 900;
color: #f5a623;
line-height: 1;
}
.hp-stat span {
font-size: .68rem;
color: rgba(255,255,255,.42);
font-weight: 600;
white-space: nowrap;
}
.hp-stat-sep {
width: 1px;
background: rgba(255,255,255,.07);
margin: 12px 0;
flex-shrink: 0;
}
/* ── SECTIONS ── */
.hp-section { padding: clamp(64px,9vw,110px) 0; }
.hp-section-alt {
background: rgba(255,255,255,.022);
border-top: 1px solid rgba(255,255,255,.05);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.hp-section-head { margin-bottom: 52px; }
.hp-section-head.centered { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: 52px; }
.hp-tag {
display: inline-flex;
align-items: center;
background: rgba(245,166,35,.1);
border: 1px solid rgba(245,166,35,.22);
border-radius: 100px;
padding: 5px 14px;
font-size: .74rem;
font-weight: 700;
color: #f5a623;
margin-bottom: 14px;
letter-spacing: .02em;
}
.hp-section-head h2 {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 900;
color: #fff;
line-height: 1.2;
margin: 0 0 14px;
letter-spacing: -.025em;
}
.hp-section-head p {
font-size: .98rem;
color: rgba(255,255,255,.58);
line-height: 1.8;
margin: 0;
max-width: 560px;
}
.hp-section-head.centered p { margin-inline: auto; }
/* ── SERVICE CARDS ── */
.hp-cards {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
}
.hp-card {
background: rgba(255,255,255,.048);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 28px 24px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
position: relative;
overflow: hidden;
}
.hp-card:hover { transform: translateY(-5px); }
/* Bottom accent line on hover */
.hp-card::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
border-radius: 0 0 16px 16px;
opacity: 0;
transition: opacity .3s;
}
.hp-card:hover::after { opacity: 1; }
.hp-card-blue::after { background: linear-gradient(90deg, #38bdf8, #818cf8); }
.hp-card-green::after { background: linear-gradient(90deg, #4ade80, #34d399); }
.hp-card-gold::after { background: linear-gradient(90deg, #f5a623, #fbbf24); }
.hp-card-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
flex-shrink: 0;
}
.hp-card-blue .hp-card-icon { background: rgba(56,189,248,.11); border: 1px solid rgba(56,189,248,.2); color: #7dd3fc; }
.hp-card-green .hp-card-icon { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.2); color: #86efac; }
.hp-card-gold .hp-card-icon { background: rgba(245,166,35,.11); border: 1px solid rgba(245,166,35,.2); color: #f5a623; }
.hp-card-blue:hover { border-color: rgba(56,189,248,.2); box-shadow: 0 22px 52px rgba(0,0,0,.22), 0 0 0 1px rgba(56,189,248,.1); }
.hp-card-green:hover { border-color: rgba(74,222,128,.2); box-shadow: 0 22px 52px rgba(0,0,0,.22), 0 0 0 1px rgba(74,222,128,.1); }
.hp-card-gold:hover { border-color: rgba(245,166,35,.22); box-shadow: 0 22px 52px rgba(0,0,0,.22), 0 0 0 1px rgba(245,166,35,.1); }
/* Center card slightly elevated */
.hp-card-green {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.11);
}
.hp-card-tag {
display: inline-block;
font-size: .69rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 100px;
margin-bottom: 12px;
}
.hp-card-blue .hp-card-tag { background: rgba(56,189,248,.1); color: #7dd3fc; }
.hp-card-green .hp-card-tag { background: rgba(74,222,128,.1); color: #86efac; }
.hp-card-gold .hp-card-tag { background: rgba(245,166,35,.1); color: #f5a623; }
.hp-card h3 { font-size: 1.04rem; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.hp-card p { font-size: .87rem; color: rgba(255,255,255,.55); line-height: 1.75; margin: 0; }
.lang-pill {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.9);
padding: 6px 14px;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 700;
transition: all 0.25s cubic-bezier(.2,.8,.2,1);
box-shadow: inset 0 0 12px rgba(255,255,255,0.02);
}
.lang-pill:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
color: #fff;
transform: translateY(-1px);
}
.home-nav-links {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
}
.home-nav-links a {
font-size: .84rem;
font-weight: 600;
color: rgba(255,255,255,.72);
padding: 6px 12px;
border-radius: 8px;
transition: color .2s, background .2s;
white-space: nowrap;
}
.home-nav-links a:hover {
color: #fff;
background: rgba(255,255,255,.07);
}
/* Hamburger toggle for the off-canvas nav drawer below ~1080px — hidden on desktop, where
.home-nav-links stays a normal horizontal bar (rules above this point). */
.nav-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 8px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: #fff;
cursor: pointer;
padding: 0;
/* The drawer panel it toggles is a sibling with z-index:998 that visually covers the
same corner once open (it has to start from behind the button to slide in) — without
its own higher z-index the hamburger/close icon would be buried under that panel. */
position: relative;
z-index: 999;
}
.nav-hamburger:hover { background: rgba(255,255,255,.14); }
.nav-hamburger .icon-close { display: none; }
.nav-hamburger.open .icon-menu { display: none; }
.nav-hamburger.open .icon-close { display: block; }
.nav-backdrop { display: none; }
/* ── NAV SCROLL STATE ── */
/* ── PROCESS STEPS ── */
.hp-steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0 14px;
align-items: start;
}
.hp-step {
background: rgba(255,255,255,.048);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 26px 22px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.hp-step:hover {
transform: translateY(-4px);
border-color: rgba(245,166,35,.22);
box-shadow: 0 20px 48px rgba(0,0,0,.2);
}
.hp-step-num {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(245,166,35,.1);
border: 1px solid rgba(245,166,35,.24);
color: #f5a623;
font-size: .88rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: .02em;
}
.hp-step-body h3 { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 8px; }
.hp-step-body p { font-size: .86rem; color: rgba(255,255,255,.54); line-height: 1.75; margin: 0; }
.hp-step-arrow {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 32px;
color: rgba(255,255,255,.2);
flex-shrink: 0;
line-height: 1;
}
body.rtl .hp-step-arrow svg { transform: scaleX(-1); }
.hp-steps-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 44px;
flex-wrap: wrap;
}
/* ── DOCS + PRICE ── */
.split-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 52px;
align-items: start;
}
body.ltr .split-grid { grid-template-columns: 400px 1fr; }
.hp-docs-col h2 {
font-size: clamp(1.4rem, 2.8vw, 2rem);
font-weight: 900;
color: #fff;
line-height: 1.2;
margin: 0 0 12px;
letter-spacing: -.02em;
}
.section-copy {
font-size: .9rem;
color: rgba(255,255,255,.56);
line-height: 1.8;
margin: 0 0 26px;
}
.hp-doc-list { display: flex; flex-direction: column; gap: 12px; }
.hp-doc {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 20px;
background: linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0.045));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
transition: all .3s cubic-bezier(.2,.8,.2,1);
cursor: default;
position: relative;
overflow: hidden;
}
/* Sleek side accent line */
.hp-doc::before {
content: "";
position: absolute;
top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, #f5a623, #fcd34d);
opacity: 0;
transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
transform: scaleY(0);
}
.hp-doc::before { right: 0; }
body.ltr .hp-doc::before { right: auto; left: 0; }
.hp-doc:hover {
background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08));
border-color: rgba(245,166,35,0.25);
transform: translateX(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
body.ltr .hp-doc:hover { transform: translateX(6px); }
.hp-doc:hover::before { opacity: 1; transform: scaleY(1); }
.hp-doc-num {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(245,166,35,.08);
border: 1px solid rgba(245,166,35,.18);
color: #fcd34d;
font-size: .85rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: inset 0 0 10px rgba(245,166,35,0.05);
transition: all .3s ease;
}
.hp-doc:hover .hp-doc-num {
background: rgba(245,166,35,.18);
border-color: rgba(245,166,35,.35);
color: #fff;
transform: scale(1.08);
box-shadow: 0 6px 16px rgba(245,166,35,0.15);
}
.hp-doc > div:not(.hp-doc-num) { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hp-doc > div:not(.hp-doc-num) strong { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: -0.01em; transition: color .3s; }
.hp-doc > div:not(.hp-doc-num) small { font-size: .8rem; color: rgba(255,255,255,.45); letter-spacing: 0.02em; }
.hp-doc:hover > div:not(.hp-doc-num) strong { color: #fcd34d; }
/* ── PRICE PANEL ── */
.hp-price-panel {
position: relative;
background: rgba(12,22,40,0.65);
border: 1px solid rgba(56,189,248,0.18);
border-radius: 20px;
padding: 38px 32px 32px;
box-shadow: 0 24px 50px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
}
.hp-price-panel::before {
content: "";
position: absolute;
top: 0; left: 20%; right: 20%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(56,189,248,0.5), transparent);
}
.hp-offer-ribbon {
position: absolute;
top: -14px;
right: 32px;
background: linear-gradient(135deg, #f5a623, #fcd34d);
color: #000;
font-size: 0.76rem;
font-weight: 800;
padding: 6px 16px;
border-radius: 100px;
box-shadow: 0 6px 16px rgba(245,166,35,0.3);
letter-spacing: 0.02em;
}
body.ltr .hp-offer-ribbon { right: auto; left: 32px; }
.hp-price-head {
text-align: center;
margin-bottom: 24px;
}
.hp-price-head .hp-tag { margin-bottom: 12px; }
.hp-price-head h2 {
font-size: 1.6rem;
font-weight: 900;
color: #fff;
margin: 0 0 8px;
line-height: 1.25;
}
.hp-price-head p {
font-size: 0.86rem;
color: rgba(255,255,255,0.6);
line-height: 1.6;
margin: 0;
}
.hp-price-summary {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
}
.hp-offer-price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.hp-offer-price-row > div { display: flex; flex-direction: column; align-items: flex-start; }
.hp-offer-price-row span#aLabel { font-size: 0.75rem; color: rgba(255,255,255,0.4); font-weight: 600; margin-bottom: 4px; }
.hp-offer-price-row strong { font-size: 2.2rem; font-weight: 900; color: #fff; line-height: 1; display: flex; align-items: flex-start; gap: 4px; }
.hp-offer-price-row strong small { font-size: 1.1rem; color: rgba(255,255,255,0.5); font-weight: 700; margin-top: 4px; }
.hp-offer-price-row b { font-size: 0.72rem; color: rgba(255,255,255,0.35); font-weight: 600; margin-top: 6px; }
#offerBadge {
font-style: normal;
background: rgba(74,222,128,0.1);
color: #4ade80;
border: 1px solid rgba(74,222,128,0.25);
padding: 5px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
}
.hp-offer-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
.hp-offer-meta-grid > div {
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
padding: 12px;
padding-inline-end: 40px; /* prevent text from overlapping icon */
position: relative;
}
.hp-offer-meta-grid i {
position: absolute;
top: 12px; left: 12px; /* Place icon on the end side in RTL */
font-style: normal;
font-size: 0.7rem;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
width: 20px; height: 20px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
}
body.ltr .hp-offer-meta-grid i { left: auto; right: 12px; } /* Place icon on the end side in LTR */
.hp-offer-meta-grid span { font-size: 0.7rem; color: rgba(255,255,255,0.45); margin-bottom: 4px; }
.hp-offer-meta-grid strong { font-size: 0.88rem; color: #fff; font-weight: 700; }
.hp-offer-includes {
display: flex;
flex-direction: column;
gap: 12px;
}
.hp-offer-includes > div {
display: flex;
align-items: flex-start;
gap: 10px;
}
.hp-offer-includes span {
width: 18px; height: 18px;
background: rgba(74,222,128,0.12);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
.hp-offer-includes span::after {
content: ""; width: 4px; height: 8px;
border: solid #4ade80; border-width: 0 2px 2px 0;
transform: rotate(45deg); margin-bottom: 2px;
}
.hp-offer-includes p { font-size: 0.84rem; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0; }
.hp-currency-note {
display: flex;
align-items: flex-start;
gap: 12px;
background: rgba(56,189,248,0.05);
border: 1px solid rgba(56,189,248,0.15);
padding: 14px;
border-radius: 12px;
margin-bottom: 24px;
}
.hp-currency-note span {
width: 24px; height: 24px;
background: rgba(56,189,248,0.15);
color: #38bdf8;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}
.hp-currency-note p { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }
.hp-price-note {
font-size: 0.75rem;
color: rgba(255,255,255,0.4);
text-align: center;
margin: 0 0 14px;
}
.hp-price-cta {
background: linear-gradient(135deg, #f5a623, #fcd34d) !important;
color: #000 !important;
border: none !important;
font-size: 1.05rem !important;
font-weight: 800 !important;
padding: 16px !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(245,166,35,0.25) !important;
justify-content: center;
width: 100%;
}
.hp-price-cta:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 32px rgba(245,166,35,0.35) !important;
}
/* price-updated flash */
.hp-price-panel.price-updated { animation: priceFlash .5s ease; }
/* ── TRUST ── */
.hp-trust-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
}
.hp-trust {
display: flex;
flex-direction: column;
align-items: flex-start;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 28px 22px;
text-decoration: none;
transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.hp-trust:hover {
transform: translateY(-4px);
border-color: rgba(245,166,35,.2);
box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.hp-trust-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(245,166,35,.09);
border: 1px solid rgba(245,166,35,.17);
color: #f5a623;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: .26s;
}
.hp-trust:hover .hp-trust-icon { background: rgba(245,166,35,.16); border-color: rgba(245,166,35,.28); }
.hp-trust strong { font-size: .98rem; font-weight: 800; color: #fff; display: block; margin-bottom: 8px; }
.hp-trust p { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.72; margin: 0; }
/* ── FAQ ── */
.hp-faq {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.hp-faq-item {
background: rgba(255,255,255,.048);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
overflow: hidden;
transition: border-color .26s;
}
.hp-faq-item:hover { border-color: rgba(255,255,255,.14); }
.hp-faq-item.open { border-color: rgba(245,166,35,.25); box-shadow: 0 6px 28px rgba(0,0,0,.12); }
.hp-faq-q {
width: 100%;
background: none;
border: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
cursor: pointer;
font-family: inherit;
font-size: .95rem;
font-weight: 700;
color: rgba(255,255,255,.84);
text-align: start;
transition: color .2s;
}
.hp-faq-q:hover { color: #fff; }
.hp-faq-icon {
flex-shrink: 0;
color: rgba(255,255,255,.3);
transition: transform .28s ease, color .2s;
display: flex;
align-items: center;
}
.hp-faq-item.open .hp-faq-icon { transform: rotate(180deg); color: #f5a623; }
.hp-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .36s cubic-bezier(.2,.8,.2,1);
}
.hp-faq-item.open .hp-faq-a { max-height: 220px; }
.hp-faq-a p {
padding: 0 22px 20px;
padding-top: 14px;
font-size: .9rem;
color: rgba(255,255,255,.56);
line-height: 1.82;
margin: 0;
border-top: 1px solid rgba(255,255,255,.06);
}
/* ── CTA SECTION ── */
.hp-cta { padding: clamp(48px,7vw,88px) 0; }
.hp-cta-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 48px 48px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.hp-cta-box::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(245,166,35,.07), transparent 52%),
radial-gradient(ellipse at 85% 50%, rgba(20,184,166,.05), transparent 50%);
pointer-events: none;
}
.hp-cta-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hp-cta-left h2 {
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
font-weight: 900;
color: #fff;
margin: 0 0 10px;
letter-spacing: -.02em;
}
.hp-cta-left p { font-size: .93rem; color: rgba(255,255,255,.56); line-height: 1.75; margin: 0; }
.hp-cta-btns {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
flex-wrap: nowrap;
}
/* ── FOOTER ── */
.hp-footer {
background: rgba(0,0,0,.28);
border-top: 1px solid rgba(255,255,255,.07);
}
.hp-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 0;
}
.hp-footer-brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
flex-shrink: 0;
}
.hp-footer-brand img { width: 24px; height: auto; opacity: .45; }
.hp-footer-brand span { font-size: .8rem; font-weight: 800; color: rgba(255,255,255,.34); }
.hp-footer-copy { font-size: .8rem; color: rgba(255,255,255,.45); text-align: center; margin: 0; line-height: 1.5; flex: 1; letter-spacing: 0.02em; }
.hp-footer-copy a { color: #f5a623; font-weight: 700; text-decoration: none; transition: all .2s; opacity: 0.85; }
.hp-footer-copy a:hover { opacity: 1; text-shadow: 0 0 8px rgba(245,166,35,0.4); }
.hp-footer-nav { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.hp-footer-nav a { font-size: .73rem; font-weight: 600; color: rgba(255,255,255,.32); text-decoration: none; transition: color .2s; white-space: nowrap; }
.hp-footer-nav a:hover { color: rgba(255,255,255,.62); }
/* ── BUTTON EXTRAS ── */
.btn-wc { background: #07c160 !important; color: #fff !important; }
.btn-wc:hover { background: #059c4c !important; transform: translateY(-2px); }
.btn-lg { padding: 13px 26px !important; font-size: .93rem !important; }
.btn-block { width: 100%; display: flex; justify-content: center; }
/* WeChat modal */
.modal-bg { display: none; align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.copy-flash {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: rgba(22,32,48,.97);
color: #fff;
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
padding: 10px 22px;
font-size: .86rem;
font-weight: 600;
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: opacity .25s;
}
.copy-flash.show { opacity: 1; }
/* price-updated flash */
.price-panel.price-updated { animation: priceFlash .5s ease; }
@keyframes priceFlash {
0% { box-shadow: 0 0 0 0 rgba(245,166,35,.4); }
50% { box-shadow: 0 0 0 8px rgba(245,166,35,.1); }
100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
/* ── REVEAL ANIMATIONS ── */
.hp-card,
.hp-step,
.hp-doc,
.hp-trust,
.hp-faq-item,
.hp-section-head,
.hp-steps-cta,
.hp-cta-box {
opacity: 0;
transform: translateY(22px);
transition:
opacity .62s cubic-bezier(.2,.8,.2,1),
transform .62s cubic-bezier(.2,.8,.2,1),
border-color .26s ease,
box-shadow .26s ease;
}
.hp-card.visible,
.hp-step.visible,
.hp-doc.visible,
.hp-trust.visible,
.hp-faq-item.visible,
.hp-section-head.visible,
.hp-steps-cta.visible,
.hp-cta-box.visible { opacity: 1; transform: translateY(0); }
/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
.split-grid { grid-template-columns: 1fr !important; }
.hp-trust-grid { grid-template-columns: repeat(2,1fr); }
/* Below this width the links no longer fit the top bar — instead of just hiding them
(the old behavior, which left mobile visitors with no way to reach "how it works",
"documents", or "contact" at all) they become an off-canvas drawer opened by the
hamburger button, sliding in from the trailing edge of the page's current direction. */
.home-nav-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
position: fixed;
top: 0;
bottom: 0;
left: auto;
width: min(82vw, 320px);
background: #0b1220;
padding: 96px 22px 24px;
z-index: 998;
overflow-y: auto;
transition: transform .32s cubic-bezier(.22,.8,.24,1);
justify-content: flex-start;
}
/* The hamburger now lives next to the logo at the flex "start" (left in LTR, right in
RTL), so the panel has to unfold from that same edge — opening from the opposite edge
reads as visually disconnected from the button that triggered it. */
body.ltr .home-nav-links { left: 0; right: auto; box-shadow: 14px 0 40px rgba(0,0,0,.45); transform: translateX(-100%); }
body.rtl .home-nav-links { right: 0; left: auto; box-shadow: -14px 0 40px rgba(0,0,0,.45); transform: translateX(100%); }
/* body.rtl/.ltr .home-nav-links above outrank plain .home-nav-links.open on specificity
(body adds an element-selector point), so the "closed" transform always won even with
.open present — every tap looked like nothing happened. Matching the body-scoped
prefix here is what actually lets the open state override it. */
body.ltr .home-nav-links.open,
body.rtl .home-nav-links.open { transform: translateX(0); }
.home-nav-links a {
padding: 15px 8px;
font-size: 1rem;
border-bottom: 1px solid rgba(255,255,255,.08);
border-radius: 0;
}
.home-nav-links a:hover { background: rgba(255,255,255,.05); }
.home-nav-links a:last-child { border-bottom: none; }
.nav-hamburger { display: inline-flex; }
/* #navBackdrop is a sibling of