/* ============================================================
   ASANGAME - Modern Enterprise Website
   Light/Dark Mode | 3 Languages | Responsive | Accessible
   ============================================================ */

/* ===== CSS Variables ===== */
:root {
    --c-bg: #ffffff;
    --c-bg-alt: #f5f5f7;
    --c-bg-card: #ffffff;
    --c-bg-nav: rgba(255,255,255,0.82);
    --c-text: #1d1d1f;
    --c-text-secondary: #515154;
    --c-text-tertiary: #6e6e73;
    --c-border: #d2d2d7;
    --c-border-light: #e8e8ed;
    --c-primary: #0066cc;
    --c-primary-hover: #0055aa;
    --c-primary-light: rgba(0,102,204,0.08);
    --c-primary-glow: rgba(0,102,204,0.2);
    --c-gradient-1: #0066cc;
    --c-gradient-2: #3399ff;
    --c-success: #34c759;
    --c-error: #ff3b30;
    --c-warning: #ff9500;
    --c-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --c-shadow: 0 2px 16px rgba(0,0,0,0.08);
    --c-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --c-overlay: rgba(0,0,0,0.65);
    --c-glass: rgba(255,255,255,0.65);
    --font: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
    --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
    --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.5rem; --fs-5xl: 3.5rem;
    --lh: 1.6; --lh-tight: 1.25;
    --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem;
    --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 5rem;
    --max-w: 1200px; --header-h: 64px;
    --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px;
    --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1);
    --dur-fast: .15s; --dur: .3s; --dur-slow: .5s;
}
body.dark {
    --c-bg: #0a0a0a; --c-bg-alt: #111; --c-bg-card: #1c1c1e; --c-bg-nav: rgba(10,10,10,.85);
    --c-text: #f5f5f7; --c-text-secondary: #aeaeb2; --c-text-tertiary: #8e8e93;
    --c-border: #38383d; --c-border-light: #262628;
    --c-primary: #3399ff; --c-primary-hover: #5ab0ff; --c-primary-light: rgba(51,153,255,.12); --c-primary-glow: rgba(51,153,255,.25);
    --c-gradient-1: #3399ff; --c-gradient-2: #66bbff;
    --c-shadow-sm: 0 1px 4px rgba(0,0,0,.3); --c-shadow: 0 2px 16px rgba(0,0,0,.4); --c-shadow-lg: 0 8px 40px rgba(0,0,0,.5);
    --c-overlay: rgba(0,0,0,.9); --c-glass: rgba(28,28,30,.7);
}

/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h)}
body{font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh);color:var(--c-text);background:var(--c-bg);transition:background var(--dur),color var(--dur);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none;transition:color var(--dur-fast)}
a:hover{color:var(--c-primary-hover)}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
::selection{background:var(--c-primary);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:focus{position:static;width:auto;height:auto;clip:auto;margin:0;overflow:visible}

/* ===== Focus & Skip Link ===== */
:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.skip-link{position:absolute;top:-100px;left:var(--space-md);z-index:99999;background:var(--c-primary);color:#fff;padding:12px 20px;border-radius:var(--radius-sm);font-weight:600;transition:top var(--dur-fast)}
.skip-link:focus{top:var(--space-md)}

/* ===== Container ===== */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-lg)}
@media(max-width:768px){.container{padding:0 var(--space-md)}}

