/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;color:#111827;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
ul{list-style:none}
button{border:none;background:none;cursor:pointer;font:inherit}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}
p{margin:0}

/* ===== Colors ===== */
:root{
  --c-white:#fff;
  --c-bg:#f9fafb;
  --c-gray-50:#f9fafb;
  --c-gray-100:#f3f4f6;
  --c-gray-200:#e5e7eb;
  --c-gray-300:#d1d5db;
  --c-gray-400:#9ca3af;
  --c-gray-500:#6b7280;
  --c-gray-600:#4b5563;
  --c-gray-700:#374151;
  --c-gray-800:#1f2937;
  --c-gray-900:#111827;
  --c-brand-50:#eff6ff;
  --c-brand-200:#bfdbfe;
  --c-brand-500:#3b82f6;
  --c-brand-600:#2563eb;
  --c-brand-700:#1d4ed8;
  --c-green-500:#22c55e;
  --c-cyan-400:#22d3ee;
  --c-cyan-500:#06b6d4;
}

/* ===== Typography ===== */
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-7xl{font-size:4.5rem;line-height:1}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.text-center{text-align:center}
.text-left{text-align:left}
.leading-relaxed{line-height:1.625}
.leading-none{line-height:1}
.tracking-tight{letter-spacing:-0.025em}

/* ===== Layout ===== */
.container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.container{padding-left:2rem;padding-right:2rem}}
.max-w-2xl{max-width:42rem;margin-left:auto;margin-right:auto}
.max-w-3xl{max-width:48rem;margin-left:auto;margin-right:auto}
.max-w-4xl{max-width:56rem;margin-left:auto;margin-right:auto}
.max-w-xs{max-width:20rem}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}
@media(min-width:768px){.md\:flex{display:flex}.md\:block{display:block}}
@media(min-width:640px){.sm\:block{display:block}.sm\:inline-flex{display:inline-flex}}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.md\:grid-cols-12{grid-template-columns:repeat(12,1fr)}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:flex-row{flex-direction:row}}
@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}}
.space-y-2 > * + *{margin-top:0.5rem}
.space-y-3 > * + *{margin-top:0.75rem}
.space-y-4 > * + *{margin-top:1rem}
.space-y-6 > * + *{margin-top:1.5rem}

/* ===== Spacing ===== */
.p-2{padding:0.5rem}.p-2\.5{padding:0.625rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-1{padding-top:0.25rem}
.pt-8{padding-top:2rem}
.pt-12{padding-top:3rem}
.pt-16{padding-top:4rem}
.pb-4{padding-bottom:1rem}
.pb-16{padding-bottom:4rem}
@media(min-width:768px){.md\:pt-12{padding-top:3rem}.md\:pt-20{padding-top:5rem}.md\:pb-28{padding-bottom:7rem}.md\:pb-32{padding-bottom:8rem}}

/* ===== Margins ===== */
.mt-0\.5{margin-top:0.125rem}
.mt-2{margin-top:0.5rem}
.mt-4{margin-top:1rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-16{margin-top:4rem}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mr-4{margin-right:1rem}

/* ===== Colors ===== */
.text-white{color:var(--c-white)}
.text-gray-300{color:var(--c-gray-300)}
.text-gray-400{color:var(--c-gray-400)}
.text-gray-500{color:var(--c-gray-500)}
.text-gray-600{color:var(--c-gray-600)}
.text-gray-700{color:var(--c-gray-700)}
.text-gray-900{color:var(--c-gray-900)}
.text-green-400{color:#4ade80}
.text-green-500{color:var(--c-green-500)}
.text-brand-600{color:var(--c-brand-600)}
.bg-white{background:var(--c-white)}
.bg-gray-50{background:var(--c-gray-50)}
.bg-gray-100{background:var(--c-gray-100)}
.bg-gray-900{background:var(--c-gray-900)}
.bg-brand-50{background:var(--c-brand-50)}
.bg-white\/10{background:rgba(255,255,255,0.1)}

/* ===== Borders ===== */
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.border{border:1px solid var(--c-gray-200)}
.border-t{border-top:1px solid var(--c-gray-100)}
.border-b{border-bottom:1px solid var(--c-gray-100)}
.border-white\/20{border:1px solid rgba(255,255,255,0.2)}

/* ===== Effects ===== */
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1)}
.transition-all{transition:all 0.2s ease}
.transition-colors{transition:color 0.2s ease,background-color 0.2s ease}
.transition-transform{transition:transform 0.2s ease}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}

