/* ============================================================ AIMETA site — Meta Assets visual system Black · META ORANGE #ff702a (primary) · META GREEN #6ddd75 (restrained) OPPO Sans (bold grotesk) · uppercase display · big radius · orange blocks AIMETA logo preserved. .en on switches to English. ============================================================ */ @font-face{font-family:"OPPO Sans 3.0";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/oppo-Regular.woff2) format("woff2")} @font-face{font-family:"OPPO Sans 3.0";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oppo-Medium.woff2) format("woff2")} @font-face{font-family:"OPPO Sans 3.0";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/oppo-Bold.woff2) format("woff2")} :root{ --orange:#ff702a; --orange-l:#ff8a4c; --orange-d:#e85c1a; --green:#6ddd75; --grad:linear-gradient(120deg,#ff8a4c 0%,#ff702a 60%,#e85c1a 100%); --grad-135:linear-gradient(135deg,#ff8a4c,#e85c1a); --bg:#000000; --bg2:#0A0A0A; --panel:#121212; --panel2:#1A1A1A; --line:rgba(255,112,42,.20); --line2:rgba(255,255,255,.10); --ink:#FFFFFF; --g1:#C4C0B8; --g2:#8F8B83; --g3:#3A3A3A; --cn:"OPPO Sans 3.0","OPPO Sans","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif; --en:"OPPO Sans 3.0","OPPO Sans","Helvetica Neue","Arial Narrow",Arial,sans-serif; --maxw:1240px; --r:22px; /* legacy aliases (old inline styles referencing purple) */ --purple:#ff702a; --indigo:#e85c1a; --violet:#ff702a; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--cn);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.en{font-family:var(--en);line-height:1.55} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} a{color:inherit;text-decoration:none} img{max-width:100%} :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px} a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px} h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.14;text-wrap:balance} h1,h2{text-transform:uppercase;letter-spacing:-.03em} .en h1,.en h2,.en h3{letter-spacing:-.035em;line-height:1.04} .sec-head p,.hero .lead,.phero p{text-wrap:pretty} .grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* backdrop */ .bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(55% 45% at 82% 4%,rgba(255,112,42,.20),transparent 60%), radial-gradient(48% 42% at 8% 24%,rgba(255,112,42,.12),transparent 60%), radial-gradient(50% 45% at 55% 112%,rgba(109,221,117,.07),transparent 60%),var(--bg)} .hex-grid{position:absolute;inset:0;opacity:.55;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='%23ff702a' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M28 1L54 16v32L28 63 2 48V16z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image:radial-gradient(75% 65% at 50% 30%,#000,transparent 82%);mask-image:radial-gradient(75% 65% at 50% 30%,#000,transparent 82%)} /* eyebrow / chips */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)} .eyebrow::before{content:"";width:15px;height:14px;background:var(--grad-135);clip-path:polygon(50% 0,100% 100%,0 100%)} .chip{display:inline-block;font-size:12px;font-weight:600;color:var(--g1);border:1px solid var(--line2);border-radius:100px;padding:4px 11px} /* buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:.02em;padding:13px 26px;border-radius:100px;transition:.2s;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-transform:uppercase} .btn-grad{background:var(--grad);color:#000} .btn-grad:hover{box-shadow:0 10px 34px -8px rgba(255,112,42,.65);transform:translateY(-1px)} .btn-line{border-color:var(--line);color:#fff} .btn-line:hover{border-color:var(--orange);background:rgba(255,112,42,.10)} /* ===== NAV ===== */ header{position:sticky;top:0;z-index:80;background:rgba(0,0,0,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line2)} nav{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center;gap:11px} .brand img{height:28px;width:auto;display:block} .navlinks{display:flex;gap:4px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--g1);align-items:center} .ni{position:relative} .ni>a{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:10px;transition:.15s;color:var(--g1)} .ni>a:hover{color:#fff} .ni.active>a,.ni>a.active{color:#fff} .ni.active>a{background:rgba(255,112,42,.1)} .ni.has-sub>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:.18s;margin-left:1px} .ni.has-sub:hover>a,.ni.has-sub:focus-within>a{color:#fff} .ni.has-sub:hover>a::after,.ni.has-sub:focus-within>a::after{transform:rotate(225deg) translateY(-1px);opacity:1} .sub{position:absolute;top:calc(100% + 9px);left:0;min-width:196px;background:#0c0c0c;border:1px solid var(--line);border-radius:14px; padding:8px;box-shadow:0 26px 46px -14px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:2px;z-index:90; opacity:0;visibility:hidden;transform:translateY(7px);transition:.17s} .sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .ni.has-sub:hover .sub,.ni.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)} .sub a{display:block;padding:9px 12px;border-radius:8px;color:var(--g1);font-size:13.5px;font-weight:600;white-space:nowrap;transition:.12s} .sub a:hover{background:var(--panel2);color:#fff} .sub a.active{color:var(--orange)} .nav-right{display:flex;align-items:center;gap:14px} .lang{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;font-size:12px;font-weight:800} .lang button{background:transparent;color:var(--g2);border:0;padding:7px 12px;cursor:pointer;font:inherit} .lang button.on{background:var(--grad);color:#000} .burger{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px} .burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.2s} /* ===== SECTION SHELL ===== */ section{padding:96px 0;position:relative} .sec-head{max-width:780px;margin-bottom:52px} .sec-head.center{margin:0 auto 52px;text-align:center} .sec-head h2{font-size:clamp(32px,4.6vw,56px);margin:16px 0 16px} .sec-head p{color:var(--g1);font-size:17px} .sec-head .more{margin-top:0} /* cards */ .card{border:1px solid var(--line2);border-radius:var(--r);background:linear-gradient(160deg,var(--panel),rgba(10,10,10,.4));padding:32px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* ecosystem card */ .eco{position:relative;border:1px solid var(--line2);border-radius:var(--r);padding:34px 30px;overflow:hidden; background:linear-gradient(160deg,var(--panel),rgba(10,10,10,.4));transition:.28s;display:flex;flex-direction:column;height:100%} .eco::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.32s} .eco:hover{border-color:var(--orange);transform:translateY(-5px)} .eco:hover::before{transform:scaleX(1)} .eco .ico{width:52px;height:52px;border-radius:14px;background:rgba(255,112,42,.12);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:20px} .eco .ico svg{width:25px;height:25px} .eco .no{position:absolute;top:30px;right:30px;font-size:13px;font-weight:800;color:var(--g2)} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--orange);color:#000;font-weight:800; padding:10px 16px;border-radius:10px;transition:top .18s} .skip:focus{top:12px} .eco h3{font-size:22px;margin-bottom:6px} .eco .sub{font-size:14px;color:var(--orange);font-weight:700;margin-bottom:12px} .eco p{color:var(--g1);font-size:15px;flex:1} .eco .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} /* stat row */ .stats{display:flex;gap:34px;flex-wrap:wrap} .stat .n{font-size:26px;font-weight:800} .stat .l{font-size:12px;color:var(--g2);letter-spacing:.06em;margin-top:2px} /* ===== FOOTER ===== */ footer{border-top:1px solid var(--line2);background:var(--bg2);padding:64px 0 30px;margin-top:20px} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line2)} footer .brand img{height:30px} footer .tag{margin-top:16px;font-size:14px;color:var(--g2);max-width:34ch} footer h4{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;color:#fff} footer ul{list-style:none;display:grid;gap:10px} footer a{color:var(--g1);font-size:14px} footer a:hover{color:var(--orange)} .foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:12px;color:var(--g2);flex-wrap:wrap;gap:8px} .foot-bottom .beian{display:flex;gap:16px;flex-wrap:wrap} /* backing strip (雲璽 endorsement) */ .backing{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:rgba(10,10,10,.6)} .backing .wrap{display:flex;align-items:center;gap:30px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap} .backing .lbl{font-size:13px;color:var(--g2);font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em} .backing .items{display:flex;gap:26px;flex-wrap:wrap;flex:1} .backing .items span{font-size:14px;color:var(--g1);display:flex;align-items:center;gap:8px} .backing .items span::before{content:"";width:9px;height:8px;background:var(--orange);clip-path:polygon(50% 0,100% 100%,0 100%)} @media(prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } @media(max-width:900px){ .navlinks{display:none} .burger{display:flex} .nav-right .btn{display:none} .navlinks.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch; background:#050505;border-bottom:1px solid var(--line);padding:6px 28px 18px;box-shadow:0 24px 40px -12px rgba(0,0,0,.7); max-height:calc(100vh - 72px);overflow-y:auto} .navlinks.open .ni{position:static} .navlinks.open .ni>a{padding:15px 0;border-bottom:1px solid var(--line2);border-radius:0;background:none;font-size:15px} .navlinks.open .ni.has-sub>a::after{margin-left:auto} .navlinks.open .sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none; padding:4px 0 10px 16px;min-width:0} .navlinks.open .sub a{padding:11px 0;font-size:14px;font-weight:500;color:var(--g2)} .navlinks.open .sub a:hover,.navlinks.open .sub a.active{color:var(--orange);background:none} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} section{padding:68px 0} .backing .wrap{gap:14px} }