/* ============================================================ OCHO OS — Design System Brand navy #002459 · emerald/teal accent · 2026 refresh ============================================================ */ :root{ /* brand */ --navy:#002459; --navy-deep:#001B44; --ink:#0B1220; --ink-2:#0A1628; --ink-3:#071120; /* accents */ --brand:#10B981; --brand-2:#0EA5A4; --brand-3:#34D399; --violet:#8B5CF6; --cyan:#22D3EE; --amber:#F59E0B; --rose:#FB7185; /* neutrals */ --paper:#FFFFFF; --paper-2:#F6F8FA; --paper-3:#EEF2F6; --line:#E4E9F0; --line-2:#D8E0EA; --text:#0F172A; --muted:#64748B; --muted-2:#94A3B8; /* dark-surface tokens */ --d-line:rgba(255,255,255,.10); --d-line-2:rgba(255,255,255,.16); --d-text:#E7EDF6; --d-muted:#93A4BC; /* system */ --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --sh-1:0 1px 2px rgba(15,23,42,.05); --sh-2:0 4px 16px rgba(15,23,42,.06); --sh-3:0 18px 48px -18px rgba(15,23,42,.22); --sh-4:0 34px 80px -28px rgba(0,36,89,.38); --wrap:1200px; --ease:cubic-bezier(.22,1,.36,1); --ease-2:cubic-bezier(.4,0,.2,1); --head:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --grad:linear-gradient(100deg,var(--brand-2) 0%,var(--brand) 42%,var(--cyan) 78%,var(--violet) 100%); /* themeable accent tokens — overridden per product on */ --brand-rgb:16,185,129; /* --brand as rgb triplet, for rgba() */ --brand-3-rgb:52,211,153; /* --brand-3 as rgb triplet */ --brand-fill:#10B981; /* solid button/badge fill */ --on-fill:#04211A; /* text on --brand-fill (contrast checked) */ --brand-ink:#047857; /* brand text on a light brand tint */ } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:auto;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--text); font-family:var(--body);font-size:16.5px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body.is-locked{overflow:hidden} img,svg,canvas{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit} h1,h2,h3,h4{font-family:var(--head);line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:800;color:var(--ink)} p{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:rgba(var(--brand-rgb),.22)} .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} .wrap.narrow{width:min(100% - 40px,820px)} .grad{ background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ============================================================ PRELOADER ============================================================ */ #preloader{ position:fixed;inset:0;z-index:9999;background:var(--ink-2); display:flex;align-items:center;justify-content:center; } #preloader.done{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s} .pre-inner{text-align:center;width:220px} .pre-mark{ width:66px;height:66px;margin:0 auto 22px;border-radius:20px; background:var(--grad);display:grid;place-items:center; color:var(--on-fill);font-size:34px;font-weight:800; animation:preBob 1.6s var(--ease) infinite alternate; box-shadow:0 18px 46px -14px rgba(var(--brand-rgb),.7); } @keyframes preBob{from{transform:translateY(-5px) rotate(-4deg)}to{transform:translateY(5px) rotate(4deg)}} .pre-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden} .pre-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:3px} .pre-num{margin-top:12px;font-size:12px;letter-spacing:.22em;color:var(--d-muted);font-weight:600} /* ============================================================ CURSOR / PROGRESS ============================================================ */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;opacity:0} .cursor-dot{width:6px;height:6px;background:var(--brand);margin:-3px 0 0 -3px} .cursor-ring{ width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(var(--brand-rgb),.55); transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s; } .cursor-ring.grow{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(var(--brand-rgb),.10)} @media (hover:hover) and (pointer:fine){.cursor-dot,.cursor-ring{opacity:1}} .scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;background:transparent} .scroll-progress i{display:block;height:100%;width:0;background:var(--grad)} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:13px 24px;border-radius:12px;font-family:var(--head);font-weight:700; font-size:15px;letter-spacing:-.01em;position:relative;overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s; white-space:nowrap;border:1.5px solid transparent; } .btn .arr{transition:transform .3s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn-sm{padding:9px 18px;font-size:14px;border-radius:10px} .btn-lg{padding:16px 30px;font-size:16px;border-radius:14px} .btn.full{width:100%} .btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 26px -12px rgba(11,18,32,.6)} .btn-primary::after{ content:"";position:absolute;inset:0;background:var(--grad); opacity:0;transition:opacity .35s var(--ease);z-index:-1; } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(var(--brand-rgb),.6);background:var(--brand-fill);color:var(--on-fill)} .header-cta .btn-primary{background:var(--brand-fill);color:var(--on-fill);box-shadow:0 8px 20px -10px rgba(var(--brand-rgb),.7)} .header-cta .btn-primary:hover{background:var(--brand-2);color:#fff} .btn-outline{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)} .btn-outline:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand-2);box-shadow:0 14px 30px -16px rgba(var(--brand-rgb),.5)} .btn-ghost{color:var(--muted)} .btn-ghost:hover{color:var(--ink)} .btn-ghost-light{color:var(--d-text);border-color:var(--d-line-2)} .btn-ghost-light:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)} .btn .play{font-size:11px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(var(--brand-rgb),.16);color:var(--brand-2)} /* ============================================================ HEADER ============================================================ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:1100; transition:background .4s var(--ease-2),box-shadow .4s var(--ease-2),padding .4s var(--ease-2),backdrop-filter .4s; padding:14px 0; } .site-header.stuck{ background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); box-shadow:0 1px 0 var(--line),0 12px 32px -24px rgba(15,23,42,.5);padding:8px 0; } .header-inner{display:flex;align-items:center;gap:28px} .brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex-shrink:0} .brand-mark{ width:38px;height:38px;border-radius:12px;background:var(--grad); display:grid;place-items:center;color:var(--on-fill);font-size:22px;font-weight:800; box-shadow:0 10px 22px -10px rgba(var(--brand-rgb),.75); transition:transform .5s var(--ease); } .brand:hover .brand-mark{transform:rotate(180deg)} .brand-name{font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .brand-name em{font-style:normal;color:var(--brand-2);margin-left:3px;font-size:13px;vertical-align:super;letter-spacing:.04em} .brand-sub{font-family:var(--head);font-weight:600;font-size:17px;color:var(--muted);letter-spacing:-.01em} .brand-sub b{color:var(--ink);font-weight:800} .nav-main{display:flex;gap:4px} .nav-main a{ padding:9px 14px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--muted); position:relative;transition:color .25s,background .25s;white-space:nowrap; } .nav-main a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px; background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease); } .nav-main a:hover,.nav-main a.active{color:var(--ink)} .nav-main a:hover::after,.nav-main a.active::after{transform:scaleX(1)} .header-cta{display:flex;align-items:center;gap:8px} .premium-flag{ display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px; background:linear-gradient(90deg,#FDE68A,#FCA5A5);color:#7C2D12;font-size:11px;font-weight:800; font-family:var(--head);letter-spacing:.01em; } .burger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:9px} .burger i{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .25s} .burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.on i:nth-child(2){opacity:0} .burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:1050;background:var(--ink-2); display:flex;flex-direction:column;justify-content:center;gap:28px;padding:80px 32px 40px; clip-path:circle(0% at calc(100% - 40px) 36px); transition:clip-path .7s var(--ease); } .mobile-menu.open{clip-path:circle(150% at calc(100% - 40px) 36px)} .mobile-menu nav{display:flex;flex-direction:column;gap:2px} .mobile-menu nav a{ font-family:var(--head);font-weight:700;font-size:27px;color:#fff;padding:9px 0; opacity:0;transform:translateY(22px);letter-spacing:-.02em; } .mobile-menu.open nav a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)} .mobile-menu.open nav a:nth-child(1){transition-delay:.16s} .mobile-menu.open nav a:nth-child(2){transition-delay:.21s} .mobile-menu.open nav a:nth-child(3){transition-delay:.26s} .mobile-menu.open nav a:nth-child(4){transition-delay:.31s} .mobile-menu.open nav a:nth-child(5){transition-delay:.36s} .mobile-menu.open nav a:nth-child(6){transition-delay:.41s} .mobile-menu.open nav a:nth-child(7){transition-delay:.46s} .mobile-menu.open nav a:nth-child(8){transition-delay:.51s} /* The mobile menu is a dark (--ink-2) surface, but .btn-primary paints itself --ink — practically the same colour — and .btn-ghost uses the light-surface muted grey with no border. Both buttons rendered as near-invisible dark-on-dark. Same scoped treatment the header bar already uses (.header-cta .btn-primary): accent fill for the primary, dark-surface ghost for the secondary. Both read from the accent tokens, so they follow the per-product palette automatically (emerald / coral / teal). */ .mobile-menu .btn-primary{background:var(--brand-fill);color:var(--on-fill); box-shadow:0 10px 26px -12px rgba(var(--brand-rgb),.55)} .mobile-menu .btn-primary:hover{background:var(--brand-2);color:#fff} .mobile-menu .btn-ghost{color:var(--d-text);border-color:var(--d-line-2)} .mobile-menu .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff} /* While the menu is open the header floats over that same dark sheet, but its wordmark and burger bars are --ink and .stuck paints a light blur behind them. Unscrolled, the "OCHO" wordmark and the close button disappear; scrolled, you get a light bar sitting on a dark sheet. body.is-locked is already toggled with the menu, so use it to force the dark-surface treatment for exactly as long as the menu is up. (.brand-name em — the "OS" — is --brand-2 and already reads fine against the dark.) */ body.is-locked .site-header, body.is-locked .site-header.stuck{background:transparent;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none} body.is-locked .brand-name{color:#fff} body.is-locked .burger i{background:#fff} /* ============================================================ HERO ============================================================ */ .hero{position:relative;padding:150px 0 104px;overflow:hidden;isolation:isolate} .hero::before{ content:"";position:absolute;inset:0;z-index:-3; background: radial-gradient(1100px 620px at 78% 6%,rgba(var(--brand-rgb),.16),transparent 62%), radial-gradient(900px 540px at 8% 20%,rgba(139,92,246,.12),transparent 60%), linear-gradient(180deg,#FBFDFE 0%,#FFFFFF 58%,#F6F8FA 100%); } #heroCanvas{position:absolute;inset:0;z-index:-2;opacity:.5} .grid-fade{ position:absolute;inset:0;z-index:-2;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(760px 460px at 50% 20%,#000,transparent 78%); mask-image:radial-gradient(760px 460px at 50% 20%,#000,transparent 78%); opacity:.6; } .blob{position:absolute;border-radius:50%;filter:blur(76px);z-index:-3;will-change:transform} .blob-a{width:520px;height:520px;top:-140px;right:-100px;background:rgba(var(--brand-rgb),.30);animation:blobA 14s ease-in-out infinite alternate} .blob-b{width:440px;height:440px;bottom:-160px;left:-120px;background:rgba(139,92,246,.22);animation:blobB 17s ease-in-out infinite alternate} @keyframes blobA{to{transform:translate3d(-50px,60px,0) scale(1.14)}} @keyframes blobB{to{transform:translate3d(60px,-45px,0) scale(1.1)}} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} /* ---------- hero slider ---------- */ .hero-slider{position:relative} .hero-slides{display:grid} .hero-slide{ grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .45s var(--ease),visibility .45s; } .hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2} /* staggered entrance for the active slide */ .hero-slide.is-active .anim{animation:slideUp .68s var(--ease) both} .hero-slide.is-active .hero-copy .anim:nth-child(1){animation-delay:.02s} .hero-slide.is-active .hero-copy .anim:nth-child(2){animation-delay:.10s} .hero-slide.is-active .hero-copy .anim:nth-child(3){animation-delay:.18s} .hero-slide.is-active .hero-copy .anim:nth-child(4){animation-delay:.26s} .hero-slide.is-active .hero-copy .anim:nth-child(5){animation-delay:.34s} .hero-slide.is-active .hero-visual.anim{animation-delay:.14s} @keyframes slideUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* direction-aware entry */ .hero-slide.from-right.is-active .anim{animation-name:slideInRight} .hero-slide.from-left.is-active .anim{animation-name:slideInLeft} @keyframes slideInRight{from{opacity:0;transform:translate3d(46px,0,0)}to{opacity:1;transform:none}} @keyframes slideInLeft{from{opacity:0;transform:translate3d(-46px,0,0)}to{opacity:1;transform:none}} /* dark mocks sitting on the light hero */ .hero-visual .board,.hero-visual .till,.hero-visual .chat{ background:#0A1628;border-color:rgba(255,255,255,.10);box-shadow:var(--sh-4); } .hero-visual .chat.mini .chat-body{min-height:0;padding:16px;gap:10px} .hero-visual .chat.mini .bub{font-size:13.5px;padding:10px 14px} .hero-visual .till .till-pay{padding:16px} .hero-visual .till .qr{width:96px;height:96px} .hero-visual .float-card{z-index:4} /* side arrows (large screens) */ .slide-nav{ position:absolute;top:44%;transform:translateY(-50%);z-index:6; width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line); box-shadow:var(--sh-2);display:grid;place-items:center;color:var(--ink); transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s,opacity .3s; } .slide-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .slide-nav:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 16px 34px -14px rgba(11,18,32,.6)} .slide-nav.prev{left:-72px} .slide-nav.next{right:-72px} .slide-nav.prev:hover{transform:translateY(-50%) translateX(-3px)} .slide-nav.next:hover{transform:translateY(-50%) translateX(3px)} @media (max-width:1380px){.slide-nav{display:none}} /* control bar: ‹ tabs › */ .slide-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:44px;flex-wrap:wrap} .slide-nav-sm{ width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line); box-shadow:var(--sh-1);display:grid;place-items:center;color:var(--ink);flex:none; transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s; } .slide-nav-sm svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .slide-nav-sm:hover{background:var(--ink);border-color:var(--ink);color:#fff} .slide-nav-sm.prev:hover{transform:translateX(-3px)} .slide-nav-sm.next:hover{transform:translateX(3px)} .slide-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .slide-tab{ position:relative;overflow:hidden;padding:9px 18px;border-radius:999px; background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1); font-family:var(--head);font-size:13.5px;font-weight:600;color:var(--muted); transition:color .3s,border-color .3s,transform .3s var(--ease),background .3s; } .slide-tab:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px)} .slide-tab.on{color:var(--ink);border-color:transparent;background:#fff;box-shadow:var(--sh-2)} .slide-tab .fill{ position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:2px;background:var(--grad); } .slide-tab.on .fill{width:100%;transition:width linear} .slide-tab .fill.reset{transition:none;width:0} .pill{ display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px; background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1); font-size:13px;font-weight:600;color:var(--muted); } .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);position:relative} .pill-ico{font-size:13px;line-height:1} .pill-prem{font-style:normal;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px; background:linear-gradient(90deg,#FDE68A,#FCA5A5);color:#7C2D12;margin-left:2px} .pill .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(var(--brand-rgb),.35);animation:ping 1.9s var(--ease) infinite} @keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}} .hero-title{font-size:clamp(2.35rem,4.5vw,3.65rem);margin:22px 0 20px;font-weight:800;text-wrap:balance} .rotator{display:block;position:relative} .rot-item{ display:block;position:absolute;top:0;left:0;width:100%; opacity:0;transform:translateY(26px);pointer-events:none; transition:opacity .6s var(--ease),transform .6s var(--ease); } .rot-item.is-active{position:relative;opacity:1;transform:none;pointer-events:auto} .rot-item .l1,.rot-item .l2{display:block} .hero-sub{font-size:17.5px;color:var(--muted);max-width:33em;margin-bottom:32px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px} .hero-ticks,.cta-ticks{display:flex;flex-wrap:wrap;gap:12px 22px} .hero-ticks li,.cta-ticks li{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:7px} .hero-ticks li::before,.cta-ticks li::before{ content:"\2713";width:17px;height:17px;border-radius:50%;flex:none; background:rgba(var(--brand-rgb),.14);color:var(--brand-2); display:grid;place-items:center;font-size:10px;font-weight:800; } .cta-ticks li{color:var(--d-muted)} .scroll-cue{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%); width:26px;height:42px;border:2px solid var(--line-2);border-radius:14px;display:grid;place-items:start center;padding-top:8px; } .scroll-cue span{width:4px;height:8px;border-radius:2px;background:var(--brand);animation:cue 1.7s var(--ease) infinite} @keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}} /* ---------- hero mock ---------- */ .hero-visual{position:relative;perspective:1400px} .mock{ background:var(--ink-2);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-4);border:1px solid rgba(255,255,255,.08); transform:rotateY(-7deg) rotateX(3deg);transform-style:preserve-3d; transition:transform .8s var(--ease); } .hero-visual:hover .mock{transform:rotateY(-2deg) rotateX(1deg) translateY(-6px)} .mock-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--d-line)} .mock-bar>span{width:10px;height:10px;border-radius:50%;background:#FF5F57} .mock-bar>span:nth-child(2){background:#FEBC2E} .mock-bar>span:nth-child(3){background:#28C840} .mock-url{margin-left:12px;font-size:11.5px;color:var(--d-muted);background:rgba(255,255,255,.06);padding:3px 12px;border-radius:6px} .mock-body{display:flex;min-height:310px} .mock-side{width:56px;border-right:1px solid var(--d-line);padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:12px} .ms-logo{width:28px;height:28px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:var(--on-fill);font-weight:800;font-size:16px;margin-bottom:6px} .ms-i{width:22px;height:8px;border-radius:4px;background:rgba(255,255,255,.10)} .ms-i.is-on{background:var(--brand);box-shadow:0 0 14px rgba(var(--brand-rgb),.7)} .mock-main{flex:1;padding:20px 22px} .mock-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px} .mh-t{color:#fff;font-family:var(--head);font-weight:700;font-size:15px} .mh-s{color:var(--d-muted);font-size:11.5px} .mock-chip{background:rgba(var(--brand-rgb),.16);color:var(--brand-3);font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px} .mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px} .kpi{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:11px;padding:11px 12px} .kpi b{display:block;color:#fff;font-family:var(--head);font-size:17px;font-weight:800;letter-spacing:-.02em} .kpi span{font-size:10.5px;color:var(--d-muted)} .mock-chart,.idash-chart,.md-chart,.tc-bars{display:flex;align-items:flex-end;gap:8px;height:104px} .mock-chart i,.idash-chart i,.md-chart i,.tc-bars i{ flex:1;border-radius:6px 6px 3px 3px;height:0; background:linear-gradient(180deg,var(--brand-3),rgba(var(--brand-rgb),.25)); transition:height 1s var(--ease); } .mock-chart.go i,.idash-chart.go i,.md-chart.go i,.tc-bars.go i{height:var(--h)} .mock-chart i:nth-child(even){background:linear-gradient(180deg,var(--violet),rgba(139,92,246,.22))} .float-card{ position:absolute;display:flex;align-items:center;gap:11px; background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.7);border-radius:13px;padding:11px 15px; box-shadow:var(--sh-3);will-change:transform;z-index:3; } .float-card b{display:block;font-family:var(--head);font-size:13px;font-weight:700;color:var(--ink);line-height:1.3} .float-card i{font-style:normal;font-size:11.5px;color:var(--muted)} .fc-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:none} .fc-ico.ok{background:rgba(var(--brand-rgb),.16);color:var(--brand-2)} .fc-ico.blue{background:rgba(34,211,238,.18);color:#0891B2} .fc-ico.violet{background:rgba(139,92,246,.16);color:#7C3AED} .fc-1{bottom:16%;left:-44px;animation:fl 6s var(--ease) infinite alternate} .fc-2{top:-18px;right:-44px;animation:fl 7.5s var(--ease) infinite alternate-reverse} .fc-3{bottom:-18px;right:12%;animation:fl 6.8s var(--ease) infinite alternate} @keyframes fl{to{transform:translateY(-14px)}} /* ============================================================ STATS ============================================================ */ .stats{padding:10px 0 64px;background:linear-gradient(180deg,#F6F8FA,#fff)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .stat b{display:block;font-family:var(--head);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat b.pre{font-size:clamp(1.3rem,2.2vw,1.8rem)} .stat b span{font-size:inherit;font-weight:inherit;color:inherit} .stat>span{display:block;font-size:13.5px;color:var(--muted);font-weight:500} /* ============================================================ SECTIONS ============================================================ */ .sec{padding:96px 0;position:relative} .sec-alt{background:var(--paper-2)} .dark-sec{background:var(--ink-2);color:var(--d-text)} .dark-sec h2,.dark-sec h3{color:#fff} .sec-head{text-align:center;max-width:760px;margin:0 auto 52px} .sec-head h2{font-size:clamp(1.95rem,3.7vw,2.85rem);margin:16px 0 14px} .sec-head p{color:var(--muted);font-size:17px} .sec-head.light p{color:var(--d-muted)} .sec-head.left{text-align:left;margin-inline:0} .tag{ display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px; font-size:12.5px;font-weight:700;font-family:var(--head);letter-spacing:.01em; background:var(--paper-3);color:var(--muted); } .tag-emerald{background:rgba(var(--brand-rgb),.13);color:var(--brand-ink)} .tag-violet{background:rgba(139,92,246,.13);color:#6D28D9} .tag-amber{background:rgba(245,158,11,.15);color:#B45309} .tag-ghost{background:rgba(255,255,255,.08);color:var(--brand-3);border:1px solid var(--d-line)} /* ---------- cards ---------- */ .cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px; box-shadow:var(--sh-1);position:relative;overflow:hidden; transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s; transform-style:preserve-3d;will-change:transform; } .sec-alt .card{background:#fff} .card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease); } .card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:transparent} .card:hover::before{transform:scaleX(1)} .card h3{font-size:17px;margin-bottom:9px;font-weight:700} .card p{font-size:14.5px;color:var(--muted);line-height:1.6} .card.wide{padding:30px 28px} .card.wide h3{font-size:19px} .c-ico{ width:44px;height:44px;border-radius:13px;display:grid;place-items:center; font-size:20px;margin-bottom:18px;transition:transform .45s var(--ease); } .card:hover .c-ico{transform:scale(1.1) rotate(-6deg)} .c-ico.e{background:linear-gradient(135deg,#10B981,#34D399);color:var(--on-fill)} .c-ico.c{background:linear-gradient(135deg,#0EA5A4,#22D3EE);color:#042F2E} .c-ico.v{background:linear-gradient(135deg,#8B5CF6,#A78BFA);color:#2E1065} .c-ico.a{background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#451A03} .c-ico.n{background:linear-gradient(135deg,#002459,#1E4E9C);color:#DBEAFE} /* ---------- ticks ---------- */ .ticks li{position:relative;padding-left:28px;margin-bottom:11px;font-size:15px;color:var(--muted)} .ticks li::before{ content:"\2713";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%; background:rgba(var(--brand-rgb),.14);color:var(--brand-2);display:grid;place-items:center;font-size:11px;font-weight:800; } .ticks.small li{font-size:14px;margin-bottom:9px;padding-left:26px} .dark-sec .ticks li,.panel.dark .ticks li{color:var(--d-muted)} .panel.dark .ticks li::before{background:rgba(var(--brand-rgb),.18);color:var(--brand-3)} /* ---------- panels ---------- */ .panel{margin-top:44px;border-radius:var(--r-xl);overflow:hidden} .panel.dark{ background:linear-gradient(140deg,var(--ink-2) 0%,#0D1B33 55%,#101E3D 100%); border:1px solid var(--d-line);box-shadow:var(--sh-4);position:relative; } .panel.dark::after{ content:"";position:absolute;top:-30%;right:-10%;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(var(--brand-rgb),.22),transparent 66%);pointer-events:none; } .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:44px;align-items:center;position:relative;z-index:1} .panel-grid.rev .panel-copy{order:2} .panel-copy h3{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin:14px 0 14px} .panel-copy>p{color:var(--d-muted);font-size:16px;margin-bottom:20px} .panel-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px} /* ---------- chat ---------- */ .chat{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(10px)} .chat-head{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--d-line);background:rgba(255,255,255,.04)} .ch-av{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:var(--on-fill);font-weight:800;font-size:18px} .chat-head b{display:block;color:#fff;font-family:var(--head);font-size:14px} .chat-head i{font-style:normal;font-size:11px;color:var(--d-muted)} .ch-live{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-3); background:rgba(var(--brand-rgb),.14);padding:3px 9px;border-radius:999px} .chat-body{padding:18px;min-height:290px;display:flex;flex-direction:column;gap:12px} .bub{max-width:86%;padding:11px 15px;border-radius:15px;font-size:14px;line-height:1.55;opacity:0;transform:translateY(12px)} .bub.in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)} .bub.me{align-self:flex-end;background:var(--brand);color:var(--on-fill);border-bottom-right-radius:5px;font-weight:500} .bub.os{align-self:flex-start;background:rgba(255,255,255,.08);color:var(--d-text);border-bottom-left-radius:5px;border:1px solid var(--d-line)} .bub.os b{color:#fff} .bub.typing{display:flex;gap:5px;padding:14px 16px} .bub.typing span{width:6px;height:6px;border-radius:50%;background:var(--d-muted);animation:typ 1.2s infinite} .bub.typing span:nth-child(2){animation-delay:.15s} .bub.typing span:nth-child(3){animation-delay:.3s} @keyframes typ{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .chat-foot{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--d-line);color:var(--d-muted);font-size:13.5px} .chat-foot i{font-style:normal;width:30px;height:30px;border-radius:9px;background:var(--brand-fill);color:var(--on-fill);display:grid;place-items:center} /* ---------- ops board ---------- */ .board{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:var(--r-lg);overflow:hidden;order:1} .board-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--d-line);background:rgba(255,255,255,.04)} .board-head b{color:#fff;font-family:var(--head);font-size:14px} .board-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--brand-3);font-weight:700} .board-live i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulse 1.8s infinite} @keyframes pulse{50%{opacity:.35;transform:scale(.8)}} .board-rows{padding:10px} .brow{ display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"d n t" "d s t"; gap:0 12px;align-items:center;padding:13px 14px;border-radius:11px;margin-bottom:7px; background:rgba(255,255,255,.04);border:1px solid transparent; transition:transform .35s var(--ease),background .35s,border-color .35s; } .brow:hover{transform:translateX(5px);background:rgba(255,255,255,.08);border-color:var(--d-line-2)} .brow.prog{background:rgba(var(--brand-rgb),.12);border-color:rgba(var(--brand-rgb),.28)} .brow.done{opacity:.5} .bdot{grid-area:d;width:9px;height:9px;border-radius:50%;background:var(--brand)} .bdot.warn{background:var(--amber)} .bdot.info{background:var(--cyan)} .brow b{grid-area:n;color:#fff;font-family:var(--head);font-size:14px;font-weight:700} .brow i{grid-area:s;font-style:normal;font-size:12px;color:var(--d-muted)} .brow em{grid-area:t;font-style:normal;font-size:11.5px;color:var(--d-muted);background:rgba(255,255,255,.07);padding:4px 10px;border-radius:999px;white-space:nowrap} .brow em.need{background:rgba(245,158,11,.18);color:#FCD34D} .brow em.ok{background:rgba(var(--brand-rgb),.16);color:var(--brand-3)} .board-progress{padding:14px 18px 18px;border-top:1px solid var(--d-line)} .bp-top{display:flex;justify-content:space-between;font-size:12px;color:var(--d-muted);margin-bottom:9px} .bp-top b{color:#fff} .bp-track{height:6px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden} .bp-track i{display:block;height:100%;width:0;border-radius:4px;background:var(--grad);transition:width 1.3s var(--ease)} .bp-track.go i{width:var(--w)} .board-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--d-line)} .board-foot div{padding:14px;text-align:center;border-right:1px solid var(--d-line)} .board-foot div:last-child{border-right:0} .board-foot b{display:block;color:#fff;font-family:var(--head);font-size:20px;font-weight:800} .board-foot span{font-size:11px;color:var(--d-muted)} /* ---------- till ---------- */ .till{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:var(--r-lg);overflow:hidden} .till-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--d-line);background:rgba(255,255,255,.04)} .till-head b{color:#fff;font-family:var(--head);font-size:14px} .till-flag{font-size:11.5px;font-weight:700;color:var(--on-fill);background:var(--brand-3);padding:4px 11px;border-radius:999px} .till-lines{padding:12px} .tline{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.04);margin-bottom:7px;color:var(--d-text);font-size:14px} .tline b{margin-left:auto;font-family:var(--head);font-weight:700;color:#fff} .tl-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:none;background:rgba(var(--brand-rgb),.16)} .tl-ico.a{background:rgba(245,158,11,.18)} .tl-ico.r{background:rgba(251,113,133,.18)} .tl-ico.e{background:rgba(var(--brand-rgb),.18)} .till-total{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line)} .till-total>span{color:var(--d-muted);font-size:13px} .till-vat{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px} .tl-q{font-style:normal;font-size:11.5px;font-weight:700;color:var(--brand-3); background:rgba(var(--brand-rgb),.16);padding:2px 8px;border-radius:999px;margin-left:7px} .till-amt{font-family:var(--head);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em} .till-pay{padding:20px;display:flex;flex-direction:column;align-items:center;gap:13px} .qr{ width:112px;height:112px;border-radius:12px;background:#fff;padding:9px; background-image: repeating-linear-gradient(90deg,#0B1220 0 8px,transparent 8px 16px), repeating-linear-gradient(0deg,#0B1220 0 8px,transparent 8px 16px); background-size:16px 16px;background-clip:content-box;background-origin:content-box; background-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.9); animation:qrPulse 2.4s var(--ease) infinite; } @keyframes qrPulse{50%{box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 34px rgba(var(--brand-rgb),.5)}} .till-status{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--d-muted)} .till-status i{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 1.6s infinite} .till-status.paid{color:var(--brand-3);font-weight:700} .till-store{display:flex;align-items:center;gap:11px;padding:14px 18px;border-top:1px solid var(--d-line);background:rgba(255,255,255,.03)} .till-store b{display:block;color:#fff;font-family:var(--head);font-size:13px} .till-store i{font-style:normal;font-size:11.5px;color:var(--d-muted)} .till-store em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--brand-3);font-weight:700} /* ============================================================ INDUSTRIES ============================================================ */ .ind-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:34px} .ind-tab{ padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line); font-size:14px;font-weight:600;color:var(--muted); transition:all .3s var(--ease); } .ind-tab:hover{border-color:var(--brand);color:var(--brand-2);transform:translateY(-2px)} .ind-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 24px -12px rgba(11,18,32,.6)} .ind-panel{ display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center; background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-2); } .ind-left h3{font-size:1.7rem;margin-bottom:13px} .ind-left p{color:var(--muted);margin-bottom:22px} .ind-terms{display:flex;flex-wrap:wrap;gap:8px} .ind-terms li{ font-size:13px;font-weight:600;padding:6px 13px;border-radius:999px; background:rgba(var(--brand-rgb),.11);color:var(--brand-ink); opacity:0;transform:translateY(8px);animation:termIn .45s var(--ease) forwards; } @keyframes termIn{to{opacity:1;transform:none}} .ind-dash{background:var(--ink-2);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-3)} .idash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .idash-head b{color:#fff;font-family:var(--head);font-size:15px} .idash-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;min-height:150px} .idrow{ display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px; background:rgba(255,255,255,.05);border:1px solid var(--d-line); opacity:0;transform:translateX(-12px);animation:rowIn .45s var(--ease) forwards; } @keyframes rowIn{to{opacity:1;transform:none}} .idrow span.d{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none} .idrow b{color:#fff;font-family:var(--head);font-size:13.5px;font-weight:700} .idrow i{font-style:normal;font-size:12px;color:var(--d-muted);margin-left:auto} /* ============================================================ MODULES ============================================================ */ .mod-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:32px} .chip{ padding:8px 18px;border-radius:999px;background:#fff;border:1px solid var(--line); font-size:13.5px;font-weight:600;color:var(--muted);transition:all .3s var(--ease); } .chip:hover{border-color:var(--brand);color:var(--brand-2)} .chip.is-on{background:var(--grad);border-color:transparent;color:var(--on-fill);font-weight:700;box-shadow:0 10px 24px -12px rgba(var(--brand-rgb),.8)} .mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .mod{ background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 18px; position:relative;overflow:hidden;box-shadow:var(--sh-1); transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .4s,border-color .4s; } .mod:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent} .mod.hide{display:none} .mod-top{display:flex;align-items:center;gap:11px;margin-bottom:11px} .mod-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none} .mod h3{font-size:15px;font-weight:700;letter-spacing:-.01em} .mod p{font-size:13.5px;color:var(--muted);line-height:1.55} .mod-badge{ position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;padding:3px 8px;border-radius:999px; } .mod-badge.live{background:rgba(var(--brand-rgb),.14);color:var(--brand-ink)} .mod-badge.soon{background:rgba(139,92,246,.14);color:#6D28D9} .mod-note{text-align:center;margin-top:30px;color:var(--muted);font-size:14.5px} /* ============================================================ SPOTLIGHTS ============================================================ */ .spot{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:52px 0;border-bottom:1px solid var(--line)} .spot:last-child{border-bottom:0} .spot.rev .spot-copy{order:2} .spot-copy h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:15px 0 14px} .spot-copy>p{color:var(--muted);margin-bottom:20px;font-size:16.5px} .mini-dash,.timer-card,.portal-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-3); } .md-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .md-head b{font-family:var(--head);font-size:15px} .md-head .mock-chip{background:rgba(var(--brand-rgb),.13);color:var(--brand-ink)} .md-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:20px} .md-kpis div{background:var(--paper-2);border-radius:11px;padding:12px} .md-kpis b{display:block;font-family:var(--head);font-size:18px;font-weight:800;letter-spacing:-.02em} .md-kpis span{font-size:11px;color:var(--muted)} .md-chart i{background:linear-gradient(180deg,var(--brand),rgba(var(--brand-rgb),.18))} .md-chart i:nth-child(even){background:linear-gradient(180deg,var(--violet),rgba(139,92,246,.16))} .timer-card{background:var(--ink-2);border-color:var(--d-line)} .tc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .tc-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--rose)} .tc-live i{width:8px;height:8px;border-radius:50%;background:var(--rose);animation:pulse 1.4s infinite} .tc-job{font-size:12px;color:var(--d-muted)} .tc-time{font-family:var(--head);font-size:clamp(2.1rem,4vw,3rem);font-weight:800;color:#fff;letter-spacing:-.03em; font-variant-numeric:tabular-nums;margin-bottom:8px} .tc-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:13px;color:var(--d-muted)} .tc-val{font-family:var(--head);font-size:19px;font-weight:800;color:var(--brand-3)} .tc-bars i{background:linear-gradient(180deg,var(--brand-3),rgba(var(--brand-rgb),.2))} .pc-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px} .pc-av{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center; font-family:var(--head);font-weight:800;color:var(--on-fill);font-size:14px} .pc-head b{display:block;font-family:var(--head);font-size:15px} .pc-head i{font-style:normal;font-size:12px;color:var(--muted)} .pc-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)} .pc-row b{display:block;font-family:var(--head);font-size:14px;font-weight:600} .pc-row i{font-style:normal;font-size:12px;color:var(--muted)} .pc-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;flex:none} .pc-ico.ok{background:rgba(var(--brand-rgb),.14);color:var(--brand-2)} .pc-ico.blue{background:rgba(34,211,238,.16);color:#0891B2} .pc-ico.amber{background:rgba(245,158,11,.16);color:#B45309} .pc-btn{margin-top:18px;text-align:center;padding:12px;border-radius:11px;background:var(--paper-2); font-family:var(--head);font-weight:700;font-size:14px;color:var(--brand-2); transition:background .3s,transform .3s var(--ease)} .pc-btn:hover{background:rgba(var(--brand-rgb),.1);transform:translateY(-2px)} /* ============================================================ ROADMAP ============================================================ */ .road-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .road-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1); transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .road-col:hover{transform:translateY(-6px);box-shadow:var(--sh-3)} .rc-head{padding:20px 24px;border-bottom:1px solid var(--line);position:relative} .rc-head::before{content:"";position:absolute;top:0;left:0;right:0;height:4px} .rc-head.shipped::before{background:var(--brand)} .rc-head.building::before{background:var(--violet)} .rc-head.planned::before{background:var(--muted-2)} .rc-head b{display:block;font-family:var(--head);font-size:17px;font-weight:800} .rc-head span{font-size:12.5px;color:var(--muted)} .rc-list{padding:18px 24px 24px} .rc-list li{position:relative;padding-left:26px;margin-bottom:12px;font-size:14.5px;color:var(--muted)} .rc-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%; background:var(--line-2);box-shadow:0 0 0 3px var(--paper-3)} .road-col:nth-child(1) .rc-list li::before{background:var(--brand)} .road-col:nth-child(2) .rc-list li::before{background:var(--violet)} /* ============================================================ STEPS ============================================================ */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;padding-top:34px} .steps-line{position:absolute;top:12px;left:8%;right:8%;height:2px;background:var(--line)} .steps-line i{display:block;height:100%;width:0;background:var(--grad);transition:width 1.6s var(--ease)} .step{text-align:center} .s-num{ display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;border-radius:17px; background:#fff;border:2px solid var(--line);font-family:var(--head);font-weight:800;font-size:15px;color:var(--muted); position:relative;z-index:2;transition:all .45s var(--ease); } .step:hover .s-num{background:var(--grad);border-color:transparent;color:var(--on-fill);transform:translateY(-5px) scale(1.06); box-shadow:0 16px 32px -14px rgba(var(--brand-rgb),.8)} .step h3{font-size:17px;margin-bottom:9px} .step p{font-size:14.5px;color:var(--muted)} /* ============================================================ TESTIMONIALS ============================================================ */ .quote-hero{max-width:820px;margin:0 auto 46px;text-align:center; background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:var(--r-xl);padding:44px 40px} .stars{color:#FBBF24;letter-spacing:3px;font-size:18px;margin-bottom:18px} .stars.sm{font-size:14px;margin-bottom:14px} #bigQuote{margin:0 0 24px;font-family:var(--head);font-size:clamp(1.15rem,2.1vw,1.55rem); font-weight:600;color:#fff;line-height:1.5;letter-spacing:-.01em;transition:opacity .4s var(--ease)} .q-by{display:flex;align-items:center;gap:12px;justify-content:center} .q-av{width:42px;height:42px;border-radius:13px;background:var(--grad);display:grid;place-items:center; font-family:var(--head);font-weight:800;color:var(--on-fill);font-size:14px;flex:none} .q-av.e{background:linear-gradient(135deg,#10B981,#34D399)} .q-av.v{background:linear-gradient(135deg,#8B5CF6,#A78BFA);color:#fff} .q-av.a{background:linear-gradient(135deg,#F59E0B,#FBBF24)} .q-by b{display:block;font-family:var(--head);font-size:14.5px;color:#fff} .q-by i{font-style:normal;font-size:12.5px;color:var(--d-muted)} .q-dots{display:flex;gap:8px;justify-content:center;margin-top:24px} .q-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:all .3s var(--ease)} .q-dot.on{background:var(--brand);width:26px;border-radius:5px} .quotes .quote-card{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:var(--r-lg); padding:26px 24px;text-align:left;transition:transform .45s var(--ease),background .45s} .quotes .quote-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.09)} .quote-card p{color:var(--d-text);font-size:14.5px;margin-bottom:20px;line-height:1.6} .quote-card .q-by{justify-content:flex-start} .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px} .tbadge{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--d-line);font-size:13.5px;color:var(--d-text); transition:transform .35s var(--ease),background .35s} .tbadge:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)} .tbadge i{font-style:normal;font-size:12px} .tbadge i.ok{color:var(--brand-3)} .tbadge i.blue{color:#60A5FA} .tbadge i.cyan{color:var(--cyan)} .tbadge i.violet{color:#A78BFA} /* ============================================================ PRICING ============================================================ */ .bill-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:38px} .bt-label{font-size:14.5px;font-weight:600;color:var(--muted);transition:color .3s} .bt-label.is-on{color:var(--ink)} .switch{width:54px;height:30px;border-radius:999px;background:var(--line-2);position:relative;transition:background .35s var(--ease)} .switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff; box-shadow:var(--sh-2);transition:transform .35s var(--ease)} .switch.on{background:var(--brand)} .switch.on i{transform:translateX(24px)} .bt-save{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(var(--brand-rgb),.14);color:var(--brand-ink)} .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch} /* Sub-pages (Property, Commerce) price three tiers rather than four. This MUST stay a class: it was previously an inline style, and an inline style outranks every media query, so the responsive collapse below never fired and both pages scrolled sideways by ~350px on every phone. The breakpoints below repeat this selector so they match on specificity and win on order. */ .price-grid.three{grid-template-columns:repeat(3,1fr)} .price-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px; display:flex;flex-direction:column;box-shadow:var(--sh-1);position:relative; transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s; } .price-card:hover{transform:translateY(-7px);box-shadow:var(--sh-3)} .price-card.featured{border-color:var(--brand);box-shadow:0 24px 60px -26px rgba(var(--brand-rgb),.55)} .price-card.featured::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1.5px; background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .pc-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap; background:var(--grad);color:var(--on-fill);font-family:var(--head);font-weight:800;font-size:11.5px; padding:5px 15px;border-radius:999px;box-shadow:0 10px 22px -10px rgba(var(--brand-rgb),.8)} .price-card h3{font-size:19px;margin-bottom:6px} .pc-sub{font-size:13.5px;color:var(--muted);margin-bottom:20px;min-height:40px} .pc-price{display:flex;align-items:baseline;gap:6px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)} .pc-price b{font-family:var(--head);font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1; transition:opacity .25s var(--ease)} .pc-price b.quote-price{font-size:1.65rem} .pc-price span{font-size:13px;color:var(--muted)} .pc-unit{font-size:13px;font-weight:700;color:var(--brand-2);margin:-12px 0 18px} .price-card .ticks{flex:1;margin-bottom:22px} .price-note{margin-top:34px;text-align:center;background:var(--paper-2);border:1px solid var(--line); border-radius:var(--r);padding:16px 22px;font-size:14.5px;color:var(--muted)} .price-note i{font-style:normal;color:var(--brand-2);margin-right:6px} .price-note a{color:var(--brand-2);font-weight:700;border-bottom:1.5px solid rgba(var(--brand-rgb),.35)} .price-foot{margin-top:24px;text-align:center;font-size:13px;color:var(--muted-2)} /* ============================================================ COMPARISON TABLE ============================================================ */ .cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2)} .cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:14px} .cmp thead th{ background:var(--paper-2);text-align:left;padding:14px 16px;font-family:var(--head); font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted); border-bottom:1px solid var(--line);white-space:nowrap; } .cmp thead th:not(:first-child):not(:nth-child(2)){text-align:center} .cmp tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--muted)} .cmp tbody td:first-child{font-family:var(--head);font-weight:700;color:var(--ink)} .cmp tbody td:not(:first-child):not(:nth-child(2)){text-align:center} .cmp tbody tr{transition:background .25s} .cmp tbody tr:hover{background:var(--paper-2)} .cmp tbody tr.ours{background:rgba(var(--brand-rgb),.07)} .cmp tbody tr.ours:hover{background:rgba(var(--brand-rgb),.11)} .cmp tbody tr.ours td:first-child{color:var(--brand-ink)} .cmp .st{color:#FBBF24;letter-spacing:1px;white-space:nowrap} .cmp .no{color:var(--muted-2)} .cmp .yes{color:var(--brand);font-size:16px} .cmp .half{color:var(--amber);font-size:16px} .cmp-note{text-align:center;font-size:12.5px;color:var(--muted-2);margin-top:16px} .cmp-cap{width:34%} /* ---------- 3 steps ---------- */ .three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .three-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;text-align:center; box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .three-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3)} .three-num{width:40px;height:40px;margin:0 auto 16px;border-radius:50%;background:var(--grad); display:grid;place-items:center;font-family:var(--head);font-weight:800;color:var(--on-fill);font-size:15px} .three-card h3{font-size:16px;margin-bottom:9px} .three-card p{font-size:14px;color:var(--muted)} /* ---------- phone mock ---------- */ .phone{ width:290px;margin:0 auto;background:var(--ink-2);border-radius:34px;padding:12px; border:1px solid var(--d-line);box-shadow:var(--sh-4);position:relative; } .phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%); width:74px;height:5px;border-radius:3px;background:rgba(255,255,255,.14)} .phone-in{background:#0D1B33;border-radius:24px;padding:34px 14px 16px;min-height:430px} .ph-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .ph-head b{color:#fff;font-family:var(--head);font-size:15px} .ph-head span{font-size:11px;color:var(--brand-3);background:rgba(var(--brand-rgb),.14);padding:3px 9px;border-radius:999px} .ph-job{background:rgba(255,255,255,.05);border:1px solid var(--d-line);border-radius:13px;padding:13px;margin-bottom:9px} .ph-job b{display:block;color:#fff;font-family:var(--head);font-size:13.5px;margin-bottom:4px} .ph-job i{font-style:normal;display:block;font-size:11.5px;color:var(--d-muted);line-height:1.5} .ph-track{height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden} .ph-track em{display:block;height:100%;width:64%;background:var(--grad);border-radius:3px} .ph-ev{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap} .ph-ev span{font-size:10.5px;color:var(--brand-3);background:rgba(var(--brand-rgb),.13);padding:4px 9px;border-radius:999px} .ph-btn{margin-top:14px;text-align:center;padding:12px;border-radius:12px;background:var(--brand-fill); color:var(--on-fill);font-family:var(--head);font-weight:800;font-size:14px} /* ============================================================ ACCORDION ============================================================ */ .acc-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px; overflow:hidden;transition:box-shadow .35s var(--ease),border-color .35s} .acc-item.open{box-shadow:var(--sh-2);border-color:var(--line-2)} .acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:20px 24px;text-align:left;font-family:var(--head);font-weight:700;font-size:16px;color:var(--ink)} .acc-q i{position:relative;width:20px;height:20px;flex:none} .acc-q i::before,.acc-q i::after{content:"";position:absolute;background:var(--brand-2);border-radius:2px; transition:transform .35s var(--ease),opacity .3s} .acc-q i::before{top:9px;left:0;width:20px;height:2px} .acc-q i::after{left:9px;top:0;width:2px;height:20px} .acc-item.open .acc-q i::after{transform:rotate(90deg);opacity:0} .acc-a{display:none;padding:0 24px 22px} .acc-a p{color:var(--muted);font-size:15px} /* ============================================================ CTA ============================================================ */ .cta{position:relative;padding:104px 0;background:var(--ink-3);overflow:hidden;text-align:center;isolation:isolate} .cta::before{ content:"";position:absolute;inset:0;z-index:-2; background: radial-gradient(760px 460px at 18% 90%,rgba(var(--brand-rgb),.26),transparent 62%), radial-gradient(720px 460px at 84% 12%,rgba(139,92,246,.24),transparent 62%), linear-gradient(140deg,#04101F 0%,#071A31 52%,#04131F 100%); } .cta-glow{position:absolute;bottom:-40%;left:50%;transform:translateX(-50%);width:900px;height:600px;z-index:-1; background:radial-gradient(circle,rgba(var(--brand-3-rgb),.30),transparent 62%);filter:blur(48px); animation:glowMove 12s ease-in-out infinite alternate} @keyframes glowMove{to{transform:translateX(-50%) translateY(-40px) scale(1.15)}} .cta-inner{position:relative;z-index:2;max-width:760px} .cta .pill{background:rgba(255,255,255,.07);border-color:var(--d-line);color:var(--d-text)} .cta h2{color:#fff;font-size:clamp(2.05rem,4.4vw,3.35rem);margin:22px 0 18px} .cta>.wrap>p{color:var(--d-muted);font-size:17px;margin-bottom:32px} .cta-form{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-bottom:14px} .cta-form input{ flex:1;min-width:270px;max-width:360px;padding:16px 20px;border-radius:14px; background:rgba(255,255,255,.07);border:1.5px solid var(--d-line-2);color:#fff;font-size:15px; transition:border-color .3s,background .3s; } .cta-form input::placeholder{color:var(--d-muted)} .cta-form input:focus{outline:none;border-color:var(--brand);background:rgba(255,255,255,.11)} .cta-form .btn-primary{background:var(--brand-fill);color:var(--on-fill)} .cta-form .btn-primary:hover{background:#fff;color:var(--ink)} .form-msg{min-height:24px;font-size:14px;color:var(--brand-3);margin-bottom:14px;font-weight:600} .form-msg.err{color:#FCA5A5} .cta-ticks{justify-content:center;margin-top:8px} .fc-a{top:26%;left:6%} .fc-b{bottom:24%;right:6%} .cta .float-card{background:rgba(255,255,255,.08);border-color:var(--d-line-2);backdrop-filter:blur(12px)} .cta .float-card b{color:#fff} .cta .float-card i{color:var(--d-muted)} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:#050D1A;color:var(--d-muted);padding:64px 0 26px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr 1.3fr;gap:36px} /* Grid items default to min-width:auto, so a column refuses to shrink below its longest link ("Security & Compliance", "Consultants & Freelancers"). On a 320px screen that pushed the whole page 47px wide. min-width:0 lets the track shrink and the labels wrap instead. */ .foot-col{min-width:0} .foot-col a{overflow-wrap:break-word} .foot-brand .brand-mark{margin-bottom:18px} .foot-brand p{font-size:14px;line-height:1.65;max-width:30ch;margin-bottom:20px} .socials{display:flex;gap:9px} .socials a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center; color:var(--d-muted);font-size:14px;font-weight:700;transition:all .3s var(--ease)} .socials a:hover{background:var(--brand-fill);color:var(--on-fill);transform:translateY(-3px)} .foot-col h4{font-family:var(--head);font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; color:#fff;margin-bottom:16px} .foot-col a{display:block;font-size:14px;padding:5px 0;color:var(--d-muted);transition:color .25s,transform .25s var(--ease)} .foot-col a:hover{color:var(--brand-3);transform:translateX(4px)} .fc-p{font-size:13.5px;line-height:1.6;margin-bottom:14px} .foot-form{display:flex;gap:8px} .foot-form input{flex:1;min-width:0;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.06); border:1px solid var(--d-line);color:#fff;font-size:13.5px} .foot-form input::placeholder{color:var(--muted)} .foot-form input:focus{outline:none;border-color:var(--brand)} .foot-form button{width:44px;border-radius:10px;background:var(--brand-fill);color:var(--on-fill);font-size:15px; display:grid;place-items:center;transition:transform .3s var(--ease),background .3s} .foot-form button:hover{transform:translateY(-2px);background:var(--brand-3)} .foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px; margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:13px} .foot-bottom nav{display:flex;flex-wrap:wrap;gap:20px} .foot-bottom nav a{transition:color .25s} .foot-bottom nav a:hover{color:var(--brand-3)} .ops{display:inline-flex;align-items:center;gap:8px} .ops i{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite} /* The indicator links to status.ochohub.com. It sits outside .foot-bottom nav, so it needs its own hover treatment to match the legal links beside it. */ a.ops{transition:color .25s} a.ops:hover{color:var(--brand-3)} /* ============================================================ BACK TO TOP ============================================================ */ .to-top{ position:fixed;right:22px;bottom:22px;z-index:1000;width:46px;height:46px;border-radius:14px; background:var(--ink);color:#fff;display:grid;place-items:center;font-size:17px; box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(14px); transition:all .4s var(--ease); } .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--brand-fill);color:var(--on-fill);transform:translateY(-3px)} /* ============================================================ REVEAL ============================================================ */ [data-reveal]{opacity:0;transform:translateY(30px);will-change:opacity,transform} [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)} /* ============================================================ SUB-PAGE HERO ============================================================ */ .sub-hero{position:relative;padding:150px 0 84px;overflow:hidden;isolation:isolate} .sub-hero::before{ content:"";position:absolute;inset:0;z-index:-3; background: radial-gradient(1000px 560px at 76% 4%,rgba(var(--brand-rgb),.17),transparent 62%), radial-gradient(700px 460px at 6% 30%,rgba(34,211,238,.11),transparent 60%), linear-gradient(180deg,#FBFDFE,#FFFFFF 62%,#F6F8FA); } .sub-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:center} .sub-hero h1{font-size:clamp(2.35rem,4.6vw,3.5rem);margin:0 0 20px} .sub-hero .lede{font-size:17px;color:var(--muted);margin-bottom:30px;max-width:38em} .sub-ticks{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:26px} .sub-ticks li{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:7px} .sub-ticks li::before{content:"\2713";width:17px;height:17px;border-radius:50%;flex:none; background:rgba(var(--brand-rgb),.14);color:var(--brand-2);display:grid;place-items:center;font-size:10px;font-weight:800} .sub-badge{position:absolute;top:16px;right:16px;z-index:4;display:inline-flex;align-items:center;gap:7px; background:var(--brand-3);color:var(--on-fill);font-family:var(--head);font-weight:800;font-size:12px; padding:7px 14px;border-radius:999px;box-shadow:0 12px 26px -10px rgba(var(--brand-rgb),.9); animation:fl 3.4s var(--ease) infinite alternate} .sub-vis{position:relative} .founder-flag{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px; background:rgba(245,158,11,.14);color:#B45309;font-size:13px;font-weight:700;font-family:var(--head);margin-bottom:16px} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .cards-4,.mod-grid{grid-template-columns:repeat(2,1fr)} .price-grid,.price-grid.three{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:32px} .foot-brand{grid-column:1/-1} .nav-main{display:none} } @media (max-width:960px){ .hero-grid,.sub-grid,.panel-grid,.ind-panel,.spot{grid-template-columns:1fr;gap:40px} .panel-grid.rev .panel-copy,.spot.rev .spot-copy{order:0} .hero{padding:130px 0 70px} .hero-visual{max-width:560px;margin-inline:auto} .cards-3,.three,.road-grid{grid-template-columns:1fr} .steps{grid-template-columns:repeat(2,1fr);gap:34px 20px} .steps-line{display:none} .burger{display:flex} .header-cta{display:none} .fc-1{left:-10px}.fc-2{right:-8px} .cta .float-card{display:none} } @media (max-width:680px){ body{font-size:16px} .sec{padding:70px 0} .cards-4,.mod-grid,.price-grid,.price-grid.three,.stats-grid,.cards-2{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr);gap:26px} .panel-grid{padding:28px 22px;gap:30px} .ind-panel{padding:26px 22px} .quote-hero{padding:32px 22px} .steps{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .foot-bottom{justify-content:center;text-align:center} .foot-bottom nav{justify-content:center;gap:14px} .cta-form input{max-width:none} .hero-title{font-size:2.35rem} .mock-kpis{grid-template-columns:1fr} .float-card{display:none} .cursor-dot,.cursor-ring{display:none} .mobile-menu nav a{font-size:23px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} [data-reveal]{opacity:1;transform:none} .hero-slide.is-active .anim{animation:none!important;opacity:1;transform:none} .mock{transform:none} } /* till header meta (used where the floating badge occupies the corner) */ .till-counter{font-size:11.5px;color:var(--d-muted);background:rgba(255,255,255,.07); padding:4px 11px;border-radius:999px;margin-right:120px} @media (max-width:960px){.till-counter{margin-right:0}} /* ============================================================ ABOUT PAGE ============================================================ */ .about-hero{position:relative;padding:158px 0 84px;overflow:hidden;isolation:isolate;text-align:center} .about-hero::before{ content:"";position:absolute;inset:0;z-index:-3; background: radial-gradient(900px 520px at 50% -6%,rgba(var(--brand-rgb),.15),transparent 62%), radial-gradient(760px 460px at 82% 20%,rgba(139,92,246,.14),transparent 62%), linear-gradient(180deg,#FBFDFE,#FFFFFF 60%,#F6F8FA); } .about-hero-in{max-width:820px} .about-hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);margin:22px 0 20px;text-wrap:balance} .about-hero p{font-size:17.5px;color:var(--muted);max-width:44em;margin-inline:auto} .pill-ico.r{color:#F43F5E} /* ---------- mission ---------- */ .mission-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center} .mission-copy h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:20px} .mission-copy p{color:var(--muted);font-size:16.5px;margin-bottom:16px} .note-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 32px; box-shadow:var(--sh-3);position:relative;overflow:hidden; } .note-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .note-tag{ display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:10.5px; font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink); background:rgba(var(--brand-rgb),.12);padding:6px 13px;border-radius:999px;margin-bottom:16px; } .note-card h3{font-size:1.35rem;margin-bottom:14px} .note-card p{color:var(--muted);font-size:15.5px;margin-bottom:14px;line-height:1.65} .note-foot{ margin-top:22px;padding-top:18px;border-top:1px solid var(--line); font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:9px; } .note-foot b{color:var(--ink);font-weight:700} .note-foot i{font-style:normal;color:var(--brand-2)} /* ---------- values ---------- */ .values{gap:20px} .values .card{padding:28px 26px} .v-ico{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center; font-size:19px;margin-bottom:18px;transition:transform .45s var(--ease); } .card:hover .v-ico{transform:scale(1.1) rotate(-6deg)} .v-ico.rose{background:rgba(244,63,94,.12);color:#E11D48} .v-ico.amber{background:rgba(245,158,11,.14);color:#B45309} .v-ico.blue{background:rgba(59,130,246,.12);color:#2563EB} .v-ico.green{background:rgba(var(--brand-rgb),.13);color:var(--brand-ink)} .v-ico.violet{background:rgba(139,92,246,.13);color:#6D28D9} .v-ico.cyan{background:rgba(34,211,238,.15);color:#0891B2} /* ---------- founder ---------- */ .founder-card{ display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start; background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); padding:44px;box-shadow:var(--sh-3);max-width:1000px;margin-inline:auto; } .founder-photo{position:relative;width:180px;height:180px;border-radius:20px;overflow:hidden; margin-bottom:20px;background:var(--paper-3);box-shadow:var(--sh-2)} .founder-photo img{width:100%;height:100%;object-fit:cover;display:block} .founder-fallback{ position:absolute;inset:0;display:none;place-items:center;background:var(--grad); font-family:var(--head);font-weight:800;font-size:56px;color:var(--on-fill);letter-spacing:-.02em; } .founder-photo.no-img img{display:none} .founder-photo.no-img .founder-fallback{display:grid} .founder-side h3{font-size:1.35rem;margin-bottom:4px} .founder-role{color:var(--brand-2);font-weight:700;font-size:14px;margin-bottom:14px} .founder-link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted); transition:color .25s,transform .25s var(--ease)} .founder-link:hover{color:var(--brand-2);transform:translateX(3px)} .founder-link i{font-style:normal;width:22px;height:22px;border-radius:6px;background:#0A66C2;color:#fff; display:grid;place-items:center;font-size:11px;font-weight:800} .founder-body p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:18px} .founder-body b{color:var(--ink);font-weight:700} .cred-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px} .cred-list li{ display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted); background:var(--paper-2);border:1px solid var(--line);padding:7px 14px;border-radius:999px; transition:transform .3s var(--ease),border-color .3s,color .3s; } .cred-list li:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--ink)} .cred-list i{font-style:normal;font-size:11px;color:var(--brand-2)} @media (max-width:960px){ .mission-grid{grid-template-columns:1fr;gap:34px} .founder-card{grid-template-columns:1fr;gap:28px;padding:32px 26px} .founder-photo{margin-inline:auto} .founder-side{text-align:center} .cred-list{justify-content:flex-start} } @media (max-width:680px){ .about-hero{padding:126px 0 60px} .founder-card{padding:26px 22px} .founder-photo{width:140px;height:140px} } /* ============================================================ BRAND EMBLEM — circular artwork with a glyph fallback assets/ocho-emblem.png navy #002459 platform / about assets/ocho-emblem-property-v2.png coral #FF5A5F Property by Ocho assets/ocho-emblem-tap.png teal #005957 Commerce (tap to pay) ============================================================ */ :root{ --ocho-navy:#002459; --ocho-coral:#FF5A5F; --ocho-teal:#005957; } .brand-mark{ background:none;box-shadow:none;padding:0;border-radius:50%; width:40px;height:40px;flex:none;overflow:visible; } .brand-mark img{width:100%;height:100%;object-fit:contain;display:block; transition:transform .5s var(--ease)} .brand:hover .brand-mark{transform:none} .brand:hover .brand-mark img{transform:rotate(180deg)} .brand-mark em{display:none;font-style:normal} /* fallback: no artwork -> gradient tile with the glyph */ .brand-mark.no-img{background:var(--grad);border-radius:12px; box-shadow:0 10px 22px -10px rgba(var(--brand-rgb),.75)} .brand-mark.no-img img{display:none} .brand-mark.no-img em{display:grid;place-items:center;width:100%;height:100%; color:var(--on-fill);font-size:22px;font-weight:800} /* dark surfaces: lift the mark off the background with a soft halo */ .site-footer .brand-mark, .mobile-menu .brand-mark{width:46px;height:46px;margin-bottom:18px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 34px -6px rgba(255,255,255,.20)} .site-footer .brand-mark.no-img{box-shadow:0 10px 22px -10px rgba(var(--brand-rgb),.75)} /* preloader */ .pre-mark{background:none;box-shadow:none;padding:0;border-radius:50%;overflow:visible} .pre-mark img{width:100%;height:100%;object-fit:contain;display:block} .pre-mark em{display:none;font-style:normal} .pre-mark.no-img{background:var(--grad);border-radius:20px; box-shadow:0 18px 46px -14px rgba(var(--brand-rgb),.7)} .pre-mark.no-img img{display:none} .pre-mark.no-img em{display:grid;place-items:center;width:100%;height:100%; color:var(--on-fill);font-size:34px;font-weight:800} .pre-mark{box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 46px -8px rgba(255,255,255,.22)} /* product accent — the emblem colour echoed in small brand furniture */ .brand-sub b{color:var(--ink)} body[data-product="property"] .brand-sub b{color:var(--ocho-coral)} body[data-product="pos"] .brand-sub b{color:var(--ocho-teal)} /* ============================================================ PRODUCT THEMES Each product page sets and inherits its emblem colour through the accent tokens. ============================================================ */ /* --- Property by Ocho — coral #FF5A5F --- */ body[data-product="property"]{ --brand:#FF5A5F; --brand-rgb:255,90,95; --brand-2:#D93A44; --brand-3:#FF8B8F; --brand-3-rgb:255,139,143; --brand-fill:#E23B45; /* white on this = 4.9:1 */ --on-fill:#FFFFFF; --brand-ink:#B3242C; /* on a light coral tint */ --grad:linear-gradient(100deg,#D93A44 0%,#FF5A5F 42%,#FF8B8F 74%,#FFB88C 100%); } body[data-product="property"] .c-ico.e, body[data-product="property"] .v-ico.green{background:rgba(255,90,95,.13);color:#B3242C} body[data-product="property"] .tag-emerald{background:rgba(255,90,95,.13);color:#B3242C} body[data-product="property"] .brand-sub b{color:#FF5A5F} /* --- Commerce by Ocho — deep teal #005957 --- */ body[data-product="pos"]{ --brand:#00857F; --brand-rgb:0,133,127; --brand-2:#005957; --brand-3:#2DD4BF; --brand-3-rgb:45,212,191; --brand-fill:#00706C; /* white on this = 5.4:1 */ --on-fill:#FFFFFF; --brand-ink:#00504E; --grad:linear-gradient(100deg,#005957 0%,#00857F 40%,#2DD4BF 74%,#22D3EE 100%); } body[data-product="pos"] .c-ico.e{background:rgba(0,133,127,.13);color:#00504E} body[data-product="pos"] .tag-emerald, body[data-product="pos"] .tag-amber{background:rgba(0,133,127,.13);color:#00504E} body[data-product="pos"] .brand-sub b{color:#005957} /* keep the premium flag legible on both themes */ body[data-product] .premium-flag{background:linear-gradient(90deg,#FDE68A,#FCA5A5);color:#7C2D12} /* ============================================================ OCHO ICON SET 24px grid, 1.7 stroke, rounded terminals — drawn to sit with the emblem's rounded infinity stroke. Inherits currentColor, so icons pick up the product theme automatically. ============================================================ */ .ic{ width:22px;height:22px;display:block;flex:none; fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke; } .ic.sm{width:16px;height:16px;stroke-width:1.9} .ic.xs{width:13px;height:13px;stroke-width:2.1} /* --- feature tiles: soft tint + saturated stroke --- */ .c-ico,.mod-ico,.v-ico{ display:grid;place-items:center;background:none; transition:transform .45s var(--ease),background .35s,color .35s; } .c-ico{width:46px;height:46px;border-radius:14px} .mod-ico{width:38px;height:38px;border-radius:12px} .c-ico.e,.mod-ico.e{background:rgba(var(--brand-rgb),.12);color:var(--brand-ink)} .c-ico.c,.mod-ico.c{background:rgba(34,211,238,.14);color:#0E7490} .c-ico.v,.mod-ico.v{background:rgba(139,92,246,.13);color:#6D28D9} .c-ico.a,.mod-ico.a{background:rgba(245,158,11,.15);color:#B45309} .c-ico.n,.mod-ico.n{background:rgba(0,36,89,.10);color:#002459} .card:hover .c-ico,.mod:hover .mod-ico{transform:translateY(-2px) scale(1.06)} .card:hover .c-ico.e{background:rgba(var(--brand-rgb),.2)} .mod:hover .mod-ico.e{background:rgba(var(--brand-rgb),.2)} /* --- small icon holders --- */ .fc-ico,.pc-ico,.tl-ico{display:grid;place-items:center} .tbadge i,.cred-list i,.pill-ico,.note-tag i,.note-foot i, .till-status span,.ph-ev span,.founder-link i{display:inline-flex;align-items:center} .tbadge i,.cred-list i{line-height:0} .pill-ico{line-height:0} .pill .ic,.tag .ic,.btn .ic,.founder-flag .ic,.premium-flag .ic, .pill-prem .ic,.sub-badge .ic,.till-flag .ic,.brow em .ic,.ph-ev .ic, .price-note i .ic,.cmp .ic{display:inline-block;vertical-align:-2px} .ph-ev span{gap:5px} .cred-list li,.tbadge{align-items:center} .chat-foot i .ic{stroke-width:2} .foot-form button .ic{margin-inline:auto} .to-top .ic{width:20px;height:20px;stroke-width:2.2;margin-inline:auto} .socials a .ic{width:17px;height:17px;stroke-width:1.8} .founder-link i .ic{width:13px;height:13px;stroke:#fff} .btn .play{background:none;width:auto;height:auto;color:inherit} .v-ico .ic{width:21px;height:21px} /* ============================================================ TAP TO PAY — the OCHO Tap to Pay mobile app ============================================================ */ .app-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .app-btn{gap:12px;padding:12px 22px} .app-btn span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15} .app-btn i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em} .app-btn b{font-family:var(--head);font-size:15px;font-weight:800} .tap-phone{width:300px} .tap-phone .phone-in{padding:38px 16px 18px;min-height:452px;display:flex;flex-direction:column} .tap-amount{text-align:center;padding:6px 0 18px;border-bottom:1px solid var(--d-line);margin-bottom:20px} .tap-amount i{font-style:normal;display:block;font-size:11.5px;color:var(--d-muted);margin-bottom:4px} .tap-amount b{font-family:var(--head);font-size:40px;font-weight:800;color:#fff;letter-spacing:-.03em} .tap-zone{position:relative;flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:16px;text-align:center;padding:10px 6px} .tap-zone p{font-size:12.5px;color:var(--d-muted);max-width:20ch;line-height:1.5} .ic.tap-ic{width:56px;height:56px;stroke-width:1.5;color:var(--brand-3);position:relative;z-index:2} .tap-wave{position:absolute;top:34%;left:50%;width:110px;height:110px;margin:-55px 0 0 -55px; border-radius:50%;border:2px solid rgba(var(--brand-3-rgb),.5); animation:tapPing 2.4s var(--ease) infinite} .tap-wave::after{content:"";position:absolute;inset:-22px;border-radius:50%; border:2px solid rgba(var(--brand-3-rgb),.28);animation:tapPing 2.4s var(--ease) infinite .5s} @keyframes tapPing{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.25);opacity:0}} .tap-status{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px; border-radius:12px;background:rgba(var(--brand-rgb),.14);margin-bottom:12px; transition:background .4s var(--ease)} .tap-status .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-3);animation:pulse 1.6s infinite} .tap-status em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--brand-3)} .tap-status.approved{background:rgba(var(--brand-3-rgb),.22)} .tap-status.approved .dot{animation:none} .tap-phone .ph-ev{justify-content:center} @media (max-width:680px){.tap-phone{width:100%;max-width:300px}.app-actions{flex-direction:column}.app-btn{width:100%}} /* store buttons */ .app-btn.is-soon{opacity:.6;cursor:default;box-shadow:none} .app-btn.is-soon:hover{transform:none;border-color:var(--line-2);color:var(--ink)} .app-actions .btn-primary.app-btn{background:var(--brand-fill);color:var(--on-fill)} .app-actions .btn-primary.app-btn i{color:rgba(255,255,255,.75)} .app-actions .btn-primary.app-btn:hover{background:var(--brand-2)} .app-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12.5px; color:var(--muted-2);line-height:1.55;max-width:52ch} .app-note .ic{margin-top:2px;flex:none} /* ============================================================ OCHO GL — WebGL "electric infinity" background layer ============================================================ */ .ocho-gl{ position:absolute;inset:0;width:100%;height:100%; z-index:-2;pointer-events:none;display:block; opacity:0;transition:opacity 1.2s var(--ease); } .ocho-gl.on{opacity:1} .ocho-gl.is-dark{z-index:0;mix-blend-mode:screen} .cta .ocho-gl.is-dark{z-index:1} .cta-inner{z-index:3} /* when the GL field is running, retire the 2D fallback network */ .has-gl #heroCanvas{opacity:0;transition:opacity .8s var(--ease)} .has-gl .grid-fade{opacity:.35} /* --- OCHO mark on dark surfaces: real artwork, knocked out to white --- */ .ms-logo,.ch-av{ border-radius:50%;background:var(--grad); display:grid;place-items:center;overflow:hidden;flex:none; box-shadow:0 6px 16px -8px rgba(var(--brand-rgb),.9); } .ms-logo img,.ch-av img{width:72%;height:72%;object-fit:contain;display:block} .ch-av{width:36px;height:36px} .ms-logo{width:28px;height:28px} /* --- LinkedIn link on the founder card: a chip, not a loud blue tile --- */ .founder-link{ gap:10px;padding:9px 16px 9px 12px;border-radius:999px; background:var(--paper-2);border:1px solid var(--line); font-weight:600;color:var(--text); transition:background .3s var(--ease),border-color .3s,color .3s,transform .3s var(--ease); } .founder-link:hover{background:#EAF3FC;border-color:#B9D8F5;color:#0A66C2;transform:translateY(-2px)} .founder-link i{width:auto;height:auto;border-radius:0;background:none;color:#0A66C2} .founder-link i .ic{width:17px;height:17px;stroke:none;fill:currentColor} /* filled social glyphs shouldn't inherit the outline stroke */ .socials a .ic{fill:currentColor}