/* Creative Chaos Hub — Professional Theme
   “Find your voice in the chaos”
*/

:root{
  --bg:#f4efe4;            /* page background */
  --surface:#fffaf0;       /* cards/panels */
  --muted-surface:#f1eadc; /* subtle fills */
  --elev:#ffffff;          /* elevated surfaces */
  --border: rgba(28,33,40,.16);

  --text:#1c2128;          /* ink */
  --muted:#5b6673;         /* graphite */
  --navy:#0c1222;          /* deep ink/nav */
  --brand:#e3c15c;         /* gold */
  --brand-ink:#1c2128;

  --success:#1f7a4a;
  --danger:#b4232a;
  --focus:#2b6cb0;

  --radius:16px;
  --shadow: 0 18px 45px rgba(28,33,40,.10);
  --shadow-soft: 0 10px 25px rgba(28,33,40,.08);

  --content: min(1100px, calc(100% - 32px));
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 15% -10%, rgba(227,193,92,.14), transparent 55%),
    radial-gradient(900px 650px at 85% 0%, rgba(12,18,34,.11), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(28,33,40,.08), transparent 60%),
    var(--bg);
}
/* subtle grain */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

a{color:inherit; text-decoration:none}
.container{width:var(--content); margin:0 auto}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(28,33,40,.14);
  background: rgba(255,250,240,.85);
  box-shadow: 0 10px 22px rgba(28,33,40,.08);
  font-weight: 800;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn-primary{
  background: linear-gradient(180deg, rgba(227,193,92,.95), rgba(227,193,92,.78));
  border-color: rgba(227,193,92,.9);
  color: var(--navy);
}
.btn-secondary{
  background: rgba(12,18,34,.08);
  border-color: rgba(28,33,40,.18);
  color: var(--navy);
}
.btn.btn-danger{background: rgba(180,35,42,.10); border-color: rgba(180,35,42,.25); color: var(--danger);}
.btn.btn-success{background: rgba(31,122,74,.10); border-color: rgba(31,122,74,.25); color: var(--success);}

.cc-header{position:sticky; top:0; z-index:50;}
.cc-topbar{
  background: rgba(244,239,228,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(28,33,40,.10);
}
.cc-topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}
.cc-brand{display:flex; align-items:center; gap: 12px; min-width: 260px;}
.cc-logo{width:62px; height:62px; border-radius: 6px; object-fit:contain}
.cc-brand-title{font-weight: 950; letter-spacing:-.03em; font-size: 1.06rem; color: var(--navy);}
.cc-brand-sub{color: var(--muted); font-weight: 650; font-size: .92rem;}
.cc-dot{opacity:.45}
.cc-tag{font-weight: 850; color: var(--navy); position:relative}
.cc-tag:after{
  content:"";
  position:absolute; left:-6px; right:-6px; bottom:-2px;
  height: 9px; border-radius: 999px;
  background: rgba(227,193,92,.55);
  transform: rotate(-2deg);
  z-index:-1;
}

.cc-portal{display:flex; gap:10px; align-items:center;}
.nav-toggle{display:none; background:transparent; border:0; padding:10px; border-radius: 12px;}
.nav-toggle-inner{display:grid; gap:4px}
.nav-toggle-inner span{display:block; width:22px; height:2px; background: rgba(12,18,34,.65); border-radius: 2px}

.cc-nav{
  background: rgba(244,239,228,.78);
  border-bottom: 1px solid rgba(28,33,40,.08);
}
.cc-nav .menu{
  display:flex; gap: 10px; align-items:center;
  padding: 10px 0 12px;
  flex-wrap:wrap;
}
.cc-nav .menu a{
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--navy);
}
.cc-nav .menu a:hover{background: rgba(12,18,34,.06)}
.cc-nav .menu a.active{
  background: rgba(12,18,34,.10);
  border: 1px solid rgba(28,33,40,.14);
}

.cc-main{padding: 18px 0 46px;}

