:root{--color-primary: #1e293b;--color-primary-dark: #0f172a;--color-primary-light: #334155;--color-secondary: #0369a1;--color-secondary-dark: #0c4a6e;--color-secondary-light: #0ea5e9;--color-text: #1e293b;--color-text-light: #64748b;--color-text-muted: #94a3b8;--color-background: #ffffff;--color-light-gray: #f8fafc;--color-border: #e2e8f0;--color-border-light: #f1f5f9;--color-accent: #f0f9ff;--color-success: #059669;--color-warning: #d97706;--color-info: #0284c7;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);--gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);--gradient-hero: linear-gradient(135deg, rgba(30, 41, 59, .95) 0%, rgba(15, 23, 42, .98) 100%);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 2.5rem;--spacing-3xl: 3rem;--spacing-4xl: 4rem;--spacing-5xl: 5rem;--spacing-6xl: 6rem;--border-radius-none: 0;--border-radius-sm: .25rem;--border-radius-md: .375rem;--border-radius-lg: .5rem;--border-radius-xl: .75rem;--border-radius-2xl: 1rem;--border-radius-3xl: 1.5rem;--border-radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--container-max-width: 1280px;--container-padding: 1.5rem;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,"Source Sans 3",system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-background);text-rendering:optimizeLegibility}h1,h2,h3,h4,h5,h6{font-family:Inter,system-ui,sans-serif;font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-text);margin-bottom:var(--spacing-md);letter-spacing:-.025em}h1{font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);line-height:1.1;margin-bottom:var(--spacing-lg)}h2{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-lg)}h3{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}h4{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}p{margin-bottom:var(--spacing-md);line-height:var(--line-height-relaxed)}a{text-decoration:none;color:var(--color-secondary);transition:var(--transition-normal)}a:hover{color:var(--color-secondary-dark)}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}.container{width:100%;max-width:var(--container-max-width);margin:0 auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}@media (max-width: 640px){.container{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}}.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;border:1px solid transparent;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-normal);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn-primary{background:var(--gradient-secondary);color:#fff;padding:var(--spacing-md) var(--spacing-xl);box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--color-secondary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff}.btn-secondary{background-color:transparent;color:var(--color-primary);padding:var(--spacing-md) var(--spacing-xl);border-color:var(--color-primary)}.btn-secondary:hover{background-color:var(--color-primary);color:#fff;transform:translateY(-2px)}.btn-lg{padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-lg)}.btn-outline{background-color:transparent;color:var(--color-text);border-color:var(--color-border)}.btn-outline:hover{background-color:var(--color-light-gray);border-color:var(--color-text-light)}.top-bar{background-color:var(--color-primary-dark);color:#fff;padding:var(--spacing-sm) 0;font-size:var(--font-size-sm);border-bottom:1px solid rgba(255,255,255,.1)}.top-bar .container{display:flex;justify-content:space-between;align-items:center}.top-contact{display:flex;gap:var(--spacing-xl)}.top-contact span{display:flex;align-items:center;opacity:.9}.top-contact i{margin-right:var(--spacing-sm);opacity:.8}.top-social{display:flex;gap:var(--spacing-md)}.top-social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#fff;opacity:.8;border-radius:var(--border-radius-md);transition:var(--transition-normal)}.top-social a:hover{opacity:1;background-color:#ffffff1a;transform:translateY(-2px)}.main-header{background-color:#fff;padding:var(--spacing-lg) 0;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--color-border-light)}.main-header .container{display:flex;justify-content:space-between;align-items:center}.logo a{display:flex;align-items:center}.logo-img{max-height:40px;width:auto}.main-nav ul{display:flex;gap:var(--spacing-2xl)}.main-nav a{color:var(--color-text);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);padding:var(--spacing-sm) 0;position:relative;transition:var(--transition-normal)}.main-nav a:hover,.main-nav a.active{color:var(--color-secondary)}.main-nav a:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gradient-secondary);transition:var(--transition-normal);border-radius:var(--border-radius-full)}.main-nav a:hover:after,.main-nav a.active:after{width:100%}.header-cta{display:flex;align-items:center}.hero{position:relative;background:var(--color-primary-dark);background-image:var(--gradient-hero),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><rect width="1920" height="1080" fill="%23f8fafc"/><g opacity="0.1"><circle cx="400" cy="200" r="100" fill="%230369a1"/><circle cx="1200" cy="300" r="150" fill="%230ea5e9"/><circle cx="800" cy="600" r="80" fill="%230284c7"/></g></svg>');background-size:cover;background-position:center;color:#fff;padding:var(--spacing-6xl) 0;text-align:center;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(3,105,161,.1) 50%,transparent 70%);animation:shimmer 8s ease-in-out infinite}@keyframes shimmer{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.hero-content{max-width:900px;margin:0 auto;padding:0 var(--spacing-xl);position:relative;z-index:1}.hero h1{color:#fff;font-size:clamp(2.5rem,5vw,4rem);font-weight:var(--font-weight-extrabold);margin-bottom:var(--spacing-lg);text-shadow:0 4px 8px rgba(0,0,0,.3);line-height:1.1}.hero p{font-size:var(--font-size-xl);margin-bottom:var(--spacing-2xl);opacity:.95;line-height:var(--line-height-relaxed);text-shadow:0 2px 4px rgba(0,0,0,.2)}.hero-buttons{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap;margin-top:var(--spacing-2xl)}.hero-buttons .btn-primary{background:#fff;color:var(--color-primary);border:2px solid white;font-weight:var(--font-weight-semibold)}.hero-buttons .btn-primary:hover{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}.hero-buttons .btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}.hero-buttons .btn-secondary:hover{background:#ffffff1a;border-color:#fff}section{padding:var(--spacing-5xl) 0}.section-header{text-align:center;max-width:800px;margin:0 auto var(--spacing-4xl)}.section-header h2{position:relative;padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-lg)}.section-header h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60px;height:4px;background:var(--gradient-secondary);border-radius:var(--border-radius-full)}.section-header p{font-size:var(--font-size-lg);color:var(--color-text-light);line-height:var(--line-height-relaxed)}.card{background:#fff;border-radius:var(--border-radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);transition:var(--transition-normal);height:100%;display:flex;flex-direction:column}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-border)}.card-icon{width:64px;height:64px;background:var(--color-accent);color:var(--color-secondary);border-radius:var(--border-radius-xl);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-lg);font-size:var(--font-size-2xl);transition:var(--transition-normal)}.card:hover .card-icon{background:var(--color-secondary);color:#fff;transform:scale(1.1) rotate(5deg)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xl)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-xl)}@media (max-width: 1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}.featured-commodities{background-color:var(--color-light-gray)}.commodities-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--spacing-xl)}.commodity-card{background:#fff;border-radius:var(--border-radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);transition:var(--transition-normal);height:100%;display:flex;flex-direction:column}.commodity-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--color-secondary-light)}.commodity-card h3{color:var(--color-text);margin-bottom:var(--spacing-md);font-size:var(--font-size-xl)}.commodity-card p{color:var(--color-text-light);margin-bottom:var(--spacing-lg);flex-grow:1;line-height:var(--line-height-relaxed)}.read-more{color:var(--color-secondary);font-weight:var(--font-weight-medium);display:inline-flex;align-items:center;gap:var(--spacing-sm);transition:var(--transition-normal)}.read-more:hover{color:var(--color-secondary-dark);gap:var(--spacing-md)}.read-more i{transition:var(--transition-normal)}.main-footer{background:var(--color-primary-dark);color:#fff;padding:var(--spacing-5xl) 0 var(--spacing-xl)}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-2xl);margin-bottom:var(--spacing-4xl)}.footer-column h3{color:#fff;margin-bottom:var(--spacing-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.footer-links li{margin-bottom:var(--spacing-md)}.footer-links a{color:#fffc;transition:var(--transition-normal)}.footer-links a:hover{color:var(--color-secondary-light);transform:translate(4px)}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--spacing-xl);text-align:center;color:#ffffffb3}@media (max-width: 768px){:root{--container-padding: var(--spacing-md)}.hero{padding:var(--spacing-4xl) 0;min-height:60vh}.hero h1{font-size:var(--font-size-4xl)}.hero p{font-size:var(--font-size-lg)}.hero-buttons{flex-direction:column;align-items:center}.hero-buttons .btn{width:100%;max-width:300px}section{padding:var(--spacing-4xl) 0}.main-nav{display:none}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-muted{color:var(--color-text-muted)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-light{background-color:var(--color-light-gray)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.rounded{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.rounded-xl{border-radius:var(--border-radius-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.animate-fade-in{animation:fadeIn .6s ease-out}.animate-slide-in{animation:slideIn .6s ease-out}.breadcrumbs{background:var(--color-light-gray);padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border)}.breadcrumbs ul{display:flex;align-items:center;gap:var(--spacing-sm);list-style:none;padding:0;margin:0}.breadcrumbs li{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm)}.breadcrumbs li:not(:last-child):after{content:"›";color:var(--color-text-muted);margin-left:var(--spacing-sm)}.breadcrumbs a{color:var(--color-text-light);text-decoration:none;transition:var(--transition-fast)}.breadcrumbs a:hover{color:var(--color-secondary)}.breadcrumbs li:last-child{color:var(--color-text);font-weight:var(--font-weight-medium)}.commodity-hero{background:linear-gradient(135deg,var(--color-light-gray) 0%,rgba(240,245,251,.5) 100%);padding:var(--spacing-5xl) 0;position:relative;overflow:hidden}.commodity-hero:before{content:"";position:absolute;top:-50%;right:-10%;width:50%;height:150%;background:radial-gradient(circle,rgba(3,105,161,.05) 0%,transparent 70%);pointer-events:none}.commodity-hero-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4xl);align-items:center;position:relative;z-index:1}.commodity-info h1{font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);color:var(--color-primary);margin-bottom:var(--spacing-lg);line-height:1.1}.commodity-description{font-size:var(--font-size-xl);color:var(--color-text-light);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-2xl)}.commodity-actions{display:flex;gap:var(--spacing-lg);margin-top:var(--spacing-2xl)}.commodity-actions .btn-primary,.commodity-actions .btn-secondary{padding:var(--spacing-md) var(--spacing-2xl);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);display:inline-flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;border-radius:var(--border-radius-lg);transition:var(--transition-normal)}.commodity-actions .btn-primary{background:var(--color-secondary);color:#fff;border:2px solid var(--color-secondary)}.commodity-actions .btn-primary:hover{background:var(--color-secondary-dark);border-color:var(--color-secondary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.commodity-actions .btn-secondary{background:#fff;color:var(--color-secondary);border:2px solid var(--color-secondary)}.commodity-actions .btn-secondary:hover{background:var(--color-secondary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.commodity-image{position:relative;height:500px;border-radius:var(--border-radius-xl);overflow:hidden;box-shadow:var(--shadow-2xl)}.commodity-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:var(--transition-slow)}.commodity-hero:hover .commodity-image img{transform:scale(1.05)}.content{padding:var(--spacing-5xl) 0}.prose{max-width:800px;margin:0 auto;color:var(--color-text);line-height:var(--line-height-relaxed)}.prose h2{color:var(--color-primary);margin-top:var(--spacing-3xl);margin-bottom:var(--spacing-xl);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}.prose h3{color:var(--color-primary);margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-lg);font-size:var(--font-size-xl);font-weight:var(--font-weight-medium)}.prose p{margin-bottom:var(--spacing-lg)}.prose ul,.prose ol{margin-bottom:var(--spacing-lg);padding-left:var(--spacing-xl)}.prose li{margin-bottom:var(--spacing-sm)}.prose a{color:var(--color-secondary);text-decoration:underline;transition:var(--transition-fast)}.prose a:hover{color:var(--color-secondary-dark)}@media (max-width: 1024px){.commodity-hero-content{grid-template-columns:1fr;gap:var(--spacing-2xl)}.commodity-image{height:400px}}@media (max-width: 768px){.commodity-info h1{font-size:var(--font-size-3xl)}.commodity-description{font-size:var(--font-size-lg)}.commodity-actions{flex-direction:column;align-items:stretch}.commodity-image{height:300px}.breadcrumbs{padding:var(--spacing-sm) 0}.breadcrumbs ul{flex-wrap:wrap}}.specifications{padding:var(--spacing-5xl) 0;background:var(--color-light-gray)}.specs-table-wrapper{background:#fff;border-radius:var(--border-radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);border:1px solid var(--color-border-light);overflow:hidden}.specs-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--font-size-base)}.specs-table thead{background:var(--gradient-primary);color:#fff}.specs-table th{padding:var(--spacing-lg) var(--spacing-xl);text-align:left;font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);letter-spacing:.5px;white-space:nowrap}.specs-table th:first-child{border-top-left-radius:var(--border-radius-lg)}.specs-table th:last-child{border-top-right-radius:var(--border-radius-lg)}.specs-table tbody tr{transition:var(--transition-fast);border-bottom:1px solid var(--color-border-light)}.specs-table tbody tr:hover{background:var(--color-accent);transform:scale(1.01)}.specs-table tbody tr:last-child{border-bottom:none}.specs-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--border-radius-lg)}.specs-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--border-radius-lg)}.specs-table td{padding:var(--spacing-md) var(--spacing-xl);color:var(--color-text)}.specs-table td:first-child{font-weight:var(--font-weight-medium);color:var(--color-primary);background:#f8fafc80}.specs-table tbody tr:nth-child(2n){background:#f8fafc4d}.specs-table tbody tr:nth-child(2n):hover{background:var(--color-accent)}.specs-note{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--color-accent);border-left:4px solid var(--color-secondary);border-radius:var(--border-radius-md)}.specs-note p{margin:0;color:var(--color-text-light);display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--font-size-sm)}.specs-note i{color:var(--color-secondary);font-size:var(--font-size-lg)}@media (max-width: 768px){.specs-table-wrapper{padding:var(--spacing-md);overflow-x:auto;-webkit-overflow-scrolling:touch}.specs-table{min-width:500px;font-size:var(--font-size-sm)}.specs-table th,.specs-table td{padding:var(--spacing-sm) var(--spacing-md)}.specs-note{padding:var(--spacing-md)}.specs-note p{flex-direction:column;text-align:center;gap:var(--spacing-sm)}}