/*
Theme Name: Twinstorm Block Theme
Theme URI: https://twinstorm.co.za
Author: Twinstorm Solutions
Author URI: https://twinstorm.co.za
Description: A modern, fully editable Block Theme (Full Site Editing) for Twinstorm Solutions. Everything can be edited via the WordPress Block Editor.
Version: 7.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-colors, custom-logo, full-site-editing, block-patterns, dark-mode
Text Domain: twinstorm
*/
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background-color:#000000;color:#ffffff;-webkit-font-smoothing:antialiased;overflow-x:hidden}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0a0a0a}::-webkit-scrollbar-thumb{background:#fbbf24;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#f59e0b}.container{max-width:1280px;margin:0 auto;padding:0 1rem}@media (min-width:640px){.container{padding:0 1.5rem}}@media (min-width:1024px){.container{padding:0 2rem}}.header{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.5rem 0;background:transparent;transition:all 0.3s ease}.header.scrolled{background:rgba(0,0,0,0.95);backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,0.5);padding:0.75rem 0}.header-content{display:flex;align-items:center;justify-content:space-between}.logo-img{height:7.5rem;width:auto;transition:all 0.3s ease;cursor:pointer}.header.scrolled .logo-img{height:6.5rem}@media (min-width:640px){.logo-img{height:9.75rem}.header.scrolled .logo-img{height:7.5rem}}.nav-menu{display:none;align-items:center;gap:2rem}@media (min-width:768px){.nav-menu{display:flex}}.nav-link{color:#d1d5db;text-decoration:none;font-weight:500;background:none;border:none;cursor:pointer;font-size:1rem;transition:color 0.3s}.nav-link:hover{color:#fbbf24}.mobile-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0;gap:6px}@media (min-width:768px){.mobile-toggle{display:none}}.hamburger-line{width:28px;height:3px;background:#fbbf24;border-radius:2px;transition:transform 0.4s cubic-bezier(0.68,-0.55,0.27,1.55),opacity 0.3s ease,box-shadow 0.3s ease;box-shadow:0 0 8px rgba(251,191,36,0.5)}.mobile-toggle:hover .hamburger-line{box-shadow:0 0 15px rgba(251,191,36,0.8)}.mobile-toggle.is-active .line-1{transform:translateY(9px) rotate(45deg);box-shadow:0 0 15px rgba(251,191,36,0.9)}.mobile-toggle.is-active .line-2{opacity:0;transform:scaleX(0)}.mobile-toggle.is-active .line-3{transform:translateY(-9px) rotate(-45deg);box-shadow:0 0 15px rgba(251,191,36,0.9)}.mobile-menu{max-height:0;opacity:0;overflow:hidden;background:rgba(0,0,0,0.95);backdrop-filter:blur(8px);transition:max-height 0.5s ease,opacity 0.4s ease,padding 0.3s ease}.mobile-menu.open{max-height:500px;opacity:1;padding:1rem 0}.mobile-menu nav{display:flex;flex-direction:column;gap:1rem}.mobile-menu .nav-link{padding:0.5rem 1rem;text-align:left}.mobile-menu .btn{margin:0 1rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;font-weight:600;border-radius:0.5rem;text-decoration:none;cursor:pointer;border:none;font-size:1rem;transition:all 0.3s ease;position:relative;overflow:hidden}.btn-lg{padding:1.25rem 2rem;font-size:1.125rem}.btn-primary{background:linear-gradient(90deg,#fbbf24 0%,#fbbf24 40%,#fde047 50%,#fbbf24 60%,#fbbf24 100%);background-size:200% 100%;color:#000000}.btn-primary:hover{animation:shimmer 2s linear infinite;transform:translateY(-2px);box-shadow:0 10px 40px rgba(251,191,36,0.4),0 0 20px rgba(251,191,36,0.3)}.btn-outline{background:transparent;color:#fbbf24;border:2px solid #fbbf24}.btn-outline:hover{background:#fbbf24;color:#000;transform:translateY(-2px);box-shadow:0 0 20px rgba(251,191,36,0.5)}.btn-arrow{margin-left:0.5rem;transition:transform 0.3s}.btn-primary:hover .btn-arrow{transform:translateX(4px)}.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;padding-top:170px}.hero-bg-glow{position:absolute;inset:0;pointer-events:none}.glow{position:absolute;border-radius:50%;filter:blur(60px);animation:pulse 4s ease-in-out infinite}.glow-1{top:5rem;left:2.5rem;width:18rem;height:18rem;background:rgba(251,191,36,0.1)}.glow-2{bottom:5rem;right:2.5rem;width:24rem;height:24rem;background:rgba(251,191,36,0.05);animation-delay:1s}.lightning-container{position:absolute;inset:0;pointer-events:none;overflow:hidden}.bolt{position:absolute;filter:drop-shadow(0 0 20px rgba(251,191,36,0.8))}.bolt-1{top:15rem;right:6%;opacity:0.35;animation:float-bolt 4s ease-in-out infinite,lightning-glow 2s ease-in-out infinite}.bolt-2{top:19rem;left:4%;opacity:0.4;animation:lightning-strike 4s ease-in-out infinite}.bolt-3{top:45%;left:50%;transform:translateX(-50%);opacity:0.2;animation:float-bolt 4s ease-in-out infinite 1.5s,lightning-glow 2s ease-in-out infinite 1.5s}.bolt-4{bottom:10rem;right:25%;opacity:0.3;animation:lightning-strike 4s ease-in-out infinite 2s}.hero-content{position:relative;z-index:10;text-align:center;max-width:80rem;margin:0 auto;padding:2rem 1rem}.hero-title{font-size:2.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;animation:fadeInUp 0.8s ease-out forwards}.hero-title .yellow{color:#fbbf24}.hero-title .white{color:#ffffff}@media (min-width:640px){.hero-title{font-size:3.5rem}}@media (min-width:768px){.hero-title{font-size:4rem}}@media (min-width:1024px){.hero-title{font-size:4.5rem}}.hero-subtitle{font-size:1.125rem;color:#d1d5db;margin-bottom:3rem;max-width:48rem;margin-left:auto;margin-right:auto;line-height:1.6;animation:fadeInUp 0.8s ease-out 0.2s forwards;opacity:0;padding:0 1rem}.hero-subtitle .yellow{color:#fbbf24;font-weight:600}@media (min-width:640px){.hero-subtitle{font-size:1.25rem}}@media (min-width:768px){.hero-subtitle{font-size:1.5rem}}.hero-buttons{display:flex;flex-direction:column;gap:1rem;justify-content:center;margin-bottom:4rem;padding:0 1rem;animation:fadeInUp 0.8s ease-out 0.4s forwards;opacity:0}@media (min-width:640px){.hero-buttons{flex-direction:row}}.features-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:56rem;margin:0 auto;padding:0 1rem;animation:fadeInUp 0.8s ease-out 0.6s forwards;opacity:0}@media (min-width:640px){.features-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}.feature-card{display:flex;flex-direction:column;align-items:center;padding:1.5rem;background:rgba(24,24,27,0.5);border-radius:0.5rem;border:1px solid #27272a;transition:all 0.3s ease}.feature-card:hover{border-color:rgba(251,191,36,0.5);transform:scale(1.05)}.feature-icon{width:3.5rem;height:3.5rem;background:rgba(251,191,36,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.feature-icon svg{width:28px;height:28px;color:#fbbf24}.feature-card h3{font-size:1.125rem;font-weight:600;color:white;margin-bottom:0.5rem}.feature-card p{color:#9ca3af;font-size:0.875rem;text-align:center}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);animation:bounce 2s infinite;display:none}@media (min-width:640px){.scroll-indicator{display:block}}.scroll-indicator-inner{width:1.5rem;height:2.5rem;border:2px solid #fbbf24;border-radius:9999px;display:flex;align-items:flex-start;justify-content:center;padding:0.5rem}.scroll-dot{width:4px;height:12px;background:#fbbf24;border-radius:9999px}.services{padding:4rem 0;background:#09090b}@media (min-width:640px){.services{padding:5rem 0}}.section-header{text-align:center;margin-bottom:3rem}@media (min-width:640px){.section-header{margin-bottom:4rem}}.section-title{font-size:2rem;font-weight:700;color:white;margin-bottom:1rem}.section-title .yellow{color:#fbbf24}@media (min-width:640px){.section-title{font-size:2.5rem}}@media (min-width:1024px){.section-title{font-size:3rem}}.section-subtitle{font-size:1.125rem;color:#9ca3af;max-width:48rem;margin:0 auto;padding:0 1rem}@media (min-width:640px){.section-subtitle{font-size:1.25rem}}.services-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width:768px){.services-grid{grid-template-columns:repeat(2,1fr);gap:2rem}}@media (min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}.service-card{background:#18181b;border:1px solid #27272a;border-radius:0.5rem;padding:1.5rem;transition:all 0.3s ease}@media (min-width:640px){.service-card{padding:2rem}}.service-card:hover{border-color:rgba(251,191,36,0.5);transform:scale(1.05)}.service-card:hover h3{color:#fbbf24}.service-icon-wrapper{width:4rem;height:4rem;background:rgba(251,191,36,0.1);border-radius:0.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:background 0.3s}.service-card:hover .service-icon-wrapper{background:rgba(251,191,36,0.2)}.service-icon-wrapper svg{width:32px;height:32px;color:#fbbf24}.service-card h3{font-size:1.25rem;font-weight:700;color:white;margin-bottom:1rem;transition:color 0.3s}@media (min-width:640px){.service-card h3{font-size:1.5rem}}.service-card p{color:#9ca3af;margin-bottom:1.5rem;line-height:1.6;font-size:0.875rem}@media (min-width:640px){.service-card p{font-size:1rem}}.service-card ul{list-style:none}.service-card li{display:flex;align-items:center;color:#d1d5db;margin-bottom:0.5rem;font-size:0.875rem}@media (min-width:640px){.service-card li{font-size:1rem}}.service-card li::before{content:'';width:6px;height:6px;background:#fbbf24;border-radius:50%;margin-right:0.75rem;flex-shrink:0}.hardware-banner{margin-top:3rem;padding:1.5rem;background:#18181b;border:1px solid #27272a;border-radius:0.5rem;text-align:center}@media (min-width:640px){.hardware-banner{padding:2rem}}.hardware-banner h3{font-size:1.25rem;font-weight:700;color:white;margin-bottom:1rem}@media (min-width:640px){.hardware-banner h3{font-size:1.5rem}}.hardware-banner p{color:#9ca3af;max-width:48rem;margin:0 auto;font-size:0.875rem;padding:0 1rem}@media (min-width:640px){.hardware-banner p{font-size:1rem}}.partners{padding:3rem 0 4rem;background:#09090b}@media (min-width:640px){.partners{padding:4rem 0 5rem}}.partners-header{text-align:center;margin-bottom:2.5rem}.partners-header h3{font-size:1.25rem;font-weight:600;color:#d1d5db;margin-bottom:0.5rem;letter-spacing:0.05em;text-transform:uppercase}.partners-header p{color:#9ca3af;font-size:0.95rem}.partners-header .yellow{color:#fbbf24}.partners-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;align-items:center;justify-items:center;max-width:64rem;margin:0 auto;padding:2rem;background:rgba(24,24,27,0.5);border:1px solid rgba(251,191,36,0.2);border-radius:1rem}@media (min-width:768px){.partners-grid{grid-template-columns:repeat(4,1fr);gap:2.5rem;padding:3rem}}.partner-logo{width:100%;max-width:140px;height:60px;display:flex;align-items:center;justify-content:center;color:#fbbf24;transition:all 0.3s ease;filter:drop-shadow(0 0 8px rgba(251,191,36,0.3))}.partner-logo:hover{transform:scale(1.1);filter:drop-shadow(0 0 20px rgba(251,191,36,0.7))}.partner-logo svg{width:100%;height:100%;max-height:60px}.partner-logo .partner-name{font-weight:800;font-size:1.75rem;letter-spacing:0.02em;color:#fbbf24;text-shadow:0 0 15px rgba(251,191,36,0.5)}.partner-logo .partner-name.small{font-size:1.25rem}.partner-logo .partner-name.medium{font-size:1.5rem}.about{padding:4rem 0;background:#000}@media (min-width:640px){.about{padding:5rem 0}}.about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}@media (min-width:1024px){.about-grid{grid-template-columns:repeat(2,1fr);gap:4rem}}.about-title{font-size:2rem;font-weight:700;color:white;margin-bottom:1.5rem}@media (min-width:640px){.about-title{font-size:2.5rem}}@media (min-width:1024px){.about-title{font-size:3rem}}.about-title .yellow{color:#fbbf24}.about-text{font-size:1.125rem;color:#d1d5db;margin-bottom:2rem;line-height:1.6}@media (min-width:640px){.about-text{font-size:1.25rem}}.about-text-small{font-size:1rem;color:#9ca3af;margin-bottom:2rem;line-height:1.6}@media (min-width:640px){.about-text-small{font-size:1.125rem}}.capabilities{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}@media (min-width:640px){.capabilities{grid-template-columns:repeat(2,1fr)}}.capability{display:flex;align-items:center;color:#d1d5db}.capability svg{color:#fbbf24;margin-right:0.75rem;flex-shrink:0;width:20px;height:20px}.value-card{padding:1.5rem;background:#18181b;border:1px solid #27272a;border-radius:0.5rem;transition:all 0.3s ease;margin-bottom:1.5rem}.value-card:hover{border-color:rgba(251,191,36,0.5)}.value-card-content{display:flex;align-items:flex-start}.value-icon{width:3rem;height:3rem;background:rgba(251,191,36,0.1);border-radius:0.5rem;display:flex;align-items:center;justify-content:center;margin-right:1rem;flex-shrink:0}.value-icon svg{width:24px;height:24px;color:#fbbf24}.value-card h3{font-size:1.25rem;font-weight:700;color:white;margin-bottom:0.5rem}.value-card p{color:#9ca3af;line-height:1.6}.contact{padding:4rem 0;background:#000}@media (min-width:640px){.contact{padding:5rem 0}}.contact-grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:80rem;margin:0 auto}@media (min-width:1024px){.contact-grid{grid-template-columns:1fr 2fr}}.contact-info-card{padding:1.5rem;background:#18181b;border:1px solid #27272a;border-radius:0.5rem;margin-bottom:1.5rem}.contact-info-card .icon-wrapper{width:3rem;height:3rem;background:rgba(251,191,36,0.1);border-radius:0.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.contact-info-card svg{width:24px;height:24px;color:#fbbf24}.contact-info-card h3{font-size:1rem;font-weight:600;color:white;margin-bottom:0.5rem}.contact-info-card a{color:#fbbf24;text-decoration:none;transition:color 0.3s}.contact-info-card a:hover{color:#f59e0b}.contact-info-card p{color:#9ca3af}.why-choose{padding:1.5rem;background:rgba(251,191,36,0.05);border:1px solid rgba(251,191,36,0.2);border-radius:0.5rem}.why-choose h3{color:white;font-weight:600;margin-bottom:0.75rem}.why-choose ul{list-style:none}.why-choose li{color:#9ca3af;font-size:0.875rem;margin-bottom:0.5rem;display:flex;align-items:flex-start}.why-choose li::before{content:'✓';color:#fbbf24;margin-right:0.5rem;font-weight:bold}.contact-form-card{padding:2rem;background:#18181b;border:1px solid #27272a;border-radius:0.5rem}.form-row{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem}@media (min-width:640px){.form-row{grid-template-columns:repeat(2,1fr)}}.form-group{display:flex;flex-direction:column}.form-group label{font-size:0.875rem;font-weight:500;color:#d1d5db;margin-bottom:0.5rem}.form-group input,.form-group textarea{background:#09090b;border:1px solid #3f3f46;color:white;padding:0.75rem;border-radius:0.5rem;font-family:inherit;font-size:1rem;transition:border-color 0.3s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#fbbf24}.form-group textarea{resize:vertical;min-height:150px}.contact-form-card .btn{width:100%;padding:1.25rem;font-size:1.125rem}.footer{background:#000;border-top:1px solid #18181b;padding:3rem 0 2rem}.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}.footer-logo{height:2.5rem;width:auto;margin-bottom:1rem}.footer-about{color:#9ca3af;margin-bottom:1rem;max-width:28rem;line-height:1.6}.footer-email{display:flex;align-items:center;color:#9ca3af}.footer-email svg{width:18px;height:18px;margin-right:0.5rem;color:#fbbf24}.footer-email a{color:#9ca3af;text-decoration:none;transition:color 0.3s}.footer-email a:hover{color:#fbbf24}.footer h3{color:white;font-weight:600;margin-bottom:1rem}.footer ul{list-style:none}.footer ul li{margin-bottom:0.5rem}.footer ul li a,.footer ul li button{color:#9ca3af;text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;font-size:1rem;padding:0;transition:color 0.3s}.footer ul li a:hover,.footer ul li button:hover{color:#fbbf24}.footer-bottom{border-top:1px solid #18181b;padding-top:2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem}@media (min-width:640px){.footer-bottom{flex-direction:row}}.footer-bottom p{color:#6b7280;font-size:0.875rem}.footer-bottom .yellow{color:#fbbf24}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{opacity:0.4}50%{opacity:0.8}}@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}@keyframes float-bolt{0%,100%{transform:translateY(0px) rotate(-10deg)}50%{transform:translateY(-20px) rotate(-10deg)}}@keyframes lightning-glow{0%,100%{filter:drop-shadow(0 0 10px rgba(251,191,36,0.6)) drop-shadow(0 0 25px rgba(251,191,36,0.5))}50%{filter:drop-shadow(0 0 30px rgba(251,191,36,1)) drop-shadow(0 0 60px rgba(251,191,36,0.8)) drop-shadow(0 0 90px rgba(251,191,36,0.5))}}@keyframes lightning-strike{0%,100%{opacity:0;transform:translateY(-10px) scale(0.8)}10%{opacity:1;transform:translateY(0) scale(1)}20%{opacity:0}30%{opacity:1}40%,90%{opacity:0}}@keyframes bounce{0%,100%{transform:translateY(0) translateX(-50%)}50%{transform:translateY(-10px) translateX(-50%)}}.toast{position:fixed;bottom:2rem;right:2rem;background:#18181b;border:1px solid #fbbf24;border-radius:0.5rem;padding:1rem 1.5rem;color:white;z-index:100;transform:translateX(150%);transition:transform 0.3s ease;max-width:350px}.toast.show{transform:translateX(0)}.toast strong{color:#fbbf24;display:block;margin-bottom:0.25rem}.toast small{color:#9ca3af;font-size:0.875rem}
/* reCAPTCHA protection badge */.recaptcha-protect{position:fixed;bottom:1rem;right:1rem;z-index:40;display:flex;align-items:center;gap:.6rem;background:rgba(0,0,0,.92);border:1px solid rgba(251,191,36,.4);border-radius:.5rem;padding:.55rem .8rem;font-size:.7rem;line-height:1.4;color:#9ca3af;max-width:270px;backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}.recaptcha-protect.show{opacity:1;pointer-events:auto;transform:translateY(0)}.recaptcha-protect a{color:#fbbf24;text-decoration:underline}.recaptcha-protect strong{color:#e5e7eb}.recaptcha-protect svg{flex-shrink:0}@media(max-width:640px){.recaptcha-protect{font-size:.62rem;max-width:215px;padding:.45rem .6rem;bottom:.75rem;right:.75rem}}/* solid mobile menu - no see-through overlay */.header.menu-open{background:#000;box-shadow:0 4px 20px rgba(0,0,0,.5)}.mobile-menu{background:#000}.mobile-menu.open{border-bottom:1px solid rgba(251,191,36,.3)}