/* ============================================
   DunCrew Landing Page - Common Styles
   Shared across all pages
   ============================================ */

:root {
  --bg-primary: #fdfbf5;
  --bg-secondary: #f7f3e9;
  --bg-panel: #fffdf8;
  --bg-elevated: #efe9da;
  --text-primary: #3c3228;
  --text-secondary: #786955;
  --text-muted: #aa9b87;
  --border-subtle: rgba(180,165,140,0.25);
  --border-medium: rgba(160,145,120,0.35);
  --border-accent: rgba(94,186,174,0.4);
  --teal: #5ebab0;
  --teal-light: #8ad4cc;
  --teal-glow: rgba(94,186,174,0.12);
  --amber: #e8a838;
  --amber-glow: rgba(232,168,56,0.12);
  --green: #6cb478;
  --green-glow: rgba(108,180,120,0.12);
  --purple: #b284be;
  --purple-glow: rgba(178,132,190,0.12);
  --coral: #dc7864;
  --gradient-text: linear-gradient(135deg, #5ebab0, #6cb478);
  --gradient-cta: linear-gradient(135deg, #5ebab0, #6cb478);
  --shadow-card: 0 2px 16px rgba(60,50,40,0.06), 0 1px 3px rgba(60,50,40,0.04);
  --shadow-card-hover: 0 8px 32px rgba(60,50,40,0.10), 0 2px 6px rgba(60,50,40,0.06);
  --shadow-button: 0 4px 16px rgba(94,186,174,0.25), 0 2px 4px rgba(60,50,40,0.08);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-2xl: 2.5rem;
  --radius-full: 9999px;
  --ease: cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono','Consolas',monospace}
.container{max-width:1120px;margin:0 auto;padding:0 1.5rem}

.gradient-text{
  background:var(--gradient-text);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.warm-card{
  background:var(--bg-panel);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  transition:all .3s var(--ease);
}
.warm-card:hover{
  border-color:var(--border-accent);box-shadow:var(--shadow-card-hover);
  transform:translateY(-3px);
}

/* ---- Decorative circles ---- */
.deco{position:absolute;border-radius:50%;pointer-events:none}
.deco.ring-teal{border:2px solid rgba(94,186,174,0.15)}
.deco.ring-green{border:2px dashed rgba(108,180,120,0.12)}
.deco.ring-coral{border:1.5px solid rgba(220,120,100,0.10)}
.deco.fill-amber{background:rgba(232,168,56,0.06)}
.deco.fill-purple{background:rgba(178,132,190,0.06)}
.deco.fill-teal{background:rgba(94,186,174,0.05)}
.deco.dot{width:10px;height:10px}
.deco.dot-teal{background:var(--teal);opacity:.18}
.deco.dot-amber{background:var(--amber);opacity:.2}
.deco.dot-green{background:var(--green);opacity:.18}
.deco.dot-purple{background:var(--purple);opacity:.12}
.deco.dot-coral{background:var(--coral);opacity:.14}

/* ---- Animations ---- */
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.75;transform:scale(1.08)}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideSeq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.anim-fade{animation:fadeInUp .7s var(--ease) both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
.d4{animation-delay:.4s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}
.reveal{opacity:0;transform:translateY(28px);transition:all .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ---- Nav ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.65rem 0;
  background:rgba(253,251,245,0.85);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle)}
nav .inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-primary)}
.nav-logo-icon{width:36px;height:36px;border-radius:var(--radius-md);overflow:hidden}
.nav-logo-icon img{width:100%;height:100%;object-fit:cover}
.nav-logo-text{font-weight:700;font-size:1.125rem;letter-spacing:-0.02em}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;
  transition:color .15s var(--ease)}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a.active{color:var(--teal);font-weight:600}
.nav-dl{display:inline-flex;align-items:center;gap:6px;padding:.45rem 1.2rem;
  background:var(--teal-glow);border:1px solid rgba(94,186,174,0.3);border-radius:var(--radius-full);
  color:var(--teal);font-size:.875rem;font-weight:600;text-decoration:none;
  transition:all .3s var(--ease)}
.nav-dl:hover{background:rgba(94,186,174,0.18);box-shadow:0 0 16px rgba(94,186,174,0.12)}

/* ---- Language Switcher ---- */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  background:none;border:1.5px solid var(--border-medium);border-radius:var(--radius-full);
  padding:.3rem .7rem;cursor:pointer;font-size:.8rem;font-weight:600;
  transition:all .2s var(--ease);line-height:1;
}
.lang-switch:hover{border-color:var(--teal)}
.lang-opt{color:var(--text-muted);transition:color .15s var(--ease)}
.lang-opt.active{color:var(--teal)}
.lang-sep{color:var(--text-muted);font-size:.7rem;margin:0 1px}

