/* ============================================================ vector-company — hi-fi design system Fonts: Jost (display) · Mulish (body) — loaded via in each page's (with preconnect), not @import: @import blocks the CSSOM until this whole file is fetched before the font request even starts. ============================================================ */ :root{ /* brand */ --ink:#1e1e1e; --paper:#f3fafc; --teal:#357597; --coral:#f38e72; --red:#ce3a11; /* derived */ --ink-2:#2a2a2a; --ink-soft:#3d4a50; --teal-d:#274f68; --teal-l:#5e98b6; --teal-wash:#e6eef2; --coral-l:#f8b7a6; --coral-wash:#fdeee9; --paper-2:#e9f2f5; --line:#d4e0e6; --line-2:#e3edf0; --muted:#6c7a80; --white:#ffffff; --maxw:1280px; --gut:clamp(20px,5vw,72px); --r:14px; /* card radius */ --r-sm:9px; --r-pill:999px; --shadow-s:0 2px 8px rgba(30,30,30,.05); --shadow-m:0 14px 40px -18px rgba(39,79,104,.28); --shadow-l:0 36px 90px -40px rgba(30,46,55,.45); --ease:cubic-bezier(.22,.61,.36,1); --font-d:'Jost',system-ui,sans-serif; --font-b:'Mulish',system-ui,sans-serif; --nav-h:74px; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-b); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4,h5{font-family:var(--font-d); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--ink)} p{margin:0} a{color:inherit; text-decoration:none} img,svg{display:block; max-width:100%} ul{margin:0; padding:0; list-style:none} button{font-family:inherit; cursor:pointer} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)} .section{padding-block:clamp(64px,9vw,128px)} .section-sm{padding-block:clamp(48px,6vw,80px)} .bleed{position:relative} /* eyebrow / kicker */ .kicker{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); } .kicker::before{content:''; width:26px; height:2px; background:var(--coral)} .kicker.on-dark{color:var(--coral-l)} .kicker.center{justify-content:center} /* display type scale */ .display{font-size:clamp(40px,6.4vw,82px); line-height:.98; letter-spacing:-.03em} .h-xl{font-size:clamp(32px,4.4vw,58px); line-height:1.02; letter-spacing:-.025em} .h-lg{font-size:clamp(27px,3vw,40px)} .h-md{font-size:clamp(21px,2vw,27px)} .lede{font-size:clamp(18px,1.5vw,22px); line-height:1.55; color:var(--ink-soft); font-weight:400} .muted{color:var(--muted)} .mono{font-family:var(--font-d); font-variant-numeric:tabular-nums} .accent{color:var(--coral)} .tealc{color:var(--teal)} /* ---------- buttons ---------- */ .btn{ --bg:var(--teal); --fg:#fff; --bd:var(--teal); display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:500; font-size:16px; letter-spacing:.005em; padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid var(--bd); background:var(--bg); color:var(--fg); position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s; } .btn .ar{transition:transform .4s var(--ease)} .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-m)} .btn:hover .ar{transform:translateX(4px)} .btn:active{transform:translateY(0)} .btn--coral{--bg:var(--coral); --bd:var(--coral); --fg:#3a1c12} .btn--ink{--bg:var(--ink); --bd:var(--ink); --fg:var(--paper)} .btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line)} .btn--ghost:hover{--bd:var(--teal); --fg:var(--teal)} .btn--ghost.on-dark{--fg:var(--paper); --bd:rgba(243,250,252,.28)} .btn--ghost.on-dark:hover{--fg:#fff; --bd:var(--coral-l)} .btn--lg{padding:18px 32px; font-size:17px} .btn--block{display:flex; justify-content:center; width:100%} .link-arrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-weight:600; color:var(--teal); font-size:16px} .link-arrow .ar{transition:transform .35s var(--ease)} .link-arrow:hover .ar{transform:translateX(5px)} /* ---------- chips / tags ---------- */ .chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-size:14px; font-weight:500; padding:8px 15px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--white); color:var(--ink); transition:.25s var(--ease); } .chip:hover{border-color:var(--teal); color:var(--teal)} .chip.is-active{background:var(--teal); border-color:var(--teal); color:#fff} .tag{font-family:var(--font-d); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); padding:5px 11px; border-radius:6px; background:var(--teal-wash)} .tag.coral{color:var(--red); background:var(--coral-wash)} /* ---------- cards ---------- */ .card{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-s); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; } .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:var(--line)} .card-pad{padding:clamp(22px,2.4vw,32px)} /* icon tile */ .itile{ width:54px; height:54px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; background:var(--teal-wash); color:var(--teal); border:1px solid var(--line-2); } .itile svg{width:26px; height:26px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round} .itile.coral{background:var(--coral-wash); color:var(--red)} .itile.ink{background:var(--ink); color:var(--coral-l); border-color:var(--ink)} /* media placeholder look (when not using image-slot) */ .ph{ position:relative; border-radius:var(--r); overflow:hidden; background: linear-gradient(135deg,var(--teal-wash),var(--coral-wash)); border:1px solid var(--line); } .ph::after{content:attr(data-ph); position:absolute; inset:auto 14px 12px auto; font-family:var(--font-d); font-size:12px; letter-spacing:.05em; color:var(--teal-d); background:rgba(255,255,255,.7); padding:4px 10px; border-radius:6px} image-slot{border-radius:var(--r)} /* surfaces */ .surface-ink{background:var(--ink); color:var(--paper)} .surface-ink h1,.surface-ink h2,.surface-ink h3,.surface-ink h4{color:var(--paper)} .surface-ink .lede{color:rgba(243,250,252,.72)} .surface-teal{background:var(--teal); color:#fff} .surface-teal h1,.surface-teal h2,.surface-teal h3{color:#fff} .surface-paper2{background:var(--paper-2)} .divider{height:1px; background:var(--line-2); border:0; margin:0} /* grid helpers */ .grid{display:grid; gap:clamp(16px,1.6vw,24px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .cluster{display:flex; flex-wrap:wrap; gap:12px} .stack{display:flex; flex-direction:column} .between{display:flex; align-items:center; justify-content:space-between; gap:24px} .flex{display:flex} .items-center{align-items:center} .gap-s{gap:10px}.gap-m{gap:18px}.gap-l{gap:28px} /* section heading block */ .head{max-width:42ch} .head .lede{margin-top:18px} .head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,54px)} /* ============================================================ NAV ============================================================ */ .nav{position:sticky; top:0; z-index:60; background:rgba(243,250,252,.82); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s} .nav.scrolled{border-color:var(--line-2); background:rgba(243,250,252,.93)} .nav-in{display:flex; align-items:center; gap:30px; height:var(--nav-h); max-width:1360px; margin:0 auto; padding-inline:var(--gut)} .nav-logo{height:21px; flex:0 0 auto} .nav-logo svg{height:100%; width:auto} .nav-menu{display:flex; align-items:center; gap:4px; margin-left:6px} .nav-link{position:relative; font-family:var(--font-d); font-size:15px; font-weight:500; color:var(--ink-soft); padding:9px 13px; border-radius:8px; transition:color .2s, background .2s; white-space:nowrap} .nav-link:hover{color:var(--ink); background:rgba(53,117,151,.07)} .nav-link.is-active{color:var(--teal); font-weight:600} .nav-cta{margin-left:auto; display:flex; align-items:center; gap:12px} .nav-burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:var(--white); flex-direction:column; gap:5px; align-items:center; justify-content:center} .nav-burger span{width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease)} .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .nav-burger span:nth-child(2){opacity:0} .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-drawer{position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--paper); border-bottom:1px solid var(--line); padding:18px var(--gut) 28px; transform:translateY(-120%); transition:transform .42s var(--ease); z-index:55; display:none} .nav-drawer a{display:block; font-family:var(--font-d); font-size:19px; padding:13px 0; border-bottom:1px solid var(--line-2); color:var(--ink)} .nav.open .nav-drawer{transform:translateY(0)} @media (max-width:1080px){ .nav-menu{display:none} .nav-burger{display:flex} .nav-drawer{display:block} .nav-cta .btn{display:none} } /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--ink); color:var(--paper); padding-block:clamp(56px,7vw,92px) 30px} .footer a{color:rgba(243,250,252,.62); transition:color .2s} .footer a:hover{color:#fff} .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(243,250,252,.13)} .foot-col h4{font-family:var(--font-d); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:rgba(243,250,252,.5); margin-bottom:18px; font-weight:600} .foot-col ul{display:flex; flex-direction:column; gap:11px; font-size:15px} .foot-logo{height:24px; margin-bottom:20px} .foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:26px; font-family:var(--font-d); font-size:13.5px; color:rgba(243,250,252,.45)} @media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:32px}} @media (max-width:520px){.foot-grid{grid-template-columns:1fr}} /* ============================================================ ANIMATIONS ============================================================ */ /* Reveal-on-scroll is gated on the `.js` class (set on by an inline script in ). Without JS the hidden/offset state never applies, so all content is visible and indexable for crawlers and no-JS clients. */ .js [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)} .js [data-reveal="left"]{transform:translateX(-34px)} .js [data-reveal="right"]{transform:translateX(34px)} .js [data-reveal="scale"]{transform:scale(.94)} [data-reveal].in{opacity:1; transform:none} .js [data-reveal-stagger] > *{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)} [data-reveal-stagger].in > *{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ [data-reveal],[data-reveal-stagger] > *{opacity:1 !important; transform:none !important; transition:none} } /* marquee */ .marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex; gap:64px; width:max-content; animation:marquee 34s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} /* ambient hero shapes */ @keyframes float-y{50%{transform:translateY(-22px)}} @keyframes drift{50%{transform:translate(18px,-14px) rotate(8deg)}} @keyframes spin-slow{to{transform:rotate(360deg)}} @keyframes dash{to{stroke-dashoffset:0}} @keyframes pulse-ring{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}} /* responsive grid collapse */ @media (max-width:1000px){.g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr} :root{--r:12px}} /* utility spacing */ .mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px} .tc{text-align:center}.mx-auto{margin-inline:auto} .full{width:100%} /* ============================================================ SHARED COMPONENTS ============================================================ */ /* stats */ .stat .stat-num{font-family:var(--font-d); font-weight:700; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-.03em; color:var(--teal); font-variant-numeric:tabular-nums} .stat .stat-num.coral{color:var(--red)} .stat .stat-label{margin-top:10px; font-size:15.5px; color:var(--muted); max-width:18ch} .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px)} .stat-row.divided > .stat{padding-left:26px; border-left:2px solid var(--line)} .stat-row.divided > .stat:first-child{padding-left:0; border-left:0} @media (max-width:760px){.stat-row{grid-template-columns:1fr 1fr; gap:30px} .stat-row.divided > .stat:nth-child(odd){padding-left:0;border-left:0}} /* service / feature card */ .fcard{display:flex; flex-direction:column; gap:18px; height:100%} .fcard .fcard-h{font-size:21px; font-family:var(--font-d); font-weight:600} .fcard p{color:var(--muted); font-size:15.5px; line-height:1.55} .fcard .link-arrow{margin-top:auto; padding-top:6px} /* big directional service row (homepage 4 directions) */ .dir{position:relative; display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:26px; padding:30px clamp(22px,2.6vw,38px); border-radius:var(--r); background:var(--white); border:1px solid var(--line-2); box-shadow:var(--shadow-s); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease)} .dir::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease)} .dir:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)} .dir:hover::before{transform:scaleY(1)} .dir-n{font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--coral)} .dir-h{font-size:clamp(22px,2.3vw,30px); font-family:var(--font-d); font-weight:600; letter-spacing:-.02em} .dir-d{color:var(--muted); font-size:15.5px; margin-top:6px; max-width:54ch} .dir-go{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--teal);transition:.4s var(--ease);flex:0 0 auto} .dir:hover .dir-go{background:var(--teal); border-color:var(--teal); color:#fff; transform:rotate(-45deg)} @media (max-width:680px){.dir{grid-template-columns:48px 1fr; gap:16px} .dir-go{display:none}} /* process timeline */ .process{position:relative; display:grid; gap:0} .process-line{position:absolute; left:0; right:0; top:33px; height:2px; background:var(--line-2)} .process-line i{position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--teal),var(--coral)); transition:width 1.4s var(--ease)} .process.in .process-line i{width:100%} .process-steps{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:18px; position:relative} .pstep{display:flex; flex-direction:column; gap:14px} .pstep .dot{width:66px;height:66px;border-radius:50%;background:var(--white);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--font-d);font-weight:600;font-size:20px;color:var(--teal);transition:.4s var(--ease)} .pstep.in .dot{border-color:var(--teal); background:var(--teal-wash)} .pstep h4{font-size:16px} .pstep p{font-size:13.5px; color:var(--muted)} @media (max-width:820px){ .process-steps{grid-auto-flow:row; gap:22px} .process-line{left:32px; right:auto; top:0; bottom:0; width:2px; height:auto} .process-line i{width:2px!important; height:0; background:linear-gradient(180deg,var(--teal),var(--coral)); transition:height 1.4s var(--ease)} .process.in .process-line i{height:100%} .pstep{flex-direction:row; align-items:flex-start; gap:20px} } /* pricing */ .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch} .price{display:flex; flex-direction:column; gap:18px; padding:32px; background:var(--white); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-s); transition:.4s var(--ease)} .price:hover{transform:translateY(-5px); box-shadow:var(--shadow-m)} .price.featured{background:var(--ink); color:var(--paper); border-color:var(--ink)} .price.featured h3,.price.featured .price-amt{color:#fff} .price.featured .price-feat li{color:rgba(243,250,252,.8)} .price-name{font-family:var(--font-d); font-weight:600; font-size:20px} .price-amt{font-family:var(--font-d); font-weight:700; font-size:34px; letter-spacing:-.02em} .price-amt small{font-size:15px; font-weight:500; color:var(--muted)} .price.featured .price-amt small{color:rgba(243,250,252,.6)} .price-feat{display:flex; flex-direction:column; gap:11px; font-size:15px; flex:1} .price-feat li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft)} .price-feat li::before{content:''; width:18px; height:18px; flex:0 0 auto; margin-top:2px; border-radius:50%; background:var(--teal-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23357597' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} .price.featured .price-feat li::before{background-color:rgba(248,183,166,.18)} @media (max-width:880px){.price-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}} /* slider */ .slider-dots{display:flex; gap:9px; justify-content:center} .slider-dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);padding:0;transition:.3s var(--ease)} .slider-dot.is-active{background:var(--teal); width:26px; border-radius:5px} [data-slider-track]{display:flex; transition:transform .6s var(--ease)} [data-slider-track] > *{flex:0 0 100%} /* logos marquee item */ .logo-cell{display:flex; align-items:center; justify-content:center; height:40px; opacity:.55; transition:opacity .3s; filter:grayscale(1)} .logo-cell:hover{opacity:1; filter:none} .logo-cell svg{height:26px; width:auto} /* checklist */ .checklist{display:flex; flex-direction:column; gap:13px} .checklist li{display:flex; gap:13px; align-items:flex-start; font-size:16px} .checklist li svg{width:22px;height:22px;flex:0 0 auto;margin-top:1px;color:var(--teal)} /* form */ .field{display:flex; flex-direction:column; gap:7px} .field label{font-family:var(--font-d); font-size:14px; font-weight:500; color:var(--ink-soft)} .field input,.field textarea,.field select{font-family:var(--font-b); font-size:16px; padding:14px 16px; border:1.5px solid var(--line); border-radius:11px; background:var(--white); color:var(--ink); transition:border-color .2s, box-shadow .2s; width:100%} .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(53,117,151,.12)} .field input::placeholder,.field textarea::placeholder{color:#9aa7ac} /* consent checkboxes */ .consent{display:flex; flex-direction:column; gap:11px; margin-top:2px} .consent-item{display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:12.5px; line-height:1.45; color:var(--muted)} .consent-item input{appearance:none; -webkit-appearance:none; width:19px; height:19px; flex:0 0 auto; margin:1px 0 0; border:1.5px solid var(--line); border-radius:5px; background:var(--white); cursor:pointer; position:relative; transition:.2s var(--ease)} .consent-item input:checked{background:var(--teal); border-color:var(--teal)} .consent-item input:checked::after{content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)} .consent-item input:focus-visible{outline:2px solid var(--teal); outline-offset:2px} .consent-item a{color:var(--teal); text-decoration:underline; text-underline-offset:2px} .consent-item a:hover{color:var(--teal-d)} /* tech badge */ .tech{display:flex; align-items:center; gap:11px; padding:14px 18px; border:1px solid var(--line-2); border-radius:12px; background:var(--white); font-family:var(--font-d); font-weight:500; transition:.3s var(--ease)} .tech:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--shadow-s)} .tech .dotc{width:11px;height:11px;border-radius:50%} /* hero shapes */ .hero-shape{position:absolute; pointer-events:none; z-index:0} .float-y{animation:float-y 7s ease-in-out infinite} .drift{animation:drift 9s ease-in-out infinite} .spin-slow{animation:spin-slow 26s linear infinite} /* badge pill row */ .pill-row{display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 18px; border-radius:var(--r-pill); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-s); font-size:14.5px; font-family:var(--font-d); font-weight:500} .pill-row .dotc{width:8px;height:8px;border-radius:50%;background:#27c08a;box-shadow:0 0 0 4px rgba(39,192,138,.18)} .pill-row b{background:var(--teal-wash); color:var(--teal); border-radius:var(--r-pill); padding:5px 12px; font-weight:600} /* big CTA band */ .cta-band{position:relative; overflow:hidden; border-radius:clamp(18px,2vw,28px); background:var(--ink); color:var(--paper); padding:clamp(40px,6vw,80px)} .cta-band .glow{position:absolute; width:520px;height:520px;border-radius:50%; filter:blur(20px); opacity:.5; background:radial-gradient(circle at 30% 30%,rgba(243,142,114,.5),transparent 62%); right:-120px; top:-160px; pointer-events:none} /* number marquee for cases */ .kpi{display:flex; flex-direction:column; gap:6px} .kpi b{font-family:var(--font-d); font-weight:700; font-size:30px; color:var(--ink); letter-spacing:-.02em} .kpi span{font-size:13.5px; color:var(--muted)} /* ============================================================ INNER PAGE HERO ============================================================ */ .phero{position:relative; overflow:hidden; padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(48px,6vw,80px)} .phero-grid-bg{position:absolute; inset:0; z-index:0; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:58px 58px; -webkit-mask:radial-gradient(110% 80% at 80% 0,#000,transparent 70%); mask:radial-gradient(110% 80% at 80% 0,#000,transparent 70%); opacity:.55} .phero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,4vw,64px); align-items:center} .phero h1{font-size:clamp(36px,5.2vw,68px); line-height:1; letter-spacing:-.03em; max-width:13ch} .phero .lede{max-width:46ch; margin-top:22px} .phero-actions{display:flex; gap:13px; flex-wrap:wrap; margin-top:32px} .phero-visual{position:relative; min-height:300px} @media (max-width:900px){.phero-in{grid-template-columns:1fr} .phero-visual{min-height:240px}} /* breadcrumb */ .crumbs{display:flex; align-items:center; gap:9px; font-family:var(--font-d); font-size:14px; color:var(--muted); margin-bottom:22px} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--teal)} .crumbs span{opacity:.5} /* split section */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center} .split.wide-l{grid-template-columns:1.15fr .85fr} .split.wide-r{grid-template-columns:.85fr 1.15fr} @media (max-width:880px){.split,.split.wide-l,.split.wide-r{grid-template-columns:1fr}} /* mock dashboard panel */ .mock{background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-l); overflow:hidden} .mock-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line-2); background:var(--paper)} .mock-bar i{width:11px;height:11px;border-radius:50%;background:var(--line)} .mock-bar i:nth-child(1){background:var(--coral)} .mock-bar .mock-url{margin-left:10px; font-family:var(--font-d); font-size:12.5px; color:var(--muted); background:var(--white); border:1px solid var(--line-2); border-radius:6px; padding:4px 12px} .mock-body{padding:20px} /* bar chart (css) */ .barchart{display:flex; align-items:flex-end; gap:10px; height:140px} .barchart .bar{flex:1; border-radius:6px 6px 0 0; background:var(--teal-wash); position:relative; min-height:8px; transition:height 1s var(--ease)} .barchart .bar.hot{background:linear-gradient(180deg,var(--coral),var(--coral-l))} .barchart .bar.deep{background:var(--teal)} /* gauge */ .gauge{--p:0; width:150px;height:150px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--line-2) 0); position:relative} .gauge::before{content:''; position:absolute; inset:14px; border-radius:50%; background:var(--white)} .gauge .gv{position:relative; font-family:var(--font-d); font-weight:700; font-size:38px; color:var(--teal)} /* comparison table */ .ctable{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .ctable th,.ctable td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line-2); font-size:15.5px} .ctable thead th{font-family:var(--font-d); font-weight:600; background:var(--paper)} .ctable thead th.us{color:var(--teal)} .ctable td.mark{text-align:center} .ctable .yes{color:var(--teal)} .ctable .no{color:#c2ccd0} .ctable tr:last-child td{border-bottom:0} .ctable .col-us{background:rgba(53,117,151,.05)} /* article card */ .post{display:flex; flex-direction:column; height:100%; overflow:hidden} .post-media{height:200px; overflow:hidden} .post-media image-slot,.post-media .ph{width:100%;height:100%;border-radius:0;border:0} .post-body{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1} .post-body h3{font-size:20px; line-height:1.2} .post-meta{display:flex; gap:14px; font-family:var(--font-d); font-size:13px; color:var(--muted); margin-top:auto} /* team member */ .member{display:flex; flex-direction:column; gap:14px} .member .m-photo{aspect-ratio:3/4; border-radius:var(--r); overflow:hidden} .member .m-photo image-slot,.member .m-photo .ph{width:100%;height:100%;border-radius:0;border:0} .member h4{font-size:18px} .member .m-role{color:var(--teal); font-family:var(--font-d); font-size:14px} /* big quote slogan */ .slogan{font-family:var(--font-d); font-weight:600; font-size:clamp(26px,3.6vw,46px); line-height:1.12; letter-spacing:-.02em} /* builder demo */ .demo-shell{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,3vw,44px); align-items:stretch} @media (max-width:900px){.demo-shell{grid-template-columns:1fr}} .demo-prompt{background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:18px} .demo-input-line{font-family:var(--font-d); font-size:clamp(17px,1.8vw,22px); line-height:1.45; min-height:3em} .demo-input-line .cur{display:inline-block; width:2px; height:1.05em; background:var(--coral); vertical-align:-2px; animation:blink 1s steps(1) infinite; margin-left:2px} @keyframes blink{50%{opacity:0}} .demo-out{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-l); overflow:hidden; min-height:300px; display:flex; flex-direction:column} .demo-out .gen-block{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)} .demo-out.show .gen-block{opacity:1; transform:none} .demo-out .scan{position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(53,117,151,.08),transparent); transform:translateY(-100%); pointer-events:none} .demo-out.show .scan{animation:scan 1s var(--ease)} @keyframes scan{to{transform:translateY(100%)}} /* template thumb */ .tmpl{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); background:var(--white); box-shadow:var(--shadow-s); transition:.4s var(--ease); cursor:pointer} .tmpl:hover{transform:translateY(-5px); box-shadow:var(--shadow-m)} .tmpl .tmpl-prev{height:140px; overflow:hidden} .tmpl .tmpl-prev image-slot,.tmpl .tmpl-prev .ph{width:100%;height:100%;border:0;border-radius:0} .tmpl .tmpl-foot{padding:13px 16px; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-d); font-weight:500; font-size:14.5px} /* object/type card with photo */ .objcard{position:relative; border-radius:var(--r); overflow:hidden; min-height:240px; display:flex; align-items:flex-end; box-shadow:var(--shadow-s)} .objcard image-slot,.objcard .ph{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0} .objcard .obj-grad{position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(30,30,30,.82))} .objcard .obj-body{position:relative; z-index:2; padding:22px; color:#fff} .objcard .obj-body h3{color:#fff; font-size:21px} .objcard .obj-body p{color:rgba(255,255,255,.78); font-size:14px; margin-top:5px} /* doc/cert card */ .doc{display:flex; gap:16px; align-items:flex-start; padding:20px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--white); box-shadow:var(--shadow-s)} .doc .doc-thumb{width:54px; height:70px; flex:0 0 auto; border-radius:7px; background:var(--teal-wash); display:grid; place-items:center; color:var(--teal)}