/* =========================================================
 * main.css — clean-room replica styles
 * ========================================================= */

/* -------- Reset -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Removed scroll-snap — felt sticky on intermediate viewports */
}
body{
  font-family:
    "Inter","PingFang SC","Hiragino Sans GB","HarmonyOS Sans SC","Source Han Sans SC",
    -apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",
    "Microsoft YaHei","Noto Sans CJK SC","MiSans",
    "Helvetica Neue","Helvetica",Arial,sans-serif;
  font-weight:400;
  color:var(--c-dark);
  line-height:1.6;
  background:#fff;
  overflow-x:hidden;
  letter-spacing:0;
  font-feature-settings:"palt" 1;
}
/* Latin only letter-spacing helper */
.ls-tight{letter-spacing:-.015em}

/* ============ Ink-wash title effect ============
 * Gives big Chinese headings a subtle paper/ink texture by
 * masking the base color with a grain image, then underlaying
 * a slightly lighter duplicate for depth.
 *
 * Usage: wrap heading content in .ink so the pseudo-elements
 * can sit behind it.
 */
.ink{
  position:relative;
  display:inline-block;
  color:var(--c-dark);
}
.ink::before{
  content:attr(data-text);
  position:absolute;inset:0;
  color:rgba(3,118,255,.22);
  -webkit-mask-image:url('../image/home/b6.png.webp');
          mask-image:url('../image/home/b6.png.webp');
  -webkit-mask-size:220% 220%;mask-size:220% 220%;
  -webkit-mask-position:20% 30%;mask-position:20% 30%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  pointer-events:none;
  transform:translate(2px,2px);
}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}
input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-weight:inherit;line-height:1.2}

/* -------- Variables -------- */
:root{
  /* Flinco brand palette — sourced from official PPTX theme1.xml */
  --c-primary:#2667FF;           /* accent1 — electric royal blue */
  --c-primary-dark:#133B99;      /* accent6 — deep navy */
  --c-primary-light:#E8F0FF;
  --c-cyan:#03B6FC;              /* accent2 — data-viz cyan */
  --c-purple:#9B64FA;            /* accent4 — gradient partner */
  --c-teal:#04C2AC;              /* accent5 — success/SLA */
  --c-amber:#FFAE00;             /* warning/stat callout */
  --c-dark:#0A0F2C;
  --c-gray-900:#1A1D3A;
  --c-gray-700:#4A5072;
  --c-gray-500:#9096B5;
  --c-gray-300:#D8DCE8;
  --c-gray-100:#F5F7FA;
  --c-white:#FFFFFF;

  --nav-h:72px;
  --container:1440px;
  --px:80px;
  --r-card:20px;
  --r-pill:100px;

  --ease:cubic-bezier(.4,0,.2,1);
  --d-fast:.2s;
  --d-base:.35s;
  --d-slow:.6s;
}

/* -------- Utilities -------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--px)}
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease) var(--delay,0s),transform .8s var(--ease) var(--delay,0s)}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* =========================================================
 * HEADER
 * ========================================================= */
/* Sticky header overlap fix: offset in-page anchor scrolls by header height */
main section[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

#site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--nav-h);
  background:transparent;
  transition:background var(--d-base) var(--ease),backdrop-filter var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease);
}
#site-header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 24px rgba(0,0,0,.05);
}
.header-inner{
  max-width:var(--container);
  height:100%;
  margin:0 auto;
  padding:0 var(--px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:40px;
}
.header-left{display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;height:32px}
.logo img{height:100%;width:auto}
.logo .logo-dark{display:none}
#site-header.scrolled .logo-white{display:none}
#site-header.scrolled .logo-dark{display:block}
/* Flinco inline SVG logo — enlarged to match tec-do's prominent brand mark */
.flinco-logo{color:#0a1a3a;transition:color .2s ease}
.flinco-logo-svg{height:40px;width:auto;display:block}
#site-header.scrolled .flinco-logo{color:#0a1a3a}
.logo{height:auto}

.main-nav{display:flex;justify-content:center;min-width:0}
.main-nav>ul{display:flex;gap:32px;flex-wrap:nowrap}
.main-nav>ul>li{flex-shrink:0}
.main-nav a{
  color:var(--c-dark);
  font-weight:500;font-size:15px;
  position:relative;
  padding:8px 0;
  white-space:nowrap;
  transition:color var(--d-base);
}
#site-header.scrolled .main-nav a{color:var(--c-dark)}
.main-nav a.active::after,
.main-nav a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--c-primary);
}
.has-dropdown{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(8px);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(10,15,44,.06);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(10,15,44,.04),0 16px 40px rgba(10,15,44,.08);
  padding:8px 0;min-width:160px;
  opacity:0;visibility:hidden;
  transition:all var(--d-base);
  z-index:10;
}
.has-dropdown:hover .dropdown,
.has-dropdown.open > .dropdown{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.lang-switch.open .lang-dropdown{
  opacity:1;visibility:visible;
  transform:translateY(0);
}
.dropdown li a{
  display:block;padding:10px 22px;
  color:var(--c-dark)!important;
  white-space:nowrap;font-size:14px;font-weight:500;
}
.dropdown li a::after{display:none!important}
.dropdown li a:hover{background:var(--c-primary-light);color:var(--c-primary)!important}

/* Language switch */
.lang-switch{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:rgba(10,15,44,.04);
  border:1px solid rgba(10,15,44,.08);
  color:var(--c-dark);font-size:13px;font-weight:500;
  transition:background var(--d-base);
}
.lang-btn:hover{background:rgba(10,15,44,.08)}
#site-header.scrolled .lang-btn{
  color:var(--c-dark);
  background:rgba(10,15,44,.04);
  border-color:rgba(10,15,44,.08);
}
.lang-dropdown{min-width:120px;left:0;transform:translateY(8px)}
.lang-switch:hover .lang-dropdown{transform:translateY(0)}

/* About menu arrow */
.main-nav .arrow{
  font-size:10px;margin-left:2px;
  display:inline-block;
  transition:transform var(--d-base);
}
.main-nav .has-dropdown:hover .arrow{transform:rotate(180deg)}

.header-right{display:flex;align-items:center;gap:12px}
.sub-brand{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(10,15,44,.05);
  border:1px solid rgba(10,15,44,.1);
  font-size:13px;font-weight:500;color:var(--c-dark);
  transition:background var(--d-base),border-color var(--d-base);
}
.sub-brand img{width:16px;height:16px}
.sub-brand:hover{background:rgba(10,15,44,.1)}
#site-header.scrolled .sub-brand{
  background:rgba(10,15,44,.05);
  border-color:rgba(10,15,44,.1);
  color:var(--c-dark);
}
#site-header.scrolled .sub-brand:hover{background:rgba(10,15,44,.1)}

.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-primary);color:#fff!important;
  padding:10px 22px;border-radius:var(--r-pill);
  font-weight:500;font-size:14px;
  transition:transform var(--d-base),box-shadow var(--d-base);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(3,118,255,.35)}
.btn-primary::after{display:none!important}

