/* ============================================================ SmartVendHub — main stylesheet ============================================================ */ /* ================= TOKENS ================= */ :root{ --ink:#0C0E11; --ink2:#12151A; --ink3:#181C23; --ink4:#1E232B; --line:#232830; --line2:#2E343E; --porcelain:#F4F1EA; --porcelain-dim:#C9C5BB; --steel:#97A0AD; --steel-dim:#8A93A0; --amber:#E8B345; --amber-hi:#F6CE6B; --amber-lo:#D9952B; --mint:#46E0B1; --red:#FF5C5C; --ink-on-gold:#23180A; --grad-gold:linear-gradient(135deg,#F6CE6B 0%,#D9952B 100%); --font-d:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; --font-b:'Inter',ui-sans-serif,system-ui,sans-serif; --font-m:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --r-lg:26px; --r-md:18px; --r-sm:12px; --shadow-card:0 24px 60px -24px rgba(0,0,0,.6); --ease:cubic-bezier(.22,1,.36,1); } /* ================= BASE ================= */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:96px} body{ background:var(--ink); color:var(--porcelain); font-family:var(--font-b); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } ::selection{background:var(--amber); color:var(--ink)} img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} h1,h2,h3,h4{font-family:var(--font-d); font-weight:600; letter-spacing:-.02em; line-height:1.08} :focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px} .skip-link{position:absolute; left:16px; top:-60px; z-index:100; padding:10px 18px; border-radius:var(--r-sm); background:var(--amber); color:var(--ink); font-weight:600; font-size:14px; transition:top .2s} .skip-link:focus{top:16px} /* ================= AMBIENT LAYERS ================= */ .bg-mesh{position:fixed; inset:0; z-index:-3; pointer-events:none; background: radial-gradient(900px 600px at 85% -10%, rgba(232,179,69,.10), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(70,224,177,.05), transparent 60%), radial-gradient(900px 700px at 50% 110%, rgba(217,149,43,.07), transparent 60%), var(--ink); } .bg-grid{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(244,241,234,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(244,241,234,.025) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%); } .bg-noise{position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); animation:grain 9s steps(8) infinite; } @keyframes grain{0%,100%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-4%)}37%{transform:translate(-4%,-2%)}50%{transform:translate(3%,3%)}62%{transform:translate(-2%,4%)}75%{transform:translate(4%,-3%)}87%{transform:translate(-3%,-4%)}} #progress{position:fixed; top:0; left:0; height:2px; width:0%; z-index:90; background:var(--grad-gold); box-shadow:0 0 12px rgba(232,179,69,.6)} /* ================= REVEAL ================= */ /* hidden-until-reveal only when JS is confirmed running (html.js set in ) — if main.js fails to load, content stays visible */ .js .rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease)} .js .rv.on{opacity:1; transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} /* ================= NAV ================= */ #hdr{position:fixed; top:0; left:0; right:0; z-index:80; transition:transform .4s var(--ease)} .logo{display:flex; align-items:center; gap:11px} .logo svg{height:34px; width:34px; flex:none} .logo-word{font-family:var(--font-d); font-weight:700; font-size:17.5px; letter-spacing:-.015em} .logo-word b{font-weight:700; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent} .logo-sub{display:block; font-family:var(--font-m); font-size:8.5px; letter-spacing:.3em; color:var(--steel); text-transform:uppercase; margin-top:1px} .nav-phone{font-family:var(--font-m); font-size:12.5px; letter-spacing:.04em; color:var(--steel); transition:color .25s} .nav-phone:hover{color:var(--amber-hi)} @media(max-width:1140px){.nav-phone{display:none}} .cta-short{display:none} @media(max-width:520px){.cta-short{display:inline}.logo-sub{display:none}.logo svg{height:30px;width:30px}} /* ================= BUTTONS ================= */ .btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-d); font-weight:600; font-size:15.5px; letter-spacing:.01em; padding:15px 28px; border-radius:var(--r-sm); transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s; will-change:transform; white-space:nowrap} .btn-gold{background:var(--grad-gold); color:var(--ink-on-gold); box-shadow:0 14px 34px -12px rgba(217,149,43,.55), inset 0 1px 0 rgba(255,255,255,.45); overflow:hidden} .btn-gold:hover{transform:translateY(-2px); box-shadow:0 22px 44px -14px rgba(217,149,43,.7), inset 0 1px 0 rgba(255,255,255,.45)} .btn-gold::after{content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:shine 5.5s ease-in-out infinite} @keyframes shine{0%,72%{left:-80%}88%,100%{left:140%}} .btn-ghost{border:1px solid var(--line2); color:var(--porcelain); background:rgba(244,241,234,.03)} .btn-ghost:hover{border-color:var(--amber); color:var(--amber-hi); transform:translateY(-2px)} .btn-sm{padding:10px 18px; font-size:13.5px; border-radius:var(--r-sm)} .btn .arr{transition:transform .35s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .dot{position:relative; width:7px; height:7px; border-radius:50%; background:var(--mint); flex:none} .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--mint); animation:ping 2s var(--ease) infinite} @keyframes ping{0%{transform:scale(.5); opacity:1}100%{transform:scale(1.8); opacity:0}} .h1{font-size:clamp(46px,6.6vw,92px); margin-top:26px; letter-spacing:-.035em} .h1 em{font-style:normal; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; white-space:nowrap} .h1 em::after{content:""; position:absolute; left:2px; right:2px; bottom:.06em; height:.085em; background:var(--grad-gold); border-radius:99px; transform:scaleX(0); transform-origin:left; animation:underline 1s var(--ease) .9s forwards; opacity:.9} @keyframes underline{to{transform:scaleX(1)}} .hero-sub{margin-top:26px; font-size:clamp(17px,1.5vw,19.5px); color:var(--steel); max-width:560px; line-height:1.7} .hero-sub b{color:var(--porcelain-dim); font-weight:600} .hero-ctas{margin-top:38px; display:flex; flex-wrap:wrap; gap:14px} @keyframes marq{to{transform:translateX(-50%)}} /* ================= SECTIONS ================= */ section{position:relative} /* ================= FAQ ================= */ .faq-wrap{max-width:780px; margin-inline:auto} .faq{border-bottom:1px solid var(--line)} .faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px; padding:24px 4px; transition:color .3s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--amber-hi)} .faq-n{font-family:var(--font-m); font-size:11px; letter-spacing:.18em; color:var(--steel-dim); flex:none; width:30px} .faq-q{font-family:var(--font-d); font-weight:600; font-size:17.5px; letter-spacing:-.015em; flex:1} .faq-x{flex:none; width:30px; height:30px; border-radius:9px; border:1px solid var(--line2); display:grid; place-items:center; transition:transform .45s var(--ease),background .3s,border-color .3s; color:var(--amber)} .faq[open] .faq-x{transform:rotate(45deg); background:rgba(232,179,69,.12); border-color:rgba(232,179,69,.4)} .faq-a{padding:0 4px 26px 52px; color:var(--steel); font-size:15px; line-height:1.75; max-width:660px} .faq[open] .faq-a{animation:faqIn .5s var(--ease)} @keyframes faqIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}} .cta-points{margin-top:28px; display:flex; flex-direction:column; gap:14px} .cta-points li{list-style:none; display:flex; gap:13px; align-items:flex-start; color:var(--porcelain-dim); font-size:15px} .cta-points svg{color:var(--amber); flex:none; margin-top:3px} .cta-contact{margin-top:34px; display:flex; flex-wrap:wrap; gap:12px} .cta-pill{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r-sm); border:1px solid var(--line2); background:rgba(12,14,17,.5); font-family:var(--font-m); font-size:12.5px; letter-spacing:.05em; transition:border-color .3s,color .3s} .cta-pill:hover{border-color:var(--amber); color:var(--amber-hi)} .cta-pill svg{color:var(--amber)} .form{border-radius:22px; border:1px solid var(--line2); background:rgba(12,14,17,.66); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:30px 28px; box-shadow:0 30px 70px -30px rgba(0,0,0,.8)} .form-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px} .form-head .ft{font-family:var(--font-d); font-weight:600; font-size:18px; letter-spacing:-.015em} .form-head .fs{font-family:var(--font-m); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--mint); display:flex; gap:7px; align-items:center} .f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media(max-width:520px){.f-row{grid-template-columns:1fr}} .f-field{margin-bottom:14px} .f-field label{display:block; font-family:var(--font-m); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin-bottom:7px} .f-field input,.f-field select,.f-field textarea{width:100%; background:var(--ink2); border:1px solid var(--line2); border-radius:var(--r-sm); color:var(--porcelain); font-family:var(--font-b); font-size:14.5px; padding:13px 14px; transition:border-color .3s,box-shadow .3s; appearance:none} .f-field textarea{resize:vertical; min-height:88px} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(232,179,69,.4)} .f-field input[aria-invalid="true"],.f-field select[aria-invalid="true"],.f-field textarea[aria-invalid="true"]{border-color:var(--red)} .form-err{color:var(--red); font-size:13px; margin:-4px 0 2px} .form-ok{color:var(--mint); font-size:13.5px; font-weight:600; margin:-4px 0 2px} .form .btn[disabled]{opacity:.6; cursor:default; transform:none} /* 16px on touch widths prevents iOS Safari auto-zoom on field focus */ @media(max-width:760px){.f-field input,.f-field select,.f-field textarea{font-size:16px}} .f-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2397A0AD' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center} .form .btn{width:100%; margin-top:8px} .form-note{margin-top:14px; text-align:center; font-size:12px; color:var(--steel-dim)} .form-note a{color:var(--steel); text-decoration:underline; text-underline-offset:3px} /* ================= FOOTER ================= */ footer{border-top:1px solid var(--line); padding:64px 0 110px; position:relative; background:rgba(10,12,15,.6)} .foot-legal{margin-top:54px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:12.5px; color:var(--steel-dim)} .foot-legal .mono-sm{font-family:var(--font-m); font-size:10px; letter-spacing:.18em; text-transform:uppercase} /* ================= STICKY MOBILE CTA ================= */ .mob-cta{position:fixed; left:12px; right:12px; bottom:12px; z-index:70; display:none; gap:10px; padding:10px; border-radius:var(--r-md); background:rgba(12,14,17,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line2); box-shadow:0 -10px 50px rgba(0,0,0,.6); transform:translateY(130%); transition:transform .5s var(--ease)} .mob-cta.show{transform:none} .mob-cta .btn{flex:1; padding:13px 10px; font-size:14px} /* shown wherever the header nav links are collapsed (≤980px) so a phone/CTA path always exists */ @media(max-width:980px){.mob-cta{display:flex}} /* ================= MOBILE ANCHOR CHIPS ================= */ .anchor-chips{display:none} @media(max-width:980px){ .anchor-chips{display:flex; gap:8px; overflow-x:auto; padding:0 20px 16px; margin-top:-30px; position:relative; z-index:2; -webkit-overflow-scrolling:touch; scrollbar-width:none} .anchor-chips::-webkit-scrollbar{display:none} .anchor-chips a{flex:none; font-family:var(--font-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--porcelain-dim); padding:10px 14px; border-radius:999px; border:1px solid var(--line2); background:rgba(18,21,26,.7)} } /* ================= BACK TO TOP ================= */ .to-top{position:fixed; right:26px; bottom:26px; z-index:72; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--porcelain-dim); background:rgba(18,21,26,.85); border:1px solid var(--line2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 10px 30px -10px rgba(0,0,0,.7); opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity .35s var(--ease),transform .35s var(--ease),color .25s,border-color .25s} .to-top.show{opacity:1; pointer-events:auto; transform:none} .to-top:hover{color:var(--amber-hi); border-color:rgba(232,179,69,.45)} .to-top:hover svg{transform:translateY(-2px)} .to-top svg{transition:transform .3s var(--ease)} /* keep clear of the sticky mobile CTA bar */ @media(max-width:980px){.to-top{bottom:88px; right:14px}} /* reduced motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important} html{scroll-behavior:auto} .rv,.js .rv{opacity:1; transform:none} } .logos-track{display:flex; align-items:center; gap:64px; width:max-content; animation:marq 36s linear infinite; padding:0 32px} .logos-track img{height:34px; width:auto; filter:grayscale(1) brightness(2.4) contrast(.55); opacity:.55; transition:filter .3s,opacity .3s} .logos-track img:hover{filter:none; opacity:1} /* catalog */ .cat-filters{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px} .cat-filters button{font-family:var(--font-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--porcelain-dim); padding:10px 16px; border-radius:999px; border:1px solid var(--line2); background:rgba(244,241,234,.025); cursor:pointer; transition:color .25s,border-color .25s,background .25s} .cat-filters button:hover{color:var(--porcelain)} .cat-filters button.act{color:var(--ink-on-gold); background:var(--grad-gold); border-color:transparent; font-weight:700} .swipe-hint{font-family:var(--font-m); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel-dim)} .swipe-hint .sw-arr{display:inline-block; animation:swNudge 1.8s var(--ease) infinite; color:var(--amber)} @keyframes swNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} .fp-us{fill:url(#fpDots); stroke:rgba(244,241,234,.16); stroke-width:1.2} .fp-dot{fill:var(--amber-hi)} .fp-site{fill:rgba(232,179,69,.38)} .fp-ring{fill:none; stroke:var(--amber-hi); stroke-width:1.5; opacity:.5; transform-box:fill-box; transform-origin:center; animation:fpPing 2.6s var(--ease) infinite} .fp-pin.d1 .fp-ring{animation-delay:.5s}.fp-pin.d2 .fp-ring{animation-delay:1s}.fp-pin.d3 .fp-ring{animation-delay:1.5s} @keyframes fpPing{0%{transform:scale(.6); opacity:.85}70%,100%{transform:scale(1.8); opacity:0}} /* ============================================================ OPERATIONS CONSOLE LAYOUT ============================================================ */ .console{display:block} .cmain{margin-left:264px; padding:0 44px} @media(max-width:1500px){.cmain{padding:0 32px}} /* sidebar */ .cside{position:fixed; left:0; top:0; bottom:0; width:264px; z-index:80; display:flex; flex-direction:column; padding:26px 22px 22px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(18,21,26,.88),rgba(12,14,17,.94)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .cside .logo{margin-bottom:34px} .cnav{display:flex; flex-direction:column; gap:2px; flex:1} .cnav-item{position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm); color:var(--steel); transition:color .25s,background .25s} .cnav-item:hover{color:var(--porcelain); background:rgba(244,241,234,.04)} .cn-num{font-family:var(--font-m); font-size:9.5px; letter-spacing:.14em; color:var(--steel-dim); width:22px} .cn-label{font-family:var(--font-d); font-weight:600; font-size:14.5px; letter-spacing:-.01em} .cn-tick{margin-left:auto; width:7px; height:7px; border-radius:50%; border:1px solid var(--line2); transition:background .3s,border-color .3s,box-shadow .3s} .cnav-item.cur{color:var(--porcelain); background:rgba(232,179,69,.07)} .cnav-item.cur .cn-num{color:var(--amber)} .cnav-item.cur .cn-tick{background:var(--amber); border-color:var(--amber); box-shadow:0 0 10px rgba(232,179,69,.7)} .cside-foot{border-top:1px solid var(--line); padding-top:18px; display:flex; flex-direction:column; gap:9px} .cside-foot .sys{display:flex; align-items:center; gap:9px; font-family:var(--font-m); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint)} .cside-foot .sys-sub{font-family:var(--font-m); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-dim)} .cside-foot .nav-phone{display:block; margin-top:4px} .cside-foot .btn{justify-content:center; margin-top:6px} /* mobile bar */ .cbar{display:none; position:fixed; top:0; left:0; right:0; z-index:80; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); background:rgba(12,14,17,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .cbar .cta-short{display:inline} .cchips{margin-top:0} @media(max-width:1100px){ .cside{display:none} .cbar{display:flex} .cmain{margin-left:0; padding:0 20px} .console .anchor-chips{display:flex; position:sticky; top:62px; z-index:70; margin:0 -20px; padding:12px 20px; background:rgba(12,14,17,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} } @media(min-width:1101px){.console .anchor-chips{display:none}} /* modules */ .mod{position:relative; padding:96px 0 40px; border-bottom:1px solid var(--line); scroll-margin-top:20px} .mod:last-child{border-bottom:0} .mod-in{max-width:1240px; margin-inline:auto} .mod-head{display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; margin-bottom:40px} .mh-id{display:inline-block; font-family:var(--font-m); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber)} .mh-title{font-size:clamp(30px,3.6vw,48px); letter-spacing:-.03em} .mh-status{margin-left:auto; font-family:var(--font-m); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--mint); border:1px solid rgba(70,224,177,.3); background:rgba(70,224,177,.06); padding:6px 11px; border-radius:999px; white-space:nowrap} @media(max-width:1100px){.mod{padding-top:120px}} /* overview */ .ov-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; min-height:calc(100vh - 140px)} @media(max-width:1280px){.ov-grid{grid-template-columns:1fr; min-height:0; gap:40px}} .ov-stats{margin-top:40px; display:grid; grid-template-columns:repeat(4,auto); gap:0; width:fit-content; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(18,21,26,.7); overflow:hidden} .ov-stats>div{padding:16px 22px; border-right:1px solid var(--line)} .ov-stats>div:last-child{border-right:0} .ov-stats b{display:block; white-space:nowrap; font-family:var(--font-d); font-weight:700; font-size:clamp(20px,2vw,26px); letter-spacing:-.02em; color:var(--amber-hi)} .ov-stats b span{font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; display:inline; margin:0} .ov-stats span{display:block; white-space:nowrap; margin-top:3px; font-family:var(--font-m); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-dim)} @media(max-width:640px){.ov-stats{grid-template-columns:repeat(2,1fr); width:100%}.ov-stats>div:nth-child(2){border-right:0}.ov-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}} .ov-photo{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line2); box-shadow:var(--shadow-card); aspect-ratio:4/4.5} .ov-photo img{width:100%; height:100%; object-fit:cover} .ov-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg,transparent 55%,rgba(12,14,17,.6))} .ov-readout{position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-m); font-size:9.5px; letter-spacing:.18em; color:var(--porcelain); background:rgba(12,14,17,.8); border:1px solid var(--line2); padding:9px 13px; border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)} /* service — three numbered cards (donor structure) */ .svc-sub{margin:-16px 0 34px; font-family:var(--font-d); font-weight:600; font-size:clamp(19px,2vw,24px); letter-spacing:-.015em; color:var(--porcelain-dim)} .svc{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} @media(max-width:980px){.svc{grid-template-columns:1fr; max-width:560px}} .svc-card{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(170deg,var(--ink3),var(--ink2)); padding:30px 28px 28px; overflow:hidden; transition:transform .5s var(--ease),border-color .4s} .svc-card:hover{transform:translateY(-6px); border-color:rgba(232,179,69,.4)} .svc-card::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(232,179,69,.7),transparent); opacity:0; transition:opacity .4s} .svc-card:hover::before{opacity:1} .svc-n{display:block; font-family:var(--font-d); font-weight:700; font-size:54px; line-height:1; letter-spacing:-.03em; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent} .svc-card h3{font-size:20px; margin-top:18px} .svc-card p{margin-top:10px; color:var(--steel); font-size:14.5px; line-height:1.7} .mh-title em{font-style:normal; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent} /* fleet units — horizontal slider */ .fleet-ctl{display:flex; align-items:center; justify-content:space-between; margin-top:30px} .fleet-ctl .swipe-hint{font-family:var(--font-m); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel-dim)} .fleet-ctl .sw-arr{display:inline-block; animation:swNudge 1.8s var(--ease) infinite; color:var(--amber)} @keyframes swNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} .fleet-nav{display:flex; gap:8px} .fleet-btn{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--porcelain-dim); border:1px solid var(--line2); background:rgba(244,241,234,.03); cursor:pointer; transition:color .25s,border-color .25s,transform .3s} .fleet-btn:hover{color:var(--amber-hi); border-color:rgba(232,179,69,.45); transform:translateY(-2px)} .fleet{margin-top:16px; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; mask-image:linear-gradient(90deg,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent)} .fleet::-webkit-scrollbar{display:none} .unit{flex:0 0 min(330px,84vw); scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(170deg,var(--ink3),var(--ink2)); overflow:hidden; transition:border-color .35s,transform .4s var(--ease)} .unit:hover{border-color:rgba(232,179,69,.4); transform:translateY(-4px)} .unit.hide{display:none} .unit-img{background:radial-gradient(80% 80% at 50% 40%,#23282f,#14171c); display:grid; place-items:center; padding:18px; min-height:200px} .unit-img img{height:210px; width:auto; max-width:88%; object-fit:contain; background:#fff; border-radius:14px; padding:10px 14px; box-shadow:0 14px 28px rgba(0,0,0,.45)} .unit-info{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1} .unit-top{display:flex; align-items:center; justify-content:space-between; gap:12px} .unit-cat{font-family:var(--font-m); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-hi); background:rgba(232,179,69,.1); border:1px solid rgba(232,179,69,.3); padding:4px 9px; border-radius:999px} .unit-idx{font-family:var(--font-m); font-size:9px; letter-spacing:.18em; color:var(--steel-dim)} .unit-info h3{font-size:18px; margin-top:11px; letter-spacing:-.01em} .unit-tag{margin-top:4px; color:var(--amber-hi); font-size:12.5px; font-style:italic} .unit-feats{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px} .unit-feats li{position:relative; padding-left:16px; color:var(--steel); font-size:12.5px; line-height:1.5} .unit-feats li::before{content:"→"; position:absolute; left:0; color:var(--amber); font-size:11px} .unit-specs{margin-top:auto; padding-top:12px; border-top:1px dashed var(--line2); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center} .unit-specs span{font-family:var(--font-m); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-dim)} .unit-specs .unit-fit{width:100%; color:var(--porcelain-dim); text-transform:none; letter-spacing:.02em; font-family:var(--font-b); font-size:12px} /* sectors ledger */ .ledger{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden} .ledger-row{display:grid; grid-template-columns:90px 280px 1fr; gap:22px; padding:20px 28px; align-items:baseline; border-bottom:1px solid var(--line); background:linear-gradient(170deg,var(--ink3),var(--ink2)); transition:background .3s} .ledger-row:last-child{border-bottom:0} .ledger-row:hover{background:linear-gradient(170deg,var(--ink4),var(--ink3))} .lr-key{font-family:var(--font-m); font-size:9.5px; letter-spacing:.2em; color:var(--amber)} .lr-title{font-family:var(--font-d); font-weight:600; font-size:16.5px; letter-spacing:-.01em} .lr-desc{color:var(--steel); font-size:13.5px; line-height:1.6} @media(max-width:900px){.ledger-row{grid-template-columns:1fr; gap:6px; padding:18px 22px}} /* coverage */ .cov-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center} @media(max-width:1100px){.cov-grid{grid-template-columns:1fr}} .cov-map svg{display:block; width:100%; height:auto} .cov-side{display:flex; flex-direction:column; gap:14px} .cov-stat{border:1px solid var(--line); border-radius:var(--r-md); background:rgba(18,21,26,.7); padding:18px 22px} .cov-stat b{display:block; white-space:nowrap; font-family:var(--font-d); font-weight:700; font-size:clamp(28px,3vw,38px); letter-spacing:-.02em; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent} .cov-stat b span{font:inherit; letter-spacing:inherit; display:inline; margin:0; text-transform:none; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent} .cov-stat span{display:block; margin-top:2px; font-family:var(--font-m); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)} .cov-note{color:var(--steel); font-size:14px; line-height:1.7} .registry{margin-top:38px; display:flex; align-items:center; gap:20px; border-top:1px solid var(--line); padding-top:22px; overflow:hidden} .reg-label{flex:none; font-family:var(--font-m); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-dim)} .reg-scroll{flex:1; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .registry .logos-track{display:flex; align-items:center; gap:40px; width:max-content; animation:marq 36s linear infinite} .registry .logos-track img{height:34px; width:auto; border-radius:7px; filter:grayscale(1) invert(.92) contrast(.85); opacity:.75; transition:filter .3s,opacity .3s} .registry .logos-track img:hover{filter:none; opacity:1} .registry:hover .logos-track{animation-play-state:paused} /* intake */ .intake-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start} @media(max-width:1100px){.intake-grid{grid-template-columns:1fr}} /* ================= TERMS / PROCESS / PROOF MODULES ================= */ .terms-note{margin-top:22px; padding:18px 24px; border:1px dashed var(--line2); border-radius:var(--r-md); color:var(--porcelain-dim); font-size:14.5px; line-height:1.7; max-width:880px} .steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px} @media(max-width:1100px){.steps-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.steps-grid{grid-template-columns:1fr; max-width:480px}} .pstep{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(170deg,var(--ink3),var(--ink2)); padding:26px 24px; transition:transform .5s var(--ease),border-color .4s} .pstep:hover{transform:translateY(-5px); border-color:rgba(232,179,69,.4)} .pstep-n{font-family:var(--font-m); font-size:10px; letter-spacing:.2em; color:var(--amber)} .pstep h3{font-size:18px; margin-top:12px} .pstep p{margin-top:8px; color:var(--steel); font-size:13.5px; line-height:1.65} .pf-card{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(170deg,var(--ink3),var(--ink2)); display:flex; flex-direction:column; transition:transform .5s var(--ease),border-color .4s} .pf-card:hover{transform:translateY(-5px); border-color:rgba(232,179,69,.4)} .pf-card img{width:100%; aspect-ratio:4/3; object-fit:cover} .pf-card figcaption{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1} .pf-card blockquote{margin:0; color:var(--porcelain-dim); font-size:14px; line-height:1.7; flex:1} .pf-who{margin-top:14px; font-family:var(--font-m); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-hi)} /* fleet slider counter */ .fleet-pos{font-family:var(--font-m); font-size:10px; letter-spacing:.18em; color:var(--steel-dim); margin-right:8px; align-self:center} .fleet.at-end{mask-image:none; -webkit-mask-image:none} /* tablet 981–1100: console chips styled (console collapse happens at 1100) */ @media(max-width:1100px){ .console .anchor-chips{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none} .console .anchor-chips::-webkit-scrollbar{display:none} .console .anchor-chips a{flex:none; font-family:var(--font-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--porcelain-dim); padding:12px 14px; border-radius:999px; border:1px solid var(--line2); background:rgba(18,21,26,.7)} .console .anchor-chips a.cur-chip{color:var(--amber-hi); border-color:rgba(232,179,69,.4)} } /* overview photo: cap height when grid collapses */ @media(max-width:1280px){.ov-photo{aspect-ratio:16/10; max-height:420px}} /* center capped grids */ @media(max-width:980px){.svc{margin-inline:auto}.steps-grid{margin-inline:auto}} /* tap targets ≥44px */ .fleet-btn{width:44px; height:44px} .show-btn{width:44px; height:44px} /* tiny phones: let stat labels wrap instead of clipping */ @media(max-width:360px){.ov-stats span{white-space:normal}} /* perf: static grain on small screens */ @media(max-width:1279px){.bg-noise{animation:none}} /* fixed controls unreachable when hidden */ .to-top{visibility:hidden} .to-top.show{visibility:visible} .mob-cta{visibility:hidden} .mob-cta.show{visibility:visible} /* intake: form first when stacked */ @media(max-width:1100px){.intake-grid > .rv:first-child{order:2}.intake-grid > form{order:1}} /* legal pages */ .legal-page{max-width:820px; margin-inline:auto; padding:140px 24px 80px} .legal-page h1{font-size:clamp(30px,4vw,44px); letter-spacing:-.03em} .legal-body{margin-top:28px; color:var(--porcelain-dim); font-size:15px; line-height:1.8} .legal-body h2{font-size:19px; margin:28px 0 8px; color:var(--porcelain)} .legal-body p{margin:10px 0} .legal-body a{color:var(--amber-hi)} /* proof review slider */ .proof-slider{margin-top:16px; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; mask-image:linear-gradient(90deg,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent)} .proof-slider::-webkit-scrollbar{display:none} .proof-slider.at-end{mask-image:none; -webkit-mask-image:none} .proof-slider .pf-card{flex:0 0 min(380px,85vw); scroll-snap-align:start} .pf-card img{width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:center 30%}