/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
:root{--sc-font-main:'Comfortaa',cursive,system-ui,-apple-system,sans-serif;--sc-font-sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--sc-primary:#38bdf8;--sc-primary-dark:#0ea5e9;--sc-secondary:#ff7a00;--sc-secondary-light:#ffcc00;--sc-accent-purple:#a855f7;--sc-accent-pink:#ff4d6d;--sc-accent-teal:#13c5c5;--sc-accent-green:#21d9bc;--sc-bg:#ffffff;--sc-surface:#ffffff;--sc-surface-low:#f8fafc;--sc-surface-dim:#f1f5f9;--sc-text:#2b2b2b;--sc-muted:#6c757d;--sc-border:rgba(0,0,0,0.08);--sc-border-subtle:rgba(0,0,0,0.05);--sc-radius:20px;--sc-radius-sm:12px;--sc-radius-pill:999px;--sc-navbar-height:96px;--sc-shadow-soft:0 10px 25px rgba(0,0,0,0.06);--sc-shadow-hover:0 15px 35px rgba(0,0,0,0.10);--sc-shadow-elevated:0 20px 40px rgba(0,0,0,0.12);--sc-gradient-main:linear-gradient(90deg,#00c2a8,#ff7a00,#ffcc00,#a855f7,#38bdf8);--sc-gradient-warm:linear-gradient(90deg,#ffcc00,#ff7a00,#ff4d6d);--sc-gradient-green:linear-gradient(135deg,#13c5c5 10%,#21d9bc 100%);--sc-gradient-red:linear-gradient(135deg,#fe7731 10%,#ff466f 100%);--sc-gradient-orange:linear-gradient(135deg,#ff662c 10%,#ffa712 100%);--sc-gradient-yellow:linear-gradient(135deg,#fedd24 10%,#ffd60c 100%);--sc-gradient-purple:linear-gradient(135deg,#d682ff 10%,#ad3ff9 100%);--sc-gradient-blue:linear-gradient(135deg,#4be4fe 10%,#0fcfff 100%);}*,*::before,*::after{box-sizing:border-box;}body{margin:0;overflow-x:hidden;font-family:var(--sc-font-main);font-size:15px;line-height:1.6;color:var(--sc-text);background-color:var(--sc-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--sc-font-main);color:var(--sc-text);font-weight:700;letter-spacing:-0.02em;margin-bottom:0.75rem;}p{margin-bottom:1rem;}a{color:var(--sc-primary-dark);text-decoration:none;font-weight:600;transition:color 0.2s ease,opacity 0.2s ease;}a:hover{color:var(--sc-secondary);}img{max-width:100%;height:auto;vertical-align:middle;}body::after{content:"www.stouto.co.za";position:fixed;bottom:10px;right:20px;opacity:0.15;font-size:20px;font-weight:800;pointer-events:none;z-index:9999;}.green-top,.blue-top,.red-top,.orange-top,.yellow-top,.purple-top{position:relative;overflow:hidden;}.green-top::before,.blue-top::before,.red-top::before,.orange-top::before,.yellow-top::before,.purple-top::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:2;}.green-top::before{background:var(--sc-gradient-green);}.blue-top::before{background:var(--sc-gradient-blue);}.red-top::before{background:var(--sc-gradient-red);}.orange-top::before{background:var(--sc-gradient-orange);}.yellow-top::before{background:var(--sc-gradient-yellow);}.purple-top::before{background:var(--sc-gradient-purple);}.rainbow-stripe{height:4px;background:var(--sc-gradient-main);width:100%;}.green{background:var(--sc-gradient-green);}.blue{background:var(--sc-gradient-blue);}.red{background:var(--sc-gradient-red);}.orange{background:var(--sc-gradient-orange);padding:8px 16px;}.yellow{background:var(--sc-gradient-yellow);padding:8px 16px;}.purple{background:var(--sc-gradient-purple);}.top-announcement-ribbon{background:var(--sc-gradient-orange);font-size:0.8rem;font-weight:700;padding:8px 16px;color:#ffffff;}.top-announcement-ribbon a{color:#ffffff;text-decoration:underline;}.navbar{background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sc-border);box-shadow:0 4px 20px rgba(0,0,0,0.04);position:sticky;top:0;z-index:1030;padding-top:0.75rem;padding-bottom:0.75rem;}.navbar-brand{font-weight:800;font-size:1.4rem;color:var(--sc-text);letter-spacing:-0.5px;}.navbar-nav .nav-link{font-weight:700;color:var(--sc-text);padding:0.5rem 1rem;border-radius:var(--sc-radius-pill);transition:all 0.2s ease;}.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--sc-primary-dark);background:rgba(56,189,248,0.1);}.btn{font-family:var(--sc-font-main);font-weight:700;border-radius:var(--sc-radius-pill);padding:0.6rem 1.4rem;font-size:0.875rem;border:none;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;transition:transform 0.15s ease,filter 0.15s ease,box-shadow 0.15s ease;white-space:nowrap;}.btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:var(--sc-shadow-soft);}.btn:active{transform:scale(0.97);}.btn-pill-sm{padding:0.35rem 0.9rem;font-size:0.75rem;}.btn-pill-lg{padding:0.85rem 2rem;font-size:1rem;}.btn-stouto-orange{background:var(--sc-gradient-orange);color:#ffffff !important;}.btn-stouto-green{background:var(--sc-gradient-green);color:#ffffff !important;}.btn-stouto-blue{background:var(--sc-gradient-blue);color:#ffffff !important;}.btn-stouto-purple{background:var(--sc-gradient-purple);color:#ffffff !important;}.btn-stouto-yellow{background:var(--sc-gradient-yellow);color:#2b2b2b !important;}.btn-stouto-red{background:var(--sc-gradient-red);color:#ffffff !important;}.btn-ghost{background:var(--sc-surface-dim);color:var(--sc-text) !important;border:1px solid var(--sc-border);}.btn-ghost:hover{background:#e2e8f0;color:var(--sc-text) !important;}.card,.sc-card{background:var(--sc-surface);border-radius:var(--sc-radius);border:1px solid var(--sc-border);box-shadow:var(--sc-shadow-soft);transition:transform 0.25s ease,box-shadow 0.25s ease;}.card-orange{background:var(--sc-gradient-orange);border-radius:var(--sc-radius);border:1px solid var(--sc-border);box-shadow:var(--sc-shadow-soft);transition:transform 0.25s ease,box-shadow 0.25s ease;}.card-orange h3{color:#ffffff !important;}.hover-lift:hover{transform:translateY(-5px);box-shadow:var(--sc-shadow-hover);}.pattern-card,.app-hero-frame{background:#ffffff;border-radius:var(--sc-radius);padding:0.85rem;border:1px solid var(--sc-border);box-shadow:var(--sc-shadow-soft);}.pattern-card .card-img-wrap,.app-hero-frame .app-hero-img-wrap{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:calc(var(--sc-radius) - 6px);overflow:hidden;background:var(--sc-surface-dim);}.pattern-card img,.app-hero-frame img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s ease;}.pattern-card:hover img{transform:scale(1.04);}.badge{font-family:var(--sc-font-main);font-weight:700;border-radius:var(--sc-radius-pill);padding:0.35rem 0.75rem;letter-spacing:0.02em;}.app-badge-orange{background:rgba(255,102,44,0.15);color:#c2410c;}.app-badge-green{background:rgba(19,197,197,0.15);color:#0f766e;}.app-badge-blue{background:rgba(56,189,248,0.15);color:var(--sc-primary-dark);}.app-badge-purple{background:rgba(168,85,247,0.15);color:var(--sc-accent-purple);}.app-badge-pink{background:rgba(255,77,109,0.15);color:#be123c;}.promocode{padding:8px 16px;margin:10px auto;border-radius:35px;background-image:var(--sc-gradient-yellow);border:2px dashed #ffffff;color:#2b2b2b;font-weight:900;font-size:1.15rem;letter-spacing:0.1em;display:inline-block;box-shadow:0 4px 12px rgba(0,0,0,0.08);}.form-control,.form-select{border-radius:var(--sc-radius-pill);border:1px solid var(--sc-border);padding:0.65rem 1.25rem;font-family:var(--sc-font-main);font-size:0.9rem;color:var(--sc-text);background-color:#ffffff;transition:border-color 0.2s ease,box-shadow 0.2s ease;}.form-control:focus,.form-select:focus{border-color:var(--sc-primary-dark);box-shadow:0 0 0 3px rgba(56,189,248,0.25);outline:none;}.ck-anchor{display:block;scroll-margin-top:var(--sc-navbar-height);}.pattern-quicknav,.app-ribbon{position:sticky;top:var(--sc-navbar-height);z-index:900;display:flex;gap:0.5rem;overflow-x:auto;padding:0.75rem 0.5rem;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--sc-radius);box-shadow:var(--sc-shadow-soft);margin-bottom:1.5rem;scrollbar-width:none;}.pattern-quicknav::-webkit-scrollbar,.app-ribbon::-webkit-scrollbar{display:none;}.site-footer{background:#ffffff;border-top:1px solid var(--sc-border);margin-top:auto;padding-top:3.5rem;padding-bottom:2rem;}.site-footer h6{font-weight:700;color:var(--sc-text);margin-bottom:1rem;}.site-footer a{color:var(--sc-muted);font-weight:500;font-size:0.85rem;}.site-footer a:hover{color:var(--sc-primary-dark);}.mt-8{margin-top:2rem !important;}.mt-10{margin-top:2.5rem !important;}.mt-12{margin-top:3rem !important;}.mb-8{margin-bottom:2rem !important;}.mb-10{margin-bottom:2.5rem !important;}.mb-12{margin-bottom:3rem !important;}.my-12{margin-top:3rem !important;margin-bottom:3rem !important;}.my-16{margin-top:4rem !important;margin-bottom:4rem !important;}.p-8{padding:2rem !important;}.py-20{padding-top:5rem !important;padding-bottom:5rem !important;}@media (max-width:767.98px){body{font-size:14px;}.btn{min-height:44px;}.navbar{padding-top:0.5rem;padding-bottom:0.5rem;}}.navbar,.navbar-nav,.nav-item.dropdown,.dropdown{position:relative;overflow:visible !important;}.navbar-nav .dropdown-menu{position:absolute !important;top:100% !important;left:0 !important;z-index:1050 !important;min-width:250px;background-color:#ffffff !important;border:1px solid rgba(0,0,0,0.08) !important;border-radius:16px !important;box-shadow:0 15px 35px rgba(0,0,0,0.12) !important;padding:0.5rem !important;margin-top:0.5rem !important;display:none;animation:stoutoDropdownFadeIn 0.18s cubic-bezier(0.16,1,0.3,1);}.navbar-nav .dropdown-menu.show,.navbar-nav .dropdown.show > .dropdown-menu{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;}@media (min-width:992px){.navbar-nav .nav-item.dropdown:hover > .dropdown-menu,.navbar-nav .dropdown:hover > .dropdown-menu{display:block !important;visibility:visible !important;opacity:1 !important;}.navbar-nav .nav-item.dropdown::after{content:"";position:absolute;bottom:-10px;left:0;right:0;height:12px;z-index:1040;}.dropdown-submenu{position:relative;}.dropdown-submenu > .dropdown-menu{top:0 !important;left:100% !important;margin-left:4px !important;margin-top:-4px !important;}.dropdown-submenu:hover > .dropdown-menu{display:block !important;}}.navbar-nav .dropdown-item{display:flex !important;align-items:center !important;gap:0.65rem !important;padding:0.6rem 1rem !important;font-family:var(--sc-font-main,'Comfortaa',cursive,sans-serif) !important;font-size:0.875rem !important;font-weight:600 !important;color:var(--sc-text,#2b2b2b) !important;border-radius:10px !important;background:transparent;transition:all 0.15s ease-in-out !important;text-decoration:none !important;cursor:pointer;}.navbar-nav .dropdown-item:hover,.navbar-nav .dropdown-item:focus{background-color:rgba(56,189,248,0.1) !important;color:var(--sc-primary-dark,#0ea5e9) !important;transform:translateX(3px);}.navbar-nav .dropdown-item i{width:20px;text-align:center;font-size:1rem;}@keyframes stoutoDropdownFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}