/* ═══════════════════════════════════════════════ TOKENS ═══════════════════════════════════════════════ */ :root{ --ink: #040d14; --ink-1: #071b2b; --ink-2: #0d2438; --e: #00e8ff; --e-str: #00c8e8; --e-soft: #80f4ff; --e-30: rgba(0,232,255,.30); --e-14: rgba(0,232,255,.14); --e-06: rgba(0,232,255,.06); --cta: #00e8ff; --cta-30: rgba(0,232,255,.30); --w: #edf5ff; --w-80: rgba(237,245,255,.80); --w-60: rgba(237,245,255,.60); --w-30: rgba(237,245,255,.30); --w-10: rgba(237,245,255,.10); --mono: 'IBM Plex Mono','SF Mono','Fira Code',monospace; --sans: 'Sora',system-ui,sans-serif; --ease-film: cubic-bezier(.16,1,.3,1); --ease-std: cubic-bezier(.22,1,.36,1); --wrap: min(1280px, calc(100vw - 48px)); --glow-e: 0 0 32px rgba(0,232,255,.22); } /* ═══════════════════════════════════════════════ RESET ═══════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-font-smoothing:antialiased; scroll-behavior:auto; overflow-x:hidden; overscroll-behavior:none; } body{ background:var(--ink); color:var(--w); font-family:var(--sans); overflow-x:hidden; } /* cursor:none ONLY when JS confirmed fine-pointer (class on ) */ html.js-enabled body{cursor:none} img,video{display:block;max-width:100%} a{text-decoration:none;color:inherit} ul{list-style:none} /* ═══════════════════════════════════════════════ NO-JS / REDUCED-MOTION ═══════════════════════════════════════════════ */ /* Scoped: only override when GSAP is absent */ body.no-gsap .will-t, body.no-gsap [data-reveal]{opacity:1!important;transform:none!important} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} body{cursor:auto} #C,#R{display:none} } /* ═══════════════════════════════════════════════ WHATSAPP FLOATING BUTTON ═══════════════════════════════════════════════ */ .wa-float{ position:fixed;bottom:28px;right:28px;z-index:8000; display:flex;align-items:center;gap:10px; text-decoration:none; } .wa-float-btn{ width:58px;height:58px;border-radius:50%; background:var(--e); display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 0 rgba(0,232,255,.5),0 6px 28px rgba(0,232,255,.35); transition:transform .22s var(--ease-film),box-shadow .22s; position:relative;flex-shrink:0; animation:wa-attention 2.8s ease-in-out infinite; } .wa-float-btn::before{ content:'';position:absolute;inset:0;border-radius:50%; background:var(--e);opacity:.45; animation:wa-pulse 2.8s ease-out infinite; } @keyframes wa-pulse{ 0%{transform:scale(1);opacity:.45} 80%{transform:scale(1.8);opacity:0} 100%{transform:scale(1.8);opacity:0} } @keyframes wa-attention{ 0%,100%{box-shadow:0 0 0 0 rgba(0,232,255,.5),0 6px 28px rgba(0,232,255,.35)} 50%{box-shadow:0 0 0 10px rgba(0,232,255,0),0 6px 28px rgba(0,232,255,.5)} } .wa-float-btn svg{position:relative;z-index:1} .wa-float-label{ background:rgba(4,13,20,.88); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid var(--w-10);border-radius:4px; padding:8px 14px; font-family:var(--mono);font-size:10px;letter-spacing:.07em; color:var(--w-80);white-space:nowrap; opacity:0;transform:translateX(8px); transition:opacity .22s,transform .22s var(--ease-film); pointer-events:none; } .wa-float:hover .wa-float-label{opacity:1;transform:translateX(0)} .wa-float:hover .wa-float-btn{transform:scale(1.08);border-color:var(--e);box-shadow:0 6px 28px rgba(0,232,255,.30)} @media(max-width:768px){ .wa-float{bottom:20px;right:16px} .wa-float-label{display:none} } /* ═══════════════════════════════════════════════ SKIP LINK — keyboard accessibility ═══════════════════════════════════════════════ */ .skip-link{ position:absolute;left:-100vw;top:4px;z-index:10000; background:var(--e);color:var(--ink);padding:8px 18px; font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.08em;border-radius:3px;transition:left .15s; } .skip-link:focus{left:4px;outline:none} /* ═══════════════════════════════════════════════ FOCUS STATES — accessibility ═══════════════════════════════════════════════ */ :focus-visible{ outline:2px solid var(--e); outline-offset:3px; border-radius:2px; } .ncta:focus-visible,.btn:focus-visible{ outline-offset:4px; box-shadow:0 0 0 3px rgba(0,232,255,.25); } /* ═══════════════════════════════════════════════ CURSOR ═══════════════════════════════════════════════ */ #C,#R{ position:fixed;border-radius:50%;pointer-events:none; z-index:9999;transform:translate(-50%,-50%); } #C{width:5px;height:5px;background:var(--e);mix-blend-mode:screen} #R{ width:34px;height:34px; border:1px solid rgba(0,232,255,.28); transition:width .22s var(--ease-film),height .22s var(--ease-film),opacity .22s,border-color .22s; } #R.expand{width:52px;height:52px;opacity:.5} #R.cta-hover{width:60px;height:60px;border-color:var(--e-30);opacity:.6} body.native-cursor{cursor:auto} body.native-cursor #C,body.native-cursor #R{display:none} /* ═══════════════════════════════════════════════ LOADER ═══════════════════════════════════════════════ */ #loader{ position:fixed;inset:0;background:var(--ink); display:flex;align-items:center;justify-content:center; z-index:9000;flex-direction:column;gap:28px; } .ldr-logo{height:36px;width:auto;opacity:0;transition:opacity .5s ease} .ldr-logo.visible{opacity:1} .ldr-bar{width:160px;height:1px;background:var(--w-10);overflow:hidden} .ldr-beam{height:100%;background:var(--e);width:0;transition:width .1s linear} .ldr-pct{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--w-30)} /* ═══════════════════════════════════════════════ NAV ═══════════════════════════════════════════════ */ #nav{ position:fixed;top:0;left:0;right:0;height:64px; display:flex;align-items:center;justify-content:space-between; padding:0 40px;z-index:800; transition:background .4s,border-color .4s; border-bottom:1px solid transparent; } #nav.s{ background:rgba(4,13,20,.88); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-color:var(--w-10); } .nlogo-img{height:24px;width:auto;transition:opacity .2s} .nlogo:hover .nlogo-img{opacity:.7} .nlinks{display:flex;gap:32px} .nlinks a{ font-family:var(--mono);font-size:11px;letter-spacing:.06em; color:var(--w-30);transition:color .2s; } .nlinks a:hover,.nlinks a.active{color:var(--w)} .ncta{ font-family:var(--mono);font-size:11px;letter-spacing:.06em; color:var(--ink);background:var(--e);padding:10px 22px;border-radius:3px; font-weight:600;transition:opacity .2s,transform .2s var(--ease-film),box-shadow .2s; } .ncta:hover{opacity:.9;transform:translateY(-1px);box-shadow:var(--glow-e)} .lang-switch{ display:flex;align-items:center;gap:5px; font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--w-30); } .lang-btn{ appearance:none;border:0;background:transparent;color:var(--w-30); font:inherit;letter-spacing:inherit;cursor:pointer;padding:6px 3px; transition:color .2s; } .lang-btn:hover,.lang-btn.active{color:var(--e)} .lang-btn.active{font-weight:600} .lang-switch-mobile{display:none} /* ── hide CTA on mobile, keep hamburger ── */ @media(max-width:768px){ .ncta{display:none!important} } /* hamburger */ .nav-hamburger{ display:none;flex-direction:column;gap:5px;background:none;border:none; cursor:pointer;padding:6px;z-index:810; } .nav-hamburger span{ display:block;width:22px;height:1px;background:var(--w-60); transition:transform .3s var(--ease-film),opacity .3s,background .2s; } .nav-hamburger:hover span{background:var(--w)} .nav-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .nav-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* mobile drawer */ #nav-mobile{ display:none;position:fixed;top:64px;left:0;right:0; background:rgba(4,13,20,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--w-10);z-index:799; flex-direction:column;padding:20px 24px 28px;gap:4px; transform:translateY(-8px);opacity:0; transition:opacity .25s var(--ease-film),transform .25s var(--ease-film); } #nav-mobile.open{opacity:1;transform:translateY(0)} #nav-mobile a{ font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--w-60);padding:12px 0;border-bottom:1px solid var(--w-10); transition:color .2s; } #nav-mobile a:last-child{border-bottom:none} #nav-mobile a:hover{color:var(--w)} #nav-mobile .mob-cta{ margin-top:12px;display:block;text-align:center; background:var(--e);color:var(--ink);padding:12px 24px;border-radius:3px; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em; border:none; } #nav-mobile .lang-switch-mobile{ display:flex;justify-content:center;gap:10px; margin-top:12px;padding:8px 0;border-bottom:0; } #nav-mobile .lang-switch-mobile .lang-btn{font-size:10px;padding:6px} @media(max-width:768px){ #nav{padding:0 20px} .nlinks{display:none} #nav > div > .lang-switch{display:none} .nav-hamburger{display:flex} #nav-mobile{display:flex} } /* ═══════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:11px;letter-spacing:.08em; font-weight:500;text-transform:uppercase;border:none; cursor:pointer;transition:.22s var(--ease-film); padding:14px 32px;border-radius:3px; } .btn-solid{background:var(--e);color:var(--ink);font-weight:600} .btn-solid:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,232,255,.22)} .btn-ghost{ border:1px solid var(--w-30);color:var(--w-60);background:transparent; } .btn-ghost:hover{border-color:var(--w-60);color:var(--w);} /* ═══════════════════════════════════════════════ CINEMA SECTION ═══════════════════════════════════════════════ */ #clevk-video-scroll-experience{position:relative} #cvse-sticky{ position:relative;width:100%;height:100svh; overflow:hidden; background:radial-gradient(ellipse at 50% 42%,rgba(0,232,255,.055),transparent 58%),var(--ink); } .cvse-vid{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center; opacity:0;transform:translateZ(0); } #vid-1{opacity:1} .cvse-grad{ position:absolute;inset:0;z-index:2;pointer-events:none; transition:background .8s ease; } .cvse-scan{ position:absolute;inset:0;z-index:3;pointer-events:none; background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px); opacity:.18; } .cvse-vignette{ position:absolute;inset:0;z-index:4;pointer-events:none; background:radial-gradient(ellipse at center,transparent 45%,rgba(4,13,20,.40) 100%); } .cvse-text-wrap{ position:absolute;inset:0;z-index:10; display:flex;align-items:flex-end; padding-bottom:clamp(60px,8svh,100px); pointer-events:none; } .cvse-text-inner{width:var(--wrap);margin-inline:auto;pointer-events:auto} .cvse-chapter{ font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.14em;color:var(--e);text-transform:uppercase; margin-bottom:16px;display:block;opacity:.8; } .cvse-num{ font-family:var(--mono);font-size:9px;letter-spacing:.08em; color:var(--w-30);margin-bottom:8px;display:block; } .cvse-h{ font-size:clamp(36px,5.6vw,78px); font-weight:800;letter-spacing:-.04em;line-height:1.05; white-space:pre-line; } .cvse-h.sm{font-size:clamp(36px,5.6vw,78px);font-weight:800;letter-spacing:-.04em} .cvse-h.brand{font-size:clamp(56px,10vw,140px);letter-spacing:-.06em} .cvse-sub{ font-size:clamp(14px,1.3vw,18px); font-weight:300;color:var(--w-60);line-height:1.7; margin-top:16px;max-width:480px; } .cvse-body{ font-size:clamp(13px,1.1vw,15px);font-weight:300;color:var(--w-30); letter-spacing:.04em;margin-top:12px;font-family:var(--mono); } .cvse-metrics{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:28px} .cvse-metric-n{ font-size:clamp(32px,4.5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1; } .cvse-metric-n.positive{color:var(--e)} .cvse-metric-n.negative{color:var(--e-soft)} .cvse-metric-l{ font-family:var(--mono);font-size:9px;letter-spacing:.1em; color:var(--w-30);text-transform:uppercase;margin-top:6px; } .cvse-cta-block{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:32px} .cvse-line{ width:48px;height:1px;background:var(--e); margin-bottom:20px;transform-origin:left center; } .cvse-brand-logo{ height:clamp(56px,7vw,96px);width:auto;display:block;margin-bottom:24px; filter:drop-shadow(0 0 18px rgba(0,232,255,.28)); } .cvse-text-wrap.layout-center,.cvse-text-wrap.layout-cta{align-items:center;text-align:center} .cvse-text-wrap.layout-center .cvse-sub,.cvse-text-wrap.layout-cta .cvse-sub{margin-inline:auto} .cvse-text-wrap.layout-center .cvse-cta-block,.cvse-text-wrap.layout-cta .cvse-cta-block{align-items:center} .cvse-text-wrap.layout-center .cvse-line,.cvse-text-wrap.layout-cta .cvse-line{margin-inline:auto} .cvse-text-wrap.layout-cta .cvse-brand-logo{margin-inline:auto} .cvse-text-wrap.layout-right .cvse-text-inner{display:flex;flex-direction:column;align-items:flex-end;text-align:right} .cvse-text-wrap.layout-right .cvse-sub{max-width:520px} .cvse-text-wrap.layout-bottom{align-items:flex-end;padding-bottom:clamp(48px,6svh,80px)} .cvse-text-wrap.layout-minimal .cvse-sub{font-size:clamp(12px,1.1vw,15px);max-width:380px} .layout-center .cvse-brand-logo{margin-inline:auto} .layout-right .cvse-brand-logo{margin-left:auto} .cvse-progress{ position:absolute;right:clamp(20px,2.5vw,36px);top:50%; transform:translateY(-50%);z-index:20; display:flex;flex-direction:column;align-items:center;gap:8px; } .cvse-prog-dot{ width:2px;height:16px;background:rgba(255,255,255,.15); border-radius:1px;transition:background .3s,height .3s var(--ease-film); } .cvse-prog-dot.active{background:var(--e);height:28px} @media(max-width:768px){.cvse-progress{display:none}} .cvse-counter{ position:absolute;top:80px;right:clamp(20px,2.5vw,36px); z-index:20;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--w-30); } #cvse-cur{color:var(--w)} @media(max-width:768px){.cvse-counter{display:none}} .cvse-scroll-hint{ position:absolute;bottom:28px; left:calc((100vw - var(--wrap)) / 2); z-index:20;display:flex;align-items:center;gap:10px; opacity:.4;pointer-events:none; } .cvse-scroll-line{width:1px;height:28px;background:var(--w);animation:cvse-pulse 2s ease-in-out infinite} .cvse-scroll-label{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase} @keyframes cvse-pulse{0%,100%{opacity:.25}50%{opacity:.75}} @media(max-width:768px){.cvse-scroll-hint{left:20px}} .cvse-progress-bar-wrap{ position:absolute;bottom:0;left:0;right:0;height:2px;z-index:20; background:rgba(255,255,255,.06); } .cvse-progress-bar{height:100%;background:var(--e);width:0%;transition:width .1s linear} /* ═══════════════════════════════════════════════ MOBILE FALLBACK ═══════════════════════════════════════════════ */ .cvse-mobile-scene{ display:none;position:relative; height:100svh;min-height:500px;overflow:hidden; background:radial-gradient(ellipse at 50% 42%,rgba(0,232,255,.055),transparent 58%),var(--ink); } .cvse-mobile-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cvse-mobile-ov{ position:absolute;inset:0; background:linear-gradient(to top,rgba(2,4,7,.88) 0%,rgba(2,4,7,.25) 60%,transparent 100%); } .cvse-mobile-text{position:absolute;bottom:0;left:0;right:0;padding:0 20px 48px;z-index:5} .cvse-mobile-chapter{ font-family:var(--mono);font-size:8px;letter-spacing:.14em; color:var(--e);text-transform:uppercase;margin-bottom:10px;display:block; } .cvse-mobile-h{ font-size:clamp(28px,8vw,44px);font-weight:800; letter-spacing:-.04em;line-height:1.05;white-space:pre-line;margin-bottom:10px; } .cvse-mobile-sub{font-size:14px;color:var(--w-60);font-weight:300;line-height:1.6;max-width:360px} .cvse-mobile-cta{margin-top:20px} /* ═══════════════════════════════════════════════ SHARED SECTION UTILITIES ═══════════════════════════════════════════════ */ .section-pad{ padding:clamp(80px,10vw,130px) 0; content-visibility:auto; contain-intrinsic-size:0 900px; } .section-rule{ display:block;height:1px; background:linear-gradient(to right,transparent,var(--w-10),transparent); margin-bottom:clamp(80px,10vw,130px); } .wrap{width:var(--wrap);margin-inline:auto} .sec-label{ display:block;font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.12em;color:var(--e);text-transform:uppercase;margin-bottom:12px; } .sec-h2{ font-size:clamp(36px,5.2vw,82px);font-weight:800; letter-spacing:-.04em;line-height:1.05; } /* Word-split animation containers — overflow:hidden clips words sliding in */ .word-wrap{overflow:hidden;display:inline-block;vertical-align:bottom;line-height:inherit} .word{display:inline-block;line-height:inherit} .sec-desc{ font-size:clamp(13px,1.2vw,15px);color:var(--w-60); max-width:500px;line-height:1.75;margin-top:16px; } [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-film),transform .7s var(--ease-film)} [data-reveal].revealed{opacity:1;transform:none} /* ═══════════════════════════════════════════════ HERO BRAND OVERLAY (sobre los videos) ═══════════════════════════════════════════════ */ .cvse-brand-center{ position:absolute;inset:0; display:flex;flex-direction:column; align-items:center;justify-content:center; z-index:2;text-align:center;gap:28px; pointer-events:none; } .hero-logo{ width:clamp(160px,22vw,340px);height:auto; filter:drop-shadow(0 0 40px rgba(0,232,255,.22)) drop-shadow(0 0 80px rgba(0,232,255,.10)); animation:hero-glow 4s ease-in-out infinite alternate; } @keyframes hero-glow{ from{filter:drop-shadow(0 0 30px rgba(0,232,255,.18)) drop-shadow(0 0 60px rgba(0,232,255,.08))} to {filter:drop-shadow(0 0 55px rgba(0,232,255,.32)) drop-shadow(0 0 100px rgba(0,232,255,.14))} } .hero-line{ width:48px;height:1px; background:linear-gradient(90deg,transparent,var(--e),transparent); opacity:.6; } .hero-tagline{ font-family:var(--mono); font-size:clamp(10px,1.1vw,13px); letter-spacing:.22em; text-transform:uppercase; color:var(--e); opacity:.85; } /* ═══════════════════════════════════════════════ REQUEST AUDIT FORM ═══════════════════════════════════════════════ */ .audit-section{ padding:clamp(80px,10vw,140px) 0; position:relative;overflow:hidden; } .audit-section::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,232,255,.06) 0%,transparent 70%); pointer-events:none; } .audit-header{text-align:center;margin-bottom:clamp(48px,6vw,72px)} .audit-form{ max-width:760px;margin-inline:auto; display:grid;grid-template-columns:1fr 1fr;gap:20px; } .audit-form .full{grid-column:1/-1} .audit-field{display:flex;flex-direction:column;gap:8px} .audit-field label{ font-family:var(--mono);font-size:11px;letter-spacing:.10em; text-transform:uppercase;color:var(--e); } .audit-field input, .audit-field select, .audit-field textarea{ background:var(--ink-2);border:1px solid rgba(0,232,255,.18); color:var(--w);font-family:var(--sans);font-size:14px; padding:14px 16px;border-radius:6px;outline:none;width:100%; transition:border-color .2s,box-shadow .2s; } .audit-field input::placeholder, .audit-field textarea::placeholder{color:var(--w-30)} .audit-field input:focus, .audit-field select:focus, .audit-field textarea:focus{ border-color:var(--e); box-shadow:0 0 0 3px rgba(0,232,255,.10); } .audit-field select{appearance:none;cursor:pointer} .audit-field select option{background:var(--ink-1)} .audit-field textarea{resize:vertical;min-height:110px} .audit-field.has-error input, .audit-field.has-error select, .audit-field.has-error textarea{border-color:#ff6b6b} .audit-field-error{ font-family:var(--mono);font-size:10px;letter-spacing:.04em; color:#ff8a8a;display:none; } .audit-field.has-error .audit-field-error{display:block} .audit-divider{ grid-column:1/-1;border:none; border-top:1px solid var(--w-10);margin:8px 0; } .audit-submit{grid-column:1/-1;text-align:center;margin-top:8px} .audit-submit button{padding:16px 44px;font-size:15px;cursor:pointer; display:inline-flex;align-items:center;gap:10px;border:none} .audit-submit button:disabled{opacity:.6;cursor:default} .audit-note{ grid-column:1/-1;text-align:center; font-family:var(--mono);font-size:9px; letter-spacing:.05em;color:var(--w-30);margin-top:4px; } .audit-legal{ grid-column:1/-1;text-align:center; font-size:12px;color:var(--w-30);line-height:1.7;margin-top:4px; } .audit-legal a{color:var(--e-soft);text-decoration:underline} .audit-error-banner{ grid-column:1/-1;text-align:center; font-family:var(--mono);font-size:11px;letter-spacing:.04em; color:#ff8a8a;padding:12px;border:1px solid rgba(255,107,107,.3); border-radius:6px;background:rgba(255,107,107,.06);display:none; } .audit-error-banner.show{display:block} /* Honeypot field — hidden from sighted users and assistive tech */ .audit-hp{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden; } @media(max-width:640px){ .audit-form{grid-template-columns:1fr} .audit-form .full,.audit-divider,.audit-submit,.audit-note,.audit-legal{grid-column:1} } /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ footer{padding:40px 0;border-top:1px solid var(--w-10)} .foot-row{ display:flex;align-items:center;justify-content:space-between; gap:24px;flex-wrap:wrap; } .foot-logo{height:20px;width:auto;opacity:.35} .foot-nav{display:flex;gap:24px;flex-wrap:wrap} .foot-nav a{ font-family:var(--mono);font-size:10px;letter-spacing:.06em; color:var(--w-30);text-transform:uppercase;transition:color .2s; } .foot-nav a:hover{color:var(--w)} .foot-copy{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--w-30)} @media(max-width:600px){.foot-nav{display:none}}