/* ========================================================================== GOOD NEWS AUTO DETAILING & WINDOW TINTING Core design system + components Palette sampled directly from the brand banner artwork: blue rgb(20,30,213) = #141ED5 orange rgb(230,106,36) = #E66A24 ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root{ /* Foundation */ --obsidian:#07080C; --carbon:#0D0F16; --graphite:#14171F; --graphite-2:#1A1E28; --steel-line:rgba(255,255,255,.07); --glass-fill:rgba(255,255,255,.045); --glass-stroke:rgba(255,255,255,.10); /* Brand - exact logo values */ --brand-orange:#E66A24; --brand-blue:#141ED5; /* UI-tuned variants (brightened for AA contrast on dark) */ --signal-orange:#F5811F; --ember:#FF9C3D; --amber-gold:#FFB547; --cobalt:#2334E0; --electric-blue:#5B84FF; /* Type */ --frost:#F4F6FA; --mist:#AEB6C4; --muted:#7A8393; /* Gradients */ --grad-heat:linear-gradient(135deg,#F5811F 0%,#FFB547 100%); --grad-heat-r:linear-gradient(135deg,#FFB547 0%,#F5811F 100%); --grad-tint:linear-gradient(135deg,#141ED5 0%,#5B84FF 55%,#07080C 100%); --grad-glass:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02)); --grad-text:linear-gradient(120deg,#FFFFFF 0%,#FFD9B0 45%,#F5811F 100%); /* Layered shadows - never a single flat shadow */ --shadow-card: 0 1px 1px rgba(0,0,0,.30), 0 4px 10px rgba(0,0,0,.28), 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055); --shadow-lift: 0 10px 24px rgba(0,0,0,.42), 0 30px 70px rgba(0,0,0,.48), 0 0 46px rgba(245,129,31,.20); --shadow-deep: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45), 0 40px 90px rgba(0,0,0,.55); --glow-orange:0 0 0 1px rgba(245,129,31,.35),0 0 34px rgba(245,129,31,.30); --glow-blue:0 0 0 1px rgba(91,132,255,.35),0 0 34px rgba(91,132,255,.28); /* Motion */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:180ms; --t-mid:260ms; --t-slow:420ms; /* Rhythm */ --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; --max-w:1280px; --gut:clamp(20px,5vw,56px); --sec-y:clamp(72px,10vw,140px); /* z-index scale */ --z-base:1; --z-raise:10; --z-sticky:20; --z-header:30; --z-dropdown:300; --z-overlay:900; --z-modal:999; --z-toast:9999; } /* ------------------------------------------------------------ base reset */ *,*::before,*::after{box-sizing:border-box} /* Entrance transforms and the bleeding media column momentarily extend past the viewport, so horizontal overflow must be suppressed. Use `clip`, NOT `hidden`: `hidden` turns the element into a scroll container, which silently breaks `position:sticky` on the header. `clip` does not. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{ margin:0; background:var(--obsidian); color:var(--mist); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } /* Safari <16 has no overflow:clip. Fall back to hidden on only — the scroll container it creates there is the viewport itself, so sticky survives. */ @supports not (overflow-x: clip){ html{overflow-x:hidden} body{overflow-x:visible} } img,picture,svg,video{max-width:100%;display:block} img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5{margin:0;color:var(--frost);font-family:'Sora',system-ui,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.03em} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} ::selection{background:var(--signal-orange);color:#0A0A0E} h1{font-size:clamp(2.35rem,5vw,4.15rem);font-weight:800} h2{font-size:clamp(1.95rem,4vw,3.35rem);font-weight:800} h3{font-size:clamp(1.25rem,2vw,1.6rem)} h4{font-size:1.06rem;letter-spacing:-.01em} /* accessible focus - never removed */ :focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:4px} :focus:not(:focus-visible){outline:none} .skip-link{ position:absolute;left:-9999px;top:0;z-index:var(--z-toast); background:var(--signal-orange);color:#0A0A0E;padding:14px 22px; font-weight:700;border-radius:0 0 var(--r-sm) 0; } .skip-link:focus{left:0} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ------------------------------------------------------------- utilities */ .wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gut)} .section{position:relative;padding-block:var(--sec-y)} .section--alt{background:var(--carbon)} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--signal-orange);margin-bottom:18px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--signal-orange);opacity:.7} .lede{font-size:clamp(1.02rem,1.5vw,1.19rem);color:var(--mist);max-width:62ch} .mono{font-family:'JetBrains Mono',ui-monospace,monospace} .txt-grad{ background:var(--grad-text);-webkit-background-clip:text;background-clip:text; color:transparent; } .orange{color:var(--signal-orange)} /* section heading block */ .sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)} .sec-head--center{margin-inline:auto;text-align:center} .sec-head--center .eyebrow::before{display:none} .sec-head p{margin-top:18px} /* ambient light orbs */ .orb{ position:absolute;border-radius:50%;filter:blur(120px); opacity:.22;pointer-events:none;z-index:0; } .orb--heat{background:radial-gradient(circle,#F5811F,transparent 70%)} .orb--cool{background:radial-gradient(circle,#2334E0,transparent 70%)} /* hairline divider that is never a flat line */ .rule{ height:1px;border:0;margin:0; background:linear-gradient(90deg,transparent,var(--steel-line) 18%,var(--steel-line) 82%,transparent); } /* --------------------------------------------------------------- buttons */ .btn{ --btn-bg:var(--grad-heat); position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:15px 30px; font-family:'Sora',sans-serif;font-size:.94rem;font-weight:700;letter-spacing:-.01em; color:#0A0A0E;background:var(--btn-bg);white-space:nowrap; border:0;border-radius:var(--r-pill);cursor:pointer;overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(245,129,31,.22); transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),filter var(--t-fast) linear; will-change:transform; } .btn svg{width:19px;height:19px;flex:none} .btn::after{ /* sheen sweep */ content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); transform:translateX(-120%);transition:transform 620ms var(--ease-out); } .btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.4),0 16px 40px rgba(245,129,31,.34);filter:brightness(1.05)} .btn:hover::after{transform:translateX(120%)} .btn:active{transform:translateY(1px) scale(.99)} .btn--ghost{ --btn-bg:var(--glass-fill); color:var(--frost); border:1px solid var(--glass-stroke); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:var(--shadow-card); } .btn--ghost:hover{ border-color:rgba(245,129,31,.5); background:rgba(245,129,31,.09); box-shadow:var(--glow-orange); } .btn--wa{--btn-bg:linear-gradient(135deg,#25D366,#1FB855);color:#04240F; box-shadow:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(37,211,102,.22)} .btn--wa:hover{box-shadow:0 4px 12px rgba(0,0,0,.4),0 16px 40px rgba(37,211,102,.32)} .btn--sm{min-height:44px;padding:11px 22px;font-size:.86rem} .btn--lg{min-height:60px;padding:19px 38px;font-size:1.02rem} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* text link with wiping underline */ .link-u{ position:relative;display:inline-flex;align-items:center;gap:8px; color:var(--frost);font-weight:600;padding-bottom:3px; } .link-u::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px; background:var(--signal-orange);transform:scaleX(0);transform-origin:right; transition:transform var(--t-mid) var(--ease-out); } .link-u:hover::after{transform:scaleX(1);transform-origin:left} .link-u svg{width:16px;height:16px;transition:transform var(--t-mid) var(--ease-out)} .link-u:hover svg{transform:translateX(4px)} /* --------------------------------------------------------------- top bar */ .topbar{ position:relative;z-index:var(--z-sticky); background:rgba(10,11,17,.92); border-bottom:1px solid var(--steel-line); font-size:.8rem; transition:transform var(--t-slow) var(--ease-out); } .topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding-block:6px} .topbar__grp{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .topbar a,.topbar span.ti{display:inline-flex;align-items:center;gap:8px;color:var(--mist)} .topbar a{transition:color var(--t-fast) linear} .topbar a:hover{color:var(--signal-orange)} .topbar svg{width:15px;height:15px;color:var(--signal-orange);flex:none} .topbar .hours-pill{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap; padding:5px 13px;border-radius:var(--r-pill); background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.28); color:#7BE8A6;font-size:.75rem;font-weight:600; } /* below tablet the top bar keeps only the two things that convert: call + hours */ @media(max-width:860px){ .topbar__grp a[href^="mailto"], .topbar__grp a[href*="maps.app.goo.gl"]{display:none} .topbar__in{min-height:40px} .topbar .socials{display:none} } @media(max-width:420px){ .topbar{font-size:.75rem} .topbar .hours-pill{padding:4px 10px;font-size:.7rem} } .dot-live{width:7px;height:7px;border-radius:50%;background:#25D366;flex:none} .socials{display:flex;align-items:center;gap:8px} .socials a{ width:32px;height:32px;display:grid;place-items:center;border-radius:50%; background:var(--glass-fill);border:1px solid var(--glass-stroke); transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast) linear,background var(--t-fast) linear; } .socials a:hover{transform:translateY(-2px);border-color:rgba(245,129,31,.55);background:rgba(245,129,31,.12)} .socials svg{width:15px;height:15px;color:var(--mist)} .socials a:hover svg{color:var(--signal-orange)} /* ---------------------------------------------------------------- header */ /* Sticky, compacting header. The top bar above it scrolls away naturally; the header then pins to y=0. */ .header{ position:sticky;top:0;z-index:var(--z-header); transition:background var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-slow) var(--ease-out), padding var(--t-slow) var(--ease-out), -webkit-backdrop-filter var(--t-slow) var(--ease-out), backdrop-filter var(--t-slow) var(--ease-out); border-bottom:1px solid transparent; padding-block:16px; will-change:padding; } .header.is-stuck{ background:rgba(8,9,14,.78); -webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%); border-bottom-color:var(--glass-stroke); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.38), 0 22px 48px rgba(0,0,0,.36); padding-block:7px; } /* a hairline of brand colour appears under the bar once it compacts */ .header::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(245,129,31,.55),rgba(91,132,255,.4),transparent); opacity:0;transition:opacity var(--t-slow) var(--ease-out); } .header.is-stuck::after{opacity:1} .header__in{display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand img{width:auto;height:46px;transition:height var(--t-slow) var(--ease-out)} .header.is-stuck .brand img{height:31px} /* the descriptor beside the logo folds away as the bar compacts */ .brand__sub{transition:opacity var(--t-mid) var(--ease-out),max-width var(--t-slow) var(--ease-out)} .header.is-stuck .brand__sub{opacity:0;max-width:0;overflow:hidden} .brand__sub{ display:none;font-family:'JetBrains Mono',monospace;font-size:.6rem; letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.4; /* nowrap is required: when this collapses to max-width:0 the text would otherwise wrap one word per line and grow the header instead of shrinking it */ white-space:nowrap; } @media(min-width:1120px){.brand__sub{display:block;max-width:120px}} .nav{display:none;align-items:center;gap:4px} @media(min-width:1024px){.nav{display:flex}} .nav__link{ position:relative;padding:10px 15px;border-radius:var(--r-sm); font-size:.9rem;font-weight:600;color:var(--mist); transition:color var(--t-fast) linear; } .nav__link::after{ content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1.5px; background:var(--signal-orange);transform:scaleX(0);transform-origin:right; transition:transform var(--t-mid) var(--ease-out); } .nav__link:hover,.nav__link[aria-current="page"]{color:var(--frost)} .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} /* mega dropdown */ .nav__item{position:relative} .nav__toggle{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .nav__toggle svg{width:13px;height:13px;transition:transform var(--t-mid) var(--ease-out)} .nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .mega{ position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0; width:min(660px,88vw);padding:14px; background:rgba(14,16,24,.86); -webkit-backdrop-filter:blur(24px) saturate(165%);backdrop-filter:blur(24px) saturate(165%); border:1px solid var(--glass-stroke);border-radius:var(--r-lg); box-shadow:var(--shadow-deep); display:grid;grid-template-columns:1fr 1fr;gap:6px; opacity:0;visibility:hidden;transform:translateY(-10px); /* visibility must flip instantly on open and only AFTER the fade on close, otherwise the panel animates while still invisible and pops in at the end */ transition:opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid); z-index:var(--z-dropdown); } .nav__item.is-open .mega{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility 0s linear 0s; } .mega__link{display:flex;gap:13px;padding:13px;border-radius:var(--r-md);transition:background var(--t-fast) linear} .mega__link:hover{background:rgba(245,129,31,.09)} .mega__ico{ width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px; background:var(--grad-glass);border:1px solid var(--glass-stroke);color:var(--signal-orange); } .mega__ico svg{width:20px;height:20px} .mega__t{display:block;color:var(--frost);font-weight:650;font-size:.92rem;line-height:1.35} .mega__d{display:block;font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:2px} /* burger */ .burger{ display:grid;place-items:center;width:46px;height:46px;flex:none; background:var(--glass-fill);border:1px solid var(--glass-stroke); border-radius:13px;cursor:pointer; } @media(min-width:1024px){.burger{display:none}} .burger span{display:block;width:19px;height:2px;background:var(--frost);border-radius:2px;transition:transform var(--t-mid) var(--ease-out),opacity var(--t-fast) linear} .burger span+span{margin-top:5px} /* the header CTA and the burger will not both fit on a small phone — the sticky bottom bar already carries Call, so drop the header button below 560px */ @media(max-width:560px){ .header__in>.btn-row>.btn{display:none} .brand img{height:38px} } .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile drawer */ .drawer{ position:fixed;inset:0;z-index:var(--z-overlay); contain:paint; background:rgba(7,8,12,.97); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px); padding:26px var(--gut) 40px;overflow-y:auto; transform:translateX(100%);visibility:hidden; /* visibility flips instantly on open, and only after the slide-out on close */ transition:transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow); } .drawer.is-open{ transform:translateX(0);visibility:visible; transition:transform var(--t-slow) var(--ease-out), visibility 0s linear 0s; } .drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px} .drawer__close{width:46px;height:46px;display:grid;place-items:center;border-radius:13px; background:var(--glass-fill);border:1px solid var(--glass-stroke);cursor:pointer} .drawer__close svg{width:19px;height:19px} .drawer__nav li{ border-bottom:1px solid var(--steel-line); opacity:0;transform:translateX(26px); } .drawer.is-open .drawer__nav li{animation:drawerIn .5s var(--ease-out) forwards} .drawer__nav a{display:flex;align-items:center;justify-content:space-between; padding:17px 2px;font-family:'Sora',sans-serif;font-size:1.16rem;font-weight:650;color:var(--frost)} .drawer__nav a span{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted)} .drawer__nav a:hover{color:var(--signal-orange)} .drawer__cta{margin-top:30px;display:grid;gap:12px} .drawer__meta{margin-top:30px;padding-top:22px;border-top:1px solid var(--steel-line);font-size:.86rem} .drawer__meta a{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--mist)} .drawer__meta svg{width:16px;height:16px;color:var(--signal-orange)} /* scroll progress */ .progress{ position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0); background:var(--grad-heat);z-index:var(--z-toast);pointer-events:none; } /* ------------------------------------------------------------------ hero */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(620px,92vh,940px); display:flex;align-items:center; padding-block:clamp(60px,9vw,110px); } .hero__layer{position:absolute;inset:-8%;z-index:0;will-change:transform} .hero__bg{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:.42; } .hero__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(100deg,var(--obsidian) 4%,rgba(7,8,12,.86) 42%,rgba(7,8,12,.42) 74%,rgba(7,8,12,.72) 100%), linear-gradient(0deg,var(--obsidian) 2%,transparent 46%); } .hero__grid{ position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none; background-image:linear-gradient(var(--steel-line) 1px,transparent 1px), linear-gradient(90deg,var(--steel-line) 1px,transparent 1px); background-size:76px 76px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000 10%,transparent 72%); mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000 10%,transparent 72%); } .hero__in{position:relative;z-index:3;width:100%} .hero__grid-l{display:grid;gap:clamp(40px,5vw,64px);align-items:center} @media(min-width:1024px){.hero__grid-l{grid-template-columns:1.06fr .94fr}} .hero h1{margin-bottom:22px} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln>span{display:block} .hero__sub{font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:53ch;margin-bottom:32px} .hero__cta{margin-bottom:38px} .hero__chips{display:flex;flex-wrap:wrap;gap:12px} .chip{ display:inline-flex;align-items:center;gap:11px; padding:12px 19px;border-radius:var(--r-pill); background:var(--glass-fill);border:1px solid var(--glass-stroke); -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--shadow-card); font-size:.85rem;font-weight:600;color:var(--frost); } .chip b{font-family:'JetBrains Mono',monospace;color:var(--signal-orange);font-weight:600} .chip svg{width:16px;height:16px;color:var(--signal-orange);flex:none} /* hero visual - 3D tilt stage */ .hero__stage{position:relative;perspective:1200px} /* the card is the transform stage only — clipping happens on the inner media wrapper so the floating 3D badges can hang outside the frame */ .hero__card{ position:relative;transform-style:preserve-3d; will-change:transform; transition:transform 500ms var(--ease-out); } .hero__media{ position:relative;border-radius:var(--r-xl);overflow:hidden; border:1px solid var(--glass-stroke); box-shadow:var(--shadow-deep); } .hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover} .hero__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(160deg,rgba(91,132,255,.16),transparent 46%,rgba(7,8,12,.62)); } .hero__badge{ position:absolute;transform:translateZ(60px); padding:14px 20px;border-radius:var(--r-md); background:rgba(14,16,24,.72); -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%); border:1px solid var(--glass-stroke);box-shadow:var(--shadow-lift); z-index:4; } .hero__badge--price{right:-6px;top:34px} .hero__badge--rating{left:-10px;bottom:40px} .hero__badge .k{display:block;font-family:'JetBrains Mono',monospace;font-size:1.42rem;font-weight:600;color:var(--signal-orange);line-height:1.15} .hero__badge .v{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:3px} @media(max-width:600px){ .hero__badge--price{right:8px;top:12px} .hero__badge--rating{left:8px;bottom:12px} .hero__badge{padding:10px 15px} .hero__badge .k{font-size:1.15rem} } .scroll-cue{ position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:3; display:none;flex-direction:column;align-items:center;gap:8px; font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--muted); } @media(min-width:1024px){.scroll-cue{display:flex}} .scroll-cue__bar{width:1px;height:44px;background:linear-gradient(var(--signal-orange),transparent);overflow:hidden} /* --------------------------------------------------------- trust strip */ .trust{ position:relative;z-index:2;margin-top:-42px; } .trust__in{ display:grid;gap:2px;grid-template-columns:repeat(2,1fr); background:rgba(14,16,24,.66); -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%); border:1px solid var(--glass-stroke);border-radius:var(--r-lg); box-shadow:var(--shadow-deep);overflow:hidden; } @media(min-width:860px){.trust__in{grid-template-columns:repeat(4,1fr)}} .trust__cell{ padding:26px 22px;text-align:center;position:relative; border-right:1px solid var(--steel-line);border-bottom:1px solid var(--steel-line); } @media(min-width:860px){.trust__cell{border-bottom:0} .trust__cell:last-child{border-right:0}} .trust__k{ display:flex;align-items:center;justify-content:center;gap:7px; font-family:'JetBrains Mono',monospace;font-size:1.85rem;font-weight:600; color:var(--frost);line-height:1.1; } .trust__k svg{width:20px;height:20px;color:var(--amber-gold)} .trust__v{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px} /* ------------------------------------------------------ services bento */ .bento{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:720px){.bento{grid-template-columns:repeat(2,1fr)}} @media(min-width:1040px){ .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(214px,auto)} .bento__x2{grid-column:span 3} .bento__x3{grid-column:span 2} .bento__tall{grid-row:span 2} } .scard{ position:relative;isolation:isolate;overflow:hidden;cursor:pointer; display:flex;flex-direction:column;justify-content:flex-end;gap:11px; padding:26px;min-height:214px; background:var(--graphite); border:1px solid var(--steel-line);border-radius:var(--r-lg); box-shadow:var(--shadow-card); transform-style:preserve-3d; transition:transform 420ms var(--ease-out),box-shadow 420ms var(--ease-out),border-color var(--t-mid) linear; } .scard:hover{border-color:rgba(245,129,31,.34);box-shadow:var(--shadow-lift)} .scard__img{position:absolute;inset:0;z-index:-2;opacity:.3;transition:opacity 500ms var(--ease-out),transform 700ms var(--ease-out)} .scard__img img{width:100%;height:100%;object-fit:cover} .scard:hover .scard__img{opacity:.44;transform:scale(1.06)} .scard::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(7,8,12,.35) 0%,rgba(7,8,12,.86) 62%,rgba(7,8,12,.96) 100%); } .scard__ico{ width:48px;height:48px;display:grid;place-items:center;border-radius:14px; background:var(--grad-glass);border:1px solid var(--glass-stroke); color:var(--signal-orange);margin-bottom:auto; transform:translateZ(34px); box-shadow:0 6px 18px rgba(0,0,0,.4); } .scard__ico svg{width:23px;height:23px} .scard h3{transform:translateZ(22px)} .scard p{font-size:.9rem;color:var(--mist);margin:0;transform:translateZ(14px)} .scard__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;transform:translateZ(18px)} .scard__price{font-family:'JetBrains Mono',monospace;font-size:.92rem;color:var(--signal-orange);font-weight:600} .scard__price small{color:var(--muted);font-size:.72rem;font-weight:400;display:block;letter-spacing:.06em} .scard__go{ width:38px;height:38px;display:grid;place-items:center;border-radius:50%;flex:none; background:var(--glass-fill);border:1px solid var(--glass-stroke);color:var(--frost); transition:background var(--t-mid) linear,transform var(--t-mid) var(--ease-out),color var(--t-mid) linear; } .scard__go svg{width:16px;height:16px} .scard:hover .scard__go{background:var(--signal-orange);color:#0A0A0E;transform:translateX(3px)} .scard__link{position:absolute;inset:0;z-index:5} /* ------------------------------------------------------------ why / split */ .split{display:grid;gap:clamp(36px,5vw,72px);align-items:start} @media(min-width:960px){.split{grid-template-columns:.92fr 1.08fr}} .split__media{position:relative} @media(min-width:960px){ .split__media{position:sticky;top:120px} .split--bleed .split__media{margin-left:calc(var(--gut) * -1)} } .frame{ position:relative;border-radius:var(--r-xl);overflow:hidden; border:1px solid var(--glass-stroke);box-shadow:var(--shadow-deep); } .frame img{width:100%;object-fit:cover} .frame::after{ content:"";position:absolute;inset:0; background:linear-gradient(200deg,rgba(20,30,213,.14),transparent 52%,rgba(7,8,12,.5)); } .frame--bevel{clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%)} .steps{display:grid;gap:2px} .step{ position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px; padding:24px 24px 24px 22px;border-radius:var(--r-md); transition:background var(--t-mid) linear; } .step:hover{background:var(--glass-fill)} .step__n{ font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:600; color:var(--signal-orange);padding-top:5px;letter-spacing:.08em; } .step h3{font-size:1.14rem;margin-bottom:8px} .step p{font-size:.93rem;margin:0} .step+.step{border-top:1px solid var(--steel-line)} /* ------------------------------------------------------------- process */ .proc{position:relative} .proc__line{position:absolute;left:0;right:0;top:38px;height:2px;display:none} @media(min-width:900px){.proc__line{display:block}} .proc__line svg{width:100%;height:2px;overflow:visible} .proc__line path{stroke:var(--signal-orange);stroke-width:2;fill:none;opacity:.5; stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .proc__grid{display:grid;gap:34px;position:relative;z-index:2} @media(min-width:640px){.proc__grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.proc__grid{grid-template-columns:repeat(4,1fr)}} .proc__item{text-align:left} .proc__dot{ width:76px;height:76px;display:grid;place-items:center;border-radius:50%;margin-bottom:22px; background:var(--carbon);border:1px solid var(--glass-stroke); font-family:'JetBrains Mono',monospace;font-size:1.02rem;font-weight:600;color:var(--signal-orange); box-shadow:var(--shadow-card),0 0 0 8px rgba(7,8,12,1); position:relative; } .proc__item h3{font-size:1.14rem;margin-bottom:10px} .proc__item p{font-size:.92rem;margin:0} /* ------------------------------------------------------------- gallery */ .gal{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media(min-width:900px){.gal{grid-template-columns:repeat(12,1fr);grid-auto-rows:168px}} .gal__i{ position:relative;overflow:hidden;border-radius:var(--r-lg);cursor:pointer; border:1px solid var(--steel-line);box-shadow:var(--shadow-card); background:var(--graphite); } @media(max-width:899px){.gal__i{aspect-ratio:4/3}} @media(min-width:900px){ .gal__i--a{grid-column:span 5;grid-row:span 2} .gal__i--b{grid-column:span 4;grid-row:span 1} .gal__i--c{grid-column:span 3;grid-row:span 2} .gal__i--d{grid-column:span 4;grid-row:span 1} .gal__i--e{grid-column:span 4;grid-row:span 2} .gal__i--f{grid-column:span 5;grid-row:span 2} .gal__i--g{grid-column:span 3;grid-row:span 2} } .gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out),filter 500ms linear} .gal__i:hover img{transform:scale(1.07);filter:brightness(1.08)} .gal__scrim{ position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px; background:linear-gradient(0deg,rgba(7,8,12,.9) 0%,rgba(7,8,12,.25) 46%,transparent 72%); opacity:0;transition:opacity var(--t-mid) linear; } .gal__i:hover .gal__scrim,.gal__i:focus-within .gal__scrim{opacity:1} .gal__tag{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.1em; text-transform:uppercase;color:var(--frost)} .gal__tag b{display:block;color:var(--signal-orange);font-weight:600;margin-top:3px} .gal__btn{position:absolute;inset:0;width:100%;background:none;border:0;cursor:pointer} /* lightbox */ .lb{ position:fixed;inset:0;z-index:var(--z-modal);display:none; place-items:center;padding:24px; background:rgba(4,5,9,.94); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .lb.is-open{display:grid} .lb img{max-width:min(1100px,94vw);max-height:82vh;border-radius:var(--r-lg); box-shadow:var(--shadow-deep);object-fit:contain} .lb__cap{margin-top:16px;text-align:center;font-size:.88rem;color:var(--mist)} .lb__x,.lb__p,.lb__n{ position:absolute;width:50px;height:50px;display:grid;place-items:center;border-radius:50%; background:var(--glass-fill);border:1px solid var(--glass-stroke);cursor:pointer;color:var(--frost); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); transition:background var(--t-fast) linear,transform var(--t-fast) var(--ease-out); } .lb__x:hover,.lb__p:hover,.lb__n:hover{background:rgba(245,129,31,.2);transform:scale(1.06)} .lb__x{top:22px;right:22px} .lb__p{left:18px;top:50%;translate:0 -50%} .lb__n{right:18px;top:50%;translate:0 -50%} .lb svg{width:20px;height:20px} /* filter pills */ .pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px} .pill{ display:inline-flex;align-items:center;gap:8px;min-height:44px; padding:10px 19px;border-radius:var(--r-pill);cursor:pointer; background:var(--glass-fill);border:1px solid var(--glass-stroke); color:var(--mist);font-size:.86rem;font-weight:600; transition:background var(--t-mid) linear,color var(--t-mid) linear,border-color var(--t-mid) linear,transform var(--t-fast) var(--ease-out); } .pill:hover{color:var(--frost);border-color:rgba(245,129,31,.4)} .pill[aria-selected="true"],.pill.is-on{ background:var(--grad-heat);color:#0A0A0E;border-color:transparent; box-shadow:0 6px 18px rgba(245,129,31,.26); } .pill__c{font-family:'JetBrains Mono',monospace;font-size:.72rem;opacity:.7} /* --------------------------------------------------------------- promo */ .promo{ position:relative;overflow:hidden; border-radius:var(--r-xl);padding:clamp(30px,4.4vw,52px); background:linear-gradient(120deg,rgba(20,30,213,.2),rgba(245,129,31,.14)),var(--graphite); border:1px solid rgba(245,129,31,.24); box-shadow:var(--shadow-deep); display:grid;gap:30px;align-items:center; } @media(min-width:860px){.promo{grid-template-columns:1fr auto}} .promo::before,.promo::after{ content:"";position:absolute;width:34px;height:34px;border-radius:50%; background:var(--obsidian);top:50%;translate:0 -50%; } .promo::before{left:-17px} .promo::after{right:-17px} .promo h2{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:10px} .promo__days{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .promo__day{ display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:var(--r-md); background:rgba(7,8,12,.5);border:1px solid var(--glass-stroke); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .promo__day b{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.13em; text-transform:uppercase;color:var(--signal-orange);font-weight:600} .promo__day span{font-size:.94rem;color:var(--frost);font-weight:600} .promo__amt{ font-family:'JetBrains Mono',monospace;font-weight:600;line-height:.9;text-align:center; } .promo__amt b{display:block;font-size:clamp(3.4rem,7vw,5.6rem);color:var(--signal-orange)} .promo__amt span{display:block;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);margin-top:12px} /* -------------------------------------------------------------- reviews */ .rev-head{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;margin-bottom:28px} .rev-score{display:flex;align-items:center;gap:16px;padding:16px 22px;border-radius:var(--r-lg); background:var(--glass-fill);border:1px solid var(--glass-stroke); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-card)} .rev-score__n{font-family:'JetBrains Mono',monospace;font-size:2.1rem;font-weight:600;color:var(--frost);line-height:1} .rev-score__m{font-size:.79rem;color:var(--muted);letter-spacing:.06em} .stars{display:inline-flex;gap:2px} .stars svg{width:16px;height:16px;color:var(--amber-gold)} .stars--dim svg{color:var(--muted);opacity:.4} .rev-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:700px){.rev-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1060px){.rev-grid{grid-template-columns:repeat(3,1fr)}} .rcard{ display:flex;flex-direction:column;gap:14px;padding:26px; background:rgba(20,23,31,.66); -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-stroke);border-radius:var(--r-lg); box-shadow:var(--shadow-card); transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid) linear; } .rcard:hover{transform:translateY(-4px);border-color:rgba(245,129,31,.28);box-shadow:var(--shadow-lift)} .rcard__top{display:flex;align-items:center;gap:13px} .rcard__av{ width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%; background:var(--grad-tint);color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:.94rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); } .rcard__who{flex:1;min-width:0} .rcard__name{display:block;color:var(--frost);font-weight:650;font-size:.95rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rcard__date{display:block;font-size:.78rem;color:var(--muted)} .rcard__g{width:20px;height:20px;flex:none} .rcard__txt{font-size:.93rem;color:var(--mist);margin:0} .rcard__txt.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .rcard__more{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer; color:var(--signal-orange);font-size:.84rem;font-weight:600} .rcard__more:hover{text-decoration:underline} .rcard__tag{ align-self:flex-start;margin-top:auto;padding:5px 12px;border-radius:var(--r-pill); background:rgba(245,129,31,.11);border:1px solid rgba(245,129,31,.24); font-size:.73rem;font-weight:600;color:var(--ember);letter-spacing:.04em; } .rev-empty{ grid-column:1/-1;text-align:center;padding:clamp(40px,6vw,72px) 26px; background:var(--glass-fill);border:1px dashed var(--glass-stroke);border-radius:var(--r-lg); } .rev-empty svg{width:44px;height:44px;color:var(--muted);margin:0 auto 18px} .rev-empty h3{margin-bottom:10px} .rev-empty p{max-width:46ch;margin-inline:auto;font-size:.94rem} /* ---------------------------------------------------------------- forms */ .form-wrap{display:grid;gap:clamp(28px,4vw,52px)} @media(min-width:980px){.form-wrap{grid-template-columns:1.05fr .95fr;align-items:start}} .fcard{ padding:clamp(26px,3.4vw,42px); background:rgba(20,23,31,.6); -webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%); border:1px solid var(--glass-stroke);border-radius:var(--r-xl); box-shadow:var(--shadow-deep); } .fgrid{display:grid;gap:16px} @media(min-width:620px){.fgrid--2{grid-template-columns:1fr 1fr}} .field{position:relative;display:flex;flex-direction:column} .field label{ font-size:.79rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);margin-bottom:8px; } .field label .req{color:var(--signal-orange)} .field input,.field select,.field textarea{ width:100%;min-height:52px;padding:14px 16px; background:rgba(7,8,12,.6);border:1px solid var(--steel-line);border-radius:var(--r-md); color:var(--frost);font-size:.96rem; transition:border-color var(--t-mid) linear,box-shadow var(--t-mid) linear,background var(--t-mid) linear; } .field textarea{min-height:128px;resize:vertical;line-height:1.6} .field select{cursor:pointer;appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8393' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:17px;padding-right:44px} .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:rgba(245,129,31,.6); background:rgba(7,8,12,.85); box-shadow:-3px 0 0 0 var(--signal-orange),0 0 0 3px rgba(245,129,31,.12); } .field.has-err input,.field.has-err select,.field.has-err textarea{ border-color:#FF6B6B;box-shadow:-3px 0 0 0 #FF6B6B; } .field__err{ display:none;align-items:center;gap:6px; margin-top:7px;font-size:.8rem;color:#FF8B8B;font-weight:500; } .field__err svg{width:14px;height:14px;flex:none} .field.has-err .field__err{display:flex} .check{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--mist);cursor:pointer} .check input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--signal-orange);cursor:pointer} .check a{color:var(--signal-orange);text-decoration:underline} .hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0} .form-note{ display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:14px 16px; border-radius:var(--r-md);background:rgba(91,132,255,.08);border:1px solid rgba(91,132,255,.2); font-size:.84rem;color:var(--mist); } .form-note svg{width:17px;height:17px;color:var(--electric-blue);flex:none;margin-top:2px} .form-status{margin-top:16px;font-size:.9rem;font-weight:600;display:none} .form-status.is-on{display:block} .form-status[data-tone="err"]{color:#FF8B8B} .form-status[data-tone="ok"]{color:#7BE8A6} .btn.is-loading{pointer-events:none;opacity:.75} .btn.is-loading .btn__spin{display:block} .btn__spin{display:none;width:17px;height:17px;border:2px solid rgba(10,10,14,.3); border-top-color:#0A0A0E;border-radius:50%} /* ------------------------------------------------------------ info panel */ .info{display:grid;gap:14px} .info__row{ display:flex;gap:16px;padding:20px;border-radius:var(--r-lg); background:var(--glass-fill);border:1px solid var(--steel-line); transition:border-color var(--t-mid) linear,background var(--t-mid) linear; } .info__row:hover{border-color:rgba(245,129,31,.3);background:rgba(245,129,31,.05)} .info__ico{ width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px; background:var(--grad-glass);border:1px solid var(--glass-stroke);color:var(--signal-orange); } .info__ico svg{width:20px;height:20px} .info__k{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .info__v{display:block;color:var(--frost);font-weight:650;font-size:1rem;line-height:1.5} .info__v small{display:block;font-weight:400;color:var(--mist);font-size:.86rem;margin-top:3px} .map-frame{ border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--glass-stroke); box-shadow:var(--shadow-card);background:var(--graphite); } .map-frame iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(.35) contrast(1.08) brightness(.85)} /* ------------------------------------------------------------- CTA band */ .cta-band{ position:relative;overflow:hidden;isolation:isolate; padding-block:clamp(64px,8vw,110px); background:var(--carbon); clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%); margin-top:calc(-3.2vw + 2px); text-align:center; } .cta-band h2{margin-bottom:18px} .cta-band .lede{margin-inline:auto;margin-bottom:32px} .cta-band .btn-row{justify-content:center} /* ---------------------------------------------------------------- FAQ */ .faq{display:grid;gap:12px;max-width:900px} .faq__i{ background:var(--graphite);border:1px solid var(--steel-line);border-radius:var(--r-lg); overflow:hidden;transition:border-color var(--t-mid) linear,box-shadow var(--t-mid) linear; } .faq__i.is-open{border-color:rgba(245,129,31,.3);box-shadow:var(--shadow-card)} .faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 24px;background:none;border:0;cursor:pointer;text-align:left; font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:650;color:var(--frost); } .faq__q:hover{color:var(--signal-orange)} .faq__pm{ width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%; background:var(--glass-fill);border:1px solid var(--glass-stroke);color:var(--signal-orange); transition:transform var(--t-mid) var(--ease-out),background var(--t-mid) linear; } .faq__pm svg{width:15px;height:15px} .faq__i.is-open .faq__pm{transform:rotate(45deg);background:rgba(245,129,31,.16)} .faq__a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease-io)} .faq__a>div{padding:0 24px 24px;font-size:.95rem;color:var(--mist)} /* --------------------------------------------------------------- tables */ .tbl-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--steel-line); background:var(--graphite);box-shadow:var(--shadow-card)} table.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:.93rem} table.tbl th,table.tbl td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--steel-line)} table.tbl th{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);font-weight:500;background:rgba(7,8,12,.4)} table.tbl td{color:var(--mist)} table.tbl td:first-child{color:var(--frost);font-weight:600} table.tbl tr:last-child td{border-bottom:0} table.tbl tbody tr{transition:background var(--t-fast) linear} table.tbl tbody tr:hover{background:rgba(245,129,31,.05)} /* ------------------------------------------------------------- includes */ .inc{display:grid;gap:12px} @media(min-width:620px){.inc{grid-template-columns:1fr 1fr}} .inc li{display:flex;gap:13px;align-items:flex-start;padding:15px 18px; background:var(--glass-fill);border:1px solid var(--steel-line);border-radius:var(--r-md); font-size:.93rem;color:var(--mist)} .inc svg{width:19px;height:19px;color:var(--signal-orange);flex:none;margin-top:2px} /* ------------------------------------------------------------ breadcrumb */ .crumb{padding-top:26px;font-size:.83rem} .crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--muted)} .crumb a{color:var(--mist);transition:color var(--t-fast) linear} .crumb a:hover{color:var(--signal-orange)} .crumb svg{width:13px;height:13px;opacity:.5} .crumb [aria-current]{color:var(--signal-orange)} /* --------------------------------------------------------------- pagehead */ .phead{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,86px) clamp(38px,5vw,64px)} .phead__bg{position:absolute;inset:0;z-index:0;opacity:.24} .phead__bg img{width:100%;height:100%;object-fit:cover} .phead__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(7,8,12,.7),var(--obsidian) 88%)} .phead__in{position:relative;z-index:2} .phead h1{margin-bottom:20px;max-width:19ch} .phead .lede{max-width:60ch} .phead__meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* --------------------------------------------------------------- footer */ .footer{position:relative;background:var(--carbon);border-top:1px solid var(--steel-line);overflow:hidden} .footer__in{display:grid;gap:40px;padding-block:clamp(52px,6vw,80px)} @media(min-width:760px){.footer__in{grid-template-columns:1.5fr 1fr 1fr}} @media(min-width:1060px){.footer__in{grid-template-columns:1.8fr 1fr 1fr 1.3fr}} .footer__brand img{height:52px;width:auto;margin-bottom:18px} .footer__brand p{font-size:.9rem;max-width:38ch} /* footer column labels — h3 so they never skip a heading level after a section h2 */ .footer h4,.footer .foot-h{ font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px; line-height:1.4; } .footer__nav li+li{margin-top:11px} .footer__nav a{font-size:.92rem;color:var(--mist);transition:color var(--t-fast) linear,padding-left var(--t-fast) var(--ease-out)} .footer__nav a:hover{color:var(--signal-orange);padding-left:5px} .footer__nap{display:grid;gap:14px;font-size:.9rem} .footer__nap a,.footer__nap div{display:flex;gap:11px;align-items:flex-start;color:var(--mist)} .footer__nap svg{width:17px;height:17px;color:var(--signal-orange);flex:none;margin-top:3px} .footer__nap a:hover{color:var(--frost)} .footer .socials{margin-top:22px} .credit{ border-top:1px solid var(--steel-line);padding-block:22px; display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center; text-align:center;font-size:.83rem;color:var(--muted);margin:0; } .credit a{position:relative;color:var(--signal-orange);font-weight:600} .credit a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform var(--t-mid) var(--ease-out)} .credit a:hover::after{transform:scaleX(1);transform-origin:left} .credit .sep{opacity:.35} /* ------------------------------------------------------- mobile sticky */ .mbar{ position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky); display:grid;grid-template-columns:1fr 1fr;gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(9,10,16,.82); -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%); border-top:1px solid var(--glass-stroke); box-shadow:0 -8px 30px rgba(0,0,0,.5); transform:translateY(110%); transition:transform 460ms var(--ease-spring); } .mbar.is-up{transform:translateY(0)} @media(min-width:768px){.mbar{display:none}} @media(max-width:767px){body{padding-bottom:82px}} .mbar .btn{width:100%;min-height:50px;padding:13px 16px;font-size:.9rem} .mbar__pulse{position:relative} .mbar__pulse::before{ content:"";position:absolute;inset:0;border-radius:var(--r-pill); border:2px solid var(--signal-orange);opacity:0; } /* desktop whatsapp bubble */ .wa-fab{ position:fixed;right:22px;bottom:22px;z-index:var(--z-sticky); display:none;align-items:center;gap:0; width:58px;height:58px;border-radius:var(--r-pill); background:linear-gradient(135deg,#25D366,#1FB855); box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 34px rgba(37,211,102,.28); overflow:hidden;padding:0 17px;justify-content:flex-start; transition:width 380ms var(--ease-out),transform var(--t-mid) var(--ease-out); } @media(min-width:768px){.wa-fab{display:flex}} /* dark glyph on green: 8.37:1. White would be 2.61:1 and fails AA for the label. */ .wa-fab svg{width:24px;height:24px;color:#04240F;flex:none} .wa-fab span{ margin-left:12px;white-space:nowrap;color:#04240F;font-weight:700;font-size:.9rem; opacity:0;transition:opacity var(--t-mid) linear; } .wa-fab:hover{width:196px;transform:translateY(-3px)} .wa-fab:hover span{opacity:1} /* ------------------------------------------------------------ area tags */ .areas{display:flex;flex-wrap:wrap;gap:9px} .area{ padding:8px 16px;border-radius:var(--r-pill);font-size:.84rem;color:var(--mist); background:var(--glass-fill);border:1px solid var(--steel-line); transition:border-color var(--t-fast) linear,color var(--t-fast) linear; } .area:hover{border-color:rgba(245,129,31,.35);color:var(--frost)} /* ------------------------------------------------------------ utility pg */ .mini{min-height:64vh;display:grid;place-items:center;text-align:center;padding-block:clamp(70px,10vw,130px)} .mini__in{max-width:620px} .mini__code{ font-family:'JetBrains Mono',monospace;font-size:clamp(4.4rem,15vw,9rem);font-weight:600; line-height:.9;margin-bottom:20px; background:var(--grad-heat);-webkit-background-clip:text;background-clip:text;color:transparent; } .mini__ok{ width:88px;height:88px;margin:0 auto 28px;display:grid;place-items:center;border-radius:50%; background:rgba(37,211,102,.11);border:1px solid rgba(37,211,102,.32); } .mini__ok svg{width:40px;height:40px;color:#25D366} .mini h1{margin-bottom:18px} .mini .lede{margin-inline:auto;margin-bottom:32px} .mini .btn-row{justify-content:center} /* prose for legal pages */ .prose{max-width:76ch} .prose h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:44px 0 16px} .prose h3{font-size:1.1rem;margin:30px 0 12px} .prose p,.prose li{font-size:.97rem} .prose ul{margin:0 0 18px;padding-left:22px;list-style:disc} .prose li{margin-bottom:9px} .prose a{color:var(--signal-orange);text-decoration:underline} .prose strong{color:var(--frost)}