:root{--bg:#0b1224;--panel:#0f1830;--card:#131c35;--muted:#7c86a2;--text:#e6ecff;--brandA:#6EE7F9;--brandB:#7C4DFF;--accent:#8ef2cf;--danger:#ff6b6b;--ring:rgba(134,239,172,.25)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,rgba(124,77,255,.18),transparent 60%),radial-gradient(900px 500px at -10% 20%,rgba(110,231,249,.14),transparent 60%),var(--bg);color:var(--text);font-family:"Inter","Noto Sans TC",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:#b9c6ff;text-decoration:none}

.container{width:min(1120px,92%);margin-inline:auto}

/* Cursor glow */
#cursor-glow{position:fixed;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(300px 300px at var(--mx,50%) var(--my,50%),rgba(110,231,249,.18),transparent 60%);z-index:1}

/* Background canvas */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* Header */
.site-header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);background:linear-gradient(to bottom,rgba(255,255,255,.02) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 100%);border-bottom:none;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.5px}
.brand .logo{display:inline-flex}
.brand-text{color:#fff}
.nav-links{display:flex;gap:20px}
.nav-links a{padding:8px 10px;border-radius:8px;color:#c7d2fe;opacity:.9}
.nav-links a:hover{background:rgba(255,255,255,.06);opacity:1}
.nav-cta .btn{margin-left:8px}


/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;min-height:70svh;padding:80px 0 40px;position:relative;z-index:2}
.headline{font-family:"Noto Sans TC","Inter",sans-serif;font-size:56px;line-height:1.05;margin:0 0 12px}
.headline span{font-size:28px;font-weight:700;letter-spacing:.2px;opacity:.9}
.gradient-text{background:linear-gradient(135deg,var(--brandA),var(--brandB));-webkit-background-clip:text;background-clip:text;color:transparent}
.subhead{max-width:60ch;color:#c6d0f5}
.cta-group{display:flex;gap:14px;margin:22px 0 14px}
.trustbar{display:flex;gap:24px;flex-wrap:wrap;color:#c7d2fe}
.trustbar div{display:flex;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:12px 16px;border-radius:12px}
.trustbar strong{font-size:18px;color:#fff}

.hero-visual{position:relative;height:420px}
.float-card{position:absolute;backdrop-filter:blur(8px);background:rgba(19,28,53,.6);border:1px solid rgba(255,255,255,.1);padding:14px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);transform-style:preserve-3d}
.fc1{top:12%;left:8%}
.fc2{bottom:16%;left:24%}
.fc3{top:36%;right:8%}
.float-ring{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.24);animation:spin 20s linear infinite}
.r1{width:220px;height:220px;left:6%;top:10%}
.r2{width:300px;height:300px;right:0;bottom:4%;animation-duration:28s}
@keyframes spin{to{transform:rotate(360deg)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);cursor:pointer;font-weight:700;letter-spacing:.3px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.btn-primary{background:linear-gradient(135deg,var(--brandA),var(--brandB));color:#0b1224;box-shadow:0 8px 24px rgba(124,77,255,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#e6ecff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* Sections */
.section{padding:80px 0}
.section-header{margin-bottom:26px}
.section-header h2{font-size:34px;margin:0 0 8px}
.section-header p{color:#c6d0f5}

/* Menu */
.menu-controls{display:flex;justify-content:space-between;align-items:center;margin:12px 0 18px;gap:12px}
.dow-tabs{display:flex;gap:8px;flex-wrap:wrap}
.dow-tabs button,.meal-toggle button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e6ecff;border-radius:12px;padding:8px 12px;cursor:pointer;user-select:none}
.dow-tabs button.is-active,.meal-toggle button.is-active{background:linear-gradient(135deg,var(--brandA),var(--brandB));color:#0b1224;border-color:transparent}
.meal-toggle{display:flex;gap:8px}
.menu-panels{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.menu-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.menu-item h4{margin:0 0 6px;font-size:16px}
.menu-item p{margin:0;color:#c6d0f5}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.menu-note{color:#9aa6c2;margin-top:10px}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card:hover{transform:translateY(-4px)}
.card .emoji{font-size:28px;margin-bottom:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chips span{padding:6px 10px;border-radius:999px;background:rgba(134,239,172,.12);border:1px solid var(--ring);color:#a7f3d0;font-size:12px}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:10px 0 24px}
.feature{background:linear-gradient(180deg,rgba(124,77,255,.09),rgba(124,77,255,.03));border:1px solid rgba(124,77,255,.24);border-radius:16px;padding:18px}
.feature .icon{font-size:22px;margin-bottom:6px}

/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.metric{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.metric .num{font-size:34px;font-weight:800;background:linear-gradient(135deg,var(--brandA),var(--brandB));-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .label{color:#c6d0f5}

/* Timeline */
.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.timeline li{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.timeline li span{display:inline-flex;width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brandA),var(--brandB));color:#0b1224;font-weight:800;margin-bottom:8px}

/* About */
.about-block{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}

/* Contact */
.contact-form{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
label{display:flex;flex-direction:column;gap:6px;color:#c6d0f5}
input,textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;color:#e6ecff;outline:none}
input:focus,textarea:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.2)}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:10px}

/* Hide legacy contact form if exists */
#quoteForm{display:none}

/* Footer */
.site-footer{padding:40px 0 80px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;align-items:flex-start}
.footer-brand{gap:8px}
.footnote{color:#9aa6c2}
.footer-links{display:flex;flex-direction:column;gap:8px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Magnetic buttons */
.magnetic{--x:0;--y:0;transform:translateZ(0)}
.magnetic:hover{transform:translate(var(--x),var(--y))}

/* Tilt cards */
.tilt{transform-style:preserve-3d}
.tilt:hover{transition:transform .08s linear}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .hero-visual{order:-1;height:300px;margin-top:-20px}
  .headline{font-size:42px}
  .menu-panels{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .card-grid,.features,.metrics,.timeline{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}