/* ============================================================ Plio CRM — marketing site One stylesheet. No frameworks, no web fonts, no chart library. ============================================================ */ /* ---------- 1. Tokens ---------- Light is the default: is written into every page and the head script only overrides it when the visitor has chosen dark before. ------------------------------------ */ :root{ color-scheme: light; --page:#f7f8fa; --surface:#ffffff; --surface-2:#f1f2f6; --surface-3:#e7e9f0; --primary:#2a5bd7; --primary-hover:#2450be; --on-primary:#ffffff; --primary-container:#dee1ff; --on-primary-container:#132176; --text:#14161d; --text-2:#565c6e; --text-3:#7e8397; --border:#e3e5eb; --border-2:#d3d6e0; --ok:#1b7f55; --ok-bg:#dcf3e8; --warn:#9a6206; --warn-bg:#fdeecf; --danger:#bd2f35; --danger-bg:#fbe0e1; --shadow-1:0 1px 2px rgba(20,22,29,.05); --shadow-2:0 4px 18px rgba(20,22,29,.07); --shadow-3:0 20px 52px rgba(20,22,29,.13); --r-card:12px; --r-ctl:8px; --wrap:1180px; --nav-h:66px; --logo-filter:none; } :root[data-theme="dark"]{ color-scheme: dark; --page:#121318; --surface:#201f28; --surface-2:#2a2933; --surface-3:#35343f; --primary:#b7c3ff; --primary-hover:#cdd5ff; --on-primary:#101a4d; --primary-container:#2f3a8e; --on-primary-container:#dfe3ff; --text:#e6e7ef; --text-2:#a9adbe; --text-3:#8c90a3; --border:#33323e; --border-2:#403f4c; --ok:#6ddaa8; --ok-bg:#123528; --warn:#f0c070; --warn-bg:#3a2c11; --danger:#ff9a9d; --danger-bg:#3d1c1e; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 18px rgba(0,0,0,.42); --shadow-3:0 20px 52px rgba(0,0,0,.55); --logo-filter:brightness(0) invert(1); } /* ---------- 2. Reset + base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ margin:0; background:var(--page); color:var(--text); font:400 16.5px/1.65 system-ui,'Segoe UI',Roboto,-apple-system,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{max-width:100%} img{height:auto;display:block} h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;letter-spacing:-.021em;font-weight:700} h1{font-size:clamp(2.15rem,1.35rem + 3.3vw,3.5rem);letter-spacing:-.03em} h2{font-size:clamp(1.7rem,1.2rem + 2.1vw,2.5rem);letter-spacing:-.026em} h3{font-size:1.2rem} p{margin:0 0 1em} ul,ol{margin:0 0 1em;padding-left:1.15em} a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--primary-hover)} hr{border:0;border-top:1px solid var(--border);margin:2.5rem 0} strong{font-weight:650} code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em} kbd{background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px} :focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;border-radius:4px} ::selection{background:var(--primary-container);color:var(--on-primary-container)} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px} .section{padding-block:clamp(56px,7vw,104px)} .section--tight{padding-block:clamp(40px,5vw,72px)} .skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:12px 18px;z-index:200;border-radius:0 0 var(--r-ctl) 0} .skip:focus{left:0} .lede{font-size:clamp(1.03rem,.98rem + .3vw,1.2rem);color:var(--text-2);max-width:62ch} .eyebrow{ display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--primary);margin:0 0 .7rem; } .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .center .lede{margin-inline:auto} .muted{color:var(--text-2)} .small{font-size:.87rem} .head{max-width:44rem;margin:0 0 clamp(32px,4vw,56px)} .head.center{margin-inline:auto} /* ---------- 3. Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font:inherit;font-weight:600;font-size:.97rem;line-height:1; padding:13px 20px;border-radius:var(--r-ctl);border:1px solid transparent; cursor:pointer;text-decoration:none;white-space:nowrap; transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-1)} .btn--primary:hover{background:var(--primary-hover);color:var(--on-primary);box-shadow:var(--shadow-2)} .btn--ghost{background:var(--surface);color:var(--text);border-color:var(--border-2);box-shadow:var(--shadow-1)} .btn--ghost:hover{color:var(--text);border-color:var(--text-3);background:var(--surface)} .btn--onblue{background:#fff;color:#1b3ea8} .btn--onblue:hover{background:#eef1ff;color:#1b3ea8} .btn--outline-onblue{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn--outline-onblue:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff} .btn--sm{padding:9px 15px;font-size:.9rem} .btn--block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .arrow-link{ display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.95rem; text-decoration:none; } .arrow-link:hover{text-decoration:underline} .arrow-link svg{transition:transform .2s ease} .arrow-link:hover svg{transform:translateX(3px)} .trust-line{font-size:.87rem;color:var(--text-2);margin:16px 0 0;display:flex;align-items:center;gap:.45em} /* ---------- 4. Cards, pills, checks ---------- */ .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); padding:24px;box-shadow:var(--shadow-1); } .card--hover{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--border-2)} .grid{display:grid;gap:20px} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .icon-tile{ width:38px;height:38px;border-radius:10px;display:grid;place-items:center; background:var(--primary-container);color:var(--on-primary-container);margin-bottom:14px; } .pill{ display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;font-weight:600; padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-2); border:1px solid var(--border); } .pill--ok{background:var(--ok-bg);color:var(--ok);border-color:transparent} .pill--warn{background:var(--warn-bg);color:var(--warn);border-color:transparent} .pill--danger{background:var(--danger-bg);color:var(--danger);border-color:transparent} .pill--primary{background:var(--primary-container);color:var(--on-primary-container);border-color:transparent} .checks{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:9px} .checks li{display:flex;gap:.65em;align-items:flex-start;font-size:.97rem;color:var(--text-2)} .checks svg{flex:none;margin-top:3px;color:var(--primary)} .checks b{color:var(--text);font-weight:600} /* ---------- 5. Nav ---------- */ .nav{ position:sticky;top:0;z-index:100;height:var(--nav-h); background:transparent;border-bottom:1px solid transparent; transition:background-color .25s ease,border-color .25s ease,backdrop-filter .25s ease; } .nav.is-stuck{ background:color-mix(in srgb,var(--page) 82%,transparent); backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px); border-bottom-color:var(--border); } @supports not (backdrop-filter:blur(1px)){ .nav.is-stuck{background:var(--page)} } .nav__inner{display:flex;align-items:center;gap:20px;height:var(--nav-h)} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none} .brand img{width:112px;filter:var(--logo-filter)} .nav__links{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1} .nav__links a{ color:var(--text-2);text-decoration:none;font-size:.95rem;font-weight:550; padding:8px 12px;border-radius:var(--r-ctl);transition:color .18s ease,background-color .18s ease; } .nav__links a:hover{color:var(--text);background:var(--surface-2)} .nav__links a[aria-current="page"]{color:var(--text);font-weight:650} .nav__actions{display:flex;align-items:center;gap:10px;flex:none} .nav__signin{color:var(--text-2);text-decoration:none;font-size:.95rem;font-weight:550;padding:8px 6px} .nav__signin:hover{color:var(--text)} .icon-btn{ width:38px;height:38px;flex:none;display:grid;place-items:center;cursor:pointer; background:transparent;border:1px solid var(--border);border-radius:var(--r-ctl); color:var(--text-2);transition:color .18s ease,background-color .18s ease,border-color .18s ease; } .icon-btn:hover{color:var(--text);background:var(--surface-2);border-color:var(--border-2)} .theme-toggle .moon{display:none} :root[data-theme="dark"] .theme-toggle .moon{display:block} :root[data-theme="dark"] .theme-toggle .sun{display:none} .nav__burger{display:none} /* Mobile drawer */ .drawer{ position:fixed;inset:0;z-index:110;visibility:hidden; } .drawer[data-open="true"]{visibility:visible} .drawer__scrim{ position:absolute;inset:0;background:rgba(10,11,16,.45);opacity:0; transition:opacity .25s ease; } .drawer[data-open="true"] .drawer__scrim{opacity:1} .drawer__panel{ position:absolute;top:0;right:0;height:100%;width:min(320px,86vw); background:var(--surface);border-left:1px solid var(--border); padding:16px 20px 32px;overflow-y:auto; transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1); display:flex;flex-direction:column;gap:6px; } .drawer[data-open="true"] .drawer__panel{transform:none} .drawer__top{display:flex;align-items:center;justify-content:space-between;height:calc(var(--nav-h) - 16px);margin-bottom:12px} .drawer__panel a:not(.btn){ display:block;padding:13px 10px;border-radius:var(--r-ctl);text-decoration:none; color:var(--text);font-weight:600;font-size:1.02rem;border-bottom:1px solid var(--border); } .drawer__panel a:not(.btn):hover{background:var(--surface-2)} .drawer__panel .btn{margin-top:14px} /* Brand tagline — echoes the rule-flanked lockup under the logo */ .tagline{ display:flex;align-items:center;gap:10px;margin:0 0 18px; font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--primary); } .tagline::before{ content:"";width:26px;height:2px;flex:none;border-radius:2px;background:currentColor; } .tagline--center{justify-content:center} .tagline--center::after{ content:"";width:26px;height:2px;flex:none;border-radius:2px;background:currentColor; } .footer__brand .tagline{margin:-6px 0 12px;font-size:.72rem;letter-spacing:.14em} .tagline--hero{ display:inline-flex;font-size:.86rem;letter-spacing:.15em; background:var(--primary-container);color:var(--on-primary-container); padding:10px 20px 10px 15px;border-radius:999px;box-shadow:var(--shadow-1); margin-bottom:22px; } .tagline--hero::before{width:20px;opacity:.7} .tagline--onblue{color:#fff;opacity:.9;margin-bottom:14px} /* ---------- 6. Hero ---------- */ .hero{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,88px);position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;inset:-30% 0 auto -10%;height:760px;pointer-events:none; background:radial-gradient(52% 46% at 22% 30%,color-mix(in srgb,var(--primary) 15%,transparent),transparent 72%); z-index:-1; } .hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4vw,60px);align-items:center} .hero h1{margin-bottom:18px;text-wrap:balance} .hero .lede{margin-bottom:26px;font-size:clamp(1.05rem,1rem + .38vw,1.24rem)} .hero__badge{ display:inline-flex;align-items:center;gap:8px;margin-bottom:22px; background:var(--surface);border:1px solid var(--border);border-radius:999px; padding:6px 14px 6px 7px;font-size:.83rem;font-weight:550;color:var(--text-2); box-shadow:var(--shadow-1); } .hero__badge b{ background:var(--primary-container);color:var(--on-primary-container); border-radius:999px;padding:3px 9px;font-size:.75rem;font-weight:700; } /* ---------- 7. App mockup (recreated product UI) ---------- */ .mock{ background:var(--surface);border:1px solid var(--border);border-radius:14px; box-shadow:var(--shadow-3);overflow:hidden;font-size:12px;line-height:1.45; color:var(--text); } .mock--float{animation:float 7s ease-in-out infinite} .hero__stage{position:relative} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .mock__bar{ display:flex;align-items:center;gap:6px;padding:9px 12px; background:var(--surface-2);border-bottom:1px solid var(--border); } .mock__dot{width:9px;height:9px;border-radius:50%;background:var(--border-2)} .mock__url{ margin-left:8px;font-size:11px;color:var(--text-3);background:var(--surface); border:1px solid var(--border);border-radius:6px;padding:2px 10px; } .mock__body{display:grid;grid-template-columns:158px minmax(0,1fr);min-height:398px} .mock__side{ background:var(--surface-2);border-right:1px solid var(--border);padding:12px 10px; display:flex;flex-direction:column;gap:2px; } .mock__side-group{ font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--text-3);padding:12px 8px 5px; } .mock__side-group:first-child{padding-top:2px} .mock__nav{ display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px; color:var(--text-2);font-weight:550;font-size:11.5px; } .mock__nav svg{flex:none;opacity:.85} .mock__nav[data-active]{background:var(--primary-container);color:var(--on-primary-container);font-weight:650} .mock__nav-count{margin-left:auto;font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums} .mock__main{padding:16px;background:var(--page);display:flex;flex-direction:column;gap:14px;min-width:0} .mock__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .mock__title{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em} .mock__sub{font-size:10.5px;color:var(--text-3);margin:1px 0 0} .mock__btn{ background:var(--primary);color:var(--on-primary);border-radius:6px; padding:5px 11px;font-size:11px;font-weight:600; } .mock__btn--ghost{background:var(--surface);color:var(--text-2);border:1px solid var(--border)} .mock__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .mock__stat{ background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 11px; } .mock__stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .mock__stat-label{font-size:10px;color:var(--text-3);font-weight:600;letter-spacing:.02em;line-height:1.25} .mock__stat-icon{ width:20px;height:20px;flex:none;border-radius:6px;display:grid;place-items:center; background:var(--primary-container);color:var(--on-primary-container); } .mock__stat-value{font-size:17px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .mock__stat-delta{font-size:10px;font-weight:600;color:var(--ok);line-height:1.3} .mock__stat-delta.is-down{color:var(--danger)} .mock__panels{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;flex:1} .mock__panel{ background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px; display:flex;flex-direction:column;min-width:0; } .mock__panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .mock__panel-title{font-size:11.5px;font-weight:650;margin:0} .mock__panel-meta{font-size:10px;color:var(--text-3)} .bars{display:grid;gap:9px;margin-top:2px} .bars__row{display:grid;grid-template-columns:64px minmax(0,1fr) 44px;gap:8px;align-items:center} .bars__label{font-size:10.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bars__track{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden} .bars__fill{display:block;height:100%;border-radius:999px;background:var(--primary);width:var(--w,50%)} .bars__fill--2{background:color-mix(in srgb,var(--primary) 62%,var(--surface-3))} .bars__fill--3{background:color-mix(in srgb,var(--primary) 38%,var(--surface-3))} .bars__val{font-size:10.5px;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums} .spark{width:100%;height:auto;display:block;overflow:visible} /* ---------- 8. Logo strip ---------- */ .logos{border-block:1px solid var(--border);padding-block:32px;background:var(--surface)} .logos__label{ text-align:center;font-size:.78rem;font-weight:650;letter-spacing:.1em; text-transform:uppercase;color:var(--text-3);margin:0 0 22px; } .logos__row{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:clamp(24px,5vw,56px); } .logos__item{ display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.02rem; letter-spacing:-.02em;color:var(--text-3);filter:grayscale(1);opacity:.72; transition:opacity .2s ease; } .logos__item:hover{opacity:1} .logos__mark{ width:26px;height:26px;border-radius:7px;background:var(--text-3);opacity:.55;flex:none; } .logos__mark--r{border-radius:50%} .logos__mark--d{transform:rotate(45deg);border-radius:5px} /* ---------- 9. Problem ---------- */ .problem__card{position:relative;overflow:hidden} .problem__card .icon-tile{background:var(--danger-bg);color:var(--danger)} .problem__strike{ display:flex;align-items:center;gap:14px;margin-top:clamp(28px,3vw,40px); background:var(--primary-container);color:var(--on-primary-container); border-radius:var(--r-card);padding:18px 22px;font-weight:600; font-size:clamp(1rem,.95rem + .3vw,1.15rem); } .problem__strike svg{flex:none} /* ---------- 10. Feature rows ---------- */ .frow{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px);align-items:center; padding-block:clamp(38px,4.5vw,62px); } .frow + .frow{border-top:1px solid var(--border)} .frow:nth-child(even) .frow__text{order:2} .frow h3{font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);letter-spacing:-.025em;margin-bottom:.55em} .frow p{color:var(--text-2);max-width:46ch} .frow__art{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); padding:16px;box-shadow:var(--shadow-2);font-size:12px;min-width:0; } /* mini: kanban */ .kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .kb__col{background:var(--surface-2);border-radius:9px;padding:9px 8px;display:flex;flex-direction:column;gap:7px} .kb__col-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:0 2px 2px} .kb__col-name{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)} .kb__col-sum{font-size:10.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .kb__card{ background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px; box-shadow:var(--shadow-1);display:grid;gap:5px; } .kb__card--drag{ border-color:var(--primary);box-shadow:var(--shadow-2);transform:rotate(-1.6deg) translateY(-2px); } .kb__card-name{font-size:11px;font-weight:650;line-height:1.3} .kb__card-val{font-size:12px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums} .kb__card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px} .avatar{ width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--primary-container);color:var(--on-primary-container); font-size:9.5px;font-weight:700; } .kb__ghost{ border:1.5px dashed var(--primary);border-radius:8px;height:52px; background:color-mix(in srgb,var(--primary) 7%,transparent); } /* mini: widget builder drawer */ .wb{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:10px;align-items:stretch} .wb__canvas{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))} .wb__widget{ background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:9px; display:grid;gap:6px;align-content:start; } .wb__widget--wide{grid-column:1/-1} .wb__widget-label{font-size:9.5px;font-weight:650;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase} .wb__widget-value{font-size:15px;font-weight:700;letter-spacing:-.02em} .wb__drawer{ background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px; display:flex;flex-direction:column;gap:7px; } .wb__drawer .wb__h{display:block;font-size:10.5px;margin:0 0 2px;font-weight:700} .field{display:grid;gap:3px} .field__label{font-size:9.5px;color:var(--text-3);font-weight:600} .field__ctl{ background:var(--surface);border:1px solid var(--border);border-radius:6px; padding:5px 7px;font-size:10.5px;color:var(--text);display:flex;align-items:center; justify-content:space-between;gap:6px; } .swatches{display:flex;gap:5px;margin-top:2px} .swatch{width:15px;height:15px;border-radius:5px;flex:none} .swatch[data-on]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--primary)} /* mini: mail split view */ .mail{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;min-height:214px} .mail__list{display:flex;flex-direction:column;gap:6px} .mail__item{ border:1px solid var(--border);border-radius:8px;padding:7px 8px;display:grid;gap:2px; background:var(--surface-2); } .mail__item[data-on]{background:var(--primary-container);border-color:transparent} .mail__item[data-on] .mail__from,.mail__item[data-on] .mail__subj{color:var(--on-primary-container)} .mail__from{font-size:10.5px;font-weight:650} .mail__subj{font-size:10px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mail__pane{ border:1px solid var(--border);border-radius:8px;padding:11px;display:flex;flex-direction:column;gap:8px; } .mail__tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding-bottom:7px} .mail__tab{font-size:10px;font-weight:600;color:var(--text-3);padding:3px 7px;border-radius:6px} .mail__tab[data-on]{background:var(--primary-container);color:var(--on-primary-container)} .mail__thread{display:grid;gap:7px} .mail__msg{background:var(--surface-2);border-radius:8px;padding:8px 9px;font-size:10.5px;color:var(--text-2)} .mail__msg--me{background:var(--primary-container);color:var(--on-primary-container);margin-left:22px} .mail__msg b{display:block;color:var(--text);font-size:10px;margin-bottom:2px} .mail__msg--me b{color:var(--on-primary-container)} /* mini: form builder */ .fb{display:grid;gap:7px} .fb__row{ display:flex;align-items:center;gap:9px;background:var(--surface-2); border:1px solid var(--border);border-radius:8px;padding:8px 9px; } .fb__row[data-drag]{border-color:var(--primary);box-shadow:var(--shadow-2);background:var(--surface)} .fb__grip{color:var(--text-3);flex:none;cursor:grab} .fb__name{font-size:11px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fb__type{ font-size:9.5px;font-weight:650;padding:2px 7px;border-radius:999px;flex:none; background:var(--surface-3);color:var(--text-2); } .fb__type--calc{background:var(--primary-container);color:var(--on-primary-container)} .fb__req{font-size:9.5px;color:var(--danger);font-weight:700;flex:none} .fb__formula{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px; background:var(--surface);border:1px dashed var(--primary);border-radius:8px;padding:8px 9px; color:var(--text-2);display:flex;flex-wrap:wrap;gap:4px;align-items:center; } .chip{ background:var(--primary-container);color:var(--on-primary-container); border-radius:5px;padding:1px 6px;font-weight:650;font-size:10px; } /* mini: SLA rows */ .sla{display:grid;gap:7px} .sla__row{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center; background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px; } .sla__pri{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap} .sla__pri--u{background:var(--danger-bg);color:var(--danger)} .sla__pri--h{background:var(--warn-bg);color:var(--warn)} .sla__pri--m{background:var(--primary-container);color:var(--on-primary-container)} .sla__pri--l{background:var(--surface-3);color:var(--text-2)} .sla__txt{font-size:10.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sla__due{font-size:10.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums} .stars{display:flex;gap:2px;color:var(--warn)} /* ---------- 11. Product tour (tabs) ---------- */ .tour{background:var(--surface);border-block:1px solid var(--border)} .tour__tabs{ display:flex;gap:6px;overflow-x:auto;padding:5px;margin:0 auto clamp(24px,3vw,34px); background:var(--surface-2);border:1px solid var(--border);border-radius:999px; width:max-content;max-width:100%;scrollbar-width:none; } .tour__tabs::-webkit-scrollbar{display:none} .tour__tab{ font:inherit;font-size:.92rem;font-weight:600;white-space:nowrap;cursor:pointer; border:0;background:transparent;color:var(--text-2);padding:9px 17px;border-radius:999px; display:flex;align-items:center;gap:.45em; transition:background-color .2s ease,color .2s ease; } .tour__tab:hover{color:var(--text)} .tour__tab[aria-selected="true"]{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-1)} .tour__stage{position:relative} .tour__panel[hidden]{display:none} .tour__panel{animation:fadein .34s ease both} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tour__caption{ display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap; margin-top:22px;text-align:center; } .tour__caption p{margin:0;color:var(--text-2);max-width:60ch} .tour__caption b{color:var(--text)} /* variants of the mockup used inside the tour */ .mock--tour .mock__body{min-height:420px} .table{width:100%;border-collapse:collapse;font-size:11px} .table th,.table td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap} .table th{ font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3); font-weight:700;background:var(--surface-2); } .table td{color:var(--text-2)} .table td:first-child{color:var(--text);font-weight:600} .table tr:last-child td{border-bottom:0} .table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:9px;background:var(--surface)} .filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .filterbar .pill{background:var(--surface);font-size:10.5px;padding:3px 9px} /* ---------- 12. Roles ---------- */ .role{display:flex;flex-direction:column;gap:2px} .role__badge{ align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:4px 10px;border-radius:999px;background:var(--primary-container); color:var(--on-primary-container);margin-bottom:12px; } .role h3{font-size:1.08rem;margin-bottom:.35em} .role p{font-size:.92rem;color:var(--text-2);margin-bottom:1em} .role ul{list-style:none;padding:0;margin:0;display:grid;gap:7px} .role li{font-size:.9rem;color:var(--text-2);display:flex;gap:.55em;align-items:flex-start} .role li::before{ content:"";width:5px;height:5px;border-radius:50%;background:var(--primary); flex:none;margin-top:.62em; } /* ---------- 13. India band ---------- */ .india{background:var(--surface);border-block:1px solid var(--border)} .india__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:center} .india__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0} .india__list li{ background:var(--page);border:1px solid var(--border);border-radius:var(--r-card); padding:16px 18px;display:grid;gap:5px; } .india__list b{font-size:.95rem;display:flex;align-items:center;gap:.5em} .india__list b svg{color:var(--primary);flex:none} .india__list span{font-size:.87rem;color:var(--text-2)} /* ---------- 13b. Mobile band + iPhone mockup ---------- Proportions follow an iPhone 15/16: 393x852pt screen (2.165:1), corner radius ~14% of width, Dynamic Island ~32% of screen width. ------------------------------------------------------ */ .mobile{background:var(--surface);border-block:1px solid var(--border)} .mobile__grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px);align-items:center; } .phones{display:flex;gap:20px;justify-content:center;align-items:flex-start;padding-block:10px} .iphone{ --w:214px; position:relative;flex:none; width:var(--w);height:calc(var(--w) * 2.165); padding:7px; border-radius:calc(var(--w) * .158); background:linear-gradient(148deg,#565a66 0%,#2a2d35 26%,#1a1c22 58%,#43474f 100%); box-shadow: 0 28px 60px rgba(16,18,26,.32), 0 4px 12px rgba(16,18,26,.24), inset 0 0 0 1px rgba(255,255,255,.13); } .iphone--back{transform:translateY(36px) scale(.93)} /* hero: a plain floating card, deliberately with no phone bezel — the desktop mock beside it is also just a floating card with no monitor frame, so this matches that weight instead of reading as a literal device photo. */ .hero__phone{ --w:172px;width:var(--w);position:absolute;z-index:2;left:-34px;bottom:-30px; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); box-shadow:var(--shadow-3);overflow:hidden; display:flex;flex-direction:column;padding-top:10px; } .hero__phone .app__tabbar{padding-bottom:10px} /* titanium side buttons */ .iphone::before,.iphone::after{ content:"";position:absolute;border-radius:2px; background:linear-gradient(180deg,#585c67,#2c2f37); } .iphone::before{left:-2px;top:23%;width:3px;height:9%} .iphone::after{right:-2px;top:27%;width:3px;height:12%} .iphone__screen{ position:relative;height:100%; border-radius:calc(var(--w) * .125); overflow:hidden;background:var(--page); display:flex;flex-direction:column; } .iphone__island{ position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%); width:32%;height:14px;border-radius:99px;background:#0a0b0f; } .iphone__island::after{ content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%); width:6px;height:6px;border-radius:50%; background:#141a2b;box-shadow:inset 0 0 0 1px rgba(105,135,215,.4); } .iphone__status{ flex:none;height:34px;display:flex;align-items:center;justify-content:space-between; padding:2px 15px 0;font-size:10.5px;font-weight:700;color:var(--text); } .iphone__status .ic{display:flex;align-items:center;gap:4px} .iphone__home{ position:absolute;z-index:3;bottom:7px;left:50%;transform:translateX(-50%); width:35%;height:4px;border-radius:99px;background:var(--text);opacity:.3; } /* the app inside the screen */ .app__nav{flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:4px 14px 9px} .app__title{font-size:17px;font-weight:750;letter-spacing:-.025em;margin:0;line-height:1.1} .app__sub{font-size:9.5px;color:var(--text-3);margin:2px 0 0} .app__acts{display:flex;gap:11px;color:var(--text-2);padding-bottom:2px} .app__chips{flex:none;display:flex;gap:5px;padding:0 14px 9px;overflow:hidden} .chipf{ font-size:9px;font-weight:650;padding:4px 9px;border-radius:99px;white-space:nowrap; background:var(--surface-2);color:var(--text-2);border:1px solid var(--border); } .chipf[data-on]{background:var(--primary);color:var(--on-primary);border-color:transparent} .app__list{flex:1;min-height:0;overflow:hidden;padding:0 12px;display:flex;flex-direction:column;gap:8px} .app__tabbar{ flex:none;display:flex;justify-content:space-around; padding:9px 4px 22px;border-top:1px solid var(--border);background:var(--surface); } .tabi{display:grid;justify-items:center;gap:3px;font-size:8px;font-weight:600;color:var(--text-3)} .tabi[data-on]{color:var(--primary)} .mrow{ background:var(--surface);border:1px solid var(--border);border-radius:10px; padding:9px 10px;display:grid;gap:5px;box-shadow:var(--shadow-1); } .mrow__top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0} .mrow__top .pill{flex:none} .mrow__name{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .mrow__val{font-size:11.5px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;flex:none} .mrow__sub{ font-size:9.5px;color:var(--text-3);display:flex;align-items:center;gap:6px; min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } @media (max-width:960px){ .mobile__grid{grid-template-columns:1fr} } @media (max-width:520px){ .phones{gap:0} .iphone{--w:196px} .iphone--back{display:none} } /* ---------- 14. Numbers ---------- */ .numbers{background:var(--primary-container);color:var(--on-primary-container)} .numbers__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;text-align:center} .numbers__n{ font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);font-weight:750;letter-spacing:-.035em; line-height:1;font-variant-numeric:tabular-nums;display:block; } .numbers__l{font-size:.85rem;margin-top:8px;display:block;opacity:.86;line-height:1.35} /* ---------- 15. Testimonials ---------- */ .quote{display:flex;flex-direction:column;gap:16px} .quote blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--text)} .quote blockquote::before{content:"\201C"} .quote blockquote::after{content:"\201D"} .quote__who{display:flex;align-items:center;gap:12px;margin-top:auto} .quote__av{ width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--primary-container);color:var(--on-primary-container);font-weight:700; } .quote__name{font-weight:650;font-size:.93rem;line-height:1.3} .quote__role{font-size:.83rem;color:var(--text-2);line-height:1.3} /* ---------- 16. Pricing ---------- */ .toggle{ display:inline-flex;align-items:center;gap:4px;background:var(--surface-2); border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:14px; } .toggle button{ font:inherit;font-size:.9rem;font-weight:600;border:0;background:transparent;cursor:pointer; color:var(--text-2);padding:8px 18px;border-radius:999px;transition:background-color .2s,color .2s; } .toggle button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)} .toggle .save{font-size:.72rem;font-weight:700;color:var(--ok);margin-left:.35em} .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start} .tier{position:relative;display:flex;flex-direction:column;height:100%} .tier--best{border-color:var(--primary);box-shadow:var(--shadow-2)} .tier__flag{ position:absolute;top:-11px;left:24px;background:var(--primary);color:var(--on-primary); font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:4px 11px;border-radius:999px; } .tier h3{margin-bottom:.25em} .tier__desc{font-size:.88rem;color:var(--text-2);margin-bottom:18px;min-height:2.6em} .tier__price{display:flex;align-items:baseline;gap:5px;margin-bottom:4px} .tier__amt{font-size:2.3rem;font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .tier__amt--word{font-size:1.55rem;letter-spacing:-.02em} .tier__per{font-size:.85rem;color:var(--text-2)} .tier__note{font-size:.8rem;color:var(--text-3);margin-bottom:20px;min-height:1.4em} .tier .checks{margin-top:20px;margin-bottom:0} .tier .checks li{font-size:.9rem} .tier__cta{margin-top:4px} .cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px} .cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:left} .cmp thead th{ background:var(--surface-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em; color:var(--text-3);position:sticky;top:0; } .cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:16%} .cmp tbody th{font-weight:550;color:var(--text-2)} .cmp .grp td{ background:var(--surface-2);font-weight:700;font-size:.8rem;text-transform:uppercase; letter-spacing:.06em;color:var(--text-2); } .cmp .yes{color:var(--ok)} .cmp .no{color:var(--text-3)} /* ---------- 17. FAQ ---------- */ .faq{display:grid;gap:10px;max-width:820px;margin-inline:auto} .faq details{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card); padding:0 20px;transition:border-color .2s ease; } .faq details[open]{border-color:var(--border-2);box-shadow:var(--shadow-1)} .faq summary{ list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:1.01rem; display:flex;align-items:center;justify-content:space-between;gap:16px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);transform:rotate(45deg) translate(-3px,-3px); transition:transform .22s ease; } .faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)} .faq details p{margin:0 0 18px;color:var(--text-2);font-size:.96rem;max-width:70ch} /* ---------- 18. CTA band + forms ---------- */ .cta{ background:linear-gradient(135deg,#2a5bd7 0%,#1f3fa8 52%,#4b2fb0 100%); color:#fff;text-align:center; } .cta h2{color:#fff;text-wrap:balance} .cta p{color:rgba(255,255,255,.82);max-width:56ch;margin-inline:auto} .form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px} .form label{position:absolute;left:-9999px} .input{ font:inherit;font-size:.97rem;padding:13px 15px;border-radius:var(--r-ctl); border:1px solid var(--border);background:var(--surface);color:var(--text); width:100%;transition:border-color .18s ease,box-shadow .18s ease; } .input::placeholder{color:var(--text-3)} .input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 26%,transparent)} .input[aria-invalid="true"]{border-color:var(--danger)} .form .input{width:min(340px,100%);border-color:transparent} .form__err,.field-err{ display:block;font-size:.83rem;font-weight:600;color:var(--danger);margin-top:6px;min-height:1.2em; } .cta .form__err{color:#ffd7d8} .form__ok,.cta__ok{ display:flex;align-items:center;justify-content:center;gap:.6em;margin-top:22px; font-weight:600; } .cta__ok{background:rgba(255,255,255,.16);border-radius:var(--r-card);padding:16px 22px;color:#fff} [hidden]{display:none !important} .form-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))} .form-grid .full{grid-column:1/-1} .form-field{display:grid;gap:6px} .form-field label{position:static;font-size:.88rem;font-weight:600} .form-field .req{color:var(--danger)} .form-field select.input{appearance:none;background-image:none} textarea.input{min-height:112px;resize:vertical} .form-note{font-size:.83rem;color:var(--text-2)} .ok-box{ background:var(--ok-bg);color:var(--ok);border-radius:var(--r-card);padding:20px 22px; font-weight:600;display:flex;gap:.7em;align-items:flex-start; } /* ---------- 19. Footer ---------- */ .footer{background:var(--surface);border-top:1px solid var(--border);padding-block:56px 32px} .footer__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px} .footer__brand img{width:118px;margin-bottom:14px;filter:var(--logo-filter)} .footer__brand p{font-size:.9rem;color:var(--text-2);max-width:30ch} .footer h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:14px} .footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .footer ul a{color:var(--text-2);text-decoration:none;font-size:.92rem} .footer ul a:hover{color:var(--primary);text-decoration:underline} .footer__bottom{ display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; margin-top:44px;padding-top:24px;border-top:1px solid var(--border); font-size:.86rem;color:var(--text-3); } .social{display:flex;gap:8px} .social a{ width:34px;height:34px;border-radius:var(--r-ctl);display:grid;place-items:center; border:1px solid var(--border);color:var(--text-2); } .social a:hover{color:var(--primary);border-color:var(--primary)} /* ---------- 20. Inner pages ---------- */ .phero{padding-top:clamp(36px,4vw,60px);padding-bottom:clamp(28px,3.5vw,48px)} .phero h1{max-width:20ch;text-wrap:balance} .anchor-nav{ display:flex;gap:8px;flex-wrap:wrap;padding-block:14px;position:sticky;top:var(--nav-h); z-index:50;background:color-mix(in srgb,var(--page) 88%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .anchor-nav a{ font-size:.9rem;font-weight:600;text-decoration:none;color:var(--text-2); padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface); } .anchor-nav a:hover{color:var(--primary);border-color:var(--primary)} .feat{display:grid;gap:10px} .feat h3{font-size:1.02rem;margin-bottom:.3em;display:flex;align-items:center;gap:.55em} .feat h3 svg{color:var(--primary);flex:none} .feat p{font-size:.93rem;color:var(--text-2);margin:0} .intg{display:flex;flex-direction:column;gap:14px;height:100%} .intg__logo{ width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex:none; border:1px solid var(--border);background:var(--surface-2);font-weight:750;font-size:1rem; } .intg h3{font-size:1.05rem;margin:0} .intg p{font-size:.92rem;color:var(--text-2);margin:0} .intg .checks{margin:0} .intg .checks li{font-size:.88rem} .prose{max-width:760px} .prose h2{font-size:1.42rem;margin-top:2.2em} .prose h2:first-of-type{margin-top:1em} .prose h3{font-size:1.08rem;margin-top:1.8em} .prose p,.prose li{color:var(--text-2)} .prose li{margin-bottom:.5em} .toc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);padding:18px 22px} .toc ul{margin:0;padding-left:1.1em} .notice{ border-left:3px solid var(--primary);background:var(--surface-2);padding:14px 18px; border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:.92rem;color:var(--text-2); } .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start} /* ---------- 21. Motion ---------- */ .reveal{opacity:0;transform:translateY(18px)} .reveal.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .reveal{opacity:1;transform:none} .mock--float{animation:none} } /* ---------- 22. Responsive ---------- */ @media (max-width:1080px){ .numbers__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px} .footer__grid{grid-template-columns:repeat(3,1fr)} .footer__brand{grid-column:1/-1} } @media (max-width:960px){ .nav__links,.nav__signin{display:none} .nav__burger{display:grid} .hero__grid{grid-template-columns:1fr;gap:36px} .hero__phone{--w:150px;left:-16px;bottom:-24px} .hero__art{order:2} .frow,.india__grid,.split{grid-template-columns:1fr} .frow:nth-child(even) .frow__text{order:0} .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} .tiers{grid-template-columns:1fr;max-width:460px;margin-inline:auto} .mock__body{grid-template-columns:132px minmax(0,1fr)} .mock__stats{grid-template-columns:repeat(2,minmax(0,1fr))} .mock__panels{grid-template-columns:1fr} } @media (max-width:720px){ .grid--3,.grid--2,.grid--4{grid-template-columns:1fr} .india__list{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .mail,.wb{grid-template-columns:1fr} .kb{grid-template-columns:1fr 1fr} .kb__col:last-child{display:none} .footer__grid{grid-template-columns:repeat(2,1fr)} .numbers__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ :root{--nav-h:60px} .wrap{padding-inline:18px} .mock__body{grid-template-columns:1fr} .hero__phone{display:none} .mock__side{ flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border); padding:8px;gap:6px; } .mock__side-group,.mock__nav-count{display:none} .mock__nav{white-space:nowrap;padding:6px 10px} .btn-row .btn{width:100%} .form .input{width:100%} }