/* ===== Header & Navigation ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--c-bg-nav);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:all var(--dur);height:var(--header-h)}
.header.scrolled{border-bottom-color:var(--c-border-light);box-shadow:var(--c-shadow-sm)}
.navigation{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo a{font-size:var(--fs-2xl);font-weight:800;color:var(--c-text);letter-spacing:-1px;transition:color var(--dur-fast)}
.logo a:hover{color:var(--c-primary)}
.nav-menu{display:flex;gap:var(--space-lg)}.nav-link{font-size:var(--fs-sm);font-weight:500;color:var(--c-text-secondary);position:relative;padding:6px 0;transition:color var(--dur-fast)}.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2.5px;background:var(--c-primary);border-radius:2px;transition:width var(--dur) var(--ease)}.nav-link:hover,.nav-link.active{color:var(--c-text)}.nav-link:hover::after,.nav-link.active::after{width:100%}.nav-actions{display:flex;align-items:center;gap:var(--space-sm)}

.lang-switch{display:flex;background:var(--c-bg-alt);border-radius:var(--radius-full);padding:3px;border:1px solid var(--c-border-light)}
.lang-btn{padding:5px 12px;font-size:var(--fs-xs);font-weight:700;border-radius:var(--radius-full);color:var(--c-text-secondary);transition:all var(--dur-fast)}.lang-btn.active{background:var(--c-primary);color:#fff;box-shadow:0 2px 8px var(--c-primary-glow)}.lang-btn:hover:not(.active){color:var(--c-text)}

.theme-toggle{width:38px;height:38px;border-radius:50%;background:var(--c-bg-alt);border:1px solid var(--c-border-light);display:flex;align-items:center;justify-content:center;color:var(--c-text-secondary);transition:all var(--dur-fast);flex-shrink:0}.theme-toggle:hover{color:var(--c-primary);border-color:var(--c-primary);background:var(--c-primary-light)}.theme-toggle:active{transform:scale(.92)}body.dark .theme-toggle .icon-sun{display:block}body.dark .theme-toggle .icon-moon{display:none}body:not(.dark) .theme-toggle .icon-sun{display:none}body:not(.dark) .theme-toggle .icon-moon{display:block}

/* Mobile */
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:var(--radius-sm)}.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--c-text);border-radius:1px;transition:all var(--dur) var(--ease)}.mobile-menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-btn.active span:nth-child(2){opacity:0;transform:scaleX(0)}.mobile-menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:768px){.mobile-menu-btn{display:flex}.nav-menu{position:fixed;top:var(--header-h);left:0;right:0;background:var(--c-bg-nav);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;align-items:center;padding:var(--space-2xl);gap:var(--space-xl);transform:translateY(-120%);opacity:0;transition:all var(--dur) var(--ease-out);border-bottom:1px solid var(--c-border-light)}.nav-menu.open{transform:translateY(0);opacity:1}}

/* ===== Hero ===== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:calc(var(--header-h) + var(--space-3xl)) 0 var(--space-3xl)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,var(--c-primary-light),transparent),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(52,199,89,.06),transparent);opacity:.5;pointer-events:none}
body.dark .hero-bg{background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(51,153,255,.1),transparent),radial-gradient(ellipse 60% 50% at 20% 80%,rgba(102,187,255,.04),transparent)}
.hero-content{position:relative;z-index:1;max-width:780px}
.hero-title{font-size:clamp(2.5rem,6vw,var(--fs-5xl));font-weight:900;letter-spacing:-2.5px;background:linear-gradient(135deg,var(--c-gradient-1),var(--c-gradient-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-md);animation:fadeInUp .8s var(--ease) forwards}
.hero-subtitle{font-size:var(--fs-2xl);color:var(--c-text-secondary);margin-bottom:var(--space-sm);animation:fadeInUp .8s .15s var(--ease) forwards;opacity:0}
.hero-desc{font-size:var(--fs-lg);color:var(--c-text-tertiary);margin-bottom:var(--space-2xl);animation:fadeInUp .8s .3s var(--ease) forwards;opacity:0}
.hero-actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;animation:fadeInUp .8s .45s var(--ease) forwards;opacity:0}
.hero-scroll{position:absolute;bottom:var(--space-xl);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);color:var(--c-text-tertiary);font-size:var(--fs-xs);animation:bounce 2s ease-in-out infinite;opacity:.5;pointer-events:none}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:15px 32px;font-size:var(--fs-base);font-weight:600;border-radius:var(--radius-full);transition:all var(--dur) var(--ease);position:relative;overflow:hidden;letter-spacing:.3px}
.btn-primary{background:var(--c-primary);color:#fff}.btn-primary:hover{background:var(--c-primary-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px var(--c-primary-glow)}.btn-primary:active{transform:translateY(0)}
.btn-outline{border:2px solid var(--c-primary);color:var(--c-primary)}.btn-outline:hover{background:var(--c-primary);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px var(--c-primary-glow)}.btn-outline:active{transform:translateY(0)}

/* ===== Sections ===== */
section{padding:var(--space-3xl) 0;position:relative}
.section-header{text-align:center;margin-bottom:var(--space-2xl)}
.section-title{font-size:clamp(1.8rem,4vw,var(--fs-4xl));font-weight:800;letter-spacing:-1px;margin-bottom:var(--space-sm)}
.section-subtitle{font-size:var(--fs-lg);color:var(--c-text-secondary);font-weight:400}

