/* ========================================================================== Servify — design language of servifylabs.com (light glass, gray-900 ink, blue-600 CTA, hairline cards, cosmos hero) applied to the creme layout system (hero → works carousel → stats → logos → sticky process cards → explore → bento → pricing → testimonials → FAQ → CTA → footer). ========================================================================== */ :root{ --bg:#FAFAFA; --ink:#111827; /* gray-900 */ --ink-2:#374151; /* gray-700 */ --body:#6b7280; /* gray-500 */ --muted:#9ca3af; /* gray-400 */ --line:rgba(229,231,235,.7); /* gray-200/70 */ --line-strong:rgba(17,24,39,.1); /* gray-900/10 */ --blue:#2563eb; /* blue-600 */ --blue-h:#3b82f6; /* blue-500 */ --dark:#09090b; --ease:cubic-bezier(.22,1,.36,1); --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-card:0 16px 50px -24px rgba(0,0,0,.25); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} /* iOS Safari ignores overflow-x on alone: clip the root too so the page cannot pan sideways */ @supports (overflow-x:clip){html,body{overflow-x:clip}} body{ font-family:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-feature-settings:"cv11","ss01"; font-weight:400; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100vw; position:relative; } a{text-decoration:none;color:inherit} button{font:inherit;border:none;background:none;cursor:pointer;color:inherit} img{max-width:100%;display:block} .container{max-width:1152px;margin:0 auto;padding:0 24px} .container-wide{max-width:1280px;margin:0 auto;padding:0 24px} /* Global dot grid (old site's DotPattern) */ .dots{position:fixed;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(163,163,163,.6) 1px,transparent 1.2px);background-size:16px 16px; -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 65%);mask-image:radial-gradient(ellipse at center,#000 0%,transparent 65%)} main{position:relative;z-index:1} @supports (overflow-x:clip){main{overflow-x:clip}} /* second fence for WebKit: nothing inside the page can widen the viewport */ /* ============ TYPE ============ */ .eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .h1{font-size:60px;font-weight:500;letter-spacing:-.025em;line-height:1.05} .h2{font-size:48px;font-weight:500;letter-spacing:-.025em;line-height:1.08} .h3{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1.15} .h4{font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.25} .lead{font-size:18px;line-height:1.6;color:var(--body)} .p{font-size:16px;line-height:1.625;color:var(--body)} .p-sm{font-size:14px;line-height:1.6;color:var(--body)} .dim{color:var(--body)} .mixed{color:var(--body)} .mixed .dark{color:var(--ink)} /* ============ REVEAL ============ */ .js [data-rise]{opacity:0;transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)} [data-rise].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js [data-rise]{opacity:1;transform:none;transition:none}} /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9999px; font-size:14px;font-weight:600;padding:12px 24px;line-height:1.25;white-space:nowrap; transition:background-color .2s,color .2s,border-color .2s,transform .2s} .btn svg{width:16px;height:16px;flex:none} .btn:active{transform:scale(.98)} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-h)} .btn-ghost{color:var(--ink);font-weight:500;padding:12px 20px} .btn-ghost:hover{color:var(--body)} .btn-ghost.on-dark{color:rgba(255,255,255,.9)} .btn-ghost.on-dark:hover{color:#fff} .btn-glass{background:rgba(255,255,255,.8);border:1px solid var(--line-strong);color:var(--ink); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)} .btn-glass:hover{background:#fff;border-color:rgba(17,24,39,.2)} .btn-block{width:100%} /* ============ CARD ============ */ .card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm)} /* ============ NAV ============ */ .nav{position:fixed;left:0;right:0;top:0;z-index:50;border-bottom:1px solid transparent; transition:background-color .3s,border-color .3s,box-shadow .3s} .nav.scrolled{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-color:var(--line);box-shadow:var(--shadow-sm)} .nav-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;transition:padding .3s} .nav.scrolled .nav-inner{padding:12px 24px} .brand{display:inline-flex;align-items:center;gap:10px} .brand-badge{width:48px;height:48px;border-radius:9999px;background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px rgba(0,0,0,.05); display:grid;place-items:center;overflow:hidden;transition:background-color .3s,box-shadow .3s,width .3s,height .3s} .brand-badge img{width:44px;height:44px;object-fit:contain} .nav.scrolled .brand-badge{background:transparent;box-shadow:none;width:40px;height:40px} .nav.scrolled .brand-badge img{width:40px;height:40px} .brand-name{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff;transition:color .3s} .nav.scrolled .brand-name{color:var(--ink)} .nav-pill{display:flex;align-items:center;gap:4px;padding:6px;border-radius:9999px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .3s,border-color .3s} .nav.scrolled .nav-pill{background:rgba(17,24,39,.03);border-color:rgba(17,24,39,.1)} .nav-link{padding:8px 14px;border-radius:9999px;font-size:14px;font-weight:500;color:rgba(255,255,255,.8);transition:color .2s,background-color .2s} .nav-link:hover{color:#fff;background:rgba(255,255,255,.05)} .nav.scrolled .nav-link{color:#4b5563} .nav.scrolled .nav-link:hover{color:var(--ink);background:rgba(17,24,39,.05)} .nav-cta{margin-left:4px;padding:8px 16px} /* ============ HERO ============ */ .hero{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);padding:184px 24px 0;display:flex;flex-direction:column} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg picture,.hero-bg img{display:block;width:100%;height:100%} .hero-bg img{object-fit:cover;filter:hue-rotate(200deg) saturate(1.25)} .hero-ring{position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);pointer-events:none} .hero-content{position:relative;z-index:3;max-width:1024px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px} .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:9999px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-size:14px;font-weight:500;color:rgba(255,255,255,.9)} .badge .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:9999px;background:rgba(255,255,255,.9);color:var(--ink);font-size:12px;font-weight:500} /* .logo-mask lives inline in index.html (url() in var() resolves against the stylesheet in Chrome) */ .badge-logo{width:13px;height:13px} .hero .h1{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 30px rgba(0,0,0,.45)} .hero .sub{max-width:42rem;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.5)} .hero-buttons{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px} .hero-fade{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:2;pointer-events:none; background:linear-gradient(to bottom,rgba(250,250,250,0) 0%,rgba(250,250,250,.028) 10%,rgba(250,250,250,.104) 20%,rgba(250,250,250,.216) 30%,rgba(250,250,250,.352) 40%,rgba(250,250,250,.5) 50%,rgba(250,250,250,.648) 60%,rgba(250,250,250,.784) 70%,rgba(250,250,250,.896) 80%,rgba(250,250,250,.972) 90%,rgba(250,250,250,1) 100%)} /* ============ MARQUEE ============ */ .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%)} .marquee-track{display:flex;align-items:center;gap:32px;width:max-content;animation:marquee var(--speed,60s) linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============ WORKS CAROUSEL (sits on the hero's fade) ============ */ .works{position:relative;z-index:3;margin-top:80px;padding:10px 0 56px;display:flex;align-items:center} .work-card{display:flex;flex-direction:column;gap:16px} .work-thumb{border-radius:16px;border:1px solid var(--line-strong);overflow:hidden;position:relative;background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 60px -24px rgba(0,0,0,.45)} .work-thumb.wide{width:880px;height:550px} .work-thumb.phone{width:250px;height:550px} .work-thumb img,.explore-thumb img,.work-thumb picture,.explore-thumb picture{width:100%;height:100%;object-fit:cover;display:block} .work-meta{display:flex;align-items:center;gap:10px} .work-icon{width:24px;height:24px;border-radius:6px;flex:none;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .work-icon img,.explore-icon img{width:100%;height:100%;object-fit:cover;display:block} .work-meta p{font-size:14px;font-weight:500;color:var(--body)} /* ============ STATS ============ */ .stats{padding:96px 24px 0} .how-tl+.stats{padding-top:40px} /* bare stats band: numbers + labels separated by hairlines, no cards */ .stats-inner.bare{gap:0;padding:24px 0} .stat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:16px 24px;border-left:1px solid var(--line)} .stat:first-child{border-left:none} .stat .num{font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)} .stat .label{font-size:14px;font-weight:500;color:var(--body);max-width:260px;line-height:1.5} .stats-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1152px;margin:0 auto} .stat-card{padding:28px;height:220px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start} .stat-card .label{font-size:14px;font-weight:500;color:var(--body)} .stat-card .num{font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)} /* ============ LOGOS ============ */ .logos{padding:80px 0 96px;display:flex;flex-direction:column;align-items:center;gap:24px} .logos .cap{font-size:14px;font-weight:500;color:var(--body)} .logos .marquee{width:100%;height:80px;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 80%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 80%,transparent 100%)} .logos .marquee-track{gap:60px;height:80px} .logo-img{height:30px;width:auto;opacity:.4;filter:grayscale(1);display:block;transition:opacity .3s} .logo-img:hover{opacity:.8} /* ============ HOW WE WORK (sticky stacked cards) ============ */ .how{padding:128px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:96px} .how-head{max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px} .sticky-card{position:sticky;width:100%;max-width:1152px;height:560px;display:flex;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-card)} /* explicit classes, not :nth-of-type - the intro block above the cards is also a div */ .sticky-card.sc-1{top:112px} .sticky-card.sc-2{top:140px;height:540px} .sticky-card.sc-3{top:168px;height:540px} .sticky-card.sc-4{top:196px;height:540px} .sticky-spacer{position:sticky;top:256px;width:100%;max-width:1152px;height:540px;opacity:0;pointer-events:none} .sc-left{width:45%;padding:40px;display:flex;flex-direction:column;gap:20px} .sc-label{display:flex;align-items:center;gap:10px} .sc-icon{width:32px;height:32px;border-radius:10px;background:#f3f4f6;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)} .sc-icon svg{width:16px;height:16px} .sc-label span:last-child{font-size:14px;font-weight:600;color:var(--body)} .sc-left .h2{font-size:38px} .sc-left .desc{width:88%} .sc-right{width:55%;height:100%;position:relative;overflow:hidden;background:#f9fafb;border-left:1px solid var(--line)} .sc-right .grain{position:absolute;inset:0; background-image:radial-gradient(rgba(163,163,163,.55) 1px,transparent 1.2px);background-size:16px 16px; -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%)} .dash-wrap,.chat-wrap{opacity:0;transform:translateX(120px); transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s} .sticky-card.in .dash-wrap,.sticky-card.in .chat-wrap{opacity:1;transform:none} .dash-wrap{position:absolute;right:0;bottom:56px;width:551px;height:454px;border-radius:12px 0 0 12px;overflow:hidden; background:#fff;box-shadow:0 0 0 1px var(--line-strong),0 24px 60px -24px rgba(0,0,0,.35)} .task-zone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px} .task-card,.add-card{width:368px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px; box-shadow:0 24px 60px -30px rgba(0,0,0,.25)} .task-card{display:flex;flex-direction:column;gap:18px} .task-top{display:flex;justify-content:space-between;align-items:center} .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:500} .tag-round{padding:4px 10px;border-radius:9999px;border:1px solid var(--line);background:#f9fafb;color:var(--body);font-size:12px;font-weight:500} .task-title{font-size:15px;font-weight:500;color:var(--ink)} .task-sub{font-size:13px;color:var(--body);margin-top:2px} .progress{position:relative;width:100%;height:8px;border-radius:9999px;background:#e5e7eb;overflow:hidden} .progress i{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:9999px;background:var(--blue);transition:width 1.4s var(--ease) .4s} .in .progress i{width:74%} .task-pct{font-size:11px;color:var(--body)} .add-card{display:flex;align-items:center;gap:12px} .add-icon{width:32px;height:32px;border-radius:9999px;background:#f3f4f6;border:1px solid var(--line);display:grid;place-items:center;color:var(--body);font-size:18px;line-height:1} .add-card span:last-child{font-size:14px;font-weight:500;color:var(--body)} .tools-zone{position:absolute;inset:0;display:flex;align-items:center} .tools-zone .marquee{width:100%} .tool-card{width:176px;height:176px;border-radius:24px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:32px; box-shadow:0 24px 60px -30px rgba(0,0,0,.25)} .tool-card .logo-mask{width:88px;height:88px} .chat-wrap{position:absolute;right:0;bottom:48px;width:551px;height:454px;border-radius:12px 0 0 12px;overflow:hidden;background:#fff; box-shadow:0 0 0 1px var(--line-strong),0 24px 60px -24px rgba(0,0,0,.35);padding:24px;display:flex;flex-direction:column;gap:16px} /* chat rows */ .msg{display:flex;gap:14px;align-items:flex-start} .avatar{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:15px} .avatar.you{background:linear-gradient(135deg,#60a5fa,#2563eb)} .avatar.us{background:var(--ink)} .msg-body{display:flex;flex-direction:column;gap:4px;flex:1} .msg-head{display:flex;align-items:center;gap:8px} .msg-head b{font-size:14px;font-weight:600;color:var(--ink)} .msg-head time{font-size:11px;color:var(--muted)} .msg-text{font-size:14px;line-height:1.45;color:var(--ink-2)} /* ============ EXPLORE WORK ============ */ .explore{padding:128px 24px 0;display:flex;flex-direction:column;align-items:center;gap:64px;scroll-margin-top:96px} .explore-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center} .explore-head .lead{max-width:520px} .explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;max-width:1152px} .explore-card{padding:16px;display:flex;flex-direction:column;gap:16px;transition:box-shadow .3s,border-color .3s} .explore-card:hover{box-shadow:var(--shadow-card);border-color:rgba(17,24,39,.15)} .explore-thumb{aspect-ratio:1.4;border-radius:12px;border:1px solid var(--line-strong);overflow:hidden;position:relative;background:#fff} .explore-meta{display:flex;gap:12px;align-items:center;padding:4px 4px 8px} .explore-icon{width:40px;height:40px;border-radius:10px;flex:none;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .explore-meta .title{font-size:15px;font-weight:600;color:var(--ink)} .explore-meta .tagline{font-size:14px;color:var(--body)} /* ============ BENTO ============ */ .bento-sec{padding:128px 24px 160px;display:flex;flex-direction:column;align-items:center;gap:96px} .bento-head{max-width:640px;text-align:center} .bento{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:24px;width:100%;max-width:1152px} .bcard{height:475px;padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:32px} .bcard.span2{grid-column:span 2} .bcard .btext{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .bcard .btext.left{align-items:flex-start;text-align:left;max-width:540px} /* bento visuals - four small UI scenes of our own (agent run, sprint week, design-system sheet, plan controls) */ .bz{position:absolute;left:0;right:0;top:0;height:300px;display:flex;justify-content:center;align-items:center;overflow:hidden} .bz.rise{top:0;bottom:176px;height:auto;align-items:flex-end} .bz .glow{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:340px;height:190px;border-radius:9999px;background:var(--blue);filter:blur(64px);opacity:.16;pointer-events:none} .mini{position:relative;background:#fff;border:1px solid var(--line-strong);border-radius:14px;font-size:11px;color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 50px -24px rgba(0,0,0,.3)} .mini-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)} .mini-head b{font-size:12px;font-weight:600} .mini-head img{width:16px;height:16px;object-fit:contain} .st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:9999px;font-size:10px;font-weight:600;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0} .st i{width:6px;height:6px;border-radius:50%;background:#10b981} .st.blue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.st.blue i{background:var(--blue)} /* 1 · agent run */ .v1{width:300px} .js .v1{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s} .in .v1{opacity:1;transform:none} .v1 .row{display:flex;align-items:center;gap:10px;padding:9px 14px} .js .v1 .row{opacity:0;transform:translateX(-8px); transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)} .in .v1 .row{opacity:1;transform:none} .v1 .ck{width:16px;height:16px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;flex:none} .v1 .ck svg{width:9px;height:9px} .v1 .ck.run{background:#fff;border:2px solid var(--blue)} .v1 .ck.run::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);animation:v1pulse 1.2s ease-in-out infinite} .v1 .row>span:not(.ck){flex:1;font-weight:500} .v1 .row small{color:var(--muted);font-size:10px} .v1 .bar{margin:6px 14px 14px;height:4px;border-radius:9999px;background:#e5e7eb;overflow:hidden} .v1 .bar i{display:block;height:100%;width:0;background:var(--blue);transition:width 1.4s var(--ease) .9s} .in .v1 .bar i{width:72%} @keyframes v1pulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}} /* 2 · question / answer chat cards (restored - Julian preferred it) */ .b2-zone{position:absolute;inset:0} .b2-msg{position:absolute;width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px; box-shadow:0 20px 40px -20px rgba(0,0,0,.2); opacity:0;transform:translateY(60px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)} .in .b2-msg{transform:translateY(0)} .b2-msg .msg .avatar{width:36px;height:36px;border-radius:10px;font-size:13px} .in .b2-msg.faded{opacity:var(--fade,.3)} .in .b2-msg.full{opacity:1} .b2-msg.center{left:50%;transform:translateX(-50%) translateY(60px)} .in .b2-msg.center{transform:translateX(-50%) translateY(0)} /* 3 · design-system sheet */ .v3{width:640px;height:258px;border-radius:14px 14px 0 0;border-bottom:none;overflow:hidden;} .js .v3{opacity:0;transform:translateY(80px); transition:opacity .9s var(--ease),transform .9s var(--ease); background:#fff linear-gradient(rgba(17,24,39,.035) 1px,transparent 1px) 0 0/100% 24px} .in .v3{opacity:1;transform:none} .v3 .cols{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:0;padding:16px 18px} .v3 .col{display:flex;flex-direction:column;gap:12px;padding:0 14px;border-left:1px solid var(--line)} .v3 .col:first-child{border-left:none;padding-left:0} .v3 .col small{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .v3 .sw{display:flex;gap:10px} .v3 .sw i{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .v3 .swl{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--ink-2)} .v3 .swl span{display:flex;align-items:center;gap:6px}.v3 .swl span i{width:8px;height:8px;border-radius:2px;display:inline-block} .v3 .aa{font-size:54px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)} .v3 .tl2{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--ink-2)} .v3 .tl2 b{font-weight:600;color:var(--ink)} .v3 .cmp{display:flex;flex-direction:column;gap:8px} .v3 .btn{padding:8px 14px;font-size:11px;align-self:flex-start} .v3 .inp{height:30px;border:1px solid var(--line-strong);border-radius:9px;padding:0 10px;display:flex;align-items:center;color:var(--muted);font-size:11px;background:#fff} .v3 .crow{display:flex;align-items:center;gap:10px} .v3 .tg{width:34px;height:20px;border-radius:9999px;background:var(--blue);position:relative;flex:none} .v3 .tg::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff} .v3 .chip{padding:3px 8px;border-radius:9999px;border:1px solid var(--line);background:#f9fafb;font-size:10px;font-weight:500;color:var(--ink-2)} .v3 .chip.on{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8} .v3-fade{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,#fff);z-index:3;pointer-events:none} /* 4 · plan controls */ .v4{width:300px} .js .v4{opacity:0;transform:translateY(-40px) scale(.96);transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s} .in .v4{opacity:1;transform:none} .v4 .plan{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)} .v4 .plan b{font-size:12px;font-weight:600;display:block} .v4 .plan small{font-size:10px;color:var(--muted)} .v4 .plan em{font-style:normal;font-size:12px;font-weight:600} .v4 .plan em small{font-weight:400} .v4 .sw{display:flex;align-items:center;gap:12px;padding:12px 14px} .v4 .sw div{flex:1} .v4 .sw b{font-size:12px;font-weight:600;display:block} .v4 .sw small{font-size:10px;color:var(--muted)} .v4 .tg{width:38px;height:22px;border-radius:9999px;background:#e5e7eb;position:relative;flex:none;transition:background .4s var(--ease) 1s} .v4 .tg::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .4s var(--ease) 1s} .in .v4 .tg{background:var(--blue)}.in .v4 .tg::after{transform:translateX(16px)} .v4 .foot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-2);background:#f9fafb;border-radius:0 0 14px 14px} .v4 .foot svg{width:13px;height:13px;color:var(--blue);flex:none} .v4 .foot span+span{margin-left:auto;color:var(--muted)} @media(max-width:809px){ .v3{width:100%}.v3 .cols{grid-template-columns:1fr 1fr}.v3 .col:last-child{display:none} } /* ============ PRICING ============ */ .pricing{padding:0 24px 160px;display:flex;flex-direction:column;align-items:center;gap:96px;scroll-margin-top:120px} .pricing-head{max-width:640px;text-align:center} .pricing-content{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:1000px} .pricing-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%} .pcard{padding:32px;display:flex;flex-direction:column;gap:32px} .pcard.dark{background:var(--dark);border-color:rgba(255,255,255,.1);color:#fff} .pcard-top{display:flex;flex-direction:column;gap:20px} .pcard-head{display:flex;align-items:center;gap:16px} .picon{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:#f3f4f6;border:1px solid var(--line);color:var(--ink-2)} .picon svg{width:22px;height:22px} .pcard.dark .picon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff} .pcard-head .t{display:flex;flex-direction:column;gap:2px} .pcard-head .t .sub{font-size:14px;color:var(--body)} .pcard.dark .pcard-head .t .sub{color:rgba(255,255,255,.55)} .pcard-desc{width:92%} .pcard.dark .pcard-desc{color:rgba(255,255,255,.7)} .price-row{display:flex;align-items:baseline;gap:8px} .price{font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink)} .pcard.dark .price{color:#fff} .price-per{font-size:14px;color:var(--body)} .pcard.dark .price-per{color:rgba(255,255,255,.6)} .price-note{font-size:13px;font-weight:500;color:var(--muted);margin-top:10px} .pcard.dark .price-note{color:rgba(255,255,255,.5)} .inclusions{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:24px} .pcard.dark .inclusions{border-top-color:rgba(255,255,255,.1)} .inclusions .head{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px} .pcard.dark .inclusions .head{color:#fff} .inc{display:flex;align-items:flex-start;gap:10px} .inc svg{width:16px;height:16px;flex:none;color:var(--blue);margin-top:2px} .pcard.dark .inc svg{color:#60a5fa} .inc span{font-size:14px;line-height:1.6;color:var(--ink-2)} .pcard.dark .inc span{color:rgba(255,255,255,.8)} .book-card{width:100%;max-width:640px;padding:24px 24px 24px 28px;display:flex;align-items:center;gap:24px} .book-card .txt{flex:1;display:flex;flex-direction:column;gap:4px} .book-avatar{width:44px;height:44px;border-radius:9999px;object-fit:cover;display:block;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)} /* ============ TESTIMONIALS ============ */ .testimonials{padding:128px 0;display:flex;flex-direction:column;align-items:center;gap:64px;scroll-margin-top:96px} .testimonials .head{max-width:640px;text-align:center;padding:0 24px} .testimonials .marquee{width:100%} .testimonials .marquee-track{gap:20px;align-items:stretch} .tcard{width:520px;min-height:320px;padding:32px;display:flex;flex:none} .tcard-inner{display:flex;flex-direction:column;justify-content:space-between;gap:28px;width:100%} .tcard .quote{font-size:17px;font-weight:400;line-height:1.55;color:var(--ink)} .tcard-bottom{display:flex;justify-content:space-between;align-items:flex-end} .tcard-person{display:flex;align-items:center;gap:12px} .tcard-ava{width:40px;height:40px;border-radius:12px;background:#e5e7eb;flex:none;object-fit:cover;display:block} .tcard-person .name{font-size:14px;font-weight:600;color:var(--ink)} .tcard-person .role{font-size:14px;color:var(--body)} .tcard-logo{font-size:14px;font-weight:600;color:var(--muted)} /* ============ FAQ ============ */ .faq-sec{padding:128px 24px 96px;display:flex;flex-direction:column;align-items:center;gap:56px} .faq-list{width:100%;max-width:800px;display:flex;flex-direction:column;gap:16px} .faq-cat{margin-top:16px} .faq-cat:first-child{margin-top:0} .faq-item{background:rgba(255,255,255,.7);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow-sm); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:20px 28px;display:flex;gap:24px;align-items:flex-start;cursor:pointer;transition:border-color .2s} .faq-item:hover{border-color:rgba(17,24,39,.2)} .faq-item .qa{flex:1;display:flex;flex-direction:column} .faq-item .q{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--ink)} .faq-item .a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease),margin .45s var(--ease)} .faq-item.open .a{max-height:320px;margin-top:14px} .faq-plus{width:20px;height:20px;flex:none;position:relative;margin-top:2px;color:var(--muted);transition:transform .3s var(--ease)} .faq-plus::before,.faq-plus::after{content:"";position:absolute;background:currentColor;border-radius:2px} .faq-plus::before{left:2px;right:2px;top:9px;height:2px} .faq-plus::after{top:2px;bottom:2px;left:9px;width:2px} .faq-item.open .faq-plus{transform:rotate(45deg)} /* ============ CTA + FOOTER ============ */ .cta-wrap{padding:0 24px;display:flex;justify-content:center} .cta-bar{display:flex;align-items:center;gap:32px;padding:8px 8px 8px 28px;border-radius:9999px;width:max-content; background:rgba(255,255,255,.8);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .cta-bar p{font-size:14px;font-weight:500;color:var(--ink)} .footer{margin-top:96px;border-top:1px solid var(--line)} .footer-inner{max-width:1152px;margin:0 auto;padding:64px 24px 40px;display:flex;flex-direction:column;gap:56px} .footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px} .footer-sub{max-width:340px;display:flex;flex-direction:column;gap:20px} .footer-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .footer-brand img{width:40px;height:40px;object-fit:contain} .newsletter{background:#fff;border:1px solid var(--line-strong);border-radius:9999px;padding:6px;display:flex;gap:6px;width:300px;box-shadow:var(--shadow-sm)} .newsletter input{flex:1;min-width:0;border:none;outline:none;background:none;padding-left:12px;font:inherit;font-size:14px;color:var(--ink)} .newsletter input::placeholder{color:var(--muted)} .newsletter button{padding:9px 16px;font-size:14px} .footer-links{display:flex;flex-direction:column;gap:12px;min-width:200px} .footer-links h2{margin-bottom:8px} .footer-links a{font-size:14px;color:#4b5563;transition:color .2s} .footer-links a:hover{color:var(--ink)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:32px} .footer-bottom .meta{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted)} .footer-bottom .meta b{font-weight:600;color:var(--ink)} .socials{display:flex;gap:10px} .socials a{width:36px;height:36px;border-radius:9999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);transition:background-color .2s,color .2s} .socials a:hover{background:var(--ink);color:#fff} .socials svg{width:16px;height:16px} /* ============ CUSTOM CURSOR (old site's follower dot) ============ */ .sw-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transition:opacity .2s ease;will-change:transform} .sw-cursor__dot{display:block;width:9px;height:9px;border-radius:50%;background:rgba(9,9,11,.85);transition:transform .25s ease,background-color .25s ease} .sw-cursor.lg .sw-cursor__dot{transform:scale(2.444);background:rgba(9,9,11,.35)} .sw-cursor.on-dark .sw-cursor__dot{background:rgba(255,255,255,.9)} .sw-cursor.on-dark.lg .sw-cursor__dot{background:rgba(255,255,255,.4)} @media (hover:none){.sw-cursor{display:none!important}} /* ============ RESPONSIVE ============ */ @media(max-width:1199px){ .h1{font-size:48px}.h2{font-size:40px}.h3{font-size:28px} .sc-left .h2{font-size:32px} .bento{gap:20px} .bcard{height:450px;padding:32px 20px} .pricing-cards{grid-template-columns:1fr;max-width:600px} .explore-grid{grid-template-columns:1fr} .footer-top{flex-direction:column} .dash-wrap,.chat-wrap{width:370px} } @media(max-width:809px){ .bz .glow,.b1-glow,.b3-glow{filter:blur(40px)} .h1{font-size:38px}.h2{font-size:32px}.h3{font-size:24px}.h4{font-size:19px} .nav-link{display:none} .brand-name{display:none} .hero{padding:132px 20px 0} .hero-buttons{flex-direction:column;gap:12px} .works{margin-top:48px} .work-thumb.wide{width:335px;height:210px} .work-thumb.phone{width:100px;height:210px} .stats{padding:64px 20px 0} .stats-inner{grid-template-columns:1fr} .stat-card{height:180px} .stats-inner.bare{gap:8px} .stat{border-left:none;border-top:1px solid var(--line);padding:24px 0} .stat:first-child{border-top:none} .how{padding:80px 20px 20px;gap:56px} .sticky-card{flex-direction:column;height:auto;position:relative;top:0!important} .sticky-spacer{display:none} .sc-left,.sc-right{width:100%} .sc-left{padding:24px;gap:16px} .sc-left .desc{width:100%} .sc-right{min-height:280px;border-left:none;border-top:1px solid var(--line)} .dash-wrap,.chat-wrap{width:320px;height:280px;bottom:0} .task-card,.add-card{width:300px} .bento{grid-template-columns:1fr} .bcard.span2{grid-column:span 1} .b3-dash{width:100%} .explore,.bento-sec{padding:80px 20px 96px;gap:56px} .pricing{padding:0 20px 96px;gap:56px} .book-card{flex-direction:column;align-items:flex-start;gap:16px} .testimonials{padding:80px 0} .tcard{width:min(340px,calc(100vw - 40px));padding:24px} .faq-sec{padding:80px 20px 64px} .faq-item{padding:18px 20px} .cta-bar{padding:8px} .cta-bar p{display:none} .footer-inner{padding:48px 20px 32px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px} } /* ============ HOW WE WORK — timeline (NativData-style process, in our language) ============ Centre line that fills with scroll, icon nodes on the line, steps alternate sides; the step's visual sits on the opposite side of its text. Sticky-card CSS above stays for /mvp-offer. */ .how-tl{padding:128px 24px 48px;display:flex;flex-direction:column;align-items:center;gap:72px} .how-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:9999px;background:rgba(255,255,255,.8); border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm); font-size:13px;font-weight:600;color:var(--ink-2)} .how-pill i{width:8px;height:8px;border-radius:9999px;background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)} .how-tl .how-head{gap:20px} .mixed .accent{color:var(--blue)} .tl{position:relative;width:100%;max-width:1152px;display:flex;flex-direction:column;gap:88px;padding:16px 0 32px} .tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(17,24,39,.08);border-radius:2px} .tl-fill{position:absolute;left:50%;top:0;width:2px;height:0;transform:translateX(-50%);border-radius:2px; background:linear-gradient(to bottom,var(--blue) 0%,#60a5fa 100%);box-shadow:0 0 12px 2px rgba(37,99,235,.35);transition:height .25s ease-out} .tl-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center} .tl-node{grid-column:2;grid-row:1;justify-self:center;width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid var(--line-strong); display:grid;place-items:center;color:var(--ink-2);position:relative;z-index:1; box-shadow:0 0 0 8px var(--bg),0 8px 24px -10px rgba(0,0,0,.25);transition:border-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)} .tl-node svg{width:22px;height:22px} .tl-step.in .tl-node{border-color:rgba(37,99,235,.45);color:var(--blue);box-shadow:0 0 0 8px var(--bg),0 0 34px -4px rgba(37,99,235,.55)} .tl-text{grid-row:1;display:flex;flex-direction:column;gap:14px;} .js .tl-text{opacity:0;transform:translateY(24px); transition:opacity .8s var(--ease),transform .8s var(--ease)} .tl-step.in .tl-text{opacity:1;transform:none} .tl-step .tl-text{grid-column:1;align-items:flex-end;text-align:right;padding-right:40px} .tl-step.alt .tl-text{grid-column:3;align-items:flex-start;text-align:left;padding-left:40px} .tl-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--body)} .tl-num{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 7px;border-radius:9999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-size:11px;font-weight:700;letter-spacing:.04em} .tl-text .h2{font-size:36px;max-width:440px} .tl-text .desc{max-width:420px} .tl-visual{grid-row:1;display:flex;} .js .tl-visual{opacity:0;transform:translateX(40px);transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s} .tl-step .tl-visual{grid-column:3;justify-content:flex-start;padding-left:40px} .tl-step.alt .tl-visual{grid-column:1;justify-content:flex-end;padding-right:40px} .js .tl-step.alt .tl-visual{transform:translateX(-40px)} /* The reveal reset must outweigh .js .tl-step.alt .tl-visual, or the alt step keeps its -40px parked offset forever (step 2 sat left of the others on phones). */ .tl-step.in .tl-visual,.js .tl-step.in .tl-visual{opacity:1;transform:none} .tl-frame{width:100%;max-width:470px;border-radius:16px;background:#fff;border:1px solid var(--line-strong);overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05),0 28px 60px -30px rgba(0,0,0,.35)} .tl-frame.shot{aspect-ratio:16/10} .tl-frame.shot>img,.tl-frame.shot>picture>img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block} .tl-frame.stage{padding:24px;background:#f9fafb;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:294px} .tl-frame.stage .grain{position:absolute;inset:0;pointer-events:none} .tl-frame.stage>*:not(.grain){position:relative} .tl-frame.stage .task-card,.tl-frame.stage .add-card{width:100%;max-width:368px} .tl-tools{display:flex;gap:14px;justify-content:center} .tl-tool{width:112px;height:112px;border-radius:22px;background:#fff;border:1px solid var(--line);display:grid;place-items:center; box-shadow:0 20px 40px -24px rgba(0,0,0,.3);animation:tl-float 6s ease-in-out infinite;animation-delay:var(--fd,0s)} .tl-tool .logo-mask{width:56px;height:56px} @keyframes tl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @media (prefers-reduced-motion:reduce){.tl-tool{animation:none}.tl-text,.tl-visual{opacity:1;transform:none;transition:none}} .tl-frame.chat{padding:22px 24px;display:flex;flex-direction:column;gap:14px} @media(max-width:1199px){ .tl-text .h2{font-size:30px} .tl-step{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)} .tl-step .tl-text,.tl-step.alt .tl-text{padding-left:24px;padding-right:24px} .tl-step .tl-visual,.tl-step.alt .tl-visual{padding-left:24px;padding-right:24px} } @media(max-width:809px){ .how-tl{padding:80px 20px 32px;gap:48px} .tl{gap:56px;padding:8px 0 16px} .tl-line,.tl-fill{left:28px} .tl-step{grid-template-columns:56px minmax(0,1fr);row-gap:20px} .tl-node{grid-column:1;grid-row:1;justify-self:start;width:48px;height:48px;border-radius:14px;margin-left:4px} .tl-node svg{width:20px;height:20px} .tl-step .tl-text,.tl-step.alt .tl-text{grid-column:2;grid-row:1;align-items:flex-start;text-align:left;padding:0 0 0 16px} .tl-step .tl-visual,.tl-step.alt .tl-visual{grid-column:2;grid-row:2;justify-content:flex-start;padding:0 0 0 16px;transform:translateY(24px)} .tl-text .h2{font-size:28px} } /* ============ NO-JS SAFETY ============ Reveal states are only "hidden first" when the .js class is present (set in ). If scripts fail or are blocked in an in-app browser, everything renders in its final state. */ html:not(.js) [data-rise],html:not(.js) .tl-text,html:not(.js) .tl-visual,html:not(.js) .b1-tile,html:not(.js) .b2-msg, html:not(.js) .b3-dash,html:not(.js) .b4-panel,html:not(.js) .b4-item,html:not(.js) .dash-wrap,html:not(.js) .chat-wrap, html:not(.js) .v1,html:not(.js) .v1 .row,html:not(.js) .v3,html:not(.js) .v4{opacity:1!important;transform:none!important} html:not(.js) .b1-tile{transform:translate(-50%,-50%)!important} html:not(.js) .b2-msg.center{transform:translateX(-50%)!important} html:not(.js) .b2-msg.faded{opacity:var(--fade,.3)!important} html:not(.js) .progress i{width:74%!important} html:not(.js) .v1 .bar i{width:72%!important} html:not(.js) .v4 .tg{background:var(--blue)} html:not(.js) .v4 .tg::after{transform:translateX(16px)} html:not(.js) .tl-fill{height:100%} html:not(.js) .tl-node{border-color:rgba(37,99,235,.45);color:var(--blue)}