:root{
      --bg:#f7f4ee;
      --bg2:#fbfaf7;
      --card:rgba(255,255,255,.74);
      --card-strong:rgba(255,255,255,.88);
      --line:rgba(140,118,70,.18);
      --text:#21313a;
      --muted:#64727a;
      --platinum:#e6e1d5;
      --gold:#c8a96b;
      --gold-deep:#8f6a2f;
      --purple:#6952c7;
      --purple-2:#8a76df;
      --teal:#5fa3a4;
      --emerald:#3b8f77;
      --rose:#d88cb5;
      --shadow:0 20px 60px rgba(35,43,53,.10);
      --radius:24px;
      --max:1320px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      font-family:Inter,"Noto Sans TC","Segoe UI",Arial,sans-serif;
      background:
        radial-gradient(circle at 10% 10%, rgba(138,118,223,.12), transparent 26%),
        radial-gradient(circle at 88% 10%, rgba(200,169,107,.18), transparent 24%),
        radial-gradient(circle at 50% 28%, rgba(95,163,164,.08), transparent 28%),
        linear-gradient(180deg,#fffdfa 0%,#f6f4ef 36%,#f3f1ee 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
      background-size:36px 36px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
      opacity:.28;
    }
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button{font:inherit}
    .shell{max-width:var(--max);margin:0 auto;padding:0 24px}
    .nav{
      position:sticky;top:0;z-index:70;
      backdrop-filter:blur(18px);
      background:rgba(250,248,242,.72);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      max-width:var(--max);margin:0 auto;padding:14px 24px;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .brand{display:flex;align-items:center;gap:14px;min-width:0}
    .logo{
      width:44px;height:44px;border-radius:50%;
      background:linear-gradient(135deg,var(--purple),var(--gold));
      color:#fff;display:grid;place-items:center;font-weight:900;letter-spacing:.08em;
      box-shadow:0 10px 24px rgba(105,82,199,.28);
      flex-shrink:0;
    }
    .brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
    .brand strong{
      display:block;font-size:14px;letter-spacing:.14em;
      background:linear-gradient(135deg,var(--gold-deep),var(--gold),#f0ddae,var(--gold));
      -webkit-background-clip:text;background-clip:text;color:transparent;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .chip,.lang-btn,.ghost,.primary,.tab,.nav-link{
      border:1px solid var(--line);
      background:rgba(255,255,255,.68);
      color:var(--text);
      padding:10px 14px;border-radius:999px;cursor:pointer;transition:.25s ease;font-weight:700;
    }
    .ghost:hover,.chip:hover,.lang-btn:hover,.tab:hover,.nav-link:hover{transform:translateY(-1px);border-color:rgba(105,82,199,.32)}
    .primary{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;border:none;box-shadow:0 12px 28px rgba(105,82,199,.26)}
    .lang-group{display:flex;gap:8px;flex-wrap:wrap}
    .lang-btn.active{background:linear-gradient(135deg,var(--gold-deep),var(--gold));color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(200,169,107,.25)}
    .nav-link.active{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;border-color:transparent}

    .panel,.card,.metric,.timeline-card,.event-card,.footer-card,.image-card,.hero-card{
      position:relative;overflow:hidden;background:var(--card);border:1px solid rgba(255,255,255,.7);
      border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(14px);
    }
    .panel::before,.card::before,.metric::before,.timeline-card::before,.event-card::before,.footer-card::before,.image-card::before,.hero-card::before{
      content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
      background:linear-gradient(135deg, rgba(143,106,47,.50), rgba(240,224,184,.7), rgba(105,82,199,.16));
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
    }

    .hero{padding:32px 0 26px}
    .hero-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:stretch}
    .hero-visual{
      min-height:680px;
      border-radius:32px;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(18,24,44,.10), rgba(18,24,44,.18)),
        url('../assets/images/world-model-image-1.jpg') center/cover no-repeat;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.7);
    }
    .hero-visual::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 28%, transparent 72%, rgba(255,255,255,.08));
      pointer-events:none;
    }
    .hero-overlay{
      position:absolute;inset:0;
      background:
        linear-gradient(90deg, rgba(247,244,238,.95) 0%, rgba(247,244,238,.92) 24%, rgba(247,244,238,.76) 46%, rgba(247,244,238,.40) 68%, rgba(247,244,238,.14) 100%),
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
    }
    .hero-copy{position:relative;z-index:2;padding:44px;max-width:640px}
    .hero-copy-panel{
      display:inline-block;
      max-width:100%;
      padding:26px 28px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.66));
      border:1px solid rgba(255,255,255,.82);
      box-shadow:0 18px 46px rgba(35,43,53,.10);
      backdrop-filter:blur(8px);
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.66);
      border:1px solid var(--line);box-shadow:var(--shadow);color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    }
    .headline{font-size:clamp(2.6rem, 5vw, 5rem);line-height:1.04;margin:18px 0 14px;font-weight:900;letter-spacing:-.04em;color:#6b4f1f;text-shadow:0 2px 0 rgba(255,255,255,.36), 0 14px 28px rgba(255,255,255,.28)}
    .headline .light-purple{background:linear-gradient(135deg,var(--purple-2),#d4c4fb,var(--purple-2));-webkit-background-clip:text;background-clip:text;color:transparent}
    .lead{font-size:1.06rem;line-height:1.84;color:#7a623c;max-width:560px;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.28)}
    .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
    .hero-note{margin-top:18px;font-size:.9rem;color:#5f6c77;line-height:1.7;font-weight:600}

    .hero-side{display:grid;grid-template-rows:auto auto;gap:18px}
    .hero-card{padding:22px}
    .mini-title{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
    .metric{padding:18px}
    .metric .n{font-size:2rem;font-weight:900;color:var(--purple)}
    .metric p{margin:8px 0 0;color:var(--muted);font-size:.93rem;line-height:1.6}

    section{padding:30px 0}
    .section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
    .section-head h2{margin:0;font-size:clamp(1.65rem,2vw,2.5rem)}
    .section-head p{margin:0;color:var(--muted);max-width:820px;line-height:1.82}

    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .image-card{display:flex;flex-direction:column;transition:.28s ease}
    .image-card:hover{transform:translateY(-6px)}
    .image-card .media{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(180deg,#f4efe7,#ece6dd)}
    .image-card .media img{width:100%;height:100%;object-fit:cover}
    .image-card .content{padding:22px}
    .image-card h3{margin:0 0 10px;font-size:1.2rem}
    .image-card p{margin:0;color:var(--muted);line-height:1.8}

    .engine-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
    .engine{padding:16px;border-radius:20px;background:rgba(255,255,255,.66);border:1px solid var(--line)}
    .engine .i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--gold));color:#fff;font-weight:900;margin-bottom:10px}

    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch;margin-top:22px}
    .panel{padding:22px}
    .list{display:grid;gap:10px;margin-top:14px}
    .list div{display:flex;gap:10px;align-items:flex-start;color:var(--muted);line-height:1.7;font-size:.94rem}
    .list span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:rgba(105,82,199,.12);color:var(--purple);font-weight:900;font-size:.8rem}

    .stage-bar{display:grid;grid-template-columns:1.15fr 1.4fr 1fr;gap:12px;margin-top:16px}
    .stage{padding:20px;border-radius:22px;color:#fff;min-height:132px}
    .stage h3{margin:0 0 10px;font-size:1.05rem}.stage p{margin:0;line-height:1.7;font-size:.94rem;color:rgba(255,255,255,.9)}
    .stage.s1{background:linear-gradient(135deg,#6a5fe1,#9a88f0)}
    .stage.s2{background:linear-gradient(135deg,#0f7d86,#5fa3a4)}
    .stage.s3{background:linear-gradient(135deg,#8f6a2f,#d8b470)}

    .tabs{display:flex;gap:10px;flex-wrap:wrap}
    .tab.active{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;border-color:transparent}
    .year-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
    .month{padding:16px;border-radius:18px;min-height:104px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.68);border:1px solid var(--line);transition:.25s ease}
    .month.active{transform:translateY(-3px);box-shadow:0 14px 32px rgba(105,82,199,.14);border-color:rgba(105,82,199,.26)}
    .month .m{font-weight:900;color:var(--purple);font-size:1.05rem}.month .t{font-size:.88rem;line-height:1.45;color:var(--text)}.month .s{font-size:.78rem;color:var(--muted);line-height:1.4}

    .monthly-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:18px}
    .timeline-card{padding:22px}
    .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
    .flow-step{padding:16px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--line);position:relative}
    .flow-step .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold-deep),var(--gold));color:#fff;font-weight:900;margin-bottom:12px}
    .flow-step h4{margin:0 0 8px;font-size:1rem}.flow-step p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}

    .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .pillar{padding:18px;border-radius:20px;background:rgba(255,255,255,.74);border:1px solid var(--line)}
    .pillar h4{margin:0 0 10px}.pillar p{margin:0;color:var(--muted);line-height:1.7;font-size:.92rem}

    .tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}.card{padding:22px}
    .card .badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.06em}
    .price{font-size:2.15rem;font-weight:900;margin:10px 0 12px}

    .nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .progress{height:10px;background:#ece8e0;border-radius:999px;overflow:hidden;margin-top:12px}.progress i{display:block;height:100%;background:linear-gradient(135deg,var(--purple),var(--gold));border-radius:999px}

    .event-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.event-card{padding:24px}
    .big-title{font-size:1.3rem;font-weight:900;margin:0 0 8px}.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
    .subcard{padding:16px;border-radius:18px;background:rgba(255,255,255,.78);border:1px solid var(--line)}
    .subcard h4{margin:0 0 8px}.subcard p{margin:0;color:var(--muted);line-height:1.7;font-size:.92rem}

    .kpi-board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .formula{padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#1f2530;color:#eef2f8;border-radius:24px;line-height:1.9;overflow:auto}

    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.footer-card{padding:24px}
    .company-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
    .footer-bottom{padding:0 0 44px;color:var(--muted);font-size:.9rem;line-height:1.8}
    .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
    .contact-card{padding:18px;border-radius:20px;background:rgba(255,255,255,.74);border:1px solid var(--line)}
    .contact-card h4{margin:0 0 8px;font-size:1rem}
    .contact-card p,.contact-card a{margin:0;color:var(--muted);line-height:1.7;font-size:.92rem;word-break:break-word}

    .muted{color:var(--muted)}
    .rtl{direction:rtl}
    .rtl .brand,.rtl .nav-inner,.rtl .section-head,.rtl .hero-cta,.rtl .list div,.rtl .lang-group,.rtl .nav-links{direction:rtl}
    .rtl .headline,.rtl .lead,.rtl h1,.rtl h2,.rtl h3,.rtl h4,.rtl p,.rtl .month,.rtl .stage,.rtl .card,.rtl .timeline-card,.rtl .event-card,.rtl .footer-card,.rtl .hero-copy{text-align:right}

    .pulse{position:relative;overflow:hidden}.pulse::after{content:"";position:absolute;inset:-40%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);transform:translateX(-100%);animation:shine 7s infinite linear}@keyframes shine{to{transform:translateX(100%)}}

    @media (max-width:1120px){
      .hero-layout,.hero-grid,.monthly-layout,.event-layout,.footer-grid{grid-template-columns:1fr}
      .engine-row,.kpi-board,.year-strip,.nodes,.tracks,.pillars,.cards-3{grid-template-columns:repeat(2,1fr)}
      .stage-bar{grid-template-columns:1fr}
      .flow{grid-template-columns:repeat(2,1fr)}
      .hero-visual{min-height:620px}
    }
    @media (max-width:720px){
      .shell,.nav-inner{padding-left:16px;padding-right:16px}
      .engine-row,.kpi-board,.year-strip,.nodes,.tracks,.flow,.pillars,.event-grid,.company-grid,.kpi-grid,.cards-3,.contact-grid{grid-template-columns:1fr}
      .nav-inner{align-items:flex-start;flex-direction:column}
      .nav-links{width:100%;justify-content:space-between}
      .hero-copy{padding:24px}
      .hero-copy-panel{padding:20px 18px}
      .hero-visual{min-height:560px;border-radius:24px}
      .month{min-height:auto}
    }