instead, since header/nav/chat-pill/search-overlay are all true siblings of

, not descendants of it. */ body{opacity:1} main{opacity:0;animation:pageIn .5s var(--ease-premium) .05s forwards} @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .page-exit main{opacity:0!important;transform:translateY(-8px)!important;transition:opacity .35s var(--ease-premium),transform .35s var(--ease-premium)} .transition-veil{position:fixed;inset:0;background:var(--bg);z-index:9999;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-premium)} .transition-veil.active{opacity:1;pointer-events:all} /* ─── BUTTONS ──────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:.45rem;border:none;cursor:pointer;font-family:"Inter",sans-serif;font-weight:600;border-radius:50px;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease;white-space:nowrap} .btn:active{transform:scale(.95)!important} .btn-primary{background:var(--g);color:#fff;padding:.85rem 2rem;font-size:.875rem;box-shadow:0 6px 24px rgba(26,191,191,.3)} .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 36px rgba(26,191,191,.42)} .btn-ghost{background:rgba(255,255,255,.9);color:var(--navy);border:1.5px solid var(--border);padding:.83rem 2rem;font-size:.875rem;backdrop-filter:blur(12px)} .btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)} .btn-wa{background:#25D366;color:#fff;padding:.85rem 2rem;font-size:.875rem;box-shadow:0 6px 20px rgba(37,211,102,.3)} .btn-wa:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(37,211,102,.42)} .btn-dark{background:var(--ink);color:#fff;padding:.7rem 1.6rem;font-size:.8rem} .btn-dark:hover{background:var(--navy-deep);transform:translateY(-2px)} .btn-sm{padding:.5rem 1.15rem!important;font-size:.78rem!important} /* ─── SCROLL REVEAL (Intersection Observer driven) ───────────── */ .rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-premium),transform .7s var(--ease-premium)} .rv.v{opacity:1;transform:none} .rv-scale{opacity:0;transform:scale(.92);transition:opacity .65s var(--ease-premium),transform .65s var(--ease-premium)} .rv-scale.v{opacity:1;transform:scale(1)} .rv.d1,.rv-scale.d1{transition-delay:.08s} .rv.d2,.rv-scale.d2{transition-delay:.16s} .rv.d3,.rv-scale.d3{transition-delay:.24s} .rv.d4,.rv-scale.d4{transition-delay:.32s} .rv.d5,.rv-scale.d5{transition-delay:.40s} .sec{padding:8rem 6%}.sec-alt{background:var(--white)} .sec-intro{text-align:center;max-width:600px;margin:0 auto 5rem} .eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem} .eyebrow::before{content:"";width:14px;height:1.5px;background:var(--g);border-radius:2px;display:inline-block} /* ─── HEADER (centered logo) ──────────────────────────────── */ header{position:fixed;top:0;left:0;right:0;z-index:2000;height:var(--nav-h);background:var(--glass-nav);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-bottom:1px solid var(--border-glass);box-shadow:0 2px 24px rgba(15,36,97,.06);transition:all .3s;display:flex;align-items:center;padding:0 5%} header.sc{background:rgba(255,255,255,.95);box-shadow:0 4px 32px rgba(15,36,97,.1)} .h-inner{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem} .h-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;cursor:pointer;z-index:1} .h-logo img{height:44px;width:auto;object-fit:contain} .h-left{display:flex;align-items:center;gap:.4rem;z-index:2} .h-right{display:flex;align-items:center;gap:.6rem;z-index:2} .h-nav ul{list-style:none;margin:0;padding:0} .h-nav>ul{display:flex;align-items:center;gap:.15rem} .h-nav>ul>li{position:relative} .h-nav>ul>li>a,.h-nav>ul>li>span{display:flex;align-items:center;gap:.25rem;font-size:.82rem;font-weight:500;color:var(--slate);padding:.42rem .72rem;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap} .h-nav>ul>li>a:hover,.h-nav>ul>li>span:hover{color:var(--navy);background:rgba(28,58,138,.06)} .h-nav>ul>li>a.current{color:var(--navy);font-weight:700} .dropdown{position:absolute;top:calc(100% + 10px);left:0;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--rl);box-shadow:var(--shadow-lg);padding:.6rem;min-width:230px;opacity:0;pointer-events:none;transform:translateY(10px);transition:all .22s var(--ease-premium);z-index:100;list-style:none} .h-nav>ul>li:hover .dropdown{opacity:1;pointer-events:all;transform:none} .dropdown li a{display:flex;align-items:center;gap:.65rem;padding:.62rem .85rem;border-radius:10px;font-size:.82rem;font-weight:500;color:var(--slate);transition:all .15s;cursor:pointer} .dropdown li a:hover{background:rgba(26,191,191,.08);color:var(--navy)} .dico{font-size:1rem;width:26px;text-align:center} .cart-btn{display:flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;color:var(--slate);padding:.38rem .8rem;border:1.5px solid var(--border);border-radius:50px;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.8);backdrop-filter:blur(12px)} .cart-btn:hover{border-color:var(--teal);color:var(--teal)} .track-btn{display:flex;align-items:center;gap:.35rem;font-size:.77rem;font-weight:600;color:var(--teal);padding:.38rem .9rem;border:1.5px solid rgba(26,191,191,.35);border-radius:50px;cursor:pointer;transition:all .2s;background:rgba(26,191,191,.06);animation:tpulse 2.5s ease-in-out infinite} .track-btn:hover{background:rgba(26,191,191,.12);animation:none} @keyframes tpulse{0%,100%{box-shadow:0 0 0 0 rgba(26,191,191,0)}50%{box-shadow:0 0 0 6px rgba(26,191,191,.1)}} .ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem} .ham span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s} .mob-wa-btn{display:none;width:38px;height:38px;border-radius:50%;background:#25D366;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 4px 14px rgba(37,211,102,.4);text-decoration:none;color:#fff} @media(max-width:768px){ .h-nav,.track-btn,.cart-btn,.h-right .btn-dark,.h-right .btn-primary{display:none!important} .ham{display:flex!important}.mob-wa-btn{display:flex!important} .h-logo img{height:38px!important} } /* ─── GLASSMORPHIC SLIDING MOBILE SIDEBAR ─────────────────── */ .mob-overlay{position:fixed;inset:0;background:rgba(11,17,32,.55);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);z-index:1998;opacity:0;pointer-events:none;transition:opacity .6s var(--ease-premium),backdrop-filter .6s var(--ease-premium)} .mob-overlay.open{opacity:1;pointer-events:all;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .mob-nav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:86%;max-width:380px;background:rgba(13,23,50,.75);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);box-shadow:-12px 0 60px rgba(0,0,0,.4);z-index:1999;overflow-y:auto;transform:translateX(105%);transition:all .6s var(--ease-premium)} .mob-nav.open{transform:translateX(0);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);background:rgba(13,23,50,.82)} .mob-nav-head{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:2} .mob-nav-head img{height:32px} .mob-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;color:rgba(255,255,255,.85);transition:all .18s} .mob-close:hover{background:rgba(255,255,255,.2);color:#fff} .mob-nav-body{padding:1.2rem 1rem 2rem;flex:1} .mob-link,.mob-acc{opacity:0;transform:translateX(28px);transition:opacity .45s var(--ease-premium),transform .45s var(--ease-premium)} .mob-nav.open .mob-link,.mob-nav.open .mob-acc{opacity:1;transform:none} .mob-nav.open .mob-link:nth-child(1),.mob-nav.open .mob-acc:nth-child(1){transition-delay:.08s} .mob-nav.open .mob-link:nth-child(2),.mob-nav.open .mob-acc:nth-child(2){transition-delay:.13s} .mob-nav.open .mob-link:nth-child(3),.mob-nav.open .mob-acc:nth-child(3){transition-delay:.18s} .mob-nav.open .mob-link:nth-child(4),.mob-nav.open .mob-acc:nth-child(4){transition-delay:.23s} .mob-nav.open .mob-link:nth-child(5),.mob-nav.open .mob-acc:nth-child(5){transition-delay:.28s} .mob-nav.open .mob-link:nth-child(6),.mob-nav.open .mob-acc:nth-child(6){transition-delay:.33s} .mob-nav.open .mob-link:nth-child(7),.mob-nav.open .mob-acc:nth-child(7){transition-delay:.38s} .mob-sec-title{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:.9rem .65rem .4rem;margin-top:.4rem} .mob-link{display:flex;align-items:center;gap:.7rem;padding:.78rem .7rem;font-size:.88rem;font-weight:500;color:rgba(255,255,255,.85);border-radius:12px;transition:background .18s,color .18s;cursor:pointer} .mob-link:hover{background:rgba(255,255,255,.07);color:#fff} .mob-link .mi{font-size:1.05rem;width:24px;text-align:center;flex-shrink:0} .mob-acc{border-radius:12px;overflow:hidden} .mob-acc-head{display:flex;align-items:center;justify-content:space-between;padding:.78rem .7rem;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.92);cursor:pointer;border-radius:12px;transition:background .18s} .mob-acc-head:hover{background:rgba(255,255,255,.06)} .mob-acc-head .mi{font-size:1.05rem;width:24px;text-align:center;flex-shrink:0} .mob-acc-left{display:flex;align-items:center;gap:.7rem} .mob-acc-toggle{width:22px;height:22px;border-radius:50%;background:rgba(26,191,191,.18);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--teal);transition:transform .3s var(--ease-premium),background .2s;flex-shrink:0} .mob-acc.open .mob-acc-toggle{transform:rotate(135deg);background:rgba(26,191,191,.35)} .mob-acc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-premium)} .mob-acc.open .mob-acc-body{max-height:600px} .mob-acc-body a{display:flex;align-items:center;gap:.6rem;padding:.62rem .7rem .62rem 2.5rem;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.62);border-radius:10px;transition:all .15s;cursor:pointer;text-decoration:none} .mob-acc-body a:hover{background:rgba(26,191,191,.12);color:#fff} .mob-nav-footer{padding:1.3rem 1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.7rem} @media(min-width:769px){.mob-overlay,.mob-nav{display:none!important}} /* ─── HERO ─────────────────────────────────────────────────── */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10rem 6% 7rem;overflow:hidden} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#0F2461;z-index:0} .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(15,36,97,.88) 0%,rgba(26,191,191,.38) 50%,rgba(15,36,97,.92) 100%),linear-gradient(to bottom,transparent 55%,rgba(11,17,32,.7) 100%)} .hero-content{position:relative;z-index:1;width:100%;max-width:900px;margin:0 auto} .hero-badge{display:inline-flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.95);padding:.48rem 1.1rem;border-radius:50px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2.2rem;animation:riseIn .7s .1s both} .avatar-cluster{display:flex;align-items:center;margin-right:.4rem} .av{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.6);overflow:hidden;margin-right:-8px;flex-shrink:0;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:#fff} .bdot{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex-shrink:0;animation:dp 1.4s ease-in-out infinite;margin-left:.5rem} @keyframes dp{0%,100%{opacity:1}50%{opacity:.35}} .hero h1:not(.hero-h1-slide){color:#fff;max-width:800px;margin:0 auto 1.6rem;animation:riseIn .7s .2s both} .hero-h1-slide{color:#fff;margin-bottom:1.6rem} .hero-h1-slide.active:first-child{animation:riseIn .7s 0s both} .hero h1 .accent{display:block;background:linear-gradient(90deg,#7FFFEE,#A5C8FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-content>p{font-size:1.1rem;max-width:560px;margin:0 auto 2.8rem;color:rgba(255,255,255,.78);animation:riseIn .7s .3s both;line-height:1.75} .hbtns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:riseIn .7s .4s both} @keyframes riseIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} .hstats{display:flex;justify-content:center;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:var(--rl);overflow:hidden;margin-top:4.5rem;max-width:680px;width:100%;animation:riseIn .7s .55s both} .hs{flex:1;min-width:120px;padding:1.6rem 1rem;text-align:center;border-right:1px solid rgba(255,255,255,.12)} .hs:last-child{border-right:none} .hs-n{font-family:"Playfair Display",serif;font-size:1.9rem;font-weight:900;color:#fff;margin-bottom:.25rem} .hs-l{font-size:.65rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.1em;text-transform:uppercase} .sub-hero{padding:9rem 6% 5.5rem;background:linear-gradient(160deg,#EEF2FF,#E8FAFA)} /* ─── TRUSTED PARTNERS MARQUEE ─────────────────────────────── */ .marquee-wrap{position:relative;overflow:hidden;padding:2.5rem 0;background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .marquee-wrap::before,.marquee-wrap::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none} .marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--white),transparent)} .marquee-wrap::after{right:0;background:linear-gradient(270deg,var(--white),transparent)} .marquee-track{display:flex;width:max-content;animation:marqueeScroll 32s linear infinite} .marquee-wrap:hover .marquee-track{animation-play-state:paused} @keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee-item{display:flex;align-items:center;gap:.6rem;padding:0 3rem;font-family:"Playfair Display",serif;font-size:1.3rem;font-weight:800;color:var(--mist);white-space:nowrap;opacity:.55;transition:opacity .3s} .marquee-item:hover{opacity:1;color:var(--navy)} .marquee-item .mq-ico{font-size:1.4rem} /* ─── PROCESS TIMELINE ─────────────────────────────────────── */ .timeline-wrap{max-width:900px;margin:0 auto} .timeline{display:flex;gap:0;position:relative} .timeline::before{content:"";position:absolute;top:30px;left:calc(16.6% + 30px);right:calc(16.6% + 30px);height:1px;background:linear-gradient(90deg,var(--teal),var(--navy));opacity:.2} .tl-step{flex:1;text-align:center;padding:0 1.2rem} .tl-num{width:60px;height:60px;border-radius:50%;background:var(--g);color:#fff;font-family:"Playfair Display",serif;font-size:1.35rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;box-shadow:0 8px 24px rgba(26,191,191,.35)} .tl-step h4{font-size:1rem;margin-bottom:.45rem;color:var(--ink)}.tl-step p{font-size:.84rem;color:var(--mist);line-height:1.7} /* ─── DASHBOARD MOCKUP ─────────────────────────────────────── */ .dash-mock-wrap{position:relative;max-width:920px;margin:0 auto;padding:0 1rem} .dash-mock-frame{position:relative;background:#0B1120;border-radius:20px;padding:14px 14px 0;box-shadow:0 50px 100px -20px rgba(15,36,97,.35),0 30px 60px -30px rgba(15,36,97,.3);transform:perspective(1400px) rotateX(2deg)} .dash-mock-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:90px;height:14px;background:#0B1120;border-radius:0 0 12px 12px;z-index:2} .dash-mock-screen{background:linear-gradient(160deg,#F6F8FC,#EEF2FF);border-radius:12px 12px 0 0;overflow:hidden;min-height:360px;position:relative;padding:1.6rem} .dm-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem} .dm-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-family:"Playfair Display",serif;font-size:1.1rem;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .dm-badge{background:rgba(26,191,191,.12);color:var(--teal);font-size:.68rem;font-weight:700;padding:.3rem .7rem;border-radius:50px;display:flex;align-items:center;gap:.35rem} .dm-greet{font-family:"Playfair Display",serif;font-size:1.4rem;font-weight:800;color:var(--ink);margin-bottom:1.4rem} .dm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.4rem} .dm-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.85rem;box-shadow:var(--shadow-sm)} .dm-card-l{font-size:.62rem;color:var(--fog);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem} .dm-card-v{font-size:.92rem;font-weight:800;color:var(--ink)} .dm-table{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:var(--shadow-sm)} .dm-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border)} .dm-row:last-child{border-bottom:none} .dm-row-ico{width:30px;height:30px;border-radius:8px;background:var(--g-soft);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0} .dm-row-txt{flex:1;font-size:.78rem;color:var(--slate);font-weight:600} .dm-row-meta{font-size:.68rem;color:var(--fog)} .dm-float-card{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:.8rem 1rem;display:flex;align-items:center;gap:.6rem;border:1px solid var(--border);animation:dmFloat 4s ease-in-out infinite} .dm-float-1{top:18%;right:-3%;animation-delay:0s} .dm-float-2{bottom:8%;left:-4%;animation-delay:1.2s} @keyframes dmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .dm-float-ico{width:34px;height:34px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;color:#fff} .dm-float-txt strong{display:block;font-size:.78rem;color:var(--ink)} .dm-float-txt span{font-size:.66rem;color:var(--fog)} @media(max-width:640px){.dm-cards{grid-template-columns:repeat(2,1fr)}.dash-mock-frame{transform:none}.dm-float-card{display:none}} /* ─── SERVICE / PRICING CARDS (with tilt micro-interaction) ── */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1.2rem;margin-top:4rem} .svc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:1.8rem;position:relative;overflow:hidden;transition:transform .35s var(--ease-premium),border-color .2s,box-shadow .35s var(--ease-premium);cursor:pointer;transform-style:preserve-3d} .svc-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-premium)} .svc-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-2deg);border-color:rgba(26,191,191,.3);box-shadow:var(--shadow-md)} .svc-card:hover::after{transform:scaleX(1)} .sico{width:52px;height:52px;border-radius:14px;background:var(--g-soft);border:1px solid rgba(26,191,191,.15);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.2rem;transition:transform .22s} .svc-card:hover .sico{transform:scale(1.1) rotate(-5deg)} .svc-card h3{font-size:.98rem;margin-bottom:.42rem;color:var(--ink);font-family:"Inter",sans-serif;font-weight:700;letter-spacing:0} .svc-card p{font-size:.82rem;color:var(--mist);line-height:1.65;margin-bottom:0} .svc-pr{display:inline-block;margin-top:.8rem;font-size:.78rem;font-weight:700;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .svc-arr{display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;font-size:.77rem;font-weight:600;color:var(--teal);transition:gap .18s} .svc-card:hover .svc-arr{gap:.55rem} /* ─── TESTIMONIALS ─────────────────────────────────────────── */ .testi-track{display:flex;gap:1.4rem;margin-top:4rem;flex-wrap:wrap} .tc{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:2rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease-premium),box-shadow .3s var(--ease-premium);flex:1;min-width:260px} .tc:hover{transform:translateY(-6px) rotateX(1deg);box-shadow:var(--shadow-md);border-color:rgba(26,191,191,.25)} .stars{color:#F5A623;font-size:.8rem;letter-spacing:.1em;margin-bottom:1rem} .tc blockquote{font-size:.87rem;color:var(--slate);line-height:1.8;font-style:italic;margin-bottom:1.4rem} .tau{display:flex;align-items:center;gap:.75rem} .tav{width:40px;height:40px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;color:#fff;flex-shrink:0} .tn{font-size:.86rem;font-weight:700;color:var(--ink)}.tr2{font-size:.72rem;color:var(--fog);margin-top:.1rem} /* ─── ALTERNATING FEATURES ─────────────────────────────────── */ .alt-feat{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:5.5rem} .alt-feat:last-child{margin-bottom:0} .alt-feat.rev .alt-img{order:2}.alt-feat.rev .alt-copy{order:1} .alt-img{position:relative;border-radius:var(--rx);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;transition:transform .4s var(--ease-premium)} .alt-img:hover{transform:scale(1.015)} .alt-img img{width:100%;height:100%;object-fit:cover;display:block} .alt-img::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(26,191,191,.08),rgba(28,58,138,.12));mix-blend-mode:multiply} .alt-copy .eyebrow{margin-bottom:.9rem} .alt-copy h3{font-family:"Playfair Display",serif;font-size:1.7rem;font-weight:800;color:var(--ink);margin-bottom:1rem;letter-spacing:-.01em} .alt-copy p{font-size:.94rem;margin-bottom:1.4rem} .alt-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.6rem} .alt-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:var(--slate)} @media(max-width:768px){.alt-feat,.alt-feat.rev{grid-template-columns:1fr;gap:1.8rem}.alt-feat.rev .alt-img{order:1}.alt-feat.rev .alt-copy{order:2}} /* ─── CAROUSEL ─────────────────────────────────────────────── */ .carousel-wrap{position:relative;max-width:1100px;margin:4rem auto 0} .carousel-track{display:flex;gap:1.2rem;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:.5rem .2rem 1.2rem;-webkit-overflow-scrolling:touch} .carousel-track::-webkit-scrollbar{height:5px} .carousel-track::-webkit-scrollbar-thumb{background:var(--g);border-radius:3px} .carousel-track::-webkit-scrollbar-track{background:var(--border)} .car-card{scroll-snap-align:start;flex:0 0 260px;background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:1.6rem;box-shadow:var(--shadow-sm);transition:all .3s var(--ease-premium);cursor:pointer} .car-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(26,191,191,.3)} .car-ico{width:50px;height:50px;border-radius:14px;background:var(--g-soft);border:1px solid rgba(26,191,191,.15);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:1.1rem} .car-card h4{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.5rem} .car-card p{font-size:.81rem;color:var(--mist);line-height:1.6;margin-bottom:0} .car-nav{display:flex;justify-content:center;gap:.7rem;margin-top:1rem} .car-btn{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm);font-size:1rem;color:var(--navy)} .car-btn:hover{background:var(--g);color:#fff;border-color:transparent;transform:scale(1.08)} .car-btn:active{transform:scale(.92)} /* ─── FAQ (dynamic slide, not snap) ─────────────────────────── */ .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:4rem} .fq{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s} .fq:hover{border-color:rgba(26,191,191,.3)} .fq-q{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--ink);gap:.5rem} .fq-ico{width:24px;height:24px;border-radius:50%;background:rgba(26,191,191,.1);display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0;transition:transform .3s var(--ease-premium),background .25s;color:var(--teal)} .fq.open .fq-ico{transform:rotate(45deg);background:var(--g);color:#fff} .fq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-premium),padding .5s var(--ease-premium),opacity .4s var(--ease-premium);opacity:0} .fq.open .fq-a{max-height:400px;padding:0 1.5rem 1.2rem;opacity:1} .fq-a p{font-size:.84rem;color:var(--mist);line-height:1.75;margin-bottom:0} @media(max-width:768px){.faq-grid{grid-template-columns:1fr}} /* ─── BLOG GRID ────────────────────────────────────────────── */ .home-blog-grid,.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin-top:4rem} .hb-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:transform .3s var(--ease-premium),box-shadow .3s var(--ease-premium);box-shadow:var(--shadow-sm)} .hb-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .hb-img{position:relative;height:170px;overflow:hidden} .hb-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease-premium)} .hb-card:hover .hb-img img{transform:scale(1.06)} .hb-tag{position:absolute;top:.9rem;left:.9rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--teal);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:50px} .hb-body{padding:1.4rem} .hb-meta{display:flex;gap:.8rem;font-size:.7rem;color:var(--fog);margin-bottom:.6rem} .hb-card h3{font-size:.94rem;font-weight:700;color:var(--ink);margin-bottom:.5rem;line-height:1.45;font-family:"Inter",sans-serif;letter-spacing:0} .hb-card p{font-size:.8rem;color:var(--mist);line-height:1.6;margin-bottom:1rem} .hb-link{font-size:.78rem;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:.35rem;transition:gap .18s} .hb-card:hover .hb-link{gap:.55rem} /* ─── CTA BANNER ───────────────────────────────────────────── */ .cta-banner{padding:7rem 6%;background:var(--g);text-align:center;position:relative;overflow:hidden} .cta-banner::before,.cta-banner::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none} .cta-banner::before{width:420px;height:420px;background:#fff;top:-100px;left:-80px} .cta-banner::after{width:420px;height:420px;background:#fff;bottom:-100px;right:-80px} .cta-inner{position:relative;z-index:1} .cta-banner h2{color:#fff;margin-bottom:1rem}.cta-banner p{color:rgba(255,255,255,.78);max-width:460px;margin:0 auto 2.4rem;font-size:1.05rem} /* ─── PACKAGE / PRICING CARDS ──────────────────────────────── */ .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:.5rem} .pkg-card{border:2px solid var(--border);border-radius:var(--rl);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:transform .35s var(--ease-premium),border-color .25s,box-shadow .35s var(--ease-premium);background:#fff;position:relative} .pkg-card:hover{border-color:var(--teal);transform:translateY(-6px) rotateX(2deg);box-shadow:var(--shadow-md)} .pkg-card.selected{border-color:var(--navy);background:#EEF2FF;box-shadow:var(--shadow-md)} .pkg-card.popular::before{content:"MOST POPULAR";position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--g);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:.25rem .8rem;border-radius:0 0 8px 8px;white-space:nowrap} .pkg-name{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:.5rem} .pkg-price{font-family:"Playfair Display",serif;font-size:2.2rem;font-weight:900;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:.3rem} .pkg-price sub{font-size:.78rem;font-weight:400;color:var(--mist);-webkit-text-fill-color:var(--mist);font-family:"Inter",sans-serif} .pkg-tag{font-size:.72rem;color:var(--fog);margin-bottom:1.2rem} .pkg-feats{list-style:none;text-align:left;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem} .pkg-feats li{font-size:.78rem;color:var(--slate);display:flex;align-items:flex-start;gap:.5rem;line-height:1.4} .pkg-feats .ck{color:var(--teal);font-weight:900;font-size:.72rem;flex-shrink:0;margin-top:.1rem} .pkg-feats .nx{color:var(--fog);font-size:.72rem;flex-shrink:0;margin-top:.1rem} @media(max-width:768px){.pkg-grid{grid-template-columns:1fr}.pkg-card.popular::before{font-size:.55rem}} .pkc{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rl);padding:2rem;position:relative;box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease-premium),transform .3s var(--ease-premium)} .pkc:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.pkc.ft{border-color:var(--teal)} .pkbg{position:absolute;top:-1px;right:1.4rem;background:var(--g);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .75rem;border-radius:0 0 10px 10px} .pkp{font-family:"Playfair Display",serif;font-size:2.4rem;font-weight:900;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:.9rem 0 1rem;line-height:1} .pkp span{font-size:.9rem;font-weight:400;color:var(--mist);-webkit-text-fill-color:var(--mist)} .pkf{list-style:none;display:flex;flex-direction:column;gap:.55rem} .pkf li{display:flex;align-items:flex-start;gap:.6rem;font-size:.84rem;color:var(--slate)} .tk{width:18px;height:18px;border-radius:50%;flex-shrink:0;background:rgba(26,191,191,.12);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:.6rem;font-weight:900;margin-top:.15rem} .state-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem;margin-top:2.5rem} .sm-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.3rem;transition:all .3s var(--ease-premium);cursor:pointer} .sm-card:hover{border-color:rgba(26,191,191,.4);box-shadow:var(--shadow-sm);transform:translateY(-4px)} .sm-card h4{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.32rem;font-family:"Inter",sans-serif;letter-spacing:0} .sm-p{font-size:.8rem;font-weight:700;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .sm-t{font-size:.72rem;color:var(--fog);margin-top:.2rem} .bank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:1.4rem;margin-top:4rem} .bank-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rl);padding:2rem;text-align:center;box-shadow:var(--shadow-sm);transition:all .35s var(--ease-premium);cursor:pointer} .bank-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--teal);box-shadow:var(--shadow-md)} .bank-ico{width:60px;height:60px;border-radius:18px;background:var(--g-soft);border:1px solid rgba(26,191,191,.2);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 1rem} .bank-pr{font-family:"Playfair Display",serif;font-size:1.8rem;font-weight:900;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:.65rem 0} .tax-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;margin-top:4rem} .tax-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow-sm);transition:all .3s var(--ease-premium)} .tax-card:hover{border-color:rgba(26,191,191,.35);box-shadow:var(--shadow-md);transform:translateY(-4px)} .value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem;margin-top:4rem} .val-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm);transition:all .3s var(--ease-premium)} .val-card:hover{border-color:rgba(26,191,191,.35);box-shadow:var(--shadow-md);transform:translateY(-3px)} .val-ico{width:46px;height:46px;border-radius:13px;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.95rem;box-shadow:0 6px 16px rgba(26,191,191,.25)} /* ─── LEADERSHIP / TEAM ─────────────────────────────────────── */ .team-section{padding:8rem 6%;background:var(--bg)} .team-ceo-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--rx);overflow:hidden;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:380px 1fr;margin-bottom:3rem;transition:box-shadow .3s} .team-ceo-card:hover{box-shadow:var(--shadow-xl)} .ceo-photo{position:relative;background:linear-gradient(160deg,#0F2461,#1ABFBF);min-height:460px;overflow:hidden} .ceo-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .ceo-badge{position:absolute;bottom:1.4rem;left:1.4rem;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.25);border-radius:50px;color:#fff;padding:.4rem 1rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .ceo-copy{padding:3rem 3.5rem;display:flex;flex-direction:column;justify-content:center} .ceo-eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem} .ceo-eyebrow::before{content:"";width:14px;height:1.5px;background:var(--g);border-radius:2px;display:inline-block} .ceo-name{font-family:"Playfair Display",serif;font-size:2.4rem;font-weight:900;color:var(--ink);line-height:1.1;margin-bottom:.55rem} .ceo-title{font-size:.88rem;font-weight:700;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.6rem;letter-spacing:.02em} .ceo-bio{font-size:.94rem;color:var(--slate);line-height:1.85;margin-bottom:2rem} .ceo-stats{display:flex;gap:2rem;margin-bottom:2rem;padding:1.4rem;background:var(--g-soft);border-radius:var(--r);border:1px solid rgba(26,191,191,.1)} .cs-item{text-align:center} .cs-n{font-family:"Playfair Display",serif;font-size:1.8rem;font-weight:900;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1} .cs-l{font-size:.65rem;font-weight:600;color:var(--fog);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem} .team-grid-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem} .team-member-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--rl);padding:2rem 1.6rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease-premium),border-color .25s,box-shadow .35s var(--ease-premium)} .team-member-card:hover{transform:translateY(-8px) rotateX(2deg);border-color:rgba(26,191,191,.3);box-shadow:var(--shadow-md)} .tm-av{width:72px;height:72px;border-radius:50%;background:var(--g);margin:0 auto 1.2rem;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 8px 20px rgba(26,191,191,.3);position:relative;overflow:hidden} .tm-av::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent)} .tm-name{font-family:"Playfair Display",serif;font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:.35rem} .tm-role{font-size:.76rem;font-weight:700;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.7rem;letter-spacing:.02em;line-height:1.4} .tm-bio{font-size:.79rem;color:var(--mist);line-height:1.65;margin-bottom:0} @media(max-width:900px){.team-ceo-card{grid-template-columns:1fr}} @media(max-width:768px){.ceo-photo{min-height:300px}.ceo-copy{padding:2rem}.team-section{padding:5rem 5%}} /* ─── FORMS ────────────────────────────────────────────────── */ .fi{margin-bottom:1rem}.fi label{display:block;font-size:.77rem;font-weight:600;color:var(--ink);margin-bottom:.38rem} .fi input,.fi select,.fi textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:.72rem 1rem;font-family:"Inter",sans-serif;font-size:.9rem;color:var(--ink);transition:border-color .22s,box-shadow .22s;outline:none;-webkit-appearance:none} .fi input:focus,.fi select:focus,.fi textarea:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(26,191,191,.1)} .fi textarea{resize:vertical;min-height:85px} .fr2{display:grid;grid-template-columns:1fr 1fr;gap:.95rem} .ibox{background:linear-gradient(135deg,var(--teal-light),#EEF2FF);border:1.5px solid rgba(26,191,191,.2);border-radius:12px;padding:.9rem 1.1rem;font-size:.81rem;color:var(--mist)}.ibox strong{color:var(--navy)} @media(max-width:768px){.fr2{grid-template-columns:1fr}} /* ─── MODAL ────────────────────────────────────────────────── */ .modal-overlay{position:fixed;inset:0;background:rgba(11,17,32,.7);backdrop-filter:blur(10px);z-index:5000;display:none;align-items:center;justify-content:center;padding:1rem} .modal-overlay.open{display:flex} .modal-box{background:#fff;border-radius:var(--rx);box-shadow:var(--shadow-xl);width:100%;max-width:660px;max-height:90vh;overflow-y:auto;animation:mslide .3s var(--ease-premium)} @keyframes mslide{from{opacity:0;transform:scale(.9) translateY(22px)}to{opacity:1;transform:none}} .modal-head{padding:1.7rem 2.2rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(238,242,255,.95),rgba(232,250,250,.95));display:flex;justify-content:space-between;align-items:flex-start} .modal-head h2{font-size:1.5rem} .modal-close{width:34px;height:34px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;color:var(--mist);flex-shrink:0;transition:all .15s} .modal-close:hover{background:var(--ink);color:#fff;border-color:transparent} .modal-body{padding:1.7rem 2.2rem} .modal-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.83rem} .modal-table th{background:var(--g-soft);padding:.68rem .95rem;text-align:left;font-weight:700;color:var(--ink);border-bottom:2px solid var(--border)} .modal-table td{padding:.62rem .95rem;border-bottom:1px solid var(--border);color:var(--mist);vertical-align:top} .modal-table tr:last-child td{border-bottom:none}.modal-table tr:hover td{background:var(--bg)} /* ─── STICKY WHATSAPP ──────────────────────────────────────── */ .sticky-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:3000;width:64px;height:64px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 8px 28px rgba(37,211,102,.45);cursor:pointer;transition:all .25s var(--ease-premium);animation:wap 2.5s ease-in-out infinite;text-decoration:none} .sticky-widget:hover{transform:scale(1.12);animation:none} @keyframes wap{0%,100%{box-shadow:0 8px 28px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}50%{box-shadow:0 8px 28px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,.1)}} /* ─── FOOTER ───────────────────────────────────────────────── */ .site-footer{background:var(--ink);padding:5rem 6% 2.5rem} .footer-g{display:grid;grid-template-columns:2fr 1.4fr 1.2fr 1.6fr;gap:3.5rem;margin-bottom:3.5rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.06)} .fbr p{font-size:.8rem;color:#5A6A8A;line-height:1.78;max-width:250px;margin-top:.75rem} .flt{font-family:"Playfair Display",serif;font-size:1.45rem;font-weight:900;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .ftag{font-size:.6rem;color:var(--fog);letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem} .fc h5{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7A8AAA;margin-bottom:.95rem} .fc ul{list-style:none;display:flex;flex-direction:column;gap:.55rem} .fc a{font-size:.79rem;color:#5A6A8A;transition:color .18s;display:flex;align-items:center;gap:.42rem;cursor:pointer} .fc a:hover{color:var(--teal)} .office-entry{margin-bottom:1.1rem} .office-entry h6{font-size:.73rem;font-weight:700;color:#9AA3BC;margin-bottom:.28rem;text-transform:uppercase;letter-spacing:.08em} .office-entry p{font-size:.75rem;color:#5A6A8A;line-height:1.65;margin-bottom:0} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem} .footer-bottom p{font-size:.73rem;color:#3A4A6A}.footer-bottom span{font-size:.7rem;color:var(--teal);font-weight:600} .trust-badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem} .tbadge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:.3rem .65rem;font-size:.64rem;font-weight:700;color:#7A8AAA;display:flex;align-items:center;gap:.3rem} /* ─── POLICY PAGES ─────────────────────────────────────────── */ .policy-wrap{max-width:840px;margin:0 auto;padding:7rem 6%} .policy-wrap h3{font-size:1.06rem;margin:1.8rem 0 .5rem;color:var(--ink);font-family:"Inter",sans-serif;font-weight:700;letter-spacing:0} .policy-wrap p,.policy-wrap li{font-size:.88rem;color:var(--mist);line-height:1.85;margin-bottom:.5rem} .policy-wrap ul{padding-left:1.5rem;margin-bottom:.85rem} /* ─── RESPONSIVE GLOBAL ────────────────────────────────────── */ @media(max-width:1024px){.footer-g{grid-template-columns:1fr 1fr}} @media(max-width:768px){.testi-track{flex-direction:column}.timeline{flex-direction:column;align-items:center}.timeline::before{display:none}.footer-g{grid-template-columns:1fr}.sec{padding:5rem 5%}.hero{padding:8rem 5% 5rem}} @media(max-width:480px){.hstats{flex-direction:column}.hs{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}.hs:last-child{border-bottom:none}} /* ============================================================ PREMIUM INDEX OVERHAUL — minimal nav, cinematic hero, search overlay, floating chat pill ============================================================ */ /* ─── PREMIUM GLASS NAV (index.html) ──────────────────────── */ .hdr-premium{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;transition:background .35s var(--ease-premium),border-color .35s var(--ease-premium)} .hdr-premium.sc{background:rgba(11,17,32,.72);border-bottom-color:rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.18)} /* Light variant: used on every page whose top section is a light gradient instead of the dark photographic hero (i.e. every page except index.html) */ .hdr-premium.light{background:rgba(255,255,255,.55);border-bottom-color:rgba(15,36,97,.08)} .hdr-premium.light .hp-logo img{filter:none} .hdr-premium.light .hp-center nav ul>li>a,.hdr-premium.light .hp-center nav ul>li>span{color:var(--slate)} .hdr-premium.light .hp-center nav ul>li>a:hover,.hdr-premium.light .hp-center nav ul>li>span:hover{color:var(--navy);background:rgba(28,58,138,.07)} .hdr-premium.light .hp-icon-btn{background:rgba(15,36,97,.05);border-color:rgba(15,36,97,.1);color:var(--slate)} .hdr-premium.light .hp-icon-btn:hover{background:rgba(15,36,97,.1);color:var(--navy)} .hdr-premium.light .hp-login{color:var(--slate)} .hdr-premium.light .hp-login:hover{background:rgba(15,36,97,.06);color:var(--navy)} .hdr-premium.light.sc{background:rgba(255,255,255,.92);border-bottom-color:rgba(15,36,97,.1);box-shadow:0 8px 32px rgba(15,36,97,.08)} .hdr-premium .h-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .hp-left{display:flex;align-items:center;justify-self:start} .hp-logo{display:flex;align-items:center;cursor:pointer} .hp-logo img{height:50px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.15))} .hp-center{justify-self:center} .hp-center nav ul{display:flex;align-items:center;gap:.3rem;list-style:none} .hp-center nav ul>li{position:relative} .hp-center nav ul>li>a,.hp-center nav ul>li>span{display:flex;align-items:center;gap:.3rem;font-size:.83rem;font-weight:500;color:rgba(255,255,255,.88);padding:.5rem .85rem;border-radius:50px;cursor:pointer;transition:all .25s var(--ease-premium);white-space:nowrap} .hp-center nav ul>li>a:hover,.hp-center nav ul>li>span:hover{color:#fff;background:rgba(255,255,255,.08)} .hdr-premium.sc .hp-center nav ul>li>a,.hdr-premium.sc .hp-center nav ul>li>span{color:rgba(255,255,255,.9)} .hp-right{display:flex;align-items:center;gap:.6rem;justify-self:end} .hp-icon-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.85);transition:all .25s var(--ease-premium)} .hp-icon-btn:hover{background:rgba(255,255,255,.14);transform:scale(1.06);color:#fff} .hp-icon-btn svg{width:17px;height:17px} .hp-login{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.88);padding:.5rem .9rem;border-radius:50px;transition:all .2s;white-space:nowrap} .hp-login:hover{background:rgba(255,255,255,.08);color:#fff} .hp-cta{background:var(--g);color:#fff;font-size:.82rem;font-weight:600;padding:.6rem 1.4rem;border-radius:50px;white-space:nowrap;box-shadow:0 6px 20px rgba(26,191,191,.35);transition:transform .25s var(--ease-premium),box-shadow .25s var(--ease-premium)} .hp-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 28px rgba(26,191,191,.45)} .hp-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(255,255,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(15,36,97,.08);border-radius:var(--rl);box-shadow:var(--shadow-lg);padding:.6rem;min-width:240px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-premium),transform .3s var(--ease-premium);z-index:100;list-style:none;margin-top:12px} /* Invisible hover bridge: fills the gap between the nav trigger and the dropdown so moving the cursor down to click a service never drops the :hover state, even though the dropdown sits 12px below the trigger. */ .hp-center nav ul>li::before{content:"";position:absolute;top:100%;left:0;right:0;height:20px;z-index:99} .hp-center nav ul>li:hover .hp-dropdown{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)} .hp-center nav ul>li.force-closed .hp-dropdown{opacity:0!important;pointer-events:none!important;transform:translateX(-50%) translateY(8px)!important;transition:opacity .15s ease,transform .15s ease!important} .hp-dropdown li a{display:flex;align-items:center;gap:.65rem;padding:.6rem .85rem;border-radius:10px;font-size:.82rem;font-weight:500;color:var(--slate);transition:all .15s} .hp-dropdown li a:hover{background:rgba(26,191,191,.1);color:var(--navy)} /* Dark variant: only used on index.html, where the header floats over the dark cinematic hero photo instead of a light page background. */ .hdr-premium:not(.light) .hp-dropdown{background:rgba(13,23,50,.92);border-color:rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.4)} .hdr-premium:not(.light) .hp-dropdown li a{color:rgba(255,255,255,.78)} .hdr-premium:not(.light) .hp-dropdown li a:hover{background:rgba(26,191,191,.15);color:#fff} @media(max-width:900px){.hp-center{display:none}.hp-ham{display:flex!important}} @media(min-width:901px){.hp-ham{display:none!important}} @media(max-width:768px){.hp-logo img{height:40px}} @media(max-width:480px){.hp-login{display:none}} /* ─── CINEMATIC "KEN BURNS" HERO SLIDESHOW ────────────────── */ .hero-bg-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;background-color:#0F2461} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease-premium)} .hero-slide.active{opacity:1;z-index:1} .hero-slide .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform;animation:smoothCinematicZoom 25s infinite alternate ease-in-out} @keyframes smoothCinematicZoom{ 0%{transform:scale(1);} 100%{transform:scale(1.08);} } @media (prefers-reduced-motion: reduce){ .hero-slide .hero-bg{animation:none} } /* Headline crossfade: only the slide-text matching the active background shows */ .hero-headline-set{position:relative;min-height:clamp(7.5rem,16vw,15.5rem)} .hero-h1-slide{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none;transition:opacity .9s var(--ease-premium);max-width:800px;margin:0 auto;text-align:center} .hero-h1-slide.active{opacity:1;pointer-events:auto} /* Slide indicator dots */ .hero-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem;position:relative;z-index:2} .hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:all .3s var(--ease-premium);border:none;padding:0} .hero-dot.active{background:#fff;width:24px;border-radius:4px} .hero-dot:hover{background:rgba(255,255,255,.6)} /* ─── PREMIUM SEARCH OVERLAY ───────────────────────────────── */ .search-overlay{position:fixed;inset:0;background:rgba(8,12,26,.78);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);z-index:6000;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-premium),backdrop-filter .4s var(--ease-premium)} .search-overlay.open{opacity:1;pointer-events:all;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .search-panel{width:100%;max-width:620px;margin:0 1.2rem;transform:translateY(-24px) scale(.96);opacity:0;transition:transform .45s var(--ease-premium),opacity .45s var(--ease-premium)} .search-overlay.open .search-panel{transform:translateY(0) scale(1);opacity:1} .search-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rx);padding:.4rem .4rem .4rem 1.4rem;display:flex;align-items:center;gap:.8rem;box-shadow:0 30px 80px rgba(0,0,0,.5)} .search-box svg{width:20px;height:20px;color:rgba(255,255,255,.6);flex-shrink:0} .search-box input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:"Inter",sans-serif;font-size:1.05rem;padding:.95rem 0;font-weight:400} .search-box input::placeholder{color:rgba(255,255,255,.4)} .search-close{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.75);flex-shrink:0;transition:all .2s} .search-close:hover{background:rgba(255,255,255,.18);color:#fff} .search-suggest{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center} .search-suggest a{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:.45rem 1rem;border-radius:50px;transition:all .2s} .search-suggest a:hover{background:rgba(26,191,191,.18);color:#fff;border-color:rgba(26,191,191,.4)} /* ─── FLOATING LIVE CHAT PILL ──────────────────────────────── */ .chat-pill{position:fixed;bottom:1.8rem;right:1.8rem;z-index:9999;display:flex;align-items:center;gap:.6rem;background:#ffffff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(15,36,97,.1);border-radius:50px;padding:.65rem 1.3rem .65rem .8rem;box-shadow:0 16px 40px rgba(15,36,97,.18);cursor:pointer;text-decoration:none;transition:transform .3s var(--ease-premium),box-shadow .3s var(--ease-premium),background .3s;will-change:transform} .chat-pill:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 24px 56px rgba(15,36,97,.26);background:#ffffff} .chat-pill-ico{width:34px;height:34px;border-radius:50%;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative} .chat-pill-ico svg{width:17px;height:17px;color:var(--ink)} .chat-pulse-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:chatPulse 2s infinite} @keyframes chatPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} .chat-pill-text{display:flex;flex-direction:column;line-height:1.2} .chat-pill-text strong{font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap} .chat-pill-text span{font-size:.66rem;color:var(--slate);white-space:nowrap} @media(max-width:480px){.chat-pill-text{display:none}.chat-pill{padding:.65rem;border-radius:50%}} /* ============================================================ FINAL POLISH UPGRADES — counters, testimonial marquee, hover-triggered service icon motion ============================================================ */ /* ─── 5. SCROLL-TRIGGERED ANIMATED COUNTERS ───────────────── */ .counter-section{padding:6rem 6%;background:var(--ink);position:relative;overflow:hidden} .counter-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(26,191,191,.12),transparent 50%),radial-gradient(circle at 80% 80%,rgba(28,58,138,.18),transparent 50%)} .counter-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;max-width:1100px;margin:0 auto} .counter-card{text-align:center;padding:1rem} .counter-num{font-family:"Playfair Display",serif;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:900;line-height:1;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-flex;align-items:baseline} .counter-num .counter-suffix{font-size:.55em;margin-left:.1em} .counter-label{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.08em;margin-top:.6rem} @media(max-width:600px){.counter-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}} /* ─── 6. INFINITE TESTIMONIAL MARQUEE (dark glassmorphic) ──── */ .testi-marquee-section{padding:7rem 0;background:linear-gradient(160deg,#0B1120,#0F2461 60%,#0B1120);position:relative;overflow:hidden} .testi-marquee-section .sec-intro{padding:0 6%} .testi-marquee-section .sec-intro h2,.testi-marquee-section .sec-intro p{color:rgba(255,255,255,.92)} .testi-marquee-section .eyebrow{color:#7FFFEE} .testi-marquee-wrap{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .testi-marquee-track{display:flex;width:max-content;animation:testiMarquee 38s linear infinite;gap:1.4rem;padding:.5rem 0} .testi-marquee-wrap:hover .testi-marquee-track{animation-play-state:paused} @keyframes testiMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tg-card{flex:0 0 360px;background:rgba(255,255,255,.05);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:var(--rl);padding:1.8rem;transition:transform .3s var(--ease-premium),border-color .3s,background .3s} .tg-card:hover{transform:translateY(-6px);border-color:rgba(26,191,191,.35);background:rgba(255,255,255,.08)} .tg-stars{color:#F5A623;font-size:.8rem;letter-spacing:.1em;margin-bottom:1rem} .tg-card blockquote{font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.8;font-style:italic;margin-bottom:1.4rem} .tg-author{display:flex;align-items:center;gap:.75rem} .tg-av{width:40px;height:40px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;color:#fff;flex-shrink:0} .tg-name{font-size:.86rem;font-weight:700;color:#fff} .tg-role{font-size:.72rem;color:rgba(255,255,255,.55);margin-top:.1rem} @media(max-width:600px){.tg-card{flex:0 0 290px}} /* ─── 7. HOVER-TRIGGERED SERVICE ICON MOTION (CSS SVG) ──────── */ .svc-card{position:relative} .svc-ico-motion{width:52px;height:52px;border-radius:14px;background:var(--g-soft);border:1px solid rgba(26,191,191,.15);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;transition:transform .3s var(--ease-premium),background .3s;overflow:hidden} .svc-card:hover .svc-ico-motion{transform:scale(1.08) rotate(-3deg);background:rgba(26,191,191,.14)} .svc-ico-motion svg{width:26px;height:26px;overflow:visible} .svc-ico-motion svg path,.svc-ico-motion svg circle,.svc-ico-motion svg rect,.svc-ico-motion svg polygon{ stroke:var(--navy);stroke-width:1.6;fill:none; stroke-dasharray:140;stroke-dashoffset:140; transition:stroke-dashoffset .7s var(--ease-premium),fill .4s var(--ease-premium) .35s; } .svc-card:hover .svc-ico-motion svg path, .svc-card:hover .svc-ico-motion svg circle, .svc-card:hover .svc-ico-motion svg rect, .svc-card:hover .svc-ico-motion svg polygon{ stroke-dashoffset:0; } .svc-ico-motion svg .fill-part{fill:transparent;transition:fill .4s var(--ease-premium) .5s;stroke:none} .svc-card:hover .svc-ico-motion svg .fill-part{fill:var(--teal)} .svc-ico-motion svg .pulse-part{transform-origin:center;transition:transform .5s var(--ease-premium) .55s} .svc-card:hover .svc-ico-motion svg .pulse-part{transform:scale(1.15)} @media (prefers-reduced-motion: reduce){ .svc-ico-motion svg path,.svc-ico-motion svg circle,.svc-ico-motion svg rect,.svc-ico-motion svg polygon{transition:none;stroke-dashoffset:0} } /* ============================================================ SAAS CHECKOUT — account creation + multi-payment method UI ============================================================ */ .pay-method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1.2rem 0 1.4rem} .pay-method{border:1.5px solid var(--border);border-radius:12px;padding:1rem .6rem;text-align:center;cursor:pointer;transition:all .22s var(--ease-premium);background:var(--bg)} .pay-method:hover{border-color:rgba(26,191,191,.4);transform:translateY(-2px)} .pay-method.selected{border-color:var(--navy);background:#EEF2FF;box-shadow:0 6px 16px rgba(28,58,138,.12)} .pay-method-ico{font-size:1.5rem;margin-bottom:.4rem;display:block} .pay-method-name{font-size:.74rem;font-weight:700;color:var(--ink)} .pay-method.selected .pay-method-name{color:var(--navy)} @media(max-width:480px){.pay-method-grid{grid-template-columns:repeat(2,1fr)}} .pay-detail-panel{display:none;background:var(--g-soft);border:1.5px solid rgba(26,191,191,.18);border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.3rem;font-size:.85rem;color:var(--slate);line-height:1.7} .pay-detail-panel.active{display:block;animation:fadeV .3s var(--ease-premium)} .pay-detail-panel h5{font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:.5rem} .pay-detail-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid rgba(28,58,138,.08);font-size:.82rem} .pay-detail-row:last-child{border-bottom:none} .pay-detail-row span:first-child{color:var(--mist)} .pay-detail-row span:last-child{font-weight:700;color:var(--ink)} .pay-copy-btn{font-size:.68rem;font-weight:700;color:var(--teal);background:var(--teal-light);padding:.15rem .5rem;border-radius:50px;cursor:pointer;margin-left:.5rem;border:none} .pay-copy-btn:hover{background:var(--teal);color:#fff} .account-fields{border-top:1px dashed var(--border);padding-top:1.2rem;margin-top:1.2rem} .account-fields .ibox{margin-bottom:1.1rem} .pw-strength{height:4px;border-radius:2px;background:var(--border);margin-top:.4rem;overflow:hidden} .pw-strength-fill{height:100%;width:0;background:var(--g);transition:width .3s var(--ease-premium)} .field-error{font-size:.74rem;color:#dc2626;margin-top:.35rem;display:none} .field-error.show{display:block} .checkout-final-cta{width:100%;justify-content:center;font-size:.92rem;padding:.85rem 1.6rem} .checkout-final-cta.cc-mode{background:linear-gradient(135deg,#635BFF,#4D44DB);box-shadow:0 8px 22px rgba(99,91,255,.32)} .checkout-final-cta.cc-mode:hover{box-shadow:0 14px 32px rgba(99,91,255,.42)} .checkout-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-right:.4rem;vertical-align:-2px} @keyframes spin{to{transform:rotate(360deg)}} .checkout-error-box{background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.25);border-radius:10px;padding:.8rem 1rem;font-size:.82rem;color:#b91c1c;margin-bottom:1rem;display:none} .checkout-error-box.show{display:block} .checkout-success-box{text-align:center;padding:2.5rem 1rem} .checkout-success-box .success-ico{width:64px;height:64px;border-radius:50%;background:rgba(37,211,102,.12);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 1.2rem;color:#16a34a} /* ============================================================ ADMIN PANEL — dark-glass operations dashboard (admin.html only) ============================================================ */ .admin-shell{display:flex;min-height:100vh;background:linear-gradient(160deg,#0B1120,#0F1A38 55%,#0B1120)} .admin-sidebar{width:240px;flex-shrink:0;background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100} .admin-logo-row{display:flex;align-items:center;gap:.6rem;padding:1.6rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.08)} .admin-logo-row img{height:32px} .admin-logo-row span{font-family:"Playfair Display",serif;font-weight:900;font-size:1.05rem;color:#fff} .admin-nav{flex:1;padding:1.2rem .9rem;overflow-y:auto} .admin-nav-link{display:flex;align-items:center;gap:.7rem;padding:.72rem .85rem;border-radius:10px;font-size:.83rem;font-weight:500;color:rgba(255,255,255,.65);cursor:pointer;transition:all .2s;margin-bottom:.2rem} .admin-nav-link:hover{background:rgba(255,255,255,.06);color:#fff} .admin-nav-link.active{background:rgba(26,191,191,.15);color:#fff;font-weight:700} .admin-nav-link .ani{font-size:1rem;width:20px;text-align:center;flex-shrink:0} .admin-nav-sec{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:1rem .85rem .4rem} .admin-sidebar-foot{padding:1.1rem 1.4rem;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.65rem} .admin-av{width:36px;height:36px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0} .admin-staff-name{font-size:.8rem;font-weight:700;color:#fff} .admin-staff-role{font-size:.68rem;color:rgba(255,255,255,.5)} .admin-logout{margin-left:auto;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.7);transition:all .2s;flex-shrink:0} .admin-logout:hover{background:rgba(239,68,68,.18);color:#fff} .admin-main{flex:1;margin-left:240px;padding:2.2rem 2.6rem 4rem} .admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.2rem;flex-wrap:wrap;gap:1rem} .admin-topbar h1{font-family:"Playfair Display",serif;font-size:1.7rem;font-weight:800;color:#fff} .admin-topbar p{font-size:.83rem;color:rgba(255,255,255,.5);margin-top:.2rem} .admin-ham{display:none;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px} .admin-ham span{width:18px;height:2px;background:#fff;border-radius:2px} .kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;margin-bottom:2.4rem} .kpi-card{background:rgba(255,255,255,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:var(--rl);padding:1.5rem;transition:transform .3s var(--ease-premium),border-color .3s} .kpi-card:hover{transform:translateY(-4px);border-color:rgba(26,191,191,.3)} .kpi-ico{width:38px;height:38px;border-radius:10px;background:var(--g-soft);display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-bottom:.9rem} .kpi-num{font-family:"Playfair Display",serif;font-size:1.9rem;font-weight:900;color:#fff;line-height:1} .kpi-label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin-top:.4rem} .kpi-delta{font-size:.72rem;font-weight:700;margin-top:.5rem;display:inline-flex;align-items:center;gap:.25rem} .kpi-delta.up{color:#4ADE80}.kpi-delta.down{color:#F87171} @media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:768px){.kpi-grid{grid-template-columns:repeat(2,1fr)}} .admin-card{background:rgba(255,255,255,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:var(--rl);padding:1.8rem;margin-bottom:1.6rem} .admin-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem;flex-wrap:wrap;gap:.8rem} .admin-card-head h3{font-size:1.05rem;font-weight:800;color:#fff} .admin-search-box{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:50px;padding:.5rem .9rem;min-width:220px} .admin-search-box input{background:transparent;border:none;outline:none;color:#fff;font-size:.82rem;flex:1} .admin-search-box input::placeholder{color:rgba(255,255,255,.4)} .admin-search-box svg{width:15px;height:15px;color:rgba(255,255,255,.5);flex-shrink:0} .admin-table{width:100%;border-collapse:collapse;font-size:.82rem} .admin-table th{text-align:left;padding:.75rem .9rem;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.08)} .admin-table td{padding:.85rem .9rem;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.85);vertical-align:middle} .admin-table tr:hover td{background:rgba(255,255,255,.025)} .admin-table tr:last-child td{border-bottom:none} .at-order-id{font-weight:700;color:#fff} .at-company{font-size:.8rem;color:rgba(255,255,255,.6)} .status-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:50px;font-size:.68rem;font-weight:700;white-space:nowrap} .status-pill::before{content:"";width:6px;height:6px;border-radius:50%} .status-pill.paid{background:rgba(37,211,102,.14);color:#4ADE80}.status-pill.paid::before{background:#4ADE80} .status-pill.pending{background:rgba(245,166,35,.14);color:#FBBF24}.status-pill.pending::before{background:#FBBF24} .status-pill.failed{background:rgba(239,68,68,.14);color:#F87171}.status-pill.failed::before{background:#F87171} .status-pill.refunded{background:rgba(148,163,184,.16);color:#CBD5E1}.status-pill.refunded::before{background:#CBD5E1} .pm-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:rgba(255,255,255,.6)} .approve-btn{background:linear-gradient(135deg,#1ABFBF,#1C3A8A);color:#fff;border:none;padding:.4rem .9rem;border-radius:50px;font-size:.7rem;font-weight:700;cursor:pointer;transition:transform .2s var(--ease-premium),box-shadow .2s;white-space:nowrap} .approve-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(26,191,191,.35)} .approve-btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .approve-btn.done{background:rgba(74,222,128,.15);color:#4ADE80;cursor:default} .approve-btn.done:hover{transform:none;box-shadow:none} /* Services Catalog CMS */ .catalog-grid{display:flex;flex-direction:column;gap:.7rem} .catalog-row{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:.9rem 1.1rem;flex-wrap:wrap} .catalog-row.inactive{opacity:.5} .catalog-name{flex:1;min-width:160px;font-size:.85rem;font-weight:700;color:#fff} .catalog-cat{font-size:.66rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem} .catalog-price-input{width:90px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.45rem .6rem;color:#fff;font-size:.82rem;font-weight:700;text-align:right} .catalog-price-input:focus{outline:none;border-color:rgba(26,191,191,.5)} .toggle-switch{position:relative;width:42px;height:24px;flex-shrink:0} .toggle-switch input{opacity:0;width:0;height:0;position:absolute} .toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:50px;cursor:pointer;transition:background .25s} .toggle-slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .25s var(--ease-premium)} .toggle-switch input:checked + .toggle-slider{background:var(--g)} .toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)} .catalog-save-hint{font-size:.7rem;color:rgba(255,255,255,.35);margin-left:.5rem} .admin-empty{text-align:center;padding:3rem 1rem;color:rgba(255,255,255,.4);font-size:.85rem} @media(max-width:1024px){ .admin-sidebar{transform:translateX(-100%);transition:transform .4s var(--ease-premium)} .admin-sidebar.open{transform:translateX(0)} .admin-main{margin-left:0} .admin-ham{display:flex} } /* ═══════════════════════════════════════════════════════════════ MOBILE FIXES — v2 patch (July 2026) Covers: hero overlap, leadership text clipping, all pages ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── HERO TEXT OVERLAP FIX (index.html) ───────────────────── */ .hero-content { padding: 2rem 1.25rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; } .hero-headline-set { position: relative; min-height: unset; margin-bottom: 0.5rem; } .hero-h1-slide { position: relative !important; display: none; font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.15 !important; margin-bottom: 0 !important; } .hero-h1-slide.active { display: block; } .hero-h1-slide .accent { display: block; font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; line-height: 1.2 !important; margin-top: 0.15rem; } .hero-content > p, .hero-desc { font-size: 0.9rem !important; line-height: 1.65 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .hbtns { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.25rem; } .hbtns .btn { width: 100%; justify-content: center; text-align: center; } .hero-badge { font-size: 0.75rem; padding: 0.5rem 0.85rem; } /* ── LEADERSHIP / CEO TEXT CLIPPING FIX (about.html) ─────── */ .team-ceo-card { display: flex; flex-direction: column; overflow: hidden; width: 100%; box-sizing: border-box; } .ceo-copy { width: 100%; max-width: 100%; box-sizing: border-box; padding: 1.5rem 1.25rem; overflow: hidden; } .ceo-bio { overflow-wrap: break-word; word-break: break-word; white-space: normal; max-width: 100%; font-size: 0.9rem; line-height: 1.75; } .ceo-name { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; overflow-wrap: break-word; word-break: break-word; } .ceo-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; } .cs-item { flex: 1 1 80px; min-width: 0; } /* ── GLOBAL MOBILE OVERFLOW GUARD (all pages) ────────────── */ body { overflow-x: hidden; } main, section, .sec, .container, [class*="-wrap"], [class*="-section"] { max-width: 100%; box-sizing: border-box; overflow-x: hidden; } p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; word-break: break-word; } .policy-wrap { padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } /* ── SUB-HERO SECTIONS (service pages) ──────────────────── */ .sub-hero { padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .sub-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; line-height: 1.2 !important; } }