/* ============================================================
   CuriNova WSI – Frontend Design System
   Professional biotech blue/white theme
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

:root {
    --primary: #3b82f6;
    --primary-dark: #1e40af;
    --primary-light: #93c5fd;
    --accent: #6366f1;
    --bg-main: #f0f4fa;
    --bg-white: #ffffff;
    --bg-dark: #0f172a;
    --bg-card: #ffffff;
    --text-dark: #1e293b;
    --text-body: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: 300ms ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; scroll-padding-top:80px; }
body {
    font-family:'Inter','Noto Sans TC',-apple-system,sans-serif;
    background:var(--bg-main);
    color:var(--text-body);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--primary-dark); }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }

/* ---------- Navbar ---------- */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    height:72px;
    transition:all var(--transition);
}
.navbar.scrolled { box-shadow:var(--shadow-sm); }
.navbar .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; color:var(--text-dark); }
.nav-brand .logo-icon {
    width:36px; height:36px; background:var(--primary); border-radius:8px;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
}
.nav-brand span { color:var(--primary); }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a {
    color:var(--text-body); font-size:0.9rem; font-weight:500;
    padding:8px 0; position:relative; transition:color var(--transition);
}
.nav-links a:hover { color:var(--primary); }
.nav-links a::after {
    content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
    background:var(--primary); transition:width var(--transition);
}
.nav-links a:hover::after { width:100%; }
.btn-lang {
    display:flex; align-items:center; gap:6px;
    padding:8px 16px; border:1px solid var(--border); border-radius:20px;
    background:#fff; color:var(--text-body); font-size:0.85rem; cursor:pointer;
    transition:all var(--transition);
}
.btn-lang:hover { border-color:var(--primary); color:var(--primary); }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-dark); }

