@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
  /* Minimal base reset (production-appropriate; replaces the preview-sandbox reset) */
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0;padding:0;}
  img{max-width:100%;height:auto;}
  [hidden]{display:none!important;}

  

  :root{
    --bg:#FFFDF5;
    --fg:#1E293B;
    --muted:#F1F5F9;
    --muted-fg:#64748B;
    --accent:#D2232A;
    --accent-fg:#FFFFFF;
    --secondary:#F472B6;
    --tertiary:#FBBF24;
    --quaternary:#34D399;
    --border:#E2E8F0;
    --card:#FFFFFF;
    --ink:#1E293B;
    --r-sm:8px;
    --r-md:16px;
    --r-lg:24px;
    --bw:2px;
    color-scheme: light;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
    font-weight:400;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:"Be Vietnam Pro",system-ui,sans-serif;
    font-weight:800;
    line-height:1.12;
    margin:0;
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:inherit;cursor:pointer;}
  section{position:relative;}

  .wrap{max-width:1152px;margin:0 auto;padding-left:24px;padding-right:24px;}

  /* ---------- utility: hard shadow pop ---------- */
  .pop{
    border:var(--bw) solid var(--ink);
    box-shadow:4px 4px 0 0 var(--ink);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.34,1.56,.64,1);
  }
  .pop:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink);}
  .pop:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink);}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;border-radius:9999px;
    font-weight:700;font-size:15px;white-space:nowrap;
    border:var(--bw) solid var(--ink);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.34,1.56,.64,1), background-color .25s ease;
    min-height:48px;
  }
  .btn-primary{background:var(--accent);color:var(--accent-fg);box-shadow:4px 4px 0 0 var(--ink);}
  .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink);}
  .btn-primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink);}
  .btn-primary .ic-dot{
    width:26px;height:26px;border-radius:9999px;background:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .btn-primary .ic-dot svg{stroke:var(--accent);}
  .btn-secondary{background:transparent;color:var(--fg);box-shadow:none;}
  .btn-secondary:hover{background:var(--tertiary);}

  /* ---------- icon style (lucide-like) ---------- */
  svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .icon-badge{
    width:44px;height:44px;border-radius:9999px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    border:var(--bw) solid var(--ink);
  }

  /* ---------- decorative dot grid ---------- */
  .dot-grid{
    background-image:radial-gradient(var(--ink) 1.5px, transparent 1.5px);
    background-size:18px 18px;
    opacity:0.12;
  }

  /* ---------- badges / pills ---------- */
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--card);border:var(--bw) solid var(--ink);
    border-radius:9999px;padding:8px 16px 8px 10px;
    font-weight:700;font-size:13px;letter-spacing:.02em;
    box-shadow:3px 3px 0 0 var(--ink);
  }
  .eyebrow .icon-badge{width:24px;height:24px;border-width:0;background:var(--tertiary);}
  .eyebrow .icon-badge svg{width:14px;height:14px;stroke-width:3;}

  /* header */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,253,245,.9);
    backdrop-filter:blur(8px);
    border-bottom:var(--bw) solid var(--ink);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{height:40px;width:auto;}
  nav.primary-nav{display:flex;align-items:center;gap:30px;}
  nav.primary-nav a{font-weight:600;font-size:15px;position:relative;padding:4px 2px;}
  nav.primary-nav a:hover{color:var(--accent);}
  .nav-actions{display:flex;align-items:center;gap:12px;}
  .hotline{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;}
  .hotline .icon-badge{width:32px;height:32px;background:var(--quaternary);}
  .hotline .icon-badge svg{width:16px;height:16px;stroke-width:3;color:var(--ink);}
  .menu-btn{display:none;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-sm);width:44px;height:44px;align-items:center;justify-content:center;box-shadow:3px 3px 0 0 var(--ink);}
  .nav-login{font-weight:700;font-size:14.5px;white-space:nowrap;}
  .nav-login:hover{color:var(--accent);}
  .mobile-auth{display:flex;gap:10px;margin-top:6px;}
  #mobileNav{display:none;border-top:var(--bw) solid var(--ink);background:var(--bg);}
  #mobileNav.open{display:block;}
  #mobileNav .wrap{padding-top:16px;padding-bottom:16px;display:flex;flex-direction:column;gap:14px;}
  #mobileNav a{font-weight:700;font-size:16px;}

  /* hero */
  .hero{padding:76px 0 90px;overflow:hidden;}
  .hero-shape-circle{
    position:absolute;top:-120px;right:-80px;width:520px;height:520px;border-radius:9999px;
    background:var(--tertiary);opacity:.55;z-index:0;
  }
  .hero-shape-dots{position:absolute;left:-40px;bottom:-40px;width:280px;height:280px;border-radius:9999px;z-index:0;}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1;}
  .hero h1{font-size:clamp(34px,4.4vw,54px);margin:18px 0 20px;}
  .hero h1 .hl{color:var(--accent);position:relative;white-space:nowrap;}
  .hero-sub{font-size:18px;color:var(--muted-fg);max-width:520px;margin-bottom:30px;}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;}
  .hero-stats{display:flex;gap:26px;flex-wrap:wrap;}
  .hero-stat b{display:block;font-family:"Be Vietnam Pro",sans-serif;font-size:26px;font-weight:800;color:var(--fg);}
  .hero-stat span{font-size:13px;color:var(--muted-fg);font-weight:600;}

  /* hero mock dashboard */
  .device{
    background:var(--card);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);
    box-shadow:10px 10px 0 0 var(--secondary);
    padding:18px;transform:rotate(1.4deg);
    position:relative;
  }
  .device-topbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
  .device-dot{width:11px;height:11px;border-radius:9999px;border:1.5px solid var(--ink);}
  .device-title{margin-left:auto;font-weight:700;font-size:12px;color:var(--muted-fg);display:flex;align-items:center;gap:6px;}
  .order-row{
    display:flex;align-items:center;gap:12px;
    border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:10px;background:#fff;
  }
  .order-thumb{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--ink);flex-shrink:0;object-fit:cover;display:block;background:#fff;}
  .order-info{flex:1;min-width:0;}
  .order-info b{display:block;font-size:13.5px;}
  .order-info span{font-size:12px;color:var(--muted-fg);}
  .status-pill{font-size:11px;font-weight:700;padding:5px 10px;border-radius:9999px;border:1.5px solid var(--ink);white-space:nowrap;}
  .device-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1.5px dashed var(--border);}
  .device-footer .track{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted-fg);}
  .float-chip{
    position:absolute;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);
    padding:10px 14px;box-shadow:4px 4px 0 0 var(--ink);display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;
  }
  .chip-1{top:-22px;left:-26px;background:var(--quaternary);transform:rotate(-6deg);}
  .chip-2{bottom:-20px;right:-18px;background:var(--tertiary);transform:rotate(5deg);}

  /* section heading */
  .kicker{color:var(--accent);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:block;}
  .section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px);}
  .section-head p{margin-top:14px;color:var(--muted-fg);font-size:16px;}

  /* platforms */
  .platforms{padding:44px 0;}
  .platform-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
  .platform-pill{
    display:flex;align-items:center;gap:9px;padding:11px 20px;border-radius:9999px;
    border:var(--bw) solid var(--ink);font-weight:700;font-size:14.5px;background:var(--card);
    box-shadow:3px 3px 0 0 var(--ink);
  }
  .platform-pill .dot{width:9px;height:9px;border-radius:9999px;}

  /* smart system */
  .smart{padding:90px 0;background:var(--muted);position:relative;overflow:hidden;}
  .smart-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;}
  .smart-features{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
  .smart-feat{display:flex;gap:16px;align-items:flex-start;}
  .smart-feat h4{font-size:17px;margin-bottom:6px;}
  .smart-feat p{color:var(--muted-fg);font-size:14.5px;}

  .console{
    background:var(--ink);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);
    box-shadow:8px 8px 0 0 var(--secondary);padding:20px;color:#fff;
  }
  .console-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .console-head .tag{background:var(--quaternary);color:var(--ink);font-weight:800;font-size:11px;padding:5px 10px;border-radius:9999px;}
  .console-panel{background:#28324a;border-radius:var(--r-md);padding:16px;margin-bottom:12px;}
  .console-panel .row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);}
  .console-panel .row:last-child{border-bottom:none;}
  .console-panel .row span:first-child{color:#94A3B8;}
  .console-panel .row span:last-child{font-weight:700;}
  .console-bar{height:8px;border-radius:9999px;background:#3a4560;overflow:hidden;margin-top:6px;}
  .console-bar i{display:block;height:100%;background:var(--tertiary);border-radius:9999px;}
  .console-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent);border-radius:var(--r-md);padding:12px 16px;font-weight:700;font-size:13.5px;}

  /* image / vietnamese search feature */
  .search-feat{padding:90px 0;position:relative;overflow:hidden;}
  .search-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}

  .demo-stage{
    --demo-dur: 7s;
    position:relative;height:360px;background:var(--muted);
    border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
    box-shadow:8px 8px 0 0 var(--tertiary);
    overflow:hidden;
  }
  .demo-stage::before{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(var(--ink) 1.5px, transparent 1.5px);
    background-size:20px 20px;opacity:.08;
  }

  .demo-photo{
    position:absolute;width:64px;height:64px;border-radius:var(--r-md);
    background:#fff;border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 0 var(--ink);
    display:flex;align-items:center;justify-content:center;z-index:3;overflow:hidden;
    animation: demoPhotoFly var(--demo-dur) cubic-bezier(.34,1.56,.64,1) infinite;
  }
  .demo-photo img{width:100%;height:100%;object-fit:cover;display:block;}

  .demo-searchbar{
    position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:84%;
    display:flex;align-items:center;gap:10px;
    background:#fff;border:var(--bw) solid var(--ink);border-radius:9999px;padding:12px 16px;
    z-index:2;color:var(--ink);
    animation: demoRing var(--demo-dur) ease infinite;
  }
  .demo-chip{
    width:26px;height:26px;border-radius:8px;flex-shrink:0;
    background:var(--tertiary);border:1.5px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    animation: demoChip var(--demo-dur) ease infinite;
  }
  .demo-placeholder{
    flex:1;font-size:13.5px;font-weight:600;color:var(--muted-fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    animation: demoPlaceholder var(--demo-dur) ease infinite;
  }
  .demo-searchbtn{
    width:32px;height:32px;border-radius:9999px;background:var(--accent);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .demo-loading{
    position:absolute;left:16px;right:16px;bottom:-2px;height:3px;
    background:transparent;overflow:hidden;border-radius:9999px;
  }
  .demo-loading i{
    display:block;height:100%;background:var(--accent);border-radius:9999px;
    animation: demoLoading var(--demo-dur) ease infinite;
  }

  .demo-results{
    position:absolute;left:8%;right:8%;bottom:14px;
    display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  }
  .demo-card{
    position:relative;aspect-ratio:1;border-radius:10px;border:1.5px solid var(--ink);
    overflow:hidden;background:#fff;
    animation: demoCard var(--demo-dur) cubic-bezier(.34,1.56,.64,1) infinite;
    animation-delay: var(--d, 0s);
  }
  .demo-card img{width:100%;height:100%;object-fit:cover;display:block;}
  .demo-match{
    position:absolute;top:-8px;right:-6px;background:var(--ink);color:#fff;
    font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:9999px;
    border:1.5px solid var(--ink);
  }

  @keyframes demoPhotoFly{
    0%   { top:8%;  left:8%;  transform:scale(1) rotate(-8deg); opacity:1; }
    8%   { top:8%;  left:8%;  transform:scale(1) rotate(-8deg); opacity:1; }
    30%  { top:38%; left:20%; transform:scale(.45) rotate(2deg); opacity:1; }
    34%  { top:40%; left:21%; transform:scale(.3) rotate(2deg); opacity:0; }
    92%  { top:40%; left:21%; transform:scale(.3) rotate(2deg); opacity:0; }
    97%  { top:8%;  left:8%;  transform:scale(1) rotate(-8deg); opacity:0; }
    100% { top:8%;  left:8%;  transform:scale(1) rotate(-8deg); opacity:1; }
  }
  @keyframes demoRing{
    0%,28%  { box-shadow:4px 4px 0 0 var(--ink); border-color:var(--ink); }
    32%     { box-shadow:0 0 0 6px rgba(210,35,42,.32), 4px 4px 0 0 var(--ink); border-color:var(--accent); }
    38%,100%{ box-shadow:4px 4px 0 0 var(--ink); border-color:var(--ink); }
  }
  @keyframes demoChip{
    0%,31%   { opacity:0; transform:scale(.4); }
    35%      { opacity:1; transform:scale(1); }
    92%      { opacity:1; transform:scale(1); }
    97%,100% { opacity:0; transform:scale(.4); }
  }
  @keyframes demoPlaceholder{
    0%,30%   { opacity:1; }
    35%,92%  { opacity:0; }
    98%,100% { opacity:1; }
  }
  @keyframes demoLoading{
    0%,32%   { width:0%; opacity:0; }
    34%      { opacity:1; }
    48%      { width:100%; opacity:1; }
    52%,100% { width:100%; opacity:0; }
  }
  @keyframes demoCard{
    0%,42%   { opacity:0; transform:translateY(10px) scale(.75); }
    50%      { opacity:1; transform:translateY(0) scale(1); }
    90%      { opacity:1; transform:translateY(0) scale(1); }
    96%,100% { opacity:0; transform:translateY(6px) scale(.85); }
  }

  /* process */
  .process{padding:90px 0;}
  .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;}
  .process-grid::before{
    content:"";position:absolute;top:44px;left:8%;right:8%;height:0;
    border-top:2.5px dashed var(--border);z-index:0;
  }
  .step-card{position:relative;z-index:1;}
  .step-num{
    width:52px;height:52px;border-radius:9999px;border:var(--bw) solid var(--ink);
    display:flex;align-items:center;justify-content:center;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:19px;
    margin-bottom:18px;box-shadow:3px 3px 0 0 var(--ink);
  }
  .step-card h4{font-size:17px;margin-bottom:8px;}
  .step-card p{font-size:14px;color:var(--muted-fg);}

  /* features grid */
  .features{padding:90px 0;background:var(--muted);}
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .feat-card{
    background:var(--card);border-radius:var(--r-lg);padding:26px 22px 22px;
  }
  .feat-card .icon-badge{margin-bottom:16px;}
  .feat-card h4{font-size:17px;margin-bottom:8px;}
  .feat-card p{font-size:14px;color:var(--muted-fg);}
  .feat-card:hover{transform:rotate(-1deg) scale(1.02);}

  /* pricing */
  .pricing{padding:90px 0;}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
  .price-card{
    background:var(--card);border-radius:var(--r-lg);padding:30px 26px;position:relative;
  }
  .price-card:hover{transform:translate(-2px,-2px) rotate(-1deg);}
  .price-card h3{font-size:19px;margin-bottom:8px;}
  .price-card .desc{font-size:13.5px;color:var(--muted-fg);margin-bottom:20px;}
  .price-list{display:flex;flex-direction:column;gap:12px;margin:22px 0 26px;}
  .price-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;}
  .price-list .icon-badge{width:22px;height:22px;flex-shrink:0;background:var(--quaternary);border-width:1.5px;margin-top:1px;}
  .price-list .icon-badge svg{width:12px;height:12px;stroke-width:3.5;color:var(--ink);}

  /* testimonials */
  .testi{padding:90px 0;background:var(--muted);}
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .testi-card{background:var(--card);border-radius:0px 24px 24px 24px;padding:26px;}
  .testi-card:nth-child(2){box-shadow:8px 8px 0 0 var(--secondary);}
  .testi-stars{display:flex;gap:3px;margin-bottom:14px;color:var(--tertiary);}
  .testi-stars svg{width:16px;height:16px;fill:var(--tertiary);stroke:var(--ink);stroke-width:1.5;}
  .testi-quote{font-size:14.5px;margin-bottom:20px;}
  .testi-person{display:flex;align-items:center;gap:12px;}
  .testi-avatar{width:40px;height:40px;border-radius:9999px;border:var(--bw) solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:"Be Vietnam Pro",sans-serif;}
  .testi-person b{display:block;font-size:14px;}
  .testi-person span{font-size:12.5px;color:var(--muted-fg);}

  /* cta band */
  .cta-band{padding:70px 0;}
  .cta-box{
    background:var(--accent);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);
    box-shadow:8px 8px 0 0 var(--ink);
    padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;
    color:#fff;position:relative;overflow:hidden;
  }
  .cta-box h2{font-size:clamp(24px,3vw,32px);color:#fff;max-width:480px;}
  .cta-box p{color:rgba(255,255,255,.85);margin-top:10px;font-size:15px;}
  .cta-box .btn-primary{background:#fff;color:var(--accent);}
  .cta-box .btn-primary .ic-dot{background:var(--accent);}
  .cta-box .btn-primary .ic-dot svg{stroke:#fff;}
  .cta-shape{position:absolute;width:220px;height:220px;border-radius:9999px;background:rgba(255,255,255,.12);right:-60px;bottom:-90px;}

  /* footer */
  footer{padding:64px 0 28px;border-top:var(--bw) solid var(--ink);}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px;}
  .foot-brand img{height:36px;margin-bottom:14px;}
  .foot-brand p{font-size:14px;color:var(--muted-fg);max-width:280px;margin-bottom:18px;}
  .foot-social{display:flex;gap:10px;}
  .foot-social a{width:38px;height:38px;border-radius:9999px;border:var(--bw) solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--card);}
  footer h5{font-family:"Be Vietnam Pro",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;}
  footer ul{display:flex;flex-direction:column;gap:11px;}
  footer ul a{font-size:14px;color:var(--muted-fg);}
  footer ul a:hover{color:var(--accent);}
  .foot-contact li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted-fg);}
  .foot-contact svg{flex-shrink:0;margin-top:2px;color:var(--accent);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1.5px solid var(--border);font-size:13px;color:var(--muted-fg);flex-wrap:wrap;gap:10px;}

  /* pop-in animation */
  .reveal{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1);}
  .reveal.show{opacity:1;transform:translateY(0) scale(1);}

  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.001ms !important; animation-duration:.001ms !important;}
    html{scroll-behavior:auto;}
    /* freeze the search demo on one settled frame instead of flicker-looping */
    .demo-photo,.demo-loading i{animation:none !important; opacity:0 !important;}
    .demo-searchbar{animation:none !important; box-shadow:4px 4px 0 0 var(--ink) !important; border-color:var(--ink) !important;}
    .demo-chip{animation:none !important; opacity:1 !important; transform:scale(1) !important;}
    .demo-placeholder{animation:none !important; opacity:0 !important;}
    .demo-card{animation:none !important; opacity:1 !important; transform:none !important;}
  }

  @media (max-width:980px){
    nav.primary-nav{display:none;}
    .nav-actions .hotline{display:none;}
    .nav-actions .nav-login{display:none;}
    .menu-btn{display:flex;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{order:-1;max-width:420px;margin:0 auto;}
    .smart-grid{grid-template-columns:1fr;}
    .console{order:-1;max-width:460px;margin:0 auto;}
    .search-grid{grid-template-columns:1fr;}
    .demo-stage{order:-1;max-width:460px;margin:0 auto;height:320px;}
    .process-grid{grid-template-columns:repeat(2,1fr);row-gap:36px;}
    .process-grid::before{display:none;}
    .feat-grid{grid-template-columns:repeat(2,1fr);}
    .price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
    .testi-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .cta-box{flex-direction:column;text-align:center;padding:44px 28px;}
  }
  @media (max-width:640px){
    .hero{padding:52px 0 60px;}
    .pop{box-shadow:2px 2px 0 0 var(--ink);}
    .pop:hover{box-shadow:2px 2px 0 0 var(--ink);transform:none;}
    .device{box-shadow:6px 6px 0 0 var(--secondary);}
    .demo-stage{height:290px;box-shadow:5px 5px 0 0 var(--tertiary);}
    .demo-results{grid-template-columns:repeat(4,1fr);}
    .cta-box{box-shadow:4px 4px 0 0 var(--ink);}
    .foot-grid{grid-template-columns:1fr;gap:28px;}
    .feat-grid{grid-template-columns:1fr;}
    .hero-stats{gap:18px;}
    .hero-shape-circle{width:320px;height:320px;top:-80px;right:-100px;}
  }

  /* ---------- nav: active state + dropdown (multi-page site) ---------- */
  nav.primary-nav a{padding-bottom:8px;}
  nav.primary-nav a.active{color:var(--accent);}
  nav.primary-nav a.active::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:3px;border-radius:9999px;background:var(--accent);}
  .nav-item{position:relative;}
  .nav-item > a{display:flex;align-items:center;gap:5px;}
  .nav-item .caret{width:9px;height:9px;stroke-width:3;transition:transform .2s ease;}
  .nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg);}
  .nav-dropdown{
    position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);
    min-width:270px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-md);
    box-shadow:4px 4px 0 0 var(--ink);padding:10px;opacity:0;visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;z-index:60;
  }
  .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
  .nav-dropdown a{display:block;padding:11px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:600;}
  .nav-dropdown a:hover{background:var(--muted);color:var(--accent);}
  #mobileNav .sub-link{padding-left:16px;font-size:14.5px;font-weight:600;color:var(--muted-fg);}
  #mobileNav .mobile-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg);margin-top:6px;}

  /* ---------- inner-page hero / breadcrumb ---------- */
  .page-hero{padding:44px 0 52px;position:relative;overflow:hidden;background:var(--muted);border-bottom:var(--bw) solid var(--ink);}
  .page-hero .hero-shape-circle{width:320px;height:320px;top:-140px;right:-100px;}
  .page-hero .hero-shape-dots{width:200px;height:200px;left:-40px;bottom:-60px;}
  .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted-fg);margin-bottom:16px;position:relative;z-index:1;flex-wrap:wrap;}
  .breadcrumb a:hover{color:var(--accent);}
  .breadcrumb .sep{opacity:.5;}
  .breadcrumb .current{color:var(--fg);}
  .page-hero-inner{position:relative;z-index:1;max-width:760px;}
  .page-hero h1{font-size:clamp(28px,3.8vw,44px);margin-bottom:14px;}
  .page-hero p{color:var(--muted-fg);font-size:16px;max-width:620px;}

  /* ---------- accordion (policies / FAQ) ---------- */
  .acc-item{background:var(--card);border-radius:var(--r-lg);border:1.5px solid var(--border);margin-bottom:16px;overflow:hidden;}
  .acc-item[open]{border-color:var(--ink);box-shadow:4px 4px 0 0 var(--ink);}
  .acc-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;font-family:"Be Vietnam Pro",sans-serif;font-weight:700;font-size:16.5px;}
  .acc-item summary::-webkit-details-marker{display:none;}
  .acc-item summary .chevron{width:32px;height:32px;border-radius:9999px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s ease;background:var(--card);}
  .acc-item[open] summary .chevron{transform:rotate(180deg);background:var(--tertiary);}
  .acc-body{padding:0 24px 24px;color:var(--muted-fg);font-size:14.5px;}
  .acc-body p{margin-bottom:12px;}
  .acc-body li{display:flex;gap:10px;margin-bottom:10px;font-size:14.5px;align-items:flex-start;}
  .acc-body li .icon-badge{width:20px;height:20px;flex-shrink:0;background:var(--quaternary);border-width:1.5px;margin-top:2px;}
  .acc-body li .icon-badge svg{width:11px;height:11px;stroke-width:3.5;color:var(--ink);}

  /* ---------- fee / pricing formula ---------- */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);}
  .fee-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);overflow:hidden;box-shadow:6px 6px 0 0 var(--ink);}
  .fee-table th,.fee-table td{padding:15px 20px;text-align:left;font-size:14px;border-bottom:1.5px solid var(--border);}
  .fee-table th{background:var(--ink);color:#fff;font-family:"Be Vietnam Pro",sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
  .fee-table tr:last-child td{border-bottom:none;}
  .fee-table td b{font-family:"Be Vietnam Pro",sans-serif;}
  .fee-formula-card{background:var(--card);border-radius:var(--r-lg);padding:28px;border:1.5px solid var(--border);height:100%;}
  .fee-formula-card:hover{border-color:var(--ink);box-shadow:4px 4px 0 0 var(--ink);}
  .formula-box{background:var(--ink);color:#fff;border-radius:var(--r-md);padding:16px 20px;font-family:"Be Vietnam Pro",sans-serif;font-weight:700;font-size:14.5px;margin:14px 0;line-height:1.6;}
  .formula-box span{color:var(--tertiary);}
  .example-card{background:var(--muted);border-radius:var(--r-md);padding:18px 20px;font-size:14px;}
  .fee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

  /* ---------- news ---------- */
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .news-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--border);transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.34,1.56,.64,1), border-color .3s ease;}
  .news-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--ink);border-color:var(--ink);}
  .news-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--muted);position:relative;}
  .news-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .news-cat{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:9999px;}
  .news-body{padding:20px;}
  .news-meta{display:flex;gap:12px;font-size:12px;color:var(--muted-fg);font-weight:600;margin-bottom:10px;}
  .news-body h3{font-size:16.5px;margin-bottom:10px;line-height:1.35;}
  .news-body p{font-size:13.5px;color:var(--muted-fg);}
  .news-featured{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--card);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 0 var(--secondary);overflow:hidden;margin-bottom:56px;}
  .news-featured .news-thumb{aspect-ratio:auto;height:100%;min-height:280px;}
  .news-featured .news-body{padding:36px;display:flex;flex-direction:column;justify-content:center;}
  .news-featured h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:14px;}
  .news-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px;}
  .cat-pill{padding:9px 18px;border-radius:9999px;border:1.5px solid var(--border);font-weight:700;font-size:13.5px;background:var(--card);}
  .cat-pill.active{background:var(--ink);color:#fff;border-color:var(--ink);}
  .pagination{display:flex;justify-content:center;gap:8px;margin-top:52px;}
  .page-btn{width:42px;height:42px;border-radius:var(--r-sm);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:var(--card);}
  .page-btn.active{background:var(--accent);color:#fff;border-color:var(--ink);}
  .page-btn:hover{border-color:var(--ink);}

  /* ---------- article detail ---------- */
  .article-head{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1;}
  .article-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted-fg);font-weight:600;margin-top:16px;}
  .article-cover{max-width:920px;margin:-30px auto 48px;border-radius:var(--r-lg);border:var(--bw) solid var(--ink);overflow:hidden;box-shadow:8px 8px 0 0 var(--tertiary);position:relative;z-index:1;}
  .article-cover img{width:100%;display:block;}
  .article-wrap{max-width:760px;margin:0 auto;}
  .article-body{font-size:16px;line-height:1.85;color:var(--fg);}
  .article-body h2{font-size:23px;margin:36px 0 16px;}
  .article-body h3{font-size:18.5px;margin:26px 0 12px;}
  .article-body p{margin-bottom:20px;color:var(--fg);}
  .article-body ul{margin:0 0 20px;}
  .article-body li{display:flex;gap:10px;margin-bottom:12px;}
  .article-body li .icon-badge{width:20px;height:20px;background:var(--quaternary);border-width:1.5px;flex-shrink:0;margin-top:3px;}
  .article-body li .icon-badge svg{width:11px;height:11px;stroke-width:3.5;color:var(--ink);}
  .article-body blockquote{border-left:4px solid var(--accent);padding:2px 0 2px 20px;margin:28px 0;font-style:italic;color:var(--muted-fg);font-size:16px;}
  .article-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;}
  .article-tags a{padding:7px 14px;border-radius:9999px;border:1.5px solid var(--border);font-size:12.5px;font-weight:700;color:var(--muted-fg);}
  .article-share{display:flex;align-items:center;gap:12px;margin:36px 0;padding-top:28px;border-top:1.5px solid var(--border);}
  .article-share span{font-size:13px;font-weight:700;color:var(--muted-fg);margin-right:4px;}
  .share-btn{width:38px;height:38px;border-radius:9999px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;}
  .author-box{display:flex;gap:16px;align-items:center;background:var(--muted);border-radius:var(--r-lg);padding:22px;margin:36px 0;}
  .author-box .testi-avatar{width:52px;height:52px;font-size:18px;}
  .author-box h4{font-size:15px;margin-bottom:4px;}
  .author-box p{font-size:13px;color:var(--muted-fg);}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
  .info-row{display:flex;gap:16px;padding:18px 6px;border-bottom:1.5px dashed var(--border);}
  .info-row:last-child{border-bottom:none;}
  .info-row h4{font-size:15px;margin-bottom:4px;}
  .info-row p{font-size:13.5px;color:var(--muted-fg);}
  .warehouse-list{display:flex;flex-direction:column;gap:14px;margin-top:8px;}
  .warehouse-card{background:var(--muted);border-radius:var(--r-md);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;}
  .warehouse-card h5{font-size:14.5px;margin-bottom:4px;}
  .warehouse-card p{font-size:13px;color:var(--muted-fg);}
  .contact-form{background:var(--card);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);padding:34px;}
  .form-row{margin-bottom:18px;}
  .form-row label{display:block;font-weight:700;font-size:13.5px;margin-bottom:8px;}
  .form-row input,.form-row select,.form-row textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-family:inherit;font-size:14.5px;background:#fff;color:var(--fg);}
  .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);}
  .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .map-placeholder{aspect-ratio:16/7;border-radius:var(--r-lg);border:1.5px solid var(--border);background:var(--muted);display:flex;align-items:center;justify-content:center;color:var(--muted-fg);font-size:13.5px;font-weight:600;margin-top:28px;gap:8px;}

  /* ---------- about page ---------- */
  .timeline{display:flex;flex-direction:column;position:relative;max-width:720px;margin:0 auto;}
  .timeline::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2.5px;background:var(--border);}
  .timeline-item{display:flex;gap:20px;padding-bottom:36px;position:relative;}
  .timeline-item:last-child{padding-bottom:0;}
  .timeline-dot{width:48px;height:48px;border-radius:9999px;border:var(--bw) solid var(--ink);background:var(--card);display:flex;align-items:center;justify-content:center;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;flex-shrink:0;z-index:1;box-shadow:3px 3px 0 0 var(--ink);}
  .timeline-content h4{font-size:16px;margin-bottom:6px;}
  .timeline-content p{font-size:14px;color:var(--muted-fg);}
  .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .value-card{background:var(--card);border-radius:var(--r-lg);padding:24px 20px;text-align:center;}
  .value-card .icon-badge{margin:0 auto 14px;}
  .value-card h4{font-size:15px;margin-bottom:6px;}
  .value-card p{font-size:13px;color:var(--muted-fg);}
  .stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--ink);border-radius:var(--r-lg);padding:40px 32px;}
  .stat-band .stat{text-align:center;}
  .stat-band .stat b{display:block;font-family:"Be Vietnam Pro",sans-serif;font-size:32px;font-weight:800;color:#fff;}
  .stat-band .stat span{font-size:12.5px;color:#94A3B8;font-weight:600;}
  .warehouse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .wh-card{background:var(--card);border-radius:var(--r-lg);padding:26px;text-align:center;}
  .wh-card .icon-badge{margin:0 auto 16px;width:52px;height:52px;}

  /* ---------- generic section utilities ---------- */
  .section{padding:80px 0;}
  .section-alt{padding:80px 0;background:var(--muted);}
  .center{text-align:center;}
  .mt-56{margin-top:56px;}

  @media (max-width:980px){
    .fee-grid{grid-template-columns:1fr;}
    .news-grid{grid-template-columns:repeat(2,1fr);}
    .related-grid{grid-template-columns:repeat(3,1fr);}
    .news-featured{grid-template-columns:1fr;}
    .news-featured .news-thumb{min-height:220px;}
    .contact-grid{grid-template-columns:1fr;}
    .value-grid{grid-template-columns:repeat(2,1fr);}
    .stat-band{grid-template-columns:repeat(2,1fr);row-gap:28px;}
    .warehouse-grid{grid-template-columns:1fr;}
    .form-grid-2{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .news-grid{grid-template-columns:1fr;}
    .related-grid{grid-template-columns:1fr;}
    .value-grid{grid-template-columns:1fr;}
    .stat-band{grid-template-columns:1fr;}
    .page-hero{padding:36px 0 40px;}
  }

  /* ---------- platform pill logos ---------- */
  .platform-pill .logo{width:22px;height:22px;border-radius:7px;object-fit:cover;flex:none;display:block;}

  /* ---------- dashboard showcase (app grid mockup) ---------- */
  .dashboard-showcase{padding:90px 0;background:var(--muted);position:relative;overflow:hidden;}
  .dash-mock{
    display:grid;grid-template-columns:200px 1fr;background:#fff;border-radius:var(--r-lg);
    border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 0 var(--secondary);overflow:hidden;
  }
  .dash-sidebar{background:var(--ink);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:4px;}
  .dash-sidebar .dash-brand{display:flex;align-items:center;gap:8px;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:14px;margin-bottom:18px;padding:0 8px;}
  .dash-sidebar .dash-brand .dot{width:10px;height:10px;border-radius:9999px;background:var(--tertiary);}
  .dash-nav-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:#CBD5E1;}
  .dash-nav-item svg{width:15px;height:15px;flex-shrink:0;}
  .dash-nav-item.active{background:var(--accent);color:#fff;}
  .dash-main{padding:26px 28px;}
  .dash-topbar{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;font-weight:700;color:var(--muted-fg);padding-bottom:18px;margin-bottom:20px;border-bottom:1.5px dashed var(--border);}
  .dash-topbar b{color:var(--fg);font-family:"Be Vietnam Pro",sans-serif;}
  .dash-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
  .dash-tile{
    background:var(--muted);border:1.5px solid var(--border);border-radius:var(--r-md);
    padding:16px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
    animation: dashPulse 4.5s ease-in-out infinite;
  }
  .dash-tile .icon-badge{width:34px;height:34px;border-width:1.5px;}
  .dash-tile span{font-size:11px;font-weight:700;color:var(--fg);line-height:1.3;}
  .dash-tile:nth-child(1){animation-delay:0s;}
  .dash-tile:nth-child(2){animation-delay:.3s;}
  .dash-tile:nth-child(3){animation-delay:.6s;}
  .dash-tile:nth-child(4){animation-delay:.9s;}
  .dash-tile:nth-child(5){animation-delay:1.2s;}
  .dash-tile:nth-child(6){animation-delay:1.5s;}
  .dash-tile:nth-child(7){animation-delay:1.8s;}
  .dash-tile:nth-child(8){animation-delay:2.1s;}
  .dash-tile:nth-child(9){animation-delay:2.4s;}
  .dash-tile:nth-child(10){animation-delay:2.7s;}
  @keyframes dashPulse{
    0%,88%,100%{transform:translateY(0) scale(1);box-shadow:none;border-color:var(--border);}
    92%{transform:translateY(-4px) scale(1.04);box-shadow:3px 3px 0 0 var(--ink);border-color:var(--ink);}
  }

  /* ---------- tracking + fee-calculator showcase ---------- */
  .tracking-showcase{padding:90px 0;}
  .tracking-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;}
  .tracking-card,.calc-card{background:#fff;border-radius:var(--r-lg);border:var(--bw) solid var(--ink);padding:26px;}
  .tracking-card{box-shadow:8px 8px 0 0 var(--tertiary);}
  .calc-card{box-shadow:8px 8px 0 0 var(--quaternary);display:flex;flex-direction:column;}
  .tracking-head,.calc-head{display:flex;align-items:center;gap:10px;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:15.5px;margin-bottom:18px;}
  .tracking-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;align-items:center;padding:12px 4px;border-bottom:1.5px dashed var(--border);font-size:13px;}
  .tracking-row:last-child{border-bottom:none;}
  .tracking-row .t-code{font-weight:700;font-family:"Be Vietnam Pro",sans-serif;}
  .tracking-row .t-sub{display:block;font-size:11.5px;color:var(--muted-fg);font-weight:500;}
  .t-item{display:flex;align-items:center;gap:10px;min-width:0;}
  .t-thumb{width:36px;height:36px;flex:none;object-fit:cover;border-radius:var(--r-sm);border:var(--bw) solid var(--ink);box-shadow:2px 2px 0 0 var(--ink);background:#fff;}
  .status-cycle{position:relative;height:26px;display:flex;align-items:center;}
  .status-cycle .st{
    position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;
    font-size:11px;font-weight:800;padding:5px 11px;border-radius:9999px;border:1.5px solid var(--ink);
    opacity:0;animation: statusCycle 8s ease-in-out infinite;
  }
  .status-cycle .st1{background:#FDE68A;}
  .status-cycle .st2{background:var(--tertiary);}
  .status-cycle .st3{background:var(--quaternary);}
  .status-cycle .st4{background:#DDD6FE;}
  @keyframes statusCycle{
    0%,2%{opacity:0;}
    4%,21%{opacity:1;}
    23%,100%{opacity:0;}
  }
  .status-cycle .st2{animation-name: statusCycle2;}
  .status-cycle .st3{animation-name: statusCycle3;}
  .status-cycle .st4{animation-name: statusCycle4;}
  @keyframes statusCycle2{
    0%,23%{opacity:0;} 25%,46%{opacity:1;} 48%,100%{opacity:0;}
  }
  @keyframes statusCycle3{
    0%,48%{opacity:0;} 50%,71%{opacity:1;} 73%,100%{opacity:0;}
  }
  @keyframes statusCycle4{
    0%,73%{opacity:0;} 75%,96%{opacity:1;} 98%,100%{opacity:0;}
  }
  .calc-field{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1.5px dashed var(--border);font-size:13.5px;}
  .calc-field:last-of-type{border-bottom:none;}
  .calc-field span:first-child{color:var(--muted-fg);font-weight:600;}
  .calc-field span:last-child{font-weight:700;font-family:"Be Vietnam Pro",sans-serif;}
  .calc-result{
    margin-top:auto;padding-top:20px;margin-top:16px;border-top:2px solid var(--ink);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .calc-result .label{font-size:12.5px;font-weight:700;color:var(--muted-fg);}
  .calc-result .countup{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:24px;color:var(--accent);}

  @media (max-width:980px){
    .dash-mock{grid-template-columns:1fr;}
    .dash-sidebar{flex-direction:row;flex-wrap:wrap;justify-content:center;}
    .dash-grid{grid-template-columns:repeat(3,1fr);}
    .tracking-grid{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .dash-grid{grid-template-columns:repeat(2,1fr);}
    .tracking-row{grid-template-columns:1.3fr 1fr;font-size:12px;}
    .tracking-row .t-fee{display:none;}
    .t-thumb{width:30px;height:30px;}
  }

  /* ---------- process timeline (detailed animated steps) ---------- */
  .process-timeline{display:flex;flex-direction:column;margin-top:52px;}
  .process-step{display:grid;grid-template-columns:64px 1fr 1.05fr;gap:28px;padding:34px 0;}
  .process-step:not(:last-child){border-bottom:1.5px dashed var(--border);}
  .process-num-col{display:flex;justify-content:center;}
  .process-num{
    width:60px;height:60px;border-radius:9999px;border:var(--bw) solid var(--ink);background:#fff;
    display:flex;align-items:center;justify-content:center;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;
    font-size:20px;box-shadow:3px 3px 0 0 var(--ink);flex:none;
  }
  .process-info{padding-top:6px;}
  .process-info h4{font-size:19px;margin-bottom:8px;}
  .process-info p{font-size:14.5px;color:var(--muted-fg);}
  .process-visual{
    background:var(--card);border-radius:var(--r-lg);border:var(--bw) solid var(--ink);
    padding:20px 22px;box-shadow:6px 6px 0 0 var(--ink);
  }
  .process-step:nth-child(1) .process-visual{box-shadow:6px 6px 0 0 var(--secondary);}
  .process-step:nth-child(2) .process-visual{box-shadow:6px 6px 0 0 var(--tertiary);}
  .process-step:nth-child(3) .process-visual{box-shadow:6px 6px 0 0 var(--quaternary);}
  .process-step:nth-child(4) .process-visual{box-shadow:6px 6px 0 0 var(--accent);}

  /* step 1 — paste link, browser bar with cycling URLs */
  .pv-browser{display:flex;align-items:center;gap:6px;background:var(--muted);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:16px;}
  .pv-dot{width:8px;height:8px;border-radius:9999px;flex:none;}
  .pv-url{position:relative;height:16px;flex:1;overflow:hidden;margin-left:6px;}
  .pv-url .pu{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;font-weight:600;color:var(--muted-fg);opacity:0;animation:pvUrlCycle 6s ease-in-out infinite;}
  .pv-url .p2{animation-name:pvUrlCycle2;}
  .pv-url .p3{animation-name:pvUrlCycle3;}
  @keyframes pvUrlCycle{0%,2%{opacity:0;transform:translateY(4px);}5%,29%{opacity:1;transform:translateY(0);}32%,100%{opacity:0;transform:translateY(-4px);}}
  @keyframes pvUrlCycle2{0%,32%{opacity:0;transform:translateY(4px);}35%,62%{opacity:1;transform:translateY(0);}65%,100%{opacity:0;transform:translateY(-4px);}}
  @keyframes pvUrlCycle3{0%,65%{opacity:0;transform:translateY(4px);}68%,95%{opacity:1;transform:translateY(0);}98%,100%{opacity:0;transform:translateY(-4px);}}
  .pv-link-row{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;margin-bottom:18px;}
  .pv-link-row .icon-badge{width:30px;height:30px;border-width:1.5px;}
  .pv-btn{display:inline-flex;font-size:13px;padding:9px 18px;}

  /* step 2 — auto quote card (reuses .calc-field / .calc-result) */
  .pv-quote-head{display:flex;align-items:center;gap:10px;font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:14.5px;margin-bottom:6px;}
  .pv-quote-head .icon-badge{width:30px;height:30px;border-width:1.5px;}

  /* step 3 — deposit & confirm, cycling active row */
  .pv-steps{display:flex;flex-direction:column;gap:8px;}
  .pv-step-item{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;padding:12px 14px;border-radius:var(--r-sm);color:var(--muted-fg);background:transparent;}
  .pv-step-dot{width:9px;height:9px;border-radius:9999px;background:var(--ink);flex:none;}
  .pv-step-item.s1{animation:pvStep1 6s ease-in-out infinite;}
  .pv-step-item.s2{animation:pvStep2 6s ease-in-out infinite;}
  .pv-step-item.s3{animation:pvStep3 6s ease-in-out infinite;}
  @keyframes pvStep1{0%,2%{background:transparent;color:var(--muted-fg);}5%,29%{background:var(--secondary);color:var(--ink);}32%,100%{background:transparent;color:var(--muted-fg);}}
  @keyframes pvStep2{0%,32%{background:transparent;color:var(--muted-fg);}35%,62%{background:var(--tertiary);color:var(--ink);}65%,100%{background:transparent;color:var(--muted-fg);}}
  @keyframes pvStep3{0%,65%{background:transparent;color:var(--muted-fg);}68%,95%{background:var(--quaternary);color:var(--ink);}98%,100%{background:transparent;color:var(--muted-fg);}}

  /* step 4 — tracking mini path, dot travels between nodes */
  .pv-track{padding:6px 4px 0;}
  .pv-track-line{position:relative;height:3px;background:var(--border);border-radius:9999px;margin:0 6px 22px;}
  .pv-track-dot{
    position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:9999px;
    background:var(--accent);border:2px solid var(--ink);transform:translate(-50%,-50%);
    animation:pvTrackMove 6s ease-in-out infinite;
  }
  @keyframes pvTrackMove{0%,2%{left:0%;}25%{left:33.33%;}50%{left:66.66%;}75%,100%{left:100%;}}
  .pv-track-nodes{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted-fg);}
  .pv-track-nodes span{flex:1;animation:pvNode1 6s ease-in-out infinite;}
  .pv-track-nodes span:first-child{text-align:left;}
  .pv-track-nodes span:last-child{text-align:right;}
  .pv-track-nodes span:nth-child(2){animation-name:pvNode2;}
  .pv-track-nodes span:nth-child(3){animation-name:pvNode3;}
  .pv-track-nodes span:nth-child(4){animation-name:pvNode4;}
  @keyframes pvNode1{0%,2%{color:var(--ink);}20%,100%{color:var(--muted-fg);}}
  @keyframes pvNode2{0%,20%{color:var(--muted-fg);}22%,45%{color:var(--ink);}47%,100%{color:var(--muted-fg);}}
  @keyframes pvNode3{0%,47%{color:var(--muted-fg);}49%,72%{color:var(--ink);}74%,100%{color:var(--muted-fg);}}
  @keyframes pvNode4{0%,74%{color:var(--muted-fg);}76%,100%{color:var(--ink);}}

  @media (max-width:900px){
    .process-step{grid-template-columns:48px 1fr;row-gap:16px;}
    .process-visual{grid-column:1/-1;}
    .process-num{width:48px;height:48px;font-size:16px;}
  }

  /* ---------- platform landing pages (dat-hang-*) ---------- */
  .platform-badge{
    display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border-radius:var(--r-sm);border:var(--bw) solid var(--ink);background:#fff;overflow:hidden;flex:none;
    box-shadow:3px 3px 0 0 var(--ink);
  }
  .platform-badge img{width:100%;height:100%;object-fit:cover;}
  .page-hero .kicker-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .mini-search{
    display:flex;align-items:center;gap:12px;background:var(--card);border:var(--bw) solid var(--ink);
    border-radius:9999px;padding:14px 20px;box-shadow:5px 5px 0 0 var(--ink);
  }
  .mini-search .icon-badge{width:32px;height:32px;flex:none;}
  .mini-search-text{position:relative;height:20px;flex:1;overflow:hidden;}
  .mini-search-text .sq{
    position:absolute;left:0;top:0;white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--fg);
    opacity:0;animation: pvUrlCycle 6s ease-in-out infinite;
  }
  .mini-search-text .sq2{animation-name: pvUrlCycle2;}
  .mini-search-text .sq3{animation-name: pvUrlCycle3;}
  .demo-stack{display:flex;flex-direction:column;gap:18px;}
  .compare-table th:nth-child(4),.compare-table td:nth-child(4){background:rgba(124,58,237,.07);}
  .compare-table th:nth-child(4){background:var(--accent);}

  /* ---------- real product screenshot showcase (dashboard-showcase) ---------- */
  .shot-tabs{margin-top:36px;}
  .shot-radio{position:absolute;opacity:0;pointer-events:none;}
  .shot-tabbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px;}
  .shot-tab-btn{
    display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:9999px;
    border:var(--bw) solid var(--ink);background:#fff;font-weight:800;font-size:13.5px;cursor:pointer;
    box-shadow:3px 3px 0 0 var(--ink);transition:transform .15s ease,background .15s ease,color .15s ease;
    font-family:"Be Vietnam Pro",sans-serif;
  }
  .shot-tab-btn svg{width:16px;height:16px;flex:none;}
  .shot-tab-btn:hover{transform:translate(-1px,-2px);}
  .shot-frame{
    border:var(--bw) solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:#fff;
    box-shadow:8px 8px 0 0 var(--ink);max-width:940px;margin:0 auto;
  }
  .shot-browser-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;background:var(--ink);}
  .shot-dot{width:10px;height:10px;border-radius:9999px;flex:none;}
  .shot-url{
    margin-left:10px;background:rgba(255,255,255,.14);color:#E2E8F0;font-size:12px;font-weight:600;
    padding:6px 16px;border-radius:9999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
  }
  .shot-panel{display:none;}
  .shot-panel img{display:block;width:100%;height:auto;}
  .shot-caption{
    padding:16px 22px;font-size:13.5px;line-height:1.6;color:var(--muted-fg);background:var(--muted);
    border-top:1.5px dashed var(--border);
  }
  .shot-caption b{color:var(--fg);font-family:"Be Vietnam Pro",sans-serif;}
  #shotHome:checked ~ .shot-frame .shot-panel-home{display:block;}
  #shotSearch:checked ~ .shot-frame .shot-panel-search{display:block;}
  #shotCart:checked ~ .shot-frame .shot-panel-cart{display:block;}
  #shotHome:checked ~ .shot-tabbar .shot-tab-btn:nth-child(1),
  #shotSearch:checked ~ .shot-tabbar .shot-tab-btn:nth-child(2),
  #shotCart:checked ~ .shot-tabbar .shot-tab-btn:nth-child(3){
    background:var(--accent);color:#fff;
  }
  @media (max-width:640px){
    .shot-tab-btn{padding:9px 16px;font-size:12.5px;}
    .shot-caption{padding:14px 18px;font-size:13px;}
  }

  /* ---------- Contact Form 7 integration ---------- */
  .wpcf7-form-control-wrap{display:block;width:100%;}
  .wpcf7-form .wpcf7-submit{width:100%;justify-content:center;margin-top:6px;}
  .wpcf7-form .wpcf7-submit .wpcf7-spinner{display:none;}
  .wpcf7-not-valid-tip{font-size:12.5px;color:#E11D48;margin-top:6px;font-weight:600;}
  .wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border-radius:var(--r-sm);border:var(--bw) solid var(--ink);font-weight:600;font-size:13.5px;}
  .wpcf7 form.sent .wpcf7-response-output{background:var(--quaternary);color:var(--ink);}
  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.failed .wpcf7-response-output,
  .wpcf7 form.aborted .wpcf7-response-output{background:#FEE2E2;color:#B91C1C;}
  .wpcf7 form.spam .wpcf7-response-output{background:var(--tertiary);color:var(--ink);}