/* ---- Section common ---- */
.sec-with-img{display:flex;align-items:center;gap:2rem}
.sec-img{width:100px;height:100px;object-fit:contain;flex-shrink:0;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 4px 12px rgba(60,50,40,0.08))}
.sec-label{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;color:var(--teal);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.875rem;font-weight:600}
.sec-label-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:.5}
.sec-title{font-size:2rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:.875rem}
.sec-desc{font-size:1rem;color:var(--text-secondary);max-width:520px;margin-bottom:3rem;line-height:1.7}

/* ---- Buttons ---- */
.btn-p{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 2rem;
  background:var(--gradient-cta);border:none;border-radius:var(--radius-full);color:#fff;
  font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-button);transition:all .3s var(--ease)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(94,186,174,0.35)}
.btn-p svg{width:18px;height:18px}
.btn-s{display:inline-flex;align-items:center;gap:6px;padding:.85rem 1.5rem;
  background:transparent;border:1.5px solid var(--border-medium);border-radius:var(--radius-full);
  color:var(--text-secondary);font-size:.875rem;font-weight:500;text-decoration:none;
  transition:all .3s var(--ease)}
.btn-s:hover{border-color:var(--teal);color:var(--teal)}

/* ---- Features grid (shared) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feat-card{padding:1.75rem;display:flex;flex-direction:column}
.feat-icon{width:52px;height:52px;border-radius:var(--radius-full);display:flex;
  align-items:center;justify-content:center;margin-bottom:1.25rem}
.feat-icon svg{width:22px;height:22px}
.feat-icon.teal{background:var(--teal-glow);color:var(--teal);border:1.5px solid rgba(94,186,174,0.2)}
.feat-icon.green{background:var(--green-glow);color:var(--green);border:1.5px solid rgba(108,180,120,0.2)}
.feat-icon.amber{background:var(--amber-glow);color:var(--amber);border:1.5px solid rgba(232,168,56,0.2)}
.feat-icon.purple{background:var(--purple-glow);color:var(--purple);border:1.5px solid rgba(178,132,190,0.2)}
.feat-icon.coral{background:rgba(220,120,100,0.08);color:var(--coral);border:1.5px solid rgba(220,120,100,0.2)}
.feat-title{font-size:1.125rem;font-weight:600;margin-bottom:.35rem}
.feat-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.7}

/* ---- Base tags (shared) ---- */
.base-seq{display:flex;gap:7px;margin:1.5rem 0;flex-wrap:wrap}
.base-tag{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--radius-full);font-size:.875rem;font-weight:700;border:2px solid;
  transition:transform .15s var(--ease)}
.base-tag:hover{transform:scale(1.18)}
.base-tag.e{background:var(--teal-glow);color:var(--teal);border-color:rgba(94,186,174,0.35)}
.base-tag.p{background:var(--green-glow);color:var(--green);border-color:rgba(108,180,120,0.35)}
.base-tag.v{background:var(--amber-glow);color:var(--amber);border-color:rgba(232,168,56,0.35)}
.base-tag.x{background:var(--purple-glow);color:var(--purple);border-color:rgba(178,132,190,0.35)}
.base-legend{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.25rem}
.base-legend-item{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--text-secondary)}
.base-legend-dot{width:10px;height:10px;border-radius:50%}

/* ---- Footer ---- */
footer{padding:1.5rem 0;border-top:1px solid var(--border-subtle)}
.foot-inner{display:flex;align-items:center;justify-content:space-between}
.foot-copy{font-size:.75rem;color:var(--text-muted)}
.foot-links{display:flex;gap:1.5rem;list-style:none}
.foot-links a{font-size:.75rem;color:var(--text-muted);text-decoration:none;transition:color .15s var(--ease)}
.foot-links a:hover{color:var(--text-secondary)}

/* ---- Mobile hamburger ---- */
.nav-hamburger{display:none;background:none;border:none;font-size:1.5rem;
  color:var(--text-primary);cursor:pointer;padding:.25rem;line-height:1}

/* ---- Responsive ---- */
@media(max-width:768px){
  .feat-grid{grid-template-columns:1fr}
  .sec-with-img{flex-direction:column;text-align:center;gap:1rem}
  .sec-img{width:72px;height:72px}
  .deco{display:none}
  .nav-links{
    display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(253,251,245,0.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border-subtle);padding:1rem 1.5rem;gap:1rem;
  }
  .nav-links.open{display:flex}
  .nav-hamburger{display:block}
  .foot-inner{flex-direction:column;gap:.75rem;text-align:center}
}
@media(max-width:480px){
  .base-tag{width:30px;height:30px;font-size:.75rem}
}