/* ===== Sizing ===== */
.w-3{width:0.75rem}.h-3{height:0.75rem}
.w-4{width:1rem}.h-4{height:1rem}
.w-5{width:1.25rem}.h-5{height:1.25rem}
.w-6{width:1.5rem}.h-6{height:1.5rem}
.w-7{width:1.75rem}.h-7{height:1.75rem}
.w-8{width:2rem}.h-8{height:2rem}
.w-10{width:2.5rem}.h-10{height:2.5rem}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}

/* ===== Positioning ===== */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.z-10{z-index:10}
.z-50{z-index:50}
.pointer-events-none{pointer-events:none}

/* ===== Interactivity ===== */
.hover\:bg-gray-50:hover{background:var(--c-gray-50)}
.hover\:bg-gray-100:hover{background:var(--c-gray-100)}
.hover\:bg-gray-800:hover{background:var(--c-gray-800)}
.hover\:bg-white\/20:hover{background:rgba(255,255,255,0.2)}
.hover\:text-gray-900:hover{color:var(--c-gray-900)}
.hover\:border-gray-300:hover{border-color:var(--c-gray-300)}
.hover\:border-brand-200:hover{border-color:var(--c-brand-200)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1)}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1)}

/* ===== Header ===== */
.glass-nav{background:rgba(255,255,255,0.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(243,244,246,0.5)}
.nav-h{height:4rem}
.nav-product{position:relative}
.nav-product::after{content:"";position:absolute;left:0;top:100%;width:100%;height:0.75rem}
.nav-trigger{display:inline-flex;align-items:center;gap:0.375rem}
.nav-chevron{width:0.875rem;height:0.875rem;transition:transform 0.2s ease}
.product-menu{position:absolute;top:calc(100% + 0.75rem);left:0;width:40rem;padding:0;background:rgba(255,255,255,0.98);border:1px solid rgba(229,231,235,0.9);border-radius:1.25rem;box-shadow:0 18px 45px rgba(15,23,42,0.12);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s ease;pointer-events:none;overflow:hidden}
.nav-product:hover .product-menu,.nav-product:focus-within .product-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-product:hover .nav-chevron,.nav-product:focus-within .nav-chevron{transform:rotate(180deg)}
.product-menu-grid{display:grid;grid-template-columns:1fr 12rem}
.product-menu-panel{background:#fff;overflow:hidden}
.product-menu-panel + .product-menu-panel{border-left:1px solid rgba(229,231,235,0.9)}
.product-menu-head{padding:0.85rem 1.25rem 0.5rem}
.product-menu-title{display:block;font-size:1rem;line-height:1.4rem;font-weight:600;color:var(--c-gray-900)}
.product-menu-note{font-size:0.8rem;line-height:1.2rem;font-weight:600;color:var(--c-gray-500);letter-spacing:0.04em}
.product-menu-list{display:grid;gap:0;padding:0.15rem 0 0.45rem;min-width:0}
.product-card{display:flex;gap:0.75rem;padding:0.72rem 1.1rem;transition:background-color 0.2s ease;white-space:normal}
.product-card:hover{background:#f8fbff}
.product-icon{width:2.75rem;height:2.75rem;border-radius:0.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.product-icon svg{width:1.45rem;height:1.45rem;display:block}
.product-icon-cloud,.product-icon-enterprise,.product-icon-litefuse,.product-icon-aliyun{background:linear-gradient(180deg,#f7f8fa,#eef1f5);color:#1f2937;border:1px solid rgba(17,24,39,0.06)}
.product-icon-litefuse::before,.product-icon-litefuse::after{content:"";position:absolute;top:0.65rem;width:0.18rem;height:1.45rem;background:#111827;border-radius:999px;opacity:0.96}
.product-icon-litefuse::before{left:1.05rem;transform:rotate(18deg)}
.product-icon-litefuse::after{right:1.05rem;transform:rotate(-18deg)}
.product-copy{display:flex;flex-direction:column;gap:0.12rem;min-width:0;flex:1}
.product-card-title{display:block;font-size:0.95rem;font-weight:600;color:var(--c-gray-900)}
.product-card-desc{display:block;font-size:0.78rem;line-height:1.35;color:var(--c-gray-500);overflow-wrap:break-word;word-break:break-all}
.product-side-list{display:grid;gap:0;padding:0.2rem 0 0.4rem}
.product-side-link{display:flex;align-items:center;justify-content:flex-start;gap:0.5rem;padding:0.52rem 1.25rem;transition:all 0.15s ease;border-left:2px solid transparent;margin-left:0;border-radius:0 6px 6px 0;cursor:pointer}
.product-side-link:hover{background:#eff6ff;color:#2563eb;border-left-color:#2563eb}.product-side-link::after{content:"→";font-size:0.75rem;color:#9ca3af;margin-left:0.25rem;transition:color 0.2s}.product-side-link:hover::after{color:#2563eb}
.product-side-copy{display:flex;flex-direction:column}
.product-side-title{font-size:0.82rem;line-height:1.3rem;font-weight:500;color:var(--c-gray-700)}
.product-side-arrow{width:0.9rem;height:0.9rem;flex-shrink:0;color:#9ca3af}

/* ===== Nav Submenu Dropdown (Docs & Blog) ===== */
.nav-sub-group{position:relative}
.nav-sub-group::after{content:"";position:absolute;left:0;top:100%;width:100%;height:0.75rem}
.nav-sub-group>a{display:inline-flex;align-items:center;gap:0.375rem;white-space:nowrap}
/* ===== Announcement Bar ===== */
.announce-bar{width:100%;background:linear-gradient(90deg,#2563eb,#4f46e5);color:#fff;font-size:.875rem;text-align:center;padding:.5rem 1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-shrink:0}
.announce-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.announce-bar .announce-close{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer;transition:background .15s}
.announce-bar .announce-close:hover{background:rgba(255,255,255,.35)}
.announce-bar .announce-arrow{width:1.25rem;height:1.25rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer;transition:background .15s;flex-shrink:0}
.announce-bar .announce-arrow:hover{background:rgba(255,255,255,.25)}

header nav a{white-space:nowrap;flex-shrink:0}
header nav .nav-trigger{white-space:nowrap}
.nav-sub-group .nav-chevron{width:0.875rem;height:0.875rem;transition:transform 0.2s ease}
.nav-sub-group:hover .nav-chevron{transform:rotate(180deg)}
.navSubmenu{position:absolute;top:calc(100% + 0.75rem);left:50%;transform:translateX(-50%) translateY(6px);min-width:13rem;padding:0.35rem;background:rgba(255,255,255,0.98);border:1px solid rgba(229,231,235,0.9);border-radius:0.75rem;box-shadow:0 12px 32px rgba(15,23,42,0.1);opacity:0;visibility:hidden;transition:opacity 0.15s ease,transform 0.15s ease,visibility 0.15s ease;pointer-events:none;z-index:60}
.nav-sub-group:hover .navSubmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.navSubmenu a{display:block;padding:0.45rem 0.85rem;font-size:0.875rem;color:#4b5563;border-radius:0.5rem;transition:all 0.12s ease}
.navSubmenu a:hover{background:#f3f4f6;color:#111827}
.navSubmenu-title{padding:0.35rem 0.85rem;font-size:0.75rem;font-weight:600;color:#9ca3af;letter-spacing:0.02em}
.navSubmenu-divider{height:1px;background:#f3f4f6;margin:0.25rem 0.5rem}

/* Two-column nav submenu */
.navSubmenu-two-col{display:flex;gap:0;min-width:28rem;padding:0.5rem}
.navSubmenu-two-col .navSubmenu-col{flex:1;min-width:0}
.navSubmenu-two-col .navSubmenu-col+.navSubmenu-col{border-left:1px solid #f3f4f6;padding-left:0.5rem;margin-left:0.5rem}

/* ===== Grid Pattern ===== */
.bg-grid-pattern{background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);background-size:60px 60px}

/* ===== Hero glow orbs ===== */
.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.15;pointer-events:none}
.hero-glow-1{width:600px;height:600px;background:var(--c-brand-500);top:-10rem;right:-10rem}
.hero-glow-2{width:400px;height:400px;background:var(--c-cyan-400);bottom:-5rem;left:-5rem}

/* ===== Gradient Icon Backgrounds ===== */
.grad-blue-cyan{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.grad-emerald-teal{background:linear-gradient(135deg,#10b981,#14b8a6)}
.grad-purple-violet{background:linear-gradient(135deg,#a855f7,#8b5cf6)}
.grad-orange-amber{background:linear-gradient(135deg,#f97316,#f59e0b)}
.grad-green-lime{background:linear-gradient(135deg,#22c55e,#84cc16)}
.grad-rose-pink{background:linear-gradient(135deg,#f43f5e,#ec4899)}
.grad-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.grad-sky{background:linear-gradient(135deg,#2563eb,#0ea5e9)}
.grad-purple-dark{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.grad-emerald-green{background:linear-gradient(135deg,#10b981,#16a34a)}
.grad-amber-orange{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.grad-cta{background:linear-gradient(135deg,#111827,#1f2937,#111827)}

/* ===== Gradient Text ===== */
.text-gradient{background:linear-gradient(135deg,#2563eb,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== Logo Mark ===== */
.logo-mark{background:linear-gradient(135deg,#2563eb,#0ea5e9);border-radius:0.5rem}

/* ===== Card Hover ===== */
.card-hover{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.card-hover:hover{transform:translateY(-4px)}

/* ===== Animations ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.anim-in{animation:fadeInUp 0.6s ease-out forwards}
.anim-d1{animation-delay:0.1s;opacity:0}
.anim-d2{animation-delay:0.2s;opacity:0}
.anim-d3{animation-delay:0.3s;opacity:0}
.anim-d4{animation-delay:0.4s;opacity:0}
.anim-d5{animation-delay:0.5s;opacity:0}

/* ===== Group Arrow ===== */
.group:hover .group-arrow{transform:translateX(4px)}

/* ===== Font Mono ===== */
.font-mono{font-family:"SF Mono","Fira Code","Consolas","Monaco",monospace}

/* ===== Section Backgrounds ===== */
.section-white{background:var(--c-white)}
.section-gray{background:var(--c-gray-50)}

/* ===== Footer ===== */
.footer-link{color:var(--c-gray-500);transition:color 0.2s}
.footer-link:hover{color:var(--c-gray-900)}

/* ===== Brand gradient border ===== */
@media(min-width:768px){
  .hover-brand:hover{border-color:var(--c-brand-200)}
}

/* ===== Responsive Text ===== */
@media(min-width:640px){
  .sm\:text-6xl{font-size:3.75rem;line-height:1}
}
@media(min-width:768px){
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-7xl{font-size:4.5rem;line-height:1}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
}
@media(min-width:1024px){
  .lg\:text-8xl{font-size:6rem;line-height:1}
}
@media(min-width:640px){
  .sm\:hidden{display:none}
}

/* ===== Hero Background ===== */
.hero-bg{background:linear-gradient(to bottom,#fff,rgba(239,246,255,0.4),#fff)}

/* ===== Blog Styles ===== */
.blog-hero-bg{background:linear-gradient(to bottom,#fff,rgba(239,246,255,0.3),rgba(239,246,255,0.1),#fff)}
.blog-card{border:1px solid var(--c-gray-200);border-radius:1rem;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:#fff}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.08);border-color:var(--c-brand-200)}
.blog-card-img{width:100%;height:200px;object-fit:cover;display:block}
.blog-card-body{padding:1.5rem}
.blog-card-tag{display:inline-block;padding:0.2rem 0.75rem;font-size:0.75rem;font-weight:500;border-radius:9999px;margin-bottom:0.75rem}
.tag-tech{background:#eff6ff;color:#2563eb}
.tag-practice{background:#ecfdf5;color:#059669}
.tag-product{background:#fef3c7;color:#d97706}
.tag-community{background:#f3e8ff;color:#7c3aed}
.blog-card-title{font-size:1.15rem;font-weight:600;color:var(--c-gray-900);line-height:1.4;margin-bottom:0.5rem}
.blog-card-title:hover{color:var(--c-brand-600)}
.blog-card-desc{font-size:0.875rem;color:var(--c-gray-500);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{display:flex;align-items:center;gap:0.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--c-gray-100)}
.blog-card-author{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--c-gray-200);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:var(--c-gray-500)}
.blog-card-date{font-size:0.75rem;color:var(--c-gray-400)}
.blog-card-read{font-size:0.75rem;color:var(--c-gray-400);margin-left:auto}
/* Featured post */
.featured-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--c-gray-200);border-radius:1.25rem;overflow:hidden;transition:all 0.3s ease;background:#fff}
.featured-card:hover{box-shadow:0 16px 48px rgba(0,0,0,0.08);border-color:var(--c-brand-200)}
.featured-card-img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.featured-card-body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
@media(max-width:767px){.featured-card{grid-template-columns:1fr}.featured-card-img{min-height:200px}}
/* Category filters */
.cat-filter{display:inline-flex;align-items:center;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;border-radius:9999px;border:1px solid var(--c-gray-200);cursor:pointer;transition:all 0.2s ease;color:var(--c-gray-600);background:#fff}
.cat-filter:hover{border-color:var(--c-brand-200);color:var(--c-brand-600)}
.cat-filter.active{background:var(--c-gray-900);color:#fff;border-color:var(--c-gray-900)}
/* Pagination */
.page-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;border:1px solid var(--c-gray-200);font-size:0.875rem;font-weight:500;color:var(--c-gray-600);transition:all 0.2s ease;background:#fff;cursor:pointer}
.page-btn:hover{border-color:var(--c-brand-200);color:var(--c-brand-600)}
.page-btn.active{background:var(--c-gray-900);color:#fff;border-color:var(--c-gray-900)}

/* Logo Carousel */
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 3rem;align-items:center;padding:0.5rem 0}
.logo-grid img{height:30px;width:auto;max-width:130px;object-fit:contain;opacity:0.45;transition:opacity 0.2s;flex-shrink:0}
.logo-grid img:hover{opacity:0.8}

/* User Stories Carousel */
.story-carousel-wrap{position:relative;max-width:1280px;margin:0 auto}
.logo-grid img:hover{opacity:0.8}

/* User Stories Carousel */
.story-section-title{font-size:2rem;line-height:1.2;font-weight:700;letter-spacing:-0.02em;color:#111827;margin:0}
@media(min-width:1024px){.story-section-title{font-size:2.5rem;line-height:1.4}}
.story-carousel-wrap{position:relative;max-width:1280px;margin:0 auto}
.story-carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px}
.story-carousel::-webkit-scrollbar{display:none}
.story-card{flex:0 0 380px;scroll-snap-align:start;display:flex;flex-direction:column;padding:1.75rem;background:#fff;border-radius:1rem;border:1px solid #e5e7eb;transition:all 0.3s;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.story-card:hover{border-color:#0065FD;box-shadow:0 12px 40px rgba(0,101,253,0.1);transform:translateY(-4px)}
.story-card-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.25rem}
.story-logo{height:28px;width:auto;object-fit:contain;flex-shrink:0}
.story-company-name{font-size:0.9rem;font-weight:600;color:#374151}
.story-card-tag{font-size:1rem;font-weight:700;color:#111827;letter-spacing:0.02em;white-space:nowrap}
.story-card-title{font-size:1.1rem;font-weight:600;color:#111827;line-height:1.5;margin-bottom:1.25rem}
.story-points{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:0.6rem}
.story-points li{font-size:0.85rem;color:#6b7280;line-height:1.6;padding-left:1.15rem;position:relative}
.story-points li::before{content:"•";position:absolute;left:0;color:#0065FD;font-weight:700;font-size:1rem}
.story-cta{font-size:0.9rem;font-weight:600;color:#0065FD;margin-top:auto;padding-top:1rem;border-top:1px solid #f3f4f6}
.story-more-link{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.9rem;font-weight:600;color:#374151;text-decoration:none;transition:color 0.2s}
.story-more-link:hover{color:#0065FD}
.auth-grid{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem 3rem}
.auth-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;position:relative;width:140px;transition:transform 0.2s}
.auth-item:hover{transform:scale(1.05)}
.auth-img{width:100%;height:80px;object-fit:contain}
.auth-color{display:none}
.auth-item:hover .auth-gray{display:none}
.auth-item:hover .auth-color{display:block}
.auth-label{margin-top:0.75rem;font-size:0.875rem;color:#6b7280;text-align:center}
.story-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;color:#374151;box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.story-arrow:hover{background:#0065FD;color:#fff;border-color:#0065FD}
.story-arrow-left{left:-18px}
.story-arrow-right{right:-18px}
@media(max-width:768px){.story-arrow{display:none}}