@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;500;600;700;800&family=Baloo+2:wght@400;500;600;700;800&display=swap");:root{--orange:#e87c3e;--orange-light:#f5a96b;--orange-dark:#c4561a;--cream:#fdf6ec;--cream-dark:#f0e4d0;--cream-mid:#f8efe2;--brown:#7a4b2a;--brown-light:#a0673a;--brown-dark:#3d2b1a;--green:#4a7c5a;--green-light:#6baf7e;--white:#fffbf5;--text:#3d2b1a;--text-muted:#8b6a50;--border:rgba(232,124,62,.22);--border-soft:rgba(122,75,42,.1);--shadow:0 4px 24px rgba(122,75,42,.08);--shadow-md:0 8px 32px rgba(122,75,42,.12);--shadow-lg:0 16px 56px rgba(122,75,42,.16);--glow:0 0 30px rgba(232,124,62,.3);--bg:#fdf6ec;--bg-dark:#f0e4d0;--bg-card:#fffbf5;--radius:16px;--radius-lg:24px;--radius-xl:36px;--nav-h:80px}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background-color:var(--bg);color:var(--text);font-family:Nunito,sans-serif;font-weight:500;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}.skip-link{position:absolute;top:-100%;left:16px;background:var(--orange);color:#fff;padding:8px 16px;border-radius:0 0 var(--radius) var(--radius);font-weight:700;z-index:9999;transition:top .2s}.skip-link:focus{top:0}h1,h2,h3{font-family:Fredoka One,cursive;line-height:1.15;font-weight:400}h4,h5{font-family:Baloo\ 2,cursive;font-weight:700}a{color:var(--orange);text-decoration:none;transition:color .3s ease}a:hover{color:var(--orange-dark)}img{max-width:100%;height:auto;display:block}.container{max-width:1200px;margin:0 auto;padding:0 24px}.section{padding:100px 0}.btn-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--orange-dark),var(--orange),var(--orange-light));color:#fff;font-family:Baloo\ 2,cursive;font-weight:700;font-size:1rem;padding:14px 32px;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;text-decoration:none;box-shadow:0 4px 16px rgba(232,124,62,.35);white-space:nowrap}.btn-primary:hover{color:#fff;box-shadow:0 8px 28px rgba(232,124,62,.52);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--orange);font-family:Baloo\ 2,cursive;font-weight:700;font-size:1rem;padding:12px 30px;border:2px solid var(--orange);border-radius:50px;cursor:pointer;transition:all .3s ease;text-decoration:none;white-space:nowrap}.btn-outline:hover{background:rgba(232,124,62,.08);color:var(--orange-dark);border-color:var(--orange-dark);transform:translateY(-2px)}.btn-outline:active{transform:translateY(0)}.section-label{font-family:Baloo\ 2,cursive;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:block}.accent-text,.section-label{color:var(--orange)}.accent-gradient-text{background:linear-gradient(135deg,var(--orange-dark),var(--orange),var(--orange-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.divider{width:60px;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));border-radius:10px;margin:20px auto}.card{background:var(--bg-card);border:1.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:36px;position:relative;transition:all .3s ease;box-shadow:var(--shadow)}.card:hover{border-color:rgba(232,124,62,.4);box-shadow:var(--shadow-lg);transform:translateY(-5px)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--cream-dark)}::-webkit-scrollbar-thumb{background:var(--orange-light);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--orange)}.paw-bg{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='65' rx='18' ry='14' fill='%23E87C3E' opacity='0.04'/%3E%3Ccircle cx='30' cy='44' r='8' fill='%23E87C3E' opacity='0.04'/%3E%3Ccircle cx='70' cy='44' r='8' fill='%23E87C3E' opacity='0.04'/%3E%3Ccircle cx='39' cy='33' r='7' fill='%23E87C3E' opacity='0.04'/%3E%3Ccircle cx='61' cy='33' r='7' fill='%23E87C3E' opacity='0.04'/%3E%3C/svg%3E");background-size:100px 100px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes wiggle{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes pulse-ring{0%{transform:scale(1);opacity:.7}to{transform:scale(1.8);opacity:0}}@keyframes spin-slow{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fade-in{animation:fadeInUp .7s ease forwards}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-size:clamp(2rem,4vw,3rem);color:var(--text)}.section-desc{max-width:560px;margin:0 auto;color:var(--brown)}.page-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 80px) 0 80px;text-align:center;background:linear-gradient(160deg,#fdf6ec,#f5e8d3)}.page-hero-content{position:relative;z-index:2}.page-hero h1{font-family:Fredoka One,cursive;font-size:clamp(2.2rem,5.5vw,4.5rem);line-height:1.1;margin-bottom:20px;color:var(--text)}.page-hero p{color:var(--brown);font-size:1.1rem;max-width:600px;margin:0 auto}.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}.hero-btns,.icon-box{justify-content:center}.icon-box{display:inline-flex;align-items:center;width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#fff2e8,#ffe2cb);font-size:2rem;margin-bottom:18px;flex-shrink:0}.badge-num{font-family:Fredoka One,cursive;font-size:1rem;color:var(--orange);background:rgba(232,124,62,.12);padding:5px 12px;border-radius:10px}.grid-2{grid-template-columns:repeat(2,1fr);grid-gap:24px}.grid-2,.grid-3{display:grid;gap:24px}.grid-3{grid-template-columns:repeat(3,1fr);grid-gap:24px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px;gap:20px}.cta-band{padding:100px 0;background:linear-gradient(180deg,var(--cream-dark) 0,var(--cream-mid) 100%);text-align:center}.cta-band h2{font-size:clamp(2rem,4vw,3rem);color:var(--text);margin-bottom:16px}.cta-band p{color:var(--brown);max-width:480px;margin:0 auto 32px}.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.cta-emoji{font-size:2.4rem;letter-spacing:.15em;display:block;margin-bottom:20px;animation:float 3s ease-in-out infinite}.room-enter{display:inline-block;margin-top:16px;font-family:Baloo\ 2,cursive;font-weight:700;font-size:.88rem;color:var(--orange);transition:transform .2s ease}a:hover .room-enter{transform:translateX(5px)}@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.section{padding:72px 0}}@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.section{padding:56px 0}.container{padding:0 16px}.page-hero{padding:calc(var(--nav-h) + 56px) 0 60px}.hero-btns{flex-direction:column;align-items:center}.hero-btns a{width:100%;max-width:320px;justify-content:center}.card{padding:24px}}

/* ============================================================
   USABILITY IMPROVEMENTS
   ============================================================ */

/* Focus styles for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Improve touch target sizes on mobile */
@media (max-width: 768px) {
  .nav-link, .drop-btn, .m-link, .m-section-btn {
    min-height: 44px;
  }
  .cf-den-btn {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* Prevent content layout shift from font loading */
@font-face {
  font-family: 'Fredoka One';
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-display: swap;
}

/* Improve text readability - min contrast */
.section-desc, .cf-welcome-desc {
  color: #6A4020; /* slightly darker than previous #7A4B2A for better contrast */
}

/* Smooth image rendering */
img {
  image-rendering: auto;
  content-visibility: auto;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Card hover - reduce motion */
@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }
}

/* Improve button click area */
.btn-primary, .btn-outline, .nav-cta {
  min-height: 44px;
}

/* Prevent orphaned words in headings */
h1, h2, h3 {
  text-wrap: balance;
}

/* Better link underlines for body text */
article a, .section-desc a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Skip link visibility improvement */
.skip-link:focus {
  top: 12px;
  left: 16px;
}

/* ============================================================
   PERFORMANCE IMPROVEMENTS
   ============================================================ */

/* GPU-accelerate animated elements */
.card {
  will-change: transform;
}

/* Contain layout for banner area */
.cf-page-banner {
  contain: layout style;
}

/* Optimize scroll performance */
.navbar {
  will-change: padding, background-color;
}

/* Lazy sections - reduce paint cost */
.section, .cta-band {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ============================================================
   FAQ GRID — RESPONSIVE (applied to all pages)
   ============================================================ */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.faq-card {
  padding: 24px 28px;
}

.faq-q {
  color: var(--brown-dark);
  font-size: 1rem;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.faq-a {
  color: var(--brown);
  font-size: 0.91rem;
  line-height: 1.75;
  margin: 0;
}

/* Tablet: still 2-col but tighter */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .faq-card {
    padding: 18px 20px;
  }
  .faq-q {
    font-size: 0.92rem;
  }
  .faq-a {
    font-size: 0.875rem;
    line-height: 1.65;
  }
}

/* Mobile: single column, full width, readable */
@media (max-width: 540px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .faq-card {
    padding: 20px;
  }
  .faq-q {
    font-size: 0.95rem;
    font-weight: 700;
  }
  .faq-a {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}

/* ============================================================
   INLINE STYLE REPLACEMENTS — moved from HTML attributes
   ============================================================ */

/* Section backgrounds */
.section-bg-cream  { background: #F0E4D0; }
.section-bg-white  { background: #FFFBF5; }
.section-bg-sand   { background: #F8EFE2; }

/* Feature card link wrapper */
.card.feature-card {
  text-decoration: none;
  display: block;
}

/* Info card cells (no-account, no-download, etc.) */
.info-card {
  padding: 28px;
  text-align: center;
}
.info-card-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
}
.info-card-text {
  color: var(--brown);
  font-size: .93rem;
}

/* Dropdown menus — hidden by default via CSS, not inline */
.mega-drop   { display: none !important; visibility: hidden; pointer-events: none; }
.mega-drop.open { display: grid !important; visibility: visible; pointer-events: auto; }
.m-sub       { display: none; }
.m-sub.open  { display: flex; }
.mobile-overlay { display: none; }
.mobile-overlay.open { display: block; }

/* Banner CSS custom property defaults — overridden per-page via .page-* classes */
.cf-banner-tint-default {
  --banner-tint: #FF6B00;
}
.cf-banner-bar-default {
  --banner-bar-bg: rgba(12,5,0,0.72);
  --banner-accent: #F5A96B;
  --banner-btn: #E87C3E;
}

/* Hidden utility — replaces style="display:none" */
.visually-hidden-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Inline link colour — replaces style="color:#E87C3E" */
.link-accent { color: var(--orange); }

/* ============================================================
   PER-PAGE BANNER COLOUR CLASSES
   ============================================================ */

/* Shared padding-top for hero sections after banner */
.hero-after-banner { padding-top: 40px !important; }

.banner-tint-about { --banner-tint: #8B4513;; }
.banner-bar-about { --banner-bar-bg:rgba(35,12,2,0.76);--banner-accent:#FFB347;--banner-btn:#C4561A; }

.banner-tint-commands { --banner-tint: #1A237E;; }
.banner-bar-commands { --banner-bar-bg:rgba(10,12,40,0.82);--banner-accent:#90CAF9;--banner-btn:#1565C0; }

.banner-tint-community { --banner-tint: #2E7D32;; }
.banner-bar-community { --banner-bar-bg:rgba(5,22,6,0.76);--banner-accent:#7ED98A;--banner-btn:#2E7D32; }

.banner-tint-contact { --banner-tint: #006064;; }
.banner-bar-contact { --banner-bar-bg:rgba(0,20,28,0.76);--banner-accent:#80DEEA;--banner-btn:#00838F; }

.banner-tint-features { --banner-tint: #4527A0;; }
.banner-bar-features { --banner-bar-bg:rgba(18,8,36,0.76);--banner-accent:#B39DDB;--banner-btn:#6A1B9A; }

.banner-tint-furry_art_sharing { --banner-tint: #880E4F;; }
.banner-bar-furry_art_sharing { --banner-bar-bg:rgba(30,5,16,0.76);--banner-accent:#F48FB1;--banner-btn:#C2185B; }

.banner-tint-furry_chat_blog { --banner-tint: #1565C0;; }
.banner-bar-furry_chat_blog { --banner-bar-bg:rgba(5,10,40,0.78);--banner-accent:#90CAF9;--banner-btn:#1976D2; }

.banner-tint-furry_chat_for_adults { --banner-tint: #4E342E;; }
.banner-bar-furry_chat_for_adults { --banner-bar-bg:rgba(10,4,2,0.80);--banner-accent:#FFAB76;--banner-btn:#BF360C; }

.banner-tint-furry_chat_for_kids { --banner-tint: #F57F17;; }
.banner-bar-furry_chat_for_kids { --banner-bar-bg:rgba(20,8,0,0.78);--banner-accent:#FFD54F;--banner-btn:#F57C00; }

.banner-tint-furry_chat_for_teens { --banner-tint: #BF360C;; }
.banner-bar-furry_chat_for_teens { --banner-bar-bg:rgba(16,6,0,0.78);--banner-accent:#FFAB76;--banner-btn:#E64A19; }

.banner-tint-furry_chat_live { --banner-tint: #B71C1C;; }
.banner-bar-furry_chat_live { --banner-bar-bg:rgba(30,5,5,0.78);--banner-accent:#EF9A9A;--banner-btn:#D32F2F; }

.banner-tint-furry_chat_org { --banner-tint: #2E7D32;; }
.banner-bar-furry_chat_org { --banner-bar-bg:rgba(5,20,5,0.78);--banner-accent:#A5D6A7;--banner-btn:#388E3C; }

.banner-tint-furry_chat_websites { --banner-tint: #4A7C5A;; }
.banner-bar-furry_chat_websites { --banner-bar-bg:rgba(5,20,10,0.76);--banner-accent:#A5D6A7;--banner-btn:#388E3C; }

.banner-tint-furry_chats { --banner-tint: #5C3D8F;; }
.banner-bar-furry_chats { --banner-bar-bg:rgba(20,5,40,0.78);--banner-accent:#CE93D8;--banner-btn:#7B1FA2; }

.banner-tint-furry_community_usa { --banner-tint: #0D47A1;; }
.banner-bar-furry_community_usa { --banner-bar-bg:rgba(5,14,32,0.76);--banner-accent:#90CAF9;--banner-btn:#1565C0; }

.banner-tint-furry_discord_alternatives { --banner-tint: #283593;; }
.banner-bar-furry_discord_alternatives { --banner-bar-bg:rgba(10,10,36,0.76);--banner-accent:#9FA8DA;--banner-btn:#3949AB; }

.banner-tint-furry_gaming_community { --banner-tint: #1B5E20;; }
.banner-bar-furry_gaming_community { --banner-bar-bg:rgba(4,18,6,0.76);--banner-accent:#A5D6A7;--banner-btn:#388E3C; }

.banner-tint-furry_pride_community { --banner-tint: #6A1B9A;; }
.banner-bar-furry_pride_community { --banner-bar-bg:rgba(22,5,28,0.76);--banner-accent:#CE93D8;--banner-btn:#7B1FA2; }

.banner-tint-furry_roleplay_chat { --banner-tint: #311B92;; }
.banner-bar-furry_roleplay_chat { --banner-bar-bg:rgba(10,4,28,0.78);--banner-accent:#B39DDB;--banner-btn:#512DA8; }

.banner-tint-how_to_make_a_fursona { --banner-tint: #E65100;; }
.banner-bar-how_to_make_a_fursona { --banner-bar-bg:rgba(28,12,0,0.76);--banner-accent:#FFCC80;--banner-btn:#E65100; }

.banner-tint-lgbtq_furry_chat { --banner-tint: #880E4F;; }
.banner-bar-lgbtq_furry_chat { --banner-bar-bg:rgba(25,4,22,0.76);--banner-accent:#F48FB1;--banner-btn:#AD1457; }

.banner-tint-lgbtq_furry_community { --banner-tint: #4A148C;; }
.banner-bar-lgbtq_furry_community { --banner-bar-bg:rgba(18,4,28,0.76);--banner-accent:#CE93D8;--banner-btn:#6A1B9A; }

.banner-tint-safe_furry_chat_for_teens { --banner-tint: #E65100;; }
.banner-bar-safe_furry_chat_for_teens { --banner-bar-bg:rgba(30,10,0,0.76);--banner-accent:#FFB74D;--banner-btn:#F57C00; }

.banner-tint-vip { --banner-tint: #E65100;; }
.banner-bar-vip { --banner-bar-bg:rgba(24,14,0,0.78);--banner-accent:#FFD54F;--banner-btn:#F57F17; }

.banner-tint-vrchat_furry_groups { --banner-tint: #1565C0;; }
.banner-bar-vrchat_furry_groups { --banner-bar-bg:rgba(5,15,40,0.76);--banner-accent:#90CAF9;--banner-btn:#1976D2; }

.text-center { text-align: center; }

/* ============================================================
   UTILITY CLASSES — replaces remaining inline styles
   ============================================================ */
.card-icon        { font-size: 1.5rem; }
.card-body        { color: var(--brown); font-size: 0.93rem; line-height: 1.75; }
.card-body-mb     { margin-bottom: 12px; }
.card-title       { color: var(--brown-dark); margin-bottom: 8px; }
.card-title-lg    { font-size: 1.1rem; margin-bottom: 4px; }
.card-title-xl    { font-size: 1.2rem; }
.card-label       { font-size: 1rem; }
.card-pad         { padding: 28px; }
.card-pad-lg      { padding: 32px 36px; }
.link-bold        { font-weight: 700; }
.mt-4             { margin: 20px 0; }
.mb-3             { margin-bottom: 16px; }
.mb-0             { margin-bottom: 0; }
.mt-5             { margin-top: 24px; }
.mt-8             { margin-top: 40px; }
.pt-hero          { padding-top: 64px; }
.content-block    { max-width: 760px; margin: 48px auto 0; }
.content-narrow   { max-width: 780px; margin: 0 auto; }
.gap-lg           { gap: 28px; }
.code-tag         { background: rgba(232,124,62,.12); padding: 2px 8px; border-radius: 6px; font-size: .95em; color: #C4561A; }
.code-sub         { font-size: .85em; color: #C4561A; }
.tag-green        { font-size: .85rem; font-weight: 700; color: var(--green); }
.anim-wave        { animation: wave 2s ease-in-out infinite; font-size: 3rem; }
.bg-white         { background: var(--white); }
@keyframes wave   { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} }

.btn-sm           { font-size: .88rem; padding: 9px 18px; }
.tag-muted        { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.flex-row-item    { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar-ring      { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 3px solid var(--orange); box-shadow: 0 4px 18px rgba(232,124,62,0.3); }
.avatar-img       { width: 100%; height: 100%; object-fit: cover; }
.pt-0 { padding-top: 0; }
.card-flex { padding: 28px 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Prevent horizontal scroll from mobile menu slide-in */
body { overflow-x: hidden; }

/* Footer social links */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brown);
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  transition: all 0.2s ease;
}
.footer-social-link:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(232,124,62,0.06);
}