/* Fonts are loaded via + a direct stylesheet in each page's (faster than @import, which chains an extra request behind this file). */ /* =========================================================================== Red Queen Solutions — shared stylesheet for the whole site. Two theme axes, token-driven so layout never changes: html[data-accent] = crimson (default) | pip (Pip-Boy green) html[data-mode] = dark (default) | light =========================================================================== */ :root{ /* RED QUEEN · DARK (default) */ --ground:#14090c; --ground-2:#1b0d11; --surface:#201015; --surface-2:#2a151b; --ink:#f4e9ec; --ink-2:#d8c2c8; --muted:#a9868f; --acc:#e11d48; --acc-soft:#f2637f; --acc-deep:#a3132f; --on-acc:#ffffff; --line:rgba(225,29,72,.16); --line-2:rgba(244,233,236,.09); --glow:rgba(225,29,72,.35); --nav-bg:rgba(20,9,12,.72); --nav-bg-2:rgba(20,9,12,.9); --shadow:0 22px 46px -24px rgba(0,0,0,.8); } :root[data-mode="light"]{ /* RED QUEEN · LIGHT */ --ground:#faf4f5; --ground-2:#f2e9eb; --surface:#ffffff; --surface-2:#f7eef0; --ink:#24101a; --ink-2:#5a3a44; --muted:#8a6570; --acc:#c8123e; --acc-soft:#e11d48; --acc-deep:#8f0f2f; --on-acc:#ffffff; --line:rgba(200,18,62,.16); --line-2:rgba(36,16,26,.10); --glow:rgba(225,29,72,.22); --nav-bg:rgba(250,244,245,.8); --nav-bg-2:rgba(250,244,245,.95); --shadow:0 20px 40px -22px rgba(60,20,35,.26); } :root[data-accent="pip"]{ /* PIP-BOY · DARK */ --ground:#04140b; --ground-2:#06200f; --surface:#082410; --surface-2:#0c3017; --ink:#c8ffd8; --ink-2:#84f0a8; --muted:#3f9c66; --acc:#2bff88; --acc-soft:#8dffb4; --acc-deep:#12b357; --on-acc:#04140b; --line:rgba(43,255,136,.16); --line-2:rgba(180,255,200,.08); --glow:rgba(43,255,136,.4); --nav-bg:rgba(4,20,11,.72); --nav-bg-2:rgba(4,20,11,.92); --shadow:0 22px 46px -24px rgba(0,0,0,.85); } :root[data-accent="pip"][data-mode="light"]{ /* PIP-BOY · LIGHT */ --ground:#e9fbef; --ground-2:#daf5e2; --surface:#ffffff; --surface-2:#eefaf1; --ink:#06331a; --ink-2:#1c6b3c; --muted:#4f9c6c; --acc:#0e9d52; --acc-soft:#12b45f; --acc-deep:#0a7d40; --on-acc:#ffffff; --line:rgba(14,157,82,.18); --line-2:rgba(6,51,26,.10); --glow:rgba(14,157,82,.25); --nav-bg:rgba(233,251,239,.82); --nav-bg-2:rgba(233,251,239,.95); --shadow:0 20px 40px -22px rgba(10,60,30,.24); } :root{ --maxw:1160px; --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --disp:"Fraunces",Georgia,"Times New Roman",serif; } /* the real logo, recreated so it re-tints per theme */ .logo{height:42px;width:auto;display:block} footer .logo{height:52px} .logo .rq{fill:var(--ink)} .logo .acc-fill{fill:var(--acc)} .logo .acc-stroke{fill:none;stroke:var(--acc)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px; line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; transition:background .35s,color .35s} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.06;font-family:var(--disp);font-weight:700;letter-spacing:-.01em} p{margin:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--acc);display:inline-flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--acc);opacity:.7;display:inline-block} :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px} .accent{color:var(--acc)} .lead{color:var(--ink-2)} .muted{color:var(--muted)} /* Pip-Boy CRT flourishes */ :root[data-accent="pip"] h1,:root[data-accent="pip"] .brand{text-shadow:0 0 20px var(--glow)} :root[data-accent="pip"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60; background:repeating-linear-gradient(0deg,rgba(43,255,136,.04) 0 1px,transparent 1px 3px);mix-blend-mode:screen} :root[data-accent="pip"][data-mode="light"] body::after{background:repeating-linear-gradient(0deg,rgba(14,157,82,.05) 0 1px,transparent 1px 3px);mix-blend-mode:multiply} /* CRT sheen — a soft scanline that drifts down the screen (RQ Guardian style) */ body::after{content:"";position:fixed;left:0;right:0;top:0;height:32vh;pointer-events:none;z-index:70; background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--acc) 7%,transparent) 50%,transparent); mix-blend-mode:screen;transform:translateY(-45vh);animation:crt-sweep 7.5s linear infinite} @keyframes crt-sweep{to{transform:translateY(150vh)}} @media(prefers-reduced-motion:reduce){body::after{animation:none;opacity:0}} /* ---------- buttons ---------- */ .btn{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;padding:11px 18px;border-radius:9px; cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px; transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap} .btn-primary{background:var(--acc);color:var(--on-acc);box-shadow:0 6px 24px -8px var(--glow)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -6px var(--glow)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--acc);color:var(--acc)} /* ---------- nav ---------- */ header.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(11px);background:var(--nav-bg); border-bottom:1px solid var(--line-2);transition:background .3s} header.nav.scrolled{background:var(--nav-bg-2)} .nav .row{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.02em} .brand .mark{width:30px;height:30px;flex:0 0 auto;color:var(--acc);filter:drop-shadow(0 0 10px var(--glow))} .brand b{color:var(--acc)} .nav nav{display:flex;align-items:center;gap:17px;margin-left:auto} .nav nav a{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-2);transition:color .2s} .nav nav a:hover,.nav nav a.active{color:var(--acc)} .theme-ctl{display:flex;align-items:center;gap:8px} .tbtn{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-2);background:transparent;white-space:nowrap; border:1px solid var(--line);border-radius:8px;height:36px;padding:0 11px;display:inline-flex;align-items:center;gap:8px; cursor:pointer;transition:border-color .2s,color .2s} .tbtn:hover{border-color:var(--acc);color:var(--acc)} .tbtn .sw{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:currentColor;box-shadow:0 0 8px currentColor} .tbtn.icon{width:36px;padding:0;justify-content:center} .tbtn.icon svg{width:16px;height:16px} .nav-burger{display:none;width:38px;height:36px;border:1px solid var(--line);border-radius:8px;background:transparent; color:var(--ink);cursor:pointer;align-items:center;justify-content:center} .nav-burger svg{width:18px;height:18px} @media(max-width:1260px){ .nav nav{position:fixed;top:66px;left:0;right:0;flex-direction:column;gap:0;background:var(--nav-bg-2); backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);padding:8px 26px 18px;display:none} .nav nav.open{display:flex} .nav nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-2);font-size:15px} .nav-burger{display:inline-flex;order:9} .nav .brand{margin-right:auto} .nav .row>.btn-primary{display:none} } @media(max-width:560px){.tbtn .tlabel{display:none}.brand span{display:none}} /* ---------- home hero ---------- */ .hero{position:relative;padding:150px 0 92px;overflow:hidden} .hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px;-webkit-mask-image:radial-gradient(120% 90% at 72% 0%,#000 5%,transparent 62%); mask-image:radial-gradient(120% 90% at 72% 0%,#000 5%,transparent 62%);animation:drift 32s linear infinite} @keyframes drift{to{background-position:54px 54px}} .hero-orb{position:absolute;top:-160px;right:-120px;width:560px;height:560px;z-index:0; background:radial-gradient(circle,var(--glow),transparent 62%);filter:blur(30px);opacity:.55;animation:pulse 8s ease-in-out infinite} @keyframes pulse{50%{opacity:.32;transform:scale(1.06)}} .hero .wrap{position:relative;z-index:1} .hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:20px 0 0;max-width:15ch} .hero h1 em{font-style:normal;color:var(--acc)} .hero-sub{margin-top:24px;max-width:56ch;font-size:clamp(1.05rem,2vw,1.28rem);color:var(--ink-2)} .hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap} .spec-strip{margin-top:52px;display:flex;flex-wrap:wrap;gap:14px} .spec{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line); border-radius:8px;padding:8px 13px;background:var(--surface);display:flex;align-items:center;gap:9px} .spec b{color:var(--ink);font-weight:600} .spec i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--glow);flex:0 0 auto} /* ---------- sub-page hero ---------- */ .page-hero{position:relative;padding:128px 0 40px;overflow:hidden;border-bottom:1px solid var(--line-2)} .page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px;-webkit-mask-image:radial-gradient(90% 120% at 88% -10%,#000,transparent 60%); mask-image:radial-gradient(90% 120% at 88% -10%,#000,transparent 60%)} .page-hero .wrap{position:relative;z-index:1} .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:16px} .crumb a:hover{color:var(--acc)} .crumb span{opacity:.5} .page-hero h1{font-size:clamp(2.2rem,5.5vw,3.9rem);max-width:18ch} .page-hero .intro{margin-top:18px;max-width:58ch;font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--ink-2)} .page-hero .hero-cta{margin-top:26px} /* ---------- generic section ---------- */ .band{padding:88px 0;border-top:1px solid var(--line-2)} .band.tight{padding:60px 0} .band-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:46px} .band-head h2{font-size:clamp(1.9rem,4vw,3rem);margin-top:14px;max-width:20ch} .band-head .lead{max-width:42ch;font-size:1.02rem} .section-title{font-size:clamp(1.7rem,3.5vw,2.5rem);margin-bottom:14px} /* ---------- card grid ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} .grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))} .card{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:26px 24px 24px; display:flex;flex-direction:column;gap:13px;overflow:hidden;transition:transform .2s,border-color .25s,box-shadow .25s,background .35s} a.card{color:inherit} .card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px; background:linear-gradient(140deg,var(--acc),transparent 42%);opacity:0;transition:opacity .25s; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .card:hover{transform:translateY(-5px);border-color:transparent;box-shadow:var(--shadow)} .card:hover::before{opacity:1} .card .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center; background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid var(--line);color:var(--acc);flex:0 0 auto} .card .ic svg{width:23px;height:23px} .card .ic.emoji{font-size:22px;line-height:1} #appsearch{width:100%;max-width:560px;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--surface); border:1px solid var(--line-2);border-radius:12px;padding:13px 16px;transition:border-color .2s,box-shadow .2s} #appsearch:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)} .card h3{font-family:var(--disp);font-size:1.24rem;font-weight:600;letter-spacing:0} .card p{color:var(--ink-2);font-size:.96rem;line-height:1.55} .card .tag{margin-top:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;padding-top:12px;display:flex;align-items:center;gap:6px} .card .tag span{color:var(--acc)} .card .go{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--acc);padding-top:12px} /* ---------- feature rows (image + text, alternating) ---------- */ .feature{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .feature+.feature{margin-top:72px} .feature.flip .feature-media{order:2} @media(max-width:880px){.feature{grid-template-columns:1fr;gap:30px}.feature.flip .feature-media{order:0}} .feature h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px} .feature p+p{margin-top:14px} .feature .fx-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px} .feature .fx-list li{display:flex;gap:11px;color:var(--ink-2);font-size:.98rem} .feature .fx-list li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--acc);margin-top:8px;flex:0 0 auto;box-shadow:0 0 8px var(--glow)} /* ---------- screenshot frame (fake browser chrome) ---------- */ .shot{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)} .shot .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line-2);background:var(--ground-2)} .shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:0 0 auto} .shot .bar i:first-child{background:var(--acc);opacity:.6} .shot .bar .url{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shot img,.shot video{width:100%;height:auto;display:block;background:var(--ground-2)} .shot .ph{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background:repeating-linear-gradient(135deg,var(--ground-2) 0 16px,var(--ground) 16px 32px);color:var(--muted); font-family:var(--mono);font-size:12px;text-align:center;padding:24px} .shot .ph svg{width:34px;height:34px;color:var(--acc);opacity:.75} /* 2x2 image collage */ .gallery4{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line-2);border-radius:14px;padding:8px;background:var(--surface);box-shadow:var(--shadow)} .gallery4 img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:9px;background:var(--ground-2)} /* keep media frames modest so small source images aren't upscaled */ .shot,.gallery4,.demo .frame{max-width:470px;margin-left:auto;margin-right:auto} /* ---------- demo block ---------- */ .demo{border:1px dashed var(--line);border-radius:16px;background:var(--surface);padding:30px; display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .demo .badge{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc); border:1px solid var(--line);border-radius:99px;padding:5px 12px} .demo h3{font-size:1.3rem} .demo p{color:var(--muted);max-width:46ch} .demo .frame{width:100%;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line-2); background:radial-gradient(120% 120% at 50% 0%,var(--ground-2),var(--ground));display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:12px} .demo .frame svg{width:46px;height:46px;color:var(--acc)} /* ---------- split (two doors: home vs business) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:760px){.split{grid-template-columns:1fr}} .door{position:relative;border:1px solid var(--line-2);border-radius:18px;padding:34px 30px;overflow:hidden; background:var(--surface);display:flex;flex-direction:column;gap:14px;min-height:230px;transition:transform .2s,box-shadow .25s,border-color .25s} .door::after{content:"";position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 65%);opacity:.5;pointer-events:none} .door:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc)} .door .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)} .door h3{font-size:clamp(1.5rem,3vw,2.1rem)} .door p{color:var(--ink-2)} .door .go{margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--acc);display:inline-flex;gap:8px;align-items:center} /* ---------- capabilities grid (lab) ---------- */ .caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .cap{border:1px solid var(--line-2);border-radius:13px;padding:20px;background:var(--ground-2);display:flex;flex-direction:column;gap:9px} .cap .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid var(--line);color:var(--acc)} .cap .ic svg{width:20px;height:20px} .cap h4{font-family:var(--disp);font-size:1.02rem;font-weight:600} .cap p{color:var(--muted);font-size:.88rem;line-height:1.5} /* ---------- stat / pillars ---------- */ .pillars{display:flex;flex-direction:column;gap:12px} .pillar{display:flex;gap:15px;padding:18px;border:1px solid var(--line-2);border-radius:13px;background:var(--ground-2)} .pillar .n{font-family:var(--mono);font-size:12px;color:var(--acc);font-weight:600;border:1px solid var(--line);border-radius:7px;padding:4px 8px;height:fit-content;min-width:3.6em;text-align:center} .pillar h4{margin:0 0 4px;font-family:var(--disp);font-weight:600;font-size:1.02rem} .pillar p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5} .two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} @media(max-width:860px){.two-col{grid-template-columns:1fr;gap:34px}} /* ---------- journey timeline (cards pop in on scroll) ---------- */ .timeline{position:relative;max-width:720px;margin:8px auto 0;padding-left:6px} .timeline::before{content:"";position:absolute;top:14px;bottom:14px;left:9px;width:2px; background:linear-gradient(180deg,var(--acc),var(--line));opacity:.5} .tl-item{position:relative;padding:0 0 20px 46px} .tl-node{position:absolute;left:0;top:20px;width:20px;height:20px;border-radius:50%;background:var(--ground); border:2px solid var(--acc);box-shadow:0 0 12px var(--glow);z-index:1; opacity:0;transform:scale(.3);transition:opacity .4s ease .05s,transform .5s cubic-bezier(.2,.8,.2,1.5) .05s} .tl-node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--acc)} .tl-item.in .tl-node{opacity:1;transform:none} .tl-card{border:1px solid var(--line-2);border-radius:16px;background:var(--surface);padding:20px 22px;box-shadow:var(--shadow); opacity:0;transform:translateY(28px) scale(.94); transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.25,1.1)} .tl-item.in .tl-card{opacity:1;transform:none} .tl-year{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)} .tl-card h3{font-family:var(--disp);font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:700;margin:5px 0 8px;letter-spacing:-.01em} .tl-card>p{color:var(--ink-2);font-size:.98rem;line-height:1.6} .tl-media{margin-top:14px;max-width:380px} .tl-media figure{margin:0 0 12px;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--ground-2)} .tl-media img,.tl-media video{width:100%;height:auto;display:block} .tl-media figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px 12px;line-height:1.5} @media(prefers-reduced-motion:reduce){.tl-node,.tl-card{opacity:1;transform:none;transition:none}} /* ---------- cta band ---------- */ .cta{position:relative;border:1px solid var(--line);border-radius:22px;padding:48px 40px;overflow:hidden;text-align:center; background:linear-gradient(160deg,var(--surface-2),var(--ground-2))} .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -20%,var(--glow),transparent 60%);opacity:.6;pointer-events:none} .cta *{position:relative} .cta h2{font-size:clamp(1.7rem,4vw,2.7rem);margin-bottom:14px} .cta p{color:var(--ink-2);max-width:46ch;margin:0 auto 26px} /* ---------- contact form ---------- */ .contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px} @media(max-width:860px){.contact{grid-template-columns:1fr;gap:34px}} .contact h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:18px} .contact .lead{margin-bottom:26px;max-width:38ch} .info-list{display:flex;flex-direction:column;gap:16px;margin-top:8px} .info-list .row{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink-2)} .info-list .row svg{width:19px;height:19px;color:var(--acc);flex:0 0 auto;margin-top:2px} form{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:28px;transition:background .35s} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--ground); border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s;width:100%} .field textarea{resize:vertical;min-height:118px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)} .field select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:520px){.form-row{grid-template-columns:1fr}} .form-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5} .form-ok{display:none;font-family:var(--mono);font-size:13px;color:var(--acc-soft);border:1px solid var(--line);border-radius:10px; padding:12px 14px;margin-top:14px;background:color-mix(in srgb,var(--acc) 8%,transparent)} /* ---------- enquiry wizard ---------- */ .wiz{max-width:680px;margin:0 auto} .wiz-progress{height:5px;border-radius:5px;background:var(--line-2);overflow:hidden;margin-bottom:10px} .wiz-bar{height:100%;width:25%;background:var(--acc);border-radius:5px;transition:width .35s ease;box-shadow:0 0 10px var(--glow)} .wiz-steps{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:22px} .wiz-step{border:0;padding:0;margin:0;min-width:0} .wiz-step legend{font-family:var(--disp);font-size:clamp(1.3rem,3vw,1.7rem);font-weight:700;margin-bottom:18px;padding:0} .wiz-opts,.wiz-cond{display:grid;gap:10px} .wiz-group{margin-top:22px} .wiz-glabel{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .wiz-opt{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line-2);border-radius:12px;padding:13px 16px;cursor:pointer;background:var(--ground);transition:border-color .2s,background .2s} .wiz-opt:hover{border-color:var(--acc)} .wiz-opt:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,transparent)} .wiz-opt input{margin-top:3px;accent-color:var(--acc);flex:0 0 auto;width:16px;height:16px} .wiz-opt span{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink)} .wiz-opt small{color:var(--muted);font-size:12.5px;line-height:1.4} .wiz-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .wiz-field input,.wiz-field select,.wiz-field textarea{font-family:var(--sans);font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--ground);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s} .wiz-field textarea{resize:vertical;min-height:120px} .wiz-field input:focus,.wiz-field select:focus,.wiz-field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)} .wiz-field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .wiz-help{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.5} .wiz-nav{display:flex;align-items:center;gap:12px;margin-top:26px} .wiz-nav .btn{min-width:130px;justify-content:center} .wiz-err{color:var(--acc-soft);font-family:var(--mono);font-size:12.5px;margin-top:12px} /* ---------- shop teaser + footer ---------- */ .shop{text-align:center;padding:16px 0} .shop .badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid var(--line);border-radius:99px;padding:6px 14px;display:inline-block} .shop h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:18px 0 10px} .shop p{color:var(--muted);max-width:44ch;margin:0 auto} footer{border-top:1px solid var(--line-2);padding:52px 0 40px;background:var(--ground-2);transition:background .35s} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px} @media(max-width:760px){.foot{grid-template-columns:1fr 1fr}} @media(max-width:480px){.foot{grid-template-columns:1fr}} .foot .brand{font-size:16px;margin-bottom:12px} .foot .about{color:var(--muted);font-size:.9rem;max-width:34ch} .foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px} .foot-col{display:flex;flex-direction:column;gap:10px} .foot-col a{font-family:var(--mono);font-size:13px;color:var(--ink-2)} .foot-col a:hover{color:var(--acc)} .foot-meta{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted)} .foot-meta b{color:var(--ink-2);font-weight:500} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── Lightbox — click any app screenshot to view it full-size ── */ .shot img{cursor:zoom-in} #lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,6,9,.92);cursor:zoom-out} #lightbox.open{display:flex} #lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:12px;border:1px solid var(--line-2);box-shadow:0 24px 80px rgba(0,0,0,.6);cursor:default} #lightbox .lb-x{position:absolute;top:16px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font-size:23px;line-height:40px;text-align:center;cursor:pointer} #lightbox .lb-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#cdd2df;font-size:12.5px;padding:0 28px;font-family:var(--mono)} @media(prefers-reduced-motion:no-preference){#lightbox.open img{animation:lbin .18s ease}} @keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} /* ── Sensor graph gallery (home automation) ── */ .graph-gallery{margin-top:18px} .gg-h{text-align:center;font-size:1.15rem;margin:0 0 20px;color:var(--ink)} .gg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start;max-width:1120px;margin:0 auto} .gg-grid .shot{max-width:none} /* Make the `hidden` attribute reliably hide elements even when a class (e.g. .btn) sets its own display — fixes wizard Back/Next/Send showing all at once. */ [hidden]{display:none!important} /* Uniform-size gallery (e.g. sensor graphs) — every tile the same shape */ .gg-uniform .shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block} /* ── "Off the bench" showcase — polished square work tiles ── */ .work-showcase{margin-top:24px} .work-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:1040px;margin:0 auto} .work-tile{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);aspect-ratio:1/1;background:var(--ground-2);cursor:zoom-in} .work-tile img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .work-tile:hover img{transform:scale(1.07)} .work-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;font-family:var(--mono);font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(6,4,7,.85));pointer-events:none;opacity:.94;transform:translateY(4px);transition:.35s} .work-tile:hover figcaption{opacity:1;transform:none} .work-tile::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 0 var(--acc);transition:box-shadow .35s;pointer-events:none} .work-tile:hover::after{box-shadow:inset 0 0 0 2px var(--acc)} /* Full-width feature (image removed) — one column, readable line length */ .feature.solo{grid-template-columns:1fr} .feature.solo>div{max-width:900px}