/* ---------- Hero ---------- */
.hero {
    padding:140px 0 80px;
    background:linear-gradient(135deg, #f0f4fa 0%, #e8effd 50%, #f0f4fa 100%);
    position:relative; overflow:hidden;
}
.hero .container { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero-badge {
    display:inline-block; padding:6px 16px; background:rgba(59,130,246,0.08);
    color:var(--primary); font-size:0.82rem; font-weight:500; border-radius:20px;
    border:1px solid rgba(59,130,246,0.15); margin-bottom:1.5rem;
}
.hero h1 {
    font-size:3rem; font-weight:800; color:var(--text-dark);
    line-height:1.2; margin-bottom:1.5rem; letter-spacing:-0.02em;
}
.hero-desc { font-size:1.1rem; color:var(--text-body); line-height:1.8; margin-bottom:2rem; max-width:520px; }
.hero-stats {
    display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.hero-stat { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text-muted); }
.hero-stat .dot { width:8px; height:8px; border-radius:50%; background:#22c55e; animation:pulse-dot 2s infinite; }
.hero-stat .divider { width:1px; height:20px; background:var(--border); }
.hero-visual {
    background:var(--bg-dark); border-radius:var(--radius-lg);
    overflow:hidden; position:relative;
    box-shadow:var(--shadow-lg);
}
.hero-grid {
    display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr);
    gap:3px; padding:3px; height:100%; background:#1a2332;
}
.hero-tile {
    background:linear-gradient(135deg, #1e3a5f, #2a4a7f);
    border-radius:4px; transition:all 0.5s ease; opacity:0.7;
}
.hero-tile:nth-child(odd) { background:linear-gradient(135deg, #1e3a8f, #3b5dc9); opacity:0.85; }
.hero-tile:hover { opacity:1; transform:scale(1.02); }
.hero-visual-label {
    position:absolute; bottom:12px; right:16px; color:#94a3b8;
    font-size:0.75rem; font-weight:500; background:rgba(15,23,42,0.8);
    padding:4px 10px; border-radius:6px;
}

@keyframes pulse-dot {
    0%,100% { opacity:1; } 50% { opacity:0.4; }
}

/* ---------- Section Common ---------- */
.section { padding:100px 0; }
.section-alt { background:var(--bg-white); }
.section-dark { background:var(--bg-dark); color:#e2e8f0; }
.section-title {
    font-size:2.2rem; font-weight:700; color:var(--text-dark);
    text-align:center; margin-bottom:0.75rem; letter-spacing:-0.01em;
}
.section-dark .section-title { color:#f1f5f9; }
.section-line {
    width:48px; height:3px; background:var(--primary); margin:0 auto 1rem;
    border-radius:2px;
}
.section-subtitle {
    text-align:center; color:var(--text-muted); font-size:1rem;
    max-width:600px; margin:0 auto 3.5rem;
}

/* ---------- Services Grid ---------- */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.service-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:2rem; transition:all var(--transition);
    position:relative; overflow:hidden;
}
.service-card:hover {
    border-color:var(--primary-light); box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}
.service-icon {
    width:52px; height:52px; border-radius:12px; display:flex;
    align-items:center; justify-content:center; font-size:1.4rem;
    margin-bottom:1.25rem; background:rgba(59,130,246,0.08); color:var(--primary);
}
.service-card h3 { font-size:1.15rem; font-weight:600; color:var(--text-dark); margin-bottom:0.75rem; }
.service-card p { font-size:0.9rem; color:var(--text-body); line-height:1.7; }

/* ---------- Experience / Demo ---------- */
.experience { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.exp-content h2 { font-size:2rem; font-weight:700; color:var(--text-dark); margin-bottom:1rem; text-align:left; }
.exp-content p { margin-bottom:1.5rem; }
.exp-features { list-style:none; margin-bottom:2rem; }
.exp-features li {
    padding:0.5rem 0; display:flex; align-items:center; gap:10px;
    font-size:0.92rem; color:var(--text-body);
}
.exp-features li::before { content:'✓'; color:var(--primary); font-weight:700; }
.btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 28px; background:var(--primary); color:#fff;
    border:none; border-radius:8px; font-size:0.95rem; font-weight:500;
    cursor:pointer; transition:all var(--transition);
}
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 4px 16px rgba(59,130,246,0.3); color:#fff; }
.exp-visual {
    background:var(--bg-dark); border-radius:var(--radius-lg);
    aspect-ratio:16/10; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.exp-toolbar {
    position:absolute; top:0; left:0; right:0; height:44px;
    background:rgba(30,41,59,0.95); display:flex; align-items:center;
    padding:0 16px; gap:8px; border-bottom:1px solid #334155;
}
.exp-toolbar-dot { width:10px; height:10px; border-radius:50%; }
.exp-toolbar-dot.red { background:#ef4444; }
.exp-toolbar-dot.yellow { background:#eab308; }
.exp-toolbar-dot.green { background:#22c55e; }
.exp-viewer-area {
    position:absolute; top:44px; left:0; right:0; bottom:0;
    display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr);
    gap:2px; padding:2px; background:#0f172a;
}
.exp-viewer-tile {
    background:linear-gradient(135deg, #1e3a5f, #2563eb);
    border-radius:2px; opacity:0.6; transition:opacity 0.3s;
}
.exp-viewer-tile:nth-child(odd) { opacity:0.8; background:linear-gradient(135deg, #312e81, #4f46e5); }
.exp-viewer-tile:hover { opacity:1; }

/* ---------- Solutions Grid ---------- */
.solutions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.solution-card {
    background:rgba(30,41,59,0.5); border:1px solid rgba(148,163,184,0.1);
    border-radius:var(--radius); padding:2rem; transition:all var(--transition);
}
.solution-card:hover {
    background:rgba(30,41,59,0.8); border-color:rgba(59,130,246,0.3);
    transform:translateY(-4px);
}
.solution-icon {
    width:48px; height:48px; border-radius:12px; display:flex;
    align-items:center; justify-content:center; font-size:1.3rem;
    margin-bottom:1.25rem; background:rgba(59,130,246,0.15); color:var(--primary-light);
}
.solution-card h3 { font-size:1.1rem; font-weight:600; color:#f1f5f9; margin-bottom:0.75rem; }
.solution-card p { font-size:0.88rem; color:#94a3b8; line-height:1.7; }

/* ---------- Workflow ---------- */
.workflow-timeline { display:flex; justify-content:center; gap:0; position:relative; padding:0 2rem; }
.workflow-step { flex:1; max-width:260px; text-align:center; position:relative; padding:0 1rem; }
.step-number {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff; font-size:1.2rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 1.25rem; position:relative; z-index:2;
    box-shadow:0 4px 16px rgba(59,130,246,0.3);
}
.workflow-step:not(:last-child)::after {
    content:''; position:absolute; top:28px; left:calc(50% + 28px);
    width:calc(100% - 56px); height:2px;
    background:linear-gradient(90deg, var(--primary), var(--border));
    z-index:1;
}
.workflow-step h3 { font-size:1.05rem; font-weight:600; color:var(--text-dark); margin-bottom:0.5rem; }
.workflow-step p { font-size:0.85rem; color:var(--text-muted); line-height:1.6; }

/* ---------- Tech Specs ---------- */
.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.tech-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:2rem; text-align:center;
    transition:all var(--transition);
}
.tech-card:hover { border-color:var(--primary-light); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.tech-icon {
    width:56px; height:56px; border-radius:14px; margin:0 auto 1rem;
    display:flex; align-items:center; justify-content:center;
    background:rgba(59,130,246,0.08); color:var(--primary); font-size:1.5rem;
}
.tech-card h3 { font-size:1.05rem; font-weight:600; color:var(--text-dark); margin-bottom:0.5rem; }
.tech-card p { font-size:0.85rem; color:var(--text-muted); line-height:1.6; }

/* ---------- CTA ---------- */
.cta-section {
    padding:80px 0; text-align:center;
    background:linear-gradient(135deg, var(--primary-dark), var(--accent));
    color:#fff;
}
.cta-section h2 { font-size:2rem; font-weight:700; margin-bottom:1rem; color:#fff; }
.cta-section p { font-size:1.05rem; opacity:0.9; margin-bottom:2rem; max-width:500px; margin-left:auto; margin-right:auto; }
.btn-white {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 32px; background:#fff; color:var(--primary-dark);
    border:none; border-radius:8px; font-size:0.95rem; font-weight:600;
    cursor:pointer; transition:all var(--transition);
}
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); color:var(--primary-dark); }

/* ---------- Footer ---------- */
.footer {
    background:var(--bg-dark); color:#94a3b8; padding:60px 0 30px;
}
.footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem;
    padding-bottom:2.5rem; border-bottom:1px solid #1e293b;
}
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
.footer-brand .logo-icon {
    width:32px; height:32px; background:var(--primary); border-radius:6px;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.footer-brand span { color:#f1f5f9; font-weight:700; font-size:1.1rem; }
.footer-brand .wsi { color:var(--primary-light); }
.footer-desc { font-size:0.88rem; line-height:1.8; margin-bottom:1rem; max-width:360px; }
.footer h4 { color:#f1f5f9; font-size:0.95rem; font-weight:600; margin-bottom:1rem; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:0.5rem; }
.footer-links a { color:#94a3b8; font-size:0.88rem; transition:color var(--transition); }
.footer-links a:hover { color:var(--primary-light); }
.footer-contact li { display:flex; align-items:flex-start; gap:8px; margin-bottom:0.6rem; font-size:0.88rem; }
.footer-contact .icon { flex-shrink:0; width:18px; text-align:center; }
.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:1.5rem; font-size:0.8rem; color:#64748b;
}

/* ---------- Scroll Animations ---------- */
.fade-up {
    opacity:0; transform:translateY(30px);
    transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media(max-width:1024px) {
    .hero .container { grid-template-columns:1fr; }
    .hero-visual { max-width:500px; margin:0 auto; }
    .hero h1 { font-size:2.4rem; }
    .experience { grid-template-columns:1fr; }
    .services-grid, .solutions-grid, .tech-grid { grid-template-columns:1fr 1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
    .nav-links { display:none; position:fixed; top:72px; left:0; right:0; background:#fff; flex-direction:column; padding:2rem; gap:1rem; border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); }
    .nav-links.open { display:flex; }
    .nav-toggle { display:block; }
    .hero { padding:110px 0 60px; }
    .hero h1 { font-size:2rem; }
    .services-grid, .solutions-grid, .tech-grid { grid-template-columns:1fr; }
    .workflow-timeline { flex-direction:column; align-items:center; }
    .workflow-step::after { display:none!important; }
    .workflow-step { max-width:100%; }
    .footer-grid { grid-template-columns:1fr; }
    .section { padding:60px 0; }
    .container { padding:0 1.25rem; }
}