/* ===== About ===== */
.about{background:var(--c-bg-alt)}.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--space-xl)}.about-card{background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--dur-slow) var(--ease);box-shadow:var(--c-shadow-sm)}.about-card:hover{transform:translateY(-6px);box-shadow:var(--c-shadow-lg);border-color:var(--c-primary)}.about-card-img{width:100%;height:240px;overflow:hidden;background:var(--c-bg-alt)}.about-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}.about-card:hover .about-card-img img{transform:scale(1.05)}.about-card-text{padding:var(--space-xl)}.about-card-text h3{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--space-sm)}.about-card-text p{color:var(--c-text-secondary);line-height:1.7}
@media(max-width:768px){.about-grid{grid-template-columns:1fr}.about-card-img{height:200px}}

/* ===== Services ===== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-xl);margin-bottom:var(--space-2xl)}.service-card{text-align:center;padding:var(--space-2xl) var(--space-xl);background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);transition:all var(--dur-slow) var(--ease);box-shadow:var(--c-shadow-sm)}.service-card:hover{transform:translateY(-4px);box-shadow:var(--c-shadow-lg);border-color:var(--c-primary)}.service-icon{width:76px;height:76px;margin:0 auto var(--space-lg);background:var(--c-primary-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--c-primary);transition:all var(--dur) var(--ease)}.service-card:hover .service-icon{background:var(--c-primary);color:#fff;transform:scale(1.08);box-shadow:0 8px 24px var(--c-primary-glow)}.service-card h3{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--space-sm)}.service-card p{color:var(--c-text-secondary);font-size:var(--fs-sm);line-height:1.7}.services-desc{max-width:720px;margin:0 auto;text-align:center;color:var(--c-text-secondary);font-size:var(--fs-lg);padding:var(--space-xl) var(--space-2xl);background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);line-height:1.8}
@media(max-width:768px){.services-grid{grid-template-columns:1fr}}

/* ===== Products & Gallery ===== */
.products{background:var(--c-bg-alt)}.product-category{margin-bottom:var(--space-2xl)}.product-category:last-child{margin-bottom:0}.category-title{font-size:var(--fs-2xl);font-weight:700;margin-bottom:var(--space-xl);padding-left:var(--space-md);border-left:4px solid var(--c-primary)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md)}.gallery-item{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--c-bg-card);border:1px solid var(--c-border-light);transition:all var(--dur-slow) var(--ease)}.gallery-item:hover{transform:translateY(-4px);box-shadow:var(--c-shadow-lg);border-color:var(--c-primary)}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.gallery-item:hover img{transform:scale(1.06)}.gallery-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%);opacity:0;transition:opacity var(--dur);z-index:1;pointer-events:none}.gallery-item:hover::after{opacity:1}.gallery-item.loading{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--c-bg-alt) 25%,var(--c-border-light) 50%,var(--c-bg-alt) 75%);background-size:200% 100%}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.gallery-hover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;opacity:0;transition:all var(--dur) var(--ease);pointer-events:none}.gallery-item:hover .gallery-hover{opacity:1;transform:translate(-50%,-50%) scale(1.05)}.gallery-hover svg{width:40px;height:40px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transition:transform var(--dur)}.gallery-item:hover .gallery-hover svg{transform:scale(1.1)}.gallery-hover span{font-size:var(--fs-xs);font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.5px}
@media(max-width:768px){.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-sm)}}
@media(max-width:480px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ===== Lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:5000;background:var(--c-overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--dur) var(--ease)}.lightbox.open{opacity:1;visibility:visible}.lightbox-content{max-width:92vw;max-height:88vh;display:flex;align-items:center;justify-content:center;animation:lbZoom .3s var(--ease)}@keyframes lbZoom{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.lightbox-content img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:var(--radius-sm);box-shadow:0 24px 80px rgba(0,0,0,.6)}.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;z-index:5001;color:#fff;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);transition:all var(--dur-fast);font-size:1.8rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25);transform:scale(1.1)}.lightbox-close:active,.lightbox-prev:active,.lightbox-next:active{transform:scale(.95)}.lightbox-close{top:24px;right:24px}.lightbox-prev{left:24px;top:50%;transform:translateY(-50%)}.lightbox-prev:hover{transform:translateY(-50%) scale(1.1)}.lightbox-next{right:24px;top:50%;transform:translateY(-50%)}.lightbox-next:hover{transform:translateY(-50%) scale(1.1)}.lightbox-info{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:#fff;font-size:var(--fs-sm);font-weight:600;background:rgba(0,0,0,.6);padding:8px 20px;border-radius:var(--radius-full);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media(max-width:768px){.lightbox-close,.lightbox-prev,.lightbox-next{width:44px;height:44px;font-size:1.5rem}.lightbox-close{top:16px;right:16px}.lightbox-prev{left:12px}.lightbox-next{right:12px}}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl)}.contact-card{text-align:center;padding:var(--space-2xl) var(--space-xl);background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);transition:all var(--dur-slow) var(--ease);box-shadow:var(--c-shadow-sm)}.contact-card:hover{transform:translateY(-4px);box-shadow:var(--c-shadow-lg);border-color:var(--c-primary)}.contact-icon{width:64px;height:64px;margin:0 auto var(--space-lg);background:var(--c-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-primary);transition:all var(--dur) var(--ease)}.contact-card:hover .contact-icon{background:var(--c-primary);color:#fff;box-shadow:0 8px 24px var(--c-primary-glow)}.contact-card h3{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--space-md)}.contact-card p{color:var(--c-text-secondary);line-height:1.8;font-size:var(--fs-sm)}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}

