/* ============================================================
   FitBridge Global — Single-page B2B website
   Working brand placeholder. Rebrand by editing :root vars + copy.
   ============================================================ */
:root{
  --navy-900:#0F3460;
  --navy-800:#123C6E;
  --navy-700:#1A4A88;
  --navy-100:#E7EEF7;
  --teal-500:#0F3460;
  --teal-600:#0B2950;
  --teal-50:#E8EEF7;
  --amber-400:#C9A24B;
  --amber-50:#F7F1E2;
  --gold:#C9A24B;
  --gold-soft:#F6EFDD;
  --ink:#1B2737;
  --slate:#4E6077;
  --slate-light:#7C8CA3;
  --bg-soft:#F5F7FA;
  --border:#E1E8F2;
  --white:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(10,27,51,.06),0 4px 12px rgba(10,27,51,.05);
  --shadow-md:0 6px 24px rgba(10,27,51,.10);
  --shadow-lg:0 16px 48px rgba(10,27,51,.14);
  --radius:14px;
  --radius-lg:20px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans JP","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Kufi Arabic","Geeza Pro",Tahoma,sans-serif;
  --container:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  overflow-x:hidden;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:underline}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section-alt{background:var(--bg-soft)}
section[id]{scroll-margin-top:86px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-600);background:var(--teal-50);
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.section-head{max-width:760px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(28px,4vw,40px);line-height:1.18;letter-spacing:-.02em;color:var(--navy-900);margin-bottom:14px}
.section-head p{font-size:17px;color:var(--slate)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15.5px;line-height:1;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal-500);color:#fff;box-shadow:0 8px 22px rgba(15,163,122,.30)}
.btn-primary:hover{background:var(--teal-600);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,163,122,.36)}
.btn-outline{border-color:var(--navy-700);color:var(--navy-800);background:transparent}
.btn-outline:hover{background:var(--navy-800);color:#fff;text-decoration:none;transform:translateY(-2px)}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)}
.btn-light:hover{background:#fff;color:var(--navy-900);text-decoration:none;transform:translateY(-2px)}
.btn-sm{padding:11px 18px;font-size:14px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);transition:box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{
  width:40px;height:40px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--teal-500),var(--navy-700));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 14px rgba(15,163,122,.35);
}
.brand-name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy-900);line-height:1.1}
.brand-sub{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-light)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:var(--ink);font-weight:550;font-size:15px}
.nav-links a:hover{color:var(--teal-600);text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px}
.nav-toggle span{display:block;width:24px;height:2.4px;background:var(--navy-900);margin:5px 0;border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 520px at 88% -10%,#12345F 0%,var(--navy-900) 55%,var(--navy-900) 100%);
  color:#fff;padding:96px 0 0;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:84px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;color:#DCE8F7;margin-bottom:22px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--amber-400);box-shadow:0 0 0 4px rgba(242,184,75,.25)}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin-bottom:22px}
.hero h1 .accent{color:var(--amber-400)}
.hero h1 .accent-teal{color:#D8B86A}
.hero-sub{font-size:18px;color:#B9C9DE;max-width:560px;margin-bottom:30px}
.hero-sub strong{color:#fff;font-weight:650}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero-points{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:14.5px;color:#B9C9DE}
.hero-points li{display:flex;align-items:center;gap:9px}
.hero-points .tick{color:#D8B86A;font-weight:800}
.hero-visual{position:relative}
.hero-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);padding:26px;backdrop-filter:blur(6px);
  box-shadow:var(--shadow-lg);
}
.hero-card-title{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8FB2DC;margin-bottom:20px;display:flex;align-items:center;gap:9px}
.flow-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.flow-node{
  flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:14px 12px;text-align:center;
}
.flow-node .fi{font-size:22px;margin-bottom:6px}
.flow-node .fl{font-size:12px;font-weight:650;color:#E7F0FB}
.flow-arrow{color:#D8B86A;font-weight:800;font-size:18px}
.hero-check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(15,163,122,.16);border:1px solid rgba(79,210,172,.35);margin-top:14px}
.hero-check .tick{color:#D8B86A;font-weight:800}
.hero-check p{font-size:13.5px;color:#DCE8F7}
.hero-check p strong{color:#fff}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  border-top:1px solid rgba(255,255,255,.14);padding:30px 0 40px;
}
.hero-stat .num{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em}
.hero-stat .num small{font-size:14px;color:#D8B86A;font-weight:700}
.hero-stat .lab{font-size:13px;color:#8FA8C6;margin-top:3px}

/* ---------- Promise / differentiators ---------- */
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.promise-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.promise-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.promise-card .ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:var(--teal-50);color:var(--teal-600);
}
.promise-card h3{font-size:17px;color:var(--navy-900);margin-bottom:8px;letter-spacing:-.01em}
.promise-card p{font-size:14.5px;color:var(--slate)}
.not-card{background:var(--navy-900);color:#fff;border:none}
.not-card .ico{background:rgba(255,255,255,.12);color:var(--amber-400)}
.not-card p{color:#B9C9DE}
.not-card h3{color:#fff}
.not-card .no{font-weight:800;color:var(--amber-400)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-copy h2{font-size:clamp(27px,3.6vw,38px);letter-spacing:-.02em;color:var(--navy-900);line-height:1.2;margin-bottom:18px}
.about-copy > p{color:var(--slate);font-size:16.5px;margin-bottom:18px}
.about-list{margin-top:26px;display:grid;gap:14px}
.about-list li{display:flex;gap:13px;align-items:flex-start}
.about-list .ck{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal-50);color:var(--teal-600);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-top:2px;
}
.about-list b{color:var(--navy-900);font-weight:650}
.about-list span{display:block;color:var(--slate);font-size:14.5px}
.about-visual{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-900));
  color:#fff;padding:40px 34px;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
}
.about-visual .grid-bg{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px}
.about-chip{
  position:relative;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#D8B86A;margin-bottom:16px;
}
.about-visual h3{position:relative;font-size:24px;line-height:1.25;letter-spacing:-.01em;margin-bottom:14px}
.about-visual p{position:relative;color:#B9C9DE;font-size:15px;margin-bottom:22px}
.mini-badges{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.mini-badge{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:#E7F0FB}

/* ---------- Packages ---------- */
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.package-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;
}
.package-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.package-top{padding:30px 32px 26px;border-bottom:1px solid var(--border)}
.package-card.featured .package-top{background:linear-gradient(150deg,var(--navy-800),var(--navy-900));border:none}
.package-card.featured .p-flag{background:var(--amber-400);color:var(--navy-900)}
.package-card.featured .p-title{color:#fff}
.package-card.featured .p-desc{color:#B9C9DE}
.p-flag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--teal-50);color:var(--teal-600);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.p-title{font-size:22px;font-weight:800;color:var(--navy-900);letter-spacing:-.01em;margin-bottom:8px}
.p-desc{font-size:14.5px;color:var(--slate)}
.p-body{padding:26px 32px 30px;display:flex;flex-direction:column;flex:1}
.p-price{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.p-price .amt{font-size:26px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em}
.p-price .note{font-size:13.5px;color:var(--slate-light)}
.p-feats{display:grid;gap:12px;margin-bottom:26px;flex:1}
.p-feats li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.p-feats .ck{flex:none;width:21px;height:21px;border-radius:50%;background:var(--teal-50);color:var(--teal-600);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.p-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm)}
.step::after{
  content:"";position:absolute;top:50%;right:-14px;width:10px;height:10px;border-top:2px solid var(--teal-500);border-right:2px solid var(--teal-500);
  transform:translateY(-50%) rotate(45deg);
}
.steps .step:last-child::after{display:none}
.step-num{
  width:40px;height:40px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);
  font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.step h3{font-size:16.5px;color:var(--navy-900);letter-spacing:-.01em;margin-bottom:7px}
.step p{font-size:13.5px;color:var(--slate)}

/* ---------- Free benefits band ---------- */
.free-band{
  background:linear-gradient(120deg,var(--navy-800),var(--navy-900));
  border-radius:var(--radius-lg);padding:56px 60px;color:#fff;position:relative;overflow:hidden;
}
.free-band .grid-bg{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}
.free-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.free-band h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
.free-band h2 .accent{color:#D8B86A}
.free-band .free-desc{color:#B9C9DE;font-size:16px;margin-bottom:22px}
.free-list{display:grid;gap:11px;margin-bottom:0}
.free-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#DCE8F7}
.free-list .tick{color:#D8B86A;font-weight:800;flex:none}
.free-form-card{background:#fff;border-radius:16px;padding:30px;color:var(--ink);box-shadow:var(--shadow-lg)}
.free-form-card h3{font-size:19px;color:var(--navy-900);letter-spacing:-.01em;margin-bottom:6px}
.free-form-card .sub{font-size:13.5px;color:var(--slate);margin-bottom:20px}
.free-form-card .btn{width:100%}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:650;color:var(--navy-800);margin-bottom:7px}
.field .req{color:#D64545}
.consent .req{color:#D64545}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:10px;
  font-family:inherit;font-size:15px;color:var(--ink);background:#FBFCFE;transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 4px rgba(15,163,122,.13);background:#fff}
.field textarea{resize:vertical;min-height:110px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12.5px;color:var(--slate-light);margin-top:12px;line-height:1.5}
.form-msg{display:none;margin-top:14px;padding:13px 15px;border-radius:10px;font-size:14px;font-weight:600}
.form-msg.ok{display:block;background:var(--teal-50);color:var(--teal-600);border:1px solid rgba(15,163,122,.3)}
.form-msg.err{display:block;background:#FDEBEA;color:#B03024;border:1px solid rgba(214,69,69,.3)}
.form-msg.loading{display:block;background:var(--bg-soft);color:var(--navy-800);border:1px solid var(--border)}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%}
.faq-item.open{border-color:rgba(15,163,122,.45);box-shadow:0 8px 24px rgba(10,27,51,.08)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:20px 24px;font-family:var(--font);font-size:16px;font-weight:650;line-height:1.5;color:var(--navy-900);
}
.faq-q:hover{color:var(--teal-600)}
.faq-chev{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--slate);transition:transform .25s ease,background .25s ease,color .25s ease;font-size:13px}
.faq-item.open .faq-chev{transform:rotate(180deg);background:var(--teal-500);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 24px 22px;color:var(--slate);font-size:15px;line-height:1.7;font-family:var(--font);font-weight:400;font-style:normal}
.faq-a-inner a{font-weight:600}

/* ---------- Disclaimer band ---------- */
.disc-band{background:var(--amber-50);border:1px solid rgba(242,184,75,.45);border-radius:var(--radius);padding:28px 30px}
.disc-band h3{font-size:17px;color:var(--navy-900);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.disc-band p{font-size:14.5px;color:#6B5D38;margin-bottom:10px}
.disc-band p:last-child{margin-bottom:0}
.disc-band a{font-weight:700;color:var(--navy-800)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.contact-side h2{font-size:clamp(27px,3.6vw,38px);letter-spacing:-.02em;color:var(--navy-900);line-height:1.2;margin-bottom:16px}
.contact-side > p{color:var(--slate);font-size:16px;margin-bottom:26px}
.contact-info{display:grid;gap:16px}
.contact-info li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.contact-info .ico{flex:none;width:40px;height:40px;border-radius:10px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center}
.contact-info b{display:block;color:var(--navy-900);font-size:15px;margin-bottom:2px}
.contact-info span{font-size:13.5px;color:var(--slate)}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-md)}
.contact-card h3{font-size:21px;color:var(--navy-900);letter-spacing:-.01em;margin-bottom:6px}
.contact-card .sub{font-size:14px;color:var(--slate);margin-bottom:24px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--slate);margin-top:4px}
.consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--teal-500)}
.consent a{font-weight:650}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#9FB2CC;padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-sub{color:#7D93B3}
.footer-brand p{font-size:14px;margin-top:16px;line-height:1.65}
.footer-col h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.footer-col ul{display:grid;gap:11px}
.footer-col a{color:#9FB2CC;font-size:14.5px}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:13px;color:#7D93B3}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:20px}
.footer-bottom a{color:#9FB2CC}
.footer-bottom a:hover{color:#fff;text-decoration:none}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:680px;margin:0 auto;
  background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:22px 24px;display:flex;flex-direction:column;gap:16px;transform:translateY(120%);opacity:0;
  transition:transform .35s ease,opacity .35s ease;
}
.cookie-banner.show{transform:translateY(0);opacity:1}
.cookie-banner h4{font-size:15.5px;color:var(--navy-900);margin-bottom:4px}
.cookie-banner p{font-size:13.5px;color:var(--slate);line-height:1.55}
.cookie-banner .cb-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-banner .cb-actions .btn{padding:11px 18px;font-size:13.5px}

/* ---------- Subpage ---------- */
.sub-hero{background:radial-gradient(900px 400px at 85% -20%,#12345F 0%,var(--navy-900) 60%);color:#fff;padding:72px 0 64px}
.sub-hero .eyebrow{background:rgba(255,255,255,.1);color:#D8B86A}
.sub-hero h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.sub-hero p{color:#B9C9DE;font-size:17px;max-width:720px}
.legal-page{padding:64px 0 88px}
.legal-page .container{max-width:860px}
.legal-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 52px;box-shadow:var(--shadow-sm)}
.legal-card h2{font-size:21px;color:var(--navy-900);margin:30px 0 10px;letter-spacing:-.01em}
.legal-card h2:first-child{margin-top:0}
.legal-card p{font-size:15px;color:var(--slate);margin-bottom:14px}
.legal-card ul{list-style:disc;padding-left:22px;display:grid;gap:8px;font-size:15px;color:var(--slate);margin-bottom:14px}
.legal-card .updated{font-size:13px;color:var(--slate-light);font-style:italic;margin-bottom:26px}
.thank-box{max-width:680px;margin:0 auto;text-align:center;padding:64px 0}
.thank-icon{width:84px;height:84px;border-radius:50%;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;margin:0 auto 26px;font-size:38px}
.thank-box h1{font-size:34px;color:var(--navy-900);letter-spacing:-.02em;margin-bottom:14px}
.thank-box p{color:var(--slate);font-size:16.5px;margin-bottom:30px}
.thank-steps{display:grid;gap:12px;max-width:440px;margin:0 auto 34px;text-align:left}
.thank-steps li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:14.5px;color:var(--slate);box-shadow:var(--shadow-sm)}
.thank-steps .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal-50);color:var(--teal-600);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}

/* ---------- Reveal animation ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .package-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero{padding-top:72px}
  .promise-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr 1fr}
  .step::after{display:none}
  .free-grid{grid-template-columns:1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .section{padding:64px 0}
  .hero-visual .hero-card{margin-top:0;width:100%;padding:26px 22px}
  .about-visual{min-height:360px}
  .img-band img{height:280px}
  .contact-photo img{height:180px}
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;align-items:flex-start;gap:4px;
    padding:18px 24px 26px;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);
    transform:translateY(-120%);transition:transform .25s ease;z-index:99;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{display:block;width:100%;padding:12px 6px;font-size:16px;border-bottom:1px solid var(--bg-soft)}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .hero-stats{grid-template-columns:1fr 1fr;gap:26px 16px}
  .faq-wrap{grid-template-columns:1fr}
  .promise-grid{grid-template-columns:1fr}
  .package-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .free-band{padding:44px 26px}
  .contact-card{padding:26px 22px}
  .legal-card{padding:34px 26px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .hero{text-align:left}
}
@media (max-width:420px){
  .hero-ctas .btn{width:100%}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- Compliance package: out-of-scope note ---------- */
.scope-note{margin-top:4px;margin-bottom:26px;background:var(--bg-soft);border:1px dashed var(--border);border-radius:12px;padding:16px 18px}
.scope-note h4{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light);margin-bottom:10px}
.scope-note ul{display:grid;gap:8px}
.scope-note li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--slate)}
.scope-note .no{flex:none;width:20px;height:20px;border-radius:50%;background:#FDEBEA;color:#B03024;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}

/* ---------- Annual retainer note ---------- */
.retainer-note{margin-top:28px;max-width:860px;margin-left:auto;margin-right:auto;text-align:center;background:#fff;border:1px dashed var(--border);border-radius:16px;padding:24px 30px;box-shadow:var(--shadow-sm)}
.retainer-note h4{font-size:17px;color:var(--navy-900);letter-spacing:-.01em;margin-bottom:8px}
.retainer-note p{font-size:14.5px;color:var(--slate);line-height:1.65}

/* ---------- Conditional fields ---------- */
.is-hidden{display:none !important}

/* ---------- JotForm-style card questionnaire ---------- */
.q-head{margin-bottom:18px}
.q-progress{height:8px;background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-bottom:9px}
.q-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal-500),var(--navy-700));border-radius:999px;transition:width .35s ease}
.q-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:650;color:var(--slate-light);letter-spacing:.04em}
.q-body{min-height:400px}
.q-card{display:none !important}
.q-card.active{display:block !important;animation:qIn .38s ease}
@keyframes qIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.q-emoji{font-size:40px;margin-bottom:12px}
.q-title{font-size:20px;color:var(--navy-900);letter-spacing:-.01em;margin-bottom:10px}
.q-desc{font-size:14.5px;color:var(--slate);margin-bottom:18px}
.q-features{display:grid;gap:10px;margin-bottom:24px}
.q-features li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--slate)}
.q-features .tick{flex:none;color:var(--teal-600);font-weight:800}
.q-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.q-nav.single{justify-content:flex-end}
.q-nav .btn{min-width:128px}
.q-nav .btn:only-child{margin-left:auto}
@media (max-width:420px){.q-nav{flex-direction:column-reverse}.q-nav .btn{width:100%}}

/* ---------- File upload (dropzone style) ---------- */
.file-drop{display:block;border:2px dashed var(--border);border-radius:12px;background:var(--bg-soft);padding:20px 16px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease;margin-top:8px}
.file-drop:hover{border-color:var(--teal-500);background:var(--teal-50)}
.file-drop.drag{border-color:var(--teal-500);background:var(--teal-50)}
.file-drop .fd-ico{font-size:24px;margin-bottom:6px}
.file-drop .fd-main{font-size:14px;font-weight:650;color:var(--navy-800)}
.file-drop .fd-sub{font-size:12.5px;color:var(--slate-light);margin-top:4px}
.file-drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-list{display:none;margin-top:10px;font-size:12.5px;color:var(--teal-600);background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 12px;line-height:1.7}
.file-list.show{display:block}

/* ---------- Static field display ---------- */
.field-static{padding:13px 15px;border:1.5px solid var(--border);border-radius:10px;background:#FBFCFE;font-size:15px;color:var(--ink)}

/* ---------- Language selector ---------- */
.lang-select{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:13px;font-weight:650;color:var(--navy-800);
  background:var(--bg-soft) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2351617A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1.5px solid var(--border);border-radius:999px;
  padding:9px 30px 9px 16px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;
}
.lang-select:hover{border-color:var(--teal-500)}
.lang-select:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 4px rgba(15,163,122,.13)}
@media (max-width:768px){.lang-select{max-width:118px;padding:9px 26px 9px 12px;font-size:12.5px}}

/* ---------- RTL (Arabic) ---------- */
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .flow-arrow{transform:scaleX(-1)}
html[dir="rtl"] .hero-ctas{justify-content:flex-start}
html[dir="rtl"] .faq-q{text-align:right}
html[dir="rtl"] .q-nav{direction:rtl}
html[dir="rtl"] .q-back{unicode-bidi:embed}
html[dir="rtl"] .step::after{right:auto;left:-14px;transform:translateY(-50%) rotate(225deg)}

/* ---------- Font stacks per script ---------- */

/* ---------- Language switcher (prominent pill) ---------- */
.lang-wrap{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:999px;padding:5px 6px 5px 10px;transition:border-color .15s ease}
.lang-wrap:hover{border-color:var(--teal-500)}
.lang-globe{font-size:15px;line-height:1;color:var(--slate)}
.lang-wrap .lang-select{border:none;background-color:transparent;background-position:right 6px center;padding:6px 24px 6px 2px;box-shadow:none;font-size:13px;font-weight:650;color:var(--navy-800);border-radius:0}
.lang-wrap .lang-select:focus{box-shadow:none}
@media (max-width:768px){
  .lang-wrap .lang-select{max-width:96px;font-size:12px;padding:6px 20px 6px 2px;background-position:right 2px center}
  .lang-wrap{padding:5px 4px 5px 8px}
}

/* ---------- Ensure bold emphasis renders for digits/Latin inside strong (FAQ answers etc.) ---------- */
.faq-a-inner strong, .faq-a-inner b{font-weight:700;font-family:inherit;font-synthesis:weight}

.btn-gold{background:var(--gold);color:var(--navy-900);box-shadow:0 8px 22px rgba(201,162,75,.35)}
.btn-gold:hover{background:#B9943F;color:var(--navy-900);text-decoration:none;transform:translateY(-2px)}

/* ---------- Photography ---------- */
.hero-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.18)}
.hero-photo img{width:100%;height:auto;display:block}
.hero-visual .hero-card{margin-top:0;margin-left:0;width:100%;position:relative;z-index:2;box-shadow:var(--shadow-lg);padding:34px 34px 30px}
.about-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 34px}
.about-visual .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.about-visual::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,52,96,.12) 0%,rgba(15,52,96,.78) 62%,rgba(15,52,96,.94) 100%)}
.about-visual > *{position:relative;z-index:2}
.contact-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:22px}
.contact-photo img{width:100%;height:210px;object-fit:cover;display:block}
.img-band{position:relative;overflow:hidden;color:#fff}
.img-band img{width:100%;height:340px;object-fit:cover;display:block}
.img-band .ib-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,52,96,.90) 0%,rgba(15,52,96,.62) 60%,rgba(15,52,96,.35) 100%);display:flex;align-items:center}
.img-band .ib-inner{position:relative;z-index:1}
.img-band h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-bottom:12px}
.img-band p{color:#D4E0F0;max-width:560px;font-size:16px}
/* subtle magnifier watermark motif */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05'%3E%3Ccircle cx='40' cy='40' r='20' stroke-width='2'/%3E%3Cpath d='M55 55l16 16' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");}

/* ============================================================
   TECH / INTERNET FEEL — glows, grids, HUD corners, data chips
   ============================================================ */
:root{
  --tech:#38BDF8;            /* electric sky accent */
  --tech-soft:rgba(56,189,248,.16);
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
}

/* ---------- Hero tech layers ---------- */
.hero{isolation:isolate}
.hero-orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0}
.hero-orb.o1{width:440px;height:440px;background:rgba(56,189,248,.16);top:-140px;right:-100px;animation:orbFloat 10s ease-in-out infinite}
.hero-orb.o2{width:340px;height:340px;background:rgba(201,162,75,.10);bottom:-120px;left:8%;animation:orbFloat 14s ease-in-out infinite reverse}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px}
.hero > .container{position:relative;z-index:1}
.hero-badge .dot{animation:pulseDot 2.2s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(242,184,75,.55)}70%{box-shadow:0 0 0 9px rgba(242,184,75,0)}100%{box-shadow:0 0 0 0 rgba(242,184,75,0)}}

