:root{
  --ai-bg:#060b18;--ai-panel:rgba(10,20,40,.72);--ai-panel-2:rgba(17,31,61,.78);
  --ai-cyan:#00f5ff;--ai-blue:#4d7dff;--ai-violet:#815cff;--ai-pink:#ff4fd8;--ai-text:#eaf6ff;--ai-muted:#9fb6d8;
  --ai-border:rgba(0,245,255,.22);--ai-shadow:0 0 30px rgba(0,245,255,.14),0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{color:var(--ai-text);min-height:100vh;background:radial-gradient(circle at 12% 4%,rgba(0,245,255,.18),transparent 28rem),radial-gradient(circle at 88% 10%,rgba(255,79,216,.13),transparent 26rem),linear-gradient(180deg,#060b18 0%,#0a1430 46%,#070b16 100%)!important;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 85%);z-index:-1}.container{max-width:1180px}.header{background:rgba(6,11,24,.72)!important;backdrop-filter:blur(20px);border-bottom:1px solid var(--ai-border);box-shadow:0 0 28px rgba(0,245,255,.08)}.logo img{max-height:58px;width:auto}.navbar{padding:.75rem 0}.navbar-brand{font-weight:900;color:var(--ai-text)!important;display:flex;gap:.65rem;align-items:center;letter-spacing:.4px;text-shadow:0 0 18px rgba(0,245,255,.28)}.navbar-brand:before{content:"";width:36px;height:36px;border-radius:14px;background:url('/assets/keyocean/favicon.svg') center/cover no-repeat;box-shadow:0 0 22px rgba(0,245,255,.42)}.navbar-light .navbar-nav .nav-link{color:var(--ai-muted)!important;font-weight:800;border:1px solid transparent;border-radius:999px;padding:.5rem 1rem}.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link:hover{color:#06101e!important;background:linear-gradient(135deg,var(--ai-cyan),#7df9ff);border-color:rgba(0,245,255,.6);box-shadow:0 0 24px rgba(0,245,255,.34)}.header .form-control{background:rgba(255,255,255,.05);border:1px solid var(--ai-border);color:var(--ai-text);border-radius:999px}.header .form-control::placeholder{color:#7590b7}.header .btn-secondary{border:0;border-radius:999px;background:linear-gradient(135deg,var(--ai-cyan),var(--ai-violet));box-shadow:0 0 22px rgba(0,245,255,.32)}.ko-hero{position:relative;overflow:hidden;padding:78px 0 104px;color:var(--ai-text);background:radial-gradient(circle at 78% 38%,rgba(0,245,255,.23),transparent 21rem),radial-gradient(circle at 18% 25%,rgba(129,92,255,.24),transparent 26rem),linear-gradient(135deg,#071226 0%,#0d1a3a 52%,#160b2f 100%)}.ko-hero:before{content:"";position:absolute;inset:0;background:url('/assets/keyocean/ai-grid.svg') bottom center/100% 70% no-repeat;opacity:.72}.ko-hero:after{content:"";position:absolute;inset:auto -10% -28% -10%;height:56%;background:radial-gradient(ellipse at center,rgba(0,245,255,.22),transparent 62%);filter:blur(12px)}.ko-hero .container{position:relative;z-index:2}.ko-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;margin-bottom:22px;border-radius:999px;background:rgba(0,245,255,.08);border:1px solid var(--ai-border);color:#bffcff;font-weight:900;box-shadow:inset 0 0 20px rgba(0,245,255,.08),0 0 24px rgba(0,245,255,.12)}.ko-hero h1{font-size:clamp(2.2rem,5vw,4.95rem);font-weight:950;line-height:1.04;letter-spacing:-1.5px;margin-bottom:22px;background:linear-gradient(90deg,#fff,#8ff8ff 45%,#ffb7f0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 36px rgba(0,245,255,.13)}.ko-hero .lead{font-size:clamp(1.04rem,1.7vw,1.28rem);line-height:1.95;color:#b7c8e8;max-width:680px}.ko-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.ko-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.86rem 1.28rem;font-weight:950;text-decoration:none!important;transition:.25s ease}.ko-btn--primary{background:linear-gradient(135deg,var(--ai-cyan),#8ff8ff);color:#06101e!important;box-shadow:0 0 32px rgba(0,245,255,.36)}.ko-btn--ghost{color:#d9fbff!important;border:1px solid var(--ai-border);background:rgba(255,255,255,.05);box-shadow:inset 0 0 26px rgba(129,92,255,.12)}.ko-btn:hover{transform:translateY(-2px)}.ko-mascot-wrap{text-align:center;position:relative;z-index:2}.ko-mascot{width:100%;max-width:430px;filter:drop-shadow(0 0 38px rgba(0,245,255,.28));animation:aiFloat 6s ease-in-out infinite}.ko-hero__wave{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--ai-cyan),var(--ai-pink),transparent);box-shadow:0 0 28px rgba(0,245,255,.5)}.ko-trust{position:relative;z-index:4;margin-top:-44px}.ko-trust-card{background:rgba(8,15,32,.76);backdrop-filter:blur(18px);border:1px solid var(--ai-border);border-radius:28px;box-shadow:var(--ai-shadow);padding:14px}.ko-trust-item{display:flex;align-items:center;gap:13px;padding:16px 14px}.ko-trust-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,rgba(0,245,255,.16),rgba(129,92,255,.16));border:1px solid var(--ai-border);box-shadow:0 0 20px rgba(0,245,255,.10)}.ko-trust-item strong{display:block;color:#ecfbff;font-size:15px}.ko-trust-item span{display:block;color:#8ea5c9;font-size:13px}.notice .card{border:1px solid var(--ai-border);border-radius:26px;background:var(--ai-panel);box-shadow:var(--ai-shadow);overflow:hidden}.notice .card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--ai-cyan),var(--ai-violet),var(--ai-pink))}.notice .jumbotron{background:transparent!important;margin:0}.notice h4,.category h3{color:#eaf6ff;font-weight:950}.notice h4:before{content:"🤖 "}.notice p,.category .lead{color:#9fb6d8}.category{padding:34px 0 14px}.category .separator{width:100px;height:4px;border-radius:999px;margin:18px auto;background:linear-gradient(90deg,var(--ai-cyan),var(--ai-violet),var(--ai-pink));box-shadow:0 0 22px rgba(0,245,255,.38)}.category-menus .btn-outline-secondary{border:1px solid var(--ai-border)!important;color:#c3d7f6!important;background:rgba(255,255,255,.04)!important;border-radius:999px;margin:5px;padding:.55rem 1rem;font-weight:900}.category-menus .btn-outline-secondary.active,.category-menus .btn-outline-secondary:hover{color:#06101e!important;background:linear-gradient(135deg,var(--ai-cyan),#a6f7ff)!important;box-shadow:0 0 22px rgba(0,245,255,.28)}.goods .card{border:1px solid rgba(0,245,255,.18)!important;border-radius:24px!important;overflow:hidden;background:rgba(10,20,40,.82);box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 24px rgba(0,245,255,.08);transition:.28s ease}.goods .card:hover{transform:translateY(-8px) scale(1.01);border-color:rgba(0,245,255,.48)!important;box-shadow:0 26px 64px rgba(0,0,0,.45),0 0 30px rgba(0,245,255,.20)}.goods .card-img-top{aspect-ratio:1/1;object-fit:cover;background:radial-gradient(circle,#142c5c,#071326)}.goods .card-title{color:#eaf6ff;font-weight:900}.goods .badge{border-radius:0 0 14px 0;padding:.48rem .62rem}.goods .btn-primary,.buy-shop .btn-primary,.btn-primary{border:0!important;border-radius:999px!important;background:linear-gradient(135deg,var(--ai-cyan),var(--ai-violet))!important;color:#fff!important;box-shadow:0 0 22px rgba(0,245,255,.26);font-weight:900}.goods .btn-outline-success{border-color:rgba(0,245,255,.38)!important;color:#8ff8ff!important;background:rgba(0,245,255,.08);border-radius:999px!important}.goods .btn-outline-warning{border-color:rgba(255,79,216,.32)!important;color:#ffb7f0!important;background:rgba(255,79,216,.08);border-radius:999px!important}.text-muted{color:#89a3cc!important}.ko-empty{margin:28px auto 76px;max-width:900px;border-radius:30px;background:var(--ai-panel);box-shadow:var(--ai-shadow);border:1px solid var(--ai-border);padding:38px;text-align:center}.ko-empty img{width:180px;max-width:55%;margin-bottom:8px}.ko-empty h4{font-weight:950;color:#eaf6ff}.ko-empty p{color:#9fb6d8;margin-bottom:0}.footer{margin-top:50px;background:linear-gradient(135deg,#050914,#091a34 55%,#140b28);border-top:1px solid var(--ai-border);color:#9fb6d8!important;box-shadow:0 -18px 40px rgba(0,245,255,.06)}.footer a{color:#8ff8ff!important;font-weight:900}.footer .author:before{content:"KeyOcean AI · ";font-weight:950;color:#fff}@keyframes aiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1deg)}}@media(max-width:767.98px){.ko-hero{padding:50px 0 72px;text-align:center}.ko-hero .lead{margin:auto}.ko-hero__actions{justify-content:center}.ko-trust{margin-top:-28px}.ko-trust-item{justify-content:center}.goods .row-cols-2>*{width:100%}.logo{display:none!important}}
