/* 作者: LGO赵哥 */
/* 修改时间: 2025-11-13 */
/* TASK-ID: LGO-PORTAL-20251113-01 */
:root{
  --bg: #f4f8ff;
  --bg-2: #eef5ff;
  --fg: #0f172a;
  --muted: #64748b;
  --primary: #5b7cfa;
  --primary-2: #8aa8ff;
  --card: #ffffff;
  --border: #e6effa;
  --shadow: 0 8px 24px rgba(30, 64, 175, 0.08);
}
*{box-sizing:border-box}html,body{padding:0;margin:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  background:
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--fg);
}
.navbar{position:sticky;top:0;backdrop-filter: blur(6px); background: rgba(255,255,255,.8); border-bottom:1px solid var(--border); z-index: 20; box-shadow: 0 4px 12px rgba(59,130,246,.06)}
.nav-container{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.nav-logo a{color:var(--fg);font-weight:700;text-decoration:none;letter-spacing:.5px}
.nav-menu{list-style:none;display:flex;gap:18px}
.nav-link{color:var(--muted);text-decoration:none}
.nav-link:hover{color:var(--fg)}
.hamburger{display:none;background:none;border:none;color:var(--fg)}

.hero{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:88px 16px;position:relative}
.hero-container{max-width:900px}
.hero-title{font-size:36px;margin:0 0 8px}
.hero-name{background:linear-gradient(90deg, var(--primary), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; margin-left:8px}
.hero-subtitle{color:var(--primary-2);margin:4px 0 8px}
.hero-description{color:var(--muted);max-width:720px}
.hero-buttons{display:flex;gap:12px;margin-top:20px}
.btn{display:inline-block;padding:12px 18px;border-radius:9999px;border:1px solid var(--border);color:var(--fg);text-decoration:none;transition:all .2s}
.btn:hover{transform:translateY(-1px); box-shadow: 0 6px 18px rgba(91,124,250,.16)}
.btn-primary{background:linear-gradient(90deg, var(--primary), var(--primary-2));border-color:transparent;color:#fff}
.btn-secondary{background:#f1f5ff;color:#1f2a44}
.btn-outline{background:transparent}

.scroll-cta{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(240,246,255,.8)); box-shadow: 0 8px 24px rgba(91,124,250,.18); display:flex;align-items:center;justify-content:center; cursor:pointer}
.scroll-cta svg{width:22px;height:22px;stroke: #5b7cfa; fill:none; stroke-width:2}
.scroll-cta:hover{transform:translateX(-50%) translateY(-1px)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(8px) rotate(-45deg)}}

.container{max-width:1100px;margin:0 auto;padding:64px 16px}
.section-title{font-size:22px;margin:0 0 8px}
.section-subtitle{color:var(--muted);margin-top:4px}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px; box-shadow: var(--shadow); position:relative; transition:transform .24s, box-shadow .24s}
.card:hover{transform:translateY(-2px) scale(1.01); box-shadow: 0 10px 28px rgba(59,130,246,.12)}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.card-icon{font-size:22px}
.card-desc{color:var(--muted);min-height:40px}
.card-tags{display:flex;gap:8px;margin:12px 0}
.tag{font-size:12px;color:var(--muted);border:1px dashed var(--border);padding:2px 8px;border-radius:999px}
.card-actions{display:flex;gap:8px}
.corner-badge{position:absolute; top:10px; right:12px; background: var(--primary); color:#fff; font-size:11px; padding:2px 6px; border-radius:999px; box-shadow: var(--shadow)}

.resources-grid-simple{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.resource-card-simple{display:block;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;color:var(--fg);text-decoration:none; box-shadow: var(--shadow); position:relative; transition:transform .24s, box-shadow .24s}
.resource-card-simple:hover{transform:translateY(-2px) scale(1.01); box-shadow: 0 10px 28px rgba(91,124,250,.16)}
.resource-card-header{display:flex;align-items:center;justify-content:space-between}
.resource-badge{font-size:12px;color:var(--primary-2)}
.resource-card-desc{color:var(--muted);min-height:40px}
.resource-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;height:44px}
.resource-tags{display:flex;gap:8px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.resource-tag{display:inline-block;font-size:12px;line-height:20px;color:var(--muted);border:1px dashed var(--border);padding:2px 8px;border-radius:999px}
.resource-sub{margin:6px 0 8px}
.resource-arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(90deg,var(--primary),var(--primary-2)); box-shadow: 0 6px 18px rgba(91,124,250,.16)}
.resource-arrow svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.resource-arrow:hover{transform:translateY(-1px)}

.blog-teaser{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.blog-card.placeholder{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px; box-shadow: var(--shadow)}
.blog-title{font-weight:600}
.blog-desc{color:var(--muted)}

.about .about-text{color:var(--muted)}

.floating-shapes{position:fixed;inset:0;pointer-events:none}
.floating-circle{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(59,130,246,.20), rgba(59,130,246,.0));animation: drift 18s ease-in-out infinite}
.floating-circle:nth-child(1){top:10%;left:8%}
.floating-circle:nth-child(2){top:42%;right:12%}
.floating-circle:nth-child(3){bottom:8%;left:20%}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-10px)}}

