/* ============================================================
   AI-BOS Landing Page — Shared Components (lp.css v1)
   All product intro pages: /ha/  /reply/  /erp/
   ============================================================ */

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#050a14;color:rgba(255,255,255,.95);overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","Microsoft JhengHei",sans-serif}
a{color:inherit;text-decoration:none}

/* ── Background Scene ── */
.lp-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lp-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:lpFloat 20s ease-in-out infinite}
.lp-orb-1{width:700px;height:700px;top:-15%;left:-8%;background:radial-gradient(circle,rgba(37,99,235,.20),transparent 70%)}
.lp-orb-2{width:550px;height:550px;top:45%;right:-10%;background:radial-gradient(circle,rgba(139,92,246,.16),transparent 70%);animation-delay:-7s;animation-duration:25s}
.lp-orb-3{width:500px;height:500px;bottom:-20%;left:35%;background:radial-gradient(circle,rgba(16,185,129,.13),transparent 70%);animation-delay:-13s;animation-duration:22s}
@keyframes lpFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-22px) scale(1.04)}66%{transform:translate(-18px,14px) scale(.97)}}
.lp-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black 20%,transparent 70%)}
.lp-noise{position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:.5}

/* ── Container ── */
.lp-c{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,60px);position:relative;z-index:1}

/* ── Eyebrow Badge ── */
.lp-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18);
  border-radius:100px;padding:5px 16px 5px 10px;margin-bottom:28px;font-size:12px;font-weight:700;color:#93c5fd;letter-spacing:.04em}