.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.menu-toggle span{width:22px;height:2px;background:#fff;border-radius:2px}
#site-header.scrolled .menu-toggle span{background:var(--c-dark)}

/* =========================================================
 * BANNER
 * ========================================================= */
.banner{
  position:relative;width:100vw;height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg,#F5F8FF 0%,#EAF1FF 40%,#E3ECFF 100%);
}
.banner-stage{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  background:
    radial-gradient(1100px 700px at 78% 28%, rgba(108,179,255,.38), transparent 62%),
    radial-gradient(900px 600px at 20% 80%, rgba(130,215,255,.22), transparent 60%),
    linear-gradient(180deg, #f1f7ff 0%, #e3efff 45%, #d8e8ff 100%);
}
.banner-poster,
.banner-loop,
.banner-enter{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
}
.banner-poster{background-size:cover;background-position:center}
.banner-loop,
.banner-enter{display:none!important}
/* Flinco abstract poster — always transparent; gradient comes from .banner-stage */
.banner-poster{opacity:1!important;background:transparent;pointer-events:none}

/* Subtle color accent per slogan — shifts the right-side light orb (all blue-cyan now) */
.banner[data-active="0"] .banner-stage{
  background:
    radial-gradient(1100px 700px at 78% 28%, rgba(108,179,255,.38), transparent 62%),
    radial-gradient(900px 600px at 20% 80%, rgba(130,215,255,.22), transparent 60%),
    linear-gradient(180deg, #f1f7ff 0%, #e3efff 45%, #d8e8ff 100%);
}
.banner[data-active="1"] .banner-stage{
  background:
    radial-gradient(1100px 700px at 72% 32%, rgba(38,103,255,.30), transparent 62%),
    radial-gradient(900px 600px at 25% 78%, rgba(108,179,255,.25), transparent 60%),
    linear-gradient(180deg, #eff5ff 0%, #e0ecff 45%, #d2e4ff 100%);
}
.banner[data-active="2"] .banner-stage{
  background:
    radial-gradient(1100px 700px at 80% 30%, rgba(3,182,252,.30), transparent 60%),
    radial-gradient(900px 600px at 18% 82%, rgba(120,220,255,.28), transparent 62%),
    linear-gradient(180deg, #f1f9ff 0%, #e4f1ff 45%, #dbeaff 100%);
}
.banner[data-active="3"] .banner-stage{
  background:
    radial-gradient(1100px 700px at 78% 28%, rgba(38,103,255,.32), transparent 62%),
    radial-gradient(900px 600px at 20% 80%, rgba(3,182,252,.22), transparent 60%),
    linear-gradient(180deg, #f1f7ff 0%, #e3efff 45%, #d6e6ff 100%);
}

/* Decorative geometry: subtle backdrop for hero collage */
.banner-stage::before{
  content:"";position:absolute;z-index:2;
  right:8%;top:42%;transform:translateY(-50%);
  width:520px;height:520px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 60% 60%, rgba(110,160,255,.35), rgba(110,160,255,0) 60%);
  filter:blur(40px);
  opacity:.8;
  animation:flincoFloat 14s ease-in-out infinite alternate;
  pointer-events:none;
}

/* ============ Giant background wordmark ============ */
.banner-wordmark{
  position:absolute;z-index:1;
  right:-6%;top:14%;
  font-family:"Inter","Helvetica Neue",sans-serif;
  font-size:clamp(14rem,26vw,28rem);
  font-weight:800;
  line-height:.85;letter-spacing:-0.05em;
  background:linear-gradient(180deg,rgba(38,103,255,.13),rgba(38,103,255,.04) 70%,transparent);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;user-select:none;
  white-space:nowrap;
}

/* ============ Hero collage — glassmorphism "device-like" stack ============ */
.hero-collage{
  position:absolute;z-index:3;
  right:3%;top:50%;transform:translateY(-50%);
  width:min(720px,52vw);height:min(620px,76vh);
  pointer-events:none;
}
.hero-collage > *{
  position:absolute;
  border-radius:22px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(24px) saturate(1.15);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 30px 80px rgba(30,50,120,.22),
    0 8px 24px rgba(30,50,120,.10);
}

/* ---- Top navigation capsule — browser-tab style ---- */
.glass-capsule{
  top:0;left:0;width:64%;
  height:52px;border-radius:999px;
  display:flex;align-items:center;gap:10px;padding:4px 6px 4px 16px;
}
.glass-capsule .gc-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.glass-capsule .gc-dot{
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#4aa3ff,#0074ff);
  box-shadow:0 3px 10px rgba(0,116,255,.4),inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-capsule .gc-brand-text{
  font-size:13px;font-weight:700;color:#0a1a3a;letter-spacing:.2px;
}
.glass-capsule .gc-url{
  flex:1;height:34px;border-radius:999px;
  background:rgba(10,20,50,.05);
  display:flex;align-items:center;gap:8px;padding:0 14px;
  font-size:11px;color:#5b6a8a;min-width:0;
}
.glass-capsule .gc-lock{width:13px;height:13px;color:#5b6a8a;flex-shrink:0}
.glass-capsule .gc-url-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.glass-capsule .gc-url-badge{
  font-size:10px;font-weight:600;color:#0cc77f;
  background:rgba(12,199,127,.12);
  padding:2px 8px;border-radius:999px;flex-shrink:0;
}
.glass-capsule .gc-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.glass-capsule .gc-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#ffc966,#ff8a3d);
  box-shadow:0 2px 8px rgba(255,138,61,.35),inset 0 1px 0 rgba(255,255,255,.5);
}
.glass-capsule .gc-tool-icon{
  width:28px;height:28px;border-radius:50%;
  background:rgba(10,20,50,.06);
  display:flex;align-items:center;justify-content:center;color:#5b6a8a;
}
.glass-capsule .gc-tool-icon svg{width:14px;height:14px}

/* ---- iPad-style device mockup — the centerpiece ---- */
.device-ipad{
  left:0;top:8%;
  width:72%;height:84%;
  padding:0;
  display:flex;flex-direction:column;
  border-radius:48px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(240,246,255,.82));
  backdrop-filter:blur(28px) saturate(1.2);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 0 0 1px rgba(38,103,255,.08) inset,
    0 40px 100px rgba(30,50,120,.28),
    0 12px 30px rgba(30,50,120,.14);
  overflow:hidden;
}
/* iPad top status bar — thin, pill-shaped, inside the bezel */
.ipad-statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 22px 8px;
  font-size:11px;color:#3a4560;font-weight:600;
  border-bottom:1px solid rgba(10,20,50,.05);
  background:rgba(255,255,255,.55);
}
.sb-time{letter-spacing:.3px}
.sb-brand{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 14px;border-radius:999px;
  background:rgba(10,20,50,.05);
  font-size:10.5px;font-weight:500;color:#5b6a8a;
}
.sb-dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#4aa3ff,var(--c-primary));
  box-shadow:0 0 0 2px rgba(38,103,255,.18);
}
.sb-signal{display:inline-flex;align-items:flex-end;gap:2px}
.sb-signal i{width:3px;background:#3a4560;border-radius:1px}
.sb-signal i:nth-child(1){height:4px}
.sb-signal i:nth-child(2){height:7px}
.sb-signal i:nth-child(3){height:10px}
.sb-signal i:nth-child(4){height:13px}
/* Actual dashboard content lives inside .ipad-screen */
.ipad-screen{
  flex:1;padding:18px 22px 16px;
  display:flex;flex-direction:column;gap:11px;
  overflow:hidden;
}
.ipad-home{
  height:5px;width:110px;
  margin:0 auto 10px;
  background:rgba(10,20,50,.35);
  border-radius:3px;
}
/* Keep original .glass-main class for any legacy refs — alias */
.glass-main{position:absolute}
.gm-head{display:flex;justify-content:space-between;align-items:center}
.gm-title{font-size:14px;font-weight:600;color:#0a1a3a;letter-spacing:.2px}
.gm-dots{display:flex;gap:5px}
.gm-dots i{width:7px;height:7px;border-radius:50%;background:rgba(10,26,58,.15);display:block}
.gm-dots i:first-child{background:#ff6b6b}
.gm-dots i:nth-child(2){background:#ffc857}
.gm-dots i:last-child{background:#3dd598}

.gm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gm-stat{
  background:rgba(0,116,255,.06);
  border:1px solid rgba(0,116,255,.10);
  border-radius:12px;padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;
}
.gm-stat-label{font-size:11px;color:#5b6a8a;font-weight:500}
.gm-stat-num{font-size:18px;font-weight:700;color:#0a1a3a;letter-spacing:-0.5px;line-height:1}
.gm-stat-unit{font-size:11px;font-weight:500;color:#5b6a8a;font-style:normal;margin-left:2px}
.gm-trend{font-size:10px;font-weight:600;font-style:normal;margin-left:4px;padding:1px 6px;border-radius:4px;color:#0cc77f;background:rgba(12,199,127,.12)}
.gm-trend.up::before{content:"↑"}

.gm-chart{
  background:#fff;
  border:1px solid rgba(10,26,58,.06);
  border-radius:12px;padding:10px 12px 6px;
}
.gm-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.gm-chart-title{font-size:11px;color:#5b6a8a;font-weight:500}
.gm-chart-tag{font-size:10px;font-weight:600;color:#0074ff;background:rgba(0,116,255,.08);padding:2px 8px;border-radius:999px}
.gm-chart-svg{width:100%;height:54px;display:block}

.gm-alerts{display:flex;flex-direction:column;gap:6px}
.gm-alert{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:#3a4560;font-weight:500;
  padding:6px 10px;border-radius:8px;
  background:rgba(10,26,58,.03);
}
.gm-alert-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.gm-alert-dot--r{background:#ff4d4f;box-shadow:0 0 0 3px rgba(255,77,79,.15)}
.gm-alert-dot--y{background:#ffc857;box-shadow:0 0 0 3px rgba(255,200,87,.18)}

/* Panel footer tag strip — chips now live INSIDE main panel */
.gm-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  padding-top:10px;
  border-top:1px solid rgba(10,20,50,.06);
  margin-top:auto;
}
.gm-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,116,255,.07);
  border:1px solid rgba(0,116,255,.12);
  font-size:11px;font-weight:600;color:#0a1a3a;
  letter-spacing:.2px;
}
.gm-tag svg{width:12px;height:12px;flex-shrink:0}
.gm-tag b{font-weight:700;color:#0074ff;padding-left:6px;margin-left:4px;border-left:1px solid rgba(0,116,255,.25)}

/* ---- Side metric card — sits to the right of main panel, below orb ---- */
.glass-side{
  right:-2%;top:52%;
  width:34%;max-width:220px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
  z-index:4;
}
.gs-chip{
  align-self:flex-start;
  font-size:11px;font-weight:600;letter-spacing:.4px;
  padding:3px 10px;border-radius:999px;
  color:#0074ff;background:rgba(0,116,255,.10);
}
.gs-metric{display:flex;flex-direction:column;gap:2px}
.gs-label{font-size:11px;color:#5b6a8a;font-weight:500}
.gs-value{font-size:26px;font-weight:700;color:#0a1a3a;line-height:1;letter-spacing:-0.5px}
.gs-value em{font-size:13px;font-weight:500;color:#0074ff;font-style:normal;margin-left:3px}
.gs-spark{width:100%;height:28px}

/* ---- Flinco AI Core — orb bursting from iPad top-right (tec-do signature) ---- */
.glass-orb{
  position:absolute;
  right:6%;top:-8%;
  width:240px;height:240px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.98), rgba(255,255,255,0) 44%),
    radial-gradient(circle at 70% 70%, rgba(168,208,255,.35), transparent 45%),
    radial-gradient(circle at 50% 50%, #cfe5ff 0%, #6cb3ff 38%, #2667FF 88%);
  box-shadow:
    0 0 0 12px rgba(255,255,255,.55),
    0 0 0 1px rgba(255,255,255,.9) inset,
    0 60px 140px rgba(38,103,255,.55),
    0 20px 50px rgba(38,103,255,.4),
    inset 0 0 70px rgba(255,255,255,.4),
    inset 0 -20px 48px rgba(12,63,184,.32);
  border:0;
  z-index:6;
  display:flex;align-items:center;justify-content:center;
  animation:orbFloat 8s ease-in-out infinite alternate;
}
.glass-orb .orb-mark{
  width:58%;height:58%;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.2));
}
.glass-orb::before{
  content:"";position:absolute;inset:-24px;border-radius:50%;
  border:1px solid rgba(74,163,255,.4);
  animation:orbRing 18s linear infinite;
}
.glass-orb::after{
  content:"";position:absolute;inset:-44px;border-radius:50%;
  border:1px dashed rgba(74,163,255,.25);
  animation:orbRing 30s linear infinite reverse;
}
/* Orbit data pulses — 4 dots circling the orb */
.orb-pulse{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.35),0 0 20px rgba(74,163,255,.8);
  top:50%;left:50%;
  transform-origin:0 0;
}
.orb-pulse--1{animation:orbPulse 18s linear infinite;           background:#7fd5ff}
.orb-pulse--2{animation:orbPulse 18s linear -4.5s infinite;     background:#6fd2ff}
.orb-pulse--3{animation:orbPulse 18s linear -9s infinite;       background:#ffd07f}
.orb-pulse--4{animation:orbPulse 18s linear -13.5s infinite;    background:#9df0c1}
@keyframes orbPulse{
  from{transform:rotate(0deg) translateX(134px) rotate(0deg)}
  to  {transform:rotate(360deg) translateX(134px) rotate(-360deg)}
}
/* Orb caption — sits below orb, overlapping iPad top-right corner */
.orb-label{
  position:absolute;right:2%;top:30%;
  width:196px;padding:11px 13px;
  display:flex;flex-direction:column;gap:2px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 14px 36px rgba(30,50,120,.22);
  text-align:left;
  z-index:7;
}

/* Connecting line from orb down into device (depth cue) */
.orb-connector{
  position:absolute;
  right:14%;top:5%;
  width:160px;height:200px;
  z-index:4;
  opacity:.6;
  pointer-events:none;
}

/* 3D Security Shield — zero-trust signature object (tec-do cart equivalent) */
.glass-shield{
  position:absolute;
  right:-8%;bottom:-2%;
  width:240px;height:280px;
  z-index:6;
  pointer-events:none;
  animation:shieldFloat 9s ease-in-out infinite alternate;
  filter:drop-shadow(0 40px 50px rgba(38,103,255,.4));
}
.glass-shield .shield-inner{
  width:100%;height:100%;
  transform:rotate(-8deg);
}
.glass-shield svg{width:100%;height:100%;display:block}
.shield-label{
  position:absolute;left:50%;bottom:-6px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,1);
  box-shadow:0 10px 24px rgba(30,50,120,.22);
  white-space:nowrap;
}
.shield-label-tag{
  font-size:9px;font-weight:700;letter-spacing:1.4px;
  color:var(--c-primary);text-transform:uppercase;
}
.shield-label-main{
  font-size:11px;font-weight:700;color:#0a1a3a;letter-spacing:.3px;
}
@keyframes shieldFloat{
  0%  {transform:translateY(0) rotate(0deg)}
  50% {transform:translateY(-12px) rotate(2deg)}
  100%{transform:translateY(4px) rotate(-1deg)}
}

/* Feature card below iPad (tec-do "AD Creation" equivalent) */
.glass-feature-card{
  position:absolute;
  left:4%;bottom:-8%;
  width:54%;min-width:260px;
  padding:14px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 26px 60px rgba(30,50,120,.2),
    0 8px 20px rgba(30,50,120,.1);
  z-index:7;
  display:flex;align-items:center;gap:14px;
  animation:flincoDrift 8s ease-in-out -1s infinite alternate;
}
.glass-feature-card .gf-title{
  font-size:11px;font-weight:700;letter-spacing:.8px;
  color:var(--c-primary);text-transform:uppercase;
  flex-shrink:0;padding-right:14px;
  border-right:1px solid rgba(10,20,50,.08);
}
.glass-feature-card .gf-chips{
  display:flex;gap:8px;flex:1;flex-wrap:wrap;
}
.gf-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;
  background:rgba(38,103,255,.08);
  border:1px solid rgba(38,103,255,.18);
  color:#0a1a3a;
}
.gf-chip svg{width:13px;height:13px;color:var(--c-primary)}
.gf-chip--naas{background:linear-gradient(135deg,rgba(38,103,255,.14),rgba(3,182,252,.1))}
.gf-chip--mdm{background:linear-gradient(135deg,rgba(155,100,250,.14),rgba(38,103,255,.1))}
.gf-chip--mdm svg{color:var(--c-purple)}
.gf-chip--ztna{background:linear-gradient(135deg,rgba(38,103,255,.14),rgba(4,194,172,.1))}
.gf-chip--soar{background:linear-gradient(135deg,rgba(255,174,0,.14),rgba(255,138,61,.08))}
.gf-chip--soar svg{color:var(--c-amber)}

/* Floating particles — subtle atmosphere */
.banner-particles{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
}
.banner-particles i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s,5px);height:var(--s,5px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(168,208,255,.5) 50%, transparent 75%);
  box-shadow:0 0 12px rgba(168,208,255,.7);
  animation:particleDrift 12s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
  opacity:.85;
}
@keyframes particleDrift{
  0%  {transform:translate(0,0)       scale(1)}
  50% {transform:translate(12px,-18px) scale(1.15)}
  100%{transform:translate(-8px,10px)  scale(.9)}
}
.orb-label-tag{
  align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:1.2px;
  color:#0074ff;text-transform:uppercase;
  background:rgba(0,116,255,.10);
  padding:3px 8px;border-radius:4px;
}
.orb-label-main{
  font-size:16px;font-weight:700;color:#0a1a3a;letter-spacing:.2px;
  margin-top:6px;line-height:1.2;
}
.orb-label-sub{
  font-size:11px;font-weight:500;color:#5b6a8a;letter-spacing:.2px;
  margin-bottom:10px;
}
.orb-label-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(10,20,50,.08);
  padding-top:10px;gap:4px;
}
.orb-stat{display:flex;flex-direction:column;gap:1px;align-items:flex-start}
.orb-stat-num{
  font-size:16px;font-weight:700;color:#0a1a3a;line-height:1;letter-spacing:-0.5px;
}
.orb-stat-num em{
  font-size:10px;font-weight:500;font-style:normal;color:#0074ff;margin-left:1px;
}
.orb-stat-label{
  font-size:10px;font-weight:500;color:#6e7ca8;letter-spacing:.2px;
}

/* (glass-chip floating chips removed — migrated into .gm-tags inside main panel) */

/* Animations */
@keyframes orbFloat{
  0%  {transform:translateY(0) scale(1)}
  50% {transform:translateY(-8px) scale(1.02)}
  100%{transform:translateY(4px) scale(.99)}
}
@keyframes orbRing{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}
.glass-capsule{animation:flincoDrift 7s ease-in-out infinite alternate}
.glass-side{animation:flincoDrift 9s ease-in-out -2s infinite alternate}
.glass-chip--a{animation:flincoDrift 6s ease-in-out -1s infinite alternate}
.glass-chip--c{animation:flincoDrift 8s ease-in-out -3s infinite alternate}
@keyframes flincoDrift{
  from{transform:translateY(0)}
  to{transform:translateY(-8px)}
}

/* ≤1320px — first compression: hide sub-brand buttons + tighten nav */
@media (max-width:1320px){
  .header-inner{gap:20px!important}
  .main-nav>ul{gap:20px}
  .main-nav a{font-size:13px;white-space:nowrap}
  .header-right .sub-brand{display:none}
  .lang-btn{padding:4px 10px;font-size:12px}
}

/* ≤1200px — side panels/narrow laptops: slim collage, keep only AI Core orb */
@media (max-width:1200px){
  .banner-slogans{max-width:62%!important}
  .hero-collage{
    width:320px;height:420px;
    right:4%;top:50%;transform:translateY(-50%);
  }
  .glass-capsule,
  .glass-main,
  .glass-chip,
  .glass-feature-card,
  .orb-connector{display:none}
  .glass-orb{
    right:auto;left:50%;top:10%;
    transform:translateX(-50%);
    width:200px;height:200px;
  }
  .orb-label{
    right:auto;left:50%;top:auto;bottom:18%;
    transform:translateX(-50%);
    width:240px;text-align:left;
  }
  .glass-shield{
    right:auto;left:50%;bottom:-4%;
    transform:translateX(80%);
    width:120px;height:140px;
  }
  .shield-label{display:none}
  .banner-wordmark{font-size:16rem;opacity:.45;right:-8%}
  /* Further nav compression */
  .main-nav>ul{gap:16px}
  .main-nav a{font-size:12.5px}
  .lang-btn span{display:none}
  /* Drop 2 nav items to save space */
  .main-nav li:nth-child(4),  /* 解决方案 */
  .main-nav li:nth-child(6)   /* 资源中心 */
  {display:none}
}
@media (max-width:960px){
  .banner-slogans{max-width:58%!important}
  .hero-collage{width:280px;height:340px;right:0}
  .glass-orb{width:170px;height:170px}
  .orb-label{width:220px}
  .banner-wordmark{font-size:14rem;opacity:.4}
  /* Header nav tighter */
  .main-nav>ul{gap:24px}
  .main-nav a{font-size:14px}
}
/* =====================================================
   MOBILE (≤720px) — complete banner redesign
   - Orb becomes ambient background decoration (no content overlap)
   - Orb label hidden (too cramped to read)
   - Slogan full-width
   - CTA immediately after slogan
   - Tabs compressed to horizontal pill row (main title only)
   - Copyright moved out of the fold
===================================================== */
@media (max-width:720px){
  /* BANNER — content-driven height, safe for iOS Safari chrome */
  .banner{min-height:auto;padding:90px 0 24px}
  .banner-stage{overflow:hidden;min-height:640px}
  .banner-stage::after,.banner-stage::before{z-index:1}

  /* Mobile: ensure NO legacy background photos or videos leak through */
  .banner-poster{
    background:none!important;
    background-image:none!important;
    opacity:0!important;
  }
  .banner-loop,.banner-enter{display:none!important;opacity:0!important}

  /* Mobile: drop iPad collage, but keep a tiny orb + particles for atmosphere */
  .hero-collage{
    display:block!important;
    position:absolute;right:-30px;top:38%!important;
    width:220px!important;height:220px!important;
    transform:none!important;
    z-index:2;pointer-events:none;opacity:.9;
  }
  .device-ipad,.orb-label,.orb-connector,.shield-label,.glass-feature-card{display:none!important}
  .glass-orb{
    position:absolute!important;
    right:10px!important;top:20px!important;
    width:180px!important;height:180px!important;
    left:auto!important;bottom:auto!important;transform:none!important;
  }
  .glass-shield{
    position:absolute!important;
    right:auto!important;left:-24px!important;bottom:-14px!important;top:auto!important;
    width:110px!important;height:130px!important;
    opacity:.88;
  }
  .banner-wordmark{
    display:block!important;
    font-size:clamp(8rem,32vw,14rem)!important;
    top:auto!important;bottom:16%!important;right:-12%!important;
    opacity:.4;z-index:1;
  }
  .banner-particles{display:block;opacity:.6}
  /* Replace with a subtle corner gradient "glow" */
  .banner-stage::before{
    content:"";position:absolute;
    top:-40px;right:-100px;
    width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(38,103,255,.35),rgba(108,179,255,.15) 50%,transparent 75%);
    filter:blur(24px);
    z-index:1;pointer-events:none;
  }

  /* SLOGAN — big, bold, main visual */
  .banner-ui{padding-top:0}
  .banner-slogans{
    left:var(--px)!important;right:var(--px);
    top:40px!important;
    max-width:88%!important;
    position:absolute;transform:none!important;
    z-index:3;
  }
  .banner-slogans .slogan{
    font-size:clamp(2.1rem,8vw,2.8rem)!important;
    line-height:1.18;gap:4px;font-weight:700;
    letter-spacing:-1px;
  }
  html[lang="en"] .banner-slogans .slogan{font-size:clamp(1.7rem,6.5vw,2.3rem)!important}

  /* BANNER BOTTOM — static, below slogan */
  .banner-bottom{
    position:absolute;left:0;right:0;bottom:20px;
    padding:0 var(--px);
    flex-direction:column;align-items:stretch;gap:10px;
    z-index:3;
  }
  .banner-copyright{display:none}

  .banner-consult{
    order:1;
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:14px;border-radius:14px;
    font-size:15px;font-weight:600;
    background:linear-gradient(135deg,#2667FF,#133B99);
    box-shadow:0 10px 24px rgba(38,103,255,.35);
  }

  /* TABS — 2×2 grid on mobile (4 tabs, nothing overflows) */
  .banner-tabs{
    order:2;
    position:static!important;transform:none!important;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:6px!important;
    width:100%;max-width:none;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.8);
    border-radius:14px;padding:6px;
    box-shadow:0 4px 16px rgba(30,50,120,.08);
    flex-wrap:unset!important;flex-direction:unset!important;
    margin:0!important;
  }
  .banner-tabs li{
    min-width:0!important;flex:none!important;
    padding:10px 8px!important;border-radius:10px!important;
    text-align:center!important;background:transparent!important;
    border:none!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    gap:2px!important;
    transition:background .25s ease;
  }
  .banner-tabs li.active{
    background:linear-gradient(135deg,#2667FF,#133B99)!important;
    box-shadow:0 6px 14px rgba(38,103,255,.35)!important;
  }
  .banner-tabs li .tab-title{
    display:block;font-size:13px;font-weight:600;
    color:#0a1a3a;
    white-space:normal!important;line-height:1.25;
    overflow:visible!important;text-overflow:clip!important;
    letter-spacing:-.1px;max-width:100%;
    word-break:break-word;
  }
  html[lang="en"] .banner-tabs li .tab-title{font-size:11.5px}
  .banner-tabs li.active .tab-title{color:#fff}
  /* Mobile: hide sub-titles entirely — title alone is enough */
  .banner-tabs li .tab-sub{display:none!important}
}

@media (max-width:480px){
  .banner-slogans .slogan{font-size:clamp(1.7rem,6.2vw,2.1rem)!important}
  .banner-tabs li .tab-title{font-size:11.5px}
  .hero-collage{width:200px;height:200px;right:-50px;top:22%;opacity:.75}
}
.banner-stage::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(245,248,255,.88) 0%, rgba(245,248,255,.35) 18%, transparent 38%, transparent 72%, rgba(245,248,255,.55) 100%),
    repeating-linear-gradient(90deg, rgba(20,40,80,.035) 0 1px, transparent 1px 96px);
  pointer-events:none;
}
@keyframes flincoFloat{
  0%  {transform:translate(0,-50%)     scale(1)}
  50% {transform:translate(-20px,-48%) scale(1.04)}
  100%{transform:translate(10px,-52%)  scale(.98)}
}
@media (max-width:720px){
  .banner-stage::before{width:420px;height:420px;right:-180px;top:60%;opacity:.55}
}

/* Airy top fade for breathing room — bright white mist top → clear */
.banner-stage::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(245,248,255,.95) 0%,rgba(245,248,255,.4) 22%,transparent 42%);
  pointer-events:none;
}
/* Soft bottom fade so the tabs sit cleanly on a paler strip */
.banner-stage::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 70%,rgba(245,248,255,.6) 100%);
  pointer-events:none;
}

.banner-ui{
  position:relative;z-index:2;
  width:100%;height:100%;
  padding:0 var(--px);
  max-width:var(--container);margin:0 auto;
}
.banner-slogans{
  position:absolute;left:var(--px);top:38%;
  width:calc(100% - var(--px) * 2);
  max-width:64%;
  pointer-events:none;
  transform:translateY(-50%);
  z-index:5;  /* boosted above .hero-collage (z-index:3) to overlap iPad */
}
.banner-slogans .slogan{
  position:absolute;left:0;top:0;
  width:100%;
  display:flex;flex-direction:column;gap:10px;
  font-weight:800;
  font-size:clamp(2.1rem,3.9vw,4rem);
  line-height:1.1;letter-spacing:-1px;
  color:var(--c-dark);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
  /* Glass overlap effect — slogan pressed onto the iPad's left edge */
  text-shadow:
    0 1px 20px rgba(255,255,255,.85),
    0 2px 4px rgba(255,255,255,.6);
  padding:8px 0;
}
.banner-slogans .slogan .line{
  /* Keep it deep & readable (reverting gradient — poor contrast on light bg) */
  color:#0a1a3a;
  display:block;white-space:normal;
}
.banner-slogans .slogan.active{opacity:1;transform:translateY(0);pointer-events:auto}
.banner-slogans .slogan .line{display:block;white-space:normal}
html[lang="en"] .banner-slogans{max-width:54%}
html[lang="en"] .banner-slogans .slogan{font-size:clamp(1.6rem,3vw,3.2rem)}

/* bottom bar */
.banner-bottom{
  position:absolute;left:0;right:0;bottom:32px;
  padding:0 var(--px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.banner-copyright{
  font-size:12px;font-weight:300;
  color:rgba(10,15,44,.6);line-height:1.6;
}

.banner-tabs{
  display:flex;gap:20px;
  position:absolute;left:50%;bottom:48px;
  transform:translateX(-50%);
  max-width:calc(100% - var(--px) * 2);
}
.banner-tabs li{
  min-width:240px;
  padding:14px 28px;
  border-radius:var(--r-pill);
  border:1px solid rgba(10,15,44,.14);
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  cursor:pointer;
  text-align:center;
  transition:all var(--d-base) var(--ease);
  display:flex;flex-direction:column;gap:2px;
}
.banner-tabs li .tab-title{
  font-size:14px;font-weight:600;color:var(--c-dark);
  white-space:nowrap;
}
.banner-tabs li .tab-sub{
  font-size:12px;font-weight:400;color:var(--c-gray-700);
  white-space:nowrap;
}
.banner-tabs li:hover{
  background:rgba(255,255,255,.7);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(10,15,44,.12);
}
.banner-tabs li.active{
  background:var(--c-dark);border-color:var(--c-dark);
  box-shadow:0 8px 24px rgba(10,15,44,.2);
}
.banner-tabs li.active .tab-title,
.banner-tabs li.active .tab-sub{color:#fff}

.banner-consult{padding:14px 28px;font-size:15px;box-shadow:0 8px 24px rgba(3,118,255,.3)}

.scroll-hint{
  position:absolute;left:50%;bottom:120px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;color:rgba(10,15,44,.55);
}
.scroll-dot{width:2px;height:30px;background:rgba(10,15,44,.2);position:relative;overflow:hidden;border-radius:2px}
.scroll-dot i{position:absolute;top:-10px;left:0;width:100%;height:10px;background:var(--c-primary);animation:scroll-down 1.8s ease-in-out infinite}
@keyframes scroll-down{0%{top:-10px}100%{top:100%}}

/* =========================================================
 * R1 — AI Agent + Product
 * ========================================================= */
.r1{
  position:relative;
  background:linear-gradient(180deg,#EAF1FF 0%,#F5F8FF 40%,#EEF4FF 100%);
  padding:140px 0 180px;
  overflow:hidden;
}
.r1-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.r1-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.55;mix-blend-mode:lighten;
}
.r1-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 55%,transparent 20%,rgba(234,241,255,.55) 70%),
    linear-gradient(180deg,rgba(234,241,255,.35) 0%,rgba(234,241,255,.1) 50%,rgba(238,244,255,.55) 100%);
}
.r1>.container,.r1>*:not(.r1-bg){position:relative;z-index:1}
.r1-top{margin-bottom:140px}

.r1-heading{text-align:center;margin-bottom:72px}
.small-title{
  font-size:clamp(20px,2vw,32px);
  font-weight:400;color:var(--c-gray-700);
  margin-bottom:14px;
}
.big-title{
  font-size:clamp(2.6rem,5.5vw,5.6rem);
  font-weight:700;color:var(--c-dark);
  margin-bottom:36px;line-height:1.04;
  /* Latin-only letter spacing trick for "Martech Multi-Agent" */
  letter-spacing:-.015em;
}
.product-pill{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--c-primary-light),#fff);
  border:1px solid rgba(3,118,255,.2);
  box-shadow:0 10px 30px rgba(3,118,255,.08);
  margin-bottom:28px;
}
.product-pill .pill-img{height:32px;width:auto}
.product-pill h4{font-size:20px;font-weight:600;color:var(--c-dark)}
.product-logos{display:inline-flex;align-items:center;gap:24px;justify-content:center}
.product-logos img{height:36px;width:auto}
.product-logos .plus{font-size:22px;color:var(--c-gray-500);font-weight:300}

.agent-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  align-items:start;
}
/* Asymmetric staggering — breaks the symmetry grid for visual rhythm */
.agent-cards .agent-card:nth-child(1){transform:translateY(-16px)}
.agent-cards .agent-card:nth-child(2){transform:translateY(48px)}
.agent-cards .agent-card:nth-child(3){transform:translateY(-24px)}
.agent-cards .agent-card:nth-child(1):hover{transform:translateY(-24px)}
.agent-cards .agent-card:nth-child(2):hover{transform:translateY(40px)}
.agent-cards .agent-card:nth-child(3):hover{transform:translateY(-32px)}
@media (max-width:900px){
  .agent-cards .agent-card:nth-child(1),
  .agent-cards .agent-card:nth-child(2),
  .agent-cards .agent-card:nth-child(3){transform:none}
}
.agent-card{
  background:#fff;
  border-radius:var(--r-card);
  padding:48px 32px 40px;
  box-shadow:0 10px 40px rgba(10,15,44,.06);
  text-align:center;
  transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease);
  position:relative;overflow:hidden;
}
.agent-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(3,118,255,.05),transparent 50%);
  opacity:0;transition:opacity var(--d-base);
}
.agent-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(10,15,44,.08)}
.agent-card:hover::before{opacity:1}
.agent-card>*{position:relative;z-index:1}
.agent-card .card-title{
  font-size:26px;font-weight:600;margin-bottom:28px;
  color:var(--c-dark);
}
.agent-card .card-icon{
  width:120px;height:120px;margin:0 auto 28px;
  object-fit:contain;
}
.card-features{display:flex;flex-direction:column;gap:12px}
.card-features li{
  font-size:15px;color:var(--c-gray-700);font-weight:500;
  padding:12px 16px;background:var(--c-gray-100);
  border-radius:10px;
  transition:background var(--d-base),color var(--d-base);
}
.agent-card:hover .card-features li{background:var(--c-primary-light);color:var(--c-primary)}

.r1-bottom{position:relative;padding-top:40px}
.r1-intro{
  font-size:clamp(1.5rem,2.2vw,2.2rem);
  font-weight:400;line-height:1.6;
  text-align:center;margin-bottom:88px;
  color:var(--c-dark);
}
.r1-intro strong{
  color:var(--c-primary);
  font-weight:700;
}

.yinyang{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-bottom:64px;
  max-width:1240px;
  margin-left:auto;margin-right:auto;
}
.yy-col{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:24px;
  padding:48px 44px;
  box-shadow:0 8px 24px rgba(10,15,44,.04);
  position:relative;
  overflow:hidden;
}
.yy-col::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%,rgba(3,118,255,.08),transparent 60%);
  pointer-events:none;
}
.yy-yin::before{background:radial-gradient(circle at 100% 0%,rgba(100,150,255,.08),transparent 60%)}
.yy-title{
  display:flex;align-items:center;gap:4px;
  font-size:clamp(1.8rem,2.6vw,2.6rem);
  font-weight:500;
  margin-bottom:12px;
  position:relative;z-index:1;
  color:var(--c-dark);
}
.yy-title::before{content:"「";color:var(--c-gray-500);font-weight:400}
.yy-title::after{content:"」";color:var(--c-gray-500);font-weight:400;margin-left:6px}
.yy-title img,
.yy-title .yy-icon{
  width:40px;height:40px;
  margin:0 6px;
  vertical-align:middle;
}
.yy-yang .yy-title .yy-icon{color:var(--c-primary)}
.yy-yin .yy-title .yy-icon{color:#6E7CA8}
.yy-title strong{font-weight:600;color:var(--c-dark)}
.yy-subtitle{
  font-size:17px;
  margin-bottom:32px;
  font-weight:500;
  position:relative;z-index:1;
}
.yy-yang .yy-subtitle{color:var(--c-primary)}
.yy-yin .yy-subtitle{color:#6E7CA8}
.yy-features{
  display:flex;flex-direction:column;gap:14px;
  position:relative;z-index:1;
}
.yy-features div{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  border-radius:14px;
  background:rgba(3,118,255,.06);
  border:1px solid rgba(3,118,255,.12);
  transition:all var(--d-base);
}
.yy-yin .yy-features div{
  background:rgba(110,124,168,.06);
  border-color:rgba(110,124,168,.14);
}
.yy-features div:hover{transform:translateX(4px)}
.yy-features img{width:28px;height:28px;flex-shrink:0}
.yy-features .yy-fi{width:26px;height:26px;flex-shrink:0}
.yy-yang .yy-features .yy-fi{color:var(--c-primary)}
.yy-yin .yy-features .yy-fi{color:#6E7CA8}
.yy-features span{font-size:16px;font-weight:500;color:var(--c-dark)}

.btn-learn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  background:var(--c-dark);color:#fff;
  border-radius:var(--r-pill);
  font-size:15px;font-weight:500;
  margin:0 auto;
}
.btn-learn img{height:20px;filter:brightness(0) invert(1)}
.btn-learn svg{opacity:.9;transition:transform .25s ease}
.btn-learn:hover svg{transform:translateX(3px)}
.r1-bottom .btn-learn,.r4 .btn-learn{display:flex;width:fit-content;margin:0 auto}
.btn-learn:hover{background:var(--c-primary)}

/* =========================================================
 * R2 — Global Media
 * ========================================================= */
.r2{position:relative;padding:120px 0;color:#fff;overflow:hidden}
.r2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.r2-bg-static{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(74,163,255,.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(0,116,255,.15), transparent 55%),
    linear-gradient(180deg, #0a0f2c 0%, #0f1a42 100%);
}
.r2-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,44,.85),rgba(10,15,44,.75));z-index:1}
.r2>.container{position:relative;z-index:2}

.r2-heading{text-align:center;margin-bottom:80px}
.r2-heading h2{font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:700;margin-bottom:18px;letter-spacing:0}
.r2-heading p{font-size:17px;color:rgba(255,255,255,.72);font-weight:400}

.r2-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:72px}
.platform{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-card);
  padding:48px 24px;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--d-base),background var(--d-base);
}
.platform:hover{transform:translateY(-6px);background:rgba(255,255,255,.12)}
.platform img{height:60px;width:auto;filter:brightness(0) invert(1)}
.platform .scene-icon{
  width:56px;height:56px;color:var(--c-primary);
  opacity:.92;transition:transform .3s ease;
}
.platform:hover .scene-icon{transform:translateY(-2px) scale(1.04)}
.platform .scene-label{
  display:block;margin-top:14px;color:rgba(255,255,255,.88);
  font-size:16px;font-weight:500;letter-spacing:.6px;
}

