:root {
  --cc-bg:#f7f8fc;
  --cc-surface:#ffffff;
  --cc-surface-2:#f0f1f7;
  --cc-primary:#7c3aed;
  --cc-secondary:#0891b2;
  --cc-pink:#db2777;
  --cc-text:#171525;
  --cc-muted:#687084;
  --cc-border:rgba(23,21,37,.09);
}
html { scroll-behavior:smooth; }
body { background:var(--cc-bg); color:var(--cc-text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.fw-black { font-weight:900; letter-spacing:-.045em; }
.cc-navbar { background:rgba(255,255,255,.82); backdrop-filter:blur(18px); border-bottom:1px solid rgba(23,21,37,.07); }
.navbar-brand { font-size:1.15rem; }
.cc-logo { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--cc-primary),var(--cc-secondary)); box-shadow:0 0 25px rgba(124,58,237,.2); }
.nav-link { color:#626a7d!important; }
.nav-link:hover,.nav-link.active { color:#171525!important; }
.cc-gradient-text { background:linear-gradient(90deg,#7c3aed,#0891b2); -webkit-background-clip:text;background-clip:text;color:transparent; }
.cc-hero { position:relative; overflow:hidden; background:radial-gradient(circle at 75% 35%,rgba(124,58,237,.12),transparent 28%),radial-gradient(circle at 15% 70%,rgba(8,145,178,.08),transparent 25%); }
.cc-hero:before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(23,21,37,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,21,37,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 85%); }
.cc-eyebrow { display:inline-flex;align-items:center;gap:.4rem;color:#6d28d9;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em; }
.cc-lead { max-width:650px; }
.cc-btn-primary { border:0;color:white;background:linear-gradient(135deg,#7c3aed,#6366f1);box-shadow:0 10px 30px rgba(99,102,241,.2);transition:.2s; }
.cc-btn-primary:hover { color:white;transform:translateY(-2px);box-shadow:0 14px 35px rgba(99,102,241,.3); }
.cc-btn-ghost { border:1px solid var(--cc-border);background:#fff;color:#171525; }
.cc-btn-ghost:hover { background:#f0f1f7;color:#171525;border-color:rgba(23,21,37,.15); }
.cc-stats { color:var(--cc-muted); }
.cc-stats div { display:flex;flex-direction:column;gap:.1rem; }
.cc-stats strong { color:#171525;font-size:1.3rem; }
.cc-stats span { font-size:.78rem; }
.cc-hero-card { min-height:430px;position:relative;display:grid;place-items:center; }
.cc-orb { position:absolute;border-radius:50%;filter:blur(1px); }
.cc-orb-1 { width:270px;height:270px;background:rgba(124,58,237,.14);filter:blur(70px); }
.cc-orb-2 { width:190px;height:190px;background:rgba(8,145,178,.12);right:5%;bottom:5%;filter:blur(60px); }
.cc-coffee-card { position:relative;width:min(390px,90%);padding:28px;border:1px solid rgba(23,21,37,.1);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,248,252,.94));box-shadow:0 35px 90px rgba(30,27,55,.14),inset 0 1px rgba(255,255,255,.9);transform:rotate(2deg); }
.cc-cup { font-size:7rem;line-height:1;margin:20px 0;filter:drop-shadow(0 15px 20px rgba(0,0,0,.12)); }
.cc-live-dot { color:#e11d48;font-size:.72rem;font-weight:800; }
.cc-pill,.cc-tags span { display:inline-block;padding:.4rem .7rem;border:1px solid var(--cc-border);border-radius:999px;background:rgba(124,58,237,.045);font-size:.76rem; }
.cc-section { background:rgba(255,255,255,.65);border-top:1px solid rgba(23,21,37,.06);border-bottom:1px solid rgba(23,21,37,.06); }
.cc-card,.cc-tool { position:relative;padding:26px;border:1px solid var(--cc-border);border-radius:22px;background:rgba(255,255,255,.82);transition:.2s;box-shadow:0 8px 30px rgba(30,27,55,.045); }
.cc-card:hover,.cc-tool:hover { transform:translateY(-4px);border-color:rgba(124,58,237,.28);box-shadow:0 20px 45px rgba(30,27,55,.1); }
.cc-avatar { width:64px;height:64px;display:grid;place-items:center;border-radius:20px;font-size:1.4rem;font-weight:900;color:#fff; }
.avatar-purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); }
.avatar-cyan { background:linear-gradient(135deg,#0891b2,#67e8f9); }
.avatar-pink { background:linear-gradient(135deg,#db2777,#f9a8d4); }
.cc-live-badge { position:absolute;top:25px;right:25px;color:#e11d48;font-size:.68rem;font-weight:800; }
.cc-live-badge.offline { color:#8a91a3; }
.cc-progress { height:5px;background:rgba(23,21,37,.07); }
.cc-progress .progress-bar { background:linear-gradient(90deg,#7c3aed,#0891b2); }
.cc-link { color:#6d28d9;font-weight:700;font-size:.9rem; }
.cc-event { display:flex;align-items:center;gap:18px;padding:18px;border:1px solid var(--cc-border);border-radius:18px;background:rgba(255,255,255,.82);margin-bottom:12px;transition:.2s;box-shadow:0 5px 20px rgba(30,27,55,.035); }
.cc-event:hover { background:#fff;transform:translateX(4px); }
.cc-date { width:58px;height:58px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:15px;background:rgba(124,58,237,.09);color:#6d28d9; }
.cc-date strong { font-size:1.3rem;line-height:1; }.cc-date span{font-size:.62rem;font-weight:800;margin-top:3px;}
.cc-arrow { color:#7c3aed;font-size:1.3rem; }
.cc-tool-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(124,58,237,.09);font-size:1.3rem;margin-bottom:22px; }
.cc-max { max-width:560px; }
.cc-community { border:1px solid rgba(124,58,237,.2);border-radius:28px;background:radial-gradient(circle at 80% 50%,rgba(124,58,237,.1),transparent 35%),#fff;box-shadow:0 15px 50px rgba(30,27,55,.06); }
.cc-footer { border-top:1px solid var(--cc-border);background:#fff; }
.cc-footer a { color:#687084; }.cc-footer a:hover{color:#171525;}
@media(max-width:991px){ .navbar-collapse{padding:1rem 0;} .cc-hero h1{font-size:3.8rem;} }
@media(max-width:575px){ .cc-hero h1{font-size:3rem;} .cc-coffee-card{transform:none;} .cc-event{gap:12px;} .cc-arrow{display:none;} }
