:root{ --bg:#040b12; --bg-2:#081523; --card:#0b1726; --card-2:#102033; --line:rgba(104,177,255,.18); --line-strong:rgba(84,194,255,.42); --text:#edf7ff; --muted:#97adc3; --muted-2:#b6c8d9; --blue:#28c8ff; --blue-2:#3087ff; --blue-3:#77ddff; --accent:#72cfff; --shadow:0 24px 70px rgba(0,0,0,.48); --radius:24px; --radius-sm:18px; --wrap:min(1240px, calc(100vw - 32px)); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: radial-gradient(circle at top right, rgba(23,107,181,.14), transparent 34%), radial-gradient(circle at left 10%, rgba(11,89,145,.08), transparent 30%), linear-gradient(180deg, #040b12 0%, #07111d 34%, #060f17 100%); overflow-x:hidden; } a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} img{max-width:100%;display:block} .wrap{width:var(--wrap);margin-inline:auto} .section{padding:88px 0;position:relative} .eyebrow{ margin:0 0 12px; color:var(--blue-3); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; font-weight:800; } h1,h2,h3,h4{margin:0;line-height:.96} h1,h2{font-family:Georgia, 'Times New Roman', serif;font-weight:700;letter-spacing:-.03em} h1{font-size:clamp(3rem,7vw,5.4rem)} h2{font-size:clamp(2.1rem,4.2vw,3.4rem)} h3{font-size:1.15rem} p{margin:0} .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease} .reveal.is-visible{opacity:1;transform:none} .reveal-delay{transition-delay:.12s} .reveal-delay-2{transition-delay:.24s} .site-bg{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden} .bg-square,.bg-line,.bg-glow{position:absolute;display:block} .bg-square{ border:1px solid rgba(92,196,255,.2); box-shadow:0 0 30px rgba(17,122,205,.08), inset 0 0 24px rgba(76,177,255,.06); animation:floatSquare 16s ease-in-out infinite; backdrop-filter:blur(1px); } .bg-square.s1{top:140px;left:4vw;width:56px;height:56px;animation-delay:-1s} .bg-square.s2{top:28vh;right:9vw;width:70px;height:70px;animation-delay:-6s} .bg-square.s3{top:68vh;left:12vw;width:44px;height:44px;animation-delay:-3s} .bg-square.s4{top:82vh;right:18vw;width:62px;height:62px;animation-delay:-9s} .bg-square.s5{top:14vh;right:40vw;width:36px;height:36px;animation-delay:-12s} .bg-line{height:1px;background:linear-gradient(90deg, transparent, rgba(65,190,255,.45), transparent);animation:floatLine 14s linear infinite} .bg-line.l1{top:25%;left:-12%;width:38%} .bg-line.l2{top:58%;right:-8%;width:32%;animation-delay:-5s} .bg-line.l3{top:77%;left:15%;width:24%;animation-delay:-9s} .bg-glow{border-radius:50%;filter:blur(80px);opacity:.35} .bg-glow.g1{width:340px;height:340px;top:4%;right:-100px;background:rgba(0,164,255,.18)} .bg-glow.g2{width:320px;height:320px;bottom:10%;left:-120px;background:rgba(0,104,206,.18)} @keyframes floatSquare{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(4deg)}} @keyframes floatLine{0%{transform:translateX(0)}50%{transform:translateX(30px)}100%{transform:translateX(0)}} .demo-bar{ background:linear-gradient(90deg, rgba(18,37,56,.94), rgba(8,21,34,.92)); border-bottom:1px solid var(--line); padding:11px 16px; text-align:center; color:#d9e8f6; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; } .header{position:sticky;top:0;z-index:30;background:rgba(4,11,18,.76);backdrop-filter:blur(16px);border-bottom:1px solid rgba(132,191,255,.09)} .nav-shell{display:flex;align-items:center;gap:24px;padding:16px 0} .brand img{width:220px;max-width:42vw} .nav{display:flex;gap:22px;align-items:center;margin-left:auto} .nav a{color:#e4f4ff;font-size:.96rem;position:relative;padding:8px 0} .nav a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;background:linear-gradient(90deg,var(--blue),var(--blue-2))} .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)} .nav-meta{display:flex;align-items:center;gap:12px} .nav-phone{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(11,23,38,.76);color:#def1ff;font-weight:600} .menu-toggle{display:none;width:48px;height:48px;border-radius:16px;border:1px solid var(--line);background:rgba(10,20,33,.92);padding:0;cursor:pointer} .menu-toggle span{display:block;height:2px;width:20px;background:#fff;border-radius:99px;margin:5px auto;transition:transform .3s ease, opacity .3s ease} body.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .menu-toggle span:nth-child(2){opacity:0} body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:999px;font-weight:800;letter-spacing:.01em;border:1px solid transparent;transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;cursor:pointer} .btn:hover,.btn:focus-visible{transform:translateY(-2px)} .btn-solid{color:#061420;background:linear-gradient(180deg, #5ad7ff, #2fa8ff);box-shadow:0 18px 32px rgba(18,137,212,.26)} .btn-solid:hover,.btn-solid:focus-visible{box-shadow:0 24px 40px rgba(18,137,212,.36)} .btn-ghost{border-color:rgba(145,203,255,.26);background:rgba(8,18,29,.55);color:#edf8ff} .btn-soft{border-color:rgba(123,195,255,.2);background:rgba(19,40,61,.96);color:#f0f7fd} .hero{position:relative;padding:54px 0 28px;overflow:hidden} .hero-media{position:absolute;inset:0} .hero-image{width:100%;height:100%;object-fit:cover;object-position:center right;filter:saturate(1.06)} .hero-overlay{position:absolute;inset:0;background: linear-gradient(90deg, rgba(3,10,16,.88) 0%, rgba(3,10,16,.72) 36%, rgba(3,10,16,.32) 60%, rgba(3,10,16,.44) 100%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.22));} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) 380px;gap:32px;align-items:end;min-height:min(78vh,760px);padding:64px 0 80px} .hero-copy{max-width:670px} .hero-text{font-size:1.08rem;line-height:1.7;color:#d7e8f7;max-width:640px;margin-top:20px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} .hero-highlights{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;color:#d8edf9} .hero-highlights li{padding-left:18px;position:relative;font-weight:600} .hero-highlights li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg, var(--blue), #9ce7ff);box-shadow:0 0 12px rgba(40,200,255,.45)} .hero-card{background:linear-gradient(180deg, rgba(10,20,33,.78), rgba(8,17,28,.92));border:1px solid rgba(126,183,244,.18);padding:24px;border-radius:28px;box-shadow:var(--shadow);align-self:center;backdrop-filter:blur(14px)} .hero-card-kicker{margin:0 0 12px;color:#8fcbff;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800} .hero-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px} .hero-card li{padding:14px 16px;border:1px solid rgba(111,184,255,.16);border-radius:16px;background:rgba(8,18,29,.68);font-weight:650;color:#f1f8ff} .hero-card-note{margin-top:16px;color:#a6bfd5;line-height:1.6} .hero-bottom{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .mini-stat{background:linear-gradient(180deg, rgba(10,20,32,.74), rgba(8,17,28,.9));padding:18px 20px;border:1px solid rgba(104,177,255,.14);border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,.24)} .mini-stat b{display:block;font-size:1.45rem;font-weight:900;color:#fff} .mini-stat span{display:block;margin-top:8px;color:#9bb6cd;line-height:1.45} .icon-strip{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .icon-strip article{background:linear-gradient(180deg, rgba(10,20,32,.9), rgba(7,16,28,.94));border:1px solid rgba(111,184,255,.14);border-radius:22px;padding:22px;display:grid;gap:10px;min-height:138px} .icon-strip span{font-size:1.35rem;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(38,138,255,.11);border:1px solid rgba(75,178,255,.2)} .icon-strip strong{font-size:1.02rem} .icon-strip small{color:#9fb6ca;line-height:1.55;font-size:.95rem} .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px} .section-head p:last-child{max-width:540px;color:var(--muted);line-height:1.72;font-size:1.02rem} .left-only{margin-bottom:24px} .services{overflow:hidden} .section-bg-flares{position:absolute;inset:0;background:radial-gradient(circle at 18% 24%, rgba(45,150,255,.1), transparent 27%), radial-gradient(circle at 84% 64%, rgba(55,197,255,.08), transparent 25%);pointer-events:none} .carousel{position:relative} .carousel-window{overflow:hidden;padding:8px 2px 12px} .carousel-track{display:flex;gap:20px;will-change:transform} .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:54px;height:54px;border-radius:50%;border:1px solid rgba(150,209,255,.22);background:rgba(8,17,28,.9);color:#fff;font-size:2rem;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.28)} .carousel-arrow.prev{left:-12px}.carousel-arrow.next{right:-12px} .service-card{position:relative;flex:0 0 calc(33.333% - 14px);min-height:370px;border-radius:24px;border:1px solid rgba(114,188,255,.16);overflow:hidden;background:#0c1826;padding:0;cursor:pointer;box-shadow:0 18px 44px rgba(0,0,0,.3)} .service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .6s ease, filter .5s ease;filter:saturate(1.06)} .service-card:hover img,.service-card:focus-visible img{transform:scale(1.08)} .service-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,17,28,.06), rgba(8,17,28,.56) 46%, rgba(8,17,28,.94) 100%)} .service-copy{position:absolute;left:20px;right:20px;bottom:18px;display:grid;gap:8px;text-align:left;z-index:1} .service-copy small{font-size:.72rem;color:#9cd9ff;letter-spacing:.18em;font-weight:800} .service-copy strong{font-size:1.4rem;line-height:1.08} .service-copy em{font-style:normal;color:#c7d8e8;line-height:1.55} .service-copy i{font-style:normal;color:#85d8ff;font-weight:800;margin-top:4px} .transport-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .media-tile{position:relative;min-height:320px;border-radius:24px;overflow:hidden;border:1px solid rgba(111,184,255,.16);background:#0a1826;box-shadow:0 18px 44px rgba(0,0,0,.24)} .media-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .media-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,11,18,.06), rgba(4,11,18,.28) 40%, rgba(4,11,18,.92) 100%)} .media-tile span{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:grid;gap:8px} .media-tile strong{font-size:1.28rem}.media-tile small{color:#c8d8e6;line-height:1.55} .hover-zoom:hover img,.hover-zoom:focus-visible img{transform:scale(1.06)} .compare-section{position:relative;min-height:820px;display:flex;align-items:center;overflow:hidden;isolation:isolate} .compare-bg{position:absolute;inset:0} .compare-bg img{width:100%;height:100%;object-fit:cover} .compare-bg.before::after,.compare-bg.after::after{content:'';position:absolute;inset:0} .compare-bg.before::after{background:linear-gradient(90deg, rgba(2,9,15,.72) 0%, rgba(2,9,15,.26) 100%)} .compare-bg.after{clip-path:inset(0 0 0 var(--split))} .compare-bg.after::after{background:linear-gradient(90deg, rgba(2,9,15,.18), rgba(2,9,15,.54) 100%)} .compare-screen{position:absolute;inset:0;background:radial-gradient(circle at center, transparent 40%, rgba(1,4,6,.08) 100%)} .compare-content{position:relative;z-index:1;width:var(--wrap)} .compare-copy{max-width:540px;background:linear-gradient(180deg, rgba(9,19,30,.68), rgba(6,14,23,.8));padding:32px;border-radius:28px;border:1px solid rgba(110,184,255,.16);backdrop-filter:blur(10px);box-shadow:var(--shadow)} .compare-copy p:not(.eyebrow){margin-top:18px;color:#d5e8f6;line-height:1.72} .compare-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px} .compare-list li{position:relative;padding-left:18px;color:#dcf0fc} .compare-list li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg, var(--blue), #9be7ff)} .compare-label{position:absolute;top:120px;padding:10px 14px;border-radius:999px;border:1px solid rgba(122,192,255,.2);background:rgba(8,18,29,.7);backdrop-filter:blur(8px);font-size:.82rem;font-weight:800;letter-spacing:.16em;z-index:2} .label-before{left:max(16px, calc((100vw - var(--wrap))/2 + 18px))} .label-after{right:max(16px, calc((100vw - var(--wrap))/2 + 18px))} .compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:linear-gradient(180deg, rgba(255,255,255,.12), #fff, rgba(255,255,255,.12));transform:translateX(-50%);z-index:2;box-shadow:0 0 26px rgba(255,255,255,.2)} .compare-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;border:1px solid rgba(255,255,255,.22);background:rgba(4,12,20,.85);box-shadow:0 18px 32px rgba(0,0,0,.34)} .compare-range{position:absolute;left:0;right:0;bottom:0;top:0;opacity:0;cursor:ew-resize;z-index:3} .two-col-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:22px;align-items:stretch} .stats-panel,.products-panel,.contact-card{position:relative;background:linear-gradient(180deg, rgba(9,19,30,.9), rgba(7,15,24,.96));border:1px solid rgba(108,181,255,.14);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)} .panel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .panel-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,10,16,.18), rgba(3,10,16,.88) 72%, rgba(3,10,16,.94))} .panel-copy{position:relative;padding:28px;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end} .stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px} .stats-grid div{padding:16px 18px;border-radius:20px;background:rgba(8,18,29,.62);border:1px solid rgba(114,188,255,.12)} .stats-grid b{display:block;font-size:2rem;font-weight:900}.stats-grid span{display:block;margin-top:6px;color:#c0d2e3;line-height:1.5} .products-panel{padding:26px} .panel-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px} .inline-controls{display:flex;gap:10px} .inline-controls button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(117,190,255,.18);background:#081421;color:#fff;font-size:1.5rem;cursor:pointer} .product-window{overflow:hidden} .product-track{display:flex;gap:16px;transition:transform .5s ease} .product-card{flex:0 0 calc(33.333% - 11px);display:grid;grid-template-rows:220px auto;padding:0;border-radius:22px;overflow:hidden;border:1px solid rgba(116,189,255,.14);background:linear-gradient(180deg, rgba(14,25,38,.96), rgba(9,18,28,.96));cursor:pointer;text-align:left} .product-card img{width:100%;height:100%;object-fit:cover;background:#fff} .product-body{display:grid;gap:8px;padding:18px} .product-body strong{font-size:1.08rem;line-height:1.2} .product-body small{color:#a9bfd2;line-height:1.55}.product-body i{font-style:normal;color:#84dbff;font-weight:800} .gallery-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px} .gallery-filters button{padding:12px 18px;border-radius:999px;border:1px solid rgba(129,198,255,.18);background:rgba(9,19,30,.8);color:#deeffa;font-weight:700;cursor:pointer} .gallery-filters button.active{background:linear-gradient(180deg, rgba(72,210,255,.22), rgba(52,128,255,.16));border-color:rgba(95,204,255,.42)} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .gallery-item{position:relative;min-height:250px;border:1px solid rgba(109,182,255,.14);border-radius:22px;overflow:hidden;background:#0a1623;padding:0;cursor:pointer;box-shadow:0 16px 34px rgba(0,0,0,.18)} .gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .gallery-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,10,16,.02), rgba(5,10,16,.24) 44%, rgba(5,10,16,.9) 100%)} .gallery-item span{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;font-weight:700;line-height:1.4;text-align:left} .gallery-item.wide{grid-column:span 2} .gallery-item[hidden]{display:none!important} .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .process-grid article{padding:24px;border-radius:24px;background:linear-gradient(180deg, rgba(11,22,36,.92), rgba(7,15,24,.96));border:1px solid rgba(108,181,255,.14)} .process-grid span{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:rgba(53,146,255,.14);border:1px solid rgba(95,189,255,.2);font-weight:900;color:#93ddff;margin-bottom:14px} .process-grid h3{margin-bottom:10px}.process-grid p{color:#a8bfd2;line-height:1.7} .faq-contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px;align-items:start} .faq-list{display:grid;gap:14px} .faq-item{border-radius:22px;border:1px solid rgba(107,181,255,.14);background:linear-gradient(180deg, rgba(11,22,36,.92), rgba(7,15,24,.96));overflow:hidden} .faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 22px;background:none;border:0;color:#fff;font-weight:750;text-align:left;cursor:pointer} .faq-item button span{font-size:1.4rem;color:#87dcff} .faq-answer{display:none;padding:0 22px 22px;color:#a8bfd2;line-height:1.7} .faq-item.open .faq-answer{display:block} .contact-card{padding:26px} .contact-card-copy p:last-child{margin-top:14px;color:#aec5d8;line-height:1.7} .booking-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px} .booking-form label{display:grid;gap:8px} .booking-form span{font-size:.92rem;color:#d9ebf8;font-weight:700} .booking-form input,.booking-form select,.booking-form textarea{ width:100%;padding:15px 16px;border-radius:16px;border:1px solid rgba(114,188,255,.14);background:rgba(8,17,28,.84);color:#eef6fd;outline:none;transition:border-color .2s ease, box-shadow .2s ease; } .booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:rgba(88,206,255,.56);box-shadow:0 0 0 4px rgba(49,167,255,.12)} .booking-form textarea{resize:vertical} .booking-form .full{grid-column:1 / -1} .form-fineprint{grid-column:1 / -1;color:#8ea8bf;line-height:1.65;font-size:.88rem} .field-error{border-color:#ff7590!important;box-shadow:0 0 0 4px rgba(255,86,117,.12)!important} .contact-bottom{margin-top:18px;display:grid;grid-template-columns:1fr 300px;gap:18px} .contact-details{padding:24px;border-radius:24px;background:linear-gradient(180deg, rgba(11,22,36,.92), rgba(7,15,24,.96));border:1px solid rgba(107,181,255,.14)} .contact-details h3{margin-bottom:14px;font-size:1.32rem}.contact-details ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;color:#cfe1f0;line-height:1.65} .contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .map-preview{padding:0;border:1px solid rgba(107,181,255,.14);background:linear-gradient(180deg, rgba(9,19,30,.9), rgba(7,15,24,.96));border-radius:24px;overflow:hidden;position:relative;cursor:pointer;min-height:100%} .map-preview img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .map-preview span{position:absolute;left:18px;right:18px;bottom:18px;padding:10px 14px;border-radius:999px;background:rgba(9,20,31,.82);backdrop-filter:blur(8px);border:1px solid rgba(129,198,255,.18);font-weight:800;text-align:center} .footer{padding:40px 0 28px;border-top:1px solid rgba(119,190,255,.1);background:linear-gradient(180deg, rgba(4,11,18,.4), rgba(4,11,18,.92))} .footer-grid{display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr;gap:24px} .footer-logo{width:210px;margin-bottom:12px} .footer p{color:#9eb7cc;line-height:1.7} .footer h4{margin:0 0 12px;font-size:1rem} .footer a,.footer span{display:block;color:#b8ccdd;line-height:1.9} .footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid rgba(127,197,255,.1);margin-top:30px;padding-top:18px;color:#8ea8bf;font-size:.95rem} .modal{position:fixed;inset:0;display:none;place-items:center;padding:18px;background:rgba(2,8,14,.8);backdrop-filter:blur(8px);z-index:60} .modal.open{display:grid} .modal-panel{width:min(1040px, calc(100vw - 28px));max-height:min(90vh,920px);overflow:auto;background:linear-gradient(180deg, rgba(11,22,36,.98), rgba(7,15,24,.98));border:1px solid rgba(113,187,255,.16);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative} .modal-close{position:absolute;right:16px;top:16px;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(126,196,255,.18);background:rgba(8,18,29,.9);color:#fff;font-size:2rem;line-height:1;cursor:pointer} .detail-modal{display:grid;grid-template-columns:1fr 1fr} .detail-image-wrap{min-height:100%}.detail-image-wrap img{width:100%;height:100%;object-fit:cover} .detail-copy{padding:42px 34px 34px;display:flex;flex-direction:column;justify-content:center} .detail-copy p:not(.eyebrow){margin-top:18px;color:#cde1ef;line-height:1.8} .detail-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px} .detail-points li{padding-left:18px;position:relative;color:#def1ff} .detail-points li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--blue), #9ce8ff)} .modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .gallery-modal-panel{width:min(1080px, calc(100vw - 28px));padding:18px 18px 22px} .gallery-modal-panel img{width:100%;border-radius:22px;max-height:68vh;object-fit:contain;background:#030911} .gallery-modal-copy{padding:18px 8px 0} .gallery-modal-copy p{margin-top:10px;color:#a8bfd2;line-height:1.7} .map-modal-panel{padding:24px} .map-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center} .map-large{width:100%;border-radius:24px;border:1px solid rgba(116,189,255,.14)} .map-copy p{margin-top:16px;color:#c4d8e8;line-height:1.8} .toast{position:fixed;right:18px;bottom:18px;z-index:70;padding:16px 18px;border-radius:18px;background:linear-gradient(180deg, rgba(65,213,255,.96), rgba(50,126,255,.96));color:#03111a;font-weight:900;box-shadow:0 20px 44px rgba(0,0,0,.34);transform:translateY(24px);opacity:0;pointer-events:none;transition:opacity .35s ease, transform .35s ease;max-width:min(92vw,420px)} .toast.show{opacity:1;transform:none} @media (max-width: 1140px){ .hero-grid{grid-template-columns:1fr 320px} .icon-strip,.transport-grid,.process-grid{grid-template-columns:repeat(2,1fr)} .gallery-grid{grid-template-columns:repeat(3,1fr)} .service-card{flex-basis:calc(50% - 10px)} .product-card{flex-basis:calc(50% - 8px)} .two-col-layout,.faq-contact-grid,.footer-grid,.map-layout{grid-template-columns:1fr} .contact-bottom{grid-template-columns:1fr} } @media (max-width: 920px){ .nav{position:fixed;left:16px;right:16px;top:92px;display:grid;gap:4px;padding:16px;border:1px solid rgba(112,186,255,.16);border-radius:22px;background:rgba(6,14,22,.98);backdrop-filter:blur(18px);box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .25s ease, transform .25s ease} body.nav-open .nav{opacity:1;pointer-events:auto;transform:none} .nav a{padding:12px 8px} .menu-toggle{display:block} .nav-phone,.nav-meta .btn{display:none} .hero-grid{grid-template-columns:1fr;min-height:700px} .hero-card{max-width:560px} .hero-bottom{grid-template-columns:repeat(2,1fr)} .section-head{flex-direction:column;align-items:flex-start} .detail-modal{grid-template-columns:1fr} } @media (max-width: 720px){ .wrap{width:min(100vw - 24px, var(--wrap))} .header{top:0} .brand img{width:172px} .hero{padding-top:26px} .hero-image{object-position:center} .hero-grid{padding:46px 0 42px;min-height:640px} .hero-text{font-size:1rem} .hero-highlights{grid-template-columns:1fr} .hero-bottom,.icon-strip,.transport-grid,.gallery-grid,.process-grid{grid-template-columns:1fr} .gallery-item.wide{grid-column:auto} .service-card,.product-card{flex-basis:100%} .compare-section{min-height:760px} .compare-copy{padding:22px;max-width:none;margin-top:110px} .label-before,.label-after{top:80px} .stats-grid{grid-template-columns:1fr 1fr} .booking-form{grid-template-columns:1fr} .booking-form .full{grid-column:auto} .footer-bottom{flex-direction:column} .toast{left:12px;right:12px;bottom:12px;max-width:none} } @media (max-width: 520px){ .demo-bar{font-size:.74rem;line-height:1.45} h1{font-size:2.64rem} h2{font-size:2rem} .section{padding:68px 0} .hero-card{padding:20px} .mini-stat{padding:16px} .carousel-arrow{width:48px;height:48px} .carousel-arrow.prev{left:-6px}.carousel-arrow.next{right:-6px} .service-card{min-height:330px} .compare-section{min-height:720px} .compare-divider span{width:56px;height:56px} .stats-grid{grid-template-columns:1fr} .detail-copy{padding:36px 22px 24px} .products-panel,.contact-card,.map-modal-panel{padding:20px} } /* ================================================================ AZZDA V2 / NOIR ATELIER V11 quality architecture Static demo: animations stay locally bundled and respect reduced motion. ================================================================ */ :root{--electric:#32ccff;--glacier:#8cddff;--azul:#2467ee;--night:#04101c} body{isolation:isolate;background:#040c17} .skip-link{position:fixed;z-index:200;top:-80px;left:12px;padding:14px 22px;background:#9deaff;color:#001624;border-radius:12px;font-weight:800} .skip-link:focus{top:12px} .site-bg{z-index:0;opacity:.88;overflow:hidden;background:radial-gradient(ellipse at 12% 18%,rgba(12,93,176,.16),transparent 42%),radial-gradient(ellipse at 83% 74%,rgba(6,109,188,.12),transparent 38%)} .site-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 97%,rgba(33,108,186,.09) 100%) 0 0/76px 76px,linear-gradient(180deg,transparent 97%,rgba(33,108,186,.09) 100%) 0 0/76px 76px;mask-image:linear-gradient(to bottom,transparent,black 14%,black 80%,transparent)} .site-bg::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 145deg at 50% 50%,transparent 0deg,rgba(0,111,228,.035) 45deg,transparent 80deg,rgba(28,174,255,.055) 150deg,transparent 210deg,rgba(12,100,204,.06) 250deg,transparent 300deg);animation:ambientOrbit 42s linear infinite} body>header,body>main,body>footer,body>.demo-bar{position:relative;z-index:1} .header{position:sticky} .bg-square{border-color:rgba(104,208,255,.36);box-shadow:0 0 22px rgba(11,148,250,.19),inset 0 0 16px rgba(14,125,210,.07);animation:floatSquare 14s ease-in-out infinite alternate;transform:rotate(9deg)} .bg-square.s6{top:8%;left:24%;width:20px;height:20px;animation-delay:-8s} .bg-square.s7{top:38%;left:3%;width:34px;height:34px;animation-delay:-3s} .bg-square.s8{top:53%;right:10%;width:28px;height:28px;animation-delay:-5s} .bg-square.s9{top:79%;left:9%;width:16px;height:16px;animation-delay:-1s} .bg-square.s10{top:91%;right:5%;width:52px;height:52px;animation-delay:-2s} .bg-square.s11{top:69%;right:27%;width:26px;height:26px;animation-delay:-7s} .bg-square.s12{top:17%;right:35%;width:12px;height:12px;animation-delay:-13s} .bg-square.s13{top:49%;left:17%;width:27px;height:27px;animation-delay:-7s} .bg-square.s14{top:73%;right:42%;width:21px;height:21px;animation-delay:-9s} .bg-square.s15{top:28%;right:22%;width:46px;height:46px;animation-delay:-5s} .bg-square.s16{top:59%;left:35%;width:18px;height:18px;animation-delay:-3s} .bg-square.s17{top:88%;left:42%;width:32px;height:32px;animation-delay:-6s} .bg-line{height:2px;filter:drop-shadow(0 0 10px rgba(62,196,255,.8));opacity:.5} .bg-glow{animation:glowPulse 10s ease-in-out infinite alternate;filter:blur(95px)} @keyframes ambientOrbit{to{transform:rotate(360deg)}} @keyframes glowPulse{0%{opacity:.17;transform:scale(.9)}100%{opacity:.4;transform:scale(1.15)}} @keyframes heroBreath{0%,100%{transform:scale(1.025) translate3d(0,0,0)}50%{transform:scale(1.085) translate3d(-1%,-.7%,0)}} .hero{background:#030a12} .hero-image{animation:heroBreath 24s ease-in-out infinite;transform-origin:center} .hero-overlay{background:linear-gradient(90deg,rgba(1,8,17,.94) 0%,rgba(2,9,18,.7) 37%,rgba(2,12,23,.2) 64%,rgba(1,9,18,.32) 100%),linear-gradient(0deg,#04101c 0%,transparent 30%)} .hero h1{font-weight:700;text-wrap:balance;text-shadow:0 12px 32px rgba(1,7,18,.6);line-height:1.02} .hero .eyebrow{color:#7bd6ff} .hero-card{border-color:rgba(110,195,255,.27);background:linear-gradient(140deg,rgba(3,14,26,.63),rgba(4,18,35,.88));box-shadow:0 30px 90px rgba(2,8,15,.45),inset 0 1px 0 rgba(147,208,255,.11)} .hero-card li{transition:transform .3s ease,border-color .3s,background .3s} .hero-card li:hover{transform:translateX(5px);border-color:rgba(88,206,255,.44);background:rgba(15,64,102,.45)} .mini-stat b{font-size:1.19rem;line-height:1.2;letter-spacing:.015em} .icon-strip article{backdrop-filter:blur(10px);transition:transform .35s,border-color .35s,box-shadow .35s} .icon-strip article:hover{transform:translateY(-5px);border-color:rgba(83,209,255,.38);box-shadow:0 20px 50px rgba(7,79,151,.16)} .section{isolation:isolate} .section::after{content:"";position:absolute;z-index:-2;pointer-events:none;inset:0;background-image:linear-gradient(rgba(29,113,198,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,113,198,.055) 1px,transparent 1px);background-size:82px 82px;mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent)} .services,.gallery{overflow:hidden;background:linear-gradient(120deg,#06111c,#071625 52%,#06101c)} .services .wrap,.gallery .wrap{position:relative;z-index:2} .ambient-photo-layer{position:absolute;inset:-4% -4%;z-index:0;pointer-events:none;background-position:center;background-size:cover;opacity:0;transition:opacity 1.1s ease,transform 12s ease;transform:scale(1.045);filter:saturate(.9) brightness(.38) blur(5px)} .ambient-photo-layer.is-active{opacity:.61;transform:scale(1.075)} .services::before,.gallery::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,19,.73),rgba(3,10,18,.45) 40%,rgba(3,9,18,.9)),linear-gradient(90deg,rgba(0,11,24,.67),transparent 70%)} .services .section-head,.gallery .section-head{position:relative;z-index:2} .services-carousel{padding:14px 54px 38px} .carousel-window{padding:20px 0 24px;outline-offset:4px} .carousel-arrow{width:54px;height:54px;border-color:rgba(97,196,255,.46);box-shadow:0 0 28px rgba(24,154,245,.22),0 10px 28px rgba(0,0,0,.35)} .carousel-arrow.prev{left:0}.carousel-arrow.next{right:0} .service-card{flex:0 0 var(--service-card-width,calc(33.333% - 14px));height:460px;min-height:unset;transition:transform .38s ease,border-color .38s ease,box-shadow .38s ease;box-shadow:0 26px 64px rgba(0,0,0,.35);border-color:rgba(149,209,255,.2)} .service-card:hover,.service-card:focus-visible{transform:translateY(-8px);border-color:rgba(79,203,255,.7);box-shadow:0 30px 65px rgba(0,0,0,.54),0 0 0 1px rgba(57,197,255,.16)} .service-card img{filter:saturate(1.12) contrast(1.05);transition:transform .8s cubic-bezier(.2,.75,.18,1)} .service-card:hover img,.service-card:focus-visible img{transform:scale(1.105)} .service-copy{left:24px;right:24px;bottom:25px;gap:10px} .service-copy strong{font-size:1.7rem} .service-copy i{font-size:.95rem} .carousel-counter{position:absolute;bottom:0;left:50%;transform:translateX(-50%);color:#9cdfff;letter-spacing:.2em;font-weight:800;font-size:.8rem;z-index:6} .service-card[data-clone="true"]{pointer-events:auto} .transport-grid{gap:14px} .media-tile{min-height:290px;transition:transform .35s,border-color .35s;box-shadow:0 20px 50px rgba(0,0,0,.35)} .media-tile:hover{transform:translateY(-5px);border-color:rgba(74,207,255,.5)} .media-tile img{filter:saturate(1.1)} .compare-section{min-height:820px} .compare-section .compare-bg.before::after{background:linear-gradient(90deg,rgba(2,7,15,.84),rgba(2,7,15,.08) 80%)} .compare-section .compare-bg.after::after{background:linear-gradient(90deg,rgba(3,9,17,.67),rgba(2,9,16,.08) 70%)} .compare-label{top:52px} .compare-copy{max-width:490px;background:linear-gradient(135deg,rgba(3,12,22,.9),rgba(7,22,38,.64));box-shadow:0 22px 90px rgba(0,0,0,.5);border:1px solid rgba(133,207,255,.2)} .compare-demo-tag{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);font-size:clamp(.59rem,1vw,.76rem);font-weight:800;letter-spacing:.16em;color:#e2effe;background:rgba(1,9,18,.82);padding:12px 18px;border:1px solid rgba(97,177,243,.28);border-radius:99px;pointer-events:none;text-align:center;width:max-content;max-width:calc(100% - 30px)} .compare-range{touch-action:pan-y} .stats-grid b{font-size:clamp(.8rem,1.4vw,1.03rem);text-transform:uppercase;letter-spacing:.1em;color:#9edfff} .stats-grid span{font-size:.86rem} .stats-panel{min-height:500px} .products-panel{background:linear-gradient(135deg,rgba(11,26,46,.97),rgba(2,11,21,.97))} .product-card{grid-template-rows:215px auto;transition:transform .35s,box-shadow .35s} .product-card:hover,.product-card:focus-visible{transform:translateY(-5px);box-shadow:0 20px 36px rgba(0,0,0,.35)} .product-card img{object-fit:cover;filter:saturate(.83) contrast(1.08)} .gallery{border-top:1px solid rgba(106,183,249,.07)} .gallery-item{transition:transform .3s,border-color .3s} .gallery-item:hover,.gallery-item:focus-visible{transform:translateY(-6px);border-color:rgba(79,203,255,.6)} .gallery-item img{filter:saturate(.94) contrast(1.08)} .gallery-item:hover img{transform:scale(1.09)} .section-note{margin-top:22px;max-width:790px;color:#9ebbd5;font-size:.86rem;line-height:1.6} .process{overflow:hidden} .process .wrap{position:relative;z-index:2} .process .photo-wall{position:absolute;inset:0;z-index:0;opacity:.26;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)} .photo-wall-track{display:flex;width:max-content;height:100%;animation:photoMarquee 60s linear infinite} .photo-wall img{height:100%;width:660px;object-fit:cover;flex:0 0 660px;filter:saturate(.65) brightness(.64)} .process::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,13,25,.82),rgba(4,17,30,.45),rgba(3,13,25,.82));pointer-events:none} @keyframes photoMarquee{to{transform:translateX(-50%)}} .process-grid article{backdrop-filter:blur(16px);transition:transform .36s,border-color .36s,box-shadow .36s;background:rgba(8,21,37,.79)} .process-grid article:hover{transform:translateY(-5px);border-color:rgba(78,194,250,.44);box-shadow:0 16px 38px rgba(4,87,163,.2)} .faq-contact{background:linear-gradient(180deg,rgba(2,10,20,.4),rgba(3,12,24,.84))} .faq-item{transition:border-color .3s ease,background .3s ease} .faq-item.open{border-color:rgba(70,194,255,.52);background:rgba(13,38,62,.82)} .faq-answer{animation:faqShow .28s ease-out} @keyframes faqShow{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} .map-preview{min-height:270px} .modal{animation:modalFade .23s ease both} .modal:not(.open){animation:none} .modal-panel{animation:modalRise .32s cubic-bezier(.2,.75,.2,1) both} @keyframes modalRise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}} @keyframes modalFade{from{opacity:0}to{opacity:1}} .detail-image-wrap{min-height:520px} .detail-image-wrap img{height:100%;max-height:730px;object-fit:cover} .gallery-modal-panel img{object-fit:contain} /* Replay reveal taken from NOIR's re-enter strategy; safe fallback if JS is unavailable. */ .reveal{opacity:1;transform:none} .js-motion .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.75,.2,1),transform 1s cubic-bezier(.2,.75,.2,1)} .js-motion .reveal.is-visible{opacity:1;transform:none} @media (max-width:1140px){.service-card{height:410px}.services-carousel{padding-inline:40px}} @media (max-width:720px){ .hero{padding-top:10px}.hero-grid{min-height:670px}.hero-card{display:none} .hero-image{object-position:56% center} .services-carousel{padding:4px 36px 34px}.service-card{height:400px} .carousel-arrow{width:44px;height:44px}.carousel-arrow.prev{left:-5px}.carousel-arrow.next{right:-5px} .transport-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .media-tile{min-height:220px} .compare-section{min-height:780px} .compare-label{top:26px} .compare-content{padding-bottom:60px} .compare-copy{max-width:370px;background:rgba(3,12,22,.83)} .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .product-card{grid-template-rows:230px auto} .photo-wall img{width:330px;flex-basis:330px} .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .gallery-item{min-height:185px} .gallery-item.wide{grid-column:auto} .detail-image-wrap{min-height:240px;max-height:300px} .compare-demo-tag{bottom:14px} } @media (max-width:520px){ .hero h1{font-size:clamp(2.7rem,12vw,3.5rem)} .hero-overlay{background:linear-gradient(90deg,rgba(1,8,17,.9),rgba(1,8,17,.64)),linear-gradient(0deg,#03101e,transparent 60%)} .services-carousel{padding-inline:30px} .service-card{height:370px} .transport-grid{grid-template-columns:1fr 1fr;gap:10px} .media-tile{min-height:200px}.media-tile span{left:12px;right:12px;bottom:12px}.media-tile strong{font-size:1rem}.media-tile small{font-size:.75rem} .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .gallery-item{min-height:162px;border-radius:14px}.gallery-item span{left:10px;right:10px;bottom:9px;font-size:.76rem} .compare-copy{padding:18px} .compare-copy p:not(.eyebrow){font-size:.84rem} .compare-list{font-size:.8rem} .compare-demo-tag{font-size:.53rem;letter-spacing:.05em;padding:8px 10px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .js-motion .reveal{opacity:1!important;transform:none!important} .photo-wall-track,.hero-image,.site-bg::after{animation:none!important} } .blue-theme-switch{width:var(--wrap);margin:28px auto 18px;padding:15px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:1px solid rgba(84,190,245,.17);border-radius:18px;background:rgba(9,25,45,.7)} .blue-theme-switch>span{font-size:.7rem;font-weight:800;letter-spacing:.17em;color:#81caed;margin-right:auto} .blue-theme-switch button{border-radius:999px;padding:10px 15px;border:1px solid rgba(98,188,250,.23);background:rgba(6,25,44,.9);color:#d8edff;cursor:pointer;transition:background .3s,border-color .3s,transform .3s} .blue-theme-switch button:hover{transform:translateY(-2px)} .blue-theme-switch button.active{background:linear-gradient(130deg,#0d6b9c,#1857bd);border-color:#58caff;color:white;box-shadow:0 0 17px rgba(42,177,253,.18)} body[data-bg-mode="electric"] .site-bg{filter:brightness(1.5) saturate(1.4)} body[data-bg-mode="electric"] .bg-square{border-color:rgba(92,215,255,.6);box-shadow:0 0 32px rgba(46,190,255,.3)} body[data-bg-mode="electric"] .ambient-photo-layer.is-active{opacity:.8} body[data-bg-mode="ice"] .site-bg{filter:hue-rotate(-14deg) brightness(1.17) saturate(.75)} body[data-bg-mode="ice"] .ambient-photo-layer.is-active{opacity:.48;filter:saturate(.64) brightness(.52) blur(6px)} @media(max-width:520px){.blue-theme-switch>span{width:100%}.blue-theme-switch{justify-content:space-between}.blue-theme-switch button{flex:1 1 auto}} /* STEP1 PATCH — hero moving squares + clickable info cards */ .hero-square-marquee{position:absolute;left:0;right:0;top:92px;height:120px;pointer-events:none;z-index:1;overflow:hidden;opacity:.9} .hero-square-track{position:absolute;left:0;display:flex;gap:34px;align-items:center;width:max-content;animation:heroSquaresLeft 28s linear infinite} .hero-square-track.track-a{top:0} .hero-square-track.track-b{top:52px;animation-duration:34s;animation-delay:-8s} .hero-square-track span{width:48px;height:48px;display:block;border:1px solid rgba(104,208,255,.32);border-radius:10px;background:linear-gradient(180deg, rgba(23,83,135,.06), rgba(7,26,46,.02));box-shadow:0 0 22px rgba(55,176,255,.12), inset 0 0 18px rgba(55,176,255,.06)} .hero-square-track span:nth-child(3n){width:22px;height:22px;border-radius:6px;opacity:.9} .hero-square-track span:nth-child(4n){width:30px;height:30px;border-radius:8px;opacity:.82} .hero-square-track span:nth-child(5n){width:64px;height:64px;border-radius:14px;opacity:.56} @keyframes heroSquaresLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .hero-bottom,.icon-strip{position:relative;isolation:isolate;overflow:hidden} .hero-bottom{padding:20px;border-radius:28px;background:linear-gradient(180deg, rgba(5,14,24,.44), rgba(4,11,18,.14))} .icon-strip{margin-top:22px;padding:24px;border:1px solid rgba(81,183,255,.1);border-radius:30px;background:linear-gradient(180deg, rgba(7,16,28,.86), rgba(6,14,24,.94));box-shadow:0 18px 46px rgba(0,0,0,.18)} .hero-bottom::before,.icon-strip::before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 12% 50%, rgba(38,140,255,.12), transparent 28%), radial-gradient(circle at 88% 44%, rgba(54,196,255,.08), transparent 26%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));} .hero-bottom::after,.icon-strip::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.42;background-image:linear-gradient(rgba(102,182,255,.13) 1px, transparent 1px),linear-gradient(90deg, rgba(102,182,255,.13) 1px, transparent 1px);background-size:72px 72px;animation:gridSweepLeft 18s linear infinite;mask-image:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.38));} @keyframes gridSweepLeft{0%{background-position:0 0, 0 0}100%{background-position:-72px 0, -72px 0}} .mini-stat,.icon-strip .info-card{position:relative;z-index:1;appearance:none;width:100%;text-align:left;cursor:pointer;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease} .mini-stat:hover,.mini-stat:focus-visible,.icon-strip .info-card:hover,.icon-strip .info-card:focus-visible{transform:translateY(-6px);border-color:rgba(86,206,255,.36)!important;box-shadow:0 22px 54px rgba(4,80,138,.2), inset 0 0 0 1px rgba(105,215,255,.08);background:linear-gradient(180deg, rgba(13,27,44,.96), rgba(8,18,30,.98))} .mini-stat::after,.icon-strip .info-card::after{content:'↗';position:absolute;right:16px;top:14px;font-size:1rem;color:#71d7ff;opacity:0;transform:translateY(4px);transition:opacity .28s ease, transform .28s ease} .mini-stat:hover::after,.mini-stat:focus-visible::after,.icon-strip .info-card:hover::after,.icon-strip .info-card:focus-visible::after{opacity:1;transform:none} .icon-strip .info-card{background:linear-gradient(180deg, rgba(10,20,32,.88), rgba(7,16,28,.94));border:1px solid rgba(111,184,255,.14);border-radius:22px;padding:22px;display:grid;gap:10px;min-height:138px;color:var(--text)} .quick-info-panel{width:min(520px, calc(100vw - 28px));max-height:min(82vh, 620px)} .quick-info-body{padding:34px 30px 30px} .quick-info-body h3{font-size:clamp(1.7rem, 3vw, 2.35rem);font-family:Georgia, 'Times New Roman', serif;line-height:1.02} .quick-info-text{margin-top:14px;color:#cfe3f4;line-height:1.75} .quick-info-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px} .quick-info-points li{position:relative;padding-left:18px;color:#def2ff;line-height:1.55} .quick-info-points li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg, var(--blue), #9ce7ff)} @media (max-width: 720px){ .hero-square-marquee{top:78px;height:92px} .hero-square-track{gap:22px} .hero-square-track span{width:28px;height:28px;border-radius:8px} .hero-square-track span:nth-child(3n){width:16px;height:16px} .hero-square-track span:nth-child(5n){width:42px;height:42px} .hero-bottom{padding:14px} .icon-strip{padding:16px;margin-top:18px} .mini-stat::after,.icon-strip .info-card::after{right:14px;top:12px} } .azzda-photo-01{--tile-image:url("assets/service-1.webp");background-image:var(--tile-image);} .azzda-photo-02{--tile-image:url("assets/gallery-1.webp");background-image:var(--tile-image);} .azzda-photo-03{--tile-image:url("assets/vehicle-1.webp");background-image:var(--tile-image);} .azzda-photo-04{--tile-image:url("assets/service-2.webp");background-image:var(--tile-image);} .azzda-photo-05{--tile-image:url("assets/hero-main.webp");background-image:var(--tile-image);} .azzda-photo-06{--tile-image:url("assets/service-3.webp");background-image:var(--tile-image);} .azzda-photo-07{--tile-image:url("assets/vehicle-2.webp");background-image:var(--tile-image);} .azzda-photo-08{--tile-image:url("assets/gallery-3.webp");background-image:var(--tile-image);} .azzda-photo-09{--tile-image:url("assets/service-4.webp");background-image:var(--tile-image);} .azzda-photo-10{--tile-image:url("assets/gallery-6.webp");background-image:var(--tile-image);} .azzda-photo-11{--tile-image:url("assets/vehicle-3.webp");background-image:var(--tile-image);} .azzda-photo-12{--tile-image:url("assets/service-5.webp");background-image:var(--tile-image);} .azzda-photo-13{--tile-image:url("assets/gallery-4.webp");background-image:var(--tile-image);} .azzda-photo-14{--tile-image:url("assets/service-6.webp");background-image:var(--tile-image);} .azzda-photo-15{--tile-image:url("assets/gallery-8.webp");background-image:var(--tile-image);} .azzda-photo-16{--tile-image:url("assets/vehicle-4.webp");background-image:var(--tile-image);} .azzda-photo-17{--tile-image:url("assets/gallery-5.webp");background-image:var(--tile-image);} .azzda-photo-18{--tile-image:url("assets/service-hero.webp");background-image:var(--tile-image);} .azzda-photo-19{--tile-image:url("assets/gallery-7.webp");background-image:var(--tile-image);} .azzda-photo-20{--tile-image:url("assets/fleet-hero.webp");background-image:var(--tile-image);} .azzda-photo-21{--tile-image:url("assets/gallery-2.webp");background-image:var(--tile-image);} .azzda-photo-22{--tile-image:url("assets/ambient-industrial.webp");background-image:var(--tile-image);} .azzda-photo-23{--tile-image:url("assets/gallery-6.webp");background-image:var(--tile-image);} .azzda-photo-24{--tile-image:url("assets/service-2.webp");background-image:var(--tile-image);} /* STEP2 — authentic LUNE V19 seamless photo mosaic, adapted for AZZDA. */ /* The four 100vw panels repeat ABAB and move -200vw: seamless at the loop boundary. */ .azzda-hero-wall{ position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1; opacity:.78;isolation:isolate; } .azzda-hero-wall::before,.azzda-strip-wall::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(90deg,rgba(2,10,19,.88) 0%,rgba(2,10,19,.79) 30%,rgba(2,10,19,.56) 55%,rgba(2,10,19,.67) 100%), linear-gradient(180deg,rgba(3,12,24,.56),rgba(3,12,24,.14) 45%,rgba(3,12,24,.76)); } .azzda-hero-wall .azzda-photo-track{ display:flex;width:400vw;height:100%;transform:translate3d(0,0,0); animation:azzdaPhotoWallSlide 86s linear infinite; will-change:transform;backface-visibility:hidden; } .azzda-photo-panel{ flex:0 0 100vw;width:100vw;height:100%; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr)); gap:14px;padding:16px 8px 16px; } .azzda-photo-tile{ display:block;min-width:0;min-height:0;border-radius:22px; background-position:center;background-size:cover;background-repeat:no-repeat; box-shadow:0 14px 40px rgba(0,0,0,.46),inset 0 0 0 1px rgba(124,213,255,.16); filter:saturate(.82) brightness(.86);overflow:hidden;position:relative; } .azzda-photo-tile::after{ content:"";position:absolute;inset:0; background:linear-gradient(140deg,rgba(7,47,83,.12),transparent 55%,rgba(3,13,25,.35)); } @keyframes azzdaPhotoWallSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-200vw,0,0)}} /* Keep text, CTA, and the old glass card ABOVE moving photos, not under them. */ .hero .hero-grid,.hero .hero-bottom{position:relative;z-index:3;} .azzda-hero-wall+.hero-grid{z-index:3} /* Second photo wall, behind the bottom four information cards. */ .icon-strip{position:relative;isolation:isolate;overflow:hidden;padding:24px;} .icon-strip .azzda-strip-wall{ position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; opacity:1; } .azzda-strip-wall .azzda-photo-track{ display:flex;width:400vw;height:100%; transform:translate3d(0,0,0); animation:azzdaPhotoWallSlide 68s linear infinite; will-change:transform;backface-visibility:hidden; } .azzda-strip-wall .azzda-photo-panel{ grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px;padding:7px 7px 7px; } .azzda-strip-wall .azzda-photo-tile{border-radius:15px;filter:saturate(.95) brightness(.91)} .azzda-strip-wall::before{ background:linear-gradient(90deg,rgba(3,12,24,.52),rgba(2,10,21,.31) 52%,rgba(3,12,24,.58)), linear-gradient(180deg,rgba(3,12,24,.32),rgba(3,12,24,.46)); } /* Override STEP1's empty grid; photographic wall is the intended moving background. */ .icon-strip::before,.icon-strip::after{content:none!important} .icon-strip .info-card{ z-index:2;position:relative; background:linear-gradient(180deg,rgba(5,16,29,.83),rgba(3,13,25,.9)); backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px); border-color:rgba(92,177,241,.27); } .icon-strip .info-card:hover,.icon-strip .info-card:focus-visible{ background:linear-gradient(180deg,rgba(12,34,57,.94),rgba(5,20,38,.98)); } /* Remove any leftover STEP1 empty outlined square effect. */ .hero-square-marquee{display:none!important} @media (max-width:760px){ .azzda-hero-wall{opacity:.72} .azzda-photo-panel{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;padding:10px 5px} .azzda-photo-tile{border-radius:14px} .azzda-strip-wall .azzda-photo-panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:9px} .azzda-hero-wall::before{ background:linear-gradient(90deg,rgba(2,9,18,.90),rgba(2,9,18,.57) 50%,rgba(2,9,18,.8)),linear-gradient(180deg,rgba(2,9,18,.66),rgba(2,9,18,.42) 44%,rgba(2,9,18,.9)); } .icon-strip{padding:16px} } @media (prefers-reduced-motion:reduce){ .azzda-hero-wall .azzda-photo-track,.azzda-strip-wall .azzda-photo-track{animation:none!important;transform:none!important;will-change:auto} } /* STEP2 visual QA: reserve visible photo-wall area around the four cards. */ .icon-strip{padding:72px 24px;min-height:340px} .azzda-strip-wall::before{ background:linear-gradient(90deg,rgba(3,12,24,.23),rgba(2,10,21,.09) 52%,rgba(3,12,24,.28)), linear-gradient(180deg,rgba(3,12,24,.19),rgba(3,12,24,.28)); } .icon-strip .info-card{background:linear-gradient(180deg,rgba(5,16,29,.76),rgba(3,13,25,.82));} @media(max-width:720px){.icon-strip{padding:48px 16px;min-height:unset}} /* STEP2 QA FIX: .icon-strip span from V2 accidentally reset the photo tile size/background. */ .icon-strip .azzda-strip-wall .azzda-photo-tile{ display:block;width:auto;height:auto;min-width:0;min-height:0; border:0;border-radius:15px;background-color:rgba(5,22,39,.55); background-image:var(--tile-image);background-position:center center;background-size:cover;background-repeat:no-repeat; box-shadow:0 14px 40px rgba(0,0,0,.36),inset 0 0 0 1px rgba(124,213,255,.16); } /* STEP2.1 user corrections */ .hero-media{display:none !important;} .hero-overlay{background:linear-gradient(90deg,rgba(1,7,16,.66) 0%,rgba(2,10,18,.42) 54%,rgba(2,10,18,.58) 100%),linear-gradient(180deg,rgba(2,10,18,.18),rgba(2,10,18,.34));} .azzda-hero-wall{opacity:.96;} .azzda-hero-wall::before{background:linear-gradient(90deg,rgba(2,10,19,.90) 0%,rgba(2,10,19,.72) 30%,rgba(2,10,19,.50) 55%,rgba(2,10,19,.62) 100%),linear-gradient(180deg,rgba(3,12,24,.36),rgba(3,12,24,.08) 45%,rgba(3,12,24,.52));} .hero-card-note{display:none !important;} .icon-strip{max-width:none !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;border-left:0 !important;border-right:0 !important;border-radius:0 !important;padding:72px 32px !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:16px !important;} .icon-strip .info-card{background:linear-gradient(180deg,rgba(4,14,26,.90),rgba(2,10,20,.95)) !important;border-color:rgba(88,170,236,.18) !important;box-shadow:0 16px 40px rgba(0,0,0,.22) !important;} .icon-strip .info-card:hover,.icon-strip .info-card:focus-visible{background:linear-gradient(180deg,rgba(9,27,46,.96),rgba(3,13,24,.98)) !important;} .azzda-strip-wall::before{background:linear-gradient(90deg,rgba(3,12,24,.26),rgba(2,10,21,.12) 52%,rgba(3,12,24,.30)),linear-gradient(180deg,rgba(3,12,24,.22),rgba(3,12,24,.34)) !important;} @media(max-width:720px){ .icon-strip{padding:48px 16px !important;grid-template-columns:1fr !important;border-radius:24px !important;} } /* STEP2.2 visual darkening and service peek tuning */ .hero-card{background:linear-gradient(180deg, rgba(6,15,26,.88), rgba(4,12,22,.96)) !important;border-color:rgba(86,164,228,.16) !important;box-shadow:0 22px 48px rgba(0,0,0,.36) !important;} .hero-card li{background:rgba(5,14,24,.84) !important;border-color:rgba(84,160,223,.15) !important;} .mini-stat{background:linear-gradient(180deg, rgba(7,16,28,.80), rgba(5,13,24,.92)) !important;border-color:rgba(84,160,223,.12) !important;} .icon-strip .info-card{background:linear-gradient(180deg,rgba(3,11,21,.94),rgba(2,9,18,.97)) !important;border-color:rgba(83,162,227,.14) !important;box-shadow:0 16px 40px rgba(0,0,0,.28) !important;} .icon-strip .info-card:hover,.icon-strip .info-card:focus-visible{background:linear-gradient(180deg,rgba(6,18,31,.96),rgba(3,11,20,.98)) !important;} .ambient-photo-layer{filter:saturate(.95) brightness(.42) blur(5px) !important;} .ambient-photo-layer.is-active{opacity:.72 !important;transform:scale(1.07) !important;filter:saturate(1.0) brightness(.52) blur(4px) !important;} .services-carousel{padding:14px 24px 38px !important;} .services-carousel .carousel-window{position:relative;overflow:hidden;padding:22px 0 24px !important;} .services-carousel .carousel-window::before,.services-carousel .carousel-window::after{content:"";position:absolute;top:0;bottom:24px;width:190px;z-index:3;pointer-events:none;} .services-carousel .carousel-window::before{left:0;background:linear-gradient(90deg, rgba(2,9,18,.86) 0%, rgba(2,9,18,.62) 45%, rgba(2,9,18,0) 100%);} .services-carousel .carousel-window::after{right:0;background:linear-gradient(270deg, rgba(2,9,18,.86) 0%, rgba(2,9,18,.62) 45%, rgba(2,9,18,0) 100%);} .service-card{background:#081321 !important;border-color:rgba(118,189,248,.14) !important;box-shadow:0 24px 54px rgba(0,0,0,.42) !important;} .service-overlay{background:linear-gradient(180deg, rgba(5,13,22,.24), rgba(5,13,22,.70) 42%, rgba(5,13,22,.95) 100%) !important;} .service-card img{filter:saturate(1.06) contrast(1.04) brightness(.86) !important;} .service-card:hover img,.service-card:focus-visible img{transform:scale(1.105) !important;filter:saturate(1.1) contrast(1.05) brightness(.98) !important;} .service-copy{bottom:22px !important;} @media (max-width:1140px){ .services-carousel .carousel-window::before,.services-carousel .carousel-window::after{width:110px;} } @media (max-width:720px){ .services-carousel{padding:4px 12px 34px !important;} .services-carousel .carousel-window::before,.services-carousel .carousel-window::after{width:54px;bottom:24px;} } /* STEP2.3 glow and service emphasis tuning */ .hero-card li{position:relative;transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease,color .28s ease !important;} .hero-card li:hover,.hero-card li:focus-visible{transform:translateX(5px) !important;border-color:rgba(100,218,255,.78) !important;background:linear-gradient(180deg, rgba(18,85,146,.54), rgba(11,38,72,.76)) !important;box-shadow:0 0 0 1px rgba(109,215,255,.24),0 0 18px rgba(72,187,255,.34),0 0 34px rgba(42,160,255,.24), inset 0 0 18px rgba(112,219,255,.06) !important;color:#f7fcff !important;} .services .ambient-photo-layer{filter:saturate(.96) brightness(.45) blur(5px) !important;} .services .ambient-photo-layer.is-active{opacity:.76 !important;filter:saturate(1.02) brightness(.58) blur(4px) !important;} .service-card{background:#081321 !important;} .service-card.is-main{border-color:rgba(111,198,255,.22) !important;box-shadow:0 28px 58px rgba(0,0,0,.40),0 0 0 1px rgba(68,186,255,.06) !important;} .service-card.is-main img{filter:saturate(1.08) contrast(1.05) brightness(.96) !important;} .service-card.is-main .service-overlay{background:linear-gradient(180deg, rgba(4,12,20,.14), rgba(5,13,22,.44) 42%, rgba(5,13,22,.82) 100%) !important;} .service-card.is-center-card{box-shadow:0 30px 62px rgba(0,0,0,.42),0 0 0 1px rgba(73,190,255,.08) !important;} .service-card.is-side-peek{border-color:rgba(92,160,214,.12) !important;box-shadow:0 16px 38px rgba(0,0,0,.32) !important;} .service-card.is-side-peek img{filter:saturate(.96) contrast(1.02) brightness(.74) !important;} .service-card.is-side-peek .service-overlay{background:linear-gradient(180deg, rgba(4,10,18,.36), rgba(4,10,18,.68) 44%, rgba(4,10,18,.94) 100%) !important;} .service-card:hover img,.service-card:focus-visible img{filter:saturate(1.12) contrast(1.06) brightness(1.02) !important;} /* STEP5 gallery realism + repeat reveal + brighter hover ambient */ .gallery-grid{position:relative;z-index:1} .gallery-item{will-change:transform, opacity;transition:transform .45s ease,border-color .35s ease,box-shadow .35s ease !important;} .gallery-item img{filter:saturate(.98) contrast(1.06) brightness(.94) !important;transition:transform .72s cubic-bezier(.2,.75,.2,1), filter .45s ease !important;} .gallery-item:hover,.gallery-item:focus-visible{transform:translateY(-7px) scale(1.012) !important;border-color:rgba(94,206,255,.72) !important;box-shadow:0 18px 40px rgba(0,0,0,.34),0 0 0 1px rgba(82,196,255,.12),0 0 28px rgba(47,146,255,.16) !important;} .gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.09) !important;filter:saturate(1.04) contrast(1.08) brightness(1.02) !important;} .gallery-item::after{background:linear-gradient(180deg, rgba(3,10,18,.04), rgba(3,10,18,.18) 34%, rgba(3,10,18,.92) 100%) !important;} .gallery .gallery-ambient{filter:saturate(1.04) brightness(.56) blur(6px) !important;} .gallery .gallery-ambient.is-active{opacity:.76 !important;filter:saturate(1.08) brightness(.68) blur(5px) !important;transform:scale(1.08) !important;} .gallery .reveal{transition-duration:1s !important;} /* STEP 6: coherent electric-blue premium glow in the header, hero, and eight quick cards */ :root{--az-glow:rgba(59,183,255,.30);--az-glow-strong:rgba(90,217,255,.55);} .header .nav a{border-radius:10px;transition:color .25s,background .25s,text-shadow .25s,box-shadow .25s;} .header .nav a:hover,.header .nav a:focus-visible{color:#fff;background:rgba(32,129,225,.12);text-shadow:0 0 14px var(--az-glow-strong);box-shadow:0 0 20px rgba(24,137,255,.16);outline:none;} .btn,.btn-solid,.btn-ghost,.btn-soft{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,filter .3s ease,background .3s ease !important;} .btn:hover,.btn:focus-visible,.btn-solid:hover,.btn-solid:focus-visible,.btn-ghost:hover,.btn-ghost:focus-visible,.btn-soft:hover,.btn-soft:focus-visible{ transform:translateY(-3px) !important; box-shadow:0 0 0 1px rgba(151,227,255,.46),0 0 24px var(--az-glow),0 0 46px rgba(23,141,255,.24),0 18px 35px rgba(0,15,36,.45) !important; border-color:rgba(124,218,255,.78)!important; filter:brightness(1.075); } .hero-card li{transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease !important;} .hero-card li:hover,.hero-card li:focus-within{ transform:translateX(5px); border-color:rgba(101,218,255,.86)!important; background:linear-gradient(180deg,rgba(17,83,147,.58),rgba(9,33,61,.88))!important; box-shadow:0 0 0 1px rgba(151,218,255,.25),0 0 18px var(--az-glow),0 0 36px rgba(47,169,255,.2),inset 0 0 17px rgba(83,196,255,.08)!important; } .mini-stat.quick-card,.icon-strip .info-card.quick-card{transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease !important;} .mini-stat.quick-card:hover,.mini-stat.quick-card:focus-visible,.icon-strip .info-card.quick-card:hover,.icon-strip .info-card.quick-card:focus-visible{ transform:translateY(-6px) scale(1.015)!important; border-color:rgba(101,213,255,.78)!important; background:linear-gradient(180deg,rgba(14,55,96,.96),rgba(4,18,34,.98))!important; box-shadow:0 0 0 1px rgba(123,213,255,.22),0 0 26px var(--az-glow),0 0 55px rgba(32,139,255,.19),0 22px 48px rgba(0,0,0,.42)!important; outline:none; } /* Gallery labels need white foreground instead of the browser's default button black. */ .gallery-item{color:#eef8ff!important;} .gallery-item span{color:#f4fbff!important;text-shadow:0 2px 14px rgba(0,0,0,.9);} .gallery-grid{position:relative;z-index:3;} .gallery-item.reveal{transition:opacity .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1),border-color .3s,box-shadow .3s!important;} .gallery-item.reveal:hover,.gallery-item.reveal:focus-visible{transform:translateY(-7px) scale(1.012)!important;} .gallery .gallery-ambient.is-active{opacity:.78!important;filter:saturate(1.08) brightness(.72) blur(5px)!important;} /* Higher image clarity, less black/grey overlay on the before-after comparison. */ .compare-section .compare-bg.before::after{background:linear-gradient(90deg,rgba(2,9,17,.52),rgba(2,9,17,.08) 52%,transparent 76%)!important;} .compare-section .compare-bg.after::after{background:linear-gradient(90deg,rgba(2,9,17,.08),rgba(2,9,17,.02) 45%,rgba(2,9,17,.2))!important;} .compare-section .compare-bg img{filter:saturate(.96) contrast(1.07) brightness(.99)!important;object-position:center center!important;} .compare-section .compare-copy{max-width:440px;padding:26px 28px;background:linear-gradient(135deg,rgba(3,12,22,.82),rgba(5,19,33,.73))!important;backdrop-filter:blur(8px);} .compare-section .compare-divider{box-shadow:0 0 28px rgba(157,223,255,.42)} .compare-section .compare-divider span{border:2px solid rgba(153,218,255,.7);box-shadow:0 0 30px rgba(31,155,244,.4),0 14px 27px rgba(0,0,0,.35);} @media(max-width:720px){.compare-section .compare-copy{max-width:min(315px,86vw);padding:18px 20px}} @media(prefers-reduced-motion:reduce){.gallery-item.reveal,.mini-stat.quick-card,.icon-strip .info-card.quick-card,.btn{transition:none!important}} /* STEP 7: stronger hover glow across service cards, arrows, gallery, and interactive controls */ :root{ --az-glow-soft: rgba(66,186,255,.18); --az-glow-mid: rgba(78,204,255,.32); --az-glow-hard: rgba(109,222,255,.62); } /* global premium hover cue for interactive UI */ .header .nav a, .gallery-filters button, .inline-controls button, .faq-item button, .map-preview, .product-card, .booking-form input, .booking-form select, .booking-form textarea, .service-card, .gallery-item, .carousel-arrow{ transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease, filter .3s ease !important; } .header .nav a:hover, .header .nav a:focus-visible, .gallery-filters button:hover, .gallery-filters button:focus-visible, .inline-controls button:hover, .inline-controls button:focus-visible, .faq-item button:hover, .faq-item button:focus-visible, .map-preview:hover, .map-preview:focus-visible, .product-card:hover, .product-card:focus-visible{ box-shadow: 0 0 0 1px rgba(148,228,255,.28), 0 0 18px var(--az-glow-soft), 0 0 34px rgba(25,144,255,.18), 0 18px 34px rgba(0,0,0,.28) !important; border-color: rgba(112,214,255,.55) !important; } .booking-form input:hover, .booking-form select:hover, .booking-form textarea:hover, .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus{ box-shadow: 0 0 0 1px rgba(138,221,255,.24), 0 0 18px rgba(40,168,255,.16), 0 0 30px rgba(21,124,227,.12) !important; border-color: rgba(96,206,255,.55) !important; } /* service carousel arrows: glow + perfectly centered symbol */ .carousel-arrow{ color: transparent !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; background: radial-gradient(circle at 50% 35%, rgba(17,45,78,.98), rgba(6,15,25,.96)) !important; border-color: rgba(100,202,255,.42) !important; box-shadow: 0 0 0 1px rgba(91,201,255,.14), 0 0 18px rgba(35,150,255,.15), 0 14px 28px rgba(0,0,0,.38) !important; } .carousel-arrow::before{ font-size: 2rem; line-height: 1; color: #eff9ff; text-shadow: 0 0 12px rgba(120,223,255,.35); display:block; } .carousel-arrow.prev::before{content:'‹'; transform:translate(-1px,-1px);} .carousel-arrow.next::before{content:'›'; transform:translate(1px,-1px);} .carousel-arrow:hover, .carousel-arrow:focus-visible{ transform: translateY(-50%) scale(1.06) !important; border-color: rgba(120,220,255,.84) !important; box-shadow: 0 0 0 1px rgba(157,231,255,.42), 0 0 24px var(--az-glow-mid), 0 0 46px rgba(23,144,255,.26), 0 20px 36px rgba(0,0,0,.42) !important; outline:none; } .carousel-arrow:hover::before, .carousel-arrow:focus-visible::before{color:#ffffff; text-shadow:0 0 20px rgba(123,226,255,.65), 0 0 38px rgba(41,156,255,.34);} /* main service cards in carousel should glow strongly like the hero quick cards */ .service-card.is-main:hover, .service-card.is-main:focus-visible, .service-card.is-center-card:hover, .service-card.is-center-card:focus-visible{ transform: translateY(-10px) scale(1.012) !important; border-color: rgba(112,217,255,.88) !important; box-shadow: 0 0 0 1px rgba(151,229,255,.28), 0 0 22px var(--az-glow-mid), 0 0 48px rgba(26,143,255,.24), 0 30px 60px rgba(0,0,0,.52) !important; } .service-card.is-main:hover .service-overlay, .service-card.is-main:focus-visible .service-overlay, .service-card.is-center-card:hover .service-overlay, .service-card.is-center-card:focus-visible .service-overlay{ background: linear-gradient(180deg, rgba(4,12,20,.12), rgba(7,22,39,.40) 42%, rgba(5,13,22,.76) 100%) !important; } .service-card.is-main:hover img, .service-card.is-main:focus-visible img, .service-card.is-center-card:hover img, .service-card.is-center-card:focus-visible img{ filter: saturate(1.14) contrast(1.06) brightness(1.04) !important; } .service-card.is-side-peek:hover, .service-card.is-side-peek:focus-visible{ border-color: rgba(93,187,243,.52) !important; box-shadow: 0 0 0 1px rgba(88,192,255,.18), 0 0 18px rgba(25,139,255,.16), 0 16px 34px rgba(0,0,0,.36) !important; } /* gallery cards need the same premium glow */ .gallery-item:hover, .gallery-item:focus-visible{ transform: translateY(-8px) scale(1.015) !important; border-color: rgba(115,219,255,.84) !important; box-shadow: 0 0 0 1px rgba(153,231,255,.22), 0 0 24px rgba(54,192,255,.20), 0 0 48px rgba(28,141,255,.20), 0 22px 42px rgba(0,0,0,.38) !important; } .gallery-item:hover span, .gallery-item:focus-visible span{ text-shadow: 0 0 16px rgba(124,225,255,.22), 0 2px 18px rgba(0,0,0,.95) !important; } /* filter chips and pill buttons glow a bit more to feel consistent */ .gallery-filters button:hover, .gallery-filters button:focus-visible, .gallery-filters button.active{ background: linear-gradient(180deg, rgba(37,130,216,.28), rgba(19,61,110,.46)) !important; border-color: rgba(111,213,255,.74) !important; box-shadow: 0 0 0 1px rgba(136,225,255,.18), 0 0 16px rgba(44,174,255,.18), 0 0 32px rgba(27,132,238,.14) !important; } /* keep gallery ambient slightly brighter on hover */ .gallery .gallery-ambient.is-active{ opacity: .82 !important; filter: saturate(1.08) brightness(.76) blur(5px) !important; } /* STEP 8: transport section gets master-style ambient background + glow + mini modal triggers */ .transport{position:relative;isolation:isolate;overflow:hidden;background:#071627} .transport .wrap{position:relative;z-index:2} .transport-ambient,.transport-wash{position:absolute;inset:0;pointer-events:none} .transport-ambient{ z-index:-3; background-image:url('assets/vehicle-1.webp'); background-size:cover; background-position:center; opacity:.18; filter:saturate(1.02) brightness(.78) contrast(1.02) blur(1px); transform:scale(1.08); transition:opacity .55s ease, transform 1.1s ease, filter .55s ease, background-image .4s ease; } .transport.has-ambient .transport-ambient{opacity:.42;transform:scale(1.03);filter:saturate(1.08) brightness(.9) contrast(1.05) blur(0)} .transport-wash{ z-index:-2; background: linear-gradient(180deg, rgba(5,13,21,.94) 0%, rgba(6,16,28,.78) 28%, rgba(6,18,30,.72) 66%, rgba(5,13,23,.95) 100%), radial-gradient(circle at 22% 24%, rgba(73,169,255,.12), transparent 26%), radial-gradient(circle at 78% 62%, rgba(34,116,194,.18), transparent 28%); } .transport .section-head p:last-child{max-width:540px} .transport-grid{position:relative} .transport .media-tile{cursor:pointer;outline:none;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,filter .35s ease} .transport .media-tile::before{ content:'';position:absolute;inset:-1px;border-radius:24px;pointer-events:none;opacity:0; box-shadow:0 0 0 1px rgba(157,231,255,.22),0 0 20px rgba(72,190,255,.18),0 0 42px rgba(24,129,239,.18); transition:opacity .35s ease; } .transport .media-tile:hover, .transport .media-tile:focus-visible, .transport .media-tile.is-hovered{ transform:translateY(-7px) scale(1.01); border-color:rgba(111,214,255,.82) !important; box-shadow:0 0 0 1px rgba(155,230,255,.22),0 0 24px rgba(68,195,255,.22),0 0 52px rgba(22,132,239,.24),0 28px 54px rgba(0,0,0,.42) !important; } .transport .media-tile:hover::before, .transport .media-tile:focus-visible::before, .transport .media-tile.is-hovered::before{opacity:1} .transport .media-tile:hover img, .transport .media-tile:focus-visible img, .transport .media-tile.is-hovered img{transform:scale(1.07);filter:saturate(1.08) brightness(1.04)} .transport .media-tile:hover span, .transport .media-tile:focus-visible span, .transport .media-tile.is-hovered span{text-shadow:0 0 16px rgba(111,219,255,.16)} .transport .media-tile strong{font-size:clamp(1.18rem,1.6vw,1.95rem)} .transport .media-tile small{font-size:.96rem;color:#d6e4ef} /* STEP 9: final readability, modal glow, smoother ambient crossfades, real gallery hero */ .service-copy strong, .service-copy em, .service-copy i, .service-copy small{ color:#f4fbff !important; text-shadow:0 3px 16px rgba(0,0,0,.85),0 0 18px rgba(4,20,42,.38); } .service-copy small{color:#9fe6ff !important} .service-card .service-overlay{ background:linear-gradient(180deg, rgba(3,11,18,.1), rgba(3,11,18,.34) 28%, rgba(4,11,18,.72) 62%, rgba(4,11,18,.95) 100%) !important; } .service-card:hover .service-overlay, .service-card:focus-visible .service-overlay, .service-card.is-main:hover .service-overlay, .service-card.is-center-card:hover .service-overlay{ background:linear-gradient(180deg, rgba(2,11,20,.06), rgba(2,11,20,.28) 25%, rgba(4,12,20,.64) 56%, rgba(4,12,20,.92) 100%) !important; } /* glow around all open information popups/modals */ .modal-panel, .quick-info-panel, .detail-modal, .gallery-modal-panel, .map-modal-panel{ box-shadow:0 26px 78px rgba(0,0,0,.56),0 0 0 1px rgba(117,201,255,.14),0 0 34px rgba(58,176,255,.14),0 0 78px rgba(24,118,219,.16) !important; } .modal.open .modal-panel{ border-color:rgba(122,210,255,.32) !important; } .modal.open .modal-panel::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(157,226,255,.12),0 0 0 1px rgba(157,226,255,.08),0 0 24px rgba(72,194,255,.16); } .modal.open .detail-copy, .modal.open .quick-info-body, .modal.open .gallery-modal-copy, .modal.open .map-copy{position:relative;z-index:1} .modal.open .modal-close, .modal.open .btn{ box-shadow:0 0 0 1px rgba(106,196,255,.12),0 0 24px rgba(39,149,255,.14); } /* stronger glow on compare copy panel */ .compare-copy{ border-color:rgba(136,208,255,.24) !important; box-shadow:0 22px 72px rgba(0,0,0,.5),0 0 0 1px rgba(132,206,255,.08),0 0 28px rgba(45,146,255,.18) !important; } .compare-copy::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(169,229,255,.10),0 0 22px rgba(45,146,255,.12); } /* gallery cards get explicit premium glow too */ .gallery-item:hover, .gallery-item:focus-visible{ box-shadow:0 18px 40px rgba(0,0,0,.34),0 0 0 1px rgba(82,196,255,.18),0 0 34px rgba(47,146,255,.18) !important; } /* transport ambient crossfade and hover glow like master cards */ .transport-ambient{z-index:-3;opacity:0} .transport-ambient.ambient-a{opacity:.18} .transport .transport-ambient{ background-size:cover;background-position:center; filter:saturate(1.04) brightness(.8) contrast(1.03) blur(1px); transform:scale(1.08); transition:opacity .62s cubic-bezier(.22,.74,.2,1), transform 1.2s cubic-bezier(.22,.74,.2,1), filter .62s ease; } .transport.has-ambient .transport-ambient.is-active{ opacity:.42;transform:scale(1.03);filter:saturate(1.08) brightness(.92) contrast(1.06) blur(0); } .transport .media-tile span, .transport .media-tile strong, .transport .media-tile small{color:#f3fbff;text-shadow:0 2px 14px rgba(0,0,0,.72)} .transport .media-tile::before{ box-shadow:0 0 0 1px rgba(157,231,255,.28),0 0 26px rgba(72,190,255,.20),0 0 48px rgba(24,129,239,.22) !important; } .transport .media-tile:hover, .transport .media-tile:focus-visible, .transport .media-tile.is-hovered{ box-shadow:0 0 0 1px rgba(155,230,255,.24),0 0 28px rgba(68,195,255,.24),0 0 58px rgba(22,132,239,.24),0 28px 54px rgba(0,0,0,.42) !important; } /* smoother services carousel motion */ .service-track{transition-timing-function:cubic-bezier(.18,.78,.18,1) !important} /* glow for transport quick cards when clicked/opened */ .quick-info-panel{ max-width:min(560px, calc(100vw - 30px)); padding:28px 28px 26px; } .quick-info-body{position:relative} .quick-info-panel h3{font-size:clamp(2rem,4vw,3rem);margin:.25rem 0 0} .quick-info-text{margin-top:14px;color:#d3e6f4;line-height:1.76} .quick-info-points{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px} .quick-info-points li{position:relative;padding-left:18px;color:#e2f1fb} .quick-info-points li::before{content:'';position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--blue),#9ce8ff)} /* make modal gallery first image use original service sign cleanly */ #galleryImage{image-rendering:auto} /* STEP 10: products panel polish, readable titles, stronger glow, smoother hover, richer background */ .stats-products{position:relative;isolation:isolate;overflow:hidden} .stats-products::before, .stats-products::after{ content:"";position:absolute;inset:auto;pointer-events:none;z-index:-1;opacity:.42; } .stats-products::before{ right:-6%;top:8%;width:40vw;height:40vw;min-width:340px;min-height:340px; background:radial-gradient(circle at center, rgba(42,128,218,.24), rgba(6,22,40,0) 62%), url('assets/product-4.webp') center/cover no-repeat; filter:blur(26px) saturate(.76) brightness(.42); animation:productsDriftA 18s ease-in-out infinite alternate; } .stats-products::after{ left:-8%;bottom:-14%;width:32vw;height:32vw;min-width:260px;min-height:260px; background:radial-gradient(circle at center, rgba(85,205,255,.18), rgba(6,22,40,0) 60%), url('assets/product-2.webp') center/cover no-repeat; filter:blur(34px) saturate(.72) brightness(.34); animation:productsDriftB 22s ease-in-out infinite alternate; } @keyframes productsDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-22px,18px,0) scale(1.05)}} @keyframes productsDriftB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(20px,-18px,0) scale(1.07)}} .products-panel{position:relative;isolation:isolate;overflow:visible !important; box-shadow:0 18px 54px rgba(0,0,0,.36), 0 0 0 1px rgba(97,191,255,.12); } .products-panel::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg, rgba(15,33,55,.22), rgba(5,14,24,0) 44%), radial-gradient(circle at 86% 24%, rgba(72,195,255,.10), transparent 24%); z-index:0; } .products-panel > *{position:relative;z-index:1} .products-panel:hover, .products-panel:focus-within{ box-shadow:0 22px 66px rgba(0,0,0,.42),0 0 0 1px rgba(128,219,255,.18),0 0 32px rgba(46,157,255,.14); } .product-window{overflow-x:hidden !important;overflow-y:visible !important;padding:10px 0 14px;margin:-10px 0 -14px} .product-track{padding:4px 2px 8px} .product-card{position:relative;box-shadow:0 12px 24px rgba(0,0,0,.22);will-change:transform;transform-origin:center center} .product-card::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; box-shadow:inset 0 0 0 1px rgba(166,233,255,.14),0 0 0 1px rgba(166,233,255,.10),0 0 26px rgba(70,192,255,.16),0 0 56px rgba(25,126,234,.18); transition:opacity .32s ease; } .product-card:hover::before, .product-card:focus-visible::before{opacity:1} .product-card:hover, .product-card:focus-visible{ transform:translateY(-6px) scale(1.018) !important; box-shadow:0 0 0 1px rgba(152,228,255,.22),0 0 26px rgba(65,192,255,.16),0 0 52px rgba(24,134,244,.18),0 22px 44px rgba(0,0,0,.36) !important; } .product-card img{filter:saturate(.92) brightness(.94) contrast(1.06)} .product-body{background:linear-gradient(180deg, rgba(8,18,29,.80), rgba(7,15,24,.95));} .product-body strong, .product-body b{display:block;color:#f4fbff !important;font-size:1.28rem;line-height:1.18;font-weight:900;text-shadow:0 3px 16px rgba(0,0,0,.72)} .product-body small{display:block;color:#bdd1e1 !important;font-size:1rem;line-height:1.55;margin-top:3px} .product-body i{display:block;color:#9ee9ff !important;text-shadow:0 0 18px rgba(43,178,255,.14)} .inline-controls button:hover, .inline-controls button:focus-visible{transform:translateY(-2px) scale(1.02)} /* stronger glow for all info modals opened from cards */ .modal.open .detail-modal, .modal.open .gallery-modal-panel, .modal.open .quick-info-panel, .modal.open .map-modal-panel{ box-shadow:0 30px 88px rgba(0,0,0,.56),0 0 0 1px rgba(136,221,255,.22),0 0 38px rgba(72,190,255,.18),0 0 74px rgba(25,126,234,.18) !important; } .modal.open .detail-modal::before, .modal.open .gallery-modal-panel::before, .modal.open .quick-info-panel::before, .modal.open .map-modal-panel::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(173,233,255,.12),0 0 24px rgba(74,188,255,.14); } /* larger glow for process cards */ .process-grid article:hover, .process-grid article:focus-within{ transform:translateY(-6px); border-color:rgba(92,202,255,.48); box-shadow:0 0 0 1px rgba(145,224,255,.18),0 0 28px rgba(52,184,255,.16),0 0 54px rgba(22,120,224,.18),0 22px 48px rgba(0,0,0,.34) !important; } /* STEP 11 — validated contact channels / actual in-page map / premium products */ .faq-contact{background:radial-gradient(circle at 76% 42%,rgba(15,108,193,.14),transparent 35%),linear-gradient(180deg,#04101d,#061421)} .azzda-contact-hub{overflow:hidden;isolation:isolate;padding:36px;background:linear-gradient(135deg,rgba(10,34,56,.98),rgba(3,13,25,.99));border:1px solid rgba(110,206,255,.32);box-shadow:0 0 0 1px rgba(42,159,245,.1),0 0 44px rgba(30,126,232,.17),0 28px 70px rgba(0,0,0,.3)} .azzda-contact-hub::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 95% 0%,rgba(37,154,246,.22),transparent 40%),radial-gradient(circle at 0% 90%,rgba(41,134,224,.17),transparent 35%);z-index:-1} .azzda-contact-hub .contact-card-copy p:last-child{max-width:620px;color:#b8cfe1} .primary-contact-call{display:flex;align-items:center;gap:20px;margin:26px 0 24px;padding:22px;border:1px solid rgba(105,220,255,.3);border-radius:23px;background:linear-gradient(125deg,rgba(19,95,155,.56),rgba(7,29,55,.85));box-shadow:0 12px 40px rgba(10,114,214,.12);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease} .primary-contact-call:hover,.primary-contact-call:focus-visible{transform:translateY(-5px);border-color:rgba(123,226,255,.9);box-shadow:0 0 0 1px rgba(145,228,255,.22),0 0 37px rgba(30,174,255,.3),0 18px 40px rgba(0,0,0,.25)} .contact-icon{display:grid;place-items:center;width:63px;height:63px;flex:0 0 63px;border-radius:20px;background:linear-gradient(145deg,#64d9ff,#209cff);color:#021420;box-shadow:0 0 22px rgba(60,188,255,.35)} .contact-icon svg{width:29px;height:29px} .call-copy{display:grid;gap:5px;min-width:0} .call-copy small{font-size:.74rem;letter-spacing:.13em;color:#99e5ff;font-weight:800} .call-copy strong{color:#fff;font-size:clamp(1.24rem,2.2vw,1.8rem);letter-spacing:.01em;overflow-wrap:anywhere} .call-copy em{font-style:normal;color:#c0d6e9;font-size:.92rem} .contact-arrow{font-size:1.8rem;margin-left:auto;color:#90e5ff} .social-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .social-contact{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;padding:21px 15px 19px;min-height:167px;min-width:0;border-radius:20px;border:1px solid rgba(99,171,236,.26);background:linear-gradient(145deg,rgba(8,26,44,.94),rgba(3,12,24,.94));color:#f0faff;box-shadow:0 12px 30px rgba(0,0,0,.15);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease} .social-contact:hover,.social-contact:focus-visible{transform:translateY(-7px);border-color:rgba(114,216,255,.85);background:linear-gradient(145deg,rgba(13,59,96,.94),rgba(5,23,42,.98));box-shadow:0 0 0 1px rgba(116,213,255,.22),0 0 32px rgba(45,160,255,.23),0 22px 40px rgba(0,0,0,.3)} .social-icon{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;border-radius:15px;background:rgba(26,116,195,.19);border:1px solid rgba(100,202,255,.29);color:#82dfff} .social-icon svg{width:26px;height:26px} .social-whatsapp .social-icon{color:#78eec1;background:rgba(21,137,83,.2)} .social-facebook .social-icon{color:#a1c6ff;background:rgba(49,87,184,.16)} .social-instagram .social-icon{color:#fac8ee;background:rgba(165,53,134,.14)} .social-contact strong{font-size:1.05rem} .social-contact small{color:#adc7dc;line-height:1.35;font-size:.81rem} .social-arrow{position:absolute;right:14px;top:18px;color:#96cce9;font-weight:900} .contact-trust-line{margin-top:20px;color:#98b6ca;font-size:.84rem;display:flex;gap:10px;align-items:center;line-height:1.5} .trust-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#65dcb2;box-shadow:0 0 12px rgba(72,220,154,.6)} .contact-bottom-v11{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);margin-top:20px} .contact-bottom-v11 .contact-details{padding:25px;background:linear-gradient(145deg,#0a1b2c,#050f1d)} .contact-bottom-v11 .contact-details h3{font-size:1.4rem;margin-bottom:20px} .contact-actions svg{width:19px;height:19px} .actual-map-preview{position:relative;isolation:isolate;min-height:260px;border:1px solid rgba(110,197,255,.38);border-radius:25px;padding:0;background:linear-gradient(145deg,#0b2d47,#051526);color:white;overflow:hidden;text-align:left;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.24);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .actual-map-preview:hover,.actual-map-preview:focus-visible{transform:translateY(-5px);border-color:rgba(132,222,255,.84);box-shadow:0 0 0 1px rgba(167,232,255,.2),0 0 28px rgba(65,177,255,.21),0 22px 40px rgba(0,0,0,.3)} .preview-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(100,176,227,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(100,176,227,.15) 1px,transparent 1px);background-size:36px 36px;opacity:.7;transform:rotate(-6deg) scale(1.3)} .preview-map-lines{position:absolute;inset:0;opacity:.7} .preview-map-lines svg{width:100%;height:100%;fill:none;stroke:#4b9acf;stroke-width:9;stroke-linecap:round} .preview-map-lines path{stroke-dasharray:1200;stroke-dashoffset:0} .preview-pin{position:absolute;left:57%;top:26%;display:grid;place-items:center;width:56px;height:56px;background:#1e9fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 8px 26px rgba(50,184,255,.4)} .preview-pin svg{width:27px;height:27px;transform:rotate(45deg)} .preview-map-label{position:absolute;left:13px;right:13px;bottom:13px;display:grid;gap:5px;padding:14px;border-radius:16px;background:rgba(3,14,26,.86);backdrop-filter:blur(10px);border:1px solid rgba(133,203,250,.18)} .preview-map-label strong{font-size:.96rem} .preview-map-label small{color:#b1d7ec} .actual-map-modal{width:min(1070px,calc(100vw - 30px));padding:28px;overflow:auto} .actual-map-modal-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px;padding-right:40px} .actual-map-modal-header h2{font-size:clamp(1.8rem,3vw,2.8rem)} .actual-map-modal-header p:last-child{color:#b8d5e9;margin-top:10px} .live-map-tag{display:flex;align-items:center;gap:7px;padding:10px 13px;background:rgba(15,72,110,.55);border-radius:999px;color:#bce9ff;font-size:.8rem;font-weight:800;border:1px solid rgba(97,196,255,.2);white-space:nowrap} .live-map-tag svg{width:16px;height:16px} .real-map-container{position:relative;background:#102438;border:1px solid rgba(105,201,255,.3);overflow:hidden;border-radius:22px;min-height:420px;box-shadow:inset 0 0 25px rgba(0,0,0,.3)} .real-map-container iframe{display:block;position:relative;width:100%;height:440px;border:0;z-index:2;background:transparent} .map-loading-note{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:#d1e4f3;background:radial-gradient(circle,rgba(32,96,149,.4),#081928)} .real-map-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 0 7px;color:#d9ecfa;flex-wrap:wrap} .real-map-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px} .map-attribution{font-size:.8rem;color:#9cb5c8;margin-top:6px} /* product background intentionally visible above and around panels, not behind page */ .stats-products{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#051424,#06172a 52%,#06121e)} .stats-products::before,.stats-products::after{display:none !important} .stats-products>.wrap{position:relative;z-index:2} .tire-promo-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .tire-promo-scene::before{content:'';position:absolute;inset:-13% -8%;background:url('assets/gallery-8.webp') center 44%/cover no-repeat;filter:blur(9px) saturate(1.18) brightness(.62);opacity:.7;transform:scale(1.1);animation:tyreSceneMove 22s ease-in-out infinite alternate} .tire-promo-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,12,25,.72),rgba(2,12,25,.47) 38%,rgba(3,14,27,.62)),linear-gradient(180deg,rgba(3,14,25,.8),rgba(3,14,25,.23) 34%,rgba(3,14,25,.48) 68%,rgba(3,14,25,.86))} @keyframes tyreSceneMove{from{transform:scale(1.12) translate3d(-12px,0,0)}to{transform:scale(1.19) translate3d(18px,-10px,0)}} .stats-products .two-col-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:22px;align-items:stretch} .stats-products .stats-panel,.stats-products .products-panel{min-width:0} .stats-products .stats-panel{box-shadow:0 25px 64px rgba(0,0,0,.4),0 0 0 1px rgba(105,207,255,.2),0 0 38px rgba(29,149,255,.16)} .stats-products .products-panel{overflow:hidden !important;border-color:rgba(109,212,255,.42);background:linear-gradient(135deg,rgba(11,28,46,.88),rgba(3,13,26,.94));box-shadow:0 24px 68px rgba(0,0,0,.43),0 0 0 1px rgba(143,217,255,.16),0 0 42px rgba(44,161,255,.23)} .stats-products .products-panel:hover,.stats-products .products-panel:focus-within{box-shadow:0 26px 68px rgba(0,0,0,.47),0 0 0 1px rgba(163,231,255,.27),0 0 60px rgba(49,176,255,.39),0 0 96px rgba(19,102,214,.19) !important} .stats-products .panel-head h2{font-size:clamp(2rem,3.2vw,3.25rem);overflow-wrap:normal} .stats-products .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .stats-products .stats-grid div{min-width:0} .stats-products .stats-grid b{font-size:clamp(.8rem,1.3vw,1.12rem);overflow-wrap:anywhere} .stats-products .product-window{overflow:hidden !important;margin:0;padding:12px 8px 15px} .stats-products .product-track{gap:16px} .stats-products .product-card{min-width:0;transform:translateY(0)} .stats-products .product-card:hover,.stats-products .product-card:focus-visible{transform:translateY(-4px) scale(1.008) !important;border-color:rgba(112,219,255,.86) !important;box-shadow:0 0 0 1px rgba(133,224,255,.32),0 0 26px rgba(59,186,255,.31),0 0 45px rgba(27,139,255,.27) !important} .stats-products .product-body strong{color:#f7fbff !important} @media(max-width:1140px){.stats-products .two-col-layout{grid-template-columns:1fr}} @media(max-width:750px){.azzda-contact-hub{padding:24px}.contact-bottom-v11{grid-template-columns:1fr}.social-contact-grid{grid-template-columns:1fr 1fr}.actual-map-modal-header{flex-direction:column;align-items:flex-start}.real-map-container,.real-map-container iframe{min-height:315px;height:315px}} @media(max-width:480px){.social-contact-grid{grid-template-columns:1fr}.social-contact{min-height:105px;display:grid;grid-template-columns:46px 1fr;gap:2px 13px;align-content:center}.social-icon{grid-row:span 2}.social-contact small{grid-column:2}.social-arrow{right:14px;top:16px}.primary-contact-call{gap:12px;padding:16px}.contact-icon{width:50px;height:50px;flex-basis:50px}.call-copy strong{font-size:1.15rem}.actual-map-modal{padding:15px}.live-map-tag{display:none}.real-map-actions .btn{padding:12px 15px}.stats-products .products-panel{padding:16px}} @media(prefers-reduced-motion:reduce){.tire-promo-scene::before{animation:none}.social-contact,.primary-contact-call,.actual-map-preview{transition:none}} /* STEP11 visual review: reveal recognisable tire-workshop photography inside the product offer */ .stats-products .products-panel::before{ content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:.32; background: url('assets/gallery-8.webp') right center/cover no-repeat; filter:saturate(1.08) brightness(.86) blur(1.5px); transform:scale(1.035); animation:offerImageBreath 17s ease-in-out infinite alternate; } .stats-products .products-panel::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:linear-gradient(100deg,rgba(4,13,27,.66),rgba(4,13,27,.28) 70%,rgba(4,13,27,.42)); } @keyframes offerImageBreath{from{transform:scale(1.035) translateX(-7px)}to{transform:scale(1.09) translateX(8px)}} @media(prefers-reduced-motion:reduce){.stats-products .products-panel::before{animation:none}} /* AZZDA V17 -- curated luminous sky-blue art direction. NO changes to JS handlers, transitions, transformations, animations or keyframes. Final visual specificity block deliberately overrides archived dark-mode !important rules. */ :root{--bg:#eaf5fd !important;--bg-2:#ddebfa !important;--card:#d5edff !important;--card-2:#cce6fa !important;--text:#163859 !important;--muted:#54728f !important;--muted-2:#66839b !important;--line:rgba(50,138,211,.25) !important;--shadow:0 18px 42px rgba(29,88,145,.12) !important} body{color:#153557!important;background:linear-gradient(180deg,#e8f5ff 0%,#f2f9ff 28%,#e6f3ff 100%)!important} .site-bg{background:radial-gradient(circle at 20% 40%,rgba(91,184,244,.10),transparent 40%),radial-gradient(circle at 80% 68%,rgba(74,168,234,.12),transparent 42%)!important;opacity:.35!important} .site-bg::before{opacity:.3} .bg-square,.bg-line{border-color:rgba(60,150,226,.23)!important} .demo-bar{background:#d9f0ff!important;color:#456f90!important;border-color:#bcdeef!important} .header{background:rgba(4,32,63,.97)!important;border-color:rgba(135,215,255,.17)!important} .header .nav a,.nav-phone,.brand{color:#f5fbff!important} /* Hero directly fills its own image-backed section: never add backgrounds to .hero .wrap */ .hero{background:#8bcee9!important} .hero-image{filter:brightness(1.015) saturate(1.035)!important} .hero-overlay{background:linear-gradient(90deg,rgba(228,245,255,.86) 0%,rgba(227,244,255,.63) 38%,rgba(222,241,254,.07) 75%,rgba(221,242,255,.09) 100%),linear-gradient(180deg,rgba(242,250,255,.07),rgba(211,236,255,.12))!important} .hero h1,.hero .hero-copy h1{color:#08335a!important;text-shadow:0 2px 16px rgba(255,255,255,.62)!important} .hero .eyebrow{color:#006bad!important;text-shadow:0 1px 7px rgba(255,255,255,.6)} .hero .hero-text,.hero .hero-highlights,.hero .hero-highlights li{color:#163956!important;text-shadow:0 1px 9px rgba(255,255,255,.77)} .hero .btn-ghost{color:#104777!important;background:rgba(241,250,255,.9)!important;border-color:rgba(27,122,201,.3)!important} .hero .btn-solid{color:#062e50!important} .hero-card{background:linear-gradient(145deg,rgba(220,241,255,.95),rgba(186,224,249,.93))!important;border-color:rgba(70,161,232,.52)!important;box-shadow:0 18px 47px rgba(29,81,129,.16)!important;color:#0c3556!important} .hero-card-kicker{color:#006eae!important} .hero-card li{background:rgba(242,250,255,.88)!important;color:#0c3556!important;border-color:rgba(81,167,223,.28)!important} .hero-card li:hover,.hero-card li:focus-within{background:rgba(202,235,255,.95)!important} .hero-card-note{color:#355f7d!important} .hero-bottom{background:linear-gradient(180deg,rgba(218,240,255,.55),rgba(203,233,252,.68))!important;border-radius:23px!important} .hero-bottom::before,.hero-bottom::after{opacity:.14!important} .mini-stat,.mini-stat.quick-card{background:linear-gradient(160deg,rgba(229,245,255,.95),rgba(192,225,248,.95))!important;border:1px solid rgba(66,166,240,.31)!important;box-shadow:0 10px 27px rgba(19,102,182,.11)!important} .mini-stat b{color:#0c395d!important}.mini-stat span{color:#386486!important} .mini-stat:hover,.mini-stat:focus-visible{background:linear-gradient(150deg,#e7f7ff,#aee0ff)!important} /* Icon feature strip is no longer a second charcoal background with grey cards */ .icon-strip{background:linear-gradient(125deg,rgba(222,241,254,.96),rgba(203,232,250,.94))!important;border:1px solid rgba(90,172,234,.22)!important;box-shadow:0 12px 36px rgba(29,99,157,.1)!important} .icon-strip::before,.icon-strip::after{opacity:.18!important} .icon-strip article,.icon-strip .info-card{background:linear-gradient(160deg,#e7f6ff,#c8e8fc)!important;border:1px solid #aad4f5!important;box-shadow:0 12px 30px rgba(20,102,181,.12)!important;color:#0a375a!important} .icon-strip small,.icon-strip strong,.icon-strip .info-card *{color:#1c4b70!important} .icon-strip .info-card:hover,.icon-strip .info-card:focus-visible{background:linear-gradient(145deg,#f1faff,#b8e5ff)!important} /* Section backdrops: preserve original animated ambient layers but neutralize dark wash */ .section{color:#0f3558!important} .section::after{opacity:.25!important} .services,.gallery{background:linear-gradient(125deg,#f3faff,#e5f3fe 55%,#eef8ff)!important} .transport{background:linear-gradient(135deg,#edf8ff,#e2f1ff 60%,#eaf7ff)!important} .stats-products{background:linear-gradient(180deg,#e7f5ff,#d8ebfa 52%,#e4f3fe)!important} .faq-contact{background:linear-gradient(140deg,#eff9ff,#e2f1fc 58%,#edf8ff)!important} .process{background:linear-gradient(110deg,#e9f5ff,#dcefff)!important} .services::before,.gallery::before{background:linear-gradient(180deg,rgba(246,251,255,.8),rgba(231,246,255,.71) 56%,rgba(235,248,255,.88))!important} .ambient-photo-layer{filter:saturate(.82) brightness(1.15) blur(5px)!important} .ambient-photo-layer.is-active{opacity:.11!important} .section-head h2,.section h2,.section h3,.section .section-head p,.eyebrow{color:#0c365a!important} .section .eyebrow{color:#067bc3!important} .section-head p:last-child,.section-note,.section .section-note{color:#507591!important} .carousel-counter{color:#176aa3!important} /* Service cards remain full-size animated tiles with refined translucent pale-blue footer */ .service-card{background:#d6eaf7!important;border-color:rgba(93,180,239,.35)!important;box-shadow:0 16px 40px rgba(24,96,154,.15)!important} .service-card img,.service-card.is-main img,.service-card.is-side-peek img{filter:brightness(1.03) saturate(1.02) contrast(1.01)!important} .service-card.is-side-peek{opacity:.72!important} .service-card .service-overlay,.service-card.is-main .service-overlay,.service-card.is-side-peek .service-overlay{background:linear-gradient(180deg,rgba(13,41,65,0) 0%,rgba(13,43,74,.02) 58%,rgba(15,58,90,.14) 100%)!important} .service-card .service-copy{background:rgba(228,245,255,.94)!important;border:1px solid rgba(110,185,235,.42)!important;border-radius:17px!important;padding:14px 16px!important;left:14px!important;right:14px!important;bottom:14px!important;box-shadow:0 10px 28px rgba(34,100,146,.12)!important;gap:5px!important} .service-card .service-copy strong{color:#123e63!important;text-shadow:none!important;font-size:clamp(1.15rem,1.5vw,1.6rem)!important} .service-card .service-copy small,.service-card .service-copy i{color:#007fca!important;text-shadow:none!important} .service-card .service-copy em{color:#567998!important} .carousel-arrow{background:linear-gradient(140deg,#f4fbff,#cceaff)!important;border-color:#a4d9ff!important;box-shadow:0 9px 26px rgba(34,118,179,.15)!important} .carousel-arrow::before{color:#007bcc!important;text-shadow:none!important} /* The floating tile ambient interactions and hover transitions stay in original CSS */ .transport .transport-ambient{filter:saturate(.87) brightness(1.09) blur(2px)!important} .transport .transport-ambient.is-active{opacity:.08!important} .transport-wash{background:linear-gradient(135deg,rgba(241,250,255,.8),rgba(227,245,255,.65))!important} .media-tile{border-color:rgba(74,157,218,.31)!important;box-shadow:0 14px 32px rgba(32,104,164,.12)!important} .media-tile::after{background:linear-gradient(180deg,rgba(5,34,66,0),rgba(5,35,67,.03) 40%,rgba(8,37,64,.66) 100%)!important} .transport .media-tile::before{opacity:0} .transport .media-tile span,.transport .media-tile strong,.transport .media-tile small{color:#fff!important;text-shadow:0 2px 8px rgba(0,20,42,.57)!important} /* Keep before/after paired photos and slider exactly as source */ .compare-copy{background:linear-gradient(145deg,rgba(4,41,74,.9),rgba(8,59,97,.82))!important;color:#f6fcff!important} .compare-copy h2,.compare-copy h3,.compare-copy .eyebrow{color:#f6fcff!important} .compare-copy p:not(.eyebrow),.compare-list li{color:#eff8ff!important} /* Light sky-blue product cards while foreground text remains legible */ .stats-products .products-panel,.products-panel{background:linear-gradient(155deg,rgba(230,246,255,.97),rgba(190,225,249,.97))!important;border:1px solid #a8d8f5!important;box-shadow:0 18px 44px rgba(36,91,148,.13)!important} .stats-products .products-panel::before{opacity:.11!important;filter:brightness(1.2) blur(3px)!important} .stats-products .products-panel::after{background:linear-gradient(105deg,rgba(245,252,255,.66),rgba(229,245,255,.83))!important} .stats-products .panel-head h2,.stats-products .panel-head .eyebrow{color:#103c60!important} .stats-panel{box-shadow:0 17px 43px rgba(32,99,157,.14)!important} .stats-panel .panel-overlay{background:linear-gradient(180deg,rgba(12,42,68,.04),rgba(11,47,77,.43) 67%,rgba(12,45,71,.7))!important} .stats-panel .panel-copy h2,.stats-panel .panel-copy .eyebrow{color:white!important} .stats-grid div{background:rgba(235,247,255,.83)!important;border-color:rgba(88,179,236,.36)!important} .stats-grid b{color:#123c61!important}.stats-grid span{color:#4d6f8a!important} .product-card{background:#e7f5ff!important;border-color:#a9d9f8!important;box-shadow:0 9px 26px rgba(34,103,165,.11)!important} .product-body{background:linear-gradient(160deg,#e9f7ff,#cceaff)!important} .product-body strong,.stats-products .product-body strong{color:#173b5e!important;text-shadow:none!important} .product-body small{color:#527492!important}.product-body i{color:#027dca!important;text-shadow:none!important} .inline-controls button{background:#eaf7ff!important;color:#007bc9!important;border-color:#97d4ff!important} .gallery-filters button{background:#e5f5ff!important;border-color:#b0d8f5!important;color:#245b83!important} .gallery-filters button.active{background:linear-gradient(160deg,#9bdcff,#c7ebff)!important;border-color:#4daff1!important;color:#10476e!important} .gallery-item img{filter:saturate(1.0) brightness(1.0) contrast(1.02)!important} .gallery-item::after{background:linear-gradient(180deg,rgba(8,38,69,0),rgba(8,38,69,.04) 36%,rgba(6,39,69,.62) 100%)!important} .gallery-item span{color:#fff!important} /* Moving photo wall: bright curated workshop images, same timing and direction */ .process .photo-wall{opacity:.4!important;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)!important} .photo-wall img{filter:saturate(.89) brightness(1.18)!important} .process::before{background:linear-gradient(90deg,rgba(230,247,255,.62),rgba(236,250,255,.43),rgba(225,244,255,.62))!important} .process-grid article{background:linear-gradient(145deg,rgba(239,250,255,.94),rgba(201,232,252,.96))!important;border:1px solid #a8d6f5!important;box-shadow:0 15px 36px rgba(39,99,159,.1)!important} .process-grid article h3,.process-grid article p,.process-grid article span{color:#143b5d!important} /* Accordion, booking, contact hub are all readable in light mode */ .faq-item,.contact-card,.azzda-contact-hub,.contact-bottom-v11 .contact-details{background:linear-gradient(150deg,rgba(239,249,255,.97),rgba(207,233,251,.96))!important;color:#163c5e!important;border-color:rgba(84,163,226,.28)!important} .faq-item.open{background:#d5eeff!important} .faq-item button,.faq-item .faq-question{color:#153e60!important} .faq-answer,.faq-answer p{color:#426a89!important} .azzda-contact-hub .contact-card-copy p:last-child,.contact-trust-line{color:#49708c!important} .primary-contact-call{background:linear-gradient(135deg,#d0eeff,#a9dfff)!important;color:#12436d!important} .primary-contact-call .call-copy small,.primary-contact-call .call-copy strong,.primary-contact-call .call-copy em{color:#14486f!important} .social-contact{background:linear-gradient(145deg,#e9f7ff,#cfe9fc)!important;color:#16436a!important} .social-contact strong,.social-contact small{color:#285979!important} .contact-bottom-v11 .contact-details h3,.contact-bottom-v11 .contact-details li,.contact-bottom-v11 .contact-details a{color:#173d60!important} .booking-form input,.booking-form textarea,.booking-form select{background:#f4fbff!important;border-color:#a4d4f4!important;color:#143859!important} .booking-form input::placeholder,.booking-form textarea::placeholder{color:#7996ab!important} .actual-map-preview{background:linear-gradient(150deg,#d4edff,#9dcced)!important;color:#0b375e!important} .preview-map-label{background:rgba(229,248,255,.9)!important;color:#19415d!important} .preview-map-label strong,.preview-map-label small{color:#1e536e!important} .map-loading-note{background:linear-gradient(150deg,#e1f3ff,#b4ddf6)!important;color:#144565!important} .real-map-bottom{color:#315f7e!important} /* Retain dark glass modal presentation, overrides root --text for modal readability */ .modal .modal-panel,.modal .modal-panel *:not(.btn-solid){color:#eef8ff} .modal .modal-panel{color:#f1f8ff!important} .modal .btn-solid{color:#092d4a!important} .footer{background:#04203b!important;color:#d5e7f7!important} /* Mobile layout: same responsive rules, strong readability over truck photo */ @media(max-width:750px){.hero-overlay{background:linear-gradient(90deg,rgba(229,246,255,.84),rgba(216,238,252,.54)),linear-gradient(180deg,rgba(255,255,255,.06),rgba(214,236,251,.26))!important}.hero h1{color:#083556!important}.hero-card{background:#d1edff!important}.icon-strip{padding:16px!important}} /* V17 visual acceptance repair: photographic walls must be LUMINOUS BLUE, not dark tinted. Keeping original wall motion and panels (no extra static layer). */ .azzda-hero-wall{opacity:1!important;background:#cceaff!important} .azzda-hero-wall .azzda-photo-tile{filter:brightness(1.10) saturate(.97) contrast(.98)!important;box-shadow:0 7px 24px rgba(32,103,166,.12),inset 0 0 0 1px rgba(245,253,255,.42)!important} .azzda-hero-wall .azzda-photo-tile::after{background:linear-gradient(145deg,rgba(230,247,255,.08),rgba(223,243,255,.12))!important} .azzda-hero-wall::before{background:linear-gradient(90deg,rgba(226,245,255,.93) 0%,rgba(228,246,255,.83) 32%,rgba(219,240,253,.60) 67%,rgba(221,242,254,.50) 100%),linear-gradient(180deg,rgba(238,250,255,.26),rgba(197,231,252,.16))!important} .azzda-photo-01{--tile-image:url('assets/hero-main.webp')!important;background-image:var(--tile-image)!important} .hero .hero-copy,.hero .hero-copy *:not(.btn){text-shadow:none!important} .hero .hero-copy h1{color:#063457!important;text-shadow:0 1px 7px rgba(241,251,255,.58)!important} .hero .eyebrow{color:#006da9!important}.hero .hero-text,.hero .hero-highlights li{color:#15496d!important;font-weight:600!important} .hero .hero-highlights li::before{box-shadow:0 0 4px rgba(23,147,224,.18)!important} /* Second moving wall uses the same new sunny workshop palette, not dark grey. */ .azzda-strip-wall{background:#c8eaff!important} .azzda-strip-wall::before{background:linear-gradient(90deg,rgba(219,241,255,.67),rgba(221,243,255,.50) 50%,rgba(214,240,255,.69)),linear-gradient(180deg,rgba(231,247,255,.18),rgba(218,243,255,.26))!important} .icon-strip .azzda-strip-wall .azzda-photo-tile{filter:brightness(1.13) saturate(.95)!important;background-color:#b7e4ff!important;box-shadow:0 8px 18px rgba(38,113,176,.12)!important} /* turn grey/patterned ambiance behind service cards into a clean soft sky background */ .services .ambient-photo-layer.is-active,.gallery .ambient-photo-layer.is-active{opacity:.035!important;filter:brightness(1.2) saturate(.84) blur(9px)!important} .services::before,.gallery::before{background:linear-gradient(180deg,rgba(241,250,255,.95),rgba(226,243,255,.92) 58%,rgba(236,248,255,.96))!important} /* transport tiles: bright blue panels along the lower edge, same clickable cards/hover animation */ .transport .media-tile span{left:10px!important;right:10px!important;bottom:10px!important;display:grid!important;gap:5px!important;padding:12px 14px!important;border-radius:15px!important;background:rgba(222,243,255,.94)!important;border:1px solid rgba(132,202,240,.38)!important;box-shadow:0 8px 19px rgba(33,93,148,.1)!important} .transport .media-tile span strong,.transport .media-tile span small{color:#174569!important;text-shadow:none!important} .transport .media-tile::after{background:linear-gradient(180deg,rgba(13,42,72,0),rgba(13,42,72,.01) 60%,rgba(13,42,72,.1))!important} /* Keep native before-after comparison contrast, existing wall animation and modal contrast. */ @media(max-width:760px){ .azzda-hero-wall{opacity:1!important} .azzda-hero-wall::before{background:linear-gradient(90deg,rgba(224,244,255,.93),rgba(222,242,254,.78) 62%,rgba(217,239,254,.65)),linear-gradient(180deg,rgba(234,249,255,.26),rgba(222,243,255,.33))!important} .hero .hero-copy h1,.hero .hero-text,.hero .hero-highlights li{color:#0c3b60!important} } /* V17 final colour balance — vivid sky blue, not overexposed white wash. */ .azzda-hero-wall::before{background:linear-gradient(90deg,rgba(189,231,254,.83) 0%,rgba(201,235,254,.68) 34%,rgba(188,226,248,.30) 70%,rgba(185,224,247,.21) 100%),linear-gradient(180deg,rgba(228,245,255,.12),rgba(159,207,237,.11))!important} .azzda-hero-wall .azzda-photo-tile{filter:brightness(1.06) saturate(1.12) contrast(1.02)!important} .azzda-strip-wall::before{background:linear-gradient(90deg,rgba(197,230,251,.47),rgba(197,232,252,.30) 52%,rgba(191,226,250,.48)),linear-gradient(180deg,rgba(220,242,255,.14),rgba(186,225,251,.18))!important} @media(max-width:760px){.azzda-hero-wall::before{background:linear-gradient(90deg,rgba(193,230,252,.80),rgba(196,231,252,.62) 62%,rgba(187,227,252,.43)),linear-gradient(180deg,rgba(222,244,255,.14),rgba(191,228,252,.15))!important}} /* V17 reference fidelity: restore the large bright truck hero from the approved mockup. Keep original photo marquee running, but as a single subtle moving background band under the four hero cards so it cannot double-expose copy. */ .hero-media{display:block!important;position:absolute;inset:0;z-index:0!important} .hero-media picture{display:block;width:100%;height:100%} .hero-media .hero-image{width:100%;height:100%;object-fit:cover;object-position:center 53%;filter:brightness(1.05) saturate(1.06)!important} .hero-overlay{z-index:1!important;background:linear-gradient(90deg,rgba(219,241,255,.86) 0%,rgba(222,242,255,.67) 38%,rgba(220,239,253,.16) 68%,rgba(218,241,252,.09) 100%),linear-gradient(180deg,rgba(235,247,255,.12),rgba(167,216,246,.14))!important} .azzda-hero-wall{top:auto!important;bottom:0!important;height:185px!important;inset-inline:0!important;opacity:.48!important;z-index:2!important;border-top:1px solid rgba(221,247,255,.26)!important} .azzda-hero-wall::before{background:linear-gradient(90deg,rgba(209,235,252,.58),rgba(199,232,252,.32) 52%,rgba(204,236,252,.57))!important} .azzda-hero-wall .azzda-photo-track{height:100%!important} .hero .hero-bottom{z-index:4!important} .hero .hero-grid{z-index:3!important} @media(max-width:760px){.hero-media .hero-image{object-position:65% center!important}.hero-overlay{background:linear-gradient(90deg,rgba(222,242,255,.92),rgba(220,241,254,.75)),linear-gradient(180deg,rgba(245,252,255,.18),rgba(208,237,254,.12))!important}.azzda-hero-wall{height:175px!important;opacity:.36!important}} /* V17 final UX polish: no black/grey film at carousel edges */ .services-carousel .carousel-window::before{background:linear-gradient(90deg,rgba(230,245,255,.91),rgba(230,245,255,.53) 48%,rgba(230,245,255,0) 100%)!important} .services-carousel .carousel-window::after{background:linear-gradient(270deg,rgba(230,245,255,.91),rgba(230,245,255,.53) 48%,rgba(230,245,255,0) 100%)!important} .service-card.is-side-peek{opacity:.91!important} @media(max-width:760px){.hero-overlay{background:linear-gradient(90deg,rgba(205,236,255,.81),rgba(203,234,253,.55)),linear-gradient(180deg,rgba(244,251,255,.12),rgba(196,230,251,.15))!important}} /* V18 targeted fixes from client feedback 2026-10-19 */ /* 1) Services section ambient image must actually appear as a light-blue background on hover. */ .services{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#eef8ff,#e5f3fe 56%,#edf8ff)!important} .services::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(241,249,255,.70),rgba(228,242,252,.62) 48%,rgba(236,248,255,.76))!important} .services .wrap{position:relative;z-index:2!important} .services .ambient-photo-layer{inset:-2% !important;filter:saturate(1.02) brightness(1.00) contrast(1.02) blur(10px)!important;transform:scale(1.04)!important} .services .ambient-photo-layer.is-active{opacity:.17!important;filter:saturate(1.04) brightness(1.04) contrast(1.04) blur(9px)!important;transform:scale(1.06)!important} .services .section-bg-flares{opacity:.45!important} /* 2) Top four benefit cards: hover card too dark -> keep light blue and readable. */ .icon-strip{background:linear-gradient(180deg,#e9f6ff,#dff1fd)!important;min-height:unset!important;padding:24px 32px!important;border-top:1px solid rgba(116,192,240,.28)!important;border-bottom:1px solid rgba(116,192,240,.28)!important} .icon-strip .azzda-strip-wall{display:block!important;opacity:1!important} .icon-strip .azzda-strip-wall::before{background:linear-gradient(90deg,rgba(226,244,255,.28),rgba(226,244,255,.18) 50%,rgba(226,244,255,.28)),linear-gradient(180deg,rgba(236,249,255,.22),rgba(220,241,254,.28))!important} .icon-strip .info-card,.icon-strip .info-card.quick-card{background:linear-gradient(155deg,rgba(233,246,255,.96),rgba(202,230,249,.96))!important;border:1px solid rgba(109,184,233,.36)!important;box-shadow:0 10px 24px rgba(37,98,150,.10)!important;color:#173f63!important} .icon-strip .info-card strong,.icon-strip .info-card small{color:#245173!important} .icon-strip .info-card:hover,.icon-strip .info-card:focus-visible,.icon-strip .info-card.quick-card:hover,.icon-strip .info-card.quick-card:focus-visible{background:linear-gradient(150deg,#f4fbff,#bce8ff)!important;border-color:rgba(78,184,243,.62)!important;box-shadow:0 14px 30px rgba(33,104,168,.16),0 0 0 1px rgba(140,220,255,.24)!important;color:#113f68!important} .icon-strip .info-card:hover strong,.icon-strip .info-card:hover small,.icon-strip .info-card:focus-visible strong,.icon-strip .info-card:focus-visible small{color:#16476f!important} .icon-strip .info-card::after{color:#2f98df!important} /* 3) Remove the extra moving image background under the hero-bottom quick cards. Keep only the cards on a clean light-blue strip. */ .azzda-hero-wall{display:none!important} .hero-bottom{background:linear-gradient(180deg,rgba(225,242,255,.92),rgba(207,231,248,.92))!important;border-top:1px solid rgba(169,210,237,.36)!important;border-bottom:1px solid rgba(169,210,237,.36)!important;border-radius:0!important;padding:20px 28px!important} .hero-bottom .mini-stat,.mini-stat.quick-card{background:linear-gradient(155deg,rgba(231,245,255,.97),rgba(198,228,248,.96))!important;border:1px solid rgba(100,183,238,.33)!important;box-shadow:0 9px 24px rgba(26,95,158,.11)!important;color:#173f63!important} .hero-bottom .mini-stat b,.hero-bottom .mini-stat span,.mini-stat.quick-card b,.mini-stat.quick-card span{color:#214f74!important} .hero-bottom .mini-stat:hover,.hero-bottom .mini-stat:focus-visible,.mini-stat.quick-card:hover,.mini-stat.quick-card:focus-visible{background:linear-gradient(150deg,#f5fbff,#bbe7ff)!important;border-color:rgba(80,183,242,.62)!important;box-shadow:0 14px 30px rgba(33,104,168,.16),0 0 0 1px rgba(140,220,255,.24)!important;color:#143f66!important} .hero-bottom .mini-stat:hover b,.hero-bottom .mini-stat:hover span,.hero-bottom .mini-stat:focus-visible b,.hero-bottom .mini-stat:focus-visible span,.mini-stat.quick-card:hover b,.mini-stat.quick-card:hover span,.mini-stat.quick-card:focus-visible b,.mini-stat.quick-card:focus-visible span{color:#143f66!important} /* 4) Hero right-side service list hover must stay readable. */ .hero-card li:hover,.hero-card li:focus-within{background:linear-gradient(180deg,#dff1ff,#c3e6fb)!important;border-color:rgba(91,190,245,.70)!important;box-shadow:0 0 0 1px rgba(137,220,255,.24),0 12px 24px rgba(32,96,150,.12)!important;color:#133f67!important;text-shadow:none!important} .hero-card li:hover *, .hero-card li:focus-within *{color:#133f67!important;text-shadow:none!important} /* 5) Gallery section hover/background balance. */ .gallery{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#eef8ff,#e5f3fe 56%,#edf8ff)!important} .gallery::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(241,249,255,.72),rgba(228,242,252,.63) 48%,rgba(236,248,255,.78))!important} .gallery .wrap{position:relative;z-index:2!important} .gallery .gallery-ambient{inset:-2%!important;filter:saturate(1.02) brightness(1.00) contrast(1.02) blur(10px)!important;transform:scale(1.04)!important} .gallery .gallery-ambient.is-active{opacity:.14!important;filter:saturate(1.04) brightness(1.02) contrast(1.03) blur(9px)!important;transform:scale(1.06)!important} .gallery-item:hover,.gallery-item:focus-visible{border-color:rgba(87,190,246,.72)!important;box-shadow:0 14px 32px rgba(36,101,160,.18),0 0 0 1px rgba(139,220,255,.22)!important} .gallery-item::after{background:linear-gradient(180deg,rgba(8,34,56,.02),rgba(8,34,56,.10) 46%,rgba(8,34,56,.56) 100%)!important} .gallery-item:hover::after,.gallery-item:focus-visible::after{background:linear-gradient(180deg,rgba(10,41,69,.03),rgba(10,41,69,.12) 46%,rgba(10,41,69,.50) 100%)!important} .gallery-item span{color:#f7fbff!important;text-shadow:0 2px 16px rgba(0,0,0,.74)!important} /* 6) Keep service side peeks soft, but readable and consistent. */ .service-card.is-side-peek img{filter:saturate(.98) contrast(1.02) brightness(.86)!important} .service-card.is-side-peek .service-overlay{background:linear-gradient(180deg,rgba(6,20,33,.12),rgba(6,20,33,.32) 45%,rgba(6,20,33,.62) 100%)!important} /* V19 final corrections after visual review */ /* ================================================================ */ /* A) Hover background image in services must be clearly visible behind all cards */ .services{background:linear-gradient(135deg,#ebf7ff 0%,#e3f2fd 54%,#edf8ff 100%)!important;} .services::before{ background:linear-gradient(180deg,rgba(240,249,255,.36),rgba(229,243,253,.20) 48%,rgba(236,248,255,.40))!important; } .services .ambient-photo-layer{ z-index:0!important; inset:-4%!important; background-position:center center!important; background-size:cover!important; background-repeat:no-repeat!important; filter:saturate(1.05) brightness(1.03) contrast(1.04) blur(9px)!important; transform:scale(1.08)!important; } .services .ambient-photo-layer.is-active{ opacity:.34!important; filter:saturate(1.08) brightness(1.05) contrast(1.05) blur(8px)!important; transform:scale(1.11)!important; } .services .wrap,.services-carousel,.services-carousel .carousel-window,.service-track{position:relative;z-index:2!important;} /* B) Gallery ambient hover must return and use the new light-blue color system */ .gallery{background:linear-gradient(135deg,#ebf7ff 0%,#e3f2fd 54%,#edf8ff 100%)!important;} .gallery::before{ background:linear-gradient(180deg,rgba(241,249,255,.34),rgba(228,242,252,.18) 48%,rgba(236,248,255,.36))!important; } .gallery .gallery-ambient{ z-index:0!important; inset:-4%!important; background-position:center center!important; background-size:cover!important; background-repeat:no-repeat!important; filter:saturate(1.06) brightness(1.02) contrast(1.04) blur(9px)!important; transform:scale(1.08)!important; } .gallery .gallery-ambient.is-active{ opacity:.32!important; filter:saturate(1.08) brightness(1.05) contrast(1.05) blur(8px)!important; transform:scale(1.11)!important; } .gallery .wrap,.gallery-grid{position:relative;z-index:2!important;} /* C) Hero section: remove single static image and restore the repeating moving tile wall */ .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#eaf6ff 0%,#dff1fd 52%,#edf8ff 100%)!important;} .hero-media{display:none!important;} .hero-overlay{ z-index:2!important; background: linear-gradient(90deg,rgba(234,247,255,.88) 0%,rgba(226,243,255,.78) 28%,rgba(220,239,253,.54) 50%,rgba(218,239,252,.26) 72%,rgba(217,238,252,.18) 100%), linear-gradient(180deg,rgba(241,250,255,.18),rgba(200,230,249,.18))!important; } .azzda-hero-wall{ display:block!important; inset:0!important; top:0!important; bottom:0!important; height:auto!important; opacity:1!important; z-index:1!important; border-top:0!important; } .azzda-hero-wall .azzda-photo-track{height:100%!important;animation-duration:78s!important;} .azzda-hero-wall::before{ background: linear-gradient(90deg,rgba(205,236,255,.55) 0%,rgba(212,239,255,.40) 36%,rgba(209,236,252,.22) 62%,rgba(199,229,248,.18) 100%), linear-gradient(180deg,rgba(236,249,255,.10),rgba(195,226,246,.08))!important; } .azzda-hero-wall .azzda-photo-tile{ filter:brightness(1.03) saturate(1.08) contrast(1.02)!important; box-shadow:0 8px 28px rgba(31,102,164,.16),inset 0 0 0 1px rgba(244,252,255,.56)!important; } .hero .hero-grid{z-index:3!important;position:relative;} .hero .hero-bottom{ z-index:4!important; position:relative; background:transparent!important; border:none!important; padding-top:18px!important; padding-bottom:24px!important; } .hero .hero-bottom::before,.hero .hero-bottom::after{display:none!important;} .hero .hero-bottom .mini-stat,.hero .hero-bottom .mini-stat.quick-card{ background:linear-gradient(155deg,rgba(233,246,255,.92),rgba(202,230,249,.94))!important; backdrop-filter:blur(8px)!important; border:1px solid rgba(95,180,236,.34)!important; box-shadow:0 10px 24px rgba(29,92,151,.13)!important; color:#173f63!important; } .hero .hero-bottom .mini-stat b,.hero .hero-bottom .mini-stat span{color:#214f74!important;} .hero .hero-bottom .mini-stat:hover,.hero .hero-bottom .mini-stat:focus-visible{ background:linear-gradient(155deg,#f4fbff,#bde8ff)!important; border-color:rgba(80,183,242,.64)!important; box-shadow:0 14px 30px rgba(33,104,168,.16),0 0 0 1px rgba(140,220,255,.24)!important; } /* D) All opened info panels / modals should match the light-blue theme */ .modal{background:rgba(178,206,228,.34)!important;backdrop-filter:blur(10px)!important;} .modal-panel, .quick-info-panel, .detail-modal, .gallery-modal-panel, .map-modal-panel{ background:linear-gradient(145deg,rgba(238,248,255,.98),rgba(210,234,249,.97))!important; border:1px solid rgba(97,178,234,.38)!important; box-shadow:0 26px 78px rgba(29,81,129,.22),0 0 0 1px rgba(144,217,255,.18),0 0 36px rgba(72,190,255,.10)!important; color:#113b5e!important; } .modal-panel::before,.quick-info-panel::before,.detail-modal::before,.gallery-modal-panel::before,.map-modal-panel::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(247,252,255,.36)!important; } .modal-close{ background:rgba(238,248,255,.92)!important; border:1px solid rgba(91,176,234,.42)!important; color:#124062!important; box-shadow:0 8px 18px rgba(39,97,151,.12)!important; } .modal-close:hover,.modal-close:focus-visible{background:#dff2ff!important;color:#0e3858!important;} .quick-info-panel h3, .detail-copy h2, .gallery-modal-copy h2, .map-modal-panel h2{color:#0c3556!important;} .quick-info-text, .detail-copy p:not(.eyebrow), .gallery-modal-copy p, .map-copy p, .actual-map-modal-header p, .actual-map-modal .location-meta p{color:#355f7d!important;} .quick-info-points li, .detail-points li{color:#1f4f76!important;} .modal .eyebrow,#detailKicker,#quickInfoKicker{color:#0075b4!important;} .detail-copy .btn-ghost, .modal-actions .btn-ghost{ border-color:rgba(93,179,237,.48)!important; background:rgba(243,250,255,.84)!important; color:#123c60!important; } .detail-copy .btn-solid, .modal-actions .btn-solid{ color:#08304d!important; box-shadow:0 12px 28px rgba(50,133,201,.18)!important; } .detail-image-wrap img,#galleryImage{background:#f3faff!important;} /* Keep service/quick hover states readable in the light theme */ .hero-card li:hover,.hero-card li:focus-within{background:linear-gradient(180deg,#dff1ff,#c3e6fb)!important;color:#123e66!important;} .hero-card li:hover *, .hero-card li:focus-within *{color:#123e66!important;} @media(max-width:760px){ .hero-overlay{ background:linear-gradient(90deg,rgba(235,247,255,.90),rgba(224,242,255,.72) 54%,rgba(215,236,252,.34)),linear-gradient(180deg,rgba(243,251,255,.10),rgba(206,234,251,.14))!important; } .azzda-hero-wall{opacity:1!important;} } /* V20 — TIKAI ABU PĒDĒJO TUMŠO SADAĻU KRĀSU LABOJUMI */ /* 1) PIRMS UN PĒC — attēli, apraksta lodziņš un marķieri; slīdnis paliek iepriekšējais */ .compare-section{ background:linear-gradient(180deg,#eaf7ff 0%,#dceefb 53%,#eaf7ff 100%)!important; } .compare-section .compare-bg img{ filter:brightness(1.20) saturate(.98) contrast(.97)!important; } .compare-section .compare-bg.before::after{ background:linear-gradient(90deg,rgba(224,243,255,.31) 0%,rgba(220,241,255,.18) 55%,rgba(222,242,255,.11) 100%)!important; } .compare-section .compare-bg.after::after{ background:linear-gradient(90deg,rgba(220,242,255,.13),rgba(227,245,255,.17) 48%,rgba(216,238,252,.26) 100%)!important; } .compare-section .compare-screen{ background:radial-gradient(circle at center,transparent 42%,rgba(43,105,154,.07) 100%)!important; } .compare-section .compare-copy{ background:linear-gradient(145deg,rgba(236,249,255,.95),rgba(196,229,250,.94))!important; border:1px solid rgba(87,173,234,.48)!important; box-shadow:0 20px 52px rgba(26,87,142,.19),0 0 0 1px rgba(255,255,255,.30)!important; color:#103a5e!important; backdrop-filter:blur(13px)!important; } .compare-section .compare-copy::before{ box-shadow:inset 0 0 0 1px rgba(245,252,255,.43),0 0 22px rgba(82,177,234,.11)!important; } .compare-section .compare-copy h2, .compare-section .compare-copy h3{ color:#0b3557!important;text-shadow:none!important; } .compare-section .compare-copy .eyebrow{color:#0077b8!important;text-shadow:none!important;} .compare-section .compare-copy p:not(.eyebrow), .compare-section .compare-copy .compare-list li{ color:#285676!important;text-shadow:none!important; } .compare-section .compare-list li::before{background:linear-gradient(180deg,#2baeff,#8fe8ff)!important;} .compare-section .compare-label{ background:rgba(232,246,255,.93)!important; border:1px solid rgba(95,187,241,.47)!important; color:#0e4168!important; box-shadow:0 9px 24px rgba(38,103,154,.16)!important; } .compare-section .compare-divider{ background:linear-gradient(180deg,rgba(139,216,255,.22),#dff5ff,rgba(139,216,255,.22))!important; box-shadow:0 0 20px rgba(89,183,245,.34)!important; } .compare-section .compare-divider span{ background:linear-gradient(145deg,rgba(236,249,255,.97),rgba(184,225,251,.97))!important; color:#0e4268!important; border:1px solid rgba(97,188,241,.57)!important; box-shadow:0 8px 26px rgba(32,104,163,.23)!important; } .compare-section .compare-demo-tag{ background:rgba(235,247,255,.95)!important; color:#16466e!important; border:1px solid rgba(104,190,242,.43)!important; box-shadow:0 8px 24px rgba(43,103,158,.15)!important; text-shadow:none!important; } /* 2) RIEPU PIEDĀVĀJUMS — vecais tumšais fona foto pārklājums ir jāizgaismo, ne tikai kartītes */ .stats-products{ background:linear-gradient(180deg,#eaf7ff 0%,#dceefb 52%,#eaf7ff 100%)!important; color:#103d60!important; } .stats-products .tire-promo-scene::before{ filter:blur(9px) saturate(.95) brightness(1.10)!important; opacity:.28!important; /* saglabā esošo tyreSceneMove animāciju */ } .stats-products .tire-promo-scene::after{ background:linear-gradient(90deg,rgba(231,246,255,.78),rgba(222,241,254,.65) 40%,rgba(225,243,255,.76)), linear-gradient(180deg,rgba(237,249,255,.62),rgba(220,240,252,.48) 48%,rgba(231,246,255,.66))!important; } .stats-products > .wrap{position:relative;z-index:2!important;} .stats-products .stats-panel{ background:linear-gradient(145deg,#ddf0fe,#c1e3f8)!important; border:1px solid rgba(93,184,239,.44)!important; box-shadow:0 18px 43px rgba(36,100,151,.16)!important; } .stats-products .stats-panel .panel-bg{ filter:brightness(1.12) saturate(.99) contrast(.98)!important; } .stats-products .stats-panel .panel-overlay{ background:linear-gradient(180deg,rgba(239,249,255,.13) 0%,rgba(225,243,255,.36) 24%,rgba(214,237,251,.81) 59%,rgba(194,225,247,.96) 100%)!important; } .stats-products .stats-panel .panel-copy h2{ color:#10395d!important;text-shadow:0 1px 4px rgba(231,246,255,.44)!important; } .stats-products .stats-panel .panel-copy .eyebrow{ color:#0074b6!important;text-shadow:none!important; } .stats-products .stats-grid div{ background:rgba(236,248,255,.92)!important; border:1px solid rgba(91,177,234,.38)!important; box-shadow:0 8px 22px rgba(38,100,151,.12)!important; backdrop-filter:blur(8px)!important; } .stats-products .stats-grid b, .stats-products .stats-grid span{color:#1e4b6d!important;text-shadow:none!important;} .stats-products .products-panel{ background:linear-gradient(145deg,rgba(239,249,255,.99),rgba(202,232,250,.98))!important; border:1px solid rgba(100,186,241,.42)!important; box-shadow:0 18px 44px rgba(37,101,151,.14)!important; color:#103d60!important; } .stats-products .products-panel::before{ opacity:.08!important; filter:saturate(.89) brightness(1.19) blur(4px)!important; } .stats-products .products-panel::after{ background:linear-gradient(100deg,rgba(243,251,255,.72),rgba(221,243,255,.79))!important; } .stats-products .products-panel .panel-head h2, .stats-products .products-panel .panel-head .eyebrow{color:#10395d!important;} .stats-products .product-card{ background:linear-gradient(180deg,#e8f6ff,#cdeafa)!important; border:1px solid rgba(105,194,243,.41)!important; box-shadow:0 8px 23px rgba(42,105,163,.11)!important; } .stats-products .product-body{ background:linear-gradient(160deg,#e8f6ff,#cce9fc)!important; } .stats-products .product-body strong{color:#173f62!important;text-shadow:none!important;} .stats-products .product-body small{color:#426e8d!important;text-shadow:none!important;} .stats-products .product-body i{color:#007fc8!important;text-shadow:none!important;} .stats-products .inline-controls button{ color:#15527e!important; background:rgba(240,250,255,.90)!important; border:1px solid rgba(97,182,234,.44)!important; } .stats-products .inline-controls button:hover, .stats-products .inline-controls button:focus-visible{ background:#cbecff!important; border-color:#76c9f7!important; } /* Mobile: the visual slider handle must not sit on top of the comparison description. */ @media(max-width:720px){ .compare-section .compare-divider span{top:79%!important;} } /* Citi dizaina bloki, JS, galerija, hero un modāļi netiek mainīti. */ /* V21 FINAL TOUCHES — clearer compare images + lighter matching header */ /* 1) PIRMS UN PEC: keep the light-blue theme, but restore crisp image quality */ .compare-section{ background:linear-gradient(180deg,#eef8ff 0%,#deeffb 52%,#ecf7ff 100%)!important; } .compare-section .compare-bg img{ filter:brightness(1.06) saturate(1.05) contrast(1.06) !important; } .compare-section .compare-bg.before::after{ background:linear-gradient(90deg,rgba(226,243,255,.14) 0%,rgba(221,240,255,.08) 54%,rgba(216,236,250,.04) 100%)!important; } .compare-section .compare-bg.after::after{ background:linear-gradient(90deg,rgba(220,241,255,.04),rgba(225,243,255,.08) 44%,rgba(210,232,247,.12) 100%)!important; } .compare-section .compare-screen{ background:radial-gradient(circle at center,transparent 46%,rgba(39,101,150,.035) 100%)!important; } .compare-section .compare-copy{ background:linear-gradient(145deg,rgba(234,247,255,.92),rgba(197,229,249,.88))!important; border:1px solid rgba(91,177,236,.46)!important; box-shadow:0 18px 44px rgba(28,92,145,.16),0 0 0 1px rgba(255,255,255,.34)!important; } .compare-section .compare-copy p:not(.eyebrow), .compare-section .compare-copy .compare-list li{ color:#2b5878!important; } .compare-section .compare-divider{ background:linear-gradient(180deg,rgba(132,211,255,.24),#effaff,rgba(132,211,255,.24))!important; } .compare-section .compare-divider span{ background:linear-gradient(145deg,rgba(239,250,255,.96),rgba(196,231,251,.96))!important; color:#13476d!important; } .compare-demo-tag{ background:rgba(241,250,255,.94)!important; } /* 2) HEADER / TOP BAR: no dark navy slab, keep standout but match the page */ .demo-bar{ background:linear-gradient(180deg,#eef8ff 0%,#ddecf8 100%)!important; color:#5b7f9b!important; border-bottom:1px solid rgba(99,176,227,.26)!important; } .header{ background:linear-gradient(180deg,rgba(233,246,255,.97) 0%,rgba(198,226,246,.97) 100%)!important; border-bottom:1px solid rgba(97,177,236,.26)!important; box-shadow:0 10px 28px rgba(29,88,145,.10)!important; backdrop-filter:blur(18px)!important; } .header .nav a, .header .nav a:visited, .nav-phone, .brand{ color:#143c60!important; text-shadow:none!important; } .header .nav a:hover, .header .nav a:focus-visible{ color:#0f4268!important; background:rgba(124,205,248,.18)!important; box-shadow:0 0 0 1px rgba(114,200,245,.20),0 8px 22px rgba(56,134,197,.12)!important; } .nav a::after{background:linear-gradient(90deg,#25a3f2,#7edcff)!important;} .nav-phone{ background:rgba(245,251,255,.92)!important; border-color:rgba(107,187,237,.38)!important; } .menu-toggle{ background:rgba(243,250,255,.94)!important; border-color:rgba(103,183,234,.34)!important; } .menu-toggle span{background:#1c4c73!important;} @media (max-width:760px){ .nav{ background:linear-gradient(180deg,rgba(239,249,255,.98),rgba(216,238,252,.98))!important; border:1px solid rgba(100,183,235,.30)!important; box-shadow:0 18px 38px rgba(28,88,143,.16)!important; } .nav a{color:#173f63!important;} } /* V22 — header contour + clearer logo visibility */ .header{ position:sticky; top:0; background:linear-gradient(180deg,rgba(233,246,255,.98) 0%,rgba(199,226,246,.98) 100%)!important; border-top:1px solid rgba(105,181,231,.42)!important; border-bottom:1px solid rgba(86,170,226,.42)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(113,187,236,.42), 0 10px 28px rgba(29,88,145,.10)!important; } .brand{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:18px; background:linear-gradient(180deg,rgba(248,252,255,.62),rgba(220,239,252,.62))!important; border:1px solid rgba(110,187,236,.32)!important; box-shadow:0 6px 18px rgba(41,105,159,.08), inset 0 1px 0 rgba(255,255,255,.7)!important; } .brand img{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 4px 10px rgba(42,106,159,.10)); } .header::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,rgba(0,0,0,0),rgba(102,184,235,.55),rgba(0,0,0,0)); pointer-events:none; }