/* Base Styles & Variables */
:root {--primary: #38B000;    /* Vibrant Green */--primary-light: #70E000;--accent: #FF9F1C;     /* Warm Orange */--accent-light: #FFBF69;--bg-main: #FFFBFA;    /* Soft warm white */--text-main: #2B2D42;  /* Deep blue-grey */--text-muted: #8D99AE;--font-heading: 'Quicksand', sans-serif;--font-body: 'Nunito', sans-serif;--radius-huge: 40px;--radius-large: 24px;--radius-med: 16px;--radius-pill: 100px;--shadow-soft: 0 10px 40px rgba(43, 45, 66, 0.08);--shadow-color: 0 15px 35px rgba(56, 176, 0, 0.2);--shadow-accent: 0 15px 35px rgba(255, 159, 28, 0.2);}
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: var(--font-body);color: var(--text-main);background-color: var(--bg-main);line-height: 1.6;overflow-x: hidden;}
h1, h2, h3, h4, h5 {font-family: var(--font-heading);font-weight: 700;color: var(--text-main);line-height: 1.2;}
a {text-decoration: none;color: inherit;transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
ul {list-style: none;}
img {max-width: 100%;display: block;}
.google-auto-placed { margin: 12px 0;   background: #f2d9b7;  padding: 6px;  border-radius: 6px;}
.container {max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.text-center { text-align: center; }.mt-5 { margin-top: 50px; }
/* Buttons */
.btn {display: inline-flex;align-items: center;gap: 8px;padding: 14px 32px;border-radius: var(--radius-pill);font-family: var(--font-heading);font-size: 16px;font-weight: 700;cursor: pointer;border: none;transition: all 0.3s ease;}
.btn-primary {background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);color: white;}.btn-primary:hover {transform: translateY(-3px);box-shadow: var(--shadow-color);}
.btn-secondary {background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);color: white;}.btn-secondary:hover {transform: translateY(-3px);box-shadow: var(--shadow-accent);}
.btn-outline-primary {border: 2px solid var(--primary);color: var(--primary);background: transparent;}.btn-outline-primary:hover {background: var(--primary);color: white;box-shadow: var(--shadow-color);}

/* Floating Header */
.floating-header {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);width: 100%;max-width: 1160px;background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border-radius: var(--radius-pill);z-index: 1000;box-shadow: var(--shadow-soft);padding: 12px 30px;transition: all 0.3s ease;}
.header-inner {display: flex;justify-content: space-between;align-items: center;}
.logo {display: flex;align-items: center;gap: 8px;}.logo-emoji { font-size: 28px; }.logo-text {font-family: var(--font-heading);font-size: 24px;font-weight: 700;color: var(--primary);letter-spacing: -0.5px;}
.main-nav ul {display: flex;gap: 30px;}.main-nav a {font-weight: 600;color: var(--text-main);font-size: 15px;opacity: 0.7;}.main-nav a.active, .main-nav a:hover {opacity: 1;color: var(--primary);}
.header-actions {display: flex;gap: 10px;}
.main-nav .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(255,255,255,0.95);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);min-width:200px;padding:15px 0;border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,0.1);opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);z-index:1000;display:flex;flex-direction:column;gap:5px;margin-top:10px}
.main-nav li.has-submenu:hover .submenu,.main-nav li.has-submenu.is-open .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.main-nav li.has-submenu{position:relative}.main-nav .submenu li{padding:0;display:block}
.main-nav .submenu a{padding:10px 25px;display:block;width:100%;font-size:14px;font-weight:500;color:var(--text-main);opacity:0.8;white-space:nowrap;transition:all 0.2s}.main-nav .submenu a:hover{opacity:1;color:var(--primary);background:rgba(56,176,0,0.05);padding-left:30px}
.main-nav li.has-submenu>a::after{content:'▾';display:inline-block;margin-left:5px;font-size:12px;vertical-align:middle;transition:transform 0.3s}
.main-nav li.has-submenu:hover>a::after{transform:rotate(180deg)}


/* Expanding Search Bar */
.search-container {display: flex;align-items: center;background: var(--bg-main);border-radius: var(--radius-pill);transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);overflow: hidden;}
.search-input {width: 0;border: none;background: transparent;padding: 0;font-family: var(--font-body);font-size: 15px;outline: none;transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);}
.search-container.active {box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);}
.search-container.active .search-input {width: 150px;padding: 0 0 0 15px;}
.icon-btn, .menu-toggle {background: var(--bg-main);border: none;width: 44px;height: 44px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--text-main);cursor: pointer;font-size: 16px;transition: background 0.3s, color 0.3s;}
.search-container .icon-btn {background: transparent; /* Reset inside container */
}
.search-container.active .icon-btn {background: var(--primary);color: white;}
.icon-btn:hover, .menu-toggle:hover {background: var(--primary);color: white;}.menu-toggle { display: none; }

/* Emotional Hero */
.hero-immersive {position: relative;min-height: 100vh;display: flex;align-items: center;justify-content: center;padding-top: 100px;overflow: hidden;}
.hero-bg-container {position: absolute;top: 0; left: 0; width: 100%; height: 100%;z-index: -1;}
/* Split screen gradient / image feel */
.hero-bg {position: absolute;top: 0;height: 100%;width: 50%;background-size: cover;background-position: center;}.hero-bg-left {left: 0;background-image: url('../images/hero_home_garden.webp');}.hero-bg-right {right: 0;background-image: url('https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&q=80&w=1200'); /* Beautiful dog */
}
.hero-overlay-gradient {position: absolute;top: 0; left: 0; width: 100%; height: 100%;/* Warm, soft circular gradient to blend the images & center text */background: radial-gradient(circle at center, rgba(255,251,250,0.95) 0%, rgba(255,251,250,0.7) 50%, rgba(255,251,250,0.3) 100%);backdrop-filter: blur(5px);}
.hero-content-wrapper {position: relative;z-index: 10;text-align: center;max-width: 800px;}
.hero-badge {display: inline-block;background: rgba(255, 159, 28, 0.15);color: var(--accent);padding: 8px 20px;border-radius: var(--radius-pill);font-weight: 700;font-size: 14px;margin-bottom: 24px;font-family: var(--font-heading);}
.hero-text h1 {font-size: 64px;margin-bottom: 24px;color: var(--text-main);letter-spacing: -1px;}.hero-text h1 span {color: var(--primary);}
.hero-text p {font-size: 20px;color: var(--text-muted);margin-bottom: 40px;max-width: 600px;margin-left: auto;margin-right: auto;}
.hero-buttons {display: flex;gap: 20px;justify-content: center;}

