:root {
      --bg: #f9f8ff;
      --bg-soft: #f2efff;
      --panel: rgba(255, 255, 255, 0.82);
      --panel-solid: #ffffff;
      --line: rgba(94, 65, 177, 0.14);
      --line-strong: rgba(116, 79, 225, 0.34);
      --text: #21163e;
      --muted: #716b86;
      --primary: #7356e8;
      --primary-2: #a34ee8;
      --cyan: #675be8;
      --green: #1db783;
      --shadow: 0 24px 70px rgba(83, 55, 160, 0.14);
      --radius: 24px;
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(132, 91, 231, 0.15), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(195, 151, 255, 0.16), transparent 25%),
        var(--bg);
      font-family: var(--font);
      line-height: 1.6;
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.55;
      background-image:
        linear-gradient(rgba(109,76,196,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109,76,196,.045) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to bottom, black, transparent 72%);
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { color: inherit; }
    .container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
    .section { padding: 112px 0; position: relative; }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--cyan);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .section-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
    .section-title {
      max-width: 720px;
      margin: 16px 0 14px;
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.12;
      letter-spacing: -.04em;
    }
    .section-desc { max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: #cdd3ff;
      background: rgba(124, 141, 255, .08);
      font-size: 13px;
      font-weight: 700;
    }
    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 14px var(--green);
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      border-bottom: 1px solid transparent;
      transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
    }
    .site-header.scrolled {
      background: rgba(255, 255, 255, .86);
      border-color: var(--line);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 30px rgba(83, 55, 160, .08);
    }
    .nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: -.03em; font-size: 20px; }
    .brand-mark {
      flex: 0 0 auto;
      width: 48px;
      height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 10px 24px rgba(27, 190, 165, .22));
    }
    .brand-mark img {
      display: block;
      width: 48px;
      height: 48px;
      object-fit: contain;
    }
    .brand-name {
      color: #21163e;
      font-size: 22px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: -.035em;
      white-space: nowrap;
    }
    .site-header.scrolled .brand-name { color: #21163e; }
    .site-header.scrolled .brand small { color: #716b86; }
    .brand small { color: var(--muted); font-weight: 650; margin-left: 2px; }
    .nav-links { display: flex; align-items: center; gap: 30px; color: #b5bfdc; font-size: 14px; font-weight: 650; }
    .nav-links a { transition: color .2s ease; }
    .nav-links a:hover, .nav-links a.active { color: white; }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .login-link { color: #c8d0ea; font-size: 14px; font-weight: 700; padding: 8px 4px; }
    .btn {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 12px;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: white;
      background: linear-gradient(135deg, #7789ff, #9c66ed);
      box-shadow: 0 12px 30px rgba(112, 105, 240, .28);
    }
    .btn-primary:hover { box-shadow: 0 16px 38px rgba(112, 105, 240, .38); }
    .btn-ghost { border-color: var(--line); background: rgba(255,255,255,.035); color: #dde3f7; }
    .btn-ghost:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); }
    .btn-sm { min-height: 40px; padding: 0 16px; border-radius: 10px; }
    .btn-arrow { transition: transform .2s ease; }
    .btn:hover .btn-arrow { transform: translateX(3px); }
    .menu-btn {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255,255,255,.04);
      cursor: pointer;
    }
    .menu-btn span { display: block; width: 18px; height: 2px; background: white; margin: 4px auto; border-radius: 3px; transition: .2s ease; }

    .hero { min-height: 900px; padding: 170px 0 80px; display: flex; align-items: center; position: relative; }
    .hero::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: min(1160px, calc(100% - 40px));
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }
    .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 48px; }
    .hero-copy-wrap { position: relative; z-index: 3; }
    .hero h1 {
      margin: 24px 0 22px;
      max-width: 720px;
      font-size: clamp(48px, 6.2vw, 76px);
      line-height: 1.02;
      letter-spacing: -.058em;
    }
    .gradient-text {
      color: transparent;
      background: linear-gradient(100deg, #fff 8%, #8de4ff 45%, #a990ff 82%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .hero-copy { max-width: 590px; color: #aeb8d3; font-size: 18px; line-height: 1.8; }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
    .hero-actions .btn { min-height: 54px; padding-inline: 25px; }
    .hero-note { margin-top: 22px; color: #7884a2; font-size: 13px; display: flex; align-items: center; gap: 9px; }
    .hero-note::before { content: "✓"; color: var(--green); font-weight: 900; }
    .hero-clouds { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
    .hero-clouds-label { margin-right: 4px; color: #827a91; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
    .hero-clouds span:not(.hero-clouds-label) { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: #62566f; background: rgba(255,255,255,.72); box-shadow: 0 7px 20px rgba(76,48,146,.04); font-size: 9px; font-weight: 800; }

    .cloud-visual { position: relative; height: 560px; display: grid; place-items: center; perspective: 900px; }
    .cloud-visual::before { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(112,76,220,.10); border-radius: 35% 65% 62% 38% / 46% 38% 62% 54%; background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(230,223,255,.25)); transform: rotate(9deg); box-shadow: 0 30px 90px rgba(92,59,176,.07); }
    .orbit { position: absolute; border: 1px solid rgba(125, 145, 255, .21); border-radius: 50%; transform: rotateX(66deg) rotateZ(-8deg); }
    .orbit.one { width: 430px; height: 430px; animation: spin 18s linear infinite; }
    .orbit.two { width: 330px; height: 330px; border-style: dashed; animation: spinReverse 24s linear infinite; }
    .orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); top: 52px; left: 47px; box-shadow: 0 0 17px var(--cyan); }
    .orbit.two::after { background: var(--primary-2); box-shadow: 0 0 17px var(--primary-2); top: 248px; left: 274px; }
    .planet-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(117, 131, 255, .26), rgba(85, 76, 180, .08) 45%, transparent 72%); filter: blur(4px); }
    .calculator-panel {
      position: relative;
      z-index: 2;
      width: min(420px, 100%);
      padding: 28px;
      border: 1px solid rgba(115,82,212,.18);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(242,238,255,.94));
      box-shadow: 0 30px 70px rgba(92,60,175,.16), inset 0 1px rgba(255,255,255,.92);
      backdrop-filter: blur(16px);
      animation: float 6s ease-in-out infinite;
    }
    .calculator-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border: 1px solid rgba(113,76,220,.14);
      border-radius: 999px;
      color: #6847cc;
      background: rgba(116,79,224,.08);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .calculator-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 12px var(--green);
    }
    .calculator-panel h2 {
      margin: 16px 0 10px;
      color: #33274d;
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.16;
      letter-spacing: -.04em;
    }
    .calculator-panel p {
      margin: 0;
      color: #746c88;
      font-size: 13px;
      line-height: 1.75;
    }
    .calculator-list {
      display: grid;
      gap: 10px;
      margin-top: 22px;
    }
    .calculator-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 54px;
      padding: 13px 14px;
      border: 1px solid rgba(112,76,220,.12);
      border-radius: 15px;
      color: #3f315f;
      background: rgba(255,255,255,.74);
      box-shadow: 0 10px 26px rgba(82,53,158,.06);
      text-decoration: none;
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
    }
    .calculator-list a:hover,
    .calculator-list a:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(113,76,220,.28);
      background: #fff;
      box-shadow: 0 16px 36px rgba(82,53,158,.12);
      outline: none;
    }
    .calculator-list span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.35;
    }
    .calculator-list i {
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: linear-gradient(135deg, #7455dc, #4de4d2);
      box-shadow: 0 0 14px rgba(116,85,220,.36);
    }
    .calculator-list b {
      flex: 0 0 auto;
      color: #7455dc;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .trust-row { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); overflow: hidden; box-shadow: 0 20px 55px rgba(78,50,150,.07); }
    .trust-item { position: relative; padding: 22px 24px; background: rgba(8, 13, 28, .94); overflow: hidden; }
    .trust-item::before { content: ""; position: absolute; left: 0; top: 0; width: 36%; height: 2px; background: linear-gradient(90deg, #7152df, #d66bdc); }
    .trust-item b { display: block; font-size: 25px; letter-spacing: -.03em; }
    .trust-item span { color: #7e89a6; font-size: 12px; }

    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
    .feature-card {
      position: relative;
      min-height: 275px;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgba(17, 26, 51, .75), rgba(10, 15, 31, .72));
      overflow: hidden;
      transition: transform .3s ease, border-color .3s ease, background .3s ease;
    }
    .feature-card:hover { transform: translateY(-6px); border-color: rgba(124,141,255,.38); background: linear-gradient(145deg, rgba(24, 34, 67, .84), rgba(11, 17, 35, .78)); }
    .feature-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -70px; top: -70px; background: rgba(124,141,255,.08); filter: blur(2px); }
    .feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(124,141,255,.28); border-radius: 14px; background: rgba(124,141,255,.09); font-size: 20px; }
    .feature-card h3 { margin: 23px 0 10px; font-size: 20px; }
    .feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
    .feature-link { display: inline-flex; margin-top: 20px; color: #aeb8ff; font-size: 13px; font-weight: 800; }

    .ali-hero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 54px; border: 1px solid rgba(113,76,220,.16); border-radius: 30px; background: radial-gradient(circle at 88% 16%, rgba(255,106,0,.11), transparent 25%), linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,241,255,.94)); box-shadow: 0 30px 75px rgba(82,52,158,.10); overflow: hidden; }
    .ali-hero::before { content: "ALIBABA CLOUD"; position: absolute; right: -20px; bottom: -24px; color: rgba(255,106,0,.035); font-size: 76px; font-weight: 950; letter-spacing: -.07em; line-height: 1; white-space: nowrap; }
    .ali-copy { position: relative; z-index: 2; }
    .ali-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(255,106,0,.22); border-radius: 999px; color: #9a480a; background: rgba(255,106,0,.07); font-size: 11px; font-weight: 850; }
    .ali-badge::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: #ff6a00; box-shadow: 0 0 11px rgba(255,106,0,.62); transform: rotate(45deg); }
    .ali-copy h2 { margin: 20px 0 16px; max-width: 650px; font-size: clamp(39px, 5vw, 62px); line-height: 1.05; letter-spacing: -.052em; }
    .ali-copy > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
    .ali-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
    .ali-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
    .ali-point { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.68); }
    .ali-point b { display: block; color: #3d3152; font-size: 12px; }
    .ali-point span { display: block; margin-top: 3px; color: #7a718c; font-size: 10px; }
    .ali-point b::before { content: "✓"; margin-right: 7px; color: #ff6a00; font-weight: 900; }
    .ali-visual { position: relative; min-height: 465px; display: grid; place-items: center; }
    .ali-globe { position: absolute; width: 350px; height: 350px; border: 1px solid rgba(112,76,220,.18); border-radius: 50%; background: radial-gradient(circle, rgba(255,106,0,.07), rgba(120,82,222,.05) 43%, transparent 67%); box-shadow: inset 0 0 60px rgba(111,74,211,.05); }
    .ali-globe::before,
    .ali-globe::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(111,75,214,.15); border-radius: 50%; }
    .ali-globe::before { transform: scaleX(.42); }
    .ali-globe::after { transform: scaleY(.38); }
    .ali-core { position: relative; z-index: 2; width: 170px; height: 170px; display: grid; place-items: center; padding: 25px; border: 1px solid rgba(255,106,0,.20); border-radius: 24px; color: #392b4e; background: rgba(255,255,255,.92); box-shadow: 0 28px 58px rgba(82,52,158,.16), inset 0 1px white; text-align: center; font-size: 23px; font-weight: 950; line-height: 1.05; animation: float 7s ease-in-out infinite; }
    .ali-core span { display: block; margin-top: 7px; color: #ff6a00; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
    .ali-node { position: absolute; z-index: 3; padding: 8px 10px; border: 1px solid rgba(108,74,205,.15); border-radius: 9px; color: #5e526f; background: rgba(255,255,255,.89); box-shadow: 0 11px 26px rgba(74,47,143,.09); font-size: 9px; font-weight: 800; backdrop-filter: blur(9px); }
    .ali-node::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #ff6a00; box-shadow: 0 0 8px rgba(255,106,0,.55); }
    .ali-node-1 { left: 3%; top: 20%; } .ali-node-2 { right: 2%; top: 24%; } .ali-node-3 { left: 0; bottom: 20%; } .ali-node-4 { right: 5%; bottom: 15%; } .ali-node-5 { left: 39%; top: 3%; }
    .ali-data-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); overflow: hidden; }
    .ali-data { padding: 23px 22px; background: rgba(255,255,255,.93); }
    .ali-data strong { display: block; color: #e85f00; font-size: 29px; line-height: 1.15; letter-spacing: -.04em; }
    .ali-data b { display: block; margin-top: 6px; color: #4c405f; font-size: 11px; }
    .ali-data span { display: block; margin-top: 3px; color: #837a91; font-size: 9px; }
    .ali-section-head { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-top: 72px; }
    .ali-section-head h3 { margin: 0; font-size: clamp(27px, 3.5vw, 41px); letter-spacing: -.04em; }
    .ali-section-head p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; }
    .ali-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
    .ali-product { position: relative; min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 14px 36px rgba(75,48,145,.05); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .ali-product:hover { transform: translateY(-5px); border-color: rgba(255,106,0,.28); box-shadow: 0 22px 48px rgba(75,48,145,.10); }
    .ali-product-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #bd5108; background: rgba(255,106,0,.09); font-size: 16px; font-weight: 900; }
    .ali-product h4 { margin: 16px 0 7px; font-size: 17px; }
    .ali-product p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
    .ali-product-tag { position: absolute; right: 17px; top: 17px; padding: 4px 7px; border-radius: 6px; color: #7a58c4; background: #f0ebff; font-size: 8px; font-weight: 850; }
    .ali-region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
    .ali-region-card { min-height: 190px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,244,255,.90)); }
    .ali-region-card > span { color: #ff6a00; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
    .ali-region-card h4 { margin: 12px 0 7px; font-size: 16px; }
    .ali-region-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
    .ali-region-card small { display: block; margin-top: 15px; color: #7457b7; font-size: 9px; font-weight: 750; }
    .ali-update { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 38px; align-items: center; margin-top: 72px; padding: 42px; border: 1px solid rgba(255,106,0,.19); border-radius: 24px; background: radial-gradient(circle at 12% 35%, rgba(255,106,0,.10), transparent 30%), linear-gradient(145deg, #fff, #f5f1ff); box-shadow: 0 24px 58px rgba(78,49,151,.08); overflow: hidden; }
    .ali-update-label { display: inline-flex; padding: 6px 9px; border-radius: 7px; color: #a4480a; background: rgba(255,106,0,.09); font-size: 9px; font-weight: 900; letter-spacing: .09em; }
    .ali-update h3 { margin: 15px 0 0; font-size: clamp(27px, 3.2vw, 39px); line-height: 1.2; letter-spacing: -.035em; }
    .ali-update-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .ali-update-copy a { display: inline-flex; margin-top: 17px; color: #6d4bcf; font-size: 11px; font-weight: 900; }
    .ali-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
    .ali-step { min-height: 180px; padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.88); }
    .ali-step-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg, #ff7a19, #ff5b00); box-shadow: 0 10px 22px rgba(255,106,0,.18); font-size: 11px; font-weight: 900; }
    .ali-step h4 { margin: 18px 0 7px; font-size: 15px; }
    .ali-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

    .console-wrap {
      margin-top: 48px;
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      min-height: 530px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(16,24,47,.95), rgba(9,14,29,.94));
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .console-copy { padding: 48px; border-right: 1px solid var(--line); }
    .console-copy h3 { font-size: 31px; line-height: 1.2; margin: 20px 0 16px; letter-spacing: -.035em; }
    .console-copy > p { color: var(--muted); font-size: 15px; }
    .console-points { display: grid; gap: 20px; margin-top: 34px; }
    .console-point { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
    .point-number { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; color: #bfc6ff; font-size: 11px; font-weight: 900; }
    .console-point b { display: block; font-size: 14px; margin-bottom: 2px; }
    .console-point span { color: #7f8aa8; font-size: 12px; }
    .console-ui { padding: 25px; background: rgba(5,9,20,.58); }
    .console-shell { height: 100%; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #0b1121; overflow: hidden; }
    .console-bar { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
    .window-dots { display: flex; gap: 6px; }
    .window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #36405b; }
    .window-dots i:first-child { background: #ef7e88; }
    .console-user { color: #7f8aa8; font-size: 11px; }
    .dashboard { display: grid; grid-template-columns: 132px 1fr; height: calc(100% - 52px); }
    .dash-side { padding: 20px 13px; border-right: 1px solid var(--line); }
    .dash-side div { padding: 9px 11px; margin-bottom: 7px; border-radius: 8px; color: #65708d; font-size: 10px; }
    .dash-side div.active { color: #dce1ff; background: rgba(124,141,255,.11); }
    .dash-main { padding: 22px; }
    .dash-head { display: flex; justify-content: space-between; align-items: center; }
    .dash-head b { font-size: 13px; }
    .dash-head span { color: var(--green); font-size: 9px; padding: 4px 7px; border: 1px solid rgba(93,229,161,.24); border-radius: 99px; background: rgba(93,229,161,.07); }
    .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }
    .dash-stat { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.015); }
    .dash-stat span { color: #68738f; font-size: 8px; }
    .dash-stat b { display: block; margin-top: 4px; font-size: 15px; }
    .dash-chart { height: 155px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; position: relative; overflow: hidden; }
    .chart-grid { position: absolute; inset: 14px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(255,255,255,.04) 30px); }
    .chart-line { position: absolute; inset: 20px 15px 17px; display: flex; align-items: end; gap: 6px; }
    .chart-line i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, rgba(124,141,255,.13), rgba(77,228,210,.55)); border-top: 1px solid var(--cyan); }
    .chart-line i:nth-child(1) { height: 24%; } .chart-line i:nth-child(2) { height: 36%; } .chart-line i:nth-child(3) { height: 31%; }
    .chart-line i:nth-child(4) { height: 50%; } .chart-line i:nth-child(5) { height: 45%; } .chart-line i:nth-child(6) { height: 62%; }
    .chart-line i:nth-child(7) { height: 56%; } .chart-line i:nth-child(8) { height: 72%; } .chart-line i:nth-child(9) { height: 66%; }
    .chart-line i:nth-child(10) { height: 84%; } .chart-line i:nth-child(11) { height: 77%; } .chart-line i:nth-child(12) { height: 92%; }

    .aws-hero { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 45px; align-items: center; padding: 54px; border: 1px solid rgba(109,75,207,.18); border-radius: 30px; background: radial-gradient(circle at 86% 20%, rgba(255,153,0,.10), transparent 24%), linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,238,255,.94)); box-shadow: 0 30px 75px rgba(81,52,157,.11); overflow: hidden; }
    .aws-hero::before { content: "AWS"; position: absolute; right: -18px; bottom: -62px; color: rgba(104,70,204,.035); font-size: 180px; font-weight: 950; letter-spacing: -.09em; line-height: 1; }
    .aws-copy { position: relative; z-index: 2; }
    .aws-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(255,153,0,.24); border-radius: 999px; color: #8a5706; background: rgba(255,153,0,.08); font-size: 11px; font-weight: 850; }
    .aws-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff9900; box-shadow: 0 0 11px rgba(255,153,0,.7); }
    .aws-copy h2 { margin: 20px 0 16px; max-width: 650px; font-size: clamp(39px, 5vw, 62px); line-height: 1.05; letter-spacing: -.052em; }
    .aws-copy > p { max-width: 610px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
    .aws-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
    .aws-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 31px; }
    .aws-highlight { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.68); }
    .aws-highlight b { display: block; color: #3d3152; font-size: 12px; }
    .aws-highlight span { display: block; margin-top: 3px; color: #7a718c; font-size: 10px; }
    .aws-highlight b::before { content: "✓"; margin-right: 7px; color: #7250d8; font-weight: 900; }
    .aws-visual { position: relative; min-height: 470px; display: grid; place-items: center; }
    .aws-orbit { position: absolute; border: 1px solid rgba(112,77,215,.17); border-radius: 50%; }
    .aws-orbit.outer { width: 385px; height: 385px; animation: spin 30s linear infinite; }
    .aws-orbit.inner { width: 270px; height: 270px; border-style: dashed; animation: spinReverse 24s linear infinite; }
    .aws-core { position: relative; z-index: 2; width: 174px; height: 174px; display: grid; place-items: center; border: 1px solid rgba(113,76,220,.22); border-radius: 38% 62% 55% 45% / 50% 45% 55% 50%; color: #2b2040; background: linear-gradient(145deg, #fff, #ece6ff); box-shadow: 0 30px 60px rgba(88,56,173,.18), inset 0 1px white; font-size: 40px; font-weight: 950; letter-spacing: -.08em; animation: float 7s ease-in-out infinite; }
    .aws-core::after { content: ""; position: absolute; width: 66px; height: 5px; left: 54px; bottom: 48px; border-radius: 50%; border-bottom: 4px solid #ff9900; transform: rotate(-7deg); }
    .aws-service-pill { position: absolute; z-index: 3; min-width: 78px; padding: 9px 12px; border: 1px solid rgba(107,73,202,.15); border-radius: 10px; color: #544869; background: rgba(255,255,255,.88); box-shadow: 0 12px 28px rgba(75,48,145,.10); text-align: center; font-size: 10px; font-weight: 850; backdrop-filter: blur(10px); }
    .aws-pill-1 { left: 6%; top: 18%; } .aws-pill-2 { right: 3%; top: 25%; } .aws-pill-3 { left: 0; bottom: 22%; } .aws-pill-4 { right: 7%; bottom: 14%; } .aws-pill-5 { left: 40%; top: 3%; }
    .aws-section-head { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-top: 72px; }
    .aws-section-head h3 { margin: 0; font-size: clamp(27px, 3.5vw, 41px); letter-spacing: -.04em; }
    .aws-section-head p { max-width: 510px; margin: 0; color: var(--muted); font-size: 14px; }
    .aws-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
    .aws-product { position: relative; min-height: 185px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 14px 36px rgba(75,48,145,.05); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .aws-product:hover { transform: translateY(-5px); border-color: rgba(112,76,220,.32); box-shadow: 0 22px 48px rgba(75,48,145,.11); }
    .aws-product-type { color: #ff9900; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .aws-product h4 { margin: 12px 0 7px; font-size: 18px; }
    .aws-product p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .aws-product span:last-child { position: absolute; right: 18px; bottom: 15px; color: #7151cb; font-size: 10px; font-weight: 850; }
    .aws-region-bar { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.70); overflow-x: auto; scrollbar-width: none; }
    .aws-region-bar::-webkit-scrollbar { display: none; }
    .aws-region-label { flex: 0 0 auto; padding: 0 10px 0 2px; color: #514568; font-size: 11px; font-weight: 900; }
    .aws-region { flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(108,74,205,.13); border-radius: 9px; color: #6d627f; background: #f7f5ff; font-size: 10px; font-weight: 750; }
    .aws-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
    .aws-step { min-height: 185px; padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,242,255,.90)); }
    .aws-step-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg, #7453dc, #a35add); box-shadow: 0 10px 22px rgba(97,62,190,.17); font-size: 11px; font-weight: 900; }
    .aws-step h4 { margin: 18px 0 7px; font-size: 15px; }
    .aws-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
    .aws-news-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 72px; }
    .aws-news-head h3 { margin: 0; font-size: clamp(27px, 3.5vw, 41px); letter-spacing: -.04em; }
    .aws-news-head p { margin: 0; color: var(--muted); font-size: 12px; }
    .aws-news-head a { color: #6d4bcf; font-weight: 850; }
    .aws-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 27px; }
    .aws-news-card { position: relative; min-height: 218px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.90); box-shadow: 0 14px 38px rgba(74,47,143,.05); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .aws-news-card:hover { transform: translateY(-4px); border-color: rgba(111,75,214,.31); box-shadow: 0 22px 48px rgba(74,47,143,.10); }
    .aws-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #837a91; font-size: 9px; font-weight: 750; }
    .aws-news-meta b { padding: 4px 7px; border-radius: 6px; color: #7651d6; background: #f0ebff; font-size: 8px; letter-spacing: .08em; }
    .aws-news-card h4 { margin: 17px 0 9px; font-size: 17px; line-height: 1.4; }
    .aws-news-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
    .aws-news-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; color: #6d4bcf; font-size: 11px; font-weight: 900; }

    .case-share-section {
      overflow: hidden;
      padding: 88px 0 72px;
      background:
        radial-gradient(circle at 18% 25%, rgba(106,198,255,.13), transparent 30%),
        radial-gradient(circle at 82% 16%, rgba(165,120,245,.13), transparent 28%),
        linear-gradient(180deg, #f5f8ff 0%, #eef7ff 58%, #f6f4ff 100%);
    }
    .case-share-head { text-align: left; }
    .case-share-head .section-title { margin: 0; }
    .case-share-head .section-title em { color: #7455dc; font-style: normal; }
    .case-share-head .section-desc { max-width: 720px; margin: 11px 0 0; }
    .case-carousel {
      position: relative;
      width: min(1160px, calc(100% - 40px));
      margin: 34px auto 0;
      padding: 8px 0 20px;
      overflow: hidden;
    }
    .case-track {
      --case-visible: 4;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - (var(--case-visible) - 1) * 12px) / var(--case-visible));
      gap: 12px;
      transform: translate3d(0,0,0);
      transition: transform .55s cubic-bezier(.22,.61,.36,1);
      will-change: transform;
    }
    @media (min-width: 1280px) {
      .case-track { --case-visible: 5; }
    }
    .case-track.no-transition { transition: none; }
    .case-carousel.is-static .case-track { justify-content: center; will-change: auto; }
    .case-card {
      position: relative;
      min-width: 0;
      border: 0;
      border-radius: 13px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 14px 32px rgba(67,59,108,.09);
      overflow: hidden;
      opacity: 1;
      transform: none;
      transition: transform .28s ease, box-shadow .28s ease;
    }
    .case-card:hover,
    .case-card:focus-within,
    .case-card:focus-visible {
      z-index: 2;
      transform: translateY(-4px);
      box-shadow: 0 20px 42px rgba(67,59,108,.16);
      outline: none;
    }
    .case-image {
      position: relative;
      height: 124px;
      background: linear-gradient(135deg, #eaf6ff, #f5edff);
      overflow: hidden;
    }
    .case-image img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .42s ease; }
    .case-card:hover .case-image img,
    .case-card:focus-visible .case-image img { transform: scale(1.04); }
    .case-image-placeholder { height: 100%; display: grid; place-items: center; color: #7651d6; font-size: 16px; font-weight: 950; }
    .case-body { min-height: 218px; display: flex; flex-direction: column; padding: 15px 16px 16px; }
    .case-brand { min-height: 18px; display: flex; align-items: center; color: #7651d6; font-size: 10px; font-weight: 900; }
    .case-brand span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 2px; background: linear-gradient(135deg, #4de4d2, #8b5cf6); transform: rotate(45deg); }
    .case-card h3 { min-height: 44px; margin: 8px 0 7px; color: #302741; font-size: 15px; line-height: 1.45; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .case-card p { margin: 0; color: #716b7b; font-size: 10.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .case-metrics { display: flex; align-items: end; gap: 14px; margin-top: auto; padding-top: 15px; }
    .case-metrics div { min-width: 0; }
    .case-metrics strong { color: #302741; font-size: 16px; line-height: 1.1; letter-spacing: -.03em; }
    .case-metrics span { margin-left: 4px; color: #898392; font-size: 8px; font-weight: 750; }
    .case-link { display: inline-flex; width: fit-content; margin-top: 12px; color: #7050d4; font-size: 10px; font-weight: 900; }
    .case-detail {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
      color: white;
      background: linear-gradient(180deg, rgba(37,27,70,.14), rgba(34,24,66,.92) 42%, rgba(24,17,47,.98));
      backdrop-filter: blur(2px);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity .28s ease, transform .28s ease;
    }
    .case-card:hover .case-detail,
    .case-card:focus-visible .case-detail,
    .case-card:focus-within .case-detail { opacity: 1; transform: none; pointer-events: auto; }
    .case-detail span { color: rgba(255,255,255,.66); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
    .case-detail h4 { margin: 9px 0 8px; font-size: 17px; line-height: 1.35; letter-spacing: -.02em; }
    .case-detail p { display: -webkit-box; margin: 0; color: rgba(255,255,255,.82); font-size: 11px; line-height: 1.65; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
    .case-detail a { display: inline-flex; width: fit-content; margin-top: 14px; padding: 8px 11px; border: 0; border-radius: 999px; color: white; background: rgba(255,255,255,.14); font-size: 10px; font-weight: 900; }
    .case-share-actions {
      position: absolute;
      inset: 50% 14px auto;
      z-index: 5;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      transform: translateY(-50%);
    }
    .case-nav {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 50%;
      color: #7651d6;
      background: rgba(255,255,255,.94);
      box-shadow: 0 8px 24px rgba(68,49,128,.16);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      pointer-events: auto;
      transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
    }
    .case-nav:hover,
    .case-nav:focus-visible {
      transform: scale(1.06);
      color: white;
      background: linear-gradient(135deg, #7455dc, #9b58df);
      box-shadow: 0 12px 28px rgba(107,70,207,.24);
      outline: none;
    }
    .case-brand-strip {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
      overflow: hidden;
    }
    .case-brand-strip span {
      flex: 0 0 auto;
      min-width: 126px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 13px;
      border-radius: 7px;
      color: #625b70;
      background: rgba(255,255,255,.92);
      box-shadow: 0 5px 16px rgba(67,59,108,.07);
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
    }
    .case-brand-strip i { width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, #4de4d2, #8b5cf6); transform: rotate(45deg); }

    .regions { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 70px; }
    .region-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
    .region-item { padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); display: flex; align-items: center; gap: 10px; }
    .region-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(93,229,161,.7); }
    .region-item b { font-size: 12px; }
    .region-item span { color: #707b98; font-size: 9px; display: block; }
    .map-panel { position: relative; height: 430px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 52% 47%, rgba(124,141,255,.13), transparent 44%), rgba(11,17,34,.72); overflow: hidden; }
    .map-panel::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle, rgba(164,176,255,.42) 1px, transparent 1.5px); background-size: 24px 24px; mask-image: radial-gradient(ellipse, black 20%, transparent 74%); }
    .map-blob { position: absolute; border: 1px solid rgba(124,141,255,.18); background: rgba(124,141,255,.055); filter: drop-shadow(0 0 22px rgba(124,141,255,.08)); }
    .blob-a { width: 170px; height: 110px; left: 76px; top: 80px; border-radius: 65% 45% 54% 44% / 55% 58% 42% 45%; transform: rotate(-12deg); }
    .blob-b { width: 205px; height: 155px; right: 54px; top: 115px; border-radius: 40% 60% 54% 46% / 45% 44% 56% 55%; transform: rotate(7deg); }
    .blob-c { width: 85px; height: 70px; right: 70px; bottom: 64px; border-radius: 43% 57% 44% 56% / 53% 41% 59% 47%; }
    .map-node { position: absolute; width: 10px; height: 10px; border: 2px solid #0e1530; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(77,228,210,.11), 0 0 20px rgba(77,228,210,.55); z-index: 2; }
    .node-1 { left: 27%; top: 40%; } .node-2 { left: 49%; top: 44%; } .node-3 { right: 23%; top: 38%; } .node-4 { right: 17%; bottom: 24%; } .node-5 { left: 18%; top: 28%; }
    .map-label { position: absolute; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(7,11,23,.84); color: #aeb9d8; font-size: 9px; z-index: 3; }
    .label-a { left: 31%; top: 33%; } .label-b { right: 26%; top: 29%; } .label-c { right: 20%; bottom: 14%; }

    .cdn-heading { max-width: 760px; text-align: center; margin: 0 auto; }
    .cdn-heading .section-title,
    .cdn-heading .section-desc { margin-left: auto; margin-right: auto; }
    .cdn-provider-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
    .cdn-provider-strip span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: #635879; background: rgba(255,255,255,.74); box-shadow: 0 8px 22px rgba(77,51,146,.04); font-size: 11px; font-weight: 800; }
    .cdn-provider-strip span:first-child { color: white; border-color: transparent; background: linear-gradient(135deg, #6e4bd7, #a35de0); box-shadow: 0 10px 26px rgba(107,70,207,.20); }
    .cdn-hero { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 52px; align-items: center; margin-top: 48px; padding: 48px; border: 1px solid rgba(108,74,205,.18); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(243,239,255,.92)); box-shadow: 0 28px 70px rgba(82,52,158,.10); overflow: hidden; }
    .cdn-hero::before { content: ""; position: absolute; width: 260px; height: 260px; left: -150px; bottom: -170px; border: 1px solid rgba(113,76,220,.13); border-radius: 50%; box-shadow: 0 0 0 45px rgba(113,76,220,.025), 0 0 0 90px rgba(113,76,220,.018); }
    .cdn-copy { position: relative; z-index: 2; }
    .cdn-copy h3 { margin: 0 0 14px; font-size: clamp(29px, 3.5vw, 42px); line-height: 1.15; letter-spacing: -.04em; }
    .cdn-copy > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
    .cdn-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
    .cdn-point { min-height: 106px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.68); }
    .cdn-point-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #6b49ca; background: #eee9ff; font-size: 14px; font-weight: 900; }
    .cdn-point b { display: block; margin-top: 10px; color: #3b3051; font-size: 12px; }
    .cdn-point span { display: block; margin-top: 3px; color: #7d748e; font-size: 10px; line-height: 1.55; }
    .cdn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .cdn-map { min-height: 420px; }
    .cdn-route { position: absolute; z-index: 1; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(112,76,220,.08), rgba(112,76,220,.55), rgba(112,76,220,.08)); }
    .route-a { width: 210px; left: 29%; top: 42%; transform: rotate(-4deg); }
    .route-b { width: 150px; left: 50%; top: 45%; transform: rotate(-25deg); }
    .route-c { width: 175px; left: 47%; top: 46%; transform: rotate(26deg); }
    .cdn-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); overflow: hidden; }
    .cdn-metric { padding: 23px 22px; background: rgba(255,255,255,.92); }
    .cdn-metric strong { display: block; color: #6341c0; font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
    .cdn-metric span { color: #7c748c; font-size: 11px; }
    .cdn-scenes-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 70px; }
    .cdn-scenes-head h3 { margin: 0; font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -.035em; }
    .cdn-scenes-head p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; }
    .cdn-scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
    .cdn-scene-card { position: relative; min-height: 218px; padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.84); box-shadow: 0 15px 38px rgba(77,50,148,.05); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .cdn-scene-card:hover { transform: translateY(-5px); border-color: rgba(113,76,220,.32); box-shadow: 0 22px 48px rgba(77,50,148,.11); }
    .cdn-scene-card::after { content: ""; position: absolute; width: 110px; height: 110px; right: -55px; bottom: -55px; border-radius: 50%; background: rgba(121,82,225,.07); }
    .cdn-scene-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #7653de, #aa5be0); box-shadow: 0 10px 24px rgba(100,64,196,.18); font-size: 18px; }
    .cdn-scene-card h4 { margin: 17px 0 8px; font-size: 17px; }
    .cdn-scene-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .cdn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
    .cdn-tags span { padding: 4px 7px; border-radius: 6px; color: #7054b8; background: #f0ebff; font-size: 9px; font-weight: 750; }

    .knowledge-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 38px; }
    .knowledge-head .section-desc { max-width: 720px; }
    .article-search {
      width: 330px;
      height: 48px;
      display: flex;
      align-items: center;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 12px 30px rgba(77,49,147,.06);
      overflow: hidden;
    }
    .article-search-field {
      flex: 1;
      min-width: 0;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 16px;
      margin: 0;
      cursor: text;
    }
    .article-search-icon {
      flex: 0 0 auto;
      color: #7858c9;
      font-size: 16px;
      line-height: 1;
    }
    .article-search input {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: 0;
      outline: 0;
      color: var(--text);
      background: transparent;
      font-size: 13px;
      line-height: 1.2;
    }
    .article-search input::placeholder { color: #9a92a8; }
    .article-search input::-webkit-search-decoration,
    .article-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
    .knowledge-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .topic-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .topic-tab { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: #6f667d; background: rgba(255,255,255,.70); font-size: 12px; font-weight: 800; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .topic-tab:hover { color: #6645c6; border-color: rgba(112,76,220,.25); }
    .topic-tab.active { color: white; border-color: transparent; background: linear-gradient(135deg, #7250d7, #a058df); box-shadow: 0 10px 24px rgba(102,65,198,.20); }
    .topic-count { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 6px; color: #74668b; background: rgba(113,76,220,.08); font-size: 8px; font-weight: 900; }
    .topic-tab.active .topic-count { color: white; background: rgba(255,255,255,.18); }
    .article-result-count { flex: 0 0 auto; color: #8a8296; font-size: 11px; font-weight: 750; }
    .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 28px; }
    .article-card { position: relative; min-height: 270px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.90); box-shadow: 0 15px 38px rgba(74,47,143,.055); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .article-card:hover { transform: translateY(-5px); border-color: rgba(112,76,220,.28); box-shadow: 0 24px 50px rgba(74,47,143,.11); }
    .article-card::after { content: ""; position: absolute; width: 125px; height: 125px; right: -70px; top: -70px; border-radius: 50%; background: var(--article-glow, rgba(113,76,220,.08)); }
    .article-card[hidden] { display: none; }
    .article-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .article-topic { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; color: var(--article-color, #6c4cca); background: var(--article-bg, #f0ebff); font-size: 9px; font-weight: 900; }
    .article-topic::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
    .article-meta { color: #948c9f; font-size: 9px; }
    .article-card h3 { position: relative; z-index: 1; margin: 20px 0 10px; font-size: 18px; line-height: 1.45; letter-spacing: -.02em; }
    .article-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
    .article-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 20px; }
    .article-reading { color: #968ea2; font-size: 9px; }
    .article-link { color: #6d4bcf; font-size: 11px; font-weight: 900; }
    .article-link:hover { color: #9b50d9; }
    .article-card[data-category="aliyun"] { --article-color: #d65d07; --article-bg: #fff0e5; --article-glow: rgba(255,106,0,.08); }
    .article-card[data-category="tencent"] { --article-color: #2873dc; --article-bg: #eaf3ff; --article-glow: rgba(40,115,220,.08); }
    .article-card[data-category="aws"] { --article-color: #9a6205; --article-bg: #fff4df; --article-glow: rgba(255,153,0,.09); }
    .article-card[data-category="huawei"] { --article-color: #c23c55; --article-bg: #fff0f3; --article-glow: rgba(194,60,85,.08); }
    .article-card[data-category="google"] { --article-color: #2f7c54; --article-bg: #eaf8f0; --article-glow: rgba(47,124,84,.08); }
    .article-empty { margin-top: 28px; padding: 54px 25px; border: 1px dashed rgba(112,76,220,.24); border-radius: 18px; color: #7e758b; background: rgba(255,255,255,.56); text-align: center; }
    .article-empty b { display: block; margin-bottom: 7px; color: #514563; font-size: 17px; }
    .knowledge-footnote { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 31px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(135deg, rgba(117,80,220,.06), rgba(255,255,255,.74)); }
    .knowledge-footnote p { margin: 0; color: #6f667d; font-size: 12px; }

    .about-card {
      position: relative;
      padding: 60px;
      border: 1px solid rgba(132,148,255,.25);
      border-radius: 30px;
      background:
        radial-gradient(circle at 12% 12%, rgba(77,228,210,.11), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(159,100,242,.15), transparent 30%),
        linear-gradient(145deg, rgba(19,29,56,.94), rgba(10,16,33,.95));
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .about-card::before {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      right: -155px;
      bottom: -160px;
      border: 1px solid rgba(124,141,255,.13);
      border-radius: 50%;
      box-shadow: 0 0 0 48px rgba(124,141,255,.025), 0 0 0 96px rgba(124,141,255,.018);
    }
    .about-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: start; }
    .about-title { margin: 17px 0; font-size: clamp(35px, 4.4vw, 56px); line-height: 1.1; letter-spacing: -.045em; }
    .about-lead { margin: 0; max-width: 430px; color: #aab5d0; font-size: 16px; line-height: 1.85; }
    .cloud-partners { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
    .cloud-partners span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: #aeb8d3; background: rgba(255,255,255,.03); font-size: 10px; font-weight: 750; }
    .about-copy { color: #aab5cf; font-size: 15px; line-height: 1.95; }
    .about-copy p { margin: 0; }
    .mission-box { margin-top: 26px; padding: 22px 24px; border-left: 2px solid var(--cyan); border-radius: 0 14px 14px 0; color: #c8d1e8; background: rgba(77,228,210,.045); }
    .mission-box b { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
    .mission-box p { font-size: 14px; }
    .about-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 46px; }
    .about-stat { min-height: 148px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
    .about-stat strong { display: block; color: transparent; background: linear-gradient(100deg, #fff, #82e9df 52%, #9e91ff); -webkit-background-clip: text; background-clip: text; font-size: clamp(31px, 4vw, 45px); line-height: 1.1; letter-spacing: -.045em; }
    .about-stat b { display: block; margin-top: 10px; color: #d6dcef; font-size: 13px; }
    .about-stat span { display: block; margin-top: 4px; color: #76819e; font-size: 11px; }

    .cta-card { position: relative; padding: 62px; border: 1px solid rgba(145,157,255,.26); border-radius: 30px; background: linear-gradient(125deg, rgba(43,52,112,.88), rgba(21,25,63,.9) 48%, rgba(16,57,67,.72)); overflow: hidden; box-shadow: 0 35px 90px rgba(24,23,77,.32); }
    .cta-card::before { content: ""; position: absolute; width: 340px; height: 340px; right: -90px; top: -180px; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }
    .cta-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
    .cta-card h2 { margin: 0 0 12px; max-width: 650px; font-size: clamp(31px, 4vw, 48px); line-height: 1.15; letter-spacing: -.04em; }
    .cta-card p { margin: 0; color: #bdc5df; }
    .cta-actions { display: flex; gap: 12px; flex-shrink: 0; }

    .footer { padding: 70px 0 28px; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 50px; }
    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 850;
      letter-spacing: -.03em;
    }
    .footer-brand-mark {
      flex: 0 0 auto;
      width: 48px;
      height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 10px 24px rgba(27, 190, 165, .22));
    }
    .footer-brand-mark img {
      display: block;
      width: 48px;
      height: 48px;
      object-fit: contain;
    }
    .footer-brand-name {
      color: #21163e;
      font-size: 22px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: -.035em;
      white-space: nowrap;
    }
    .footer-about p { max-width: 280px; margin: 20px 0 0; color: #77829d; font-size: 13px; }
    .footer h4 { margin: 0 0 17px; color: #d9def0; font-size: 13px; }
    .footer-links { display: grid; gap: 11px; }
    .footer-links a { color: #78839f; font-size: 12px; transition: color .2s ease; }
    .footer-links a:hover { color: white; }
    .footer-bottom { margin-top: 62px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #5d6882; font-size: 11px; }
    .footer-status { display: flex; align-items: center; gap: 8px; }
    .footer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

    .toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; padding: 13px 18px; border: 1px solid rgba(93,229,161,.28); border-radius: 12px; background: rgba(12,25,29,.94); color: #d9ffec; box-shadow: var(--shadow); backdrop-filter: blur(12px); font-size: 13px; font-weight: 700; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .3s ease; }
    .toast.show { transform: translate(-50%, 0); opacity: 1; }
    .contact-rail {
      position: fixed;
      top: 52%;
      right: 18px;
      z-index: 45;
      width: 154px;
      display: flex;
      justify-content: flex-end;
      transform: translateY(-50%);
      pointer-events: none;
    }
    .contact-rail-stack {
      width: 52px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      overflow: visible;
      pointer-events: auto;
    }
    .contact-rail-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.12em;
      width: 52px;
      margin: 0;
      color: #6f778f;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      text-align: center;
      pointer-events: none;
    }
    .contact-rail-title i {
      font-style: normal;
      font-weight: inherit;
    }
    .contact-button {
      flex: 0 0 auto;
      box-sizing: border-box;
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 16px;
      color: white;
      overflow: hidden;
      box-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.17);
      backdrop-filter: blur(14px);
      transform: none;
      transition: width .28s ease, box-shadow .2s ease;
      will-change: width;
    }
    .contact-button:hover,
    .contact-button:focus-visible {
      width: 154px;
      transform: none;
      outline: none;
    }
    .contact-button.whatsapp { background: linear-gradient(135deg, rgba(37,211,102,.96), rgba(14,147,73,.96)); }
    .contact-button.telegram { background: linear-gradient(135deg, rgba(55,178,232,.97), rgba(28,126,194,.97)); }
    .contact-button.whatsapp:hover { box-shadow: 0 15px 38px rgba(37,211,102,.25), inset 0 1px rgba(255,255,255,.2); }
    .contact-button.telegram:hover { box-shadow: 0 15px 38px rgba(47,158,218,.26), inset 0 1px rgba(255,255,255,.2); }
    .contact-label {
      min-width: 94px;
      padding-left: 14px;
      opacity: 0;
      transform: translateX(8px);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
      pointer-events: none;
      transition: opacity .18s ease .04s, transform .2s ease .04s;
    }
    .contact-button:hover .contact-label,
    .contact-button:focus-visible .contact-label { opacity: 1; transform: none; }
    .contact-icon {
      flex: 0 0 52px;
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 900;
      pointer-events: none;
    }
    .telegram .contact-icon { transform: rotate(-20deg); font-size: 23px; }
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes spin { to { transform: rotateX(66deg) rotateZ(352deg); } }
    @keyframes spinReverse { to { transform: rotateX(66deg) rotateZ(-368deg); } }

    @media (max-width: 980px) {
      .nav-links, .nav-actions .login-link { display: none; }
      .menu-btn { display: block; }
      .nav-actions { margin-left: auto; }
      .nav.open .nav-links { display: flex; position: absolute; top: 66px; left: 20px; right: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,16,33,.97); flex-direction: column; align-items: stretch; gap: 5px; box-shadow: var(--shadow); }
      .nav.open .nav-links a { padding: 10px 12px; border-radius: 8px; }
      .nav.open .nav-links a:hover { background: rgba(255,255,255,.05); }
      .hero { min-height: auto; padding-top: 145px; }
      .hero-grid, .regions { grid-template-columns: 1fr; }
      .hero-copy-wrap { text-align: center; }
      .hero h1, .hero-copy { margin-left: auto; margin-right: auto; }
      .hero-actions, .hero-note, .hero-clouds { justify-content: center; }
      .cloud-visual { height: 500px; }
      .case-track { --case-visible: 3; grid-auto-columns: calc((100% - 24px) / 3); }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-card:last-child { grid-column: span 2; }
      .ali-hero { grid-template-columns: 1fr; }
      .ali-product-grid,
      .ali-region-grid { grid-template-columns: repeat(2, 1fr); }
      .ali-update { grid-template-columns: 1fr; }
      .ali-process { grid-template-columns: repeat(2, 1fr); }
      .console-wrap { grid-template-columns: 1fr; }
      .console-copy { border-right: 0; border-bottom: 1px solid var(--line); }
      .console-ui { min-height: 450px; }
      .aws-hero { grid-template-columns: 1fr; }
      .aws-product-grid { grid-template-columns: repeat(2, 1fr); }
      .aws-process { grid-template-columns: repeat(2, 1fr); }
      .regions { gap: 45px; }
      .cdn-hero { grid-template-columns: 1fr; }
      .cdn-scene-grid { grid-template-columns: repeat(2, 1fr); }
      .knowledge-head { grid-template-columns: 1fr; }
      .article-search { width: 100%; }
      .article-grid { grid-template-columns: repeat(2, 1fr); }
      .about-layout { grid-template-columns: 1fr; gap: 40px; }
      .cta-content { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 2fr repeat(2, 1fr); }
    }

    @media (max-width: 680px) {
      .container { width: min(100% - 28px, 1160px); }
      .section { padding: 82px 0; }
      .nav { height: 66px; }
      .brand small, .nav-actions .btn-sm { display: none; }
      .hero { padding-top: 118px; }
      .hero h1 { font-size: clamp(42px, 13vw, 58px); }
      .hero-copy { font-size: 16px; }
      .cloud-visual { height: 440px; transform: scale(.88); margin: -10px -30px -20px; }
      .calculator-panel { padding: 24px; }
      .calculator-list a { min-height: 50px; padding: 12px; }
      .calculator-list span { font-size: 12px; }
      .trust-row { grid-template-columns: repeat(2, 1fr); }
      .case-carousel { width: min(100% - 28px, 1160px); }
      .case-track { --case-visible: 1; grid-auto-columns: 100%; gap: 12px; }
      .case-body { min-height: 235px; }
      .case-image { height: 162px; }
      .case-brand-strip { justify-content: flex-start; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
      .case-brand-strip::-webkit-scrollbar { display: none; }
      .feature-grid { grid-template-columns: 1fr; }
      .feature-card:last-child { grid-column: auto; }
      .ali-hero { padding: 34px 23px; }
      .ali-points { grid-template-columns: 1fr; }
      .ali-visual { min-height: 360px; transform: scale(.88); margin: -15px -24px; }
      .ali-data-strip { grid-template-columns: repeat(2, 1fr); }
      .ali-section-head { align-items: flex-start; flex-direction: column; margin-top: 55px; }
      .ali-product-grid,
      .ali-region-grid,
      .ali-process { grid-template-columns: 1fr; }
      .ali-update { padding: 31px 23px; margin-top: 55px; }
      .pricing-head { align-items: flex-start; flex-direction: column; }
      .console-copy { padding: 32px 25px; }
      .console-ui { padding: 13px; min-height: 400px; overflow-x: auto; }
      .console-shell { min-width: 520px; }
      .aws-hero { padding: 34px 23px; }
      .aws-highlights { grid-template-columns: 1fr; }
      .aws-visual { min-height: 360px; transform: scale(.88); margin: -20px -25px; }
      .aws-section-head,
      .aws-news-head { align-items: flex-start; flex-direction: column; margin-top: 55px; }
      .aws-product-grid,
      .aws-process,
      .aws-news-grid { grid-template-columns: 1fr; }
      .map-panel { height: 360px; }
      .region-list { grid-template-columns: 1fr; }
      .cdn-hero { padding: 31px 22px; }
      .cdn-points { grid-template-columns: 1fr; }
      .cdn-map { min-height: 340px; }
      .cdn-metrics { grid-template-columns: repeat(2, 1fr); }
      .cdn-scenes-head { align-items: flex-start; flex-direction: column; margin-top: 52px; }
      .cdn-scene-grid { grid-template-columns: 1fr; }
      .knowledge-toolbar { align-items: flex-start; flex-direction: column; }
      .topic-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
      .topic-tabs::-webkit-scrollbar { display: none; }
      .topic-tab { flex: 0 0 auto; }
      .article-grid { grid-template-columns: 1fr; }
      .knowledge-footnote { align-items: flex-start; flex-direction: column; }
      .about-card { padding: 38px 24px; }
      .about-stats { grid-template-columns: 1fr; margin-top: 32px; }
      .about-stat { min-height: auto; }
      .cta-card { padding: 42px 28px; }
      .cta-actions { width: 100%; flex-direction: column; }
      .cta-actions .btn { width: 100%; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 25px; }
      .footer-about { grid-column: span 2; }
      .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
      .contact-rail {
        top: auto;
        right: 14px;
        bottom: 16px;
        width: auto;
        justify-content: flex-end;
        transform: none;
      }
      .contact-rail-stack {
        width: auto;
        flex-direction: row;
        gap: 10px;
      }
      .contact-rail-title, .contact-label { display: none; }
      .contact-button,
      .contact-button:hover,
      .contact-button:focus-visible {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        margin: 0;
        transform: none;
      }
      .contact-icon { flex-basis: 50px; width: 50px; height: 50px; }
      .toast { bottom: 82px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    /* White + violet technology theme */
    main > .section:nth-of-type(even) {
      background: linear-gradient(180deg, rgba(243,240,255,.68), rgba(255,255,255,.28));
      border-top: 1px solid rgba(105,72,194,.05);
      border-bottom: 1px solid rgba(105,72,194,.05);
    }
    .section-kicker { color: #7152d8; }
    .eyebrow { color: #6546c5; background: rgba(116,80,225,.07); }
    .site-header.scrolled {
      background: rgba(255,255,255,.82);
      box-shadow: 0 10px 35px rgba(85,57,157,.08);
    }
    .nav-links { color: #625c74; }
    .nav-links a:hover,
    .nav-links a.active { color: #6f4be1; }
    .login-link { color: #554c70; }
    .btn-ghost { border-color: rgba(104,73,190,.18); background: rgba(255,255,255,.72); color: #4d3f70; box-shadow: 0 8px 24px rgba(73,48,143,.05); }
    .btn-ghost:hover { border-color: rgba(113,76,220,.38); background: #f2eeff; }
    .menu-btn { background: rgba(255,255,255,.78); }
    .menu-btn span { background: #6545c3; }
    .hero {
      background:
        radial-gradient(circle at 78% 44%, rgba(145,104,241,.13), transparent 29%),
        radial-gradient(circle at 15% 22%, rgba(195,164,255,.15), transparent 22%);
    }
    .gradient-text { background: linear-gradient(100deg, #2d1b58 4%, #7350db 48%, #b14fe4 88%); -webkit-background-clip: text; background-clip: text; }
    .hero-copy { color: #69627c; }
    .hero-note { color: #777085; }
    .orbit { border-color: rgba(106,70,210,.22); }
    .planet-glow { background: radial-gradient(circle, rgba(137,91,235,.24), rgba(173,132,245,.10) 46%, transparent 72%); }
    .trust-item { background: rgba(255,255,255,.9); }
    .trust-item span { color: #777086; }
    .feature-card { background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,246,255,.92)); box-shadow: 0 18px 48px rgba(82,54,155,.07); }
    .feature-card:hover { border-color: rgba(113,76,220,.36); background: linear-gradient(145deg, #fff, #f1edff); box-shadow: 0 24px 55px rgba(82,54,155,.13); }
    .feature-card::after { background: rgba(132,87,233,.09); }
    .feature-icon { border-color: rgba(113,76,220,.21); background: linear-gradient(145deg, #f1edff, #fff); box-shadow: 0 9px 24px rgba(110,73,207,.10); }
    .feature-link { color: #7050d4; }
    .console-wrap { background: rgba(255,255,255,.92); box-shadow: 0 30px 75px rgba(85,56,160,.12); }
    .point-number { color: #7050d4; background: #f5f2ff; }
    .console-point span { color: #7a728e; }
    .console-ui { background: linear-gradient(145deg, #f3f0ff, #ece8fb); }
    .console-shell { color: #35284f; border-color: rgba(91,64,175,.18); background: linear-gradient(145deg, #ffffff, #f7f4ff); box-shadow: 0 22px 48px rgba(77,48,145,.13); }
    .console-shell .console-bar,
    .console-shell .dash-side,
    .console-shell .dash-stat,
    .console-shell .dash-chart { border-color: rgba(106,73,194,.12); }
    .console-shell .dash-side div { color: #807793; }
    .console-shell .dash-side div.active { color: #6847cc; background: rgba(116,79,224,.09); }
    .console-shell .dash-stat { background: rgba(121,84,220,.025); }
    .console-shell .chart-grid { background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(105,72,194,.07) 30px); }
    .billing-toggle { background: rgba(255,255,255,.76); box-shadow: 0 8px 24px rgba(76,47,150,.06); }
    .billing-toggle button { color: #746c88; }
    .billing-toggle button.active { color: white; background: linear-gradient(135deg, #7455dc, #9b58df); box-shadow: 0 7px 18px rgba(100,67,196,.23); }
    .price-card { background: rgba(255,255,255,.92); box-shadow: 0 18px 46px rgba(79,52,151,.07); }
    .price-card.featured { border-color: rgba(112,74,218,.36); background: linear-gradient(160deg, #f2edff, #fff 70%); box-shadow: 0 28px 68px rgba(92,57,176,.16); }
    .popular { color: #6845c5; background: rgba(116,79,224,.11); }
    .price-currency { color: #574a70; }
    .price-period { color: #797185; }
    .price-features li { color: #625b72; }
    .region-item { background: rgba(255,255,255,.76); box-shadow: 0 10px 25px rgba(77,52,145,.04); }
    .region-item span { color: #7b738d; }
    .map-panel { background: radial-gradient(circle at 52% 47%, rgba(124,84,224,.17), transparent 46%), linear-gradient(145deg, #fbfaff, #eeeaff); box-shadow: 0 22px 55px rgba(83,54,157,.09); }
    .map-panel::before { opacity: .58; background-image: radial-gradient(circle, rgba(112,75,212,.34) 1px, transparent 1.5px); }
    .map-blob { border-color: rgba(105,69,202,.20); background: rgba(123,81,226,.07); }
    .map-node { border-color: #f7f5ff; }
    .map-label { border-color: rgba(104,70,197,.15); background: rgba(255,255,255,.91); color: #5d5274; box-shadow: 0 8px 18px rgba(74,48,140,.08); }
    .about-card { border-color: rgba(110,75,209,.20); background: radial-gradient(circle at 12% 12%, rgba(150,106,238,.12), transparent 29%), radial-gradient(circle at 90% 18%, rgba(205,166,255,.17), transparent 31%), linear-gradient(145deg, rgba(255,255,255,.97), rgba(244,240,255,.95)); box-shadow: 0 30px 75px rgba(80,50,155,.12); }
    .about-lead,
    .about-copy { color: #665e78; }
    .cloud-partners span { color: #5d5274; background: rgba(255,255,255,.72); }
    .mission-box { color: #514764; border-left-color: #7a55dc; background: rgba(121,84,220,.06); }
    .mission-box b { color: #6c48cc; }
    .about-stat { background: rgba(255,255,255,.76); box-shadow: 0 13px 32px rgba(72,47,139,.05); }
    .about-stat strong { background: linear-gradient(100deg, #4a2c91, #7853dc 52%, #ae54df); -webkit-background-clip: text; background-clip: text; }
    .about-stat b { color: #453b58; }
    .about-stat span { color: #7a7289; }
    .cta-card { color: white; border-color: rgba(120,81,222,.20); background: linear-gradient(125deg, #6846cd, #8954dc 52%, #b162e4); box-shadow: 0 32px 75px rgba(91,52,179,.24); }
    .cta-card p { color: rgba(255,255,255,.78); }
    .cta-card .btn-primary { color: #6846cd; background: white; box-shadow: 0 14px 32px rgba(63,35,130,.18); }
    .cta-card .btn-ghost { color: white; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); }
    .cta-card .btn-ghost:hover { background: rgba(255,255,255,.18); }
    .footer { background: linear-gradient(180deg, rgba(247,245,255,.25), rgba(237,233,252,.78)); border-top: 1px solid rgba(102,70,190,.08); }
    .footer-about p,
    .footer-links a,
    .footer-bottom { color: #746d82; }
    .footer h4 { color: #3c3150; }
    .footer-links a:hover { color: #6e4ad4; }

    @media (max-width: 980px) {
      .nav.open .nav-links { background: rgba(255,255,255,.97); box-shadow: 0 22px 55px rgba(74,47,143,.14); }
      .nav.open .nav-links a:hover { background: #f3efff; }
    }
/* CMS additions */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #21163e;
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10000;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.article-card h2 { font-size: 1.15rem; margin: 0.6rem 0; }
.article-card h2 a { color: inherit; text-decoration: none; }
.article-card h2 a:hover { color: var(--primary); }
.topic-tabs a.topic-tab { text-decoration: none; color: inherit; }

.faq-post-page { padding-top: 120px; }
.faq-post-wrap { max-width: 860px; }
.faq-post-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 700;
}
.faq-post-back,
.faq-post-cat-link {
  color: #7152d8;
  text-decoration: none;
}
.faq-post-back:hover,
.faq-post-cat-link:hover { color: #5638b8; }
.faq-post-sep { color: #b0a8c0; font-weight: 500; }

.faq-post-card {
  position: relative;
  padding: 28px 32px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(113,76,220,.07), transparent 42%),
    rgba(255,255,255,.94);
  box-shadow: 0 18px 48px rgba(74,47,143,.07);
  overflow: hidden;
}
.faq-post-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: var(--article-glow, rgba(113,76,220,.08));
  pointer-events: none;
}
.faq-post-card[data-category="aliyun"] { --article-color: #d65d07; --article-bg: #fff0e5; --article-glow: rgba(255,106,0,.08); }
.faq-post-card[data-category="tencent"] { --article-color: #2873dc; --article-bg: #eaf3ff; --article-glow: rgba(40,115,220,.08); }
.faq-post-card[data-category="aws"] { --article-color: #9a6205; --article-bg: #fff4df; --article-glow: rgba(255,153,0,.09); }
.faq-post-card[data-category="huawei"] { --article-color: #c23c55; --article-bg: #fff0f3; --article-glow: rgba(194,60,85,.08); }
.faq-post-card[data-category="google"] { --article-color: #2f7c54; --article-bg: #eaf8f0; --article-glow: rgba(47,124,84,.08); }
.faq-post-card[data-category="general"] { --article-color: #6c4cca; --article-bg: #f0ebff; --article-glow: rgba(113,76,220,.08); }

.faq-post-header { position: relative; z-index: 1; }
.faq-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.faq-post-author {
  color: #8a8296;
  font-size: 12px;
  font-weight: 650;
}
.faq-post-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--text);
}
.faq-post-lead {
  margin: 12px 0 0;
  max-width: 46em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.faq-post-cover {
  position: relative;
  z-index: 1;
  margin: 22px 0 8px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(113,76,220,.08);
  background: #f3efff;
  aspect-ratio: 21 / 9;
  max-height: 220px;
}
.faq-post-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq-post-body {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding-top: 8px;
  color: #3f3652;
  font-size: 15px;
  line-height: 1.85;
}
.faq-post-body > *:first-child { margin-top: 0; }
.faq-post-body p { margin: 0 0 1rem; }
.faq-post-body h2 {
  margin: 1.75rem 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(113,76,220,.12);
  color: #2f2548;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.faq-post-body h3 {
  margin: 1.35rem 0 0.55rem;
  color: #3a2f56;
  font-size: 1.02rem;
}
.faq-post-body ul,
.faq-post-body ol {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
}
.faq-post-body li { margin: 0.35rem 0; }
.faq-post-body li::marker { color: #7858c9; }
.faq-post-body a { color: #6c4cca; }
.faq-post-body a:hover { color: #5536b0; }
.faq-post-body strong { color: #2f2548; }
.faq-post-body blockquote {
  margin: 1.1rem 0;
  padding: 12px 16px;
  border-left: 3px solid #7a55dc;
  border-radius: 0 12px 12px 0;
  background: rgba(121,84,220,.06);
  color: #514764;
}

@media (max-width: 680px) {
  .faq-post-card { padding: 22px 18px 28px; border-radius: 18px; }
  .faq-post-cover { aspect-ratio: 16 / 9; max-height: 180px; }
}