/* Contact Form */
.contact-form-wrapper{max-width:680px;margin:var(--space-3xl) auto 0}.contact-form{background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--c-shadow-sm)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}.form-actions-row{grid-template-columns:1fr;justify-items:center;margin-top:var(--space-xl);margin-bottom:0}.form-group{display:flex;flex-direction:column}.form-group input,.form-group textarea{width:100%;padding:15px 20px;font-size:var(--fs-base);font-family:var(--font);color:var(--c-text);background:var(--c-bg-alt);border:2px solid var(--c-border-light);border-radius:var(--radius-sm);transition:all var(--dur-fast);outline:none}.form-group input:focus,.form-group textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-light)}.form-group textarea{resize:vertical;min-height:120px}.form-feedback{text-align:center;margin-top:var(--space-md);font-size:var(--fs-sm);font-weight:600;min-height:24px;transition:all var(--dur-fast)}.form-feedback.success{color:var(--c-success)}.form-feedback.error{color:var(--c-error)}
@media(max-width:768px){.form-row{grid-template-columns:1fr}.contact-form{padding:var(--space-xl)}}

/* ===== Footer ===== */
.footer{background:var(--c-bg-alt);border-top:1px solid var(--c-border-light);padding:var(--space-2xl) 0}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-xl)}.footer-col h4{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--space-sm)}.footer-col p{color:var(--c-text-secondary);font-size:var(--fs-sm);line-height:1.7}.footer-social-col{text-align:center}.footer-social-label{margin-bottom:var(--space-sm);color:var(--c-text-secondary);font-size:var(--fs-sm)}.footer-social{display:flex;gap:var(--space-sm);justify-content:center}.social-icon{width:42px;height:42px;border-radius:50%;background:var(--c-bg);border:1px solid var(--c-border-light);display:flex;align-items:center;justify-content:center;color:var(--c-text-secondary);transition:all var(--dur-fast)}.social-icon:hover{color:var(--c-primary);border-color:var(--c-primary);transform:translateY(-3px);box-shadow:var(--c-shadow)}
@media(max-width:768px){.footer-content{flex-direction:column;text-align:center;gap:var(--space-2xl)}}