/* Bento Grid Categories */
.bento-section {padding: 100px 0;background-color: var(--bg-main);}
.section-title h2 {font-size: 40px;margin-bottom: 10px;}
.section-title p {font-size: 18px;color: var(--text-muted);margin-bottom: 50px;}
.bento-grid {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 280px);gap: 20px;}
.bento-card {position: relative;border-radius: var(--radius-huge);overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;padding: 30px;box-shadow: var(--shadow-soft);color: white;}
.bento-card:hover {transform: translateY(-8px) scale(1.02);}
.bento-img {position: absolute;top: 0; left: 0; width: 100%; height: 100%;background-size: cover;background-position: center;z-index: -2;transition: transform 0.6s ease;}
.bento-card:hover .bento-img {transform: scale(1.08); /* Emotional zoom effect */
}
/* Gradients for readability */
.bento-card::before {content: '';position: absolute;bottom: 0; left: 0; width: 100%; height: 60%;background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);z-index: -1;}

/* Bento Sizing */
.bento-large  { grid-column: span 2; grid-row: span 2; }.bento-tall   { grid-column: span 1; grid-row: span 2; }.bento-small  { grid-column: span 1; grid-row: span 1; }
.bento-large h3 { font-size: 32px; color: white; }.bento-tall h3 { font-size: 28px; color: white; }.bento-small h3 { font-size: 20px; color: white; }
.bento-content p {font-size: 16px;opacity: 0.9;margin-top: 8px;}
.icon-circle {width: 50px; height: 50px;background: rgba(255,255,255,0.2);backdrop-filter: blur(10px);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px;margin-bottom: 20px;}.bento-garden .icon-circle { color: var(--primary-light); }.bento-pets .icon-circle { color: var(--accent); }

