/* ============================================================ NEUROGLOW — PREMIUM STYLESHEET v3 ============================================================ */ /* Fonts are loaded via in each page's for non-render-blocking delivery (was a blocking @import). */ /* ── CSS VARIABLES ── */ :root { --grey-light: #f5f5f7; --navy: #0a0e1a; --navy-mid: #0f1629; --navy-light: #1a2240; --gold: #c9a84c; --gold-light: #e8c96e; --gold-dark: #a8873a; --gold-glow: rgba(201,168,76,0.3); --white: #ffffff; --text-dark: #111827; --text-grey: #6b7280; --text-light: #9ca3af; --card-shadow: 0 4px 30px rgba(0,0,0,0.08); --card-hover: 0 20px 60px rgba(0,0,0,0.14); --trans: all 0.3s cubic-bezier(0.4,0,0.2,1); --trans-fast: all 0.2s cubic-bezier(0.4,0,0.2,1); } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{ font-family:'Inter',sans-serif; background:var(--grey-light); color:var(--text-dark); line-height:1.6; overflow-x:hidden; -webkit-text-size-adjust:100%; opacity:0; transition:opacity 0.5s ease; } body.loaded{opacity:1} a{text-decoration:none;color:inherit} ul{list-style:none} img{display:block;max-width:100%;height:auto} /* ── SCROLLBAR ── */ ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--grey-light)} ::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--gold-dark)} /* ── SELECTION ── */ ::selection{background:var(--gold);color:var(--white)} /* ── CUSTOM CURSOR ── */ #cursor-dot,#cursor-ring{ position:fixed;border-radius:50%;pointer-events:none; z-index:10000;transform:translate(-50%,-50%);will-change:left,top; } #cursor-dot{width:7px;height:7px;background:var(--gold)} #cursor-ring{ width:34px;height:34px; border:1.5px solid rgba(201,168,76,0.55); background:transparent; transition:width .2s,height .2s,opacity .2s; } body.cursor-hover #cursor-ring{width:50px;height:50px;border-color:var(--gold)} /* ── CONTAINER ── */ .container{max-width:1200px;margin:0 auto;padding:0 40px} section{padding:100px 0} /* ── TYPOGRAPHY ── */ h1,h2,h3,h4{font-family:'Playfair Display',serif;line-height:1.15} /* ── BUTTONS ── */ .btn-primary{ display:inline-block;background:var(--white);color:var(--navy); padding:15px 32px;border-radius:8px;font-weight:700;font-size:15px; border:2px solid var(--white);transition:var(--trans); } .btn-primary:hover{background:var(--grey-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.2)} .btn-outline-gold{ display:inline-block;background:transparent;color:var(--gold); padding:15px 32px;border-radius:8px;font-weight:700;font-size:15px; border:2px solid var(--gold);transition:var(--trans); } .btn-outline-gold:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px);box-shadow:0 10px 30px var(--gold-glow)} .btn-gold{ display:inline-block;background:var(--gold);color:var(--navy); padding:15px 32px;border-radius:8px;font-weight:700;font-size:15px; border:2px solid var(--gold);transition:var(--trans); } .btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px var(--gold-glow)} .btn-navy{ display:inline-block;background:var(--navy);color:var(--white); padding:15px 32px;border-radius:8px;font-weight:700;font-size:15px; border:2px solid rgba(255,255,255,0.15);transition:var(--trans); } .btn-navy:hover{background:var(--navy-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(10,14,26,0.4)} /* ── LABELS ── */ .section-label{ font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--gold);font-weight:700;margin-bottom:12px;display:block; } .section-title{font-size:clamp(1.5rem,4vw,2.5rem);color:var(--navy);margin-bottom:16px} .section-title.white{color:var(--white)} .section-sub{font-size:17px;color:var(--text-grey);max-width:580px;margin:0 auto;line-height:1.7} .section-sub.white{color:rgba(255,255,255,0.55)} .text-center{text-align:center} /* ── SCROLL ANIMATIONS ── */ .fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease} .fade-up.visible{opacity:1;transform:translateY(0)} .fade-in{opacity:0;transition:opacity .7s ease} .fade-in.visible{opacity:1} .scale-in{opacity:0;transform:scale(0.92);transition:opacity .6s ease,transform .6s ease} .scale-in.visible{opacity:1;transform:scale(1)} .delay-1{transition-delay:.1s} .delay-2{transition-delay:.2s} .delay-3{transition-delay:.3s} .delay-4{transition-delay:.4s} .delay-5{transition-delay:.5s} .delay-6{transition-delay:.6s} /* ════════════════════════════════════════════════ NAVIGATION ════════════════════════════════════════════════ */ #navbar{ position:fixed;top:0;left:0;right:0;z-index:900; padding:22px 40px; display:flex;align-items:center;justify-content:space-between; transition:var(--trans); } #navbar.scrolled{ background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); padding:14px 40px; box-shadow:0 1px 24px rgba(0,0,0,0.09); } /* Logo */ .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo-svg-wrap svg{overflow:visible} .logo-text{ font-family:'Playfair Display',serif;font-size:21px;font-weight:700; color:var(--white);transition:var(--trans);letter-spacing:-.3px; } #navbar.scrolled .logo-text{color:var(--navy)} /* Nav links */ .nav-links{display:flex;align-items:center;gap:34px} .nav-links a{ font-size:14px;font-weight:500; color:rgba(255,255,255,0.82); position:relative;transition:var(--trans-fast); padding-bottom:3px; } #navbar.scrolled .nav-links a{color:var(--text-grey)} .nav-links a:hover{color:var(--gold)} .nav-links a.active{color:var(--gold)} .nav-links a.active::after{ content:'';position:absolute;bottom:0;left:0;right:0; height:2px;background:var(--gold);border-radius:1px; } /* Nav right */ .nav-right{display:flex;align-items:center;gap:14px} /* Language switcher */ .lang-switcher{position:relative} .lang-btn{ display:flex;align-items:center;gap:6px; background:none;border:1px solid rgba(255,255,255,0.28); color:rgba(255,255,255,0.85);padding:7px 13px;border-radius:7px; cursor:pointer;font-size:13px;font-family:'Inter',sans-serif; transition:var(--trans-fast); } #navbar.scrolled .lang-btn{border-color:rgba(0,0,0,0.14);color:var(--text-dark)} .lang-btn:hover{border-color:var(--gold);color:var(--gold)} .lang-btn .flag{font-size:15px} .lang-btn .chevron{font-size:10px;opacity:.6} .lang-dropdown{ position:absolute;top:calc(100% + 8px);right:0; background:var(--white);border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.14); overflow:hidden;min-width:130px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:var(--trans-fast);z-index:100; } .lang-btn:focus+.lang-dropdown, .lang-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)} .lang-option{ display:flex;align-items:center;gap:10px; padding:11px 16px;cursor:pointer;font-size:13px; color:var(--text-dark);transition:var(--trans-fast); } .lang-option:hover{background:var(--grey-light);color:var(--gold)} .lang-option.active{color:var(--gold);font-weight:600} /* Nav CTA */ .nav-cta{ background:var(--gold) !important;color:var(--navy) !important; padding:10px 20px !important;border-radius:7px !important; font-size:14px !important;font-weight:700 !important; border:none !important;transition:var(--trans) !important; } .nav-cta:hover{background:var(--gold-light) !important;transform:translateY(-1px) !important} /* Hamburger */ .hamburger{ display:none;flex-direction:column;gap:5px; cursor:pointer;padding:4px;background:none;border:none; } .hamburger span{ display:block;width:24px;height:2px; background:var(--white);border-radius:2px;transition:var(--trans-fast); } #navbar.scrolled .hamburger span{background:var(--navy)} .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .hamburger.open span:nth-child(2){opacity:0;transform:translateX(-8px)} .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} /* Mobile menu overlay */ #mobile-menu{ position:fixed;inset:0;background:var(--navy);z-index:899; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px; transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1); } #mobile-menu.open{transform:translateX(0)} .mobile-links{text-align:center} .mobile-links li{margin-bottom:28px} .mobile-links a{ font-family:'Playfair Display',serif;font-size:34px; color:var(--white);transition:var(--trans-fast); } .mobile-links a:hover{color:var(--gold)} .mobile-lang{display:flex;gap:16px} .mobile-lang button{ background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.7);padding:8px 16px;border-radius:6px; cursor:pointer;font-family:'Inter',sans-serif;font-size:13px; transition:var(--trans-fast); } .mobile-lang button:hover,.mobile-lang button.active{ border-color:var(--gold);color:var(--gold); } /* ════════════════════════════════════════════════ HERO SECTION ════════════════════════════════════════════════ */ #hero{ position:relative;min-height:100svh; display:flex;align-items:center;justify-content:flex-start; overflow:hidden;background:var(--navy); padding-top:80px;padding-bottom:60px; } #neural-canvas{ position:absolute;inset:0;width:100%;height:100%; display:block;cursor:crosshair; } .hero-content{ position:relative;z-index:10;text-align:left; max-width:780px;padding:0 24px 0 7%; } /* Badge */ .hero-badge{ display:inline-flex;align-items:center;gap:9px; background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.35); color:var(--gold);padding:9px 20px;border-radius:100px; font-size:13px;font-weight:600;letter-spacing:.4px; margin-bottom:30px; opacity:0;animation:heroBadge .6s ease .3s forwards; } .badge-dot{ width:7px;height:7px;background:var(--gold); border-radius:50%;flex-shrink:0; animation:pulseDot 1.6s ease-in-out infinite; } @keyframes heroBadge{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}} /* Headline */ .hero-headline{ font-size:clamp(1.6rem,3.5vw,3rem); font-weight:700;color:var(--white); line-height:1.2;margin-bottom:26px; overflow:visible; text-overflow:clip; max-height:none; } .hero-headline .line-gold{ display:block;color:var(--gold);font-style:italic; } .word-wrap{display:inline-block;vertical-align:top} .hero-word{ display:inline-block; opacity:0;transform:translateY(100%); transition:opacity .5s ease,transform .5s ease; } .hero-word.vis{opacity:1;transform:translateY(0)} /* Sub */ .hero-sub{ font-size:clamp(0.9rem,3vw,1.2rem);color:rgba(255,255,255,0.68); max-width:580px;margin:0 0 40px; opacity:0;transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; } .hero-sub.vis{opacity:1;transform:translateY(0)} /* CTAs */ .hero-ctas{ display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:50px; opacity:0;transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; } .hero-ctas.vis{opacity:1;transform:translateY(0)} /* Trust badges */ .trust-row{ display:flex;gap:28px;justify-content:flex-start;flex-wrap:wrap; opacity:0;transform:translateY(12px); transition:opacity .6s ease,transform .6s ease; } .trust-row.vis{opacity:1;transform:translateY(0)} .trust-item{ display:flex;align-items:center;gap:8px; color:rgba(255,255,255,0.65);font-size:13px;font-weight:500; } .check-ring{ width:20px;height:20px;border-radius:50%; border:1.5px solid var(--gold); background:rgba(201,168,76,0.12); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .check-ring svg{width:10px;height:10px} /* Scroll indicator */ .scroll-ind{ position:absolute;bottom:28px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:6px; animation:scrollBounce 2.2s ease-in-out infinite; } .scroll-ind span{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.3)} .scroll-arrow{ width:18px;height:18px; border-right:2px solid rgba(255,255,255,0.3); border-bottom:2px solid rgba(255,255,255,0.3); transform:rotate(45deg); } @keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}55%{transform:translateX(-50%) translateY(9px)}} /* ════════════════════════════════════════════════ MARQUEE ════════════════════════════════════════════════ */ #marquee-section{ background:var(--white);padding:38px 0; overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.06); } .marquee-label{ text-align:center;font-size:11px;letter-spacing:3px; text-transform:uppercase;color:var(--gold);font-weight:700; margin-bottom:20px; } .marquee-track{display:flex;overflow:hidden;gap:0} .marquee-belt{ display:flex;gap:18px;align-items:center; animation:beltScroll 28s linear infinite; flex-shrink:0; } .marquee-belt:hover{animation-play-state:paused} .marquee-item{ display:flex;align-items:center;gap:10px; font-size:14px;font-weight:600;color:var(--text-grey); padding:10px 22px;border:1px solid rgba(0,0,0,0.07); border-radius:100px;background:var(--grey-light);white-space:nowrap; transition:var(--trans-fast); } .marquee-item:hover{border-color:var(--gold);color:var(--gold)} .marquee-item .mi-icon{font-size:19px} @keyframes beltScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ════════════════════════════════════════════════ INDUSTRIES ════════════════════════════════════════════════ */ #industries{background:var(--grey-light)} .section-head{text-align:center;margin-bottom:64px} .industries-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; } .ind-card{ background:linear-gradient(145deg,var(--navy) 0%,var(--navy-light) 100%); border-radius:16px;padding:36px 26px; border:1px solid rgba(255,255,255,0.05); position:relative;overflow:hidden; transition:var(--trans);cursor:default; } .ind-card::after{ content:'';position:absolute; bottom:0;left:0;right:0;height:3px; background:var(--gold); transform:scaleX(0);transform-origin:left; transition:transform .35s ease; } .ind-card:hover{ transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,0.35),0 0 0 1px rgba(201,168,76,0.2); } .ind-card:hover::after{transform:scaleX(1)} .ind-icon{font-size:46px;display:block;margin-bottom:16px} .ind-title{font-size:18px;font-weight:700;color:var(--white);margin-bottom:8px} .ind-desc{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.65} /* ════════════════════════════════════════════════ HOW IT WORKS ════════════════════════════════════════════════ */ #how-it-works{background:var(--navy);overflow:hidden;position:relative} #how-it-works::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,0.06) 0%,transparent 70%); } .steps-row{ display:flex;gap:32px;position:relative;align-items:flex-start; } .step-connector{ position:absolute;top:40px; left:calc(16.666% + 8px);right:calc(16.666% + 8px); height:1px;background:rgba(255,255,255,0.07); z-index:0; } .connector-fill{ height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light)); width:0%;transition:width 1.8s cubic-bezier(.4,0,.2,1); } .connector-fill.drawn{width:100%} .step-card{ flex:1;text-align:center;padding:40px 28px; background:rgba(255,255,255,0.028); border-radius:16px;border:1px solid rgba(255,255,255,0.055); position:relative;z-index:1;transition:var(--trans); } .step-card:hover{background:rgba(255,255,255,0.052);border-color:rgba(201,168,76,0.2)} .step-num-wrap{ width:80px;height:80px;margin:0 auto 22px; position:relative;display:flex;align-items:center;justify-content:center; } .step-circle-svg{position:absolute;inset:0;width:80px;height:80px} .step-ring{ stroke:var(--gold);stroke-width:1.5;fill:none; stroke-dasharray:220;stroke-dashoffset:220; transform:rotate(-90deg);transform-origin:center; transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); } .step-ring.drawn{stroke-dashoffset:0} .step-num{ font-family:'Playfair Display',serif;font-size:30px; font-weight:700;color:var(--gold); } .step-icon{font-size:30px;display:block;margin-bottom:14px} .step-title{font-size:21px;font-weight:700;color:var(--white);margin-bottom:10px} .step-desc{font-size:14px;color:rgba(255,255,255,0.48);line-height:1.75} /* ════════════════════════════════════════════════ SERVICES ════════════════════════════════════════════════ */ #services{background:var(--grey-light)} .services-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } .svc-card{ background:var(--white);border-radius:12px;padding:34px 28px; border:1px solid rgba(0,0,0,0.06); border-left:3px solid var(--gold); box-shadow:var(--card-shadow); transition:var(--trans);position:relative;overflow:hidden; } .svc-card:hover{ background:var(--navy); transform:translateY(-5px); box-shadow:0 20px 60px rgba(10,14,26,0.28),0 0 0 1px rgba(201,168,76,0.25); } .svc-card:hover .svc-title{color:var(--white)} .svc-card:hover .svc-desc{color:rgba(255,255,255,0.48)} .svc-card:hover .svc-icon-box{background:rgba(201,168,76,0.15);border-color:rgba(201,168,76,0.5)} .svc-icon-box{ width:52px;height:52px;border-radius:12px; background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.25); display:flex;align-items:center;justify-content:center; font-size:24px;margin-bottom:18px;transition:var(--trans); } .svc-title{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px;transition:var(--trans)} .svc-desc{font-size:14px;color:var(--text-grey);line-height:1.7;transition:var(--trans)} /* ════════════════════════════════════════════════ STATS ════════════════════════════════════════════════ */ #stats{ background:var(--navy);position:relative;overflow:hidden; } #stats::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px); background-size:52px 52px; } .stats-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:0; position:relative; } .stat-item{ text-align:center;padding:36px 20px; border-right:1px solid rgba(255,255,255,0.06); } .stat-item:last-child{border-right:none} .stat-num{ font-family:'Playfair Display',serif; font-size:clamp(34px,4vw,52px);font-weight:700; color:var(--gold);line-height:1;margin-bottom:10px; } .stat-label{font-size:15px;font-weight:600;color:var(--white);margin-bottom:5px} .stat-desc{font-size:12px;color:rgba(255,255,255,0.36);line-height:1.5} /* ════════════════════════════════════════════════ TESTIMONIALS ════════════════════════════════════════════════ */ #testimonials{background:var(--grey-light)} .testi-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px; } .testi-card{ background:var(--white);border-radius:16px;padding:36px; box-shadow:var(--card-shadow); border-top:3px solid var(--gold); transition:var(--trans); } .testi-card:hover{box-shadow:var(--card-hover);transform:translateY(-4px)} .stars{display:flex;gap:3px;margin-bottom:18px} .star{color:var(--gold);font-size:17px} .testi-quote{ font-size:15.5px;color:var(--text-dark); font-style:italic;line-height:1.8;margin-bottom:22px; } .testi-foot{display:flex;align-items:center;gap:14px} .author-avatar{ width:44px;height:44px;background:var(--gold);border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--white);font-weight:700;font-size:15px;flex-shrink:0; } .author-name{font-weight:700;color:var(--navy);font-size:14px;line-height:1.2} .author-biz{font-size:12px;color:var(--text-grey);margin-top:2px} /* ════════════════════════════════════════════════ SYSTEMS / DASHBOARD ════════════════════════════════════════════════ */ #systems{background:var(--white)} .systems-inner{ display:grid;grid-template-columns:1fr 1fr; gap:80px;align-items:center; } .systems-content .section-label,.systems-content .section-title{text-align:left} .sys-sub{font-size:16px;color:var(--text-grey);line-height:1.8;margin:0 0 28px;max-width:460px} .sys-features{display:flex;flex-direction:column;gap:13px} .sys-features li{ display:flex;align-items:center;gap:12px; font-size:15px;color:var(--text-dark); } .sf-check{ width:22px;height:22px;border-radius:50%;flex-shrink:0; background:rgba(201,168,76,0.1);border:1.5px solid var(--gold); display:flex;align-items:center;justify-content:center; } .sf-check svg{width:11px;height:11px} /* Dashboard card */ .dash-card{ background:var(--navy);border-radius:20px;padding:28px; box-shadow:0 20px 60px rgba(10,14,26,0.22); position:relative;overflow:hidden; } .dash-card::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px); background-size:28px 28px; } .dash-header{ display:flex;align-items:center;justify-content:space-between; margin-bottom:22px;position:relative; } .dash-title{ font-size:11px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:rgba(255,255,255,0.5); } .live-pill{ display:flex;align-items:center;gap:6px; font-size:11px;font-weight:700;color:#00d97e; background:rgba(0,217,126,0.1);border:1px solid rgba(0,217,126,0.2); padding:4px 10px;border-radius:100px; } .live-dot{ width:7px;height:7px;background:#00d97e;border-radius:50%; animation:livePulse 1.5s ease-in-out infinite; } @keyframes livePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(0,217,126,.5)} 50%{box-shadow:0 0 0 5px rgba(0,217,126,0)} } .dash-stats{ display:grid;grid-template-columns:repeat(2,1fr); gap:12px;margin-bottom:18px; } .ds-item{ background:rgba(255,255,255,0.04);border-radius:10px; padding:16px;border:1px solid rgba(255,255,255,0.048); } .ds-num{ font-family:'Playfair Display',serif;font-size:26px; font-weight:700;color:var(--gold); } .ds-lbl{ font-size:10px;text-transform:uppercase;letter-spacing:1px; color:rgba(255,255,255,0.36);margin-top:4px; } .mini-net{ height:110px;background:rgba(255,255,255,0.018); border-radius:10px;overflow:hidden;position:relative; } #mini-canvas{width:100%;height:100%;display:block} /* ════════════════════════════════════════════════ FAQ ════════════════════════════════════════════════ */ #faq{background:var(--white)} .faq-wrap{max-width:740px;margin:0 auto} .faq-item{border-bottom:1px solid rgba(0,0,0,0.08)} .faq-q{ display:flex;align-items:center;justify-content:space-between; padding:22px 0 22px 18px;cursor:pointer; font-size:16px;font-weight:600;color:var(--navy); transition:var(--trans-fast); border-left:3px solid transparent;margin-left:-18px; list-style:none; } .faq-q::marker,.faq-q::-webkit-details-marker{display:none} .faq-q:hover{color:var(--gold)} .faq-item.open .faq-q{color:var(--gold);border-left-color:var(--gold)} .faq-plus{ width:30px;height:30px;border:1.5px solid var(--gold); border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:20px;font-weight:300;line-height:1; transition:transform .3s ease;flex-shrink:0; user-select:none; } .faq-item.open .faq-plus{transform:rotate(45deg)} .faq-ans{ max-height:0;overflow:hidden; transition:max-height .4s ease,padding .4s ease; padding:0 18px; } .faq-item.open .faq-ans{max-height:280px;padding:0 18px 20px} .faq-ans p{font-size:15px;color:var(--text-grey);line-height:1.85} /* ════════════════════════════════════════════════ FINAL CTA ════════════════════════════════════════════════ */ #cta-final{ background:var(--navy);text-align:center; position:relative;overflow:hidden; } #cta-final::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(201,168,76,0.07) 0%,transparent 70%); } .cta-title{ font-size:clamp(30px,4.5vw,54px); color:var(--white);margin-bottom:14px; } .cta-sub{ font-size:17px;color:rgba(255,255,255,0.5); margin-bottom:42px;max-width:500px;margin-left:auto;margin-right:auto; } .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════ */ #footer{ background:var(--white); border-top:3px solid var(--gold); padding:64px 0 32px; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr; gap:48px;margin-bottom:52px; } .footer-brand .logo-text{ font-family:'Playfair Display',serif;font-size:21px; font-weight:700;color:var(--navy);margin:10px 0 12px; } .footer-tagline{font-size:14px;color:var(--text-grey);line-height:1.65;max-width:260px} .footer-col-title{ font-size:11px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:var(--navy);margin-bottom:20px; } .footer-links{display:flex;flex-direction:column;gap:11px} .footer-links a{font-size:14px;color:var(--text-grey);transition:var(--trans-fast)} .footer-links a:hover{color:var(--gold)} .footer-contact-line{ display:flex;align-items:center;gap:9px; font-size:14px;color:var(--text-grey);margin-bottom:9px; } .footer-contact-line a{color:var(--text-grey);transition:var(--trans-fast)} .footer-contact-line a:hover{color:var(--gold)} .social-row{display:flex;gap:10px;margin-top:18px} .social-btn{ width:36px;height:36px;border:1px solid rgba(0,0,0,0.11); border-radius:8px;display:flex;align-items:center;justify-content:center; color:var(--text-grey);font-size:15px;transition:var(--trans-fast); text-decoration:none; } .social-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.05)} .footer-bottom{ border-top:1px solid rgba(0,0,0,0.07);padding-top:24px; display:flex;align-items:center;justify-content:space-between; font-size:13px;color:var(--text-light); } /* ════════════════════════════════════════════════ PAGE HERO BANNERS (non-home pages) ════════════════════════════════════════════════ */ .page-hero{ background:var(--navy); padding:160px 0 90px; text-align:center; position:relative;overflow:hidden; } .page-hero::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,0.08) 0%,transparent 60%); } .page-hero-label{color:var(--gold);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;margin-bottom:14px;display:block} .page-hero-title{font-size:clamp(36px,5vw,62px);color:var(--white);margin-bottom:18px} .page-hero-sub{font-size:17px;color:rgba(255,255,255,0.55);max-width:560px;margin:0 auto} /* ════════════════════════════════════════════════ PRICING PAGE ════════════════════════════════════════════════ */ #pricing-section{background:var(--grey-light)} .pricing-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:28px;max-width:1060px;margin:0 auto; align-items:start; } .price-card{ background:var(--white);border-radius:20px;padding:40px 32px; box-shadow:var(--card-shadow); border:1px solid rgba(0,0,0,0.06); position:relative;transition:var(--trans); } .price-card:hover:not(.featured){transform:translateY(-5px);box-shadow:var(--card-hover)} .price-card.featured{ background:var(--navy); border-color:rgba(201,168,76,0.3); transform:scale(1.04); box-shadow:0 24px 70px rgba(10,14,26,0.28),0 0 0 1px rgba(201,168,76,0.2); } .price-badge{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--gold);color:var(--navy); font-size:11px;font-weight:800; padding:5px 18px;border-radius:100px; letter-spacing:1px;text-transform:uppercase;white-space:nowrap; } .plan-name{ font-size:11px;font-weight:700;letter-spacing:2.5px; text-transform:uppercase;color:var(--gold);margin-bottom:10px; } .plan-price{ font-family:'Playfair Display',serif; font-size:54px;font-weight:700; color:var(--navy);line-height:1;margin-bottom:5px; } .price-card.featured .plan-price{color:var(--white)} .plan-per{font-size:14px;color:var(--text-grey);margin-bottom:22px} .price-card.featured .plan-per{color:rgba(255,255,255,0.45)} .plan-desc{ font-size:14px;color:var(--text-grey);line-height:1.65; padding-bottom:22px;margin-bottom:22px; border-bottom:1px solid rgba(0,0,0,0.07); } .price-card.featured .plan-desc{ color:rgba(255,255,255,0.48); border-bottom-color:rgba(255,255,255,0.08); } .plan-features{margin-bottom:32px;display:flex;flex-direction:column;gap:11px} .plan-features li{ display:flex;align-items:center;gap:10px; font-size:14px;color:var(--text-dark); } .price-card.featured .plan-features li{color:rgba(255,255,255,0.8)} .pf-check{ width:19px;height:19px;border-radius:50%;flex-shrink:0; background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.35); display:flex;align-items:center;justify-content:center; font-size:11px;color:var(--gold);font-weight:700; } .btn-plan{ display:block;width:100%;padding:15px;border-radius:8px; font-size:15px;font-weight:700;text-align:center; font-family:'Inter',sans-serif;cursor:pointer;border:none; transition:var(--trans); } .btn-plan-outline{ background:transparent;border:2px solid var(--gold) !important; color:var(--navy); } .btn-plan-outline:hover{background:var(--gold);color:var(--navy)} .btn-plan-gold{ background:var(--gold);color:var(--navy); border:2px solid var(--gold) !important; } .btn-plan-gold:hover{ background:var(--gold-light); transform:translateY(-2px);box-shadow:0 10px 30px var(--gold-glow); } .pricing-trust{ display:flex;gap:32px;justify-content:center; flex-wrap:wrap;margin-top:52px; } .pt-item{ display:flex;align-items:center;gap:8px; font-size:13px;font-weight:500;color:var(--text-grey); } .pt-item::before{content:'✓';color:var(--gold);font-weight:700} /* ════════════════════════════════════════════════ CONTACT PAGE ════════════════════════════════════════════════ */ #contact-section{background:var(--grey-light)} .contact-grid{ display:grid;grid-template-columns:1fr 1fr; gap:60px;align-items:start; max-width:1000px;margin:0 auto; } .contact-form-card{ background:var(--white);border-radius:20px;padding:48px; box-shadow:var(--card-shadow); } .form-group{margin-bottom:20px} .form-label{ display:block;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.6px; color:var(--navy);margin-bottom:8px; } .form-input,.form-textarea,.form-select{ width:100%;padding:13px 16px; border:1.5px solid rgba(0,0,0,0.11); border-radius:8px;font-size:15px; font-family:'Inter',sans-serif;color:var(--text-dark); background:var(--white);transition:var(--trans-fast);outline:none; appearance:none; } .form-input:focus,.form-textarea:focus,.form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.1); } .form-textarea{height:120px;resize:vertical} .btn-submit{ width:100%;padding:16px;background:var(--gold);color:var(--navy); border:none;border-radius:8px;font-size:16px;font-weight:700; font-family:'Inter',sans-serif;cursor:pointer;transition:var(--trans); } .btn-submit:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px var(--gold-glow)} .contact-info-card{ background:var(--navy);border-radius:20px;padding:48px; position:sticky;top:100px; } .ci-title{font-size:28px;font-weight:700;color:var(--white);margin-bottom:8px} .ci-sub{font-size:15px;color:rgba(255,255,255,0.48);margin-bottom:38px} .ci-items{display:flex;flex-direction:column;gap:22px} .ci-item{display:flex;gap:16px;align-items:flex-start} .ci-icon{ width:44px;height:44px;flex-shrink:0; background:rgba(201,168,76,0.08);border:1px solid rgba(201,168,76,0.18); border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:19px; } .ci-text strong{display:block;font-size:14px;color:var(--white);margin-bottom:4px} .ci-text a,.ci-text span{font-size:14px;color:rgba(255,255,255,0.48);transition:var(--trans-fast)} .ci-text a:hover{color:var(--gold)} /* ════════════════════════════════════════════════ SERVICES PAGE ════════════════════════════════════════════════ */ .svc-section{padding:100px 0} .svc-section:nth-child(even){background:var(--grey-light)} .svc-section:nth-child(odd){background:var(--white)} .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .svc-section:nth-child(even) .svc-row{direction:rtl} .svc-section:nth-child(even) .svc-row > *{direction:ltr} .svc-illus{ background:var(--navy);border-radius:20px; height:300px;display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; } .svc-illus::before{ content:'';position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px); background-size:28px 28px; } .svc-illus-icon{ font-size:88px;position:relative;z-index:1; filter:drop-shadow(0 0 24px rgba(201,168,76,0.45)); } .svc-detail-label{color:var(--gold);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;margin-bottom:10px;display:block} .svc-detail-title{font-size:clamp(26px,3.5vw,38px);color:var(--navy);margin-bottom:14px} .svc-detail-desc{font-size:16px;color:var(--text-grey);line-height:1.8;margin-bottom:24px} .svc-detail-list{display:flex;flex-direction:column;gap:11px} .svc-detail-list li{ display:flex;align-items:center;gap:12px; font-size:15px;color:var(--text-dark); } .sdl-check{ width:22px;height:22px;border-radius:50%;flex-shrink:0; background:rgba(201,168,76,0.1);border:1.5px solid var(--gold); display:flex;align-items:center;justify-content:center; color:var(--gold);font-size:12px;font-weight:700; } /* ════════════════════════════════════════════════ MEDIA QUERIES ════════════════════════════════════════════════ */ @media (max-width:1100px){ .industries-grid{grid-template-columns:repeat(3,1fr)} .services-grid{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(3,1fr)} .stats-grid .stat-item:nth-child(3){border-right:none} .stats-grid .stat-item:nth-child(4),.stats-grid .stat-item:nth-child(5){border-right:none} .footer-grid{grid-template-columns:repeat(2,1fr)} .pricing-grid{grid-template-columns:1fr;max-width:440px} .price-card.featured{transform:scale(1)} .systems-inner{grid-template-columns:1fr;gap:48px} .contact-grid{grid-template-columns:1fr} .svc-row{grid-template-columns:1fr;gap:40px} .svc-section:nth-child(even) .svc-row{direction:ltr} } @media (max-width:768px){ /* ── Safari/Mobile base ── */ body{-webkit-overflow-scrolling:touch} section{min-height:auto} /* Layout */ .container{padding:0 20px} section{padding:60px 0} img{max-width:100%;height:auto} /* Navbar */ #navbar{padding:14px 20px} #navbar.scrolled{padding:10px 20px} .nav-links,.nav-right .lang-switcher,.nav-right .nav-cta{display:none !important} .hamburger{display:flex} /* Hero — Safari svh fix */ #hero{min-height:100svh;overflow:hidden;padding-top:80px;padding-bottom:60px} .hero-content{padding:100px 20px 60px;text-align:left} .hero-ctas{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px} .hero-ctas .btn-primary,.hero-ctas .btn-outline-gold{width:100%;text-align:center} /* Headline override for mobile */ h1{font-size:clamp(1.6rem,5vw,2.8rem) !important;line-height:1.3} .hero-sub{font-size:clamp(0.9rem,3vw,1.1rem) !important} /* Trust badges — 2×2 grid */ .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px} /* Grids — all collapse to 1 column */ .industries-grid{grid-template-columns:1fr} .services-grid{grid-template-columns:1fr} .testi-grid{grid-template-columns:1fr} .old-way-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:32px} .systems-inner{grid-template-columns:1fr;gap:40px} .contact-grid{grid-template-columns:1fr} .dash-stats{grid-template-columns:1fr 1fr} /* Stats — 2×2 */ .stats-grid{grid-template-columns:repeat(2,1fr)} .stat-item{border-right:none !important;border-bottom:1px solid rgba(255,255,255,0.06)} .stat-item:last-child{border-bottom:none} /* Cards — all full width */ .price-card{width:100%} .pricing-grid{grid-template-columns:1fr;max-width:100%} .price-card.featured{transform:scale(1)} .svc-card{width:100%} .ind-card{width:100%} .testi-card{width:100%} .old-way-card{width:100%} .step-card{width:100%} /* Flexbox wrapping */ .steps-row{flex-direction:column;flex-wrap:wrap} .step-connector{display:none} .step-card{padding:32px 24px} .footer-bottom{flex-direction:column;gap:8px;text-align:center} /* CTA buttons */ .cta-btns{flex-direction:column;align-items:center;gap:12px} .cta-btns .btn-primary,.cta-btns .btn-outline-gold{width:100%;max-width:340px;text-align:center} /* Contact */ .contact-form-card{padding:28px 20px} .contact-info-card{padding:28px 20px;position:static} /* Page heroes */ .page-hero{padding:120px 0 60px} /* Misc */ #cursor-dot,#cursor-ring{display:none} .hero-badge{font-size:12px;padding:7px 14px} } @media (max-width:480px){ /* Tighter section padding on small phones */ section{padding:40px 0} .container{padding:0 16px} /* Hero — iPhone SE safe */ #hero{min-height:100svh;overflow:hidden;padding-top:80px;padding-bottom:60px} .hero-content{padding:100px 16px 60px} .hero-badge{font-size:11px;padding:6px 12px;margin-bottom:20px} .hero-headline{margin-bottom:18px} .hero-sub{margin-bottom:28px} .hero-ctas{margin-bottom:24px} /* Grids */ .industries-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr)} /* Cards */ .price-card{padding:24px 18px} .testi-card{padding:24px 20px} /* Steps */ .step-card{padding:24px 16px} .step-title{font-size:18px} /* Page heroes */ .page-hero{padding:100px 0 50px} .page-hero-title{font-size:clamp(1.6rem,6vw,2.2rem)} /* Mobile nav font */ .mobile-links a{font-size:28px} /* Misc spacing */ .section-head{margin-bottom:40px} .systems-inner{gap:32px} } /* ════════════════════════════════════════════════ OLD WAY SECTION (index.html) ════════════════════════════════════════════════ */ .old-way-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:28px; } .old-way-card{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-top:3px solid #e54040; border-radius:14px;padding:36px 28px; transition:var(--trans); } .old-way-card:hover{background:rgba(255,255,255,0.07);transform:translateY(-4px)} .old-way-icon{font-size:28px;margin-bottom:16px} .old-way-card-title{ font-family:'Playfair Display',serif; font-size:21px;color:var(--white); margin-bottom:14px;line-height:1.2; } .old-way-card-text{ font-size:15px;color:rgba(255,255,255,0.65); line-height:1.7; } @media (max-width:900px){ .old-way-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto} } /* ════════════════════════════════════════════════ COMPARISON TABLE (index.html) ════════════════════════════════════════════════ */ .comparison-table{ max-width:900px;margin:0 auto; border-radius:16px;overflow:hidden; box-shadow:var(--card-shadow); /* mobile override via media query switches to overflow-x:auto */ } .comparison-header{ display:grid;grid-template-columns:2fr 1fr 1fr; background:var(--navy);color:var(--white); } .comp-col-label{ padding:18px 24px;font-size:14px; font-weight:700;letter-spacing:1px;text-transform:uppercase; color:rgba(255,255,255,0.5); } .comp-col-label.comp-new{ background:var(--navy);color:var(--gold);border-left:1px solid rgba(201,168,76,0.2); } .comp-col-label.comp-old{ background:#1a1e2e;border-left:1px solid rgba(255,255,255,0.06); } .comparison-row{ display:grid;grid-template-columns:2fr 1fr 1fr; border-bottom:1px solid rgba(0,0,0,0.06); } .comparison-row:last-child{border-bottom:none} .comp-feature{ padding:18px 24px;font-size:15px;font-weight:600; color:var(--text-dark);background:var(--white); display:flex;align-items:center; } .comp-old-val{ padding:18px 24px;font-size:14px; color:var(--text-grey);background:#f8f8f8; border-left:1px solid rgba(0,0,0,0.06); display:flex;align-items:center;gap:8px; } .comp-new-val{ padding:18px 24px;font-size:14px;font-weight:600; color:var(--white);background:var(--navy); border-left:1px solid rgba(201,168,76,0.15); display:flex;align-items:center;gap:8px; } .comp-x{color:#e54040;font-style:normal;flex-shrink:0} .comp-check-gold{color:var(--gold);font-style:normal;flex-shrink:0} @media (max-width:768px){ /* Horizontally scrollable comparison table */ .comparison-table{ overflow-x:auto;overflow-y:visible; -webkit-overflow-scrolling:touch; border-radius:16px; } .comparison-header,.comparison-row{ grid-template-columns:140px 130px 150px; min-width:420px; } .comp-feature,.comp-old-val,.comp-new-val{padding:14px 14px;font-size:13px} .comp-col-label{padding:14px 14px;font-size:12px} } @media (max-width:480px){ .comparison-header,.comparison-row{ grid-template-columns:120px 120px 140px; min-width:380px; } .comp-feature,.comp-old-val,.comp-new-val{padding:12px 10px;font-size:12px} .comp-col-label{padding:12px 10px;font-size:11px} } /* ════════════════════════════════════════════════ WHY SPEED MATTERS PAGE STYLES ════════════════════════════════════════════════ */ /* WSM Hero */ .wsm-hero{ position:relative;min-height:100svh; background:var(--navy); display:flex;align-items:center;justify-content:center; overflow:hidden; } .wsm-hero-bg{ position:absolute;inset:0; background-image:var(--hero-bg-url); background-size:cover;background-position:center; opacity:.15; transition:transform 10s ease; } .wsm-hero-overlay{ position:absolute;inset:0; background:rgba(10,14,26,0.85); } .wsm-hero-content{ position:relative;z-index:10; text-align:center;max-width:900px; padding:140px 40px 120px; } .wsm-hero-label{ display:inline-block; font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--gold);font-weight:700; background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.3); padding:8px 20px;border-radius:100px; margin-bottom:28px; } .wsm-hero-title{ font-family:'Playfair Display',serif; font-size:clamp(2.2rem,6vw,4.5rem); font-weight:700;color:var(--white); line-height:1.1;margin-bottom:26px; } .wsm-hero-sub{ font-size:clamp(16px,2vw,19px); color:rgba(255,255,255,0.72); line-height:1.75;max-width:760px;margin:0 auto 60px; } .wsm-hero-stats{ display:flex;gap:60px;justify-content:center; flex-wrap:wrap; } .wsm-hero-stat{text-align:center} .wsm-hero-stat-num{ font-family:'Playfair Display',serif; font-size:clamp(2.4rem,5vw,3.8rem); color:var(--gold);font-weight:700;line-height:1; margin-bottom:8px; } .wsm-hero-stat-label{ font-size:13px;color:rgba(255,255,255,0.55); line-height:1.4;max-width:180px;margin:0 auto; } /* WSM Section — General */ .wsm-section{padding:100px 0} .wsm-section-light{background:var(--grey-light)} .wsm-section-white{background:var(--white)} .wsm-section-navy{background:var(--navy)} .wsm-section-gold{background:var(--gold)} /* WSM Split Layout */ .wsm-split{ display:grid;grid-template-columns:1fr 1fr; gap:80px;align-items:center; } .wsm-split-reverse{direction:rtl} .wsm-split-reverse > *{direction:ltr} .wsm-split-text{} .wsm-split-image img{ width:100%;border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.15); object-fit:cover;height:420px; } .wsm-split-title{ font-family:'Playfair Display',serif; font-size:clamp(26px,3.5vw,38px); color:var(--navy);line-height:1.2; margin-bottom:22px; } .wsm-split-para{ font-size:16px;color:var(--text-grey); line-height:1.8;margin-bottom:18px; } .wsm-gold-quote{ background:rgba(201,168,76,0.08); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; padding:22px 26px;margin-top:28px; } .wsm-gold-quote p{ font-family:'Playfair Display',serif; font-size:17px;color:var(--navy); line-height:1.6;font-style:italic; } /* WSM Bar Chart */ .wsm-chart-wrap{ max-width:900px;margin:0 auto; padding:0 20px; } .wsm-chart-bars{ display:flex;gap:16px;align-items:flex-end; height:360px;padding-bottom:40px; border-bottom:2px solid rgba(0,0,0,0.1); margin-bottom:12px; } .wsm-bar-col{ display:flex;flex-direction:column; align-items:center;justify-content:flex-end; flex:1;min-width:0; } .wsm-bar-pct{ font-size:clamp(10px,1.4vw,15px); font-weight:700;color:var(--navy); margin-bottom:6px;text-align:center; } .wsm-bar{ width:100%;border-radius:8px 8px 0 0; height:0;transition:height 1.2s cubic-bezier(.25,.46,.45,.94); } .wsm-bar.gold{background:var(--gold)} .wsm-bar.navy{background:var(--navy)} .wsm-bar.grey-med{background:#8592a8} .wsm-bar.grey-light{background:#b0bac8} .wsm-bar.grey-vlight{background:#cdd4dd} .wsm-bar.grey-near{background:#e2e6ea;border:2px solid #c5ccd4} .wsm-chart-labels{ display:flex;gap:16px; } .wsm-chart-label{ flex:1;text-align:center; font-size:clamp(9px,1.2vw,12px); color:var(--text-grey);line-height:1.3; padding:0 2px; } .wsm-chart-source{ text-align:center;font-size:12px; color:var(--text-light);margin-top:16px; font-style:italic; } .wsm-insight-box{ background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.25); border-radius:14px;padding:28px 32px; margin-top:40px; } .wsm-insight-box p{ font-size:16px;line-height:1.75; color:var(--navy);text-align:center; } /* WSM Six Stats */ .wsm-stats-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:28px; } .wsm-stat-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:14px;padding:36px 28px; transition:var(--trans); } .wsm-stat-card:hover{ background:rgba(255,255,255,0.09); transform:translateY(-4px); } .wsm-stat-num{ font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); color:var(--gold);font-weight:700; line-height:1;margin-bottom:8px; } .wsm-stat-title{ font-size:17px;font-weight:600; color:var(--white);margin-bottom:10px; } .wsm-stat-desc{ font-size:14px;color:rgba(255,255,255,0.6); line-height:1.7;margin-bottom:10px; } .wsm-stat-source{ font-size:11px;letter-spacing:1px; text-transform:uppercase;color:var(--gold); font-weight:600;opacity:.7; } /* WSM Cost Calculator */ .wsm-calc-card{ max-width:680px;margin:0 auto; background:var(--white); border:2px solid var(--gold); border-radius:20px;padding:48px; } .wsm-calc-step{ display:flex;gap:20px; align-items:flex-start; padding:18px 0; border-bottom:1px solid rgba(0,0,0,0.07); } .wsm-calc-step:last-of-type{border-bottom:none} .wsm-step-num{ width:32px;height:32px;flex-shrink:0; background:var(--gold);color:var(--navy); border-radius:50%;display:flex; align-items:center;justify-content:center; font-size:13px;font-weight:700; } .wsm-step-text{ font-size:16px;color:var(--text-dark);line-height:1.5; padding-top:5px; } .wsm-calc-divider{ height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:24px 0; } .wsm-calc-cost{ text-align:center; font-size:16px;color:var(--text-grey); margin-bottom:16px; } .wsm-calc-result{ text-align:center; font-family:'Playfair Display',serif; font-size:clamp(18px,3vw,26px); color:var(--gold);font-weight:700; line-height:1.3; } .wsm-section-image{ width:100%;height:400px; object-fit:cover; border-radius:0; display:block; position:relative; } .wsm-section-image-wrap{ position:relative; margin-bottom:60px; } .wsm-section-image-wrap::after{ content:'';position:absolute;inset:0; background:rgba(10,14,26,0.35); border-radius:0; } /* WSM AI Advantage */ .wsm-advantage-list{ list-style:none;padding:0;margin:24px 0; display:flex;flex-direction:column;gap:20px; } .wsm-advantage-item{ display:flex;gap:16px;align-items:flex-start; } .wsm-adv-check{ width:28px;height:28px;flex-shrink:0; background:rgba(201,168,76,0.12); color:var(--gold);border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;margin-top:2px; } .wsm-adv-text{ font-size:16px;color:var(--text-grey);line-height:1.6; } .wsm-adv-text strong{color:var(--navy);font-weight:600} /* WSM Stories */ .wsm-stories-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:28px; } .wsm-story-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:16px;overflow:hidden; transition:var(--trans); } .wsm-story-card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,0.3); } .wsm-story-before{ background:#3a1a1a; border-bottom:2px solid #e54040; padding:20px 24px; } .wsm-story-after{ background:#0f2a1a; border-bottom:2px solid #2ecc71; padding:20px 24px; } .wsm-story-label{ font-size:11px;letter-spacing:2px;text-transform:uppercase; font-weight:700;margin-bottom:8px; } .wsm-story-before .wsm-story-label{color:#e54040} .wsm-story-after .wsm-story-label{color:#2ecc71} .wsm-story-text{ font-size:14px;line-height:1.65; color:rgba(255,255,255,0.75); } .wsm-story-footer{ padding:20px 24px; } .wsm-story-name{ font-weight:600;color:var(--white);font-size:15px; } .wsm-story-biz{ font-size:13px;color:rgba(255,255,255,0.5);margin-top:2px; } .wsm-story-stars{ color:var(--gold);font-size:16px;margin-top:10px; } /* WSM Final CTA */ .wsm-cta-section{ background:var(--gold);padding:100px 0;text-align:center; } .wsm-cta-title{ font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); color:var(--navy);font-weight:700; line-height:1.15;margin-bottom:20px; } .wsm-cta-sub{ font-size:18px;color:rgba(10,14,26,0.7); margin-bottom:40px;line-height:1.6; } .wsm-cta-btn{ display:inline-block; background:var(--navy);color:var(--white); padding:18px 44px;border-radius:10px; font-weight:700;font-size:16px; transition:var(--trans); box-shadow:0 8px 30px rgba(10,14,26,0.25); } .wsm-cta-btn:hover{ background:var(--navy-light);transform:translateY(-2px); box-shadow:0 14px 40px rgba(10,14,26,0.35); } .wsm-cta-email{ margin-top:20px;font-size:14px; color:rgba(10,14,26,0.6); } .wsm-cta-email a{color:var(--navy);font-weight:600;text-decoration:underline} /* Responsive WSM */ @media (max-width:900px){ .wsm-split,.wsm-split-reverse{ grid-template-columns:1fr;direction:ltr;gap:40px; } .wsm-stats-grid{grid-template-columns:repeat(2,1fr)} .wsm-stories-grid{grid-template-columns:1fr} .wsm-chart-bars{height:240px} .wsm-hero-stats{gap:36px} } @media (max-width:600px){ .wsm-stats-grid{grid-template-columns:1fr} .wsm-calc-card{padding:28px 20px} .wsm-hero-content{padding:120px 20px 60px} .wsm-chart-bars{gap:6px;height:200px} .wsm-bar-pct{font-size:10px} .wsm-chart-label{font-size:9px} .wsm-cta-section{padding:60px 0} .wsm-section{padding:60px 0} .wsm-split-image img{height:240px} .wsm-hero-stats{flex-direction:column;gap:24px} .wsm-calc-step{flex-direction:column;gap:10px} } /* ════════════════════════════════════════════════ SITE-CREDIBILITY-UPDATE ADDITIONS ════════════════════════════════════════════════ */ /* Source label on Results stat cards */ .stat-src{ font-size:11px;color:rgba(201,168,76,0.7); margin-top:8px;letter-spacing:.3px; } /* Systems section now single-column (live-dashboard widget removed) */ #systems .systems-inner{ grid-template-columns:1fr;max-width:760px;margin:0 auto; } /* ── Industry-shift (momentum) section ── */ #momentum{background:var(--grey-light)} .shift-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px; margin-bottom:64px; } .shift-card{ background:var(--white);border-radius:16px;padding:32px 26px; box-shadow:var(--card-shadow); border-top:3px solid var(--gold); transition:var(--trans);text-align:left; } .shift-card:hover{box-shadow:var(--card-hover);transform:translateY(-4px)} .shift-num{ font-family:'Playfair Display',serif; font-size:clamp(34px,3.4vw,46px);font-weight:700; color:var(--gold);line-height:1;margin-bottom:10px; } .shift-label{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px} .shift-desc{font-size:13.5px;color:var(--text-grey);line-height:1.6;margin-bottom:14px} .shift-src{font-size:11px;color:var(--text-light);letter-spacing:.3px} /* Bar chart (2025 vs 2026) */ .shift-chart-wrap{ background:var(--white);border-radius:20px; padding:44px 32px 32px;max-width:680px;margin:0 auto; box-shadow:var(--card-shadow);text-align:center; } .shift-chart-title{ font-family:'Playfair Display',serif;font-size:clamp(20px,2.4vw,26px); color:var(--navy);margin-bottom:36px; } .shift-chart{max-width:420px;margin:0 auto} .shift-bars{ display:flex;align-items:flex-end;justify-content:center; gap:72px;height:240px; } .shift-bar-col{ display:flex;flex-direction:column;justify-content:flex-end; align-items:center;height:100%;width:104px; } .shift-bar{ width:104px;border-radius:12px 12px 0 0;position:relative; transition:height 1s cubic-bezier(0.4,0,0.2,1);min-height:4px; } .shift-bar.navy{background:linear-gradient(180deg,var(--navy-light),var(--navy))} .shift-bar.gold{background:linear-gradient(180deg,var(--gold-light),var(--gold))} .shift-bar-pct{ position:absolute;top:-34px;left:0;right:0;text-align:center; font-family:'Playfair Display',serif;font-weight:700; font-size:24px;color:var(--navy); } .shift-years{display:flex;justify-content:center;gap:72px;margin-top:14px} .shift-years span{ width:104px;text-align:center;font-size:14px;font-weight:600; color:var(--text-grey); } .shift-chart-cap{font-size:13px;color:var(--text-grey);margin-top:22px} .shift-chart-src{font-size:12px;color:var(--text-light);margin-top:6px} /* ── Footer legal links ── */ .footer-legal{display:inline-flex;align-items:center;gap:10px} .footer-legal a{color:inherit;text-decoration:none;transition:var(--trans-fast)} .footer-legal a:hover{color:var(--gold)} .footer-legal-sep{opacity:.5} /* ── Legal pages (Impressum / Datenschutz) ── */ .legal-section{background:var(--grey-light);padding:64px 0 90px} .legal-body{max-width:780px;margin:0 auto} .legal-body h2{ font-family:'Playfair Display',serif;font-size:clamp(20px,2.4vw,26px); color:var(--navy);margin:38px 0 12px; } .legal-body h2:first-child{margin-top:0} .legal-body p,.legal-body li{ font-size:15px;color:var(--text-dark);line-height:1.8;margin-bottom:12px; } .legal-body ul{padding-left:22px;margin-bottom:12px} .legal-placeholder{ background:rgba(201,168,76,0.12); border:1px dashed var(--gold-dark);border-radius:5px; padding:1px 7px;font-weight:600;color:var(--gold-dark); font-family:'Inter',sans-serif;white-space:nowrap; } .legal-note{ background:rgba(201,168,76,0.08); border-left:3px solid var(--gold);border-radius:0 10px 10px 0; padding:18px 22px;margin:0 0 40px; font-size:14px;color:var(--text-grey);line-height:1.7; } .legal-updated{font-size:13px;color:var(--text-light);margin-top:40px} /* ── Mobile hero fix ── */ /* 1. Vertical: anchor content to the top so a hero taller than the viewport can't be centred (and clipped) by overflow:hidden. 2. Horizontal: let the flex item shrink below its min-content width (flex default is min-width:auto) so the headline/sub wrap inside the viewport instead of overflowing off the right edge. */ @media (max-width:768px){ #hero{align-items:flex-start} .hero-content{min-width:0;max-width:100%;width:100%} .hero-headline,.hero-sub{max-width:100%;overflow-wrap:break-word} .shift-grid{grid-template-columns:1fr 1fr;gap:16px} .shift-card{padding:24px 20px} .shift-bars,.shift-years{gap:48px} } @media (max-width:480px){ .shift-grid{grid-template-columns:1fr} .shift-chart-wrap{padding:32px 18px 24px} .shift-bars,.shift-years{gap:32px} .shift-bar,.shift-bar-col,.shift-years span{width:84px} }