/* 3-up stats strip */
.r2-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  max-width:1080px;margin:0 auto 16px;
  padding:28px 40px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.r2-stat{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.r2-stat .stat-num{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;color:var(--c-primary);line-height:1}
.r2-stat .stat-num em{font-style:normal}
.r2-stat .stat-label{color:rgba(255,255,255,.75);font-size:15px;font-weight:400;letter-spacing:.3px}
.r2-caption{
  text-align:center;color:rgba(255,255,255,.55);font-size:14px;
  margin-bottom:56px;letter-spacing:.3px;
}
@media (max-width:720px){.r2-stats{grid-template-columns:1fr;gap:20px;padding:24px}}

/* Customer logo wall (single composite image) */
.customer-wall{
  display:block;width:100%;max-width:1080px;margin:0 auto;height:auto;
  border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25);
  background:#fff;padding:20px;
}

.r2-count{
  text-align:center;font-size:clamp(1.3rem,1.8vw,1.7rem);
  font-weight:400;margin-bottom:72px;
  color:rgba(255,255,255,.85);
}
.r2-count .count-num{
  font-weight:700;font-size:1.6em;font-style:normal;
  color:var(--c-primary);
  padding:0 10px;
}

.r2-logos{max-width:1080px;margin:0 auto}
.logo-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.logo-row li{
  aspect-ratio:3/1.6;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--d-base),transform var(--d-base);
}
.logo-row li:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.logo-row li img{
  max-height:32px;max-width:68%;
  filter:brightness(0) invert(1) opacity(.85);
  transition:opacity var(--d-base);
}
.logo-row li:hover img{filter:brightness(0) invert(1) opacity(1)}

