@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root {--color-brand-purple: #6C3CE9;--color-brand-pink: #E841B5;--color-brand-blue: #2A33D6;--hero-gradient: linear-gradient(115deg, #2A33D6 0%, #5130DC 30%, #8733E3 60%, #C837D8 85%, #E841B5 100%);--bg-slate-50: #f8fafc;--bg-slate-100: #f1f5f9;--bg-slate-900: #0f172a;--text-slate-900: #0f172a;--text-slate-800: #1e293b;--text-slate-700: #334155;--text-slate-600: #475569;--text-slate-500: #64748b;--text-slate-400: #94a3b8;--purple-100: #f3e8ff;--purple-200: #e9d5ff;}
html {scroll-behavior: smooth;font-family: 'Inter', system-ui, -apple-system, sans-serif;}
body {background-color: #ffffff;color: var(--text-slate-800);-webkit-font-smoothing: antialiased;margin: 0;padding: 0;}
::selection {background-color: #8B5CF6;color: #ffffff;}
.no-scrollbar::-webkit-scrollbar {display: none;}
.no-scrollbar {-ms-overflow-style: none;scrollbar-width: none;}
.container-custom {max-width: 80rem;margin-left: auto;margin-right: auto;padding-left: 1rem;padding-right: 1rem;}
@media (min-width: 640px) {.container-custom {padding-left: 1.5rem;padding-right: 1.5rem;}}
@media (min-width: 1024px) {.container-custom {padding-left: 2rem;padding-right: 2rem;}}
.hero-gradient {background: var(--hero-gradient);}
.app-custom-bg {background-color: #f9faff;}
.top-notice {background-color: var(--bg-slate-900);color: #ffffff;font-size: 0.75rem;padding: 0.5rem 1rem;text-align: center;font-weight: 500;display: flex;align-items: center;justify-content: center;gap: 0.5rem;position: relative;z-index: 30;}
@media (min-width: 640px) {.top-notice {font-size: 0.875rem;}}
.top-notice img {height: 1rem;width: auto;object-fit: contain;display: inline-block;}
@media (min-width: 640px) {.top-notice img {height: 1.25rem;}}
.top-notice a {color: #a5b4fc;text-decoration: underline;margin-left: 0.25rem;transition: color 0.2s;}
.top-notice a:hover {color: #ffffff;}
.sticky-navbar {position: sticky;top: 0;z-index: 50;backdrop-filter: blur(8px);color: #ffffff;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}
.nav-container {padding-top: 1rem;padding-bottom: 1rem;display: flex;align-items: center;justify-content: space-between;}
.nav-logo-img {height: 2rem;width: auto;object-fit: contain;transition: transform 0.2s;}
.group:hover .nav-logo-img {transform: scale(1.05);}
.nav-links {display: none;align-items: center;gap: 2rem;font-size: 0.875rem;font-weight: 500;color: var(--purple-100);}
@media (min-width: 768px) {.nav-links {display: flex;}}
.nav-links a, .nav-dropdown-btn {color: inherit;text-decoration: none;transition: color 0.2s;}
.nav-links a:hover, .nav-dropdown-btn:hover {color: var(--purple-200);}
.nav-links a.active {color: #ffffff;font-weight: 700;}
.nav-dropdown-btn {background: none;border: none;cursor: pointer;display: flex;align-items: center;gap: 0.25rem;font-size: inherit;font-family: inherit;}
.qrcode-dropdown {position: absolute;top: 100%;right: 0;margin-top: 0.75rem;width: 10rem;background-color: #ffffff;border-radius: 1rem;padding: 0.75rem;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);border: 2px solid var(--purple-200);z-index: 50;text-align: center;}
.qrcode-dropdown.hidden {display: none;}
.qrcode-dropdown img {width: 100%;height: auto;border-radius: 0.75rem;object-fit: contain;border: 1px solid #f1f5f9;padding: 0.25rem;}
.btn-nav-download {display: inline-flex;align-items: center;gap: 0.5rem;background-color: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);color: #ffffff;font-weight: 600;padding: 0.625rem 1.25rem;border-radius: 9999px;font-size: 0.875rem;text-decoration: none;backdrop-filter: blur(4px);box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);transition: all 0.2s;}
.btn-nav-download:hover {background-color: rgba(255, 255, 255, 0.2);}
.btn-nav-download:active {transform: scale(0.95);}
.hero-header {color: #ffffff;position: relative;overflow: hidden;}
.hero-bg-blur-1 {position: absolute;top: 25%;left: 2.5rem;width: 10rem;height: 10rem;background-color: rgba(96, 165, 250, 0.2);border-radius: 9999px;filter: blur(48px);pointer-events: none;}
.hero-bg-blur-2 {position: absolute;bottom: 2.5rem;right: 33.333%;width: 16rem;height: 16rem;background-color: rgba(192, 132, 252, 0.2);border-radius: 9999px;filter: blur(48px);pointer-events: none;}
.hero-bg-blur-3 {position: absolute;top: 3rem;right: 3rem;width: 6rem;height: 6rem;background-color: rgba(244, 114, 182, 0.3);border-radius: 9999px;filter: blur(32px);pointer-events: none;}
.hero-content {padding-top: 3rem;padding-bottom: 5rem;position: relative;z-index: 10;}
@media (min-width: 1024px) {.hero-content {padding-top: 5rem;padding-bottom: 9rem;}}
.hero-grid {display: grid;grid-template-columns: 1fr;gap: 3rem;align-items: center;}
@media (min-width: 1024px) {.hero-grid {grid-template-columns: repeat(12, minmax(0, 1fr));}.hero-left-col {grid-column: span 6 / span 6;}.hero-right-col {grid-column: span 6 / span 6;}.promo-hero-left {grid-column: span 5 / span 5;}.promo-hero-right {grid-column: span 7 / span 7;}}
.hero-text-block {text-align: center;}
@media (min-width: 1024px) {.hero-text-block {text-align: left;}}
.hero-title {font-size: 2.25rem;line-height: 1.2;font-weight: 900;color: #ffffff;letter-spacing: -0.025em;margin: 0;}
@media (min-width: 640px) {.hero-title {font-size: 3rem;}}
@media (min-width: 1024px) {.hero-title {font-size: 3.75rem;}}
.text-gradient-gold {background: linear-gradient(to right, #fcd34d, #fbcfe8, #ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.cert-badge {display: inline-flex;align-items: center;gap: 0.5rem;background-color: rgba(88, 28, 135, 0.5);backdrop-filter: blur(4px);padding: 0.375rem 0.875rem;border-radius: 9999px;font-size: 0.75rem;color: var(--purple-200);margin-top: 1rem;}
@media (min-width: 640px) {.cert-badge {font-size: 0.875rem;}}
.cert-badge img {height: 1rem;width: auto;object-fit: contain;}
.hero-stats-group {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 1rem;padding-top: 1.5rem;}
@media (min-width: 640px) {.hero-stats-group {gap: 1.5rem;}}
@media (min-width: 1024px) {.hero-stats-group {justify-content: flex-start;}}
.stat-circle {width: 7rem;height: 7rem;border-radius: 9999px;background-color: rgba(255, 255, 255, 0.1);backdrop-filter: blur(4px);display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 0.5rem;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);transition: transform 0.2s;}
@media (min-width: 640px) {.stat-circle {width: 8rem;height: 8rem;}}
.stat-circle:hover {transform: scale(1.05);}
.stat-num {font-size: 1.5rem;font-weight: 800;color: #ffffff;}
@media (min-width: 640px) {.stat-num {font-size: 1.875rem;}}
.stat-num span {font-size: 0.75rem;font-weight: 400;}
@media (min-width: 640px) {.stat-num span {font-size: 0.875rem;}}
.stat-label {font-size: 11px;color: var(--purple-200);margin-top: 0.125rem;}
@media (min-width: 640px) {.stat-label {font-size: 0.75rem;}}
.hero-btn-group {display: flex;flex-direction: column;gap: 1rem;padding-top: 1rem;}
@media (min-width: 640px) {.hero-btn-group {flex-direction: row;align-items: center;}}
@media (min-width: 1024px) {.hero-btn-group {justify-content: flex-start;}}
.btn-primary-white {width: 100%;position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 0.75rem;background-color: #ffffff;color: #1e1b4b;font-weight: 800;padding: 1rem 2rem;border-radius: 9999px;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);text-decoration: none;transition: all 0.2s;}
@media (min-width: 640px) {.btn-primary-white {width: auto;}}
.btn-primary-white:hover {background-color: #faf5ff;}
.btn-primary-white:active {transform: scale(0.95);}
.btn-badge-tag {position: absolute;top: -0.625rem;right: 1.5rem;background: linear-gradient(to right, #f59e0b, #f97316);color: #ffffff;font-size: 10px;font-weight: 700;padding: 0.125rem 0.5rem;border-radius: 9999px;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);}
.btn-secondary-glass {width: 100%;display: inline-flex;align-items: center;justify-content: center;gap: 0.75rem;background-color: rgba(255, 255, 255, 0.1);color: #ffffff;font-weight: 600;padding: 1rem 2rem;border-radius: 9999px;backdrop-filter: blur(4px);text-decoration: none;transition: all 0.2s;}
@media (min-width: 640px) {.btn-secondary-glass {width: auto;}}
.btn-secondary-glass:hover {background-color: rgba(255, 255, 255, 0.2);}
.btn-secondary-glass:active {transform: scale(0.95);}
.hero-device-wrapper {position: relative;width: 100%;max-width: 42rem;transform: scale(1.1);}
.speed-ball-container {position: absolute;left: 7%;top: 56%;transform: translate(-40px, -50%);z-index: 20;pointer-events: none;display: flex;align-items: center;justify-content: center;width: 36%;height: 46%;}
.outer-ring-1 {position: absolute;top: 50%;left: 50%;width: 7rem;height: 7rem;border-radius: 42%;background: linear-gradient(to top right, rgba(244, 63, 94, 0.4), rgba(244, 114, 182, 0.3));filter: blur(1px);transition: all 0.5s;}
.outer-ring-2 {position: absolute;top: 50%;left: 50%;width: 8rem;height: 8rem;border-radius: 46%;background: linear-gradient(to bottom left, rgba(244, 114, 182, 0.25), rgba(225, 29, 72, 0.2));filter: blur(2px);transition: all 0.5s;}
@media (min-width: 640px) {.outer-ring-1 { width: 8rem; height: 8rem; }.outer-ring-2 { width: 9.5rem; height: 9.5rem; }}
.main-speed-ball {position: relative;z-index: 10;width: 5rem;height: 5rem;border-radius: 9999px;display: flex;flex-direction: column;align-items: center;justify-content: center;transition: all 0.5s;}
@media (min-width: 640px) {.main-speed-ball {width: 6rem;height: 6rem;}}
.ball-state-countdown {background: linear-gradient(to top right, #f43f5e, #ec4899);box-shadow: 0 0 20px rgba(244, 63, 94, 0.7);}
.ball-state-active {background: linear-gradient(to top right, #38bdf8, #2563eb);box-shadow: 0 0 25px rgba(56, 189, 248, 0.8);}
.speed-ball-num {font-size: 1.25rem;font-weight: 900;color: #ffffff;letter-spacing: 0.1em;}
@media (min-width: 640px) {.speed-ball-num { font-size: 1.5rem; }}
.speed-ball-text-active {font-size: 10px;font-weight: 800;color: #ffffff;letter-spacing: 0.05em;}
@media (min-width: 640px) {.speed-ball-text-active { font-size: 0.75rem; }}
.hero-wave {width: 100%;overflow: hidden;line-height: 0;position: relative;z-index: 10;margin-bottom: -1px;}
.hero-wave svg {position: relative;display: block;width: 100%;height: 4rem;color: #ffffff;fill: currentColor;}
@media (min-width: 640px) {.hero-wave svg {height: 6rem;}}
.section-padding {padding-top: 4rem;padding-bottom: 4rem;}
@media (min-width: 640px) {.section-padding {padding-top: 6rem;padding-bottom: 6rem;}}
.section-title {font-size: 1.875rem;font-weight: 800;color: var(--text-slate-900);letter-spacing: -0.025em;text-align: center;}
@media (min-width: 640px) {.section-title {font-size: 2.25rem;}}
.feature-badge {display: inline-flex;align-items: center;gap: 0.5rem;background: linear-gradient(to right, #9333ea, #4f46e5);color: #ffffff;font-size: 0.75rem;font-weight: 700;padding: 0.375rem 0.75rem;border-radius: 9999px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}
.feature-title {font-size: 1.875rem;font-weight: 900;color: var(--text-slate-900);letter-spacing: -0.025em;line-height: 1.25;margin: 0;}
@media (min-width: 640px) {.feature-title { font-size: 2.25rem; }}
@media (min-width: 1024px) {.feature-title { font-size: 3rem; }}
.feature-desc {font-size: 1rem;color: var(--text-slate-600);line-height: 1.625;max-width: 36rem;margin-left: auto;margin-right: auto;}
@media (min-width: 640px) {.feature-desc { font-size: 1.125rem; }}
@media (min-width: 1024px) {.feature-desc { margin-left: 0; margin-right: 0; }}
.feature-img-box {position: relative;width: 100%;max-width: 480px;margin: 0 auto;}
.feature-img-box img {width: 100%;height: auto;border-radius: 1.5rem;object-fit: cover;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);transition: transform 0.3s;}
.feature-img-box img:hover {transform: scale(1.02);}
.reviews-wrapper {position: relative;max-width: 56rem;margin-left: auto;margin-right: auto;}
.reviews-container {display: flex;gap: 1.5rem;overflow-x: auto;padding-top: 1rem;padding-bottom: 1rem;scroll-behavior: smooth;}
.review-card {min-width: 290px;background-color: #ffffff;border-radius: 1rem;padding: 1.5rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;justify-content: space-between;gap: 1rem;flex-shrink: 0;}
@media (min-width: 640px) {.review-card {min-width: 380px;}}
.review-stars {color: #fbbf24;font-size: 0.875rem;}
.review-text {font-size: 0.875rem;color: var(--text-slate-700);line-height: 1.625;}
.review-user {display: flex;align-items: center;gap: 0.75rem;padding-top: 0.5rem;border-top: 1px solid #f1f5f9;}
.review-avatar {width: 2.5rem;height: 2.5rem;border-radius: 9999px;font-weight: 700;display: flex;align-items: center;justify-content: center;font-size: 0.875rem;}
.review-nav-btns {display: flex;justify-content: center;align-items: center;gap: 1rem;margin-top: 2rem;}
.review-btn {width: 2.75rem;height: 2.75rem;border-radius: 9999px;background-color: #ffffff;border: none;color: var(--text-slate-700);display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.2s;}
.review-btn:hover {background-color: #f1f5f9;}
.review-btn:active {transform: scale(0.95);}
.download-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;max-width: 64rem;margin: 0 auto;}
@media (min-width: 640px) {.download-grid {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1024px) {.download-grid {grid-template-columns: repeat(4, 1fr);}}
.download-card {background-color: var(--bg-slate-50);border-radius: 1rem;padding: 2rem 1.25rem;box-sizing: border-box;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);display: flex;flex-direction: column;align-items: center;justify-content: space-between;overflow: hidden;transition: all 0.3s;}
.download-card:hover {box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);}
.download-icon-box {height: 8rem;display: flex;align-items: center;justify-content: center;transition: transform 0.3s;}
.download-card:hover .download-icon-box {transform: scale(1.1);}
.btn-download-action {width: 90%;max-width: 220px;min-width: 170px;box-sizing: border-box;display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;background: linear-gradient(to right, #9333ea, #4f46e5);color: #ffffff;font-weight: 700;font-size: 0.9rem;padding: 0.75rem 1.25rem;border-radius: 9999px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);text-decoration: none;white-space: nowrap;transition: opacity 0.2s;}
.btn-download-action:hover {opacity: 0.95;}
.promo-title {font-size: 2.25rem;font-weight: 900;color: #fcd34d;letter-spacing: -0.025em;margin: 0;}
@media (min-width: 640px) {.promo-title {font-size: 3rem;}}
.promo-qr-box {display: inline-block;background-color: #ffffff;border-radius: 1rem;padding: 0.75rem;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);max-width: 200px;}
.promo-qr-box img {width: 100%;height: auto;border-radius: 0.75rem;object-fit: contain;}
.promo-img-hero {width: 100%;max-width: 42rem;height: auto;object-fit: contain;transform: scale(1.05);}
@media (min-width: 1024px) {.promo-img-hero {transform: scale(1.1);}}
.promo-cards-grid {display: grid;grid-template-columns: 1fr;gap: 1.5rem;}
@media (min-width: 768px) {.promo-cards-grid {grid-template-columns: repeat(3, 1fr);}}
.promo-card {background: #ffffff;border-radius: 1rem;padding: 1.5rem;box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);display: flex;align-items: center;justify-content: space-between;gap: 1rem;transition: all 0.3s ease;}
@media (min-width: 640px) {.promo-card {padding: 2rem;}}
.promo-card:hover {transform: translateY(-4px);box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1);}
.footer-main {background-color: var(--bg-slate-50);padding-top: 4rem;padding-bottom: 3rem;color: var(--text-slate-600);font-size: 0.875rem;}
.footer-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;padding-bottom: 3rem;border-bottom: 1px solid #e2e8f0;}
@media (min-width: 768px) {.footer-grid {grid-template-columns: repeat(5, 1fr);}.footer-brand-col {grid-column: span 2 / span 2;}}
.social-icon-btn {width: 2rem;height: 2rem;border-radius: 9999px;background-color: #e2e8f0;color: var(--text-slate-600);display: flex;align-items: center;justify-content: center;text-decoration: none;transition: all 0.2s;}
.social-icon-btn:hover {background-color: var(--color-brand-purple);color: #ffffff;}
.footer-link-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 0.5rem;font-size: 0.75rem;}
.footer-link-list a {color: inherit;text-decoration: none;transition: color 0.2s;}
.footer-link-list a:hover {color: var(--color-brand-purple);}
.lang-select {background-color: #ffffff;border: none;border-radius: 0.5rem;font-size: 0.75rem;padding: 0.375rem 0.75rem;color: var(--text-slate-700);box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);outline: none;}
@keyframes floatAnim {0%, 100% {transform: translateY(0px);}50% {transform: translateY(-10px);}}
@keyframes orbitRotateAnim {0% {transform: translate(-50%, -50%) rotate(0deg) scale(1);}50% {transform: translate(-50%, -50%) rotate(180deg) scale(1.04);}100% {transform: translate(-50%, -50%) rotate(360deg) scale(1);}}
@keyframes counterRotateAnim {0% {transform: translate(-50%, -50%) rotate(360deg) scale(1.04);}50% {transform: translate(-50%, -50%) rotate(180deg) scale(0.96);}100% {transform: translate(-50%, -50%) rotate(0deg) scale(1);}}
@keyframes bounceAnim {0%, 100% {transform: translateY(0);}50% {transform: translateY(-5px);}}
@keyframes pulseScaleFastAnim {0%, 100% {transform: scale(1);}50% {transform: scale(1.05);}}
.animate-float-custom {animation: floatAnim 5s ease-in-out infinite;}
.animate-orbit-custom {animation: orbitRotateAnim 5s linear infinite;}
.animate-counter-custom {animation: counterRotateAnim 7s linear infinite;}
.animate-bounce-custom {animation: bounceAnim 1s ease-in-out infinite;}
.animate-pulse-scale-fast {animation: pulseScaleFastAnim 2s ease-in-out infinite;}
.feature-grid {display: flex;flex-direction: column;gap: 3rem;align-items: center;}
.feature-content {display: flex;flex-direction: column;gap: 1.5rem;text-align: center;width: 100%;}
.feature-badge {display: inline-flex;align-items: center;gap: 0.5rem;background: linear-gradient(to right, #9333ea, #4f46e5);color: #ffffff;font-size: 0.75rem;font-weight: 700;padding: 0.375rem 0.75rem;border-radius: 9999px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}
.feature-title {font-size: 1.875rem;font-weight: 900;color: var(--text-slate-900);letter-spacing: -0.025em;line-height: 1.25;margin: 0;}
.feature-desc {font-size: 1rem;color: var(--text-slate-600);line-height: 1.625;max-width: 36rem;margin: 0 auto;}
.feature-img-box {position: relative;width: 100%;max-width: 480px;margin: 0 auto;}
.feature-img-box img {width: 100%;height: auto;border-radius: 1.5rem;object-fit: cover;filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));transition: transform 0.3s ease;}
.feature-img-box img:hover {transform: scale(1.02);}
@media (min-width: 1024px) {.feature-grid {flex-direction: row;justify-content: space-between;align-items: center;}.feature-grid.feature-reverse {flex-direction: row-reverse;}.feature-content, .feature-img-box {flex: 1;max-width: 50%;}.feature-content {text-align: left;}.feature-title {font-size: 3rem;}.feature-desc {font-size: 1.125rem;margin-left: 0;margin-right: 0;}}
.category-main-wrapper {background-color: var(--bg-slate-50, #f8fafc);padding-top: 2rem;padding-bottom: 5rem;min-height: 70vh;}
.breadcrumb-nav {display: flex;align-items: center;gap: 0.5rem;font-size: 0.875rem;color: var(--text-slate-500, #64748b);margin-bottom: 1.5rem;}
.breadcrumb-nav a {color: var(--text-slate-600, #475569);text-decoration: none;transition: color 0.2s;}
.breadcrumb-nav a:hover {color: var(--color-brand-purple, #6C3CE9);}
.breadcrumb-nav .sep {color: var(--text-slate-400, #94a3b8);}
.breadcrumb-nav .current {color: var(--text-slate-900, #0f172a);font-weight: 600;}
.category-header-card {background: #ffffff;border-radius: 1rem;padding: 2rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);margin-bottom: 2.5rem;border-left: 5px solid var(--color-brand-purple, #6C3CE9);}
.category-title {font-size: 2rem;font-weight: 800;color: var(--text-slate-900, #0f172a);margin: 0 0 0.75rem 0;letter-spacing: -0.025em;}
.category-description {font-size: 1rem;color: var(--text-slate-600, #475569);line-height: 1.6;margin-bottom: 1.25rem;}
.category-meta-info {display: flex;flex-wrap: wrap;gap: 1.25rem;font-size: 0.85rem;color: var(--text-slate-500, #64748b);padding-top: 0.75rem;border-top: 1px solid var(--bg-slate-100, #f1f5f9);}
.post-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;}
@media (min-width: 640px) {.post-grid {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 1024px) {.post-grid {grid-template-columns: repeat(3, 1fr);}}
.post-card {background: #ffffff;border-radius: 1rem;overflow: hidden;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);display: flex;flex-direction: column;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.post-card:hover {transform: translateY(-4px);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);}
.post-thumb-link {display: block;width: 100%;height: 180px;overflow: hidden;background-color: #f1f5f9;}
.post-thumb {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.post-card:hover .post-thumb {transform: scale(1.05);}
.post-card-body {padding: 1.5rem;display: flex;flex-direction: column;flex-grow: 1;justify-content: space-between;}
.post-card-title {font-size: 1.125rem;font-weight: 700;line-height: 1.4;margin: 0 0 0.75rem 0;}
.post-card-title a {color: var(--text-slate-900, #0f172a);text-decoration: none;transition: color 0.2s;}
.post-card-title a:hover {color: var(--color-brand-purple, #6C3CE9);}
.post-card-excerpt {font-size: 0.875rem;color: var(--text-slate-600, #475569);line-height: 1.5;margin: 0 0 1.25rem 0;}
.post-card-footer {display: flex;align-items: center;justify-content: space-between;font-size: 0.75rem;color: var(--text-slate-400, #94a3b8);padding-top: 0.75rem;border-top: 1px solid #f8fafc;}
.post-read-more {color: var(--color-brand-purple, #6C3CE9);font-weight: 600;text-decoration: none;}
.no-post-notice {text-align: center;padding: 4rem 1rem;background: #ffffff;border-radius: 1rem;color: var(--text-slate-500, #64748b);}
.pagination-wrapper {margin-top: 3rem;display: flex;justify-content: center;}
@media (max-width: 768px) {.hero-btn-group {display: flex;flex-direction: column;align-items: center !important;width: 100% !important;gap: 1rem !important;}.hero-btn-group .btn-primary-white, .hero-btn-group .btn-secondary-glass {width: 85% !important;max-width: 300px !important;padding: 0.75rem 1rem !important;margin: 0 auto !important;box-sizing: border-box !important;justify-content: center !important;}.hero-btn-group .btn-primary-white .btn-badge-tag {position: relative !important;top: auto !important;right: auto !important;font-size: 0.7rem !important;padding: 0.15rem 0.4rem !important;}}