/* ===== Animations ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.visible{opacity:1;transform:translateY(0)}

/* ===== Skeleton Loader ===== */
.skeleton-loader{position:fixed;inset:0;z-index:99999;background:var(--c-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3xl);transition:opacity .5s ease,visibility .5s ease}.skeleton-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}.skeleton-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.skeleton-line{height:16px;background:var(--c-border-light);border-radius:var(--radius-sm);animation:skeletonPulse 1.8s ease-in-out infinite}.skeleton-line--title{width:280px;height:44px;border-radius:var(--radius-md)}.skeleton-line--sub{width:200px}.skeleton-line--btn{width:150px;height:48px;border-radius:var(--radius-full)}.skeleton-cards{display:flex;gap:var(--space-xl);flex-wrap:wrap;justify-content:center}.skeleton-card{width:280px;height:200px;background:var(--c-border-light);border-radius:var(--radius-lg);animation:skeletonPulse 1.8s ease-in-out infinite}.skeleton-card:nth-child(2){animation-delay:.2s}.skeleton-card:nth-child(3){animation-delay:.4s}@keyframes skeletonPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ===== Back to Top ===== */
.back-to-top{position:fixed;bottom:28px;right:28px;z-index:9998;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--c-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--c-border-light);border-radius:var(--radius-xl);padding:12px 16px;color:var(--c-text-secondary);box-shadow:var(--c-shadow);opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--dur) var(--ease);cursor:pointer;font-size:var(--fs-xs)}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{color:var(--c-primary);border-color:var(--c-primary);transform:translateY(-4px);box-shadow:var(--c-shadow-lg)}.back-to-top:active{transform:translateY(0) scale(.96)}.back-to-top-label{font-weight:700}
@media(max-width:480px){.back-to-top-label{display:none}.back-to-top{border-radius:50%;padding:12px;bottom:20px;right:20px}}

/* ===== Filter Bar ===== */
.filter-bar{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-2xl);flex-wrap:wrap}.filter-btn{padding:10px 28px;font-size:var(--fs-sm);font-weight:700;border-radius:var(--radius-full);color:var(--c-text-secondary);background:var(--c-bg-card);border:2px solid var(--c-border-light);transition:all var(--dur-fast)}.filter-btn.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary);box-shadow:0 4px 12px var(--c-primary-glow)}.filter-btn:hover:not(.active){border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-light)}
@media(max-width:480px){.filter-btn{padding:8px 20px;font-size:var(--fs-xs)}}

/* ===== Page Transition ===== */
body.page-out{opacity:.5;transition:opacity .2s ease}body.page-in{animation:pageIn .5s var(--ease) forwards}@keyframes pageIn{from{opacity:.5}to{opacity:1}}

/* ===== Responsive ===== */
@media(max-width:1024px){:root{--fs-5xl:2.8rem}}
@media(max-width:768px){:root{--header-h:56px}section{padding:var(--space-2xl) 0}.hero{min-height:90vh}.hero-actions{flex-direction:column;align-items:center}.btn{width:100%;max-width:300px}.footer-content{flex-direction:column;text-align:center}}
@media(max-width:480px){.hero-title{font-size:2rem}.section-title{font-size:1.6rem}}

/* ===== Accessibility ===== */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* ===== Print ===== */
@media print{.header,.back-to-top,.theme-toggle,.footer-social,.hero-scroll,.skeleton-loader{display:none!important}section{padding:var(--space-lg) 0!important}body{color:#000;background:#fff}}