/* ============================================================ VibePop Labs Aurora design system (shared across all pages) Linked by: index, services, packages, about, contact Fonts loaded via Google Fonts in each page : Inter throughout (display/body and eyebrows/labels/figures); no monospace ============================================================ */ :root{ --bg:#0b0a12; --surface:#15131f; --ink:#f2eefb; --muted:#9d96b5; --violet:#a78bfa; --cyan:#22d3ee; --magenta:#ec4899; --outline:#2a2640; --muted-strong:#b3acc9; --grad:linear-gradient(90deg,#a78bfa,#22d3ee); --grad-3:linear-gradient(120deg,#a78bfa,#22d3ee 55%,#ec4899); --display:'Inter', system-ui, sans-serif; --body:'Inter', system-ui, sans-serif; --mono:'Inter', system-ui, sans-serif; --r-sm:8px; --r-md:12px; --r-btn:8px; --maxw:1200px; } *{box-sizing:border-box;margin:0;padding:0;min-width:0} html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; max-width:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-x:clip; max-width:100%; } /* Paragraph/body copy in Roboto (headings + labels stay Inter) */ p{font-family:'Roboto', system-ui, sans-serif} a{color:inherit; text-decoration:none} img,svg{display:block} ::selection{background:rgba(167,139,250,.30); color:#fff} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%} .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--violet); font-weight:500; } .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .beam{ height:2px; width:100%; max-width:100%; background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent); } .hero-glow,.glow-soft{max-width:100vw} /* ---------- NAV ---------- */ .topbeam{position:fixed; top:0; left:0; right:0; z-index:60} header.nav{ position:fixed; top:0; left:0; right:0; z-index:50; padding-top:14px; pointer-events:none; } /* floating glass bubble: wrap-width, translucent frosted border, not full-bleed */ .nav-inner{ pointer-events:auto; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; max-width:1152px; width:calc(100% - 40px); margin:0 auto; padding:0 26px; border-radius:20px; /* frosted body: faint top sheen over the dark tint (technique 4) */ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), rgba(18,16,28,.5); -webkit-backdrop-filter:blur(24px) saturate(140%) brightness(1.05); backdrop-filter:blur(24px) saturate(140%) brightness(1.05); /* bevel: softened top highlight + bottom shadow + inner refraction line (technique 1) */ box-shadow: 0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06); } /* angled specular rim: sun from the upper-right - brightest at the top-right corner, tapering down and to the left; smooth multi-stop falloff so the white blends instead of ending in a hard line (techniques 2 + 3) */ .nav-inner::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; padding:1px; background:linear-gradient(225deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.28) 18%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.06) 70%, rgba(255,255,255,.04) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em} .brand-logo{height:50px; width:auto; display:block} .foot-brand .brand-logo{height:34px} .dot{ width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--violet),var(--cyan)); box-shadow:0 0 14px rgba(167,139,250,.7); flex:none; } .nav-links{display:flex; align-items:center; gap:28px} .nav-links a{font-family:var(--mono); font-size:.72rem; color:var(--violet); font-weight:500; text-transform:uppercase; letter-spacing:.22em; transition:color .2s} .nav-links a.current{color:var(--ink)} .nav-links a:hover{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} /* Services dropdown (desktop): glass panel on hover/focus */ .nav-dd{position:relative; display:flex; align-items:center} .nav-dd > a{display:inline-flex; align-items:center; gap:5px} .dd-caret{width:12px; height:12px; stroke:currentColor; opacity:.85; transition:transform .2s} .nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret{transform:rotate(180deg)} /* invisible bridge so the panel stays open across the gap */ .nav-dd::after{content:""; position:absolute; top:100%; left:0; right:0; height:16px} .dd-menu{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); min-width:232px; padding:8px; border-radius:16px; z-index:5; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), rgba(14,12,22,.98); -webkit-backdrop-filter:blur(20px) saturate(140%) brightness(1.05); backdrop-filter:blur(20px) saturate(140%) brightness(1.05); box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06); display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, transform .2s, visibility .2s; } .nav-dd:hover .dd-menu, .nav-dd:focus-within .dd-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .dd-menu a{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--violet); font-weight:500; white-space:nowrap; padding:11px 14px; border-radius:10px; transition:background .18s, color .18s; } .dd-menu a:hover{background:rgba(167,139,250,.12); color:var(--ink); -webkit-text-fill-color:currentColor} /* Services sub-links (mobile) */ .mobile-menu .mm-sub{padding-left:26px; font-size:.92rem; color:var(--violet)} .nav-cta{ position:relative; isolation:isolate; font-family:var(--body); font-weight:600; font-size:.9rem; padding:6px 20px; border-radius:var(--r-btn); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; border:none; cursor:pointer; transition:transform .2s, box-shadow .2s, color .2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; } /* outlined gradient border, transparent interior (Outlined gradient-text style) */ .nav-cta::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .2s; } .nav-cta svg{width:14px; height:14px; stroke:var(--cyan)} /* hover: fills with the gradient */ .nav-cta:hover{ transform:translateY(-1px); box-shadow:0 0 22px rgba(167,139,250,.4); background:var(--grad); -webkit-background-clip:border-box; background-clip:border-box; color:#0b0a12; } .nav-cta:hover svg{stroke:#0b0a12} .nav-cta:focus-visible{outline:2px solid rgba(34,211,238,.6); outline-offset:2px} .nav-right{display:flex; align-items:center; gap:22px} .hamburger{ display:none; background:none; border:1px solid var(--outline); border-radius:var(--r-sm); width:42px; height:38px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; } .hamburger svg{width:20px;height:20px} .mobile-menu{ display:none; position:fixed; top:90px; left:0; right:0; z-index:49; background:rgba(11,10,18,.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--outline); padding:14px 24px 22px; } .mobile-menu.open{display:block} .mobile-menu a{ display:block; padding:14px 4px; font-size:1.05rem; font-weight:500; color:var(--ink); border-bottom:1px solid rgba(42,38,64,.6); } .mobile-menu .nav-cta{display:block; text-align:center; margin-top:18px; width:100%} .mobile-menu .mm-call{display:flex; align-items:center; gap:10px; color:var(--cyan); font-family:var(--mono); font-weight:600} .mobile-menu .mm-call svg{width:18px; height:18px; flex:none} /* ---------- BUTTONS (rectangular, no pills) ---------- */ .btn-primary{ font-family:var(--body); font-weight:600; font-size:1rem; padding:15px 32px; border-radius:var(--r-btn); background:var(--grad); color:#0b0a12; border:1px solid transparent; cursor:pointer; transition:transform .2s, box-shadow .2s; display:inline-block; text-align:center; } .btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 30px rgba(34,211,238,.4)} /* Slim primary CTA (Get A Quote / Get A Free Audit): slimmer + trailing arrow */ .btn-quote{padding:8px 32px; display:inline-flex; align-items:center; justify-content:center; gap:8px} .btn-quote svg{width:16px; height:16px} .btn-grad{ position:relative; background:var(--surface); color:var(--ink); border:1px solid transparent; background-image:linear-gradient(var(--surface),var(--surface)),var(--grad); background-origin:border-box; background-clip:padding-box,border-box; } .btn-grad:hover{box-shadow:0 0 30px rgba(167,139,250,.4)} .textlink{ font-weight:600; font-size:1rem; display:inline-flex; align-items:center; gap:8px; color:var(--ink); border-bottom:1px solid var(--outline); padding-bottom:3px; transition:border-color .2s; } .textlink:hover{border-color:var(--cyan)} .textlink svg{width:16px;height:16px} /* ---------- HERO (centered, generic) ---------- */ .hero{ position:relative; overflow:hidden; padding:148px 0 110px; text-align:center; } .hero-glow{ position:absolute; left:50%; bottom:-260px; transform:translateX(-50%); width:1100px; height:620px; pointer-events:none; z-index:0; background: radial-gradient(46% 60% at 32% 42%,rgba(167,139,250,.55),transparent 70%), radial-gradient(46% 60% at 68% 40%,rgba(34,211,238,.45),transparent 70%), radial-gradient(40% 55% at 50% 72%,rgba(236,72,153,.35),transparent 72%); -webkit-mask-image:radial-gradient(72% 70% at 50% 45%,#000 38%,transparent 80%); mask-image:radial-gradient(72% 70% at 50% 45%,#000 38%,transparent 80%); filter:blur(36px); } .hero .wrap{position:relative; z-index:1} .hero .eyebrow{display:inline-block; margin-bottom:26px} /* Services hero: tech/cloud art background (dark overlay keeps the centered copy legible) */ .svc-hero{ background-image: linear-gradient(180deg,rgba(8,7,15,.35),rgba(8,7,15,.58)), url('services-hero.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; } .svc-hero .hero-glow{display:none} /* Packages hero: tech/cloud art background */ .pkg-hero{ background-image: linear-gradient(180deg,rgba(8,7,15,.35),rgba(8,7,15,.58)), url('packages-hero.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; } .pkg-hero .glow-soft{display:none} h1.hero-h{ font-family:var(--display); font-weight:800; font-size:clamp(2rem, 7.3vw, 5rem); line-height:1; letter-spacing:-.04em; max-width:22ch; margin:0 auto; overflow-wrap:break-word; } .hero-sub{ font-size:clamp(1.05rem,2.3vw,1.4rem); color:var(--muted-strong); max-width:660px; margin:30px auto 0; line-height:1.5; font-weight:400; } .hero-sub b{color:var(--ink); font-weight:600} .hero-cta{ display:flex; align-items:center; justify-content:center; gap:26px; margin-top:44px; flex-wrap:wrap; } /* ---------- IMAGE HERO (home) ---------- */ .hero-img{ position:relative; overflow:hidden; min-height:72vh; display:flex; align-items:center; padding:110px 0 56px; background-color:var(--bg); background-image:url('hero.webp'); background-repeat:no-repeat; background-position:center center; background-size:100% auto; } /* seamless looping hero video; maps onto the same 100%-auto geometry as the static hero.webp it replaces (video 1780x720 == image 1920x776 aspect) */ .hero-bg-video{ position:absolute; left:0; top:50%; z-index:0; width:100%; height:auto; aspect-ratio:1920/776; object-fit:cover; transform:translateY(-50%); pointer-events:none; } /* reduced motion or no-video: fall back to the static image */ @media (prefers-reduced-motion: reduce){ .hero-bg-video{display:none} } /* left-to-right dark scrim so left text stays legible over the artwork; z-index 1 so it also sits above the hero video (text wrap paints later) */ .hero-img::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(11,10,18,.94) 0%, rgba(11,10,18,.86) 26%, rgba(11,10,18,.66) 44%, rgba(11,10,18,.36) 60%, rgba(11,10,18,.12) 78%, rgba(11,10,18,0) 100%), linear-gradient(180deg, rgba(11,10,18,.45), rgba(11,10,18,0) 32%, rgba(11,10,18,0) 56%, rgba(11,10,18,.8) 84%, rgba(11,10,18,1) 100%); } /* subtle aurora glow consistent with image, lower-left */ .hero-img .glow-soft{ position:absolute; left:-160px; bottom:-160px; z-index:0; pointer-events:none; width:760px; height:520px; background: radial-gradient(46% 60% at 40% 50%,rgba(167,139,250,.22),transparent 70%), radial-gradient(46% 60% at 60% 60%,rgba(34,211,238,.14),transparent 70%); filter:blur(40px); } .hero-img .wrap{position:relative; z-index:1} .hero-img-inner{max-width:640px} .hero-img .eyebrow{display:inline-block; margin-bottom:24px} h1.hero-img-h{ font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,6vw,4.8rem); line-height:1.02; letter-spacing:-.04em; margin:0; max-width:16ch; overflow-wrap:break-word; word-break:break-word; } .hero-img-sub{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--muted-strong); max-width:50ch; margin:26px 0 0; line-height:1.55; font-weight:400; } .hero-img-sub b{color:var(--ink); font-weight:600} .hero-img .hero-cta{justify-content:flex-start; margin-top:40px} /* ---------- SPLIT HERO (other pages may reuse) ---------- */ .hero.split{text-align:left; padding:140px 0 96px; overflow:visible} .hero.split .wrap{position:relative; z-index:1} .hero-glow.split{bottom:-300px; width:1280px; height:760px} .hero-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } .hsplit-left .eyebrow{display:inline-block; margin-bottom:22px} h1.hero-split-h{ font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,5.4vw,4.6rem); line-height:1.02; letter-spacing:-.04em; margin:0; max-width:15ch; overflow-wrap:break-word; } .hero-split-sub{ font-size:clamp(1.02rem,1.7vw,1.28rem); color:var(--muted-strong); max-width:46ch; margin:26px 0 0; line-height:1.55; font-weight:400; } .hero-split-sub b{color:var(--ink); font-weight:600} .hsplit-left .hero-cta{justify-content:flex-start; margin-top:38px} .hero-chips{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap} .chip{ display:flex; align-items:center; gap:10px; border:1px solid var(--outline); border-radius:var(--r-md); background:var(--surface); padding:12px 16px; } .chip .cnum{font-family:var(--mono); font-weight:600; font-size:1.18rem; letter-spacing:-.02em} .chip .cnum.g{color:var(--violet)} .chip .cnum.c{color:var(--cyan)} .chip .clbl{font-size:.82rem; color:var(--muted-strong); line-height:1.2; max-width:14ch} /* ---------- AI ANSWER PANEL ---------- */ .ai-panel{ position:relative; border:1px solid var(--outline); border-radius:var(--r-md); background:var(--surface); padding:26px 26px 24px; overflow:hidden; box-shadow:0 0 60px rgba(167,139,250,.10); } .ai-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); } .ai-head{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-bottom:18px; border-bottom:1px solid rgba(42,38,64,.6); margin-bottom:18px; } .ai-head .ai-lbl{font-family:var(--mono); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-strong)} .ai-answer{font-size:.98rem; line-height:1.6; color:#d9d2ee} .ai-answer .q{font-family:var(--mono); font-size:.98rem; color:var(--muted); letter-spacing:.02em; margin-bottom:12px} .ai-answer b{color:var(--ink); font-weight:600} .ai-answer .cite{ color:var(--ink); font-weight:600; border-bottom:1px solid rgba(167,139,250,.55); padding-bottom:1px; } .ai-vis{margin-top:20px; padding-top:18px; border-top:1px solid rgba(42,38,64,.6); display:flex; flex-wrap:wrap; align-items:center; gap:9px} .ai-vis .vlabel{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:2px} .ai-vis .vchan{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--muted-strong); border:1px solid rgba(42,38,64,.9); border-radius:var(--r-btn); padding:5px 10px} .ai-vis .vchan svg{width:12px; height:12px; color:var(--violet); flex:none} .ai-foot{display:flex; align-items:center; gap:10px; margin-top:20px} .src-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; border:1px solid rgba(167,139,250,.45); border-radius:var(--r-btn); padding:6px 13px; color:var(--violet); } .src-chip svg{width:13px;height:13px} /* ---------- TRUST ---------- */ .trust{padding:46px 0; border-top:1px solid rgba(42,38,64,.55); border-bottom:1px solid rgba(42,38,64,.55)} .trust p.lbl{text-align:center; margin-bottom:26px} .marks{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px 48px} .marks span{ font-family:var(--mono); font-size:.92rem; letter-spacing:.16em; color:#6f6889; font-weight:500; transition:color .25s; } .marks span:hover{color:var(--muted-strong)} /* ---------- SECTION SHELL ---------- */ section.block{padding:104px 0} .sec-head{max-width:900px} .sec-head.center{margin-left:auto; margin-right:auto; text-align:center} .sec-head.center .sec-lead{margin-left:auto; margin-right:auto} .sec-head .eyebrow{margin-bottom:18px; display:inline-block} h2.sec-h{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,5.2vw,3.6rem); line-height:1.04; letter-spacing:-.035em; overflow-wrap:break-word; word-break:break-word; hyphens:auto; } .sec-lead{color:var(--muted-strong); font-size:clamp(1.02rem,1.5vw,1.18rem); margin-top:22px; max-width:620px} /* Prevent single-word line wraps (widows/orphans): balance headings, tidy paragraph tails */ h1.hero-h, h1.hero-img-h, h2.sec-h, h2.closing-h, .svc h3, .scard h3, .pkg h3{text-wrap:balance} .sec-lead, .hero-img-sub, .body, .svc p, .scard p, .note, .foot-brand p{text-wrap:pretty} .divider .beam{opacity:.6} .seeall{margin-top:40px} /* ---------- DIFFERENTIATOR / FEATURE CARDS ---------- */ .diff{text-align:center; position:relative; overflow:hidden} .diff .glow-soft{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); width:820px; height:440px; z-index:0; pointer-events:none; background: radial-gradient(45% 60% at 38% 50%,rgba(167,139,250,.16),transparent 70%), radial-gradient(45% 60% at 64% 50%,rgba(34,211,238,.12),transparent 70%); filter:blur(20px); } .diff .wrap{position:relative; z-index:1} .diff h2{margin:0 auto; max-width:16ch} /* "Experience first. / Results that compound." keeps the gradient line whole on desktop; wraps on phones */ .diff h2.why-h{max-width:22ch; text-wrap:normal} /* Contact hero heading: widen so it sits on 2 lines (instead of 3) on desktop */ h1.hero-h.contact-hero-h{max-width:22ch} @media (max-width:680px){ .diff h2.why-h{max-width:16ch} } .diff .sec-lead{margin:24px auto 0} /* feature card grid (Why VibePop) */ .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:54px; text-align:left} .scard{ border:1px solid var(--outline); border-radius:var(--r-md); background:linear-gradient(180deg,#16131f,#100e18); padding:32px; transition:border-color .25s, transform .25s, box-shadow .25s; } .scard:hover{border-color:rgba(167,139,250,.45); transform:translateY(-3px); box-shadow:0 0 30px rgba(167,139,250,.14)} .scard .ic{ width:46px;height:46px;border-radius:var(--r-sm); display:flex;align-items:center;justify-content:center; border:1px solid var(--outline); margin-bottom:20px; color:var(--violet); } .scard .ic svg, .scard .ic img{width:24px;height:24px;display:block} .scard.cyan .ic{color:var(--cyan)} .scard h3{font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; margin-bottom:10px} .scard p{color:var(--muted-strong); font-size:.98rem} /* Homepage "why" cards: full-size icon on the LEFT of the copy (matches the #services .wd-row icons) instead of a boxed icon stacked above the text */ #why .scard{display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; align-content:start} #why .scard .ic{grid-column:1; grid-row:1 / span 2; align-self:start; width:auto; height:auto; border:0; border-radius:0; margin:0; justify-content:flex-start} #why .scard .ic svg, #why .scard .ic img{width:50px; height:50px} #why .scard h3{grid-column:2; grid-row:1} #why .scard p{grid-column:2; grid-row:2} /* Glass tiles for the homepage #why cards + the Questions (#faq) cards - same recipe as the trust-strip / process / founder tiles. #why is homepage-only (scoped to .home); #faq is every page's Questions block, so it stays site-wide. All other .scard uses keep the flat base. */ .home #why .scard, #faq .scard{ position:relative; border:0; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), rgba(18,16,28,.5); -webkit-backdrop-filter:blur(20px) saturate(140%) brightness(1.05); backdrop-filter:blur(20px) saturate(140%) brightness(1.05); box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); } /* angled specular rim: bright top-right, fading down-left (sun from upper-right) */ .home #why .scard::before, #faq .scard::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(225deg, rgba(255,255,255,.55), rgba(255,255,255,.26) 20%, rgba(255,255,255,.1) 45%, rgba(255,255,255,.05)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .home #why .scard:hover, #faq .scard:hover{ border-color:transparent; transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.45), 0 0 26px rgba(167,139,250,.22), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.08); } .twocard{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:54px; text-align:left; max-width:880px; margin-left:auto; margin-right:auto; } /* ---------- SERVICES ---------- */ .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:54px} .svc{ border:1px solid var(--outline); border-radius:var(--r-md); background:var(--surface); padding:28px; display:flex; flex-direction:column; transition:border-color .25s, transform .25s, box-shadow .25s; min-height:188px; } .svc:hover{border-color:rgba(167,139,250,.45); transform:translateY(-3px); box-shadow:0 0 28px rgba(167,139,250,.12)} .svc .ic{color:var(--violet); margin-bottom:18px} .svc .ic svg, .svc .ic img{width:26px;height:26px;display:block} .svc h3{font-family:var(--display); font-weight:700; font-size:1.22rem; letter-spacing:-.02em; margin-bottom:8px} .svc p{color:var(--muted-strong); font-size:.95rem; flex:1} /* "What we do" section background: tech banner (dark left, imagery right) with a left-to-right dark overlay so the heading stays readable and cards sit cleanly on top */ #services{position:relative; overflow:hidden} #services::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(90deg, var(--bg) 24%, rgba(11,10,18,.74) 54%, rgba(11,10,18,.40) 100%), url("whatwedo-bg.webp") right center / cover no-repeat; } #services > .wrap{position:relative; z-index:1} /* "What we do" - featured flagship card + compact supporting rows */ #services .wd-layout{display:grid; grid-template-columns:1.05fr 1fr; gap:20px; margin-top:46px; align-items:stretch} #services .wd-feature{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--outline); border-radius:var(--r-md); background:var(--surface); padding:40px; box-shadow:0 0 60px rgba(167,139,250,.12); transition:border-color .25s, transform .25s, box-shadow .25s; } #services .wd-feature::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-3)} #services .wd-feature:hover{border-color:rgba(167,139,250,.45); transform:translateY(-3px); box-shadow:0 0 60px rgba(167,139,250,.2)} #services .wd-feature .ic{display:flex; color:var(--violet); margin-bottom:18px} #services .wd-feature .ic svg, #services .wd-feature .ic img{width:34px; height:34px; display:block} #services .wd-feature .wd-feature-img{display:block; width:100%; height:auto; margin-bottom:22px; border:1px solid var(--outline); border-radius:var(--r-sm)} #services .wd-feature h3{font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.85rem); letter-spacing:-.02em; margin-bottom:12px; color:var(--ink)} #services .wd-feature p{font-family:'Roboto',sans-serif; color:var(--muted-strong); font-size:1rem; line-height:1.6} #services .wd-supp{display:flex; flex-direction:column; gap:12px} #services .wd-row{display:flex; gap:16px; align-items:flex-start; border:1px solid var(--outline); border-radius:var(--r-md); background:var(--surface); padding:16px 18px; transition:border-color .25s, transform .25s; flex:1} #services .wd-row:hover{border-color:rgba(167,139,250,.45); transform:translateY(-2px)} #services .wd-row .ic{flex:none; display:flex; color:var(--cyan)} #services .wd-row .ic svg, #services .wd-row .ic img{width:50px; height:50px; display:block} #services .wd-row h3{font-family:var(--display); font-weight:700; font-size:1.04rem; letter-spacing:-.01em; margin-bottom:3px; color:var(--ink)} #services .wd-row p{font-family:'Roboto',sans-serif; color:var(--muted-strong); font-size:.88rem; line-height:1.5} @media (max-width:860px){ #services .wd-layout{grid-template-columns:1fr; gap:14px} #services .wd-feature{padding:28px} } .svc.lead{ grid-column:span 2; background:linear-gradient(135deg,rgba(167,139,250,.10),rgba(34,211,238,.05)); border-color:rgba(167,139,250,.32); } .svc.lead .ic{color:var(--cyan)} .svc.lead h3{font-size:1.6rem} .svc.lead .tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(34,211,238,.4); border-radius:var(--r-btn); padding:4px 12px; display:inline-block; margin-bottom:14px; width:max-content; } /* ---------- OS / FEATURE BAND ---------- */ .osband{ position:relative; overflow:hidden; border-top:1px solid rgba(42,38,64,.55); border-bottom:1px solid rgba(42,38,64,.55); background:linear-gradient(180deg,#100e18,#0b0a12); } .osband .glow-soft{ position:absolute; right:-160px; top:50%; transform:translateY(-50%); width:640px; height:440px; z-index:0; pointer-events:none; background: radial-gradient(circle,rgba(34,211,238,.18),transparent 64%), radial-gradient(circle at 30% 60%,rgba(167,139,250,.14),transparent 64%); filter:blur(20px); } .osband .grid2{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; position:relative; z-index:1; } .osband h2{margin-bottom:22px} .os-list{list-style:none; margin-top:8px; display:grid; gap:16px} .os-list li{display:flex; gap:14px; align-items:flex-start} .os-list .ck{color:var(--cyan); flex:none; margin-top:3px} .os-list .ck svg{width:18px;height:18px} .os-list b{font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; display:block; margin-bottom:2px} .os-list span{color:var(--muted-strong); font-size:.95rem} /* AI band wrapper (toned-down staying-ahead section) */ .aiband{position:relative; overflow:hidden; background:linear-gradient(180deg,#100e18,#0b0a12); border-top:1px solid rgba(42,38,64,.55); border-bottom:1px solid rgba(42,38,64,.55)} .aiband .glow-soft{ position:absolute; right:-140px; top:50%; transform:translateY(-50%); width:620px; height:460px; z-index:0; pointer-events:none; background: radial-gradient(circle,rgba(34,211,238,.16),transparent 64%), radial-gradient(circle at 30% 60%,rgba(167,139,250,.13),transparent 64%); filter:blur(22px); } .aiband .grid2{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; position:relative; z-index:1} .aiband .grid2 .copy{max-width:46ch} /* ---------- PROCESS ---------- */ .proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:56px} /* Process steps as glass tiles (same recipe as the trust-strip .stat tiles) */ .step{ position:relative; padding:24px 22px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), rgba(18,16,28,.5); -webkit-backdrop-filter:blur(20px) saturate(140%) brightness(1.05); backdrop-filter:blur(20px) saturate(140%) brightness(1.05); box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .25s ease, box-shadow .25s ease; } .step::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(225deg, rgba(255,255,255,.55), rgba(255,255,255,.26) 20%, rgba(255,255,255,.1) 45%, rgba(255,255,255,.05)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .step:hover{transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.45), 0 0 26px rgba(167,139,250,.22), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.08);} .step .num{ font-family:var(--display); font-size:3.2rem; font-weight:700; letter-spacing:-.03em; line-height:1; margin-bottom:14px; /* Flowing gradient fill, same as the trust-strip numbers */ background:linear-gradient(90deg,var(--violet),var(--cyan),#ec4899,var(--violet)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:stat-flow 9s linear infinite; } /* glass hairline under the number: translucent white catching the light, fading out */ .step .num::after{ content:""; display:block; height:2px; margin-top:14px; border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.14) 55%, rgba(255,255,255,.02)); } .step h3{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; margin-bottom:10px} .step p{color:var(--muted-strong); font-size:.95rem} .step .when{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--violet); margin-top:14px; display:block; } /* ---------- STATS ---------- */ /* Glass tiles (trust strip): each stat is a frosted card carrying the navbar glass recipe - frosted body, angled 225deg specular rim, 4-layer bevel. */ .stats{ background:radial-gradient(60% 150% at 88% -30%, rgba(34,211,238,.10), transparent 60%), radial-gradient(60% 150% at 6% 130%, rgba(167,139,250,.10), transparent 60%), linear-gradient(180deg,rgba(167,139,250,.04),transparent)} .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} .stat{ position:relative; text-align:center; padding:20px 12px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), rgba(18,16,28,.5); -webkit-backdrop-filter:blur(20px) saturate(140%) brightness(1.05); backdrop-filter:blur(20px) saturate(140%) brightness(1.05); box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .25s ease, box-shadow .25s ease; } /* angled specular rim: bright top-right, fading down-left (sun from the upper-right) */ .stat::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(225deg, rgba(255,255,255,.55), rgba(255,255,255,.26) 20%, rgba(255,255,255,.1) 45%, rgba(255,255,255,.05)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .stat:hover{transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.45), 0 0 26px rgba(167,139,250,.22), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.08);} /* keep the lift after the scroll-reveal sets transform:none (matches its specificity) */ .stats.reveal-ready.in .stat:hover{transform:translateY(-4px)} .stat .fig{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.4rem,3.2vw,2.15rem); line-height:1; /* Flowing gradient fill: violet -> cyan -> magenta loops through the numbers */ background:linear-gradient(90deg,var(--violet),var(--cyan),#ec4899,var(--violet)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:stat-flow 9s linear infinite; } @keyframes stat-flow{to{background-position:300% 0}} /* Location figure (multi-word place name): same size as the numeric figures; wraps to two lines only when a narrow tile can't fit it on one line */ .stat .fig.place{white-space:normal} .stat .lbl{color:var(--muted-strong); font-size:.78rem; margin-top:8px} /* ---------- PACKAGES (no prices, category/tier cards) ---------- */ .pkg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; align-items:stretch} .pkg-grid.three{grid-template-columns:repeat(3,1fr)} .pkg{ border:1px solid var(--outline); border-radius:var(--r-md); background:var(--surface); padding:30px 26px; display:flex; flex-direction:column; transition:border-color .25s, transform .25s, box-shadow .25s; } .pkg:hover{transform:translateY(-3px); border-color:rgba(167,139,250,.45); box-shadow:0 0 30px rgba(167,139,250,.12)} .pkg.pop{ position:relative; background:linear-gradient(180deg,rgba(167,139,250,.10),rgba(34,211,238,.04)); border:1px solid transparent; background-image:linear-gradient(180deg,#16131f,#100e18),var(--grad-3); background-origin:border-box; background-clip:padding-box,border-box; } .pkg .badge{ position:absolute; top:-12px; left:26px; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; background:var(--grad); color:#0b0a12; font-weight:600; padding:5px 13px; border-radius:var(--r-btn); } .pkg .ic{color:var(--violet); margin-bottom:16px} .pkg .ic svg, .pkg .ic img{width:26px;height:26px;display:block} .pkg.pop .ic{color:var(--cyan)} .pkg h3{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; margin-bottom:8px} .pkg .note{color:var(--muted-strong); font-size:.95rem; margin-bottom:22px; flex:1} .pkg ul{list-style:none; display:grid; gap:12px; margin-bottom:28px; flex:1} .pkg li{display:flex; gap:10px; font-size:.95rem; color:#d9d2ee} .pkg li .ck{color:var(--cyan); flex:none; margin-top:2px} .pkg li .ck svg{width:16px;height:16px} .pkg .pkglink{ font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:8px; color:var(--ink); margin-top:auto; transition:gap .2s, color .2s; } .pkg .pkglink svg{width:15px;height:15px} .pkg .pkglink:hover{gap:12px; color:var(--cyan)} .pkg .btn-primary, .pkg .btn-grad{width:100%; text-align:center; margin-top:auto} /* ---------- ABOUT / FOUNDERS ---------- */ .about .grid2{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start} .about p.body{color:var(--muted-strong); font-size:1.08rem; margin-top:22px} .about p.body b{color:var(--ink); font-weight:600} .founders{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px} /* Founder cards as glass tiles (same recipe as the trust-strip / process tiles) */ .founder{ position:relative; padding:26px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), rgba(18,16,28,.5); -webkit-backdrop-filter:blur(20px) saturate(140%) brightness(1.05); backdrop-filter:blur(20px) saturate(140%) brightness(1.05); box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .25s ease, box-shadow .25s ease; } .founder::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(225deg, rgba(255,255,255,.55), rgba(255,255,255,.26) 20%, rgba(255,255,255,.1) 45%, rgba(255,255,255,.05)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .founder:hover{transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.45), 0 0 26px rgba(167,139,250,.22), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.08);} .founder .av{ width:48px;height:48px;border-radius:50%; margin-bottom:18px; background:radial-gradient(circle at 30% 30%,var(--violet),var(--cyan)); opacity:.9; } .founder h4{font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:-.01em} .founder .role{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--cyan); margin:6px 0 12px; text-transform:uppercase} .founder p{color:var(--muted-strong); font-size:.92rem} /* ---------- CLOSING ---------- */ .closing{position:relative; overflow:hidden; text-align:center; padding:128px 0} /* beam acts as the divider at the section's top edge; the 128px padding gives the copy room below it */ .closing .beam{position:absolute; top:0; left:0; right:0; width:100%} .closing .glow-soft{ position:absolute; left:50%; bottom:-200px; transform:translateX(-50%); width:1080px; height:560px; z-index:0; pointer-events:none; background: radial-gradient(44% 60% at 36% 60%,rgba(167,139,250,.34),transparent 70%), radial-gradient(44% 60% at 66% 56%,rgba(34,211,238,.26),transparent 70%), radial-gradient(38% 50% at 50% 90%,rgba(236,72,153,.22),transparent 72%); -webkit-mask-image:radial-gradient(72% 78% at 50% 55%,#000 38%,transparent 82%); mask-image:radial-gradient(72% 78% at 50% 55%,#000 38%,transparent 82%); filter:blur(30px); } .closing .wrap{position:relative; z-index:1} h2.closing-h{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,5.4vw,4rem); line-height:1.04; letter-spacing:-.035em; max-width:26ch; margin:28px auto 0; overflow-wrap:break-word; word-break:break-word; } .closing .sec-lead{margin:24px auto 0} .closing .hero-cta{margin-top:46px} .svc h3,.scard h3,.step h3,.pkg h3,.svc.lead h3,.founder h4,.os-list b{ overflow-wrap:break-word; word-break:break-word; } /* ---------- FOOTER ---------- */ footer{border-top:1px solid rgba(42,38,64,.55); padding:64px 0 40px} .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px} .foot-brand .brand{margin-bottom:16px} .foot-brand p{color:var(--muted-strong); font-size:.95rem; max-width:34ch} .foot-brand .mail{display:inline-block; margin-top:18px; font-family:var(--mono); font-size:.9rem; color:var(--cyan)} .foot-brand .phone{display:inline-block; margin-top:18px; font-family:var(--mono); font-size:.95rem; color:var(--cyan)} .foot-brand .phone:hover{color:var(--ink)} .foot-brand .loc{display:block; margin-top:14px; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--muted)} .foot-col h5{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-strong); margin-bottom:18px; font-weight:500} .foot-col a{display:block; color:#cbc3e2; font-size:.95rem; padding:6px 0; transition:color .2s} .foot-col a:hover{color:var(--ink)} .foot-col .plain{color:var(--muted-strong)} .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:56px; padding-top:26px; border-top:1px solid rgba(42,38,64,.55); color:var(--muted); font-size:.85rem; font-family:var(--mono); letter-spacing:.04em; } /* ---------- MOTION ---------- */ .reveal{opacity:0; transform:translateY(22px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards} @keyframes rise{to{opacity:1; transform:translateY(0)}} .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s} .d4{animation-delay:.44s}.d5{animation-delay:.57s}.d6{animation-delay:.70s} /* Stats trust strip: staggered reveal when scrolled into view (JS adds .reveal-ready then .in) */ .stats.reveal-ready .stat{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease} .stats.reveal-ready.in .stat{opacity:1; transform:none} .stats.reveal-ready.in .stat:nth-child(1){transition-delay:.04s} .stats.reveal-ready.in .stat:nth-child(2){transition-delay:.14s} .stats.reveal-ready.in .stat:nth-child(3){transition-delay:.24s} .stats.reveal-ready.in .stat:nth-child(4){transition-delay:.34s} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .reveal{animation:none; opacity:1; transform:none} .stats.reveal-ready .stat{opacity:1; transform:none; transition:none} .stat .fig{animation:none} .step .num{animation:none} } *:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px} /* ---------- RESPONSIVE ---------- */ @media (max-width:980px){ .hero-split{grid-template-columns:1fr; gap:44px} .hsplit-left .hero-cta{margin-top:32px} h1.hero-split-h{max-width:18ch} .feat-grid{grid-template-columns:repeat(2,1fr)} .svc-grid{grid-template-columns:repeat(2,1fr)} .svc.lead{grid-column:span 2} .pkg-grid, .pkg-grid.three{grid-template-columns:1fr 1fr; max-width:640px; margin-left:auto; margin-right:auto} .osband .grid2, .aiband .grid2{grid-template-columns:1fr; gap:36px} .about .grid2{grid-template-columns:1fr; gap:34px} .proc-grid{grid-template-columns:1fr 1fr} .stats-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .nav-links, .nav-right .nav-cta{display:none} .hamburger{display:flex} } @media (max-width:680px){ .twocard{grid-template-columns:1fr} .feat-grid{grid-template-columns:1fr} .svc-grid{grid-template-columns:1fr} .svc.lead{grid-column:span 1} .pkg-grid, .pkg-grid.three{grid-template-columns:1fr; max-width:460px} .founders{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr; gap:32px} .foot-brand{grid-column:span 2} section.block{padding:78px 0} .hero{padding:122px 0 84px} .marks{gap:14px 30px} .marks span{font-size:.8rem} /* image hero -> emphasize scrim for legibility; image still visible behind */ .hero-img{min-height:auto; padding:118px 0 72px; background-position:right -40px center; background-size:auto 100%;} .hero-img::before{ background: linear-gradient(180deg, rgba(11,10,18,.92) 0%, rgba(11,10,18,.80) 50%, rgba(11,10,18,.55) 78%, rgba(11,10,18,.78) 100%), linear-gradient(90deg, var(--bg) 0%, rgba(11,10,18,.72) 55%, rgba(11,10,18,.42) 100%); } .hero-img-inner{max-width:100%} h1.hero-img-h{max-width:18ch} } @media (max-width:420px){ .wrap{padding:0 18px} .foot-grid{grid-template-columns:1fr} .foot-brand{grid-column:span 1} .hero-cta{gap:18px} .btn-primary,.btn-grad{width:100%} .hsplit-left .hero-cta .textlink, .hero-img .hero-cta .textlink{width:auto} .hero-chips{gap:10px} .chip{padding:10px 13px} .ai-panel{padding:22px 18px 20px} }