.hero{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(28,33,40,.10);
  background:
    radial-gradient(420px 220px at 15% 10%, rgba(227,193,92,.20), transparent 60%),
    radial-gradient(520px 260px at 90% 20%, rgba(12,18,34,.10), transparent 60%),
    rgba(255,250,240,.70);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
/* subtle “chaos” linework */
.hero:after{
  content:"";
  position:absolute; inset:-30px -30px -30px -30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Cg fill='none' stroke='%230c1222' stroke-opacity='.08' stroke-width='2'%3E%3Cpath d='M20 380 C170 120, 330 610, 520 290 S860 70, 1180 360'/%3E%3Cpath d='M40 160 C240 450, 430 60, 650 270 S980 520, 1180 190'/%3E%3Cpath d='M0 280 C240 80, 440 520, 720 240 S1040 120, 1200 300'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1200px 600px;
  background-repeat:no-repeat;
  background-position: center;
  pointer-events:none;
}
.hero-inner{display:grid; grid-template-columns: 1.25fr .75fr; gap: 18px; padding: 22px; position:relative; z-index:1;}
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12,18,34,.06);
  border: 1px solid rgba(28,33,40,.12);
  font-weight: 850;
  color: var(--navy);
  font-size: .92rem;
}
.hero-kicker:before{content:"✦"; color: var(--brand);}
.hero-title{margin: 12px 0 8px; font-size: clamp(2.0rem, 2.7vw, 2.8rem); letter-spacing:-.045em;}
.hero-lead{margin:0; color: var(--muted); max-width: 80ch; font-size: 1.05rem; line-height: 1.55;}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}
.hero-meta{margin-top: 10px; color: var(--muted); font-weight: 650;}
.hero-pills{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;}
.pill{padding: 8px 10px; border-radius: 999px; border:1px solid rgba(28,33,40,.12); background: rgba(244,239,228,.36); font-weight: 750; color: var(--navy); font-size: .92rem;}

.hero-panel{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(28,33,40,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.panel-title{font-weight: 950; color: var(--navy); letter-spacing:-.02em; margin-bottom: 10px;}
.panel-link{display:block; padding: 10px 10px; border-radius: 14px; border:1px solid rgba(28,33,40,.10); background: rgba(244,239,228,.40);}
.panel-link + .panel-link{margin-top: 8px;}
.panel-link span{display:block; font-weight: 900; color: var(--navy);}
.panel-link em{display:block; font-style:normal; color: var(--muted); font-weight: 650; margin-top:2px;}
.panel-link:hover{transform: translateY(-1px); box-shadow: 0 12px 22px rgba(28,33,40,.08);}

/* Sections */
.section{margin-top: 26px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; flex-wrap:wrap;}
.section-head h2{margin:0; font-size: 1.35rem; letter-spacing:-.02em;}
.section-head p{margin:0; color: var(--muted); max-width: 72ch; font-weight: 600;}

.feature-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 14px;}
.feature-card{
  background: rgba(255,250,240,.78);
  border: 1px solid rgba(28,33,40,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(28,33,40,.07);
}
.feature-top{display:flex; align-items:center; gap:10px; margin-bottom: 8px;}
.feature-icon{width:30px; height:30px; border-radius: 10px; display:flex; align-items:center; justify-content:center; background: rgba(227,193,92,.22); border:1px solid rgba(227,193,92,.35); color: var(--navy); font-weight: 900;}
.feature-title{font-weight: 900; color: var(--navy);}
.feature-card h3{margin: 6px 0 6px; letter-spacing:-.02em;}
.feature-card p{margin:0; color: var(--muted); font-weight: 600; line-height: 1.55;}

.card-grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 14px;}
.card{
  background: rgba(255,250,240,.80);
  border: 1px solid rgba(28,33,40,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(28,33,40,.07);
}
.card h3{margin: 6px 0 8px; letter-spacing:-.02em;}
.card p{margin:0 0 12px; color: var(--muted); font-weight: 600; line-height: 1.55;}
.card-kicker{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color: rgba(12,18,34,.62); font-weight: 900;}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr;}
  .feature-grid{grid-template-columns: 1fr;}
  .card-grid{grid-template-columns: 1fr 1fr;}
  .cc-portal{display:none;}
  .nav-toggle{display:inline-flex;}
  .cc-nav .menu{display:none;}
  .cc-nav .menu.open{display:flex;}
}
@media (max-width: 560px){
  .card-grid{grid-template-columns: 1fr;}
}


/* Inner pages */
.page-hero{ margin-top: 18px; }
.page-hero-inner{
  border-radius: 22px;
  border: 1px solid rgba(28,33,40,.10);
  background: rgba(255,250,240,.74);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.page-hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12,18,34,.06);
  border: 1px solid rgba(28,33,40,.12);
  font-weight: 850;
  color: var(--navy);
  font-size: .92rem;
  margin-bottom: 10px;
}
.page-hero-badge:before{ content:"✦"; color: var(--brand); }
.page-hero .lead{ color: var(--muted); font-weight: 650; max-width: 80ch; line-height: 1.55; }
.stack{ display:grid; gap: 14px; margin-top: 16px; }
.prose{ color: var(--text); line-height: 1.65; font-weight: 520; }
.prose h2,.prose h3,.prose h4{ letter-spacing:-.02em; }
.prose a{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.content{ margin-top: 18px; }

/* Footer */
.cc-footer{
  margin-top: 34px;
  border-top: 1px solid rgba(28,33,40,.10);
  background: rgba(244,239,228,.60);
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px;
  padding: 14px 0 20px;
  color: var(--muted);
  font-weight: 650;
}
.footer-links{ display:flex; gap: 12px; flex-wrap:wrap; }
.footer-links a{ color: var(--navy); font-weight: 800; opacity: .9; }
.footer-links a:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 3px; }