/* =========================================================
 * R3 — Reviews
 * ========================================================= */
.r3{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%,#E8F0FF 0%,transparent 60%),
    linear-gradient(180deg,#F5F8FF,#fff 100%);
  padding:140px 0 120px;
}
.r3-title{text-align:center;font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:700;margin-bottom:80px;color:var(--c-dark);letter-spacing:0}
.review-swiper{max-width:1280px;margin:0 auto;padding:20px 20px 60px!important}
.review-swiper .swiper-slide{height:auto}
.review-card{
  background:#fff;border-radius:20px;
  padding:40px;
  box-shadow:0 2px 8px rgba(10,15,44,.04),0 12px 32px rgba(10,15,44,.05);
  border:1px solid rgba(10,15,44,.04);
  position:relative;
  height:100%;
  min-height:320px;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.review-card::before{
  content:"\201C";
  position:absolute;top:32px;right:32px;
  font-family:Georgia,serif;font-size:120px;line-height:1;
  color:var(--c-primary-light);
  opacity:.55;
  z-index:0;
}
.review-card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(3,118,255,.06),transparent 55%);
  pointer-events:none;
}
.review-head{
  display:flex;flex-direction:row;align-items:center;gap:16px;
  margin-bottom:24px;
  position:relative;z-index:1;
}
.review-head .meta{display:flex;flex-direction:column;gap:4px}
.avatar{
  width:72px;height:72px;border-radius:50%;
  background-size:cover;background-position:center;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 6px 18px rgba(10,15,44,.12);
}
.avatar img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
/* (letter badge styles removed — restored GIF avatars) */
.review-head h4{font-size:22px;font-weight:600;margin-bottom:2px;color:var(--c-dark)}
.review-head small{font-size:13px;color:var(--c-gray-500);line-height:1.6;font-weight:500}
.review-text{
  font-size:15px;line-height:1.85;
  color:var(--c-gray-900);
  position:relative;z-index:1;
  flex:1;
}