/* Stories / Articles Carousel */
.stories-section {padding: 80px 0;}
.story-carousel {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
.story-card {background: white;border-radius: var(--radius-large);overflow: hidden;box-shadow: var(--shadow-soft);border: 1px solid rgba(0,0,0,0.02);transition: transform 0.4s ease, box-shadow 0.4s ease;}
.story-card:hover {transform: translateY(-12px);box-shadow: var(--shadow-accent); /* Warm glow */
}
.story-img-wrap {position: relative;height: 220px;overflow: hidden;}
.story-img-wrap img {width: 100%; height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.story-card:hover img {transform: scale(1.05);}
.story-tag {position: absolute;top: 20px; left: 20px;overflow:hidden;max-width:60px; max-height:60px;padding:0;border-radius: var(--radius-pill);font-size: 12px;font-weight: 700;text-transform: uppercase;color: white;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.tag-orange { background-color: var(--accent); }.tag-green { background-color: var(--primary); }.tag-blue { background-color: #4361EE; }
.story-content {padding: 30px;}
.story-content h3 {font-size: 20px;margin-bottom: 12px;}
.story-card a:hover h3 {color: var(--primary);}
.story-content p {color: var(--text-muted);font-size: 15px;margin-bottom: 24px;}
.story-footer {display: flex;justify-content: space-between;align-items: center;padding-top: 15px;border-top: 1px solid rgba(0,0,0,0.05);}
.read-btn {font-weight: 700;color: var(--primary);font-family: var(--font-heading);font-size: 15px;}
.time {color: var(--accent);font-size: 14px;font-weight: 600;}
.aquarium-nav-section{padding:12px 0;background:linear-gradient(180deg, var(--bg-main) 0%, #f0f9ff 100%);}
.aquarium-nav-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:6px;margin-top:0;}
.aquarium-nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px;background:#ffffff;border-radius:12px;text-decoration:none;transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow:0 15px 35px rgba(0, 119, 182, 0.06);border:1px solid rgba(0, 119, 182, 0.08);position:relative;overflow:hidden;z-index:1;}.aquarium-nav-link:hover{transform:translateY(-15px) scale(1.03);box-shadow:0 25px 50px rgba(0, 119, 182, 0.15);border-color:#00b4d8;}.aquarium-nav-link::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, rgba(0, 180, 216, 0.08) 0%, rgba(0, 180, 216, 0) 100%);opacity:0;transition:opacity 0.4s;z-index:-1;}.aquarium-nav-link:hover::after{opacity:1;}
.aquarium-nav-link .icon{font-size:26px;margin-bottom:6px;display:block;transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);filter:drop-shadow(0 8px 15px rgba(0,0,0,0.1));}
.aquarium-nav-link:hover .icon{transform:scale(1.25) rotate(8deg);}
.aquarium-nav-link span:not(.icon){font-family:'Quicksand', sans-serif;font-weight:700;font-size:12px;color:#023e8a;text-align:center;line-height:1.2;}
.aquarium-nav-section .section-title p {font-size:13px; margin-bottom:12px;}
@media (max-width: 768px){.aquarium-nav-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width: 480px){.aquarium-nav-grid{grid-template-columns:1fr;}}
.nav-fishcat {display: flex;flex-flow: row wrap; gap:8px;}
.nav-fishcat > a {padding:2px 8px; border-radius:8px; background:#023e8a; color:#fff;}


/*  Footer */
.emotional-footer {position: relative;background-image: linear-gradient(to bottom, var(--bg-main) 0%, rgba(255,251,250,0) 20%), url('../images/footer_lawn_scene.webp');background-size: cover;background-position: center center;padding-top: 400px;z-index: 10;}
.footer {position: relative;z-index: 10;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;width: 100%;max-width: 1200px;margin: 0 auto;padding: 3rem;box-sizing: border-box;gap: 3rem;
background: rgba(17, 24, 39, 0.5); /* Frosted glass base color */backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px); /* For Safari */border: 1px solid rgba(255, 255, 255, 0.15);border-top: 1px solid rgba(255, 255, 255, 0.25);border-left: 1px solid rgba(255, 255, 255, 0.2);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255,255,255,0.05);border-radius: 24px;overflow: hidden; /* Contains the inner glow */
}
.footer * {text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);}
.glass-glow {position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);animation: rotateGlow 15s linear infinite;pointer-events: none;z-index: 0;}
@keyframes rotateGlow {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}
.footer__logo img {max-height: 90px;max-width: 180px;object-fit: contain;display: block;}
.footer__text {flex: 1 1 500px;font-size: 0.95rem;line-height: 1.7;z-index: 2;}
.footer__text p {font-size: 1.05rem;font-weight: 400;margin-bottom: 1.5rem;letter-spacing: 0.03em;color: #f8fafc;opacity: 0;transform: translateY(20px);animation: fadeInUp 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s;}
@keyframes fadeInUp {to { opacity: 1; transform: translateY(0); }}
.footer__text hr {border: none;height: 2px;background: linear-gradient(90deg, #3b82f6, #ec4899, transparent);margin: 1.5rem 0;width: 0;animation: drawLine 1.2s forwards ease-in-out 1s;box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);}
@keyframes drawLine {to { width: 100%; }}
.footer__text-meta {display: flex;flex-direction: column;gap: 1.2rem;opacity: 0;animation: fadeInUp 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s;}
.footer__text-meta i, .footer__text-meta sub {font-style: normal;font-size: 0.95rem;}
.footer__text-meta sub {display: inline-flex;align-items: center;background: rgba(15, 23, 42, 0.4);backdrop-filter: blur(10px);padding: 0.7rem 1.4rem;border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.15);color: #cbd5e1;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s;}
.footer__text-meta sub:hover {transform: translateY(-2px);background: rgba(30, 41, 59, 0.6);border-color: rgba(255, 255, 255, 0.3);}
.footer__text-meta a {color: #93c5fd;text-decoration: none;position: relative;font-weight: 500;padding: 0.2rem 0;}
.footer__text-meta a::after {content: '';position: absolute;width: 100%;height: 2px;bottom: -2px;left: 0;background-color: #60a5fa;transform: scaleX(0);transform-origin: bottom right;transition: transform 0.3s ease-out;border-radius: 2px;box-shadow: 0 0 5px #60a5fa;}
.footer__text-meta a:hover::after {transform: scaleX(1);transform-origin: bottom left;}
.footer__text-ai {font-size: 0.85rem !important;color: #e2e8f0 !important;max-width: 75%;margin-top: 0.5rem;display: inline-block;}
.footer__banner-link {float: right;margin-top: -3.5rem;animation: floatBanner 4s ease-in-out infinite;}
@keyframes floatBanner {0% { transform: translateY(0px); }50% { transform: translateY(-12px); }100% { transform: translateY(0px); }
}
.footer__banner-link img {border-radius: 8px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);border: 1px solid rgba(255, 255, 255, 0.15);}
.footer__copyright {display: flex;flex-direction: column;gap: 1rem;flex: 0 0 auto;opacity: 0;animation: fadeInUp 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s;z-index: 2;}
.footer__copyright .btn {position: relative;display: flex;align-items: center;justify-content: center;padding: 0.8rem 2rem;background: rgba(255, 255, 255, 0.05); /* Light glass */backdrop-filter: blur(10px);color: #f8fafc;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 30px;text-decoration: none;font-size: 0.95rem;font-weight: 600;letter-spacing: 0.05em;overflow: hidden;transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.footer__copyright .btn::before {content: '';position: absolute;top: 0; left: 0; right: 0; bottom: 0;background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5));z-index: -1;transition: opacity 0.4s ease;opacity: 0;border-radius: 30px;}
.footer__copyright .btn:hover {transform: translateY(-5px) scale(1.05);border-color: rgba(255, 255, 255, 0.4);box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);letter-spacing: 0.1em;}
.footer__copyright .btn:hover::before {opacity: 1;}
@media (max-width: 900px) {.footer {flex-direction: column;align-items: center;text-align: center;padding: 3rem 1.5rem;}.footer__text p {text-align: center;}.footer__text-meta {align-items: center;}.footer__banner-link {float: none;display: block;margin-top: 2rem;margin-bottom: 1rem;}.footer__text-ai {max-width: 100%;margin-top: 1rem;}.footer__copyright {flex-direction: row;flex-wrap: wrap;justify-content: center;width: 100%;margin-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);padding-top: 2.5rem;}.footer__copyright .btn {flex: 1 1 auto;padding: 0.8rem 1rem;}
}

/* Scroll Reveal Animations Class */
[data-reveal="fade-up"] {opacity: 0;transform: translateY(40px);transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);}[data-reveal].revealed {opacity: 1;transform: translateY(0);}

/* RESPONSIVE */
@media (max-width: 1024px) {.bento-grid {    grid-template-columns: repeat(2, 1fr);    grid-template-rows: auto;}.bento-large, .bento-tall, .bento-small {    grid-column: span 1;    height: 280px;}.bento-large { grid-column: span 2; }.story-carousel {    grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 768px) {
.floating-header { width: 95%;    padding: 10px 20px;}.main-nav { display: none; }.menu-toggle { display: flex; }.hero-text h1 { font-size: 42px; }.hero-buttons { flex-direction: column; }.bento-large { grid-column: span 1; }.bento-grid { grid-template-columns: 1fr; }.story-carousel { grid-template-columns: 1fr; }.cta-box { padding: 40px 20px; }.magic-form { flex-direction: column; background: transparent; box-shadow: none; gap: 10px; }.magic-form input { background: white; border-radius: var(--radius-pill); padding: 16px; }.footer-main { grid-template-columns: 1fr; gap: 40px; }.footer-navs { flex-direction: column; gap: 30px; }
.main-nav.activmenu {display: block; position: absolute; top: 100%;  left: 0;  width: 100%;  background: white;  padding: 20px;   border-radius: var(--radius-large);   box-shadow: var(--shadow-soft);   margin-top: 10px;}
.main-nav.activmenu ul {flex-direction: column; gap: 22px;}
.main-nav .submenu {position: static; transform: none; background: transparent; box-shadow: none; opacity: 1; visibility: visible; display: none; padding-left: 20px; margin-top: 0; backdrop-filter: none;}
.main-nav li.has-submenu.is-open .submenu {display: block;}
  }
/* ==========================================================
   ARTICLE PAGE (SINGLE.HTML) STYLES
========================================================== */

/* Page Setup */
.page-single {padding-top: 100px; /* space for floating header */
}
/* Breadcrumbs */
.breadcrumbs {display: flex;align-items: center;gap: 8px;font-size: 14px;color: var(--text-muted);margin: 20px 0 40px;background: white;padding: 12px 24px;border-radius: var(--radius-pill);box-shadow: var(--shadow-soft);width: fit-content;}
.breadcrumbs a {color: var(--primary);font-weight: 600;}
.breadcrumbs a:hover {color: var(--primary-light);text-decoration: underline;}
.breadcrumbs .current {color: var(--text-main);}
/* Article Layout Grid */
.article-layout {display: grid;grid-template-columns: 1fr 300px;gap: 30px;align-items: start;margin-bottom: 30px;}
/* Article Content & Typography */
.article-content {background: white;border-radius: var(--radius-large);padding: 40px;box-shadow: var(--shadow-soft);}
.article-header {margin-bottom: 30px;}
.article-title {font-size: 42px;margin-bottom: 20px;letter-spacing: -1px;line-height: 1.2;}
.article-meta {display: flex;flex-wrap: wrap;gap: 20px;color: var(--text-muted);font-size: 15px;border-bottom: 1px solid rgba(0,0,0,0.05);padding-bottom: 20px;}
.article-hero-img {margin-bottom: 40px;}
.article-hero-img img {width: 100%;border-radius: var(--radius-med);box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.article-hero-img figcaption {text-align: center;font-style: italic;color: var(--text-muted);font-size: 14px;margin-top: 15px;}
.article-body h2 {font-size: 28px;margin: 40px 0 20px;color: var(--text-main);}
.article-body p {font-size: 18px;line-height: 1.8;color: #4a5568;margin-bottom: 24px;}
.lead-text {font-size: 20px !important;font-weight: 500;color: var(--text-main) !important;}
.article-body ul, .article-body ol {margin-bottom: 24px;padding-left: 20px;}
.article-body li {font-size: 18px;line-height: 1.8;color: #4a5568;margin-bottom: 10px;}
.article-body blockquote {background: var(--bg-main);border-left: 4px solid var(--primary);padding: 24px 30px;margin: 40px 0;font-size: 20px;font-style: italic;border-radius: 0 var(--radius-med) var(--radius-med) 0;color: var(--primary);}
/* Article Tags & Share */
.article-footer {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;margin-top: 50px;padding-top: 30px;border-top: 1px solid rgba(0,0,0,0.05);}
.article-tags, .article-share {display: flex;align-items: center;gap: 12px;}
.tags-label, .share-label {font-weight: 700;color: var(--text-main);}
.tag {padding: 6px 14px;border-radius: var(--radius-pill);font-size: 13px;font-weight: 600;text-decoration: none;transition: all 0.2s;}
.tag-green { color: var(--primary); background: rgba(56, 176, 0, 0.1); }.tag-green:hover { background: var(--primary); color: white; }
.share-btn {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: var(--bg-main);color: var(--text-main);transition: all 0.2s;font-size: 16px;}.share-btn:hover {transform: translateY(-3px);box-shadow: var(--shadow-soft);}
/* Prev/Next Navigation */
.article-nav {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 40px;}
.nav-btn {display: flex;flex-direction: column;padding: 20px;background: var(--bg-main);border-radius: var(--radius-med);transition: all 0.3s;border: 1px solid transparent;}
.nav-btn:hover {background: white;border-color: rgba(0,0,0,0.05);box-shadow: var(--shadow-soft);transform: translateY(-3px);}
.nav-next { text-align: right; }
.nav-dir {font-size: 13px;color: var(--text-muted);text-transform: uppercase;font-weight: 700;margin-bottom: 8px;}
.nav-title {font-family: var(--font-heading);font-size: 18px;font-weight: 700;color: var(--primary);}

/* Sidebar Styles */
.sidebar-layout {display: flex;flex-direction: column;gap: 30px;}
.sidebar-widget {background: white;border-radius: var(--radius-large);padding: 30px;box-shadow: var(--shadow-soft);}
.widget-title {font-size: 18px;margin-bottom: 20px;padding-bottom: 12px;border-bottom: 2px dashed rgba(0,0,0,0.05);color: var(--text-main);}
/* 1. Category Info Widget */
.widget-category-info {text-align: center;background: linear-gradient(135deg, rgba(56, 176, 0, 0.05) 0%, rgba(255, 159, 28, 0.05) 100%);}
.cat-icon-large {font-size: 48px;margin-bottom: 10px;}
.widget-category-info h3 {font-size: 24px;margin-bottom: 10px;}
.cat-desc {color: var(--text-muted);margin-bottom: 20px;font-size: 15px;}
.cat-stats {background: white;padding: 15px;border-radius: var(--radius-med);margin-bottom: 20px;box-shadow: 0 4px 15px rgba(0,0,0,0.03);}
.stat-item {display: flex;flex-direction: column;}
.stat-num {font-size: 28px;font-weight: 700;color: var(--primary);font-family: var(--font-heading);}
.stat-text {font-size: 13px;color: var(--text-muted);}
.btn-full {width: 100%;}
/* 2 & 3. Small Article Lists (Popular / Latest) */
.article-list-small {display: flex;flex-direction: column;gap: 15px;}
.article-list-small li a {display: flex;gap: 15px;align-items: center;padding: 10px;border-radius: var(--radius-med);transition: background 0.2s;}
.article-list-small li a:hover {background: var(--bg-main);}
.article-list-small img {width: 70px;height: 70px;border-radius: var(--radius-med);object-fit: cover;}
.list-content {display: flex;flex-direction: column;gap: 5px;}
.list-content-full {width: 100%;}
.list-title {font-family: var(--font-heading);font-size: 15px;font-weight: 700;line-height: 1.3;color: var(--text-main);transition: color 0.2s;}
.article-list-small a:hover .list-title {color: var(--primary);}
.list-meta {font-size: 13px;color: var(--text-muted);}
/* 4. Latest Comments Widget */
.comment-list {display: flex;flex-direction: column;gap: 20px;}
.comment-item {display: flex;gap: 15px;}
.comment-avatar {width: 40px;height: 40px;background: var(--bg-main);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 20px;flex-shrink: 0;}
.comment-bubble {background: var(--bg-main);padding: 12px 16px;border-radius: 0 var(--radius-med) var(--radius-med) var(--radius-med);font-size: 14px;color: var(--text-main);}
.comment-author {font-weight: 700;color: var(--primary);margin-right: 5px;}

/* Similar Articles Section */
.similar-articles-section {margin-top: 60px;padding-top: 60px;border-top: 2px dashed rgba(0,0,0,0.05);}
.section-subheading {font-size: 28px;margin-bottom: 30px;text-align: center;}
.similar-grid {margin-bottom: 60px;}
/* Single Page Additions Mobile */
@media (max-width: 1024px) {.article-layout {    grid-template-columns: 1fr;}.sidebar-layout {    display: grid;    grid-template-columns: 1fr 1fr;}}
@media (max-width: 768px) {.article-title {    font-size: 32px;}.article-content {    padding: 20px;}.sidebar-layout {    grid-template-columns: 1fr;}.article-nav {    grid-template-columns: 1fr;}.nav-next { text-align: left; }}
/* ==========================================================
   ARTICLE COMMENTS SECTION
========================================================== */

.article-comments {margin-top: 60px;padding-top: 50px;border-top: 2px dashed rgba(0,0,0,0.05);}
.article-comments h3 {font-size: 28px;margin-bottom: 40px;color: var(--text-main);}
.comments-list-full {display: flex;flex-direction: column;gap: 30px;margin-bottom: 50px;}
.comment-block {display: flex;gap: 20px;background: var(--bg-main);padding: 25px;border-radius: var(--radius-large);}
.comment-author-avatar {width: 60px;height: 60px;background: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 30px;flex-shrink: 0;box-shadow: 0 5px 15px rgba(0,0,0,0.05);}
.comment-body-content {flex: 1;}
.comment-meta-info {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.author-name {font-weight: 700;font-family: var(--font-heading);font-size: 18px;color: var(--text-main);}
.comment-date {font-size: 13px;color: var(--text-muted);}
.comment-body-content p {font-size: 16px;line-height: 1.6;color: #4a5568;margin-bottom: 15px;}
.reply-btn {font-size: 14px;font-weight: 700;color: var(--primary);background: rgba(56, 176, 0, 0.1);padding: 6px 14px;border-radius: var(--radius-pill);display: inline-block;}
.reply-btn:hover {background: var(--primary);color: white;}
/* Comment Form */
.comment-form-box {background: white;padding: 40px;border-radius: var(--radius-large);box-shadow: var(--shadow-soft);border: 1px solid rgba(0,0,0,0.03);}
.comment-form-box h4 {font-size: 24px;margin-bottom: 30px;}
.comment-form {display: flex;flex-direction: column;gap: 20px;}
.form-row {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.comment-form input,
.comment-form textarea {width: 100%;padding: 16px 20px;background: var(--bg-main);border: 1px solid transparent;border-radius: var(--radius-med);font-family: var(--font-body);font-size: 16px;color: var(--text-main);outline: none;transition: all 0.3s;}
.comment-form textarea {resize: vertical;}
.comment-form input:focus,
.comment-form textarea:focus {background: white;border-color: var(--primary-light);box-shadow: 0 0 0 4px rgba(56, 176, 0, 0.1);}
@media (max-width: 768px) {.form-row {    grid-template-columns: 1fr;}.comment-block {    flex-direction: column;    padding: 20px;}.comment-meta-info {    flex-direction: column;    align-items: flex-start;    gap: 5px;}.comment-form-box {    padding: 25px;}}
/* ==========================================================
   CONTACT PAGE (CONTACT.HTML) STYLES
========================================================== */

.contact-layout {max-width: 1000px;margin: 0 auto 80px;}
.contact-header {margin-bottom: 60px;}
.contact-header .lead-text {max-width: 700px;margin: 0 auto;}
.contact-grid {display: grid;grid-template-columns: 1fr 1.5fr;gap: 50px;align-items: start;}
.info-card {display: flex;gap: 20px;background: white;padding: 25px;border-radius: var(--radius-large);box-shadow: var(--shadow-soft);margin-bottom: 20px;transition: transform 0.3s;}
.info-card:hover {transform: translateX(5px);}
.info-icon {font-size: 32px;width: 60px;height: 60px;background: var(--bg-main);border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.info-card h4 {font-size: 18px;margin-bottom: 5px;color: var(--text-main);}
.info-card p {color: var(--text-muted);font-size: 15px;line-height: 1.5;}
/* Socials in Contact Info */
.contact-socials h4 {font-size: 18px;color: var(--text-main);}.contact-socials .article-share {justify-content: flex-start;}.contact-socials .share-btn {background: white;box-shadow: var(--shadow-soft);}
/* Contact Form */
.contact-form-container {background: white;padding: 40px;border-radius: var(--radius-large);box-shadow: var(--shadow-soft);}
.contact-form-container h3 {font-size: 28px;margin-bottom: 10px;}
.form-desc {color: var(--text-muted);margin-bottom: 30px;}
.main-contact-form {display: flex;flex-direction: column;gap: 20px;}
.form-group {display: flex;flex-direction: column;gap: 8px;}
.form-group label {font-weight: 700;color: var(--text-main);font-size: 15px;}
.form-group input, 
.form-group select, 
.form-group textarea {width: 100%;padding: 16px 20px;background: var(--bg-main);border: 2px solid transparent;border-radius: var(--radius-med);font-family: var(--font-body);font-size: 16px;color: var(--text-main);outline: none;transition: all 0.3s;}
.form-group select {appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2D42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 20px center;background-size: 16px;}
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {background: white;border-color: var(--primary-light);box-shadow: 0 0 0 4px rgba(56, 176, 0, 0.1);}
.btn-full-contact {width: 100%;justify-content: center;margin-top: 10px;padding: 16px;font-size: 18px;}
@media (max-width: 900px) {.contact-grid {    grid-template-columns: 1fr;}}@media (max-width: 600px) {.contact-form-container {    padding: 25px;}}
/* ==========================================================
   ABOUT PAGE (ABOUT.HTML) STYLES
========================================================== */

.about-layout {max-width: 1000px;margin: 0 auto 80px;}
.about-sections-grid,
.about-links-section,
.about-banner-embed {margin-top: 80px;padding-top: 50px;border-top: 2px dashed rgba(0,0,0,0.05);}
.about-sections-grid .section-subheading,
.about-banner-embed .section-subheading {margin-bottom: 40px;}
/* 1. Category Info Cards */
.info-card-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
.info-card-vertical {flex-direction: column;align-items: center;text-align: center;}
.info-card-vertical .info-icon {margin-bottom: 15px;}
.info-green { color: var(--primary); background: rgba(56, 176, 0, 0.1); }.info-orange { color: var(--accent); background: rgba(255, 159, 28, 0.1); }.info-blue { color: #4361EE; background: rgba(67, 97, 238, 0.1); }
/* 2. Three Links Banner */
.links-banner {display: flex;background: white;border-radius: var(--radius-large);box-shadow: var(--shadow-soft);overflow: hidden;}
.link-item {flex: 1;padding: 40px 30px;display: flex;flex-direction: column;align-items: center;text-align: center;gap: 15px;transition: background 0.3s;}
.link-item:hover {background: var(--bg-main);}
.divider-mid {border-left: 1px solid rgba(0,0,0,0.05);border-right: 1px solid rgba(0,0,0,0.05);}
.link-icon {font-size: 40px;margin-bottom: 5px;}
.link-texts h3 {font-size: 20px;margin-bottom: 10px;color: var(--text-main);}
.link-texts p {font-size: 15px;color: var(--text-muted);}
/* 3. Embed Banner Code */
.embed-desc {font-size: 18px;color: var(--text-muted);margin-bottom: 30px;}
.embed-box-container {background: white;border-radius: var(--radius-large);padding: 40px;box-shadow: var(--shadow-soft);display: flex;flex-direction: column;gap: 30px;}
.preview-area, .code-area {display: flex;flex-direction: column;align-items: center;gap: 15px;}
.preview-label {font-weight: 700;color: var(--text-muted);font-size: 14px;text-transform: uppercase;letter-spacing: 1px;}
.site-badge {display: inline-flex;align-items: center;gap: 8px;padding: 6px 14px;background: var(--primary);color: #fff;text-decoration: none;border-radius: 100px;font-family: sans-serif;font-weight: 700;font-size: 13px;transition: transform 0.2s;}.site-badge:hover {transform: scale(1.05);}
.code-block-wrap {position: relative;width: 100%;max-width: 700px;text-align: left;}
pre {background: #1a1a2e;color: #a9b7c6;padding: 20px;border-radius: var(--radius-med);overflow-x: auto;font-family: 'Courier New', Courier, monospace;font-size: 14px;line-height: 1.5;}
.copy-code-btn {position: absolute;top: 10px;right: 10px;background: rgba(255,255,255,0.1);color: white;border: none;padding: 6px 12px;border-radius: var(--radius-med);font-family: var(--font-body);font-size: 12px;cursor: pointer;transition: background 0.2s;}
.copy-code-btn:hover {background: rgba(255,255,255,0.2);}
@media (max-width: 900px) {.info-card-grid {    grid-template-columns: 1fr;}.links-banner {    flex-direction: column;}.divider-mid {    border-left: none;    border-right: none;    border-top: 1px solid rgba(0,0,0,0.05);    border-bottom: 1px solid rgba(0,0,0,0.05);}}
/* ==========================================================
   RULES PAGE (RULES.HTML) STYLES
========================================================== */

.rules-layout {max-width: 900px;margin: 0 auto 80px;}
.rules-content {margin-top: 50px;}
.rule-block {display: flex;gap: 25px;margin-bottom: 40px;padding-bottom: 30px;border-bottom: 1px solid rgba(0,0,0,0.05);}
.rule-block:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.rule-icon {width: 60px;height: 60px;background: var(--bg-main);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 28px;flex-shrink: 0;}
.rule-text h2 {font-size: 24px;margin-bottom: 12px;margin-top: 0;}
.rule-text a {color: var(--primary);font-weight: 700;text-decoration: underline;}.rule-text a:hover {color: var(--primary-light);}
@media (max-width: 600px) {.rule-block {    flex-direction: column;    gap: 15px;}}
/* ==========================================================
   CATEGORY PAGE (CATEGORY.HTML) STYLES
========================================================== */

.category-hero {margin-bottom: 20px;padding-bottom: 20px;}
/* Featured Large Category Banner */
.category-featured-block {margin: 0 auto;border-radius: var(--radius-large);overflow: hidden;position: relative;box-shadow: var(--shadow-soft);}
.featured-img-wrap {position: relative;height: 400px;width: 100%;}
.featured-img-wrap img {width: 100%;height: 100%;object-fit: cover;}
.featured-overlay {position: absolute;bottom: 0;left: 0;width: 100%;padding: 60px 40px 40px;background: linear-gradient(to top, rgba(14,23,14,0.85) 0%, rgba(14,23,14,0) 100%);color: white;}
.featured-overlay h2 {font-size: 32px;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
.featured-overlay p {font-size: 18px;opacity: 0.9;text-shadow: 0 1px 3px rgba(0,0,0,0.3);}
.category-main-content {flex: 1;}
.category-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;margin-bottom: 50px;}
.cat-card {height: 100%;}
.cat-card .story-img-wrap {height: 200px;}
.card-excerpt {font-size: 14px;color: var(--text-muted);margin: 10px 0;line-height: 1.5;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.navigation .pages {margin:10px 0; padding: 6px; box-shadow: var(--shadow-soft); background: white;border-radius: var(--radius-pill);}
 .pages  a {color: white;   background: var(--bg-main); color: var(--text-main);  font-weight: 700;  padding: 3px 10px;text-decoration: none;border-radius: var(--radius-pill);transition: 0.2s;}
 .pages > span {font-weight: 800; background: var(--primary-light); color:#fff; padding: 3px 10px;border-radius: var(--radius-pill);}

/* Category SEO Block */
.category-seo-block {display: flex;gap: 40px;align-items: center;background: white;padding: 40px;border-radius: var(--radius-large);box-shadow: var(--shadow-soft);margin-top: 40px;margin-bottom: 20px;}
.seo-img-wrapper {flex: 0 0 350px;}
.seo-img-wrapper img {width: 100%;height: 300px;object-fit: cover;border-radius: var(--radius-med);box-shadow: var(--shadow-soft);}
.seo-text-content {flex: 1;}
.seo-text-content h2 {font-size: 26px;margin-bottom: 20px;color: var(--text-main);}
.seo-text-content p {font-size: 16px;line-height: 1.6;color: #4a5568;margin-bottom: 15px;}.seo-text-content p:last-child {margin-bottom: 0;}
@media (max-width: 900px) {.category-seo-block {    flex-direction: column;    padding: 30px;}.seo-img-wrapper {    flex: 1;    width: 100%;}.seo-img-wrapper img {    height: 250px;}}
/* ==========================================================
   TOP RATED PAGES (INDEX.HTML) STYLES
========================================================== */

.top-rated-section {position: relative;z-index: 1;}
.rating-list-wrapper {max-width: 800px;margin: 0 auto;display: flex;flex-direction: column;gap: 15px;}
.rating-item {display: flex;align-items: center;background: white;padding: 15px 20px;border-radius: var(--radius-large);box-shadow: 0 4px 15px rgba(0,0,0,0.03);transition: transform 0.3s ease, box-shadow 0.3s ease;gap: 20px;position: relative;overflow: hidden;}
.rating-item:hover {transform: translateY(-3px) scale(1.01);box-shadow: 0 10px 25px rgba(56, 176, 0, 0.08);}
.rating-number {font-size: 32px;font-weight: 800;color: var(--primary-light);opacity: 0.5;min-width: 40px;text-align: center;font-family: 'Quicksand', sans-serif;}
.rating-item:nth-child(1) .rating-number { color: gold; opacity: 1; font-size: 40px; }.rating-item:nth-child(2) .rating-number { color: silver; opacity: 1; font-size: 36px; }.rating-item:nth-child(3) .rating-number { color: #cd7f32; opacity: 1; font-size: 34px; } /* Bronze */

.rating-img {width: 80px;height: 80px;flex-shrink: 0;border-radius: var(--radius-med);overflow: hidden;}
.rating-img img {width: 100%;height: 100%;object-fit: cover;}
.rating-content {flex: 1;}
.rating-content h3 {margin: 0 0 8px 0;font-size: 18px;}
.rating-content h3 a {color: var(--text-main);text-decoration: none;transition: color 0.2s;}
.rating-content h3 a:hover {color: var(--primary);}
.rating-meta {display: flex;align-items: center;gap: 15px;font-size: 13px;color: var(--text-muted);}
.rating-meta .tag {font-size: 11px;padding: 2px 8px;border-radius: var(--radius-pill);font-weight: 700;}
.rating-meta .tag-green { background: rgba(56,176,0,0.1); color: var(--primary); }.rating-meta .tag-orange { background: rgba(255,159,28,0.1); color: var(--orange); }.rating-meta .tag-blue { background: rgba(0,150,255,0.1); color: #0077b6; }
.rating-icon-flame {font-size: 24px;opacity: 0.8;margin-left: 10px;animation: flicker 2s infinite alternate;}
@keyframes flicker {0% { transform: scale(1); opacity: 0.8; }100% { transform: scale(1.1); opacity: 1; }}
@media (max-width: 600px) {.rating-item {    flex-direction: column;    align-items: flex-start;    text-align: center;    padding: 20px;}.rating-number {    position: absolute;    top: 10px;    left: 10px;    font-size: 24px !important;}.rating-img {    width: 100%;    height: 150px;    margin-bottom: 10px;}.rating-meta {    justify-content: center;    flex-wrap: wrap;}.rating-icon-flame {    position: absolute;    top: 10px;    right: 10px;}}
/* ==========================================================
   BEFORE/AFTER SLIDER STYLES
========================================================== */

.comparison-slider {position: relative;width: 100%;max-width: 900px;height: 500px;margin: 0 auto;border-radius: var(--radius-large);box-shadow: var(--shadow-soft);overflow: hidden;background: #e0e0e0;}
.image-before, .image-after {position: absolute;inset: 0;width: 100%;height: 100%;}
.image-before img, .image-after img {width: 100%;height: 100%;object-fit: cover;pointer-events: none;display: block;}
.image-after {/* Set default clip-path, updated by JS */clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);}
.compare-range {position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;cursor: ew-resize;z-index: 10;margin: 0; /* Important for cross-browser styling */touch-action: pan-y; /* allow page scroll when touching but not dragging horizontally */
}
/* The visual line and button that follows the thumb */
.slider-line {position: absolute;top: 0;bottom: 0;left: 50%; /* Default */width: 4px;background: white;cursor: ew-resize;pointer-events: none; /* Let clicks pass through to input */z-index: 5;transform: translateX(-50%);box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.slider-button {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 44px;height: 44px;background: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 20px;color: var(--primary);box-shadow: 0 2px 10px rgba(0,0,0,0.2);transition: transform 0.2s, box-shadow 0.2s;}
/* Active state of the slider handle */
.compare-range:active ~ .slider-line .slider-button {transform: translate(-50%, -50%) scale(1.1);box-shadow: 0 4px 15px rgba(56, 176, 0, 0.4);color: var(--primary-light);}
.compare-label {position: absolute;top: 20px;padding: 6px 16px;background: rgba(0,0,0,0.6);color: white;border-radius: 20px;font-size: 14px;font-weight: 700;backdrop-filter: blur(4px);z-index: 4;letter-spacing: 1px;text-transform: uppercase;pointer-events: none;}
.label-before {right: 20px;}
.label-after {left: 20px;}
@media (max-width: 768px) {.category-grid {    grid-template-columns: 1fr;}.comparison-slider {    height: 350px;}}
/* ==========================================================
   AUTHORS PAGE (AUTHORS.HTML) STYLES
========================================================== */

.page-authors {background-color: var(--bg-main);}
.authors-layout {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;margin-bottom: 80px;}
.author-card {background: white;border-radius: var(--radius-large);overflow: hidden;box-shadow: var(--shadow-soft);position: relative;display: flex;flex-direction: column;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.author-card:hover {transform: translateY(-8px);box-shadow: 0 15px 35px rgba(0,0,0,0.08);}
.author-card-header {height: 120px;position: relative;display: flex;justify-content: center;}
.bg-garden-soft { background: linear-gradient(135deg, rgba(56,176,0,0.15) 0%, rgba(56,176,0,0.05) 100%); }.bg-pets-soft { background: linear-gradient(135deg, rgba(255,159,28,0.15) 0%, rgba(255,159,28,0.05) 100%); }.bg-interior-soft { background: linear-gradient(135deg, rgba(0,119,182,0.15) 0%, rgba(0,119,182,0.05) 100%); }.bg-kids-soft { background: linear-gradient(135deg, rgba(255,105,180,0.15) 0%, rgba(255,105,180,0.05) 100%); } /* Pink for Kids */
.bg-aqua-soft { background: linear-gradient(135deg, rgba(0,250,154,0.15) 0%, rgba(0,250,154,0.05) 100%); } /* Aquamarine */

.author-tag {position: absolute;top: 15px;right: 15px;background: white;padding: 5px 12px;border-radius: var(--radius-pill);font-size: 13px;font-weight: 700;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.author-avatar {width: 140px;height: 140px;border-radius: 50%;border: 5px solid white;position: absolute;bottom: -70px;overflow: hidden;box-shadow: 0 5px 15px rgba(0,0,0,0.1);background: white;}
.author-avatar img {width: 100%;height: 100%;object-fit: cover;}
.author-card-body {padding: 85px 30px 30px; /* Padding top accounts for Avatar overlap */text-align: center;flex: 1;display: flex;flex-direction: column;}
.author-card-body h2 {font-size: 24px;margin-bottom: 5px;color: var(--text-main);}
.author-role {font-size: 14px;color: var(--primary);font-weight: 700;margin-bottom: 20px;margin-top: 0;}
.author-bio {font-size: 15px;color: var(--text-muted);line-height: 1.6;margin-bottom: 30px;flex: 1;}
.author-stats {display: flex;justify-content: center;gap: 20px;border-top: 1px solid rgba(0,0,0,0.05);padding-top: 20px;}
.stat-box {display: flex;flex-direction: column;}
.stat-val {font-size: 20px;font-weight: 800;font-family: 'Quicksand', sans-serif;color: var(--text-main);}
.stat-label {font-size: 12px;color: var(--text-muted);text-transform: uppercase;letter-spacing: 1px;}
.author-card-footer {padding: 0 30px 30px;}
.btn-full-width {width: 100%;display: block;}
@media (max-width: 992px) {.authors-layout {    grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 600px) {.authors-layout {    grid-template-columns: 1fr;}}
/* ==========================================================
   USER PROFILE PAGE (PROFILE.HTML) STYLES
========================================================== */

.page-profile {background-color: var(--bg-main);}
.profile-main-wrapper {margin-bottom: 80px;}
.grid-layout-2col {display: grid;grid-template-columns: 350px 1fr;gap: 40px;}
/* Sidebar Profile Card */
.profile-card {background: white;border-radius: var(--radius-large);padding: 40px 30px;box-shadow: var(--shadow-soft);text-align: center;}
.sticky-sidebar {position: sticky;top: 120px;}
.profile-avatar-wrap {width: 150px;height: 150px;margin: 0 auto 20px;position: relative;border-radius: 50%;border: 5px solid white;box-shadow: 0 8px 25px rgba(0,0,0,0.08);}
.profile-avatar-wrap img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
.status-indicator {position: absolute;bottom: 5px;right: 15px;width: 20px;height: 20px;border-radius: 50%;border: 3px solid white;}
.status-online { background-color: #38b000; }.status-offline { background-color: #d3d3d3; }
.profile-username {font-size: 28px;margin: 0 0 10px;color: var(--text-main);}
.profile-role {display: inline-block;padding: 5px 15px;border-radius: var(--radius-pill);font-weight: 700;font-size: 14px;margin-bottom: 10px;background: rgba(255,159,28,0.1);color: var(--orange);}
.profile-title {font-size: 15px;}
.profile-actions .btn {font-size: 14px;padding: 12px 20px;}
/* Profile Content Section */
.profile-section {background: white;border-radius: var(--radius-large);padding: 40px;box-shadow: var(--shadow-soft);}
.section-heading {font-size: 24px;border-bottom: 2px solid var(--bg-main);padding-bottom: 15px;margin-top: 0;margin-bottom: 30px;color: var(--text-main);}
.profile-stats-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin-bottom: 20px;}
.stat-item {background: var(--bg-main);border-radius: var(--radius-med);padding: 20px;display: flex;align-items: center;gap: 20px;transition: transform 0.2s;}
.stat-item:hover {transform: translateY(-3px);}
.stat-icon {font-size: 40px;line-height: 1;}
.stat-info {display: flex;flex-direction: column;}
.stat-info .stat-value {font-size: 28px;font-weight: 800;font-family: 'Quicksand', sans-serif;color: var(--text-main);line-height: 1;margin-bottom: 5px;}
.stat-info .stat-label {font-size: 13px;color: var(--text-muted);text-transform: uppercase;letter-spacing: 1px;}
.profile-details-list {list-style: none;padding: 0;margin: 0;background: var(--bg-main);border-radius: var(--radius-med);padding: 20px;}
.profile-details-list li {display: flex;justify-content: space-between;padding: 12px 0;border-bottom: 1px solid rgba(0,0,0,0.05);}
.profile-details-list li:last-child {border-bottom: none;}
.detail-label {font-weight: 600;color: var(--text-muted);}
.detail-value {color: var(--text-main);font-weight: 500;}
/* Profile Comments */
.comments-list {display: flex;flex-direction: column;gap: 25px;}
@media (max-width: 992px) {.grid-layout-2col {    grid-template-columns: 1fr;}.sticky-sidebar {    position: static;}}
@media (max-width: 600px) {.profile-stats-grid {    grid-template-columns: 1fr;}.profile-section {    padding: 25px;}}
/* ==========================================================
   FORM ELEMENTS (Global)
========================================================== */

.magic-form {display: block;width: 100%;}
.magic-form .form-group {margin-bottom: 25px;display: block;}
.magic-form label {display: block;font-weight: 700;color: var(--text-main);margin-bottom: 10px;font-size: 16px;line-height: 1.4;}
.magic-form input[type="text"],
.magic-form input[type="email"],
.magic-form select,
.magic-form textarea {display: block;width: 100%;padding: 16px 20px;border: 2px solid var(--bg-main);border-radius: var(--radius-med);font-family: 'Nunito', sans-serif;font-size: 16px;line-height: 1.5;color: var(--text-main);background-color: white;transition: all 0.3s ease;outline: none;box-sizing: border-box; margin: 0;}
.magic-form select {appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 15px center;background-size: 15px;}
.magic-form input[type="text"]::placeholder,
.magic-form input[type="email"]::placeholder,
.magic-form textarea::placeholder {color: #a0a0a0;opacity: 1;}
.magic-form input:focus,
.magic-form select:focus,
.magic-form textarea:focus {border-color: var(--primary);box-shadow: 0 0 0 4px rgba(56, 176, 0, 0.15);}
.magic-form .btn-full-width,
.btn-full-contact {display: block;width: 100%;box-sizing: border-box;padding: 18px;font-size: 18px;font-weight: 700;border: none;border-radius: var(--radius-med);cursor: pointer;text-align: center;margin-top: 20px;transition: transform 0.2s, box-shadow 0.2s;}
/* General margin utils used in forms */
.mt-3 { margin-top: 15px !important; }.mb-4 { margin-bottom: 25px !important; }
.ad-hero { background: linear-gradient(135deg, rgba(56,176,0,0.08) 0%, rgba(0,119,182,0.08) 100%); border-radius: var(--radius-large); padding: 60px 40px; text-align: center; margin-bottom: 60px; }
.ad-hero h1 { font-size: 42px; margin-bottom: 20px; color: var(--text-main); }
.ad-hero p { font-size: 18px; color: var(--text-muted); max-width: 700px; margin: 0 auto 30px; }
.ad-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.ad-stat-box { background: white; padding: 30px; border-radius: var(--radius-med); box-shadow: var(--shadow-soft); }
.ad-stat-box h4 { font-size: 36px; font-family: 'Quicksand', sans-serif; font-weight: 800; color: var(--primary); margin: 0 0 5px 0; line-height: 1; }
.ad-stat-box p { margin: 0; font-size: 14px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.section-title { text-align: center; font-size: 32px; margin-bottom: 50px; }
.offers-grid { display: flex; flex-direction: column; gap: 40px; margin-bottom: 80px; }
.offer-card { display: flex; background: white; border-radius: var(--radius-large); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.3s; }
.offer-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.05); }
.offer-card:nth-child(even) { flex-direction: row-reverse; }
.offer-img-box { width: 40%; background: var(--bg-main); display: flex; align-items: center; justify-content: center; position: relative; min-height: 250px; overflow: hidden; }
.offer-img-box::before { content: ''; position: absolute; width: 150%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%), radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%); background-size: 20px 20px; background-position: 0 0, 10px 10px; opacity: 0.5; animation: move-bg 30s linear infinite; }
@keyframes move-bg { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } }
.offer-emoji { font-size: 80px; position: relative; z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); transition: transform 0.3s; }
.offer-card:hover .offer-emoji { transform: scale(1.1) rotate(5deg); }
.offer-content { padding: 40px; width: 60%; display: flex; flex-direction: column; justify-content: center; }
.offer-content h3 { font-size: 26px; margin: 0 0 15px 0; color: var(--text-main); }
.offer-content p { color: var(--text-muted); font-size: 16px; margin-bottom: 20px; line-height: 1.6; }
.offer-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
.offer-list li { position: relative; padding-left: 25px; margin-bottom: 8px; color: var(--text-main); }
.offer-list li::before { content: '✓'; position: absolute; left: 0; top: 2px; color: var(--primary); font-weight: bold; }
.offer-price { display: inline-block; background: rgba(56, 176, 0, 0.1); color: var(--primary); padding: 5px 15px; border-radius: var(--radius-pill); font-weight: 700; font-size: 15px; align-self: flex-start; }
.color-blue .offer-list li::before { color: var(--blue); }
.color-blue .offer-price { background: rgba(0,119,182,0.1); color: var(--blue); }
.color-orange .offer-list li::before { color: var(--orange); }
.color-orange .offer-price { background: rgba(255,159,28,0.1); color: var(--orange); }
.ad-contacts-section { background: white; border-radius: var(--radius-large); padding: 50px; box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; }
.contact-methods h3 { font-size: 28px; margin-top: 0; margin-bottom: 25px; }
.messenger-btn { display: flex; align-items: center; gap: 15px; padding: 15px 25px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; font-size: 16px; margin-bottom: 15px; transition: transform 0.2s, box-shadow 0.2s; }
.messenger-btn:hover { transform: translateY(-3px); }
.btn-telegram { background-color: #0088cc; color: white; box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); }
.btn-telegram:hover { box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4); color: white; }
.btn-whatsapp { background-color: #25D366; color: white; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
.btn-whatsapp:hover { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); color: white; }
.btn-icon { font-size: 24px; line-height: 1; }
.contact-form-block h3 { font-size: 24px; margin-top: 0; margin-bottom: 25px; }
@media (max-width: 992px) { .ad-stats-grid { grid-template-columns: 1fr; } .ad-contacts-section { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 768px) { .offer-card, .offer-card:nth-child(even) { flex-direction: column; } .offer-img-box, .offer-content { width: 100%; } .offer-img-box { min-height: 180px; } .ad-hero { padding: 40px 20px; } .ad-hero h1 { font-size: 32px; } }