.lp-badge-dot{width:7px;height:7px;border-radius:50%;background:#3b82f6;flex-shrink:0;
  box-shadow:0 0 8px #3b82f6;animation:lpGlow 2.2s ease-in-out infinite}
@keyframes lpGlow{0%,100%{box-shadow:0 0 5px #3b82f6}50%{box-shadow:0 0 14px #60a5fa,0 0 28px rgba(96,165,250,.4)}}

/* ── Hero ── */
.lp-hero{padding:clamp(96px,12vw,144px) 0 clamp(72px,9vw,108px);text-align:center;position:relative;z-index:1}
.lp-h1{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.04em;color:#fff;margin:0 0 22px}
.lp-h1-accent{background:linear-gradient(135deg,#60a5fa 0%,#818cf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lp-hero-sub{font-size:clamp(14px,1.8vw,17px);color:rgba(255,255,255,.65);line-height:1.75;max-width:640px;margin:0 auto 34px}
.lp-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}

/* ── Stats ── */
.lp-stats{display:inline-flex;align-items:stretch;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;overflow:hidden;backdrop-filter:blur(12px);
  box-shadow:0 8px 32px -8px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset}
.lp-stat{padding:20px 32px;display:flex;flex-direction:column;align-items:center;gap:5px}
.lp-stat-sep{width:1px;background:rgba(255,255,255,.08);align-self:stretch}
.lp-stat-badge{font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:100px}
.lp-stat-badge.bl{background:rgba(37,99,235,.2);color:#93c5fd}
.lp-stat-badge.gr{background:rgba(16,185,129,.2);color:#6ee7b7}
.lp-stat-badge.or{background:rgba(245,158,11,.2);color:#fcd34d}
.lp-stat-badge.vi{background:rgba(139,92,246,.2);color:#c4b5fd}
.lp-stat-n{font-size:28px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.025em}
.lp-stat-n em{font-size:16px;font-style:normal;color:#3b82f6}
.lp-stat-l{font-size:11.5px;color:rgba(255,255,255,.45);letter-spacing:.04em}

/* ── Section Headers ── */
.lp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#3b82f6;margin-bottom:14px;position:relative;padding-left:18px}
.lp-eyebrow::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:2px;
  background:#3b82f6;box-shadow:0 0 0 4px rgba(37,99,235,.18),0 0 0 7px rgba(37,99,235,.07)}
.lp-eyebrow.em{color:#10b981}.lp-eyebrow.em::before{background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.18),0 0 0 7px rgba(16,185,129,.07)}
.lp-eyebrow.am{color:#f59e0b}.lp-eyebrow.am::before{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18),0 0 0 7px rgba(245,158,11,.07)}
.lp-eyebrow.vi{color:#8b5cf6}.lp-eyebrow.vi::before{background:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.18),0 0 0 7px rgba(139,92,246,.07)}
.lp-h2{font-size:clamp(26px,3.2vw,44px);font-weight:900;letter-spacing:-.025em;line-height:1.15;margin:0 0 12px;
  background:linear-gradient(135deg,#fff 0%,#93c5fd 55%,#a78bfa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lp-sec-sub{font-size:15px;color:rgba(255,255,255,.62);line-height:1.75;max-width:540px;margin:0 0 48px}

/* ── Buttons ── */
.lp-btn{display:inline-flex;align-items:center;padding:13px 26px;border-radius:12px;font-size:15px;font-weight:700;
  border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.lp-btn:hover{transform:translateY(-2px)}.lp-btn:active{transform:translateY(1px)}
.lp-btn-primary{background:linear-gradient(180deg,#4f8cf6,#2563eb);color:#fff;border:1px solid #1d4ed8;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 8px 24px -4px rgba(37,99,235,.4),0 2px 6px -1px rgba(15,23,42,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.18)}
.lp-btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 14px 36px -4px rgba(37,99,235,.5),0 2px 6px -1px rgba(15,23,42,.25)}
.lp-btn-ghost{background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.lp-btn-ghost:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.22)}

/* ── Pain Points ── */
.lp-pain{padding:clamp(72px,9vw,110px) 0;position:relative;z-index:1}
.lp-pain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lp-pain-card{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:28px 24px;backdrop-filter:blur(8px);display:flex;gap:18px;align-items:flex-start;
  transition:border-color .15s,transform .15s}
.lp-pain-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,#ef4444,#f97316)}
.lp-pain-card:hover{border-color:rgba(239,68,68,.3);transform:translateY(-2px)}
.lp-pain-icon{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:rgba(239,68,68,.12);color:#f87171;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 0 0 1px rgba(239,68,68,.15) inset,0 4px 12px -4px rgba(239,68,68,.3)}
.lp-pain-title{font-size:15.5px;font-weight:700;color:#fff;margin:0 0 8px}
.lp-pain-desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65;margin:0}
.lp-pain-tag{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;
  background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}

/* ── How It Works ── */
.lp-how{padding:clamp(72px,9vw,110px) 0;position:relative;z-index:1}
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-step{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:32px 24px 28px;backdrop-filter:blur(8px);text-align:center;transition:border-color .15s,transform .15s}
.lp-step::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;border-radius:20px 20px 0 0}
.lp-step::after{content:'';position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,var(--step-orb,rgba(59,130,246,.06)) 0%,transparent 70%)}
.lp-step:nth-child(1)::before{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.lp-step:nth-child(1){--step-orb:rgba(59,130,246,.07)}
.lp-step:nth-child(2)::before{background:linear-gradient(90deg,#10b981,#34d399)}.lp-step:nth-child(2){--step-orb:rgba(16,185,129,.07)}
.lp-step:nth-child(3)::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.lp-step:nth-child(3){--step-orb:rgba(139,92,246,.07)}
.lp-step:hover{transform:translateY(-3px)}
.lp-step:nth-child(1):hover{border-color:rgba(59,130,246,.3)}.lp-step:nth-child(2):hover{border-color:rgba(16,185,129,.3)}.lp-step:nth-child(3):hover{border-color:rgba(139,92,246,.3)}
.lp-step-num{width:56px;height:56px;border-radius:50%;margin:0 auto 20px;font-size:20px;font-weight:900;color:#fff;display:flex;align-items:center;justify-content:center}
.lp-step:nth-child(1) .lp-step-num{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 6px 18px -4px rgba(37,99,235,.5),0 0 0 5px rgba(37,99,235,.12)}
.lp-step:nth-child(2) .lp-step-num{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 18px -4px rgba(16,185,129,.5),0 0 0 5px rgba(16,185,129,.12)}
.lp-step:nth-child(3) .lp-step-num{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 6px 18px -4px rgba(139,92,246,.5),0 0 0 5px rgba(139,92,246,.12)}
.lp-step-title{font-size:16px;font-weight:700;color:#fff;margin:0 0 10px}
.lp-step-desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65;margin:0 0 14px}
.lp-step-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.lp-step-tag{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.6)}

/* ── Features ── */
.lp-features{padding:clamp(72px,9vw,110px) 0;position:relative;z-index:1}
.lp-feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-feat-card{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;backdrop-filter:blur(8px);transition:border-color .15s,transform .15s}
.lp-feat-card::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;border-radius:20px 20px 0 0}
.lp-feat-card::after{content:'';position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,var(--fc-orb,rgba(59,130,246,.06)) 0%,transparent 70%)}
/* Color variants */
.lp-feat-card[data-c="blue"]::before{background:linear-gradient(90deg,#2563eb,#3b82f6);box-shadow:0 4px 14px -4px rgba(37,99,235,.4)}.lp-feat-card[data-c="blue"]{--fc-orb:rgba(37,99,235,.07)}.lp-feat-card[data-c="blue"]:hover{border-color:rgba(37,99,235,.3)}
.lp-feat-card[data-c="violet"]::before{background:linear-gradient(90deg,#7c3aed,#8b5cf6);box-shadow:0 4px 14px -4px rgba(139,92,246,.4)}.lp-feat-card[data-c="violet"]{--fc-orb:rgba(139,92,246,.07)}.lp-feat-card[data-c="violet"]:hover{border-color:rgba(139,92,246,.3)}
.lp-feat-card[data-c="emerald"]::before{background:linear-gradient(90deg,#059669,#10b981);box-shadow:0 4px 14px -4px rgba(16,185,129,.4)}.lp-feat-card[data-c="emerald"]{--fc-orb:rgba(16,185,129,.07)}.lp-feat-card[data-c="emerald"]:hover{border-color:rgba(16,185,129,.3)}
.lp-feat-card[data-c="amber"]::before{background:linear-gradient(90deg,#d97706,#f59e0b);box-shadow:0 4px 14px -4px rgba(245,158,11,.4)}.lp-feat-card[data-c="amber"]{--fc-orb:rgba(245,158,11,.07)}.lp-feat-card[data-c="amber"]:hover{border-color:rgba(245,158,11,.3)}
.lp-feat-card[data-c="cyan"]::before{background:linear-gradient(90deg,#0891b2,#06b6d4);box-shadow:0 4px 14px -4px rgba(6,182,212,.4)}.lp-feat-card[data-c="cyan"]{--fc-orb:rgba(6,182,212,.07)}.lp-feat-card[data-c="cyan"]:hover{border-color:rgba(6,182,212,.3)}
.lp-feat-card[data-c="rose"]::before{background:linear-gradient(90deg,#e11d48,#f43f5e);box-shadow:0 4px 14px -4px rgba(244,63,94,.4)}.lp-feat-card[data-c="rose"]{--fc-orb:rgba(244,63,94,.07)}.lp-feat-card[data-c="rose"]:hover{border-color:rgba(244,63,94,.3)}
.lp-feat-card[data-c="orange"]::before{background:linear-gradient(90deg,#ea580c,#f97316);box-shadow:0 4px 14px -4px rgba(249,115,22,.4)}.lp-feat-card[data-c="orange"]{--fc-orb:rgba(249,115,22,.07)}.lp-feat-card[data-c="orange"]:hover{border-color:rgba(249,115,22,.3)}
.lp-feat-card:hover{transform:translateY(-3px)}
.lp-feat-body{padding:28px 22px 24px;position:relative;z-index:1}
/* Icon */
.lp-feat-icon{width:62px;height:62px;border-radius:16px;margin-bottom:18px;display:flex;align-items:center;justify-content:center}
.lp-feat-card[data-c="blue"] .lp-feat-icon{background:linear-gradient(145deg,#4f8cf6,#1d4ed8);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(37,99,235,.55)}
.lp-feat-card[data-c="violet"] .lp-feat-icon{background:linear-gradient(145deg,#a78bfa,#7c3aed);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(139,92,246,.55)}
.lp-feat-card[data-c="emerald"] .lp-feat-icon{background:linear-gradient(145deg,#34d399,#059669);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(16,185,129,.55)}
.lp-feat-card[data-c="amber"] .lp-feat-icon{background:linear-gradient(145deg,#fbbf24,#d97706);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(245,158,11,.55)}
.lp-feat-card[data-c="cyan"] .lp-feat-icon{background:linear-gradient(145deg,#22d3ee,#0891b2);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(6,182,212,.55)}
.lp-feat-card[data-c="rose"] .lp-feat-icon{background:linear-gradient(145deg,#fb7185,#e11d48);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(244,63,94,.55)}
.lp-feat-card[data-c="orange"] .lp-feat-icon{background:linear-gradient(145deg,#fb923c,#ea580c);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -4px rgba(249,115,22,.55)}
.lp-feat-icon svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
/* Card text */
.lp-feat-title{font-size:17px;font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.lp-feat-card[data-c="blue"] .lp-feat-title{color:#93c5fd}.lp-feat-card[data-c="violet"] .lp-feat-title{color:#c4b5fd}
.lp-feat-card[data-c="emerald"] .lp-feat-title{color:#6ee7b7}.lp-feat-card[data-c="amber"] .lp-feat-title{color:#fcd34d}
.lp-feat-card[data-c="cyan"] .lp-feat-title{color:#67e8f9}.lp-feat-card[data-c="rose"] .lp-feat-title{color:#fda4af}
.lp-feat-card[data-c="orange"] .lp-feat-title{color:#fdba74}
.lp-feat-desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.7;margin:0 0 16px}
.lp-feat-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:7px}
.lp-feat-list li{display:flex;align-items:baseline;gap:9px;font-size:12.5px;color:rgba(255,255,255,.55)}
.lp-feat-check{font-weight:700;font-size:11px;flex-shrink:0}
.lp-feat-card[data-c="blue"] .lp-feat-check{color:#60a5fa}.lp-feat-card[data-c="violet"] .lp-feat-check{color:#a78bfa}
.lp-feat-card[data-c="emerald"] .lp-feat-check{color:#34d399}.lp-feat-card[data-c="amber"] .lp-feat-check{color:#fbbf24}
.lp-feat-card[data-c="cyan"] .lp-feat-check{color:#22d3ee}.lp-feat-card[data-c="rose"] .lp-feat-check{color:#fb7185}
.lp-feat-card[data-c="orange"] .lp-feat-check{color:#fb923c}

/* ── CTA ── */
.lp-cta{padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,100px);position:relative;z-index:1}
.lp-cta-card{position:relative;overflow:hidden;max-width:820px;margin:0 auto;border-radius:24px;
  padding:clamp(48px,6vw,72px) clamp(32px,5vw,72px);text-align:center;
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(99,102,241,.10));border:1px solid rgba(37,99,235,.25);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 48px -12px rgba(37,99,235,.22)}
.lp-cta-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px)}
.lp-cta-orb-a{width:280px;height:280px;background:rgba(37,99,235,.22);top:-100px;left:-100px}
.lp-cta-orb-b{width:220px;height:220px;background:rgba(99,102,241,.16);bottom:-80px;right:-80px}
.lp-cta-title{font-size:clamp(24px,3.2vw,42px);font-weight:900;color:#fff;margin:0 0 14px;position:relative;letter-spacing:-.025em}
.lp-cta-sub{font-size:16px;color:rgba(255,255,255,.7);margin:0 0 32px;line-height:1.65;position:relative}
.lp-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}

/* ── Reveal Animation ── */
.lp-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.lp-reveal.lp-visible{opacity:1;transform:translateY(0)}

/* ── RWD ── */
@media(max-width:960px){
  .lp-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-steps{grid-template-columns:1fr}
}
@media(max-width:760px){
  .lp-pain-grid{grid-template-columns:1fr}
  .lp-feat-grid{grid-template-columns:1fr}
  .lp-stats{flex-direction:column;width:min(320px,100%)}
  .lp-stat-sep{width:100%;height:1px}
}
@media(max-width:480px){
  .lp-hero-btns .lp-btn{flex:1 1 calc(50% - 7px);justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .lp-orb{animation:none!important}.lp-badge-dot{animation:none!important}
  .lp-feat-card,.lp-pain-card,.lp-step,.lp-btn{transition:none!important}
}

/* ── Hero 2-column Layout (with illustration) ── */
.lp-hero-2col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lp-hero-left{text-align:left}
.lp-hero-left .lp-hero-btns{justify-content:flex-start}
.lp-hero-left .lp-stats{display:inline-flex}
.lp-hero-left .lp-badge{display:inline-flex}
.lp-hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.lp-hero-visual::before{content:'';position:absolute;inset:-20%;border-radius:50%;
  background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(37,99,235,.15) 0%,transparent 70%);pointer-events:none}
.lp-hero-img{width:100%;max-width:460px;height:auto;position:relative;z-index:1;
  border-radius:24px;
  box-shadow:0 24px 64px rgba(37,99,235,.28),0 0 0 1px rgba(255,255,255,.06) inset;
  filter:drop-shadow(0 0 40px rgba(37,99,235,.18))}
@media(max-width:960px){
  .lp-hero-2col{grid-template-columns:1fr;gap:36px}
  .lp-hero-left{order:2;text-align:center}
  .lp-hero-left .lp-hero-btns{justify-content:center}
  .lp-hero-left .lp-stats{justify-content:center}
  .lp-hero-visual{order:1}
  .lp-hero-img{max-width:320px}
}
@media(max-width:480px){.lp-hero-img{max-width:260px}}
/* ============================================================
   lp.css v2 — 立體感升級 + 視覺強化
   ============================================================ */

/* ── 強化 Body 背景 — 強制 dark，移除 light mode 影響 ── */
html { color-scheme: dark; }
body {
  background: #050a14 !important;
  color: rgba(255,255,255,.95) !important;
}

/* 加強背景光暈可見度 */
.lp-orb-1 { background: radial-gradient(circle, rgba(37,99,235,.28), transparent 70%) !important; }
.lp-orb-2 { background: radial-gradient(circle, rgba(139,92,246,.22), transparent 70%) !important; }
.lp-orb-3 { background: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%) !important; }

/* 格線增強 */
.lp-grid {
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
}

/* ── Hero 升級 ── */
.lp-hero { padding: clamp(110px,13vw,160px) 0 clamp(80px,10vw,120px) !important; }
.lp-h1 { font-size: clamp(48px,6.5vw,88px) !important; letter-spacing: -.045em !important; }

/* Hero 圖片立體框 */
.lp-hero-img {
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 2px 0 rgba(255,255,255,.06) inset,
    0 32px 80px rgba(37,99,235,.32),
    0 16px 40px rgba(0,0,0,.5) !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s !important;
}
.lp-hero-img:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 2px 0 rgba(255,255,255,.08) inset,
    0 40px 100px rgba(37,99,235,.4),
    0 20px 60px rgba(0,0,0,.6) !important;
}

/* Stats 升級 */
.lp-stats {
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 12px 36px -8px rgba(0,0,0,.5),
    0 4px 12px -4px rgba(37,99,235,.15) !important;
}
.lp-stat-n { font-size: 32px !important; }
.lp-stat-l { font-size: 12px !important; color: rgba(255,255,255,.5) !important; }

/* ── Pain Cards 升級 ── */
.lp-pain { padding: clamp(80px,10vw,120px) 0 !important; }
.lp-pain-card {
  background: linear-gradient(145deg, rgba(239,68,68,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  border: 1px solid rgba(239,68,68,.18) !important;
  border-top: none !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.05) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 12px 36px -8px rgba(0,0,0,.5),
    0 4px 12px -4px rgba(239,68,68,.08) !important;
  padding: 32px 26px !important;
}
.lp-pain-card::before { height: 4px !important; }
.lp-pain-card:hover {
  border-color: rgba(239,68,68,.35) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 20px 48px -8px rgba(0,0,0,.6),
    0 8px 24px -4px rgba(239,68,68,.18) !important;
  transform: translateY(-4px) !important;
}
.lp-pain-icon {
  width: 50px !important; height: 50px !important; border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(239,68,68,.18), rgba(239,68,68,.08)) !important;
  border: 1px solid rgba(239,68,68,.22) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.06), 0 6px 16px -4px rgba(239,68,68,.35) !important;
}
.lp-pain-title { font-size: 16px !important; font-weight: 800 !important; }
.lp-pain-tag {
  font-size: 11.5px !important;
  background: rgba(239,68,68,.18) !important;
  border: 1px solid rgba(239,68,68,.28) !important;
  box-shadow: 0 2px 8px -2px rgba(239,68,68,.2) !important;
}

/* ── How It Works 升級 ── */
.lp-how { padding: clamp(80px,10vw,120px) 0 !important; }
.lp-step {
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 36px 28px 32px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 12px 36px -8px rgba(0,0,0,.5) !important;
}
.lp-step::before { height: 4px !important; }
.lp-step:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 20px 48px -8px rgba(0,0,0,.6) !important;
  transform: translateY(-5px) !important;
}
.lp-step:nth-child(1) .lp-step-num { box-shadow: 0 8px 24px -4px rgba(37,99,235,.6), 0 0 0 6px rgba(37,99,235,.14), 0 0 0 10px rgba(37,99,235,.06) !important; }
.lp-step:nth-child(2) .lp-step-num { box-shadow: 0 8px 24px -4px rgba(16,185,129,.6), 0 0 0 6px rgba(16,185,129,.14), 0 0 0 10px rgba(16,185,129,.06) !important; }
.lp-step:nth-child(3) .lp-step-num { box-shadow: 0 8px 24px -4px rgba(139,92,246,.6), 0 0 0 6px rgba(139,92,246,.14), 0 0 0 10px rgba(139,92,246,.06) !important; }
.lp-step-num { width: 60px !important; height: 60px !important; font-size: 22px !important; margin-bottom: 24px !important; }
.lp-step-title { font-size: 17px !important; font-weight: 800 !important; }
.lp-step-tag {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  padding: 4px 12px !important;
}

/* ── Features 升級 ── */
.lp-features { padding: clamp(80px,10vw,120px) 0 !important; }
.lp-feat-card {
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 12px 36px -8px rgba(0,0,0,.5) !important;
}
.lp-feat-card::before { height: 5px !important; }
.lp-feat-card:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 20px 56px -8px rgba(0,0,0,.6) !important;
  transform: translateY(-5px) !important;
}
.lp-feat-body { padding: 32px 24px 28px !important; }
.lp-feat-icon {
  width: 64px !important; height: 64px !important; border-radius: 18px !important;
  margin-bottom: 20px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.3) inset,
    0 -2px 0 rgba(0,0,0,.25) inset !important;
}
.lp-feat-title { font-size: 17.5px !important; font-weight: 900 !important; margin-bottom: 12px !important; }
.lp-feat-desc { font-size: 14px !important; line-height: 1.72 !important; }
.lp-feat-list li { font-size: 13px !important; color: rgba(255,255,255,.6) !important; gap: 10px !important; }
.lp-feat-check { font-size: 12px !important; }

/* Section 分隔感 */
.lp-pain  { background: radial-gradient(ellipse 100% 60% at 50% 50%, rgba(239,68,68,.04) 0%, transparent 70%); }
.lp-how   { background: radial-gradient(ellipse 100% 60% at 50% 50%, rgba(37,99,235,.04) 0%, transparent 70%); }
.lp-features { background: radial-gradient(ellipse 100% 60% at 50% 50%, rgba(139,92,246,.04) 0%, transparent 70%); }

/* ── CTA Card 升級 ── */
.lp-cta { padding: clamp(48px,7vw,96px) 0 clamp(72px,9vw,120px) !important; }
.lp-cta-card {
  background: linear-gradient(135deg, rgba(37,99,235,.20) 0%, rgba(99,102,241,.14) 100%) !important;
  border: 1px solid rgba(37,99,235,.35) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -2px 0 rgba(0,0,0,.2) inset,
    0 24px 64px -12px rgba(37,99,235,.3),
    0 8px 24px -8px rgba(0,0,0,.4) !important;
}
.lp-cta-title { font-size: clamp(26px,3.5vw,46px) !important; }
.lp-cta-sub { font-size: 16px !important; color: rgba(255,255,255,.75) !important; }

/* ── Buttons 立體升級 ── */
.lp-btn-primary {
  box-shadow:
    0 2px 0 rgba(255,255,255,.45) inset,
    0 -2px 0 rgba(0,0,0,.2) inset,
    0 8px 24px -4px rgba(37,99,235,.5),
    0 2px 8px -2px rgba(15,23,42,.3) !important;
}
.lp-btn-primary:hover {
  box-shadow:
    0 2px 0 rgba(255,255,255,.45) inset,
    0 -2px 0 rgba(0,0,0,.2) inset,
    0 16px 40px -4px rgba(37,99,235,.65),
    0 4px 16px -4px rgba(15,23,42,.4) !important;
  transform: translateY(-3px) !important;
}

/* ── Section Headers 升級 ── */
.lp-h2 { font-size: clamp(30px,3.8vw,50px) !important; margin-bottom: 16px !important; }
.lp-sec-sub { font-size: 16px !important; max-width: 560px !important; margin-bottom: 56px !important; }
.lp-eyebrow { font-size: 12.5px !important; margin-bottom: 16px !important; }

/* ── Reveal 動畫優化 ── */
.lp-reveal { transform: translateY(32px) !important; }
.lp-reveal.lp-visible { transform: translateY(0) !important; }

/* ── Badge 升級 ── */
.lp-badge {
  background: rgba(37,99,235,.12) !important;
  border: 1px solid rgba(37,99,235,.25) !important;
  padding: 6px 18px 6px 12px !important;
  font-size: 12.5px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 4px 12px -4px rgba(37,99,235,.2) !important;
}

/* lp hero h1 clean break */
.lp-hero-2col .lp-hero-left .lp-h1{font-size:clamp(40px,4.8vw,68px)!important}
.lp-hero-2col .lp-hero-left .lp-h1-accent{display:block!important;white-space:nowrap!important}
.lp-hero-left .lp-hero-sub{max-width:500px!important;font-size:15px!important}

/* Final Polish */
.lp-pain,.lp-how,.lp-features{padding:clamp(60px,7vw,96px) 0!important}
.lp-hero{padding:clamp(90px,11vw,140px) 0 clamp(56px,7vw,88px)!important}
.lp-cta{padding:clamp(36px,5vw,68px) 0 clamp(56px,7vw,88px)!important}
.lp-stat{padding:18px 28px!important}
.lp-stat-n{font-size:28px!important}
.lp-stat-l{font-size:11px!important;white-space:nowrap!important}
.lp-stat-badge{font-size:9px!important;padding:2px 7px!important}
.lp-pain-desc{font-size:13px!important}
.lp-step-tag{font-size:11px!important;padding:3px 9px!important}