.swiper-pagination-bullet{background:var(--c-gray-300);opacity:1}
.swiper-pagination-bullet-active{background:var(--c-primary);width:24px;border-radius:4px}

/* =========================================================
 * R4 — Cases
 * ========================================================= */
.r4{background:#fff;padding:140px 0}
.r4-title{text-align:center;font-size:clamp(2.4rem,4.5vw,4.6rem);font-weight:700;margin-bottom:16px;color:var(--c-dark);letter-spacing:0}
.r4-sub{text-align:center;color:rgba(0,0,0,.52);font-size:17px;margin-bottom:48px;letter-spacing:.3px}

.industry-pills{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;
  max-width:900px;margin:0 auto 64px;list-style:none;padding:0;
}
.industry-pills li{
  padding:10px 22px;border-radius:999px;
  background:rgba(0,116,255,.07);color:var(--c-primary);
  border:1px solid rgba(0,116,255,.18);
  font-size:14px;font-weight:500;letter-spacing:.4px;
  transition:background .25s ease,transform .25s ease;
}
.industry-pills li:hover{background:rgba(0,116,255,.14);transform:translateY(-2px)}

.case-highlights{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1080px;margin:0 auto 56px;
}
.case-highlight{
  position:relative;background:#fff;border:1px solid rgba(0,0,0,.08);
  border-radius:20px;padding:36px 28px 32px;
  box-shadow:0 4px 24px rgba(0,0,0,.04);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.case-highlight:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,0,0,.12);border-color:rgba(0,116,255,.25)}
