:root{--ocp-green-primary: #027c33;--can-yellow: #FFD700;--can-red: #DC143C;--text-dark: #333333}.container{max-width:1200px;margin:0 auto;padding:0 20px}.site-header{font-family:var(--font-body, "Acumin Variable Concept", Arial, sans-serif)}.hero-section{position:relative;background:var(--can-red);background-size:cover;background-position:center;background-repeat:no-repeat;min-height:600px;padding:100px 0 80px;display:flex;align-items:center}@media (max-width: 992px){.hero-section{min-height:500px;padding:90px 0 70px}}@media (max-width: 640px){.hero-section{min-height:420px;padding:80px 0 60px}}.hero-title{font-family:Rajdhani,Arial Black,sans-serif;font-size:78px;line-height:1.05;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0 0 20px}@media (max-width: 640px){.hero-title{font-size:48px}}.hero-title .white-text{color:#fff}.hero-title .yellow-text{color:var(--can-yellow)}.hero-subtitle{color:#fff;font-size:24px;font-weight:600;letter-spacing:.5px;margin:0 0 30px}.btn.btn-hero{display:inline-block;background:var(--ocp-green-primary);color:#fff;padding:15px 40px;font-size:20px;font-weight:700;border-radius:5px;text-decoration:none;transition:filter .25s ease}.btn.btn-hero:hover{filter:brightness(1.1)}.hero-decorations{position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.15),transparent 70%)}.tutorial-section{position:relative;background:#f5f5f5;background-size:cover;background-position:center;padding:80px 0}.section-title{font-family:Rajdhani,Arial Black,sans-serif;font-size:56px;font-weight:700;text-align:center!important;color:var(--ocp-green-primary);margin:0 0 60px;letter-spacing:.5px;text-transform:uppercase;position:relative;padding-bottom:24px}@media (max-width:640px){.section-title{font-size:40px}}.video-container{max-width:800px;margin:0 auto}.video-thumbnail{width:100%;aspect-ratio:16/9;position:relative;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px #00000026;cursor:pointer;transition:transform .3s;background:#000}.video-thumbnail:hover{transform:scale(1.02)}.video-thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 15px #0000004d;transition:transform .3s,background .3s}.play-button:hover{transform:translate(-50%,-50%) scale(1.1);background:#ffffffe6}.play-icon{fill:var(--ocp-green-primary);width:40px;height:40px}.no-video-message{text-align:center;font-size:16px;color:#555}.video-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;align-items:center;justify-content:center}.video-modal.active{display:flex}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000e6;cursor:pointer}.modal-content{position:relative;z-index:10001;max-width:90vw;max-height:90vh;width:1200px}.modal-close{position:absolute;top:-50px;right:0;background:transparent;border:none;color:#fff;font-size:40px;cursor:pointer;width:40px;height:40px;line-height:1;transition:transform .2s}.modal-close:hover{transform:scale(1.2)}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;background:#000;border-radius:8px}.video-wrapper video,.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}@media (max-width:768px){.modal-content{width:95vw}.modal-close{top:-40px;font-size:30px}}.value-section{background:#fff;padding:100px 0}.value-title{font-family:Rajdhani,Arial Black,sans-serif;font-size:42px;font-weight:700;text-align:center;line-height:1.4;margin:0 0 60px;letter-spacing:.5px;position:relative;padding-bottom:24px}@media (max-width:640px){.value-title{font-size:28px}}.section-title:after,.value-title:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:0;height:4px;width:min(560px,70%);border-radius:999px;background:linear-gradient(90deg,#ffd70000,#ffd700bf 15%,gold,#ffd700bf 85%,#ffd70000)}@media (max-width:640px){.section-title:after,.value-title:after,.section-title:before,.value-title:before{width:80%}}.value-title .yellow{color:var(--can-yellow)}.value-title .green{color:var(--ocp-green-primary)}.value-title .can-gold{color:var(--can-yellow)}.features-grid{display:grid;gap:30px;max-width:1200px;margin:0 auto;grid-template-columns:repeat(4,1fr)}@media (max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.features-grid{grid-template-columns:1fr}}.feature-card{background:#fafafa;padding:40px 20px;text-align:center;border-radius:10px;box-shadow:0 2px 10px #0000000d;transition:transform .3s,box-shadow .3s}.feature-card:hover{transform:translateY(-5px);box-shadow:0 6px 20px #00000014}.feature-icon{width:80px;height:80px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}.feature-icon img{max-width:100%;max-height:100%;display:block}.feature-title{font-family:Rajdhani,Arial Black,sans-serif;font-size:22px;font-weight:700;color:#333;margin:15px 0;text-transform:uppercase;line-height:1.2}@media (max-width:640px){.feature-title{font-size:18px}}.feature-divider{width:50px;height:3px;background:var(--ocp-green-primary);margin:15px auto}.feature-description{font-family:Rajdhani,Arial,sans-serif;font-size:15px;color:#666;line-height:1.6;max-width:250px;margin:0 auto}.site-footer{font-family:var(--font-body,"Acumin Variable Concept",Arial,sans-serif)}.video-thumbnail:focus .play-button,.modal-close:focus{outline:2px solid var(--can-yellow);outline-offset:4px}html{scroll-behavior:smooth}.mobile-nav{transition:height .3s ease}@keyframes pulsePlay{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}.play-button{animation:pulsePlay 3s infinite}
