:root{
  --navy:#12314a;
  --navy-2:#0d2538;
  --orange:#f47c20;
  --green:#25D366;
  --green-dark:#1fa855;
  --light:#f4f6f8;
  --text:#243242;
  --muted:#667789;
  --white:#ffffff;
  --line:#dfe5ea;
  --shadow:0 10px 24px rgba(18,49,74,.08);
  --radius:16px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--light);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),92%);margin:auto}
.topbar{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.brand{font-size:32px;font-weight:800;color:var(--navy);letter-spacing:.2px}
.brand span{color:var(--orange)}
.menu{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-weight:700;color:#36485c}
.menu a:hover,.menu a.active{color:var(--orange)}
.btn{display:inline-block;padding:14px 20px;border-radius:10px;font-weight:700;box-shadow:var(--shadow);border:none;cursor:pointer}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.btn-orange{background:var(--orange);color:#fff}
.btn-outline{border:2px solid #fff;color:#fff;padding:12px 18px;border-radius:10px;font-weight:700}
.hero{color:#fff;padding:78px 0 72px;background-size:cover;background-position:center}
.hero .eyebrow{display:inline-block;background:rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;font-size:13px;letter-spacing:.4px;margin-bottom:18px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
h1{margin:0 0 16px;font-size:50px;line-height:1.08}
.hero p{font-size:21px;max-width:760px;color:#e7eef4;margin:0 0 24px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-points{display:flex;gap:18px;flex-wrap:wrap;color:#dce6ee;font-weight:700;font-size:14px}
.panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:24px;backdrop-filter: blur(4px)}
.panel h3{margin:0 0 10px;font-size:26px}
section{padding:64px 0}
.section-title{text-align:center;margin-bottom:14px;font-size:38px;color:var(--navy)}
.section-sub{text-align:center;color:var(--muted);max-width:820px;margin:0 auto 34px;font-size:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid #eef2f5}
.card img{width:100%;height:220px;object-fit:cover}
.card-body{padding:20px}
.card h3{margin:0 0 10px;font-size:28px;color:var(--navy)}
.card h4{margin:0 0 8px;font-size:24px;color:var(--navy)}
.muted{color:var(--muted)}
.small{font-size:14px}
.tag{display:inline-block;background:#edf5f0;color:#1f7a4c;padding:6px 10px;font-size:12px;font-weight:700;border-radius:999px;margin-bottom:12px}
.price{font-size:30px;font-weight:800;color:#1f7a4c;margin:8px 0 12px}
.cta-band{background:linear-gradient(90deg,var(--navy),var(--navy-2));color:#fff;border-radius:18px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:var(--shadow)}
.cta-band h3{margin:0 0 8px;font-size:32px}
.list{margin:0;padding-left:20px}
.list li{margin:8px 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border-radius:16px;padding:22px;box-shadow:var(--shadow);border-top:4px solid var(--orange)}
.num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;margin-bottom:12px}
.faq{max-width:920px;margin:auto}
details{background:#fff;border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px;padding:18px 20px}
summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:18px}
details p{margin:12px 0 0;color:#596b7d}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.about-box,.contact-card,.form-card,.info-box{background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.contact-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px}
input,textarea,select{width:100%;padding:14px 14px;border:1px solid #d9e2ea;border-radius:10px;margin-top:10px;margin-bottom:14px;font-size:15px}
textarea{min-height:130px;resize:vertical}
footer{background:var(--navy);color:#fff;padding:44px 0 20px;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:26px}
footer h4{margin-top:0;font-size:20px}
footer a,footer p{color:#d9e4ee}
.copyright{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:#cbd6e0;text-align:center;font-size:14px}
.page-banner{background:#fff;padding:14px 0;border-bottom:1px solid var(--line)}
.page-banner .crumb{color:var(--muted);font-size:14px}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:14px;border-bottom:1px solid #edf1f4;text-align:left}
.table th{background:#f8fafb;color:var(--navy)}
.notice{background:#fff7ea;border-left:5px solid var(--orange);padding:16px 18px;border-radius:10px;color:#6b4d20}
.whatsapp-float{
  position:fixed;right:18px;bottom:18px;z-index:99;background:var(--green);color:#fff;
  padding:14px 18px;border-radius:999px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.16)
}
.whatsapp-float:hover{background:var(--green-dark)}
@media (max-width: 980px){
  .hero-grid,.grid-2,.grid-3,.grid-4,.about,.contact-wrap,.footer-grid,.steps{grid-template-columns:1fr}
  h1{font-size:40px}
  .menu{display:none}
}


.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.video-card,.proof-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px;overflow:hidden}
.video-card video{width:100%;height:280px;object-fit:cover;border-radius:12px;background:#000}
.product-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-gallery img{width:100%;height:240px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow)}
.badge-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.badge{background:#eef6ff;color:var(--navy);padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px}
.hero-proof{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:18px;border-radius:18px}
.hero-proof video{width:100%;height:260px;border-radius:12px;object-fit:cover;background:#000}
.kv-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.kv-item{background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.kv-item strong{display:block;color:var(--navy);font-size:22px;margin-bottom:6px}
@media (max-width:980px){
  .video-grid,.product-gallery,.kv-list{grid-template-columns:1fr}
  .video-card video,.hero-proof video{height:220px}
}


.order-hero{
  background:linear-gradient(135deg,#10304a 0%, #173f61 55%, #0d2538 100%);
  color:#fff;
  padding:54px 0 46px;
}
.order-hero h1{font-size:44px;margin:0 0 14px}
.order-hero p{font-size:19px;color:#dfe9f3;max-width:860px;margin:0 0 18px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.hero-badges span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.order-marquee{
  position:relative;
  margin-top:28px;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  padding:18px 0;
}
.order-marquee:before,.order-marquee:after{
  content:"";
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.order-marquee:before{
  left:0;
  background:linear-gradient(90deg, rgba(16,48,74,1), rgba(16,48,74,0));
}
.order-marquee:after{
  right:0;
  background:linear-gradient(270deg, rgba(13,37,56,1), rgba(13,37,56,0));
}
.order-track{
  display:flex;
  align-items:stretch;
  gap:18px;
  width:max-content;
  animation:orderScroll 58s linear infinite;
  will-change:transform;
}
.order-marquee:hover .order-track{animation-play-state:paused}
.order-system-card{
  min-width:340px;
  max-width:340px;
  background:#fff;
  color:var(--text);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
  border:1px solid #eef2f5;
}
.os-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.os-awb{
  font-weight:800;
  color:var(--navy);
  font-size:15px;
  line-height:1.3;
}
.os-mark{
  color:var(--muted);
  font-size:13px;
  text-align:right;
  line-height:1.35;
}
.os-route{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.os-city{
  font-size:26px;
  font-weight:800;
  color:var(--navy);
  line-height:1.1;
}
.os-arrow{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  text-align:center;
}
.os-status{
  display:inline-block;
  background:#edf5ff;
  color:#174f84;
  padding:7px 11px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.os-status.received{background:#eef8f1;color:#1d7b46}
.os-time{
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.proof-card{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid #eef2f5;
  overflow:hidden;
}
.proof-thumb{
  display:block;
  width:100%;
  height:270px;
  object-fit:cover;
  background:#f3f5f7;
}
.proof-body{padding:18px}
.proof-body h4{
  margin:0 0 8px;
  color:var(--navy);
  font-size:22px;
}
.proof-body p{margin:0 0 14px;color:var(--muted)}
.proof-actions{display:flex;gap:10px;flex-wrap:wrap}
.faq details{
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
  padding:18px 20px;
}
.faq details[open] summary{color:var(--navy)}
.branch-boxes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px;
}
.branch-box{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:22px;
}
.branch-box h4{
  margin:0 0 8px;
  color:var(--navy);
  font-size:24px;
}
@keyframes orderScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:980px){
  .order-hero h1{font-size:34px}
  .proof-grid,.branch-boxes{grid-template-columns:1fr}
  .order-system-card{min-width:280px;max-width:280px}
  .proof-thumb{height:220px}
}


/* Orders FAQ dark logistics upgrade */
.order-hero.dark-logistics{
  background:
    linear-gradient(135deg, rgba(7,20,32,.92) 0%, rgba(10,32,52,.9) 55%, rgba(15,55,92,.88) 100%),
    url('assets/media/china-warehouse-2.mp4');
  color:#fff;
  position:relative;
}
.dark-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
  align-items:start;
}
.dark-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:22px;
  backdrop-filter: blur(4px);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.dark-panel h3{
  margin:0 0 14px;
  font-size:30px;
  color:#fff;
}
.dark-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.dark-kpi{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:16px;
}
.dark-kpi strong{
  display:block;
  font-size:26px;
  color:#fff;
  margin-bottom:4px;
}
.dark-kpi span{
  color:#c6d6e6;
  font-size:13px;
}
.system-board{
  background:#0c1a27;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.system-board-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.system-board-head h4{
  margin:0;
  color:#fff;
  font-size:24px;
}
.live-dot{
  width:10px;height:10px;border-radius:50%;
  background:#22c55e;display:inline-block;
  box-shadow:0 0 0 6px rgba(34,197,94,.14);
  margin-right:8px;
}
.system-board-head .muted{
  color:#aac0d5;
}
.order-marquee.dark{
  margin-top:0;
  background:#091522;
  border:1px solid rgba(255,255,255,.08);
}
.order-marquee.dark:before{
  background:linear-gradient(90deg, rgba(9,21,34,1), rgba(9,21,34,0));
}
.order-marquee.dark:after{
  background:linear-gradient(270deg, rgba(9,21,34,1), rgba(9,21,34,0));
}
.order-system-card.dark{
  background:#112334;
  border:1px solid rgba(255,255,255,.08);
  color:#e8f0f8;
}
.order-system-card.dark .os-awb,
.order-system-card.dark .os-city{
  color:#fff;
}
.order-system-card.dark .os-mark,
.order-system-card.dark .os-time,
.order-system-card.dark .os-arrow{
  color:#9fb4c8;
}
.order-system-card.dark .os-status{
  background:#102f4a;
  color:#9fd1ff;
}
.order-system-card.dark .os-status.received{
  background:#12361f;
  color:#8de0a6;
}
.faq-dark{
  background:linear-gradient(180deg,#071521 0%,#0d2234 100%);
  color:#fff;
  border-radius:26px;
  padding:36px 28px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.faq-dark .section-title{
  color:#fff;
}
.faq-dark .section-sub{
  color:#c6d6e6;
}
.faq-dark details{
  background:#102132;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}
.faq-dark summary{
  color:#fff;
}
.faq-dark details p{
  color:#c9d6e2;
}
.proof-grid.dark .proof-card{
  background:#0f1f2f;
  border:1px solid rgba(255,255,255,.08);
}
.proof-grid.dark .proof-body h4{
  color:#fff;
}
.proof-grid.dark .proof-body p{
  color:#bfd0df;
}
.branch-boxes.dark .branch-box{
  background:#102132;
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
}
.branch-boxes.dark .branch-box h4{
  color:#fff;
}
.branch-boxes.dark .branch-box .muted{
  color:#c7d5e1;
}
@media (max-width:980px){
  .dark-grid,.dark-kpis{grid-template-columns:1fr}
}


/* Order tracking upgrade */
.order-system-card.dark .os-status.pending{background:#3b2a12;color:#ffd88a}
.order-system-card.dark .os-status.shipment{background:#102f4a;color:#9fd1ff}
.order-system-card.dark .os-status.collected{background:#12361f;color:#8de0a6}
.order-system-card.dark .os-status.received{background:#1f2338;color:#c2c8ff}
.tracking-wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
  margin-top:28px;
}
.tracking-box,.updates-box{
  background:#0f1f2f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  padding:22px;
  color:#fff;
}
.tracking-box h3,.updates-box h3{
  margin:0 0 12px;
  font-size:28px;
  color:#fff;
}
.tracking-box p,.updates-box p{
  color:#bfd0df;
  margin:0 0 16px;
}
.track-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.track-input{
  flex:1 1 320px;
  background:#091522;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:14px;
  padding:16px 18px;
  font-size:16px;
  margin:0;
}
.track-help{
  margin-top:12px;
  color:#9fb4c8;
  font-size:14px;
}
.update-list{
  display:grid;
  gap:12px;
}
.update-item{
  background:#091522;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 16px;
}
.update-item .u-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.update-item strong{
  color:#fff;
  font-size:15px;
}
.update-item span{
  color:#9fb4c8;
  font-size:13px;
}
.update-item p{
  margin:0;
  color:#c7d5e1;
  font-size:14px;
}
.quote-update-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.mini-proof{
  background:#0f1f2f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  padding:20px;
  color:#fff;
}
.mini-proof h4{
  margin:0 0 10px;
  font-size:24px;
  color:#fff;
}
.mini-proof p{
  color:#bfd0df;
  margin:0 0 14px;
}
.mini-proof ul{
  margin:0;
  padding-left:18px;
  color:#d7e2ec;
}
.mini-proof li{margin:8px 0}
@media (max-width:980px){
  .tracking-wrap,.quote-update-grid{grid-template-columns:1fr}
}


/* Privacy-safe logistics list upgrade */
.order-list-board{
  background:#0f1f2f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  overflow:hidden;
}
.order-list-head{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr 1.2fr;
  gap:12px;
  padding:16px 18px;
  background:#091522;
  color:#b8cade;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.order-list-wrap{
  position:relative;
  overflow:hidden;
  height:330px;
}
.order-list-track{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  animation:scrollOrderList 42s linear infinite;
  padding:14px 12px;
}
.order-list-wrap:hover .order-list-track{animation-play-state:paused}
.order-row{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr 1.2fr;
  gap:12px;
  align-items:center;
  background:#112334;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:14px 16px;
  color:#e8f0f8;
  font-size:14px;
}
.order-row .ref{
  font-weight:700;
  color:#fff;
}
.status-badge{
  display:inline-block;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.status-badge.shipment{background:#102f4a;color:#9fd1ff}
.status-badge.pending{background:#3b2a12;color:#ffd88a}
.status-badge.collected{background:#12361f;color:#8de0a6}
.status-badge.received{background:#1f2338;color:#c2c8ff}
.eta{
  color:#bfd0df;
  font-size:13px;
}
.privacy-note{
  margin-top:14px;
  color:#9fb4c8;
  font-size:13px;
}
.safe-proof-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.safe-proof-card{
  background:#0f1f2f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  overflow:hidden;
  color:#fff;
}
.safe-proof-card img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
  background:#e8edf2;
}
.safe-proof-body{padding:18px}
.safe-proof-body h4{margin:0 0 8px;font-size:22px;color:#fff}
.safe-proof-body p{margin:0 0 12px;color:#bfd0df}
.safe-proof-body .mini-note{font-size:13px;color:#93aac0}
@keyframes scrollOrderList{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
@media (max-width:980px){
  .order-list-head,.order-row{
    grid-template-columns:1.5fr 1fr 1fr;
  }
  .order-list-head .hide-mobile,.order-row .hide-mobile{display:none}
  .safe-proof-grid{grid-template-columns:1fr}
}


/* system-table style upgrade */
.order-list-board.table-style{
  background:#0b1824;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(0,0,0,.2);
  overflow:hidden;
}
.order-table-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  background:linear-gradient(180deg,#102131 0%,#0b1824 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.order-table-title h4{
  margin:0;
  color:#fff;
  font-size:24px;
}
.order-table-title .sub{
  color:#9eb4c8;
  font-size:13px;
}
.order-list-head.fixed{
  position:sticky;
  top:0;
  z-index:3;
  display:grid;
  grid-template-columns:1.8fr .85fr .85fr .95fr 1fr 1.15fr;
  gap:12px;
  padding:14px 18px;
  background:#13283b;
  color:#d7e4ef;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.order-list-wrap.table-scroll{
  height:360px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(180deg,#0c1a27 0%,#091522 100%);
}
.order-list-wrap.table-scroll:before,
.order-list-wrap.table-scroll:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:42px;
  z-index:2;
  pointer-events:none;
}
.order-list-wrap.table-scroll:before{
  top:0;
  background:linear-gradient(180deg, rgba(9,21,34,1), rgba(9,21,34,0));
}
.order-list-wrap.table-scroll:after{
  bottom:0;
  background:linear-gradient(0deg, rgba(9,21,34,1), rgba(9,21,34,0));
}
.order-list-track.table-vertical{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  animation:scrollOrderListSystem 46s linear infinite;
  will-change:transform;
}
.order-list-wrap.table-scroll:hover .order-list-track.table-vertical{
  animation-play-state:paused;
}
.order-row.table{
  display:grid;
  grid-template-columns:1.8fr .85fr .85fr .95fr 1fr 1.15fr;
  gap:12px;
  align-items:center;
  background:#112334;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:13px 14px;
  color:#e7f0f8;
  font-size:14px;
}
.order-row.table:nth-child(even){
  background:#10202f;
}
.order-row.table .ref{
  font-weight:700;
  color:#fff;
}
.order-row.table .cell-muted{
  color:#bed0df;
}
.status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
}
.status-chip.intransit{background:#153656;color:#a9d5ff}
.status-chip.pending{background:#3a2e16;color:#ffd989}
.status-chip.completed{background:#173823;color:#9ee3b0}
.status-chip.arrived{background:#262b4a;color:#c5cbff}
.order-table-foot{
  padding:12px 18px 16px;
  color:#8fa8bc;
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.06);
  background:#0b1824;
}
@keyframes scrollOrderListSystem{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
@media (max-width:980px){
  .order-list-head.fixed,.order-row.table{
    grid-template-columns:1.55fr .9fr .95fr;
  }
  .order-list-head.fixed .hide-mobile,
  .order-row.table .hide-mobile{
    display:none;
  }
}


/* order cards + image carousel upgrade */
.order-carousel-panel{
  background:#0b1824;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(0,0,0,.2);
  overflow:hidden;
  padding:18px 0 16px;
}
.carousel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.carousel-head h4{
  margin:0;
  color:#fff;
  font-size:23px;
}
.carousel-head .sub{
  color:#9eb4c8;
  font-size:13px;
}
.order-carousel-wrap{
  overflow:hidden;
  position:relative;
}
.order-carousel-wrap:before,
.order-carousel-wrap:after{
  content:"";
  position:absolute;
  top:0;
  width:64px;
  height:100%;
  z-index:2;
  pointer-events:none;
}
.order-carousel-wrap:before{
  left:0;
  background:linear-gradient(90deg, rgba(11,24,36,1), rgba(11,24,36,0));
}
.order-carousel-wrap:after{
  right:0;
  background:linear-gradient(270deg, rgba(11,24,36,1), rgba(11,24,36,0));
}
.order-carousel-track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:orderCardCarousel 48s linear infinite;
  padding:4px 16px 6px;
  will-change:transform;
}
.order-carousel-wrap:hover .order-carousel-track{
  animation-play-state:paused;
}
.order-card-slide{
  width:320px;
  min-width:320px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  color:#fff;
}
.order-card-slide .card-inner{
  padding:18px 18px 16px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.slide-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px;
}
.slide-top .orderno{
  font-weight:800;
  font-size:18px;
  line-height:1.2;
}
.slide-top .mark{
  font-size:13px;
  opacity:.92;
  text-align:right;
  line-height:1.35;
}
.route-big{
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  margin:16px 0 8px;
}
.route-small{
  font-size:14px;
  opacity:.92;
  margin-bottom:14px;
}
.meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.meta-row .date{
  font-size:14px;
  opacity:.94;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(3px);
}
.card-navy{background:linear-gradient(135deg,#18324a 0%,#274d70 100%)}
.card-green{background:linear-gradient(135deg,#173823 0%,#2b6d47 100%)}
.card-purple{background:linear-gradient(135deg,#2a2144 0%,#5a3f8a 100%)}
.card-amber{background:linear-gradient(135deg,#4a3015 0%,#a05d15 100%)}
.card-red{background:linear-gradient(135deg,#44212a 0%,#8d3f5c 100%)}
.card-teal{background:linear-gradient(135deg,#153640 0%,#2c7d89 100%)}
.image-slide{
  width:320px;
  min-width:320px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.image-slide img{
  display:block;
  width:100%;
  height:250px;
  object-fit:cover;
  background:#eef2f6;
}
.image-slide .img-caption{
  padding:12px 14px 14px;
  color:#243242;
}
.image-slide .img-caption strong{
  display:block;
  color:#12314a;
  margin-bottom:4px;
}
.privacy-mini{
  padding:12px 18px 0;
  color:#8fa8bc;
  font-size:12px;
}
@keyframes orderCardCarousel{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:980px){
  .order-card-slide,.image-slide{
    width:280px;
    min-width:280px;
  }
  .route-big{font-size:24px}
}


/* top carousel simplified fix */
.ofq-top{
  background:linear-gradient(135deg,#0f2740 0%,#173c5e 60%,#0d2236 100%);
  color:#fff;
  padding:54px 0 46px;
}
.ofq-top-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:start;
}
.ofq-copy{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:24px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.ofq-copy h1{margin:0 0 14px;font-size:46px;line-height:1.05;color:#fff}
.ofq-copy p{color:#dce7f1;font-size:18px;margin:0 0 18px}
.ofq-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.ofq-badges span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}
.ofq-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.ofq-kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px}
.ofq-kpi strong{display:block;color:#fff;font-size:24px;margin-bottom:4px}
.ofq-kpi span{color:#cad8e5;font-size:13px}
.ofq-carousel-box{position:relative;background:#0b1824;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.ofq-carousel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ofq-carousel-head h4{margin:0;color:#fff;font-size:22px}
.ofq-carousel-head .sub{color:#9fb4c8;font-size:13px}
.ofq-carousel-viewport{overflow:hidden;position:relative}
.ofq-carousel-track{display:flex;gap:16px;transition:transform .55s ease;will-change:transform;padding:16px}
.ofq-slide-card,.ofq-slide-image{width:320px;min-width:320px;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.ofq-slide-card{color:#fff}
.ofq-slide-card .inner{padding:18px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between}
.ofq-topline{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px}
.ofq-topline .orderno{font-weight:800;font-size:18px;line-height:1.2}
.ofq-topline .mark{font-size:13px;opacity:.94;text-align:right;line-height:1.35}
.ofq-route{font-size:29px;font-weight:800;line-height:1.08;margin:16px 0 8px}
.ofq-note{font-size:14px;opacity:.92}
.ofq-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px}
.ofq-meta .date{font-size:14px;opacity:.94}
.ofq-status{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(255,255,255,.16)}
.ofq-card-navy{background:linear-gradient(135deg,#1a3550 0%,#2b597f 100%)}
.ofq-card-teal{background:linear-gradient(135deg,#163947 0%,#2a7180 100%)}
.ofq-card-purple{background:linear-gradient(135deg,#2b2247 0%,#5c4691 100%)}
.ofq-card-amber{background:linear-gradient(135deg,#493117 0%,#a46a1d 100%)}
.ofq-card-green{background:linear-gradient(135deg,#173825 0%,#2f7a4d 100%)}
.ofq-card-red{background:linear-gradient(135deg,#472430 0%,#934c68 100%)}
.ofq-slide-image{background:#fff}
.ofq-slide-image img{width:100%;height:250px;object-fit:cover;display:block;background:#eef2f6}
.ofq-slide-image .cap{padding:12px 14px 14px;color:#243242}
.ofq-slide-image .cap strong{display:block;color:#12314a;margin-bottom:4px}
.ofq-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:none;border-radius:999px;background:rgba(8,18,29,.88);color:#fff;font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.ofq-arrow.prev{left:10px}.ofq-arrow.next{right:10px}
.ofq-arrow:hover{background:rgba(20,45,69,.95)}
.ofq-dots{display:flex;justify-content:center;gap:8px;padding:8px 0 14px}
.ofq-dot{width:10px;height:10px;border-radius:50%;background:#4a6177;border:none;cursor:pointer;transition:all .25s ease}
.ofq-dot.active{width:26px;border-radius:999px;background:#fff}
.ofq-privacy{padding:0 18px 16px;color:#9fb4c8;font-size:12px}
@media (max-width:980px){
  .ofq-top-grid,.ofq-kpis{grid-template-columns:1fr}
  .ofq-copy h1{font-size:34px}
  .ofq-slide-card,.ofq-slide-image{width:280px;min-width:280px}
  .ofq-route{font-size:24px}
  .ofq-arrow{width:38px;height:38px;font-size:20px}
}


/* friend links section */
.friend-links-section{
  padding:56px 0;
  background:#f7fafc;
}
.friend-links-box{
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:28px;
}
.friend-links-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:18px;
}
.friend-link-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:1px solid #e8edf2;
  border-radius:16px;
  background:#fff;
  transition:all .2s ease;
}
.friend-link-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-color:#d5e1ec;
}
.friend-link-card span{
  color:var(--navy);
  font-weight:700;
  line-height:1.4;
}
.friend-link-card small{
  color:var(--muted);
  white-space:nowrap;
}
.track-external-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  color:#8fc7ff;
  font-weight:700;
  text-decoration:none;
}
.track-external-link:hover{text-decoration:underline}
@media (max-width:980px){
  .friend-links-grid{grid-template-columns:1fr}
}


/* friend links business cards */
.friend-links-section{
  padding:56px 0;
  background:linear-gradient(180deg,#f6f9fc 0%, #eef4f9 100%);
}
.friend-links-shell{
  background:#fff;
  border-radius:24px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  padding:30px;
}
.friend-links-topnote{
  margin-top:10px;
  background:#eef6ff;
  border:1px solid #d6e7fb;
  color:#12314a;
  padding:14px 16px;
  border-radius:14px;
  font-weight:700;
}
.friend-links-topnote a{
  color:#0d5db8;
  word-break:break-all;
}
.friend-links-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:22px;
}
.friend-link-bizcard{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:18px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid #e6edf4;
  box-shadow:0 10px 26px rgba(0,0,0,.04);
  transition:all .22s ease;
  text-decoration:none;
}
.friend-link-bizcard:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  border-color:#cfddeb;
}
.friend-link-left{
  min-width:0;
}
.friend-link-tag{
  display:inline-block;
  background:#12314a;
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.friend-link-title{
  display:block;
  color:#12314a;
  font-weight:800;
  line-height:1.45;
  font-size:16px;
}
.friend-link-url{
  display:block;
  color:#6d7f90;
  font-size:13px;
  margin-top:8px;
  word-break:break-all;
}
.friend-link-open{
  white-space:nowrap;
  color:#0d5db8;
  font-weight:800;
  font-size:14px;
  align-self:center;
}
@media (max-width:980px){
  .friend-links-grid{grid-template-columns:1fr}
  .friend-links-shell{padding:22px}
}


/* compact business link cards + blue tracking notice */
.friend-links-topnote.blue-spotlight{
  margin-top:12px;
  background:linear-gradient(135deg,#0d5db8 0%, #1f7be0 100%);
  border:1px solid #6fb0ff;
  color:#fff;
  padding:18px 18px;
  border-radius:16px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(13,93,184,.22);
}
.friend-links-topnote.blue-spotlight a{
  color:#fff;
  text-decoration:underline;
  font-weight:800;
}
.friend-links-grid.compact{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:20px;
}
.friend-link-bizcard.compact{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
}
.friend-link-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.friend-link-url.compact{
  margin-top:6px;
  font-size:12px;
}
.friend-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:11px 14px;
  border-radius:12px;
  background:#12314a;
  color:#fff;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(18,49,74,.16);
}
.friend-link-btn:hover{
  background:#0d5db8;
}
.track-help.track-blue{
  margin-top:12px;
  background:linear-gradient(135deg,#0d5db8 0%, #1f7be0 100%);
  border:1px solid #78b7ff;
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
  line-height:1.5;
}
.track-help.track-blue a{
  color:#fff;
  text-decoration:underline;
  font-weight:800;
}
@media (max-width:980px){
  .friend-links-grid.compact{grid-template-columns:1fr}
  .friend-link-bizcard.compact{grid-template-columns:1fr}
  .friend-link-btn{width:100%}
}


/* exact screenshot redesign */
.ofx-page{background:#f3f6fb;padding:24px 0 18px}
.ofx-shell{background:transparent}
.ofx-top{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.ofx-tag{display:inline-block;background:#e8f6eb;color:#208d49;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;text-transform:uppercase;margin-bottom:10px}
.ofx-copy h1{margin:0 0 12px;font-size:36px;line-height:1.08;color:#18324a}
.ofx-copy h1 .green{color:#29a94c}
.ofx-copy p{margin:0 0 18px;color:#67788a;font-size:17px;max-width:640px}
.ofx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ofx-features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ofx-feature{display:flex;gap:10px;align-items:flex-start;padding:6px 2px}
.ofx-feature .icon{font-size:26px;line-height:1;color:#2aa34a}
.ofx-feature strong{display:block;color:#18324a;font-size:14px;line-height:1.2}
.ofx-feature span{display:block;color:#78889a;font-size:11px;margin-top:3px;line-height:1.35}

.ofx-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ofx-panel{background:#fff;border:1px solid #dfe7f0;border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(18,49,74,.06)}
.ofx-head{background:#173b62;color:#fff;padding:12px 14px;font-size:14px;font-weight:800}
.ofx-body{padding:14px}
.ofx-history-item{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid #edf2f6}
.ofx-history-item:last-child{border-bottom:none}
.ofx-history-item strong{display:block;color:#18324a;font-size:15px}
.ofx-history-item small{display:block;color:#6f8092;font-size:12px;line-height:1.35}
.ofx-mini-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.ofx-mini-badge.green{background:#e8f7ed;color:#148944}
.ofx-mini-badge.blue{background:#ebf3ff;color:#2467c8}

.ofx-timeline{position:relative;padding-left:18px}
.ofx-timeline:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:#d8e0e8}
.ofx-t-item{position:relative;padding-left:18px;padding-bottom:14px}
.ofx-t-item:last-child{padding-bottom:0}
.ofx-t-item:before{content:"";position:absolute;left:-1px;top:3px;width:12px;height:12px;border-radius:50%;background:#c2ccd7}
.ofx-t-item.green:before{background:#28a745}
.ofx-t-item.blue:before{background:#2674d8}
.ofx-t-item strong{display:block;color:#18324a;font-size:13px}
.ofx-t-item span{display:block;color:#6f8092;font-size:12px;line-height:1.35}

.ofx-section{margin-top:16px}
.ofx-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:8px}
.ofx-section-head h3{margin:0;color:#18324a;font-size:18px}
.ofx-section-head span{color:#6f8092;font-size:13px}
.ofx-nav{display:flex;gap:8px}
.ofx-nav button{width:32px;height:32px;border:none;border-radius:8px;background:#fff;box-shadow:0 8px 18px rgba(18,49,74,.08);color:#18324a;font-size:18px;cursor:pointer}
.ofx-slider{overflow:hidden}
.ofx-track{display:flex;gap:12px;transition:transform .4s ease}
.ofx-card{min-width:182px;max-width:182px;background:#fff;border:1px solid #e2eaf2;border-radius:14px;overflow:hidden;box-shadow:0 8px 18px rgba(18,49,74,.05)}
.ofx-card-top{height:64px;background:#e8eef9;display:grid;place-items:center;color:#1a3454;font-size:34px}
.ofx-card-body{padding:12px}
.ofx-card-body strong{display:block;color:#18324a;font-size:15px;margin-bottom:4px}
.ofx-mark{font-size:12px;color:#5e7083;margin-bottom:8px}
.ofx-route{display:flex;justify-content:space-between;gap:6px;color:#18324a;font-size:13px;font-weight:700;margin-bottom:8px}
.ofx-date{font-size:12px;color:#708195;margin-bottom:8px}
.ofx-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.ofx-pill.received{background:#e8f7ed;color:#118a43}
.ofx-pill.shipment{background:#ebf3ff;color:#2368c8}
.ofx-pill.pending{background:#fff1dc;color:#c77b12}
.ofx-pill.collected{background:#e9f8ed;color:#0f8d41}

.ofx-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ofx-proof{background:#fff;border:1px solid #e2eaf2;border-radius:14px;overflow:hidden;box-shadow:0 8px 18px rgba(18,49,74,.05)}
.ofx-proof img{width:100%;height:145px;object-fit:cover;display:block}
.ofx-proof .body{padding:12px}
.ofx-proof strong{display:block;color:#18324a;font-size:16px;margin-bottom:4px}
.ofx-proof span{display:block;color:#6f8092;font-size:12px;line-height:1.35}

.ofx-bottom{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px;margin-top:16px}
.ofx-track-box,.ofx-faq-box{background:linear-gradient(180deg,#eef8ef 0%,#f8fbff 100%);border:1px solid #dce8de;border-radius:16px;padding:16px;box-shadow:0 8px 18px rgba(18,49,74,.04)}
.ofx-faq-box{background:linear-gradient(180deg,#f4f7fc 0%,#fbfdff 100%);border-color:#e2e8f0}
.ofx-track-box h3,.ofx-faq-box h3{margin:0 0 8px;color:#18324a;font-size:18px}
.ofx-track-box p{margin:0;color:#6b7b8d;font-size:13px;line-height:1.45}
.ofx-track-row{display:flex;gap:10px;margin-top:10px}
.ofx-track-row input{flex:1;min-width:0;padding:13px 14px;border:1px solid #d7dfe7;border-radius:12px;background:#fff;font-size:14px}
.ofx-track-note{margin-top:10px;color:#708195;font-size:12px}
.ofx-track-blue{margin-top:10px;background:linear-gradient(135deg,#0d5db8 0%,#1f7be0 100%);color:#fff;padding:12px 14px;border-radius:14px;font-size:13px;font-weight:700;line-height:1.45}
.ofx-track-blue a{color:#fff;text-decoration:underline}
.ofx-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:8px}
.ofx-faq-grid details{background:#fff;border:1px solid #e2eaf2;border-radius:12px;padding:12px 14px;margin:0;box-shadow:none}
.ofx-faq-grid summary{color:#18324a;font-size:14px}

.helpful-shot{margin-top:16px;background:#fff;border:1px solid #e2eaf2;border-radius:18px;padding:16px;box-shadow:0 8px 18px rgba(18,49,74,.05)}
.helpful-shot .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.helpful-shot .head h3{margin:0;color:#18324a;font-size:18px}
.helpful-shot .head span{color:#6f8092;font-size:13px}
.helpful-shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.helpful-shot-card{background:#fff;border:1px solid #e2eaf2;border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.helpful-shot-card .ic{width:34px;height:34px;border-radius:10px;background:#eff6ff;color:#1b4c85;display:grid;place-items:center;font-size:18px}
.helpful-shot-card strong{display:block;color:#18324a;font-size:13px;line-height:1.3}
.helpful-shot-card small{display:block;color:#6f8092;font-size:11px;margin-top:4px;word-break:break-all}
.helpful-shot-card a{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:8px 10px;border-radius:10px;background:#2fa84f;color:#fff;font-size:12px;font-weight:800;text-decoration:none}

.ofx-support{margin-top:16px;background:#fff;border:1px solid #e2eaf2;border-radius:18px;overflow:hidden;box-shadow:0 8px 18px rgba(18,49,74,.05)}
.ofx-support-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr auto}
.ofx-support-cell{padding:18px 16px;border-right:1px solid #e8eef4}
.ofx-support-cell:last-child{border-right:none}
.ofx-support-cell h4{margin:0 0 6px;color:#18324a;font-size:18px}
.ofx-support-cell p{margin:0;color:#6b7b8d;font-size:13px;line-height:1.45}
.ofx-support-cta{display:grid;place-items:center;padding:18px}

@media (max-width:1120px){
  .helpful-shot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .ofx-top,.ofx-features,.ofx-side,.ofx-proof-grid,.ofx-bottom,.ofx-faq-grid,.helpful-shot-grid,.ofx-support-grid{grid-template-columns:1fr}
  .ofx-copy h1{font-size:28px}
  .ofx-card{min-width:220px;max-width:220px}
  .ofx-support-cell{border-right:none;border-bottom:1px solid #e8eef4}
  .ofx-support-cell:last-child{border-bottom:none}
}


/* screenshot-style helpful links - final */
.helpful-shot{margin-top:16px;background:#fff;border:1px solid #e2eaf2;border-radius:18px;padding:16px;box-shadow:0 8px 18px rgba(18,49,74,.05)}
.helpful-shot .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.helpful-shot .head h3{margin:0;color:#18324a;font-size:18px}
.helpful-shot .head span{color:#6f8092;font-size:13px}
.helpful-shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.helpful-shot-card{background:#fff;border:1px solid #e2eaf2;border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.helpful-shot-card .ic{width:34px;height:34px;border-radius:10px;background:#eff6ff;color:#1b4c85;display:grid;place-items:center;font-size:18px}
.helpful-shot-card strong{display:block;color:#18324a;font-size:13px;line-height:1.3}
.helpful-shot-card small{display:block;color:#6f8092;font-size:11px;margin-top:4px;word-break:break-all}
.helpful-shot-card a{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:8px 10px;border-radius:10px;background:#2fa84f;color:#fff;font-size:12px;font-weight:800;text-decoration:none}
@media (max-width:1120px){.helpful-shot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.helpful-shot-grid{grid-template-columns:1fr}}


/* professional blog page redesign */
.blog-pro-page{background:#f4f7fb;padding:22px 0 20px}
.blog-pro-page .container{width:min(1180px,92%);margin:auto}
.blog-breadcrumb{font-size:14px;color:#6b7c8d;margin-bottom:14px}
.blog-breadcrumb a{color:#456b93;text-decoration:none}
.blog-hero{position:relative;border-radius:28px;overflow:hidden;min-height:340px;background:linear-gradient(90deg, rgba(12,42,72,.82) 0%, rgba(12,42,72,.76) 45%, rgba(18,51,79,.52) 100%), url('assets/media/blog-hero.jpg') center/cover no-repeat;box-shadow:0 18px 40px rgba(18,49,74,.18)}
.blog-hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;padding:46px 42px;align-items:center}
.blog-badge{display:inline-block;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:800;margin-bottom:14px}
.blog-hero h1{margin:0 0 14px;font-size:40px;line-height:1.08;color:#fff}
.blog-hero p{margin:0 0 22px;color:#e6eef6;font-size:18px;line-height:1.55;max-width:660px}
.blog-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.blog-topic-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:24px;backdrop-filter:blur(4px);padding:26px 24px;color:#fff}
.blog-topic-card h3{margin:0 0 14px;font-size:22px;color:#fff}
.blog-topic-card ul{margin:0;padding-left:20px}
.blog-topic-card li{margin:0 0 12px;color:#eef4fb;font-size:16px;line-height:1.45}
.blog-intro{padding:34px 0 10px}
.blog-intro h2{margin:0 0 12px;text-align:center;color:#16324a;font-size:28px}
.blog-intro p{margin:0 auto 12px;max-width:980px;text-align:center;color:#627487;font-size:17px;line-height:1.65}
.blog-article-section{padding:8px 0}
.blog-article-section h2{margin:0 0 18px;text-align:center;color:#16324a;font-size:30px}
.blog-article-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.blog-card{background:#fff;border:1px solid #e1e8ef;border-radius:22px;overflow:hidden;box-shadow:0 12px 26px rgba(18,49,74,.08);display:flex;flex-direction:column}
.blog-card img{width:100%;height:220px;object-fit:cover;display:block}
.blog-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-label{display:inline-block;align-self:flex-start;background:#eef7f0;color:#22874a;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}
.blog-card h3{margin:0;color:#14314a;font-size:22px;line-height:1.35}
.blog-card p{margin:0;color:#627487;font-size:16px;line-height:1.6;flex:1}
.blog-card .btn{align-self:flex-start;margin-top:8px}
.blog-cta{margin-top:28px;background:linear-gradient(135deg,#103151 0%, #173f67 100%);border-radius:28px;padding:34px;color:#fff;box-shadow:0 18px 40px rgba(18,49,74,.18)}
.blog-cta h2{margin:0 0 12px;font-size:32px;color:#fff}
.blog-cta p{margin:0 0 12px;color:#e6eef6;font-size:17px;line-height:1.6;max-width:980px}
.blog-cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.blog-contact-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:#dce8f3;font-size:15px;line-height:1.7}
.article-page{background:#f4f7fb;padding:22px 0 20px}
.article-shell{width:min(980px,92%);margin:auto;background:#fff;border:1px solid #e2e9f0;border-radius:24px;overflow:hidden;box-shadow:0 16px 36px rgba(18,49,74,.1)}
.article-hero{background:linear-gradient(90deg, rgba(12,42,72,.82) 0%, rgba(12,42,72,.72) 48%, rgba(18,51,79,.48) 100%), url('assets/media/blog-hero.jpg') center/cover no-repeat;padding:42px 38px;color:#fff}
.article-hero .label{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;margin-bottom:12px}
.article-hero h1{margin:0 0 12px;font-size:40px;line-height:1.1;color:#fff}
.article-hero p{margin:0;color:#e5edf5;font-size:18px;line-height:1.6;max-width:760px}
.article-body{padding:32px 38px}
.article-body h2{margin:24px 0 10px;color:#16324a;font-size:28px}
.article-body p{margin:0 0 14px;color:#57697b;font-size:17px;line-height:1.75}
.article-body ul{margin:0 0 16px 20px;color:#57697b;font-size:17px;line-height:1.75}
.article-body li{margin-bottom:8px}
.article-note{background:#eef6ff;border:1px solid #d9e8f9;border-radius:18px;padding:18px;margin:18px 0}
.article-note strong{display:block;color:#16324a;font-size:18px;margin-bottom:6px}
.article-bottom-cta{margin-top:20px;background:#f7fbf7;border:1px solid #deebdf;border-radius:18px;padding:20px}
.article-bottom-cta h3{margin:0 0 8px;color:#16324a;font-size:24px}
.article-bottom-cta p{margin:0 0 14px;color:#5f7184}
.article-bottom-actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:980px){.blog-hero-inner,.blog-article-grid{grid-template-columns:1fr}.blog-hero h1{font-size:32px}.article-hero h1{font-size:32px}}


/* longform trade blog article upgrade */
.article-hero{
  min-height: 280px;
  display:flex;
  align-items:flex-end;
}
.article-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
  color:#d7e4ef;
  font-size:14px;
}
.article-meta-pill{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:8px 12px;
}
.article-body{
  max-width: 860px;
}
.article-intro-lead{
  font-size:19px !important;
  color:#44586c !important;
}
.article-toc{
  background:#f7fbff;
  border:1px solid #dce9f7;
  border-radius:18px;
  padding:18px 20px;
  margin:0 0 24px;
}
.article-toc strong{
  display:block;
  color:#16324a;
  font-size:18px;
  margin-bottom:10px;
}
.article-toc ul{
  margin:0 0 0 20px;
}
.article-highlight{
  background:linear-gradient(180deg,#eef7ff 0%, #f8fbff 100%);
  border:1px solid #dbe8f7;
  border-left:6px solid #2e7be6;
  border-radius:18px;
  padding:18px 18px;
  margin:18px 0;
}
.article-highlight strong{
  display:block;
  color:#16324a;
  font-size:18px;
  margin-bottom:6px;
}
.article-checklist{
  background:#fbfcfe;
  border:1px solid #e4ebf2;
  border-radius:18px;
  padding:18px 20px;
  margin:18px 0;
}
.article-checklist h3{
  margin:0 0 10px;
  color:#16324a;
  font-size:22px;
}
.article-checklist ul{
  list-style:none;
  margin:0;
  padding:0;
}
.article-checklist li{
  position:relative;
  padding-left:28px;
  margin-bottom:10px;
  color:#57697b;
  font-size:17px;
  line-height:1.65;
}
.article-checklist li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#1f9d52;
  font-weight:800;
}
.article-split-cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
}
.article-mini-card{
  background:#fff;
  border:1px solid #e4ebf2;
  border-radius:18px;
  padding:18px 18px;
  box-shadow:0 10px 22px rgba(18,49,74,.05);
}
.article-mini-card h4{
  margin:0 0 8px;
  color:#16324a;
  font-size:20px;
}
.article-mini-card p{
  margin:0;
  color:#5f7184;
  font-size:16px;
}
.article-final-cta{
  margin-top:24px;
  background:linear-gradient(135deg,#103151 0%, #17406a 100%);
  border-radius:20px;
  padding:24px 24px;
  color:#fff;
}
.article-final-cta h3{
  margin:0 0 8px;
  color:#fff;
  font-size:28px;
}
.article-final-cta p{
  color:#e6eef6 !important;
  margin:0 0 14px !important;
}
.article-final-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.article-return-link{
  display:inline-block;
  margin-bottom:16px;
  color:#456b93;
  text-decoration:none;
  font-weight:700;
}
.article-return-link:hover{
  text-decoration:underline;
}
@media (max-width:980px){
  .article-split-cta{
    grid-template-columns:1fr;
  }
}


/* seo blog + subscription upgrade */
.subscribe-updates-section{
  padding:26px 0;
}
.subscribe-updates-box{
  background:linear-gradient(135deg,#12314a 0%, #19466f 100%);
  border-radius:24px;
  padding:28px 28px;
  color:#fff;
  box-shadow:0 18px 40px rgba(18,49,74,.18);
}
.subscribe-updates-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:center;
}
.subscribe-badge{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:800;
  margin-bottom:12px;
  text-transform:uppercase;
}
.subscribe-updates-box h2{
  margin:0 0 10px;
  color:#fff;
  font-size:34px;
  line-height:1.15;
}
.subscribe-updates-box p{
  margin:0 0 12px;
  color:#e6eef6;
  font-size:17px;
  line-height:1.65;
}
.subscribe-points{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 16px;
  margin-top:14px;
}
.subscribe-points div{
  color:#d7e5f2;
  font-size:15px;
}
.subscribe-form-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:20px;
  backdrop-filter:blur(3px);
}
.subscribe-form-card h3{
  margin:0 0 8px;
  color:#fff;
  font-size:24px;
}
.subscribe-form-card p{
  margin:0 0 14px;
  color:#dbe8f3;
  font-size:14px;
}
.subscribe-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.subscribe-field.full{
  grid-column:1 / -1;
}
.subscribe-input, .subscribe-select{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:#fff;
  color:#17324a;
  font-size:14px;
}
.subscribe-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.subscribe-note{
  margin-top:12px;
  color:#d6e4f0;
  font-size:12px;
  line-height:1.5;
}
.author-expertise{
  background:#f8fbfe;
  border:1px solid #e2ebf3;
  border-radius:18px;
  padding:18px;
  margin:0 0 20px;
}
.author-expertise strong{
  display:block;
  color:#16324a;
  font-size:18px;
  margin-bottom:6px;
}
.related-articles{
  margin-top:24px;
}
.related-articles h3{
  margin:0 0 12px;
  color:#16324a;
  font-size:24px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.related-card{
  background:#fff;
  border:1px solid #e2ebf3;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 22px rgba(18,49,74,.05);
}
.related-card span{
  display:inline-block;
  background:#eef7f0;
  color:#22874a;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}
.related-card h4{
  margin:0 0 8px;
  color:#16324a;
  font-size:20px;
  line-height:1.35;
}
.related-card p{
  margin:0 0 14px !important;
  color:#5f7184 !important;
  font-size:15px !important;
  line-height:1.6 !important;
}
.blog-seo-note{
  margin-top:16px;
  background:#eef6ff;
  border:1px solid #d8e8f8;
  border-radius:18px;
  padding:18px;
}
.blog-seo-note strong{
  display:block;
  color:#16324a;
  font-size:18px;
  margin-bottom:6px;
}
@media (max-width:980px){
  .subscribe-updates-grid,.subscribe-points,.subscribe-grid,.related-grid{
    grid-template-columns:1fr;
  }
  .subscribe-updates-box h2{
    font-size:28px;
  }
}


/* Brevo subscription mode */
.brevo-mode-note{
  margin-top:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:12px 14px;
  color:#e8f1f8;
  font-size:13px;
  line-height:1.55;
}
.brevo-embed-wrap{
  background:#fff;
  border-radius:18px;
  padding:12px;
  min-height:420px;
  box-shadow:0 12px 28px rgba(18,49,74,.08);
}
.brevo-embed-wrap iframe{
  width:100%;
  min-height:396px;
  border:0;
  border-radius:12px;
  background:#fff;
}
.brevo-fallback-box{
  background:#fff;
  border-radius:18px;
  padding:20px;
  color:#17324a;
  min-height:396px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 12px 28px rgba(18,49,74,.08);
}
.brevo-fallback-box h3{
  margin:0 0 10px;
  color:#17324a;
  font-size:24px;
}
.brevo-fallback-box p{
  margin:0 0 12px;
  color:#5f7184;
  font-size:15px;
  line-height:1.6;
}
.brevo-steps{
  margin:0 0 14px 18px;
  color:#5f7184;
  font-size:14px;
  line-height:1.65;
}
.brevo-steps li{margin-bottom:6px}
.brevo-inline-code{
  display:block;
  margin-top:8px;
  padding:10px 12px;
  background:#f5f8fc;
  border:1px solid #e2eaf2;
  border-radius:12px;
  color:#17324a;
  font-size:12px;
  word-break:break-all;
}


/* subscribe success page */
.success-page{
  background:#f4f7fb;
  min-height:70vh;
  padding:38px 0 48px;
}
.success-shell{
  width:min(920px,92%);
  margin:auto;
  background:#fff;
  border:1px solid #e3ebf2;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(18,49,74,.10);
}
.success-hero{
  background:linear-gradient(135deg,#103151 0%, #1b4f7f 100%);
  color:#fff;
  padding:40px 34px;
}
.success-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:12px;
}
.success-hero h1{
  margin:0 0 10px;
  color:#fff;
  font-size:38px;
  line-height:1.12;
}
.success-hero p{
  margin:0;
  color:#e4eef7;
  font-size:18px;
  line-height:1.6;
  max-width:760px;
}
.success-body{
  padding:28px 34px 34px;
}
.success-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:0 0 22px;
}
.success-card{
  background:#f8fbfe;
  border:1px solid #e3ebf2;
  border-radius:18px;
  padding:18px;
}
.success-card h3{
  margin:0 0 8px;
  color:#16324a;
  font-size:20px;
}
.success-card p{
  margin:0;
  color:#607286;
  font-size:15px;
  line-height:1.6;
}
.success-note{
  background:#eef7ff;
  border:1px solid #dbe8f8;
  border-left:6px solid #2f7ce6;
  border-radius:18px;
  padding:18px 18px;
  margin:0 0 20px;
}
.success-note strong{
  display:block;
  color:#16324a;
  font-size:19px;
  margin-bottom:6px;
}
.success-note p{
  margin:0;
  color:#5f7184;
  font-size:16px;
  line-height:1.65;
}
.success-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:980px){
  .success-grid{
    grid-template-columns:1fr;
  }
  .success-hero h1{
    font-size:30px;
  }
}


/* Brevo native-styled subscription section */
.subscribe-native{
  padding: 30px 0;
}
.subscribe-native-shell{
  background: linear-gradient(135deg,#0f2f4a 0%, #1a4a73 55%, #215985 100%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(18,49,74,.18);
  position: relative;
}
.subscribe-native-shell:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.06), transparent 28%);
  pointer-events:none;
}
.subscribe-native-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 26px;
  padding: 34px;
  align-items: stretch;
}
.subscribe-native-left{
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.subscribe-native-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  padding:8px 14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
  margin-bottom:14px;
}
.subscribe-native-left h2{
  margin:0 0 12px;
  color:#fff;
  font-size:36px;
  line-height:1.12;
}
.subscribe-native-left p{
  margin:0 0 14px;
  color:#e4eef7;
  font-size:17px;
  line-height:1.65;
  max-width: 660px;
}
.subscribe-native-points{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px 16px;
  margin-top:8px;
}
.subscribe-native-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px 14px;
}
.subscribe-native-point .icon{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:15px;
  flex:0 0 30px;
}
.subscribe-native-point strong{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.25;
}
.subscribe-native-point span{
  display:block;
  color:#d5e4f1;
  font-size:12px;
  line-height:1.4;
  margin-top:3px;
}
.subscribe-native-mini{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.subscribe-native-mini .mini{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);
  color:#d9e7f3;
  font-size:13px;
  padding:9px 12px;
  border-radius:999px;
}
.subscribe-native-right{
  display:flex;
  align-items:stretch;
}
.brevo-native-card{
  width:100%;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding: 16px;
  backdrop-filter: blur(4px);
  display:flex;
  flex-direction:column;
}
.brevo-native-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.brevo-native-head h3{
  margin:0 0 6px;
  color:#fff;
  font-size:24px;
}
.brevo-native-head p{
  margin:0;
  color:#dce8f3;
  font-size:14px;
  line-height:1.55;
}
.brevo-native-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#dff6e7;
  background:rgba(37,181,91,.18);
  border:1px solid rgba(126,234,164,.26);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.brevo-native-status:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#59da7e;
  display:block;
}
.brevo-embed-wrap{
  background:#fff;
  border-radius:20px;
  padding:12px;
  min-height:430px;
  box-shadow: 0 16px 34px rgba(12,33,52,.18);
  border:1px solid #dfe8f1;
  position:relative;
  overflow:hidden;
}
.brevo-embed-wrap:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:46px;
  background:linear-gradient(180deg,#f8fbfe 0%, #eef4f9 100%);
  border-bottom:1px solid #e3ebf3;
}
.brevo-embed-wrap:after{
  content:"";
  position:absolute;
  top:17px; left:16px;
  width:10px; height:10px; border-radius:50%;
  background:#ff6b6b;
  box-shadow: 18px 0 0 #ffd166, 36px 0 0 #4ecb71;
}
.brevo-embed-wrap iframe{
  width:100%;
  min-height:400px;
  border:0;
  border-radius:14px;
  background:#fff;
  position:relative;
  z-index:1;
  margin-top:34px;
}
.brevo-fallback-box{
  background:#fff;
  border-radius:20px;
  padding:22px;
  color:#17324a;
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 16px 34px rgba(12,33,52,.18);
  border:1px solid #dfe8f1;
}
.brevo-fallback-box h3{
  margin:0 0 10px;
  color:#17324a;
  font-size:24px;
}
.brevo-fallback-box p{
  margin:0 0 12px;
  color:#5f7184;
  font-size:15px;
  line-height:1.65;
}
.brevo-steps{
  margin:0 0 14px 18px;
  color:#5f7184;
  font-size:14px;
  line-height:1.65;
}
.brevo-steps li{margin-bottom:6px}
.brevo-inline-code{
  display:block;
  margin-top:8px;
  padding:10px 12px;
  background:#f5f8fc;
  border:1px solid #e2eaf2;
  border-radius:12px;
  color:#17324a;
  font-size:12px;
  word-break:break-all;
}
.subscribe-native-note{
  margin-top:14px;
  color:#dbe7f2;
  font-size:12px;
  line-height:1.55;
}
@media (max-width: 980px){
  .subscribe-native-grid,
  .subscribe-native-points{
    grid-template-columns:1fr;
  }
  .subscribe-native-left h2{
    font-size:30px;
  }
  .subscribe-native-shell{
    border-radius:22px;
  }
  .subscribe-native-grid{
    padding:22px;
  }
  .brevo-native-head{
    flex-direction:column;
  }
}


/* Brevo business inquiry style */
.subscribe-native-shell.business-card-style{
  background:linear-gradient(135deg,#0c2740 0%, #163a5b 52%, #1c557e 100%);
}
.subscribe-native-shell.business-card-style:before{
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 38%);
}
.subscribe-native-badge.business{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
}
.subscribe-native-left h2.business-title{
  font-size:38px;
  max-width:680px;
}
.subscribe-native-left .business-sub{
  max-width:700px;
}
.subscribe-native-points.business-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.subscribe-native-point.business-point{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.subscribe-native-mini.business-mini .mini{
  background:rgba(255,255,255,.08);
}
.brevo-native-card.business-inquiry{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:18px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
}
.brevo-native-card.business-inquiry:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 34%);
  pointer-events:none;
}
.inquiry-card-topline{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.inquiry-card-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#e4eef8;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:10px;
}
.inquiry-card-title{
  margin:0 0 6px;
  color:#fff;
  font-size:26px;
  line-height:1.15;
}
.inquiry-card-desc{
  margin:0;
  color:#d8e6f2;
  font-size:14px;
  line-height:1.6;
  max-width:460px;
}
.inquiry-status-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.inquiry-status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.inquiry-status-chip.green{
  color:#dcf8e6;
  background:rgba(29,180,90,.18);
  border:1px solid rgba(98,224,142,.22);
}
.inquiry-status-chip.green:before{
  content:"";
  width:8px;height:8px;border-radius:50%;background:#59da7e;display:block;
}
.inquiry-status-chip.orange{
  color:#ffe9d2;
  background:rgba(255,149,0,.16);
  border:1px solid rgba(255,176,79,.2);
}
.inquiry-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.inquiry-benefit{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
}
.inquiry-benefit strong{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:4px;
}
.inquiry-benefit span{
  display:block;
  color:#d8e5f2;
  font-size:12px;
  line-height:1.45;
}
.brevo-embed-wrap.business-frame{
  border-radius:18px;
  padding:12px;
  min-height:448px;
  box-shadow:0 20px 40px rgba(10,26,40,.22);
}
.brevo-embed-wrap.business-frame:before{
  height:48px;
}
.brevo-embed-wrap.business-frame iframe{
  min-height:418px;
  border-radius:14px;
}
.inquiry-card-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-top:14px;
  position:relative;
  z-index:1;
}
.inquiry-card-bottom p{
  margin:0;
  color:#d7e5f1;
  font-size:12px;
  line-height:1.55;
  max-width:430px;
}
.inquiry-contact-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  color:#eff6fc;
  font-size:12px;
  font-weight:700;
}
@media (max-width:980px){
  .subscribe-native-left h2.business-title{font-size:30px}
  .inquiry-card-topline,.inquiry-card-bottom{
    flex-direction:column;
  }
  .inquiry-status-stack{
    align-items:flex-start;
  }
  .inquiry-benefits,.subscribe-native-points.business-grid{
    grid-template-columns:1fr;
  }
}