.case-hl-badge{
  display:inline-block;font-family:'MiSans',sans-serif;
  font-size:14px;font-weight:700;color:var(--c-primary);
  background:rgba(0,116,255,.1);padding:4px 12px;border-radius:8px;
  letter-spacing:1px;margin-bottom:20px;
}
.case-hl-title{font-size:22px;font-weight:700;color:var(--c-dark);margin-bottom:12px;line-height:1.35}
.case-hl-metric{font-size:15px;color:rgba(0,0,0,.62);margin-bottom:18px;line-height:1.5}
.case-hl-tag{
  display:inline-block;font-size:12px;font-weight:500;
  color:rgba(0,0,0,.55);background:rgba(0,0,0,.04);
  padding:4px 12px;border-radius:999px;letter-spacing:.3px;
}
@media (max-width:900px){.case-highlights{grid-template-columns:1fr;max-width:480px}}

.tab-swiper{margin-bottom:48px}
.tab-swiper .swiper-slide{
  width:auto;padding:12px 20px;
  background:var(--c-gray-100);border-radius:12px;
  cursor:pointer;transition:all var(--d-base);
  opacity:.5;
}
.tab-swiper .swiper-slide:hover{opacity:.85}
.tab-swiper .swiper-slide-thumb-active{
  background:var(--c-primary-light);
  opacity:1;
  box-shadow:0 6px 20px rgba(3,118,255,.2);
}
.tab-swiper .swiper-slide img{height:40px;width:auto;object-fit:contain}