/* ---------- Hero visual: photo + HUD + floating chips ---------- */
.hero-visual{position:relative}
.hero-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.18)}
.hero-photo::before{content:"";position:absolute;top:10px;left:10px;width:28px;height:28px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);z-index:2;opacity:.95}
.hero-photo::after{content:"";position:absolute;bottom:10px;right:10px;width:28px;height:28px;border-bottom:2px solid var(--tech);border-right:2px solid var(--tech);z-index:2;opacity:.95}
.hero-photo .hp-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(15,52,96,.22) 0%,rgba(15,52,96,.05) 55%,rgba(201,162,75,.08) 100%)}
.hero-photo img{width:100%;height:auto;display:block}
.hero-visual .hero-card{margin-top:0;margin-left:0;width:100%;position:relative;z-index:2;box-shadow:var(--shadow-lg);padding:34px 34px 30px}

.av-img-2{position:absolute;z-index:3;width:44%;border-radius:14px;border:3px solid #fff;box-shadow:0 18px 40px rgba(10,27,51,.35);top:20px;right:20px;transform:rotate(2deg)}
.av-chip{top:auto;bottom:150px;right:-6px;animation-delay:.8s}

/* ---------- Image band: stats ---------- */
.img-band{position:relative;overflow:hidden;color:#fff}
.img-band img{width:100%;height:340px;object-fit:cover;display:block}
.img-band .ib-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,52,96,.93) 0%,rgba(15,52,96,.68) 55%,rgba(15,52,96,.30) 100%);display:flex;align-items:center}
.img-band .ib-inner{position:relative;z-index:1}
.img-band h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-bottom:12px}
.img-band p{color:#D4E0F0;max-width:560px;font-size:16px}
.ib-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 18px;margin-top:30px;max-width:960px}
.ib-stat{display:flex;flex-direction:column}
.ib-stat .ib-num{font-size:30px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.ib-stat .ib-num small{color:var(--gold);font-size:16px}
.ib-stat .ib-lab{font-size:12.5px;color:#C4D4E8;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.ib-stat .ib-sub{font-size:12px;color:#93A9C7;margin-top:4px;line-height:1.4}

/* ---------- Process: tech connector ---------- */
.step::after{content:"";position:absolute;top:30px;right:-15px;width:30px;height:2px;background:linear-gradient(90deg,var(--tech),rgba(56,189,248,0));border-radius:2px}
.step-num{background:var(--navy-900);color:#fff;box-shadow:0 6px 14px rgba(15,52,96,.28)}

/* ---------- Packages: tech hover + featured accent ---------- */
.package-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.package-card:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.45);box-shadow:0 16px 40px rgba(15,52,96,.14),0 0 0 1px rgba(56,189,248,.18)}
.package-card.featured::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--tech))}
.package-card .p-flag{font-family:var(--mono);letter-spacing:.08em}

