/* ========================================================================== Finbite — Design System Fonts are preconnected + loaded from (see HTML) rather than @import, so the browser can fetch them without waiting on this file. ========================================================================== */ :root{ --ink:#0b0c0d; --ink-soft:#3f4247; --muted:#6b6f76; --line:#e7e8ea; --line-soft:#f0f1f2; --paper:#ffffff; --panel:#fafafa; --panel-2:#f5f6f2; --lime:#e0ff82; --lime-deep:#c7f24e; --lime-ink:#26330a; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(11,12,13,.06); --shadow-md:0 12px 32px -12px rgba(11,12,13,.18); --shadow-lg:0 24px 60px -20px rgba(11,12,13,.28); --maxw:1180px; --dur:.5s; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;} h1,h2,h3,h4,p{margin:0;} .container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } .dot-bg{ background-image:radial-gradient(rgba(231,232,234,.5) 1.4px, transparent 1.4px); background-size:22px 22px; } section{position:relative;} /* ---------- Typography ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lime-ink); background:var(--lime); padding:6px 14px 6px 8px; border-radius:var(--radius-pill); } .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--lime-ink);} .eyebrow.plain{ background:var(--panel-2); color:var(--ink-soft); padding:6px 14px; } h1,h2,h3{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; letter-spacing:-.02em; line-height:1.05; } .section-title{ font-size:clamp(28px,4vw,46px); max-width:720px; } .section-sub{ font-size:17px; color:var(--muted); max-width:560px; line-height:1.6; margin-top:14px; } .section-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin:0 auto 56px; } .section-head.left{align-items:flex-start;text-align:left;margin-left:0;} .text-lg{font-size:19px;line-height:1.7;color:var(--ink-soft);} /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:var(--radius-pill); font-weight:600; font-size:15px; white-space:nowrap; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, border-color .25s ease; border:1.5px solid transparent; } .btn:active{transform:scale(.96);} .btn:disabled{opacity:.45;cursor:default;} .btn:disabled:active{transform:none;} .btn-dark{ background:var(--ink); color:#fff; } .btn-lime{ background:var(--lime); color:var(--lime-ink); } .btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); } .btn-sm{padding:10px 18px;font-size:14px;} .btn-block{width:100%;} .btn-icon{width:15px;height:15px;flex-shrink:0;} /* ---------- Icons ---------- */ .icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .icon-lg{width:26px;height:26px;} /* ========================================================================== Header ========================================================================== */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); } .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; } .logo{ display:flex; align-items:center; } .logo svg{ height:29px; width:auto; display:block; color:var(--ink); } .nav-links{ display:flex; align-items:center; gap:36px; } .nav-links a{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .2s ease; position:relative; } .nav-cta{display:flex;align-items:center;gap:12px;} .nav-toggle{ display:none; width:40px;height:40px; align-items:center;justify-content:center; border:1px solid var(--line); border-radius:10px; } .nav-toggle svg{width:18px;height:18px;} .mobile-panel{ display:none; position:fixed; inset:76px 0 0 0; background:#fff; z-index:99; padding:28px 24px; overflow-y:auto; flex-direction:column; justify-content:center; } .mobile-panel.open{display:flex;} .mobile-panel a{ display:block; padding:16px 4px; font-size:19px; font-weight:600; text-align:center; border-bottom:1px solid var(--line-soft); } .mobile-panel .nav-cta{ flex-direction:column; align-items:center; margin-top:24px; } .mobile-panel .btn{width:100%;text-align:center;justify-content:center;} .login-dropdown{position:relative;} .login-toggle{display:inline-flex;align-items:center;gap:6px;} .login-toggle .chevron{width:13px;height:13px;transition:transform .2s var(--ease);} .login-dropdown.open .login-toggle .chevron{transform:rotate(180deg);} .login-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:200px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px; display:none; flex-direction:column; gap:2px; z-index:60; } .login-dropdown.open .login-menu{display:flex;} .login-menu a{ display:flex; flex-direction:column; padding:10px 12px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600; color:var(--ink); border-bottom:none; text-align:left; } .login-menu a span{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;} .mobile-panel .login-dropdown{width:100%;} .mobile-panel .login-toggle{width:100%;} .mobile-panel .login-menu{ position:static; box-shadow:none; border:none; padding:0; margin-top:8px; width:100%; display:none; } .mobile-panel .login-dropdown.open .login-menu{display:flex;} .mobile-panel .login-menu a{ border:1px solid var(--line); text-align:center; align-items:center; padding:12px; } /* ========================================================================== Hero ========================================================================== */ .hero{ padding:88px 0 40px; text-align:center; } .hero .container{ display:flex; flex-direction:column; align-items:center; } .meta-badge-img{ height:42px; width:auto; margin-bottom:22px; } .new-badge{ display:inline-flex; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:28px; transition:border-color .2s ease, box-shadow .2s ease; } .new-badge .btn-icon{width:14px;height:14px;} .new-tag{ background:var(--lime); color:var(--lime-ink); font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:var(--radius-pill); } .hero h1{ font-size:clamp(28px,4.4vw,50px); max-width:1080px; } .hero h1 .hl{ background:linear-gradient(transparent 62%, var(--lime) 62%); } .hero-sub{ font-size:19px; color:var(--muted); max-width:600px; margin:24px 0 34px; line-height:1.6; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; } .trust-line{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted); font-weight:500; } .trust-avatars{display:flex;} .trust-avatars span{ width:30px;height:30px; border-radius:50%; border:2px solid #fff; margin-left:-10px; background:var(--panel-2); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;color:var(--ink-soft); } .trust-avatars span:first-child{margin-left:0;} /* Hero mockup */ .hero-visual{ margin-top:56px; width:100%; display:flex; justify-content:center; } .mock-frame{ position:relative; width:100%; max-width:980px; border-radius:24px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow-lg); padding:16px; } .mock-topbar{ display:flex; gap:6px; padding:4px 6px 16px; } .mock-topbar span{width:10px;height:10px;border-radius:50%;background:var(--line);} .mock-body{ display:grid; grid-template-columns:220px 1fr 260px; gap:16px; min-height:380px; } .mock-side{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 12px; } .mock-side .mline{ height:10px;border-radius:6px;background:var(--line-soft);margin-bottom:14px; } .mock-side .mline.active{background:var(--lime);width:80%;} .mock-side .mline:nth-child(2){width:60%;} .mock-side .mline:nth-child(3){width:75%;} .mock-side .mline:nth-child(4){width:55%;} .mock-side .mline:nth-child(5){width:68%;} .mock-main{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; } .mock-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px;} .mock-stat{ background:var(--panel); border-radius:12px; padding:14px; } .mock-stat b{display:block;font-size:20px;font-family:'Space Grotesk';} .mock-stat span{font-size:12px;color:var(--muted);} .chat-bubble{ max-width:75%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.4; } .chat-bubble.in{background:var(--panel);align-self:flex-start;border-bottom-left-radius:4px;} .chat-bubble.out{background:var(--lime);color:var(--lime-ink);align-self:flex-end;border-bottom-right-radius:4px;} .mock-side-right{display:flex;flex-direction:column;gap:12px;} .mock-card{ background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px; } .mock-card .tag{ display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--panel-2);margin-bottom:8px; } .mock-card b{display:block;font-size:14px;margin-bottom:4px;} .mock-card span{font-size:12px;color:var(--muted);} .float-card{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); padding:12px 16px; display:flex;align-items:center;gap:10px; font-size:13px;font-weight:600; animation:floaty 5s ease-in-out infinite; } .float-card .ic{width:32px;height:32px;border-radius:9px;background:var(--lime);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .float-card .ic svg{width:16px;height:16px;color:var(--lime-ink);} .float-1{top:-22px;left:-30px;animation-delay:0s;} .float-2{bottom:6%;right:-36px;animation-delay:1.2s;} @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} /* ---------- Trust strip ---------- */ .trust-strip{ padding:50px 0; border-bottom:1px solid var(--line-soft); } .trust-strip p{ text-align:center; font-size:14px; color:var(--muted); margin-bottom:28px; font-weight:500; } .logo-row{ display:flex; justify-content:center; align-items:center; gap:56px; flex-wrap:wrap; opacity:.7; } .logo-row span{ font-family:'Space Grotesk'; font-weight:600; font-size:19px; color:var(--ink-soft); letter-spacing:-.01em; } .brand-marquee{ position:relative; width:100%; overflow:hidden; padding:20px 0 12px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .brand-track{ display:flex; align-items:center; gap:72px; width:max-content; animation:brand-scroll 32s linear infinite; } .brand-track img{ height:56px; width:auto; flex-shrink:0; opacity:.85; transition:opacity .25s ease; } @keyframes brand-scroll{ from{transform:translateX(0);} to{transform:translateX(calc(-50% - 36px));} } .brand-trademark{ text-align:center; font-size:12px; color:var(--muted); opacity:.7; margin-top:20px; } @media (prefers-reduced-motion: reduce){ .brand-track{animation:none;} } /* ========================================================================== Problem / Solution ========================================================================== */ .transform{padding:120px 0;} .transform-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; margin-top:56px; } .transform-col{display:flex;flex-direction:column;gap:16px;} .transform-arrow{ width:44px;height:44px; border-radius:50%; background:var(--ink); color:#fff; display:flex;align-items:center;justify-content:center; } .transform-arrow svg{width:18px;height:18px;} .tcard{ border-radius:var(--radius-md); padding:24px; border:1px solid var(--line); } .tcard.bad{background:var(--panel);} .tcard.good{background:var(--ink);color:#fff;border-color:var(--ink);} .tcard .ic{ width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; margin-bottom:14px; background:#fff;border:1px solid var(--line); } .tcard.good .ic{background:var(--lime);border-color:var(--lime);} .tcard.good .ic svg{color:var(--lime-ink);} .tcard h4{font-size:16px;font-weight:600;margin-bottom:6px;font-family:'Inter';} .tcard p{font-size:14px;line-height:1.6;color:var(--muted);} .tcard.good p{color:rgba(255,255,255,.7);} /* ========================================================================== Platform tabs ========================================================================== */ .platform{padding:0 0 120px;} .tabbar{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:44px; border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px; width:fit-content; margin-left:auto;margin-right:auto; } .tabbar button{ padding:11px 22px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; color:var(--muted); transition:all .25s ease; white-space:nowrap; } .tabbar button.active{ background:var(--ink); color:#fff; } .tabpanels{position:relative;} .tabpanel{display:none;} .tabpanel.active{display:block;animation:fadein .4s ease;} @keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}} .tabpanel-inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:56px; } .tabpanel-feats{display:flex;flex-direction:column;gap:22px;margin-top:24px;} .tabpanel-feat{display:flex;gap:14px;} .tabpanel-feat .ic{ width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .tabpanel-feat h5{font-size:15px;font-weight:600;margin-bottom:3px;} .tabpanel-feat p{font-size:13.5px;color:var(--muted);line-height:1.5;} .tabpanel-visual{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; min-height:320px; display:flex; flex-direction:column; gap:12px; justify-content:center; } /* ========================================================================== Feature grid (full list) ========================================================================== */ .features{padding:0 0 120px;} .feat-group{margin-bottom:64px;} .feat-group:last-child{margin-bottom:0;} .feat-group-head{ display:flex; align-items:center; gap:14px; margin-bottom:28px; } .feat-group-head .ic{ width:46px;height:46px;border-radius:12px;background:var(--ink); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .feat-group-head .ic svg{color:var(--lime);width:22px;height:22px;} .feat-group-head h3{font-size:22px;} .feat-group-head .badge-addon{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; background:var(--panel-2);color:var(--ink-soft);padding:4px 10px;border-radius:6px; } .feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .feat-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; } .feat-card .ic{ width:38px;height:38px;border-radius:10px;background:var(--panel); display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .feat-card h5{font-size:15px;font-weight:600;margin-bottom:6px;} .feat-card p{font-size:13.5px;color:var(--muted);line-height:1.55;} .feat-card .pill{ display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.04em;color:var(--lime-ink);background:var(--lime); padding:3px 9px;border-radius:6px; } /* ========================================================================== Stats ========================================================================== */ .stats{ padding:80px 0; background:var(--ink); color:#fff; border-radius:40px; margin:0 24px; max-width:calc(var(--maxw) + 48px); margin-left:auto;margin-right:auto; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; } .stat b{ display:block; font-family:'Space Grotesk'; font-size:clamp(32px,4vw,52px); color:var(--lime); } .stat span{font-size:14px;color:rgba(255,255,255,.65);} /* ========================================================================== How it works ========================================================================== */ .how{padding:120px 0;} .how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; counter-reset:step; } .how-step{ position:relative; padding:28px 22px 22px; border:1px solid var(--line); border-radius:var(--radius-md); } .how-step .num{ font-family:'Space Grotesk'; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:20px; display:block; } .how-step .ic{ width:40px;height:40px;border-radius:11px;background:var(--panel); display:flex;align-items:center;justify-content:center;margin-bottom:18px; } .how-step h5{font-size:16px;margin-bottom:8px;} .how-step p{font-size:13.5px;color:var(--muted);line-height:1.55;} /* ========================================================================== Integrations ========================================================================== */ .integrations{padding:0 0 120px;} .integ-wrap{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:56px; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; background:var(--panel); } .integ-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .integ-chip{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 10px; display:flex;flex-direction:column;align-items:center;gap:10px; text-align:center; transition:transform .3s ease, box-shadow .3s ease; } .integ-chip .ic{ width:38px;height:38px;border-radius:10px;background:var(--panel-2); display:flex;align-items:center;justify-content:center; } .integ-chip span{font-size:11.5px;font-weight:600;color:var(--ink-soft);} /* ========================================================================== Testimonials ========================================================================== */ .testimonials{padding:0 0 120px;} .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .tcard-quote{ border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; display:flex; flex-direction:column; gap:18px; } .tcard-quote .stars{display:flex;gap:3px;color:var(--lime-deep);} .tcard-quote .stars svg{width:15px;height:15px;fill:var(--lime-deep);stroke:none;} .tcard-quote p{font-size:15px;line-height:1.65;color:var(--ink-soft);} .tcard-person{display:flex;align-items:center;gap:12px;margin-top:auto;} .avatar{ width:42px;height:42px;border-radius:50%; background:var(--panel-2); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:14px;color:var(--ink-soft); flex-shrink:0; } .tcard-person b{display:block;font-size:14px;} .tcard-person span{font-size:12.5px;color:var(--muted);} /* ========================================================================== Pricing ========================================================================== */ .pricing{padding:0 0 120px;} .price-toggle{ display:flex; justify-content:center; margin-bottom:48px; } .price-toggle .seg{ display:flex; border:1px solid var(--line); border-radius:var(--radius-pill); padding:5px; } .price-toggle button{ padding:10px 22px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;color:var(--muted); } .price-toggle button.active{background:var(--ink);color:#fff;} .price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:860px; margin:0 auto; } .price-card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; display:flex; flex-direction:column; } .price-card.featured{ background:var(--ink); color:#fff; border-color:var(--ink); position:relative; } .price-card .tag-featured{ position:absolute;top:-13px;left:36px; background:var(--lime);color:var(--lime-ink); font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; padding:5px 12px;border-radius:var(--radius-pill); } .price-card h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:18px;} .price-card.featured h4{color:rgba(255,255,255,.6);} .price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;} .price-amount b{font-family:'Space Grotesk';font-size:44px;} .price-amount span{font-size:14px;color:var(--muted);} .price-card.featured .price-amount span{color:rgba(255,255,255,.6);} .price-note{font-size:12.5px;color:var(--muted);margin-bottom:28px;} .price-card.featured .price-note{color:rgba(255,255,255,.55);} .price-feats{display:flex;flex-direction:column;gap:14px;margin:0 0 32px;flex:1;} .price-feats li{display:flex;align-items:center;gap:10px;font-size:14.5px;} .price-feats svg{width:17px;height:17px;color:var(--lime-deep);flex-shrink:0;} .price-card.featured .price-feats svg{color:var(--lime);} .price-fineprint{ text-align:center;font-size:13px;color:var(--muted);margin-top:28px; } .addon-row{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:860px;margin:20px auto 0; } .addon-card{ border:1px dashed var(--line);border-radius:var(--radius-md);padding:20px 22px; display:flex;align-items:center;gap:14px; } .addon-card .ic{width:36px;height:36px;border-radius:10px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .addon-card b{display:block;font-size:14.5px;} .addon-card span{font-size:12.5px;color:var(--muted);} /* ========================================================================== FAQ ========================================================================== */ .faq{padding:0 0 120px;} .faq-list{max-width:760px;margin:0 auto;} .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; width:100%; text-align:left; font-size:16px; font-weight:600; } .faq-q .plus{ width:26px;height:26px;border-radius:50%;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;flex-shrink:0; position:relative;transition:transform .3s ease, background .3s ease; } .faq-q .plus svg{width:12px;height:12px;transition:transform .3s ease;} .faq-item.open .faq-q .plus{background:var(--ink);border-color:var(--ink);color:#fff;} .faq-item.open .faq-q .plus svg{transform:rotate(135deg);} .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq-a p{ padding:0 4px 24px; font-size:14.5px; line-height:1.7; color:var(--muted); max-width:640px; } /* ========================================================================== CTA banner ========================================================================== */ .cta-banner{padding:0 0 120px;} .cta-inner{ background:var(--lime); border-radius:var(--radius-lg); padding:72px 40px; text-align:center; position:relative; overflow:hidden; } .cta-inner h2{ font-size:clamp(28px,4.4vw,46px); color:var(--lime-ink); max-width:640px; margin:0 auto 16px; } .cta-inner p{ color:rgba(38,51,10,.75); font-size:16px; max-width:520px; margin:0 auto 32px; } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--ink); color:#fff; padding:80px 0 32px; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); } .footer-brand .logo svg{color:#fff;height:31px;} .footer-brand p{ color:rgba(255,255,255,.55); font-size:14px; line-height:1.6; margin:18px 0 22px; max-width:260px; } .footer-social{display:flex;gap:10px;} .footer-social a{ width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center; transition:background .25s ease, border-color .25s ease; } .footer-social svg{width:15px;height:15px;} .fcol h6{ font-size:12.5px;text-transform:uppercase;letter-spacing:.06em; color:rgba(255,255,255,.45);margin-bottom:20px;font-weight:700; } .fcol ul{display:flex;flex-direction:column;gap:13px;} .fcol a, .fcol .fitem{ font-size:14.5px;color:rgba(255,255,255,.8); transition:color .2s ease; } .fcol .fitem{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.65);} .fcol .fitem svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--lime);} .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:12px; } .meta-badge-footer{ height:20px; width:auto; opacity:.85; } /* ========================================================================== WhatsApp float button ========================================================================== */ .wa-float{ display:none; position:fixed; bottom:26px;right:26px; width:60px;height:60px; border-radius:50%; background:#25D366; align-items:center;justify-content:center; box-shadow:0 10px 30px -8px rgba(37,211,102,.6); z-index:80; transition:transform .3s ease; } .wa-float svg{width:28px;height:28px;color:#fff;} .wa-pulse{ position:absolute;inset:0;border-radius:50%; background:#25D366; animation:pulse 2.2s ease-out infinite; z-index:-1; } @keyframes pulse{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.9);opacity:0;}} /* ========================================================================== Book a demo ========================================================================== */ .demo-perks{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-top:8px; } .demo-perk{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink-soft); } .demo-perk .icon{width:17px;height:17px;color:var(--lime-deep);flex-shrink:0;} .book-demo-section{padding:40px 0 100px;} .calendly-cta{ max-width:560px; margin:0 auto; text-align:center; border:1px solid var(--line); border-radius:var(--radius-lg); padding:56px 40px; background:var(--panel); } .calendly-cta .ic{ width:56px;height:56px; border-radius:16px; background:var(--ink); display:flex;align-items:center;justify-content:center; margin:0 auto 22px; } .calendly-cta .ic svg{color:var(--lime);width:26px;height:26px;} .calendly-cta h3{font-size:24px;margin-bottom:10px;} .calendly-cta p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:28px;} .demo-altcontact{ text-align:center; font-size:14px; color:var(--muted); margin-top:28px; } .demo-altcontact a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;} /* ========================================================================== Contact page ========================================================================== */ .contact-hero{text-align:center;} .contact-icon{ width:64px;height:64px; border-radius:18px; border:1px solid var(--line); background:#fff; display:flex;align-items:center;justify-content:center; margin:0 auto; } .contact-icon .icon{width:28px;height:28px;color:var(--ink);} .contact-status{ display:flex; align-items:center; justify-content:center; gap:14px; margin:26px 0 32px; } .contact-avatars{display:flex;} .contact-avatars span{ width:38px;height:38px; border-radius:50%; border:2px solid #fff; margin-left:-12px; overflow:hidden; display:block; flex-shrink:0; } .contact-avatars span:first-child{margin-left:0;} .contact-avatars span img{ width:100%;height:100%; object-fit:cover; display:block; } .contact-status > div:last-child{text-align:left;} .contact-status b{display:block;font-size:14px;} .contact-status span{font-size:13px;color:var(--muted);} .contact-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .contact-pill{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff; font-size:14.5px; font-weight:600; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .contact-pill .icon{width:17px;height:17px;color:var(--lime-deep);} /* ========================================================================== Legal pages ========================================================================== */ .legal-hero{padding:64px 0 40px;border-bottom:1px solid var(--line-soft);} .legal-hero h1{font-size:clamp(30px,4vw,46px);} .legal-hero p{color:var(--muted);margin-top:12px;font-size:14.5px;} .legal-body{padding:56px 0 120px;} .legal-layout{display:grid;grid-template-columns:260px 1fr;gap:56px;} .legal-toc{position:sticky;top:100px;align-self:start;} .legal-toc h6{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:16px;font-weight:700;} .legal-toc a{display:block;font-size:14px;color:var(--ink-soft);padding:7px 0;border-left:2px solid var(--line);padding-left:14px;transition:all .2s ease;} .legal-content h2{font-size:22px;margin:44px 0 14px;} .legal-content h2:first-child{margin-top:0;} .legal-content p{font-size:15px;line-height:1.8;color:var(--ink-soft);margin-bottom:14px;} .legal-content ul{margin:0 0 14px;padding-left:20px;list-style:disc;} .legal-content li{font-size:15px;line-height:1.8;color:var(--ink-soft);margin-bottom:6px;} .legal-content a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;} .legal-content strong{font-weight:700;} .legal-content h3{font-size:17px;margin:26px 0 8px;} .legal-content .table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:14px;} .legal-content table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;} .legal-content th{ background:var(--panel); text-align:left; font-weight:700; padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; } .legal-content td{ padding:12px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); vertical-align:top; } .legal-content tr:last-child td{border-bottom:none;} .legal-content .faq-block{margin-bottom:22px;} .legal-content .faq-block .q{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--ink);} .legal-content .faq-block .a{font-size:15px;line-height:1.8;color:var(--ink-soft);} /* ========================================================================== Blog ========================================================================== */ .blog-listing{padding:64px 0 100px;} .blog-list{display:flex;flex-direction:column;gap:44px;} .blog-row{ display:flex; gap:28px; align-items:flex-start; text-decoration:none; color:inherit; padding-bottom:44px; border-bottom:1px solid var(--line); } .blog-list .blog-row:last-child{border-bottom:none;padding-bottom:0;} .blog-row-img{ width:200px; height:170px; flex-shrink:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; } .blog-row-img img{width:100%;height:100%;object-fit:cover;display:block;} .blog-row-content{flex:1;display:flex;flex-direction:column;min-width:0;} .blog-row-title{font-size:24px;margin-bottom:10px;line-height:1.3;} .blog-row-excerpt{font-size:15px;color:var(--muted);line-height:1.7;margin:0 0 16px;} .blog-row-date{align-self:flex-end;font-size:14px;font-weight:700;color:var(--ink);margin-top:auto;} .load-more-wrap{display:flex;justify-content:center;margin-top:48px;} .blog-article-meta{ display:flex;align-items:center;gap:8px; font-size:13.5px;color:var(--muted);font-weight:600; margin-top:14px; } .blog-article-meta .icon{width:15px;height:15px;color:var(--lime-deep);} .blog-hero-img{ width:100%; max-width:900px; aspect-ratio:1200/630; object-fit:cover; border-radius:var(--radius-lg); margin-top:32px; } /* ========================================================================== Reveal animation ========================================================================== */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);} .reveal.in{opacity:1;transform:translateY(0);} .word-reveal .word{ display:inline-block; opacity:0; transform:translateY(28px); transition:opacity .55s var(--ease), transform .55s var(--ease); } .word-reveal.in .word{opacity:1;transform:translateY(0);} .word-reveal .hl{opacity:0;transition:opacity .55s var(--ease);} .word-reveal.in .hl{opacity:1;} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1080px){ .footer-top{grid-template-columns:1fr 1fr 1fr;row-gap:40px;} .footer-brand{grid-column:1/-1;} .feat-grid{grid-template-columns:repeat(2,1fr);} .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px;} .how-grid{grid-template-columns:repeat(2,1fr);} .tgrid{grid-template-columns:1fr;} .integ-wrap{grid-template-columns:1fr;} } @media (max-width:860px){ .nav-links{display:none;} .nav > .nav-cta .btn-outline{display:none;} .nav-toggle{display:flex;} .tabpanel-inner{grid-template-columns:1fr;padding:32px 24px;gap:32px;} .transform-grid{grid-template-columns:1fr;} .transform-arrow{transform:rotate(90deg);margin:0 auto;} .price-grid{grid-template-columns:1fr;} .addon-row{grid-template-columns:1fr;} .legal-layout{grid-template-columns:1fr;} .legal-toc{display:none;} .float-card{display:none;} .mock-body{grid-template-columns:1fr;} .mock-side, .mock-side-right{display:none;} .stats{border-radius:24px;margin:0 12px;} } @media (max-width:640px){ .feat-grid{grid-template-columns:1fr;} .stats-grid{grid-template-columns:1fr 1fr;} .how-grid{grid-template-columns:1fr;} .blog-row{flex-direction:column;} .blog-row-img{width:100%;height:auto;aspect-ratio:16/10;} .blog-row-date{align-self:flex-start;} .hero-actions{flex-direction:column;width:100%;} .hero-actions .btn{width:100%;} .cta-inner{padding:48px 24px;} .footer-top{grid-template-columns:1fr 1fr;} .integ-wrap{padding:28px 20px;gap:28px;} .integ-grid{grid-template-columns:repeat(2,1fr);} .price-card{padding:28px 24px;} .price-amount span{white-space:nowrap;} } /* ========================================================================== Hover effects — real pointer devices only (prevents stuck-hover on touch) ========================================================================== */ @media (hover:hover) and (pointer:fine){ .blog-row-title{transition:color .2s var(--ease);} .blog-row:hover .blog-row-title{color:var(--lime-deep);} .btn-dark:hover{box-shadow:0 4px 10px -4px rgba(11,12,13,.25);} .btn-lime:hover{box-shadow:0 14px 30px -12px rgba(224,255,130,.7); transform:translateY(-2px);} .btn-outline:hover{border-color:var(--ink);} .nav-links a:hover{color:var(--ink);} .login-menu a:hover{background:var(--line-soft);} .new-badge:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);} .brand-marquee:hover .brand-track{animation-play-state:paused;} .brand-track img:hover{opacity:1;} .feat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; } .integ-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);} .cta-inner .btn-dark:hover{box-shadow:0 14px 32px -14px rgba(0,0,0,.5);} .footer-social a:hover{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);} .fcol a:hover{color:var(--lime);} .wa-float:hover{transform:scale(1.08);} .contact-pill:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-2px);} .legal-toc a:hover{color:var(--ink);border-color:var(--ink);} }