.case-content{
  background:#fff;
  border:1px solid rgba(10,15,44,.06);
  border-radius:24px;
  padding:56px;
  margin-bottom:48px;
  box-shadow:0 2px 8px rgba(10,15,44,.04),0 16px 40px rgba(10,15,44,.06);
}
.case-slide{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:56px;align-items:center;
  min-height:420px;
}
.case-slide .case-photo{
  width:100%;aspect-ratio:4/3;
  background-size:cover;background-position:center;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(10,15,44,.12);
}
.case-body h4{
  font-size:32px;font-weight:700;
  margin-bottom:40px;
  color:var(--c-dark);
  letter-spacing:-.01em;
}
.case-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:36px;
  padding-bottom:36px;
  border-bottom:1px dashed var(--c-gray-300);
}
.case-stat{
  display:flex;flex-direction:column;
  gap:10px;
  min-width:0;
}
.case-stat .label{
  font-size:13px;
  color:var(--c-gray-700);
  font-weight:500;
  line-height:1.4;
}
.case-stat .value{
  font-size:clamp(2.2rem,3.2vw,3.6rem);
  font-weight:700;line-height:1;
  color:var(--c-dark);
  display:flex;align-items:baseline;gap:4px;
  white-space:nowrap;
}
.case-stat .value small{
  font-size:.42em;
  color:var(--c-primary);
  font-weight:600;
}
.case-body p{
  font-size:15px;line-height:1.85;
  color:var(--c-gray-700);
  font-weight:400;
}

.case-footer{display:flex;align-items:center;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--c-gray-300)}
.case-pager{font-size:24px;color:var(--c-gray-500)}
.case-pager .current{font-size:40px;font-weight:600;color:var(--c-dark)}
.case-nav{display:flex;gap:12px}
.case-nav button{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--c-gray-300);
  font-size:24px;color:var(--c-gray-700);
  transition:all var(--d-base);
}
.case-nav button:hover{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* =========================================================
 * R5 — Contact Form + Footer
 * ========================================================= */
.r5{position:relative;overflow:hidden}
.r5-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.r5-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,15,44,.88),rgba(10,15,44,.72))}
.r5>.container{position:relative;z-index:1;padding-top:120px}
.r5-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:flex-start;color:#fff;margin-bottom:120px}
.r5-title{font-size:clamp(2rem,3.8vw,3.8rem);font-weight:600;line-height:1.2;color:#fff}
.r5-sub{margin-top:14px;color:rgba(255,255,255,.72);font-size:17px;font-weight:400;letter-spacing:.3px}

.contact-form{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-card);
  padding:48px;
  position:relative;
}
.form-row{margin-bottom:24px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:0}
.form-row-2>label{margin-bottom:24px}
.form-row label{display:block}
.form-row label>span{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#fff}
.form-row input{
  width:100%;padding:14px 0;
  background:transparent;border:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:15px;
  transition:border-color var(--d-base);
}
.form-row input:focus{outline:none;border-bottom-color:var(--c-primary)}
.form-row input::placeholder{color:rgba(255,255,255,.4)}
.form-row label.error input{border-bottom-color:#FF5A5A}

.form-dropdown{position:relative}
.dropdown-toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.75);font-size:15px;
}
.dropdown-toggle svg{transition:transform var(--d-base)}
.form-dropdown.open .dropdown-toggle svg{transform:rotate(180deg)}
.form-dropdown.open .dropdown-toggle{color:#fff}
.dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:rgba(10,15,44,.95);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all var(--d-base);
  z-index:10;
  max-height:280px;overflow:auto;
}
.form-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu li{padding:12px 20px;cursor:pointer;font-size:14px;transition:background var(--d-base)}
.dropdown-menu li:hover{background:rgba(3,118,255,.25)}

