/* ========== Design Tokens (DESIGN.md) ========== */
    :root {
      --color-primary:        #0faeff;
      --color-primary-light:  #5ed4ff;
      --color-primary-dark:   #0090d9;
      --color-primary-deeper: #0077be;
      --color-primary-bg:     #e8f7ff;

      --color-orange:         #ff7849;
      --color-orange-dark:    #ff5a2a;
      --color-purple:         #7c5cfc;
      --color-purple-dark:    #5b3cf6;
      --color-amber:          #ffa940;
      --color-emerald:        #10b981;

      --color-text-primary:   #1a1a2e;
      --color-text-secondary: #444466;
      --color-text-muted:     #888899;
      --color-text-disabled:  #bbbbcc;

      --color-border:         rgba(15,174,255,0.08);
      --color-border-strong:  rgba(15,174,255,0.16);
      --color-bg-page:        #f8fbff;
      --color-bg-card:        #ffffff;
      --color-bg-surface:     #f2f8ff;

      --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
      --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;

      --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:999px;

      --shadow-card:    0 2px 12px rgba(0,60,120,0.05);
      --shadow-hover:   0 12px 32px rgba(0,100,180,0.10);
      --shadow-feature: 0 6px 20px rgba(15,174,255,0.22), inset 0 1px 0 rgba(255,255,255,0.2);
      --shadow-glow:    0 16px 48px rgba(15,174,255,0.30);

      --font-family: 'PingFang SC','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    }

    /* ========== Hero ========== */
    .hero {
      position:relative; overflow:hidden;
      padding:100px 0 120px;
    }
    .hero-bg {
      position:absolute; inset:0;
      background:linear-gradient(-45deg,#f0f7ff,#e8f7ff,#f5f0ff,#fff5eb,#e6faf5);
      background-size:400% 400%;
      animation:heroGradient 16s ease infinite;
      pointer-events:none;
    }
    @keyframes heroGradient {
      0%{background-position:0% 50%} 25%{background-position:100% 0%}
      50%{background-position:100% 100%} 75%{background-position:0% 100%}
      100%{background-position:0% 50%}
    }
    .hero::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(15,174,255,0.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,174,255,0.03) 1px,transparent 1px);
      background-size:56px 56px;
      mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 70%);
      -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 70%);
      pointer-events:none;
    }
    .hero-glow {
      position:absolute; top:-200px; right:-100px;
      width:700px; height:700px;
      background:radial-gradient(circle,rgba(15,174,255,0.22) 0%,rgba(94,212,255,0.10) 40%,transparent 65%);
      border-radius:50%; pointer-events:none;
      animation:glowPulse 8s ease-in-out infinite alternate;
    }
    .hero-glow-2 {
      position:absolute; bottom:-150px; left:-80px;
      width:500px; height:500px;
      background:radial-gradient(circle,rgba(124,92,252,0.12) 0%,rgba(200,160,255,0.05) 40%,transparent 60%);
      border-radius:50%; pointer-events:none;
      animation:glowPulse2 10s ease-in-out infinite alternate;
    }
    @keyframes glowPulse {
      0%{transform:translate(0,0) scale(1);opacity:.9}
      50%{transform:translate(-40px,30px) scale(1.1);opacity:.6}
      100%{transform:translate(20px,-20px) scale(1.05);opacity:.85}
    }
    @keyframes glowPulse2 {
      0%{transform:translate(0,0) scale(1);opacity:.7}
      50%{transform:translate(50px,-30px) scale(1.12);opacity:.45}
      100%{transform:translate(-20px,25px) scale(1.06);opacity:.7}
    }
    @keyframes fadeUp {
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }
    .hero .container { position:relative; z-index:2; display:flex; align-items:center; gap:var(--space-16); }
    .hero-text { flex:1; min-width:0; }
    .hero-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 16px; border-radius:var(--radius-full);
      background:rgba(15,174,255,0.08); color:var(--color-primary);
      font-size:13px; font-weight:600; letter-spacing:0.5px;
      margin-bottom:var(--space-6);
      opacity:0; transform:translateY(20px);
      animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .2s forwards;
    }
    .hero-badge svg { width:16px; height:16px; }
    .hero h1 {
      font-size:52px; font-weight:800; line-height:1.2;
      letter-spacing:-1px; margin-bottom:var(--space-5);
      background:linear-gradient(135deg,#0a3d6b 0%,#0a9ee8 35%,#0faeff 60%,#5ec8ff 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
      opacity:0; transform:translateY(24px);
      animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .35s forwards;
    }
    .hero-desc {
      font-size:18px; color:var(--color-text-secondary); line-height:1.7;
      max-width:520px; margin-bottom:var(--space-8);
      opacity:0; transform:translateY(20px);
      animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .5s forwards;
    }
    .hero-actions {
      display:flex; align-items:center; gap:var(--space-4);
      opacity:0; transform:translateY(16px);
      animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .65s forwards;
    }
    .btn-outline {
      display:inline-flex; align-items:center; gap:6px;
      padding:14px 32px; font-size:15px; font-weight:600;
      border-radius:var(--radius-full);
      border:1.5px solid rgba(15,174,255,0.3);
      color:var(--color-primary);
      transition:all .3s;
    }
    .btn-outline:hover { background:rgba(15,174,255,0.06); }
    .hero-visual {
      flex:1; min-width:0; display:flex; justify-content:center;
      opacity:0; transform:translateY(24px);
      animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .55s forwards;
    }
    .hero-card {
      position:relative; width:420px;
      background:linear-gradient(160deg,#0faeff 0%,#1ab8ff 25%,#3dc8ff 55%,#5ed4ff 80%,#a0e8ff 100%);
      border-radius:var(--radius-2xl); padding:var(--space-8);
      color:#fff; overflow:hidden;
      box-shadow:0 24px 64px rgba(15,174,255,0.25);
      animation:heroCardFloat 5s ease-in-out infinite;
    }
    @keyframes heroCardFloat {
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-8px)}
    }
    .hero-card-grid {
      position:absolute; inset:0; opacity:.06; pointer-events:none;
      background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
      background-size:28px 28px;
    }
    .hero-card-circle {
      position:absolute; border-radius:50%; border:1.5px dashed rgba(255,255,255,0.2);
      pointer-events:none;
    }
    .hero-card-circle.c1 { width:180px;height:180px;top:-30px;right:-20px;animation:spin 22s linear infinite; }
    .hero-card-circle.c2 { width:120px;height:120px;bottom:-15px;left:15px;animation:spin 16s linear infinite reverse; }
    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .hc-feature {
      display:flex; align-items:center; gap:var(--space-3);
      padding:10px 16px; margin-bottom:var(--space-2);
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,0.2);
      font-size:14px; font-weight:500; position:relative; z-index:2;
    }
    .hc-feature svg { width:18px; height:18px; opacity:.85; flex-shrink:0; }
    .hc-stats { display:flex; gap:var(--space-4); margin-top:var(--space-5); position:relative; z-index:2; }
    .hc-stat {
      padding:var(--space-3) var(--space-4);
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,0.12); backdrop-filter:blur(6px);
      border:1px solid rgba(255,255,255,0.18);
    }
    .hc-stat .num { font-size:26px; font-weight:800; }
    .hc-stat .label { font-size:11px; opacity:.75; }

    /* ========== Section Common ========== */
    .section { padding:100px 0; }
    .section-alt { background:var(--color-bg-surface); }
    .section-white { background:#fff; }
    .section-head { text-align:center; margin-bottom:var(--space-12); }
    .section-eyebrow {
      display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px;
      text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-3);
    }
    .section-head h2 {
      font-size:38px; font-weight:800; letter-spacing:-0.5px; line-height:1.25;
      margin-bottom:var(--space-4);
    }
    .section-head p {
      font-size:17px; color:var(--color-text-muted); max-width:560px; margin:0 auto;
    }

    /* ========== Core Capabilities ========== */
    .caps-grid {
      display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6);
    }
    .cap-card {
      position:relative; background:var(--color-bg-card);
      border-radius:var(--radius-xl); padding:var(--space-8) var(--space-6);
      box-shadow:var(--shadow-card);
      transition:all .4s cubic-bezier(.16,1,.3,1);
      overflow:hidden;
      cursor:default;
    }
    .cap-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      transition:height .35s;
      border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    }
    .cap-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
    .cap-card:hover::before { height:5px; }
    .cap-card:nth-child(1)::before { background:linear-gradient(90deg,#0faeff,#5ed4ff); }
    .cap-card:nth-child(2)::before { background:linear-gradient(90deg,#10b981,#6ee7b7); }
    .cap-card:nth-child(3)::before { background:linear-gradient(90deg,#7c5cfc,#c4b5fd); }
    .cap-card:nth-child(4)::before { background:linear-gradient(90deg,#ff7849,#ffa940); }
    .cap-icon {
      width:48px; height:48px; border-radius:var(--radius-lg);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:var(--space-5);
    }
    .cap-card:nth-child(1) .cap-icon { background:rgba(15,174,255,0.1); }
    .cap-card:nth-child(2) .cap-icon { background:rgba(16,185,129,0.1); }
    .cap-card:nth-child(3) .cap-icon { background:rgba(124,92,252,0.1); }
    .cap-card:nth-child(4) .cap-icon { background:rgba(255,120,73,0.1); }
    .cap-icon svg { width:24px; height:24px; }
    .cap-card:nth-child(1) .cap-icon svg { color:var(--color-primary); }
    .cap-card:nth-child(2) .cap-icon svg { color:#10b981; }
    .cap-card:nth-child(3) .cap-icon svg { color:#7c5cfc; }
    .cap-card:nth-child(4) .cap-icon svg { color:#ff7849; }
    .cap-card h3 { font-size:17px; font-weight:700; margin-bottom:var(--space-2); }
    .cap-card p { font-size:13px; color:var(--color-text-muted); line-height:1.6; }

    /* ========== Flow Section ========== */
    .flow-row { display:flex; align-items:stretch; gap:0; position:relative; }
    .flow-step {
      flex:1; text-align:center; position:relative; z-index:2;
      padding:var(--space-5);
    }
    .flow-step::after {
      content:''; position:absolute; top:48px; left:calc(50% + 40px);
      width:calc(100% - 80px); height:2px;
      background:linear-gradient(90deg,var(--color-primary-light),rgba(15,174,255,0.2));
    }
    .flow-step:last-child::after { display:none; }
    .flow-step-num {
      width:56px; height:56px; border-radius:50%; margin:0 auto var(--space-4);
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
      color:#fff; font-size:22px; font-weight:800;
      box-shadow:0 6px 20px rgba(15,174,255,0.25);
      position:relative; z-index:3;
    }
    .flow-step:nth-child(even) .flow-step-num {
      background:linear-gradient(135deg,#7c5cfc,#5b3cf6);
      box-shadow:0 6px 20px rgba(124,92,252,0.25);
    }
    .flow-step h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
    .flow-step p { font-size:12px; color:var(--color-text-muted); line-height:1.5; }

    /* ========== Modules Grid ========== */
    .modules-grid {
      display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
    }
    .module-card {
      background:var(--color-bg-card); border-radius:var(--radius-lg);
      padding:var(--space-6); box-shadow:var(--shadow-card);
      transition:all .35s cubic-bezier(.16,1,.3,1);
      display:flex; align-items:flex-start; gap:var(--space-4);
      cursor:default;
    }
    .module-card:hover {
      transform:translateY(-4px); box-shadow:var(--shadow-hover);
      border-color:rgba(15,174,255,0.12);
    }
    .module-card-icon {
      width:44px; height:44px; border-radius:var(--radius-md); flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:transform .3s;
    }
    .module-card:hover .module-card-icon { transform:scale(1.1); }
    .module-card-icon svg { width:22px; height:22px; stroke-width:1.75; }
    .module-card h4 { font-size:15px; font-weight:700; margin-bottom:2px; }
    .module-card p { font-size:12px; color:var(--color-text-muted); line-height:1.5; }

    .mc-blue  .module-card-icon { background:rgba(15,174,255,0.1); }
    .mc-blue  .module-card-icon svg { stroke:#0faeff; }
    .mc-green .module-card-icon { background:rgba(16,185,129,0.1); }
    .mc-green .module-card-icon svg { stroke:#10b981; }
    .mc-purple .module-card-icon { background:rgba(124,92,252,0.1); }
    .mc-purple .module-card-icon svg { stroke:#7c5cfc; }
    .mc-orange .module-card-icon { background:rgba(255,120,73,0.1); }
    .mc-orange .module-card-icon svg { stroke:#ff7849; }
    .mc-amber .module-card-icon { background:rgba(255,169,64,0.1); }
    .mc-amber .module-card-icon svg { stroke:#ffa940; }
    .mc-teal  .module-card-icon { background:rgba(20,184,166,0.1); }
    .mc-teal  .module-card-icon svg { stroke:#14b8a6; }
    .mc-pink  .module-card-icon { background:rgba(236,72,153,0.1); }
    .mc-pink  .module-card-icon svg { stroke:#ec4899; }
    .mc-cyan  .module-card-icon { background:rgba(6,182,212,0.1); }
    .mc-cyan  .module-card-icon svg { stroke:#06b6d4; }

    /* ========== Multi-Platform ========== */
    .platform-row {
      display:flex; align-items:center; gap:var(--space-16);
    }
    .platform-info { flex:1; }
    .platform-info h3 { font-size:28px; font-weight:800; margin-bottom:var(--space-4); letter-spacing:-0.5px; }
    .platform-info p { font-size:16px; color:var(--color-text-secondary); line-height:1.7; margin-bottom:var(--space-6); }
    .platform-tags { display:flex; flex-wrap:wrap; gap:var(--space-3); }
    .platform-tag {
      display:inline-flex; align-items:center; gap:6px;
      padding:8px 18px; border-radius:var(--radius-full);
      background:rgba(15,174,255,0.08); color:var(--color-primary-deeper);
      font-size:14px; font-weight:600;
    }
    .platform-tag svg { width:18px; height:18px; }
    .platform-visual { flex:1; display:flex; align-items:center; justify-content:center; gap:0; position:relative; }
    .platform-device {
      width:220px; border-radius:var(--radius-2xl); padding:32px 24px 28px;
      text-align:center; position:relative; overflow:hidden;
      transition:all .45s cubic-bezier(.16,1,.3,1);
    }
    .platform-device::before {
      content:''; position:absolute; inset:0; border-radius:inherit;
      transition:opacity .4s;
    }
    .platform-device:nth-child(1) {
      background:linear-gradient(180deg,rgba(15,174,255,0.06),rgba(94,212,255,0.02)) border-box;
      border:1px solid rgba(15,174,255,0.10);
      box-shadow:0 8px 32px rgba(0,60,120,0.06),0 0 0 1px rgba(15,174,255,0.04) inset;
      z-index:2;
    }
    .platform-device:nth-child(2) {
      background:linear-gradient(180deg,rgba(124,92,252,0.05),rgba(196,181,253,0.02)) border-box;
      border:1px solid rgba(124,92,252,0.10);
      box-shadow:0 8px 32px rgba(80,50,180,0.06),0 0 0 1px rgba(124,92,252,0.04) inset;
      z-index:2;
    }
    .platform-device:hover { transform:translateY(-6px); }
    .platform-device:nth-child(1):hover { box-shadow:0 20px 48px rgba(0,100,200,0.14),0 0 0 1px rgba(15,174,255,0.08) inset; }
    .platform-device:nth-child(2):hover { box-shadow:0 20px 48px rgba(90,50,200,0.14),0 0 0 1px rgba(124,92,252,0.08) inset; }

    /* sync connector */
    .platform-sync {
      position:relative; z-index:1;
      width:48px; display:flex; flex-direction:column; align-items:center; gap:2px;
      margin:0 -8px;
    }
    .platform-sync-line {
      width:2px; height:14px; border-radius:1px;
      background:linear-gradient(180deg,transparent,rgba(15,174,255,0.25),rgba(124,92,252,0.25),transparent);
    }
    .platform-sync-dot {
      width:8px; height:8px; border-radius:50%; position:relative;
    }
    .platform-sync-dot::before {
      content:''; position:absolute; inset:-3px; border-radius:50%;
      background:rgba(15,174,255,0.12); animation:syncPulse 2s ease-in-out infinite;
    }
    .platform-sync-dot::after {
      content:''; position:absolute; inset:0; border-radius:50%;
      background:linear-gradient(135deg,#0faeff,#7c5cfc);
    }
    @keyframes syncPulse {
      0%,100% { transform:scale(1); opacity:0.6; }
      50% { transform:scale(1.8); opacity:0.15; }
    }

    .pd-illustration {
      height:130px; display:flex; align-items:center; justify-content:center;
      margin-bottom:16px; position:relative;
    }
    .pd-illustration svg { width:auto; height:100%; }
    .platform-device h5 {
      font-size:17px; font-weight:800; margin-bottom:6px; letter-spacing:-0.01em;
    }
    .platform-device:nth-child(1) h5 { color:var(--color-primary-deeper); }
    .platform-device:nth-child(2) h5 { color:var(--color-purple-dark); }
    .pd-subtitle { font-size:12px; color:var(--color-text-muted); margin-bottom:16px; }
    .pd-features { display:flex; flex-direction:column; gap:8px; }
    .pd-feat {
      display:flex; align-items:center; gap:8px; padding:6px 12px;
      border-radius:var(--radius-sm); font-size:12px; font-weight:500;
      transition:all .25s;
    }
    .platform-device:nth-child(1) .pd-feat { background:rgba(15,174,255,0.05); color:#006bb3; }
    .platform-device:nth-child(2) .pd-feat { background:rgba(124,92,252,0.05); color:#5b3cf6; }
    .pd-feat-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .platform-device:nth-child(1) .pd-feat-dot { background:var(--color-primary); }
    .platform-device:nth-child(2) .pd-feat-dot { background:#7c5cfc; }
    .platform-device:hover .pd-feat { opacity:1; }

    /* ========== Service ========== */
    .service-grid {
      display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6);
    }
    .service-card {
      position:relative; background:var(--color-bg-card);
      border-radius:var(--radius-2xl); padding:var(--space-8) var(--space-6) var(--space-6);
      box-shadow:0 2px 16px rgba(0,60,120,0.04);
      transition:all .45s cubic-bezier(.16,1,.3,1);
      overflow:hidden; cursor:default;
    }
    .service-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:4px;
      border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
      opacity:0; transition:opacity .35s;
    }
    .service-card:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(0,60,120,0.10); }
    .service-card:hover::before { opacity:1; }
    .service-card:nth-child(1)::before { background:linear-gradient(90deg,#0faeff,#5ed4ff); }
    .service-card:nth-child(2)::before { background:linear-gradient(90deg,#10b981,#6ee7b7); }
    .service-card:nth-child(3)::before { background:linear-gradient(90deg,#7c5cfc,#c4b5fd); }
    .service-card:nth-child(4)::before { background:linear-gradient(90deg,#ff7849,#ffa940); }

    .sc-badge {
      display:inline-flex; align-items:center; gap:4px;
      padding:3px 12px; border-radius:var(--radius-full);
      font-size:10px; font-weight:700; letter-spacing:1px;
      text-transform:uppercase; margin-bottom:var(--space-4);
    }
    .service-card:nth-child(1) .sc-badge { background:rgba(15,174,255,0.08); color:var(--color-primary-deeper); }
    .service-card:nth-child(2) .sc-badge { background:rgba(16,185,129,0.08); color:#059669; }
    .service-card:nth-child(3) .sc-badge { background:rgba(124,92,252,0.08); color:var(--color-purple-dark); }
    .service-card:nth-child(4) .sc-badge { background:rgba(255,120,73,0.08); color:#d94a1a; }

    .sc-icon-wrap {
      width:64px; height:64px; border-radius:var(--radius-xl);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:var(--space-5); position:relative;
    }
    .sc-icon-wrap::after {
      content:''; position:absolute; inset:-4px; border-radius:inherit;
      opacity:0; transition:opacity .35s;
    }
    .service-card:hover .sc-icon-wrap::after { opacity:1; }
    .service-card:nth-child(1) .sc-icon-wrap { background:linear-gradient(135deg,rgba(15,174,255,0.12),rgba(94,212,255,0.06)); }
    .service-card:nth-child(1) .sc-icon-wrap::after { box-shadow:0 0 0 4px rgba(15,174,255,0.12); }
    .service-card:nth-child(2) .sc-icon-wrap { background:linear-gradient(135deg,rgba(16,185,129,0.12),rgba(110,231,183,0.06)); }
    .service-card:nth-child(2) .sc-icon-wrap::after { box-shadow:0 0 0 4px rgba(16,185,129,0.12); }
    .service-card:nth-child(3) .sc-icon-wrap { background:linear-gradient(135deg,rgba(124,92,252,0.12),rgba(196,181,253,0.06)); }
    .service-card:nth-child(3) .sc-icon-wrap::after { box-shadow:0 0 0 4px rgba(124,92,252,0.12); }
    .service-card:nth-child(4) .sc-icon-wrap { background:linear-gradient(135deg,rgba(255,120,73,0.12),rgba(255,169,64,0.06)); }
    .service-card:nth-child(4) .sc-icon-wrap::after { box-shadow:0 0 0 4px rgba(255,120,73,0.12); }

    .sc-icon-wrap svg { width:28px; height:28px; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .service-card:nth-child(1) .sc-icon-wrap svg { color:var(--color-primary); }
    .service-card:nth-child(2) .sc-icon-wrap svg { color:#10b981; }
    .service-card:nth-child(3) .sc-icon-wrap svg { color:#7c5cfc; }
    .service-card:nth-child(4) .sc-icon-wrap svg { color:#ff7849; }

    .service-card h4 {
      font-size:18px; font-weight:800; margin-bottom:var(--space-4);
      letter-spacing:-0.01em;
    }
    .service-card:hover h4 { color:var(--color-primary-deeper); }

    .sc-features {
      display:flex; flex-direction:column; gap:var(--space-3);
    }
    .sc-feature-item {
      display:flex; align-items:flex-start; gap:var(--space-3);
      padding:var(--space-3); border-radius:var(--radius-md);
      transition:all .3s; font-size:13px; line-height:1.55;
      color:var(--color-text-secondary);
    }
    .sc-feature-item:hover { background:var(--color-bg-page); }
    .sc-feature-dot {
      width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px;
      display:flex; align-items:center; justify-content:center;
    }
    .sc-feature-dot svg { width:10px; height:10px; stroke:#fff; stroke-width:2.5; fill:none; }
    .service-card:nth-child(1) .sc-feature-dot { background:var(--color-primary); }
    .service-card:nth-child(2) .sc-feature-dot { background:#10b981; }
    .service-card:nth-child(3) .sc-feature-dot { background:#7c5cfc; }
    .service-card:nth-child(4) .sc-feature-dot { background:#ff7849; }

    /* decorative watermark */
    .sc-watermark {
      position:absolute; bottom:-18px; right:-14px;
      font-size:96px; font-weight:900; line-height:1;
      opacity:.025; pointer-events:none; user-select:none;
      letter-spacing:-0.04em;
    }

    /* ========== Cases ========== */
    .cases-section {
      padding:var(--space-20) 0;
      background:var(--color-bg-page);
    }
    .cases-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
      margin-top:var(--space-10);
    }
    .case-card {
      position:relative; background:#fff; border-radius:var(--radius-lg);
      padding:var(--space-8); box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,60,120,0.04);
      transition:all .35s cubic-bezier(.16,1,.3,1);
      display:flex; flex-direction:column;
      border:1px solid rgba(15,174,255,0.06);
    }
    .case-card:hover {
      transform:translateY(-4px);
      box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 8px 30px rgba(0,100,180,0.10);
      border-color:rgba(15,174,255,0.12);
    }
    /* Left accent dot + subtle line */
    .case-card-accent {
      display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5);
    }
    .case-accent-dot {
      width:8px; height:8px; border-radius:50%; flex-shrink:0;
    }
    .case-card:nth-child(1) .case-accent-dot { background:var(--color-primary); }
    .case-card:nth-child(2) .case-accent-dot { background:var(--color-purple); }
    .case-card:nth-child(3) .case-accent-dot { background:var(--color-emerald); }
    .case-accent-line {
      flex:1; height:1px; background:var(--color-border); border-radius:1px;
    }
    .case-card:nth-child(1) .case-accent-line { background:rgba(15,174,255,0.12); }
    .case-card:nth-child(2) .case-accent-line { background:rgba(124,92,252,0.12); }
    .case-card:nth-child(3) .case-accent-line { background:rgba(16,185,129,0.12); }
    /* Org badge */
    .case-org-row {
      display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-5);
    }
    .case-org-icon {
      width:40px; height:40px; border-radius:var(--radius-md); flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:16px; font-weight:800; color:#fff;
    }
    .case-card:nth-child(1) .case-org-icon { background:linear-gradient(135deg,#0faeff,#0090d9); }
    .case-card:nth-child(2) .case-org-icon { background:linear-gradient(135deg,#7c5cfc,#5b3cf6); }
    .case-card:nth-child(3) .case-org-icon { background:linear-gradient(135deg,#10b981,#059669); }
    .case-org-name { font-size:16px; font-weight:700; color:var(--color-text-primary); }
    .case-org-type {
      font-size:12px; color:var(--color-text-muted);
      display:inline-block; margin-top:1px;
      padding:2px 8px; border-radius:var(--radius-full);
      font-weight:500;
    }
    .case-card:nth-child(1) .case-org-type { background:var(--color-primary-bg); color:var(--color-primary-dark); }
    .case-card:nth-child(2) .case-org-type { background:#f3f0ff; color:var(--color-purple); }
    .case-card:nth-child(3) .case-org-type { background:#ecfdf5; color:#059669; }
    .case-content {
      font-size:14px; line-height:1.85; color:var(--color-text-secondary);
      margin-bottom:var(--space-6); flex:1;
    }
    .case-metric-row {
      display:flex; align-items:center; gap:var(--space-6);
      padding-top:var(--space-5);
      border-top:1px solid var(--color-border);
    }
    .case-metric {
      display:flex; flex-direction:column;
    }
    .case-metric-num {
      font-size:22px; font-weight:800; letter-spacing:-0.5px; line-height:1.2;
      color:var(--color-text-primary);
    }
    .case-metric-label {
      font-size:11px; color:var(--color-text-muted);
    }
    .case-metric-icon {
      margin-left:auto; opacity:.12;
    }
    .case-card:nth-child(1) .case-metric-icon svg { fill:var(--color-primary); }
    .case-card:nth-child(2) .case-metric-icon svg { fill:var(--color-purple); }
    .case-card:nth-child(3) .case-metric-icon svg { fill:var(--color-emerald); }

    /* ========== Responsive ========== */
    @media (max-width:1024px) {
      .caps-grid { grid-template-columns:repeat(2,1fr); }
      .modules-grid { grid-template-columns:repeat(2,1fr); }
      .service-grid { grid-template-columns:repeat(2,1fr); }
      .cases-grid { grid-template-columns:repeat(2,1fr); }
      .hero .container { flex-direction:column; text-align:center; }
      .hero-desc { max-width:100%; margin:0 auto var(--space-8); }
      .hero-actions { justify-content:center; }
      .hero h1 { font-size:40px; }
      .hero-card { width:100%; max-width:420px; }
      .platform-row { flex-direction:column; }
      .platform-visual { flex-direction:column; gap:12px; }
      .platform-sync { flex-direction:row; width:auto; height:48px; margin:0; }
      .platform-sync-line { width:14px; height:2px; }
      .flow-row { flex-wrap:wrap; }
      .flow-step { flex:0 0 50%; }
      .flow-step::after { display:none; }
      .footer-grid { flex-direction:column; gap:var(--space-8); }
      .footer-links { flex-wrap:wrap; gap:var(--space-8); }
    }
    @media (max-width:640px) {
      .caps-grid { grid-template-columns:1fr; }
      .modules-grid { grid-template-columns:1fr; }
      .service-grid { grid-template-columns:1fr; }
      .cases-grid { grid-template-columns:1fr; }
      .hero h1 { font-size:32px; }
      .platform-visual { flex-direction:column; gap:12px; }
      .platform-sync { flex-direction:row; width:auto; height:48px; margin:0; }
      .platform-sync-line { width:14px; height:2px; }
      .platform-device { width:100%; }
      .section-head h2 { font-size:28px; }
      .flow-step { flex:0 0 100%; }
      .nav-links { display:none; }
    }