/* hero subtle ripple */
.hero::before{content:''; position:absolute; inset:-10% -20%; pointer-events:none; background: radial-gradient(circle at 50% 40%, rgba(138,168,255,.25), transparent 40%); filter: blur(8px); animation: ripple 8s ease-in-out infinite}
@keyframes ripple{0%,100%{transform:scale(1); opacity:.6}50%{transform:scale(1.03); opacity:.4}}

/* hero particles */
.hero-particles{position:absolute; inset:0; pointer-events:none}
.hero-particles .dot{position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(59,130,246,.35); animation: floatDot 10s ease-in-out infinite}
.hero-particles .dot:nth-child(1){top:18%; left:30%;}
.hero-particles .dot:nth-child(2){top:28%; left:65%; width:8px; height:8px}
.hero-particles .dot:nth-child(3){top:60%; left:40%;}
.hero-particles .dot:nth-child(4){top:48%; left:20%;}
.hero-particles .dot:nth-child(5){top:70%; left:70%;}
@keyframes floatDot{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-6px)}}

footer{border-top:1px solid var(--border);background:#ffffff}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:8px}
.brand-name{font-size:18px;font-weight:800;background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-desc{color:#94a3b8}
.footer-icons{display:flex;justify-content:center;gap:12px;margin-top:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;border:1px solid var(--border);background:#f1f5ff;color:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,.06)}
.icon-btn:hover{transform:translateY(-1px)}
.footer-copy{color:#94a3b8;margin-top:6px}
.text-center{text-align:center}
.text-xs{font-size:12px}
.underline{text-decoration:underline}
.decoration-dotted{text-decoration-style:dotted}
.align-middle{vertical-align:middle}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-6xl{max-width:1100px}
.px-4{padding-left:16px;padding-right:16px}
.py-4{padding-top:16px;padding-bottom:16px}
.border-t{border-top:1px solid var(--border)}
.border-gray-200{border-color:var(--border)}
.bg-white{background:#ffffff}
.text-gray-500{color:#94a3b8}

@media (max-width:860px){
  .projects-grid,.resources-grid-simple{grid-template-columns:1fr}
  .hamburger{display:block}
  .nav-menu{display:none}
  .nav-menu.open{display:flex;flex-direction:column;gap:8px}
}

/* Dark theme */
[data-theme="dark"]{
  --bg: #0b1220;
  --bg-2: #0e1629;
  --fg: #cfe3ff;
  --muted: #9fb7d9;
  --primary: #4f8bff;
  --primary-2: #7fb3ff;
  --card: #111a2e;
  --border: #1d2943;
  --shadow: 0 8px 24px rgba(30,64,175,0.24);
}
[data-theme="dark"] .navbar{background: rgba(10,16,28,.5)}
[data-theme="dark"] footer{background:#0e1629}
[data-theme="dark"] .icon-btn{background:#182235;color:#7fb3ff;border-color:#1d2943}
[data-theme="dark"] .text-gray-500{color:#9fb7d9}
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}
/* layout fixes: ensure resource cards align bottom row consistently */
.resources-grid-simple{align-items:stretch}
.resource-card-simple{display:flex;flex-direction:column;height:100%}
.resource-sub{font-size:12px;line-height:20px;color:var(--primary)}
.resource-footer{margin-top:auto}