.btn-submit{
  width:100%;padding:18px;
  background:var(--c-primary);color:#fff;
  border-radius:var(--r-pill);
  font-size:16px;font-weight:500;
  margin-top:16px;
  transition:background var(--d-base),transform var(--d-base);
}
.btn-submit:hover{background:var(--c-primary-dark);transform:translateY(-2px)}

.form-loading{
  position:absolute;inset:0;
  background:rgba(10,15,44,.6);
  backdrop-filter:blur(4px);
  border-radius:var(--r-card);
  display:none;align-items:center;justify-content:center;
}
.form-loading.active{display:flex}
.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--c-primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
 * FOOTER
 * ========================================================= */
#site-footer{color:rgba(255,255,255,.7);padding:96px 0 36px;position:relative;z-index:1}
.footer-top{
  display:grid;
  grid-template-columns:1.1fr 2fr auto;
  gap:72px;
  align-items:flex-start;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand .footer-logo{display:inline-block;margin-bottom:20px;color:#1a1a1a}
.footer-brand .footer-logo img{height:36px;width:auto}
.footer-brand .footer-logo .flinco-logo-svg{height:36px;width:auto;display:block}
.footer-brand .brand-tagline{
  font-size:13px;line-height:1.7;
  color:rgba(255,255,255,.55);
  margin-bottom:24px;
}
.footer-brand .footer-email{
  font-size:13px;line-height:1.7;
  color:rgba(255,255,255,.75);
  font-weight:500;
}

.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.footer-col h4{
  font-size:15px;font-weight:600;
  color:#fff;
  margin-bottom:20px;
  letter-spacing:.01em;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col a{
  font-size:14px;font-weight:400;
  color:rgba(255,255,255,.6);
  transition:color var(--d-base);
}
.footer-col a:hover{color:var(--c-primary)}

.footer-qrs{display:flex;gap:20px}
.qr-item{text-align:center}
.qr-item img,
.qr-item .qr-placeholder{
  width:104px;height:104px;display:block;
  background:#fff;border-radius:10px;
  padding:8px;margin-bottom:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  box-sizing:border-box;
}
.qr-item span{font-size:12px;color:rgba(255,255,255,.6)}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:28px;font-size:12px;
  color:rgba(255,255,255,.5);
  gap:24px;flex-wrap:wrap;
}
.footer-beian{display:flex;align-items:center;gap:8px}
.footer-beian a{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.5);
  transition:color var(--d-base);
}
.footer-beian a:hover{color:var(--c-primary)}
.footer-beian img{height:14px;width:auto}
.footer-beian .sep,.footer-links .sep{color:rgba(255,255,255,.2)}

.copyright{color:rgba(255,255,255,.5)}
.footer-links{display:flex;align-items:center;gap:16px}
.footer-links a{color:rgba(255,255,255,.5);transition:color var(--d-base)}
.footer-links a:hover{color:var(--c-primary)}

.to-top{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:12px;
  transition:all var(--d-base);
}
.to-top:hover{background:var(--c-primary);border-color:var(--c-primary);transform:translateY(-2px)}

/* =========================================================
 * Toast
 * ========================================================= */
.toast{
  position:fixed;left:50%;top:32px;
  transform:translateX(-50%) translateY(-80px);
  background:var(--c-dark);color:#fff;
  padding:14px 24px;border-radius:var(--r-pill);
  font-size:14px;box-shadow:0 20px 40px rgba(0,0,0,.2);
  z-index:9999;opacity:0;pointer-events:none;
  transition:all var(--d-base) var(--ease);
}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1}

/* =========================================================
 * Responsive
 * ========================================================= */
@media (max-width:1200px){
  :root{--px:40px}
  .r1-top{grid-template-columns:1fr;gap:56px}
  .r5-inner{grid-template-columns:1fr;gap:48px}
}
@media (max-width:900px){
  .main-nav,.header-right .sub-brand{display:none}
  .menu-toggle{display:flex}
  .menu-toggle span{background:var(--c-dark)}
  /* Mobile menu — slide-in panel when .main-nav.open */
  .main-nav.open{
    display:flex!important;
    position:fixed;top:var(--nav-h);right:0;bottom:0;left:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;justify-content:flex-start;
    padding:24px var(--px);
    z-index:999;
    animation:mobileMenuIn .25s ease;
  }
  .main-nav.open>ul{
    flex-direction:column!important;
    width:100%;gap:0;
  }
  .main-nav.open>ul>li{
    width:100%;
    border-bottom:1px solid rgba(10,15,44,.08);
  }
  .main-nav.open>ul>li:last-child{border-bottom:none}
  .main-nav.open>ul>li>a{
    display:block;padding:18px 0;font-size:17px;font-weight:500;
    color:var(--c-dark);
  }
  .main-nav.open .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:transparent;border:none;
    padding:0 0 12px 16px;min-width:auto;
    display:block!important;
  }
  .main-nav.open .dropdown li a{font-size:14px;padding:8px 0;color:var(--c-gray-700)!important}
  @keyframes mobileMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .banner-slogans{left:var(--px);bottom:44%;max-width:90%}
  .banner-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .banner-tabs{position:static;transform:none;flex-wrap:wrap;order:2;margin-top:8px}
  .banner-consult{margin-top:8px}
  .banner-copyright{order:1}
  .agent-cards{grid-template-columns:1fr}
  .yinyang{grid-template-columns:1fr}
  .r2-platforms{grid-template-columns:repeat(2,1fr)}
  .case-slide{grid-template-columns:1fr;gap:24px}
  .contact-form{padding:32px 20px}
  .form-row-2{grid-template-columns:1fr}
  .form-row-2>label{margin-bottom:16px}
  .footer-top{grid-template-columns:1fr;gap:40px}
  .footer-nav{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;gap:12px}
}
@media (max-width:600px){
  :root{--px:20px;--nav-h:60px}
  .r1,.r2,.r3,.r4{padding:80px 0}
  .r2-platforms{grid-template-columns:1fr 1fr;gap:12px}
  .platform{padding:32px 16px}
  .platform img{height:40px}
  .platform .scene-icon{width:40px;height:40px}
  .review-card{padding:32px 24px}
  .case-content{padding:24px}
  .case-stats{gap:20px}
  .case-stat .value{font-size:40px}
  /* Banner: widen slogan area on narrow screens */
  .banner-slogans{max-width:92%!important}
  .banner-slogans .slogan{font-size:clamp(1.6rem,6vw,2.2rem)!important;gap:6px}
  html[lang="en"] .banner-slogans .slogan{font-size:clamp(1.4rem,5.2vw,2rem)!important}
  /* R2 stats responsive */
  .r2-stats{grid-template-columns:1fr;gap:16px;padding:20px}
  .r2-stat .stat-num{font-size:2rem}
  /* R4 case highlights stack */
  .case-highlights{grid-template-columns:1fr;gap:16px}
  .industry-pills{gap:8px}
  .industry-pills li{padding:8px 14px;font-size:13px}
  /* R3 avatar smaller on mobile */
  .avatar{width:56px;height:56px}
  .review-card{min-height:0}
  /* R5 form dropdown */
  .r5-title{font-size:clamp(1.8rem,7vw,2.4rem)}
  .r5-sub{font-size:15px}
  /* Footer compress */
  .footer-cols{grid-template-columns:1fr 1fr;gap:24px}
  .footer-qrs{justify-content:flex-start}
}