/* ---------- Data/tech typography ---------- */
.hero-stat .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hero-stat .num small{color:var(--gold)}
.eyebrow::before{content:"";width:18px;height:2px;background:linear-gradient(90deg,var(--gold),var(--tech));border-radius:2px;display:inline-block}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-orb,.float-chip,.hero-badge .dot,.pulse-dot{animation:none}
}
@media (max-width:768px){
  .float-chip{font-size:11px;padding:7px 10px}
  .chip-2{display:none}
  .chip-3{top:48px;right:6px}
  .av-img-2{width:52%;top:14px;right:12px}
  .ib-stats{gap:22px}
  .ib-stat .ib-num{font-size:22px}
}

/* ============================================================
   FRAMER-FLAVORED — bold type, aurora glows, glass cards, marquee
   (primary color stays deep navy #0F3460)
   ============================================================ */

/* ---------- Bold typography & spacing ---------- */
.section{padding:104px 0}
.section-head{margin-bottom:60px}
.section-head h2{font-size:clamp(30px,4.4vw,54px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.hero{padding:118px 0 0}
.hero h1{font-size:clamp(40px,6.2vw,80px);line-height:1.0;letter-spacing:-.045em;font-weight:800}
.hero-sub{font-size:19px;max-width:600px;margin-top:26px}
.hero-ctas{margin-top:34px}

/* ---------- Aurora gradient blobs (Framer signature) ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora .blob{position:absolute;border-radius:50%;filter:blur(96px);opacity:.55;will-change:transform}
.blob.b1{width:560px;height:560px;background:radial-gradient(circle at 30% 30%,#38BDF8,rgba(56,189,248,0) 70%);top:-180px;right:-90px;animation:drift1 16s ease-in-out infinite}
.blob.b2{width:460px;height:460px;background:radial-gradient(circle at 60% 40%,#1E6FD9,rgba(30,111,217,0) 70%);top:8%;left:-140px;animation:drift2 21s ease-in-out infinite}
.blob.b3{width:400px;height:400px;background:radial-gradient(circle at 50% 50%,#C9A24B,rgba(201,162,75,0) 70%);bottom:-150px;right:16%;animation:drift1 26s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-44px) scale(1.09)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,54px) scale(1.12)}}

/* ---------- Film grain (noise) on hero ---------- */
.hero .noise{position:absolute;inset:0;pointer-events:none;opacity:.3;z-index:1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---------- Glass stats bar ---------- */
.hero-stats{margin-top:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero-stat .num{font-size:30px}

/* ---------- Marquee strip ---------- */
.marquee{overflow:hidden;background:var(--navy-900);border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);padding:16px 0;position:relative;z-index:2}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 30s linear infinite}
.marquee-item{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#B9CCE6;white-space:nowrap;display:flex;align-items:center;gap:44px}
.marquee-item b{color:var(--gold);font-weight:700}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Packages zone: gradient wash + glass cards ---------- */
.pkg-zone{background:radial-gradient(1100px 560px at 50% -8%,rgba(30,111,217,.16),rgba(15,52,96,0) 62%),var(--bg-soft)}
.package-card{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(15,52,96,.08)}
.package-card.featured{background:linear-gradient(180deg,#0F3460 0%,#0B2950 100%);color:#fff}
.package-card.featured .p-desc{color:#B9CCE6}
.package-card.featured .p-feats li{color:#DDE8F5}
.package-card.featured .p-price .amt{color:#fff}
.package-card.featured .p-price .note{color:#8FA8C6}
.package-card.featured .p-feats .ck{background:rgba(201,162,75,.18);color:var(--gold)}
.package-card.featured .scope-note{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.package-card.featured .scope-note h4{color:#8FA8C6}
.package-card.featured .scope-note li{color:#B9CCE6}
.package-card.featured .scope-note .no{background:rgba(255,255,255,.12);color:#F2B8B0}

/* ---------- Button glow ---------- */
.btn-gold{box-shadow:0 12px 30px rgba(201,162,75,.45)}
.btn-primary{box-shadow:0 12px 26px rgba(15,52,96,.28)}
.btn-gold:hover{box-shadow:0 16px 36px rgba(201,162,75,.55)}
.btn-primary:hover{box-shadow:0 16px 32px rgba(15,52,96,.34)}

@media (max-width:768px){
  .section{padding:72px 0}
  .hero{padding:84px 0 0}
  .hero-sub{font-size:16.5px}
}

/* ============================================================
   BIG IMAGERY + MORE MOTION
   ============================================================ */

/* Hero: full-bleed background photo with navy overlay + parallax */
.hero{background-image:linear-gradient(115deg,rgba(15,52,96,.94) 0%,rgba(15,52,96,.72) 50%,rgba(15,52,96,.40) 100%),url("../img/gym-dark.jpg");background-size:cover;background-position:center;background-attachment:fixed}
@media (max-width:1024px){.hero{background-attachment:scroll}}
.hero-card{background:rgba(10,34,66,.58);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16)}
.float-chip{background:rgba(10,34,66,.66);border:1px solid rgba(255,255,255,.26)}
.chip-1{top:8px;left:-6px}
.chip-2{bottom:118px;right:-6px}
.chip-3{top:66px;right:0;animation-delay:2.1s}

/* Bigger imagery */
.about-visual{min-height:540px}
.about-visual .av-img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.about-visual:hover .av-img{transform:scale(1.05)}
.av-img-2{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.about-visual:hover .av-img-2{transform:scale(1.06) rotate(2deg)}
.img-band img{height:460px;transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.img-band:hover img{transform:scale(1.05)}
.contact-photo img{height:300px;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.contact-photo:hover img{transform:scale(1.05)}

/* Shimmer on featured package accent */
.package-card.featured::after{background:linear-gradient(90deg,var(--gold),var(--tech),var(--gold));background-size:200% 100%;animation:shimmer 3.2s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* Stat numbers pulse-in */
.hero-stat .num,.ib-stat .ib-num{will-change:contents}
@media (max-width:768px){
  .about-visual{min-height:420px}
  .img-band img{height:320px}
  .contact-photo img{height:220px}
}

.hero-card .hero-card-title{font-size:15px;margin-bottom:26px}
.hero-card .flow-row{gap:12px;margin-bottom:22px}
.hero-card .flow-node{padding:22px 14px;border-radius:14px}
.hero-card .flow-node .fi{font-size:30px;margin-bottom:8px}
.hero-card .flow-node .fl{font-size:13.5px}
.hero-card .flow-arrow{font-size:22px}
.hero-card .hero-check{padding:16px 18px;font-size:14.5px}

/* ---------- Richer hero stats (6-up with support lines) ---------- */
.hero-stats{grid-template-columns:repeat(5,1fr);gap:22px 18px;padding:28px 8px 34px}
.hero-stat .sub{font-size:12.5px;color:#8FA8C6;margin-top:5px;line-height:1.4}
.hero-stat .num{font-size:32px}
@media (max-width:1100px){.hero-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.hero-stats{grid-template-columns:1fr 1fr;gap:20px 14px}}
@media (max-width:420px){.hero-stats{grid-template-columns:1fr}}

/* ---------- Compare table (based on the three packages) ---------- */
.compare-zone{background:var(--bg-soft)}
.compare-wrap{position:relative;overflow-x:auto;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-md)}
.compare-hint{display:none;text-align:right;font-size:12.5px;color:var(--slate-light);margin:0 0 10px;font-family:var(--mono)}
.compare-table{width:100%;min-width:820px;border-collapse:collapse}
.compare-table th,.compare-table td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--ink)}
.compare-table .c-feature{text-align:left;color:var(--slate);font-weight:600;font-size:13px;white-space:nowrap;background:#FBFCFE}
.compare-table thead th{background:var(--bg-soft);vertical-align:top;font-weight:700}
.compare-table .c-pkg{min-width:205px}
.compare-table .c-flag{display:block;font-size:13.5px;font-weight:750;color:var(--navy-900);margin-bottom:6px;line-height:1.3}
.compare-table .c-price{display:block;font-size:22px;font-weight:800;color:var(--navy-900);font-family:var(--mono)}
.compare-table .c-note{display:block;font-size:11.5px;color:var(--slate-light);margin-top:3px}
.compare-table th.c-hot{background:linear-gradient(180deg,#0F3460,#0B2950)}
.compare-table th.c-hot .c-flag,.compare-table th.c-hot .c-price{color:#fff}
.compare-table th.c-hot .c-note{color:#8FA8C6}
.compare-table td.c-hot{background:#EEF3FA}
.compare-table tbody tr:hover td{background:#F6F9FD}
.compare-table tbody tr:hover td.c-hot{background:#E6EEF8}
.compare-table tbody tr:last-child td{border-bottom:none}
@media (max-width:768px){.compare-hint{display:block}}

@media (max-width:1100px){.ib-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.ib-stats{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.ib-stats{grid-template-columns:1fr}}

/* ---------- Mobile: keep the hero/front content fully visible ---------- */
@media (max-width:480px){
  .flow-row{gap:8px}
  .flow-node{padding:12px 8px}
  .flow-node .fi{font-size:19px;margin-bottom:4px}
  .flow-node .fl{font-size:10.5px;line-height:1.3}
  .flow-arrow{font-size:15px}
  .hero-check p{font-size:12.5px}
  .hero-badge{font-size:11.5px;padding:6px 12px;margin-bottom:16px}
  .hero-sub{font-size:15.5px;margin-top:18px;margin-bottom:22px}
  .hero-points{gap:10px 18px;font-size:13.5px}
}


@media (max-width:600px){
  /* iOS Safari backdrop-filter can blank out card content — disable on mobile */
  .hero-card,.hero-stats,.package-card,.nav-links,.free-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .hero-card{background:rgba(10,34,66,.94)}
  .hero-stats{background:rgba(15,52,96,.9)}
}
/* ============================================================
   MOBILE — front content fits one screen, no clipping
   ============================================================ */
img{max-width:100%;height:auto}
@media (max-width:600px){
  /* Header: allow height to grow so nothing is cut off */
  .site-header{padding:8px 0}
  .nav-wrap{height:auto;min-height:48px;gap:8px}
  .brand-mark{width:32px;height:32px;border-radius:9px}
  .brand-name{font-size:14px}
  .brand-sub{font-size:8.5px;letter-spacing:.06em}

  /* Hero: ultra-compact so the key info fits the first screen */
  .hero{padding:26px 0 0}
  .hero-grid{gap:16px;padding-bottom:16px}
  .hero-badge{font-size:9.5px;padding:4px 9px;margin-bottom:10px}
  .hero h1{font-size:clamp(24px,6.8vw,33px);line-height:1.12;margin-bottom:10px}
  .hero-sub{font-size:12.5px;margin-top:10px;margin-bottom:12px;line-height:1.5;max-width:100%}
  .hero-ctas{margin-top:10px;margin-bottom:10px;gap:8px}
  .hero-ctas .btn{padding:10px 14px;font-size:13px}
  .hero-points{font-size:11px;gap:6px 10px}
  .hero-points li{gap:5px}
  .hero-visual .hero-card{padding:11px 10px}
  .hero-card-title{font-size:10px;margin-bottom:8px}
  .flow-row{gap:4px;margin-bottom:6px;min-width:0}
  .flow-node{padding:6px 4px;border-radius:8px;min-width:0}
  .flow-node .fi{font-size:13px;margin-bottom:2px}
  .flow-node .fl{font-size:8.5px;line-height:1.2;overflow-wrap:break-word}
  .flow-arrow{font-size:10px;flex:none}
  .hero-check{padding:6px 7px;margin-top:7px;gap:6px}
  .hero-check p{font-size:9.5px;line-height:1.35}
  .hero-stats{grid-template-columns:1fr 1fr !important;gap:10px 8px;padding:10px 8px 12px;margin-top:2px}
  .hero-stat .num{font-size:20px}
  .hero-stat .lab{font-size:10px;margin-top:2px;letter-spacing:.02em}
  .hero-stat .sub{font-size:9.5px;margin-top:2px;line-height:1.3;overflow-wrap:break-word}
}
@media (max-width:360px){
  .hero h1{font-size:23px}
  .hero-sub{font-size:11.5px}
  .hero-points{font-size:10px}
}

/* ============================================================
   MOBILE BUG FIXES — 仅移动端生效，PC 端保持不变
   3 BUGS: 1)Hero 垂直居中 2)装饰图遮挡文字 3)统计模块顶部裁切
   ============================================================ */
@media (max-width:768px){

  /* ---------- BUG 1 · Hero 首屏：垂直上下排版 + 整体居中 + 文字完整可见 ---------- */
  .hero-grid{
    grid-template-columns:1fr !important;
    justify-items:center;
    text-align:center;
    width:100%;
    max-width:100%;
  }
  .hero-copy{
    width:100%;
    max-width:100%;
    text-align:center;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .hero-copy .hero-badge{margin-left:auto;margin-right:auto}
  .hero-copy .hero-sub{margin-left:auto;margin-right:auto;max-width:100%}
  .hero-ctas{justify-content:center}
  .hero-points{justify-content:center}
  .hero-visual{width:100%;max-width:100%}

  /* ---------- BUG 2 · About 区块：装饰图降到背景层，不遮挡正文文字 ---------- */
  .about-visual .av-img-2{
    z-index:1;           /* 原 z-index:3，改为 1（背景层） */
    opacity:.85;
  }
  /* 正文文字保持在装饰图之上 */
  .about-visual > *{z-index:2}

  /* ---------- BUG 3 · 数据统计模块(img-band)：顶部内容不再被裁切 ---------- */
  .img-band{height:auto}
  .img-band > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .img-band .ib-overlay{
    position:relative;   /* 由 absolute 改 relative，让高度随内容撑开 */
    inset:auto;
    display:block;
    padding:44px 0 40px;
  }
  .ib-stats{margin-top:22px}
}

/* ============================================================
   HERO 首屏 移动端遗留修复 — 仅 Hero 区域，PC 与已修复区块不动
   ============================================================ */
@media (max-width:768px){

  /* 1) Hero 容器：宽度自适应 100% + 左右内边距，内容不贴屏幕边缘 */
  .hero{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:1rem;
    padding-right:1rem;
  }

  /* 2) 大标题 h1：允许自动换行（移除强制单行）、字号适度缩小、文字完整可见 */
  .hero h1{
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-word;
    font-size:clamp(24px,6.5vw,34px);
    line-height:1.15;
    max-width:100%;
  }
  .hero h1 .accent{white-space:normal}

  /* 3) 描述段落：宽度自适应屏幕，文字完整展示，不右侧裁切 */
  .hero-sub{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    overflow-wrap:break-word;
    word-break:break-word;
  }

  /* 4) 两个按钮：完整显示，跟随容器自适应 */
  .hero-ctas{
    width:100%;
    max-width:100%;
    justify-content:center;
  }
  .hero-ctas .btn{
    white-space:normal;   /* 防止按钮文字被截断 */
    max-width:100%;
    text-align:center;
  }
}

/* ============================================================
   HERO 首屏 移动端修复 v2 — 黄色曲线装饰不挤压文本容器
   (仅 Hero，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 1) 文本内容容器：不被 absolute 装饰图形挤压，置顶显示 */
  .hero > .container,
  .hero-grid,
  .hero-copy{
    position:relative;
    z-index:2;
    box-sizing:border-box;
    max-width:100%;
  }

  /* 3) 文本容器左右内边距，内容不贴屏幕边缘、不裁切 */
  .hero-copy{
    width:100%;
    padding-left:1.2rem;
    padding-right:1.2rem;
  }

  /* 2) 黄色曲线装饰元素：彻底放到背景底层，不参与布局、不挤压文本 */
  .aurora .blob.b3{
    position:absolute;
    z-index:-1;
    pointer-events:none;
  }

  /* 4) h1：允许自动换行（移除 nowrap），移动端适度缩小字号 */
  .hero h1{
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-word;
    font-size:clamp(24px,6.5vw,34px);
    line-height:1.15;
    max-width:100%;
  }
  .hero h1 .accent{white-space:normal}
}

/* ============================================================
   HERO + HOW YOUR PROJECT FLOWS 移动端修复 v3
   (仅 Hero 与流程卡片，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* ============ 1 · Hero 首屏 ============ */
  /* ① 黄色曲线装饰 → 背景底层，不干扰文本布局 */
  .aurora .blob.b3{
    position:absolute;
    z-index:-1;
    pointer-events:none;
  }

  /* ② Hero 文本容器：相对定位 + 内边距 + 允许收缩 */
  .hero > .container,
  .hero-grid{
    position:relative;
    box-sizing:border-box;
    max-width:100%;
  }
  .hero-copy{
    position:relative;
    box-sizing:border-box;
    max-width:100%;
    min-width:0;              /* 关键：grid 子项允许收缩到列宽以下 */
    width:100%;
    padding-left:1.2rem;
    padding-right:1.2rem;
  }

  /* ③ h1：取消 nowrap、允许换行、缩小字号 */
  .hero h1{
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-word;
    font-size:clamp(24px,6.5vw,34px);
    line-height:1.15;
    max-width:100%;
  }
  .hero h1 .accent{white-space:normal}

  /* ============ 2 · HOW YOUR PROJECT FLOWS 步骤卡片 ============ */
  /* ① 外层容器：宽度 100%，允许收缩 */
  .hero-visual,
  .hero-card{
    max-width:100%;
    box-sizing:border-box;
    min-width:0;
  }

  /* ② 步骤方框：缩小、可横向滚动，不被右侧裁切 */
  .flow-row{
    min-width:0;
    overflow-x:auto;           /* 横向小幅滚动兜底，替代被裁切 */
    -webkit-overflow-scrolling:touch;
  }
  .flow-node{
    flex:1 1 0;                /* 均分并收缩，不用固定像素宽 */
    min-width:0;
    padding:8px 6px;
    max-width:100%;
  }
  .flow-node .fi{font-size:14px;margin-bottom:3px}
  .flow-node .fl{font-size:9px;line-height:1.25;overflow-wrap:break-word;word-break:break-word}
  .flow-arrow{flex:0 0 auto;font-size:11px}
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端文字换行修复 v4
   (仅流程卡片，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 5) 外层大盒子：左右内边距 + 宽度 100% */
  .hero-card{
    padding-left:1rem;
    padding-right:1rem;
    max-width:100%;
    box-sizing:border-box;
  }

  /* 1)+3) 步骤卡片内部：禁止单词内部字母拆行；放不下时整个单词换行 */
  .flow-row,
  .flow-node,
  .flow-node .fl{
    word-break:keep-all;       /* 禁止单词中间断开 */
    white-space:normal;
    overflow-wrap:break-word;  /* 仅当整个单词放不下才断开 */
  }

  /* 2) 适度缩小字号 */
  .flow-node .fl{
    font-size:12px;
    line-height:1.35;
  }

  /* 4) 方案二（推荐）：横向三卡 → 移动端垂直上下排列，卡片占满容器 */
  .flow-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    overflow-x:visible;        /* 纵向排列，无需横向滚动 */
  }
  .flow-arrow{
    transform:rotate(90deg);   /* 箭头由 → 转 ↓ */
    align-self:center;
    font-size:13px;
    margin:2px 0;
  }
  .flow-node{
    width:100%;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    padding:10px 12px;
  }
  .flow-node .fi{flex:none;font-size:18px;margin-bottom:0}
  .flow-node .fl{flex:1;text-align:left}
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端紧凑排版修复 v5
   (仅流程卡片，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 1) 步骤卡片：上下内边距 1rem，左右 1.2rem，避免过宽过高 */
  .flow-node{
    padding:1rem 1.2rem;
  }

  /* 2) 向下箭头：上下 margin 缩小，减少卡片间空白 */
  .flow-arrow{
    margin:0;
    line-height:1;
  }
  .flow-row{
    gap:2px;               /* 卡片与箭头整体间距收紧 */
  }

  /* 3) 图标与文字横向间距适度收窄 */
  .flow-node{
    gap:8px;
  }

  /* 4) 卡片内文字字号适度缩小 */
  .flow-node .fl{
    font-size:11px;
    line-height:1.3;
  }

  /* 5) 外层容器：保持左右 padding、max-width:100%、居中 */
  .hero-card{
    padding-left:1rem;
    padding-right:1rem;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端整体收窄留白 v6
   (仅流程模块，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 1) 流程最外层大容器：收窄到 88%，左右安全留白、居中 */
  .hero-card{
    max-width:88%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }

  /* 2) 步骤子卡片：进一步压缩上下内边距 */
  .flow-node{
    padding-top:0.9rem;
    padding-bottom:0.9rem;
    padding-left:1rem;
    padding-right:1rem;
  }

  /* 3) 向下箭头：上下 margin 0.8rem，整体紧凑 */
  .flow-arrow{
    margin-top:0.8rem;
    margin-bottom:0.8rem;
  }

  /* 4) 底部绿色提示框：跟随外层宽度，不超出流程卡片 */
  .hero-check{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端垂直收紧 v7
   (恢复左右铺满，仅流程模块，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 1) 外层容器：恢复左右铺满（清除 max-width:88%），收紧上下内边距 */
  .hero-card{
    max-width:100%;          /* 恢复占满容器 */
    margin-left:auto;
    margin-right:auto;
    padding-top:1.2rem;
    padding-bottom:1.2rem;
    box-sizing:border-box;
  }

  /* 2) 模块大标题 HOW YOUR PROJECT FLOWS：收紧上下 margin，协调字号 */
  .hero-card-title{
    margin-top:0;
    margin-bottom:1rem;
    font-size:1.35rem;
  }

  /* 3) 步骤子卡片：只压缩上下内边距，左右 padding 保持 1rem */
  .flow-node{
    padding-top:0.75rem;
    padding-bottom:0.75rem;
    padding-left:1rem;
    padding-right:1rem;
  }

  /* 4) 向下箭头：缩小步骤间垂直间隙 */
  .flow-arrow{
    margin-top:0.6rem;
    margin-bottom:0.6rem;
  }

  /* 5) 底部绿色提示框：收紧上下内边距与间距 */
  .hero-check{
    margin-top:1rem;
    padding-top:0.8rem;
    padding-bottom:0.8rem;
  }
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端顶部留白收紧 v8
   (仅流程模块，PC 与其他区块不动；类名已映射到实际 HTML 类名)
   ============================================================ */
@media (max-width:768px){

  /* 1) 步骤卡片：压缩顶部 padding，底部保留少量，消除卡片上方大片空白
     (原需求 .flow-step-card → 实际类 .flow-node) */
  .flow-node{
    padding-top:0.5rem !important;
    padding-bottom:0.6rem !important;
    padding-left:1rem;
    padding-right:1rem;
  }

  /* 2) 向下箭头：大幅缩小上下外边距，消灭卡片与箭头之间大片空余 */
  .flow-arrow{
    margin-top:0.4rem !important;
    margin-bottom:0.4rem !important;
  }

  /* 3) 模块大标题：减少标题到第一个卡片的距离
     (原需求 .flow-section-title → 实际类 .hero-card-title) */
  .hero-card-title{
    margin-bottom:0.8rem !important;
  }

  /* 4) 最后一张卡片到底部绿色提示框的距离
     (无 .flow-last-card 类，由 .hero-check 的 margin-top 控制) */
  .hero-check{
    margin-top:0.8rem !important;
  }
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端宽度与绿色提示框对齐 v9
   (仅流程模块，PC 与其他区块不动；只改横向宽度，不动上下高度)
   ============================================================ */
@media (max-width:768px){

  /* 流程最外层大盒子：收窄到与内部绿色提示框一致
     (原需求 .flow-wrapper → 实际类 .hero-card) */
  .hero-card{
    max-width:calc(100% - 2.4rem);
    margin-left:auto;
    margin-right:auto;
  }

  /* 内部子卡片、箭头、绿色提示框自动继承外层宽度，左右边缘对齐
     (原需求 .flow-step-card → 实际类 .flow-node) */
  .flow-node,
  .hero-check{
    width:100%;
  }
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端：左右复原铺满 + 垂直紧凑保留 v10
   (仅流程模块，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 复原外层容器宽度：取消之前的 max-width 收窄，回到左右铺满
     (原需求 .flow-wrapper → 实际类 .hero-card) */
  .hero-card{
    max-width:unset !important;
    margin-left:unset !important;
    margin-right:unset !important;
  }

  /* 保留垂直紧凑：箭头上下 margin */
  .flow-arrow{
    margin-top:0.25rem !important;
    margin-bottom:0.25rem !important;
  }

  /* 模块标题到第一个卡片的距离
     (原需求 .flow-section-title → 实际类 .hero-card-title) */
  .hero-card-title{
    margin-bottom:0.6rem !important;
  }

  /* 步骤卡片上下内边距保持紧凑
     (原需求 .flow-step-card → 实际类 .flow-node) */
  .flow-node{
    padding-top:0.5rem !important;
    padding-bottom:0.6rem !important;
  }
}

/* ============================================================
   HOW YOUR PROJECT FLOWS 移动端：隐藏箭头 + 卡片紧贴 v11
   (仅流程模块，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 隐藏流程之间的箭头，只保留卡片上下紧贴排列 */
  .flow-arrow,
  .flow-arrow-text{
    display:none !important;
  }

  /* 卡片之间靠近一点，取消箭头后的空隙
     (原需求 .flow-step-card → 实际类 .flow-node) */
  .flow-node{
    margin-top:0.35rem !important;
    margin-bottom:0.35rem !important;
  }

  /* 第一张卡片与标题之间稍微收紧 */
  .flow-node:first-of-type{
    margin-top:0.2rem !important;
  }

  /* 最后一张卡片与底部绿色提示框之间保持一点距离 */
  .flow-node:last-of-type{
    margin-bottom:0.6rem !important;
  }

  /* 保留卡片内部上下 padding，左右宽度不变 */
  .flow-node{
    padding-top:0.5rem !important;
    padding-bottom:0.6rem !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
}

/* ============================================================
   法律页面(服务条款/免责声明/隐私政策) header 移动端修复
   (仅三个法律页面，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 服务条款 / 免责声明 / 隐私政策 页面 header */
  .page-terms-of-service header.site-header,
  .page-disclaimer header.site-header,
  .page-privacy-policy header.site-header{
    padding-top:0.8rem !important;
    padding-bottom:0.8rem !important;
    overflow:visible !important;
  }

  /* 品牌容器 (原需求 .header-brand → 实际 .brand) */
  .page-terms-of-service .brand,
  .page-disclaimer .brand,
  .page-privacy-policy .brand{
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
  }

  /* 品牌 logo (原需求 .brand-logo → 实际 .brand-mark) */
  .page-terms-of-service .brand-mark,
  .page-disclaimer .brand-mark,
  .page-privacy-policy .brand-mark{
    transform:none !important;
  }
}

/* ============================================================
   法律页面 header 移动端修复 v2 (更新版)
   (仅三个法律页面，PC 与其他区块不动；body 类已存在)
   ============================================================ */
@media (max-width:768px){

  /* 3个法律页面 header */
  .page-terms-of-service header.site-header,
  .page-disclaimer header.site-header,
  .page-privacy-policy header.site-header{
    padding-top:1rem !important;
    padding-bottom:1rem !important;
    overflow:visible !important;
  }

  /* 品牌容器 (原需求 .header-brand → 实际 .brand) */
  .page-terms-of-service .brand,
  .page-disclaimer .brand,
  .page-privacy-policy .brand{
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
    gap:0.6rem !important;
  }

  /* logo 整体缩小一点，内部文字不溢出容器
     (原需求 .brand-logo → 实际 .brand-mark) */
  .page-terms-of-service .brand-mark,
  .page-disclaimer .brand-mark,
  .page-privacy-policy .brand-mark{
    transform:scale(0.92) !important;
    transform-origin:left center !important;
  }
}

/* ============================================================
   法律页面 header 移动端修复 v3 (品牌纵向布局)
   (仅三个法律页面，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 法律页面 header 容器 */
  .page-terms-of-service header.site-header,
  .page-disclaimer header.site-header,
  .page-privacy-policy header.site-header{
    padding-top:1.1rem !important;
    padding-bottom:1.1rem !important;
    overflow:visible !important;
  }

  /* 品牌容器：图标在上、文字在下、整体垂直居中
     (原需求 .header-brand → 实际 .brand) */
  .page-terms-of-service .brand,
  .page-disclaimer .brand,
  .page-privacy-policy .brand{
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:0.25rem !important;
  }

  /* 品牌 logo 图标
     (原需求 .brand-logo → 实际 .brand-mark) */
  .page-terms-of-service .brand-mark,
  .page-disclaimer .brand-mark,
  .page-privacy-policy .brand-mark{
    transform:none !important;
    transform-origin:left center !important;
  }

  /* 主标题 Sift Quest
     (原需求 .brand-logo__title → 实际 .brand-name) */
  .page-terms-of-service .brand-name,
  .page-disclaimer .brand-name,
  .page-privacy-policy .brand-name{
    font-size:1.15rem !important;
    line-height:1.2 !important;
  }

  /* 下面两行小字 SOURCING & COMPLIANCE
     (原需求 .brand-logo__tagline → 实际 .brand-sub) */
  .page-terms-of-service .brand-sub,
  .page-disclaimer .brand-sub,
  .page-privacy-policy .brand-sub{
    line-height:1.35 !important;
    font-size:0.75rem !important;
  }
}

/* ============================================================
   法律页面 header 移动端修复 v4 (品牌恢复横向并排)
   (仅三个法律页面，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 法律页面头部容器 */
  .page-terms-of-service header.site-header,
  .page-disclaimer header.site-header,
  .page-privacy-policy header.site-header{
    padding-top:1.2rem !important;
    padding-bottom:1.2rem !important;
    overflow:visible !important;
  }

  /* 品牌容器：图标和文字横向并排，和首页一致
     (原需求 .header-brand → 实际 .brand) */
  .page-terms-of-service .brand,
  .page-disclaimer .brand,
  .page-privacy-policy .brand{
    overflow:visible !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:0.75rem !important;
  }

  /* 品牌 logo 图标，文字内部垂直堆叠
     (原需求 .brand-logo → 实际 .brand-mark) */
  .page-terms-of-service .brand-mark,
  .page-disclaimer .brand-mark,
  .page-privacy-policy .brand-mark{
    transform:none !important;
    transform-origin:left center !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:0.2rem !important;
  }

  /* 主标题 Sift Quest
     (原需求 .brand-logo__title → 实际 .brand-name) */
  .page-terms-of-service .brand-name,
  .page-disclaimer .brand-name,
  .page-privacy-policy .brand-name{
    font-size:1.15rem !important;
    line-height:1.2 !important;
  }

  /* 副标题两行英文
     (原需求 .brand-logo__tagline → 实际 .brand-sub) */
  .page-terms-of-service .brand-sub,
  .page-disclaimer .brand-sub,
  .page-privacy-policy .brand-sub{
    line-height:1.35 !important;
    font-size:0.75rem !important;
  }
}

/* ============================================================
   首页 header 品牌模块 移动端修复
   (仅首页，PC 与其他区块不动)
   ============================================================ */
@media (max-width:768px){

  /* 首页头部 */
  .home header.site-header{
    padding-top:1.2rem !important;
    padding-bottom:1.2rem !important;
    overflow:visible !important;
  }

  /* 品牌容器：图标和文字横向并排
     (原需求 .header-brand → 实际 .brand) */
  .home .brand{
    overflow:visible !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:0.75rem !important;
  }

  /* 品牌 logo 图标，文字内部垂直堆叠
     (原需求 .brand-logo → 实际 .brand-mark) */
  .home .brand-mark{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:0.2rem !important;
  }

  /* 主标题 Sift Quest
     (原需求 .brand-logo__title → 实际 .brand-name) */
  .home .brand-name{
    font-size:1.15rem !important;
    line-height:1.2 !important;
  }

  /* 副标题两行英文
     (原需求 .brand-logo__tagline → 实际 .brand-sub) */
  .home .brand-sub{
    line-height:1.35 !important;
    font-size:0.75rem !important;
  }
}

/* ============================================================
   UI 视觉权重强化（PC + 移动端同时生效）
   仅增强视觉突出度，不改文字内容/布局/卡片尺寸/内外边距
   ============================================================ */

/* ---------- 1. 首页 Hero 金色主按钮 Book a Free Consultation ---------- */
.btn-gold{
  background:linear-gradient(180deg,#E0B860 0%,#C9A24B 55%,#B9943F 100%) !important; /* 金色加深+高光 */
  color:var(--navy-900) !important;
  border-radius:999px !important;                       /* 全圆角 */
  border:2px solid rgba(255,255,255,.35) !important;
  font-weight:800 !important;
  font-size:16.5px !important;
  box-shadow:
    0 10px 28px rgba(201,162,75,.55),
    0 0 18px rgba(201,162,75,.35) !important;           /* 柔和外发光 */
}
.btn-gold:hover{
  background:linear-gradient(180deg,#C9A24B 0%,#B9943F 60%,#A8852F 100%) !important; /* hover 加深 */
  box-shadow:
    0 14px 34px rgba(201,162,75,.72),
    0 0 28px rgba(201,162,75,.55) !important;           /* hover 发光增强 */
  transform:translateY(-2px) !important;
}

/* ---------- 2a. 套餐1 / 套餐2（白卡）按钮 ---------- */
.package-card .btn-outline{
  border:2.5px solid var(--navy-700) !important;        /* 边框加粗 */
  font-weight:800 !important;                           /* 文字加粗 */
  border-radius:999px !important;
}
.package-card .btn-outline:hover{
  background:var(--gold) !important;                    /* hover 填充主题金色 */
  border-color:var(--gold) !important;
  color:var(--navy-900) !important;
  box-shadow:0 10px 24px rgba(201,162,75,.45) !important;
  transform:translateY(-2px) !important;
}

/* ---------- 2b. 套餐3（深蓝卡）按钮 Request a Quote：金色 ---------- */
.package-card.featured .btn-primary{
  background:var(--gold) !important;                    /* 金色底 */
  color:var(--navy-900) !important;                     /* 高对比深色文字 */
  font-weight:800 !important;
  border-radius:999px !important;
  box-shadow:
    0 10px 26px rgba(201,162,75,.55),
    0 0 16px rgba(201,162,75,.35) !important;           /* 外发光 */
}
.package-card.featured .btn-primary:hover{
  background:#B9943F !important;                        /* hover 加深金色 */
  box-shadow:
    0 14px 32px rgba(201,162,75,.72),
    0 0 26px rgba(201,162,75,.52) !important;           /* hover 发光放大 */
  transform:translateY(-2px) !important;
}

/* ---------- 3. 套餐3 推荐标签 PACKAGE 3 · RECOMMENDED ---------- */
.package-card.featured .p-flag{
  background:linear-gradient(180deg,#E0B860 0%,#C9A24B 100%) !important; /* 金色饱和度提高 */
  color:var(--navy-900) !important;
  font-weight:900 !important;                           /* 文字加粗 */
  letter-spacing:.08em !important;
  padding:8px 16px !important;                          /* 标签增厚 */
  border:1px solid rgba(255,255,255,.45) !important;
  text-shadow:0 1px 1px rgba(255,255,255,.35) !important; /* 轻微文字阴影 */
  box-shadow:
    0 3px 8px rgba(201,162,75,.45),
    0 0 12px rgba(201,162,75,.25) !important;           /* 向外投影，浮起 */
}

/* ============================================================
   UI 视觉强化 v2 —— 扁平化（去发光/去渐变/去阴影，仅提亮+加粗+对比）
   (PC + 移动端同时生效；不改布局/尺寸/padding/文字内容)
   ============================================================ */

/* ---------- 1. Hero 主按钮 Book a Free Consultation ---------- */
.btn-gold{
  background:#E6C368 !important;            /* 金色提亮，扁平纯色 */
  color:var(--navy-900) !important;         /* 深蓝文字，高对比 */
  font-weight:800 !important;
  border:none !important;                   /* 去掉内圈描边 */
  box-shadow:none !important;               /* 完全去发光/外阴影 */
}
.btn-gold:hover{
  background:#C9A24B !important;            /* hover 仅底色明暗变化 */
  box-shadow:none !important;
  transform:none !important;
}

/* ---------- 2. 三个套餐底部按钮 ---------- */
/* 套餐1 / 套餐2（白卡）：Start a Sourcing Project / Book Repeat Coordination */
.package-card .btn-outline{
  border:2.5px solid var(--navy-700) !important;  /* 深蓝描边增强对比 */
  font-weight:800 !important;
  box-shadow:none !important;
}
.package-card .btn-outline:hover{
  background:var(--gold) !important;        /* hover 填充主题金色 */
  border-color:var(--gold) !important;
  color:var(--navy-900) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* 套餐3（深蓝卡）：Request a Quote */
.package-card.featured .btn-primary{
  background:#E6C368 !important;            /* 金色提亮 */
  color:var(--navy-900) !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
.package-card.featured .btn-primary:hover{
  background:#C9A24B !important;            /* hover 仅底色明暗 */
  box-shadow:none !important;
  transform:none !important;
}

/* ---------- 3. Package 3 · RECOMMENDED 推荐标签 ---------- */
.package-card.featured .p-flag{
  background:#E6C368 !important;            /* 金色提亮，扁平 */
  color:var(--navy-900) !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  padding:8px 16px !important;              /* 保持标签厚度 */
  text-shadow:none !important;
  box-shadow:none !important;               /* 去投影，不浮起 */
  border:none !important;
}

/* ============================================================
   UI 视觉强化 v3 —— 全部纯色金色实心按钮（去描边/发光/渐变）
   (PC + 移动端同时生效；不改布局/尺寸/padding/文字/圆角)
   ============================================================ */

/* ---------- 1. Hero 主按钮 Book a Free Consultation ---------- */
.btn-gold{
  background:#E6C368 !important;            /* 纯色金色提亮（无渐变内圈） */
  color:var(--navy-900) !important;         /* 深蓝文字，高对比 */
  font-weight:800 !important;
  border:none !important;                   /* 去掉描边 */
  box-shadow:none !important;               /* 完全去发光/阴影 */
}
.btn-gold:hover{
  background:#C9A24B !important;            /* hover 仅底色明暗 */
  box-shadow:none !important;
  transform:none !important;
}

/* ---------- 2. 定价套餐3个按钮：全部纯色金色实心 + 深蓝文字 ---------- */
/* 套餐1 / 套餐2（白卡）与套餐3 样式保持一致 */
.package-card .btn-outline,
.package-card.featured .btn-primary{
  background:#E6C368 !important;            /* 纯色金色实心填充 */
  color:var(--navy-900) !important;         /* 深蓝文字 */
  font-weight:800 !important;
  border:none !important;                   /* 移除描边 */
  box-shadow:none !important;               /* 去发光/阴影 */
}
.package-card .btn-outline:hover,
.package-card.featured .btn-primary:hover{
  background:#C9A24B !important;            /* hover 仅底色明暗 */
  box-shadow:none !important;
  transform:none !important;
}

/* ---------- 3. Package 3 · RECOMMENDED 推荐标签 ---------- */
.package-card.featured .p-flag{
  background:#E6C368 !important;            /* 纯色金色提亮 */
  color:var(--navy-900) !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  padding:8px 16px !important;              /* 保持标签厚度 */
  text-shadow:none !important;
  box-shadow:none !important;               /* 去投影，不浮起 */
  border:none !important;
}

/* ============================================================
   UI 修复 v4 —— 3个套餐按钮完全统一为金色实心（以套餐3为准）
   (PC + 移动端同时生效；仅套餐卡内按钮，其他页面按钮不受影响)
   ============================================================ */
.package-card .p-foot a.btn{
  background:#E6C368 !important;            /* 与套餐3一致：纯色金色实心 */
  color:var(--navy-900) !important;         /* 与套餐3一致：深蓝文字 */
  font-weight:800 !important;               /* 与套餐3一致：字重 */
  border:none !important;                   /* 去描边 */
  box-shadow:none !important;               /* 去发光/阴影 */
}
.package-card .p-foot a.btn:hover{
  background:#C9A24B !important;            /* hover 仅底色明暗 */
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 统一 v5 —— 套餐1/2 顶部标签 + 全部3个底部按钮，与【获取报价】一致
   (PC + 移动端同时生效；纯色金色 + 深蓝文字；无发光/渐变/描边)
   ============================================================ */

/* 1) 套餐1 / 套餐2 顶部标签框 → 与【获取报价】按钮同款金色 */
.package-card:not(.featured) .p-flag{
  background:#E6C368 !important;            /* 纯色金色填充 */
  color:var(--navy-900) !important;         /* 深蓝文字 */
  font-weight:800 !important;               /* 与按钮一致的字重 */
  border:none !important;                   /* 去掉白底蓝边 */
  box-shadow:none !important;               /* 去阴影 */
  text-shadow:none !important;
}

/* 2) 套餐底部3个按钮 → 全部与【获取报价】一致（金色实心 + 深蓝文字） */
.package-card .p-foot a.btn{
  background:#E6C368 !important;
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
}

/* 3) hover：仅底色明暗变化，无发光/投影 */
.package-card .p-foot a.btn:hover{
  background:#C9A24B !important;
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 金色统一 v6 —— 套餐1/2 标签+按钮金色与套餐3 完全一致 (#E6C368)
   (PC + 移动端同时生效；纯色、无发光/渐变/描边；套餐3 保持原样为基准)
   ============================================================ */

/* 套餐1 / 套餐2 顶部标签 → 金色与套餐3 标签完全一致 */
.package-card:not(.featured) .p-flag{
  background:#E6C368 !important;            /* 与套餐3 完全一致 */
  color:var(--navy-900) !important;         /* 深蓝文字 */
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* 套餐1 / 套餐2 底部按钮 → 金色与套餐3 按钮完全一致 */
.package-card:not(.featured) .p-foot a.btn{
  background:#E6C368 !important;
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
}

/* hover：仅底色明暗变化 */
.package-card:not(.featured) .p-foot a.btn:hover{
  background:#C9A24B !important;
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 观感统一 v7 —— 套餐1/2 金色微调加深，补偿白色卡片背景视觉淡化
   (白卡上浅金观感偏淡、深蓝卡上同色更饱满；微调后三者观感一致)
   套餐3 保持 #E6C368 为基准，不改动。
   ============================================================ */
.package-card:not(.featured) .p-flag,
.package-card:not(.featured) .p-foot a.btn{
  background:#D9B25A !important;      /* 略深金色，白色底上观感≈套餐3 */
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.package-card:not(.featured) .p-foot a.btn:hover{
  background:#C49E47 !important;      /* hover 相应加深，仅明暗变化 */
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 观感统一 v8 —— 套餐1/2 金色改为【更浅、更高亮度】，补偿白底视觉压暗
   (白底会压暗金色观感，故提高亮度使与深蓝底上的套餐3 观感一致)
   套餐3 保持 #E6C368 为基准，不改动。
   ============================================================ */
.package-card:not(.featured) .p-flag,
.package-card:not(.featured) .p-foot a.btn{
  background:#F0CE7E !important;      /* 更浅更高亮度的金色 */
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.package-card:not(.featured) .p-foot a.btn:hover{
  background:#E3BF6B !important;      /* hover 相应明暗变化 */
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 观感统一 v9 —— 套餐1/2 金色进一步提亮 (#FBE2A4)
   套餐3 保持 #E6C368 为基准，不改动。
   ============================================================ */
.package-card:not(.featured) .p-flag,
.package-card:not(.featured) .p-foot a.btn{
  background:#FBE2A4 !important;      /* 更高亮度的浅金色 */
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.package-card:not(.featured) .p-foot a.btn:hover{
  background:#ECC979 !important;      /* hover 相应明暗变化 */
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 观感统一 v10 —— 套餐1/2 金色取中间值 (#F6D893)
   套餐3 保持 #E6C368 为基准，不改动。
   ============================================================ */
.package-card:not(.featured) .p-flag,
.package-card:not(.featured) .p-foot a.btn{
  background:#F6D893 !important;      /* 介于 #F0CE7E 与 #FBE2A4 之间的浅金色 */
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.package-card:not(.featured) .p-foot a.btn:hover{
  background:#E7C672 !important;      /* hover 相应明暗变化 */
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   UI 观感统一 v11 —— 套餐1/2 金色微调暗一档 (#F3D489)
   套餐3 保持 #E6C368 为基准，不改动。
   ============================================================ */
.package-card:not(.featured) .p-flag,
.package-card:not(.featured) .p-foot a.btn{
  background:#F3D489 !important;      /* 比 #F6D893 略暗一档 */
  color:var(--navy-900) !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.package-card:not(.featured) .p-foot a.btn:hover{
  background:#E4C570 !important;      /* hover 相应明暗变化 */
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   移动端 header：logo 整体水平居中，语言框+汉堡保持在右侧
   (仅 ≤768px 生效；PC 不动；只调排版，不改图标/文字/尺寸)
   ============================================================ */
@media (max-width:768px){

  /* 导航容器：品牌整体水平居中 */
  .nav-wrap{
    position:relative;
    justify-content:center;
  }
  .nav-wrap .brand{
    margin-left:auto;
    margin-right:auto;      /* 品牌整体居中（图标仍在文字左侧） */
  }

  /* 语言选择下拉框 + 汉堡菜单按钮：固定在右侧，位置不变 */
  .nav-wrap .nav-cta{
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
  }
}

/* ============================================================
   移动端 header 重叠修复 v2 —— flex 平衡布局：品牌居中、控件最右、互不重叠
   (仅 ≤768px 生效；覆盖 v38 的绝对定位方案；PC 不动)
   ============================================================ */
@media (max-width:768px){

  /* 覆盖 v38：取消 absolute，改回普通流布局 */
  .nav-wrap{
    position:static;
    justify-content:flex-start;
    gap:8px;
  }
  .nav-wrap .nav-cta{
    position:static;
    transform:none;
    margin-left:auto;             /* 语言框 + 汉堡固定在 header 最右侧 */
    flex:0 0 auto;
  }

  /* 品牌占满除右侧控件外的剩余空间，并在其中水平居中 */
  .nav-wrap .brand{
    flex:1 1 0;
    min-width:0;
    justify-content:center;       /* 图标+标题+副标题整体居中 */
    margin:0;                     /* 覆盖 v38 的 auto */
    gap:0.5rem !important;
  }

  /* 移动端品牌文字适度缩小，保证小屏居中时不与右侧控件重叠（不改文字内容） */
  .nav-wrap .brand-name{
    font-size:1rem !important;
  }
  .nav-wrap .brand-sub{
    font-size:0.5rem !important;
    letter-spacing:.04em !important;
    white-space:nowrap;
  }
}

/* ============================================================
   移动端 logo 内部间距 v3 —— 主标题/副标题纵向紧贴，文字块与图标等高
   (仅 ≤768px 生效；PC 不动；不改图标/文字内容/header 高度/外部 padding)
   ============================================================ */
@media (max-width:768px){

  /* 主标题 Sift Quest 与副标题 FACTORY SOURCING：纵向排列、行高收紧、零 margin/padding */
  .nav-wrap .brand-name,
  .nav-wrap .brand-sub{
    display:block !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* ============================================================
   移动端 logo：两行文字加约 5px 间距 + 法律页面 header 显式同步首页
   (仅 ≤768px 生效；PC 不动；不改图标/文字内容/header 高度)
   ============================================================ */
@media (max-width:768px){

  /* 1) 主标题与副标题之间留出约 5px 间距 */
  .nav-wrap .brand-name{
    margin:0 0 5px !important;
  }

  /* 2) 三个法律页面移动端 header 与首页完全一致（覆盖旧 .page-* 品牌规则） */
  .page-terms-of-service .brand,
  .page-disclaimer .brand,
  .page-privacy-policy .brand{
    flex-direction:row !important;
    align-items:center !important;
    gap:0.5rem !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    justify-content:center !important;
    margin:0 !important;
  }
  .page-terms-of-service .brand-name,
  .page-disclaimer .brand-name,
  .page-privacy-policy .brand-name{
    font-size:1rem !important;
    line-height:1 !important;
    display:block !important;
    margin:0 0 5px !important;
    padding:0 !important;
  }
  .page-terms-of-service .brand-sub,
  .page-disclaimer .brand-sub,
  .page-privacy-policy .brand-sub{
    font-size:0.5rem !important;
    line-height:1 !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
  }
  .page-terms-of-service .brand-mark,
  .page-disclaimer .brand-mark,
  .page-privacy-policy .brand-mark{
    transform:none !important;
    display:block !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }
}

/* ============================================================
   全局统一移动端 header v4 —— 首页+全部子页面(法律页)表现 100% 一致
   (仅 ≤768px 生效；高特异性覆盖所有旧规则；PC 不动)
   ============================================================ */
@media (max-width:768px){

  /* 导航容器 */
  .site-header .nav-wrap{
    position:static !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }

  /* 品牌：图标+主标题+副标题整体水平居中，图标在左 */
  .site-header .nav-wrap .brand{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    gap:0.5rem !important;
    margin:0 !important;
    overflow:visible !important;
  }

  /* 语言下拉框 + 汉堡菜单：固定在 header 最右侧 */
  .site-header .nav-wrap .nav-cta{
    position:static !important;
    transform:none !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  /* 主标题：纵向块、行高收紧、下方留 5px */
  .site-header .nav-wrap .brand-name{
    display:block !important;
    font-size:1rem !important;
    line-height:1 !important;
    margin:0 0 5px !important;
    padding:0 !important;
  }

  /* 副标题：纵向块、与主标题紧贴 */
  .site-header .nav-wrap .brand-sub{
    display:block !important;
    font-size:0.5rem !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
  }

  /* 图标：保持原样，不缩放、不位移 */
  .site-header .nav-wrap .brand-mark{
    transform:none !important;
    display:block !important;
  }
}

/* ============================================================
   移动端 logo 图标居中修复 —— 图标回到框框正中间
   (仅 ≤768px 生效；覆盖 v41/v42 的 display:block/flex-start；PC 不动)
   ============================================================ */
@media (max-width:768px){
  .site-header .nav-wrap .brand-mark{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    gap:0 !important;
    transform:none !important;
  }
}

/* ============================================================
   移动端定价对比表格：4列完整塞下，禁止横向滚动
   (仅 ≤768px 生效；PC 维持横向滑动表格不变；不改文字/对勾/价格/配色)
   ============================================================ */
@media (max-width:768px){

  /* 顶部提示“Swipe to compare →”移动端隐藏 */
  .compare-hint{display:none !important}

  /* 容器：禁止横向滚动 */
  .compare-wrap{
    overflow-x:hidden !important;
  }

  /* 表格：取消最小宽度，固定布局占满容器 */
  .compare-table{
    min-width:0 !important;
    width:100% !important;
    table-layout:fixed !important;
  }

  /* 单元格：压缩左右 padding、缩小字号、允许换行 */
  .compare-table th,
  .compare-table td{
    padding:7px 3px !important;
    font-size:10.5px !important;
    line-height:1.25 !important;
    overflow-wrap:break-word !important;
    word-break:break-word !important;
  }

  /* 左侧特征列：允许换行、字号缩小 */
  .compare-table .c-feature{
    width:22% !important;
    white-space:normal !important;
    font-size:9.5px !important;
    text-align:left !important;
    padding-left:6px !important;
    padding-right:2px !important;
  }

  /* 套餐列：取消最小宽度 */
  .compare-table .c-pkg{
    min-width:0 !important;
  }

  /* 表头套餐标题：允许换行、缩小 */
  .compare-table .c-flag{
    font-size:9.5px !important;
    line-height:1.2 !important;
    overflow-wrap:break-word !important;
    word-break:break-word !important;
  }

  /* 价格：保持完整不截断、适度缩小 */
  .compare-table .c-price{
    font-size:13px !important;
    white-space:nowrap !important;
  }

  /* 套餐说明小字 */
  .compare-table .c-note{
    font-size:8px !important;
    line-height:1.2 !important;
  }
}

/* ============================================================
   移动端：在流程步骤卡片之间添加小向下箭头，不改动上下间距
   (仅 ≤767px 生效；原需求 .how-your-project-flows→.hero-card,
    .step-item→.flow-node；DOM 中步骤间有隐藏 .flow-arrow，
    故用 :not(:first-child) 实现"除第一张外每张上方加箭头")
   ============================================================ */
@media (max-width:767px){

  .hero-card .flow-node{
    position:relative;
  }

  .hero-card .flow-node:not(:first-child)::before{
    content:"";
    position:absolute;
    left:50%;
    top:-12px;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid #D8B86A; /* 金色，贴合网站配色 */
    opacity:0.65;
    z-index:1;
  }
}