/* VF555 Website - Optimized CSS */
*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background:#f8f9fa}a{text-decoration:none;color:inherit}.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.header{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:15px 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.1)}.header-content{display:flex;justify-content:space-between;align-items:center;position:relative}.logo img{height:40px;width:auto}.nav{display:flex;gap:20px}.nav a{color:#fff;font-weight:500;transition:color .3s;padding:8px 12px;border-radius:5px}.nav a:hover{color:#ffd700;background:rgba(255,255,255,.1)}.mobile-menu{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px}

/* Floating Buttons */
.floating-buttons{position:fixed;bottom:20px;right:20px;z-index:1001;display:flex;flex-direction:column;gap:10px}.floating-btn{background:linear-gradient(45deg,#ff6b6b,#ee5a24);color:#fff;border:none;padding:12px 20px;border-radius:25px;font-weight:bold;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.3);animation:pulse 2s infinite;transition:transform .3s}.floating-btn:hover{transform:scale(1.05)}.floating-btn.register{background:linear-gradient(45deg,#00d2ff,#3a7bd5)}.floating-btn.login{background:linear-gradient(45deg,#ff9a9e,#fecfef)}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Hero Section */
.hero{background:linear-gradient(rgba(30,60,114,.8),rgba(42,82,152,.8)),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f0f0f0" width="1200" height="600"/><circle fill="%23e0e0e0" cx="200" cy="150" r="50"/><circle fill="%23d0d0d0" cx="800" cy="300" r="80"/><circle fill="%23c0c0c0" cx="1000" cy="100" r="60"/></svg>');color:#fff;padding:80px 0;text-align:center}.hero h1{font-size:48px;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.hero p{font-size:20px;margin-bottom:30px;max-width:600px;margin-left:auto;margin-right:auto}.cta-btn{background:linear-gradient(45deg,#ffd700,#ffed4e);color:#333;padding:15px 30px;border-radius:30px;font-size:18px;font-weight:bold;display:inline-block;transition:all .3s;box-shadow:0 4px 15px rgba(255,215,0,.3)}.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,215,0,.4)}

/* Content Sections */
.section{padding:60px 0}.section-title{font-size:36px;text-align:center;margin-bottom:50px;color:#1e3c72;position:relative}.section-title::after{content:'';width:80px;height:4px;background:linear-gradient(45deg,#ffd700,#ffed4e);position:absolute;bottom:-10px;left:50%;transform:translateX(-50%)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px}.card{background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;border-top:4px solid #1e3c72}.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}.card h3{color:#1e3c72;margin-bottom:15px;font-size:24px}.card p{color:#666;line-height:1.8}.card-icon{font-size:48px;color:#ffd700;margin-bottom:20px}

/* Page Navigation */
.page-nav{background:#f8f9fa;padding:20px 0;border-bottom:1px solid #e9ecef}.page-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:15px}.page-nav li{background:#fff;border-radius:20px;padding:8px 16px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.page-nav a{color:#1e3c72;font-weight:500;font-size:14px}.page-nav a:hover{color:#ffd700}

/* Article Content */
.article{max-width:800px;margin:0 auto;padding:40px 20px}.article h1{color:#1e3c72;margin-bottom:20px;font-size:32px}.article h2{color:#2a5298;margin:30px 0 15px;font-size:24px;border-left:4px solid #ffd700;padding-left:15px}.article h3{color:#1e3c72;margin:25px 0 10px;font-size:20px}.article p{margin-bottom:15px;text-align:justify;color:#444}.article ul,.article ol{margin:15px 0 15px 30px}.article li{margin-bottom:8px;color:#555}.highlight{background:linear-gradient(120deg,#ffd700 0%,#ffd700 100%);background-repeat:no-repeat;background-size:100% 30%;background-position:0 85%;padding:2px 0}

/* Table */
.table-container{overflow-x:auto;margin:20px 0}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.1)}.table th,.table td{padding:12px 15px;text-align:left;border-bottom:1px solid #e9ecef}.table th{background:#1e3c72;color:#fff;font-weight:600}.table tr:hover{background:#f8f9fa}

/* Comments Section */
.comments{background:#f8f9fa;padding:40px 0;margin-top:40px}.comment{background:#fff;padding:20px;margin-bottom:20px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.comment-author{font-weight:bold;color:#1e3c72;margin-bottom:5px}.comment-date{color:#888;font-size:12px;margin-bottom:10px}.comment-text{color:#555;line-height:1.6}.rating{color:#ffd700;margin-bottom:10px}

/* Footer */
.footer{background:#1e3c72;color:#fff;padding:40px 0;text-align:center}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:30px}.footer h4{color:#ffd700;margin-bottom:15px}.footer ul{list-style:none}.footer li{margin-bottom:8px}.footer a{color:#ccc;transition:color .3s}.footer a:hover{color:#ffd700}.footer-bottom{border-top:1px solid #2a5298;padding-top:20px;color:#ccc}

/* Responsive */
@media (max-width:768px){.header-content{flex-direction:row;gap:15px}.nav{display:none;flex-direction:column;gap:10px}.nav a{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px}.mobile-menu{display:block}.hero h1{font-size:32px}.hero p{font-size:16px}.section-title{font-size:28px}.cards{grid-template-columns:1fr}.floating-buttons{bottom:15px;right:15px}.floating-btn{padding:10px 16px;font-size:14px}.article{padding:20px 15px}.article h1{font-size:26px}.article h2{font-size:20px}}

/* Print Styles */
@media print{.header,.footer,.floating-buttons,.page-nav{display:none}.article{max-width:none;padding:0}}

/* Accessibility */
.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}

/* Performance Optimizations */
.lazy{opacity:0;transition:opacity .3s}.lazy.loaded{opacity:1}img{max-width:100%;height:auto;display:block}

/* SEO Enhancements */
.breadcrumb{padding:10px 0;font-size:14px;color:#666}.breadcrumb a{color:#1e3c72}.breadcrumb a:hover{color:#ffd700}.schema-markup{display:none}