/* ========================================================== KWA Digital | Redesign 2026 | Aurora Dark Design System ========================================================== */ /* Fonts are loaded via in each page's (faster than @import) */ :root{ --bg0:#05060B; --bg1:#0A0C14; --bg2:#0E1220; --ink:#F2F5FA; --mute:#9AA5BB; --faint:#5E6880; --blue:#4D9FFF; --violet:#8B7CFF; --teal:#3EE6C4; --cyan:#6FD8FF; --line:rgba(160,190,255,.10); --line2:rgba(160,190,255,.16); --glass:rgba(148,178,255,.045); --grad-a:linear-gradient(135deg,#4D9FFF 0%,#8B7CFF 100%); --grad-text:linear-gradient(100deg,#6FD8FF 0%,#4D9FFF 45%,#8B7CFF 100%); --font-d:'Inter Tight',sans-serif; --font-b:'Inter',sans-serif; --font-s:'Instrument Serif',serif; --font-m:'IBM Plex Mono',monospace; --e:cubic-bezier(.16,1,.3,1); --r:22px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;color-scheme:dark} /* Lenis smooth scroll */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth iframe{pointer-events:none} body{ background:var(--bg0); color:var(--ink); font-family:var(--font-b); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:rgba(77,159,255,.32);color:#fff} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--bg0)} ::-webkit-scrollbar-thumb{background:#1C2436;border-radius:99px;border:2px solid var(--bg0)} ::-webkit-scrollbar-thumb:hover{background:#2A3550} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;background:none;border:0;color:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px} .container{max-width:1200px;margin:0 auto;padding:0 28px} /* ---------- film grain ---------- */ .grain{ position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E"); } /* ---------- preloader ---------- */ .loader{ position:fixed;inset:0;z-index:200;background:var(--bg0); display:flex;align-items:center;justify-content:center; transition:opacity .6s ease,visibility 0s .7s; } .loader-box{ display:flex;flex-direction:column;align-items:center;gap:20px; opacity:0;transform:translateY(12px); animation:loaderIn .8s var(--e) .1s forwards; } .loader-logo{ width:80px;height:80px;border-radius:22px; background:radial-gradient(circle at 34% 28%,#17253f,#0A142E); border:1px solid rgba(130,170,255,.28); box-shadow:0 0 60px rgba(77,159,255,.4),0 14px 40px rgba(0,0,0,.5); animation:loaderPulse 2.2s ease-in-out infinite; } @keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .loader-word{ font-family:var(--font-d);font-weight:700;font-size:13px;letter-spacing:.42em; color:var(--ink);padding-left:.42em;margin-top:2px; } .loader-bar{ width:210px;height:2px;border-radius:99px;overflow:hidden;margin-top:6px; background:rgba(160,190,255,.14); } .loader-bar i{ display:block;height:100%;width:0;border-radius:99px; background:var(--grad-a);box-shadow:0 0 12px rgba(77,159,255,.7); } .loader-pct{ font-family:var(--font-m);font-size:10.5px;letter-spacing:.3em;color:var(--faint); } @keyframes loaderIn{to{opacity:1;transform:none}} body.loaded .loader{opacity:0;visibility:hidden} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease; border-bottom:1px solid transparent; } body.scrolled .nav{ background:rgba(5,6,11,.72); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border-bottom-color:var(--line); } .nav-inner{ max-width:1280px;margin:0 auto;padding:0 28px;height:74px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0} .nav-brand img{height:34px;width:auto} .nav-links{display:flex;gap:6px;align-items:center} .nav-links a{ font-size:14.5px;font-weight:500;color:var(--mute); padding:9px 16px;border-radius:99px; transition:color .25s,background .25s; } .nav-links a:hover{color:var(--ink);background:rgba(148,178,255,.07)} .nav-cta{flex-shrink:0} .burger{display:none;width:44px;height:44px;position:relative;z-index:130} .burger span{ position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px; transition:transform .35s var(--e),top .35s var(--e),opacity .25s; } .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px} body.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){top:22px;transform:rotate(-45deg)} .menu{ position:fixed;inset:0;z-index:120;background:rgba(5,6,11,.94); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px); display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:8px; opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s; } body.menu-open .menu{opacity:1;visibility:visible;transition:opacity .45s ease} .menu a{ font-family:var(--font-d);font-size:clamp(34px,8vw,52px);font-weight:700;letter-spacing:-.03em; color:var(--mute);padding:8px 0; opacity:0;transform:translateY(26px); transition:opacity .5s var(--e),transform .5s var(--e),color .3s; } .menu a:hover{color:var(--ink)} body.menu-open .menu a{opacity:1;transform:none} body.menu-open .menu a:nth-child(1){transition-delay:.08s} body.menu-open .menu a:nth-child(2){transition-delay:.14s} body.menu-open .menu a:nth-child(3){transition-delay:.20s} body.menu-open .menu a:nth-child(4){transition-delay:.26s} .menu .menu-mail{font-family:var(--font-m);font-size:14px;font-weight:400;letter-spacing:0;color:var(--blue);margin-top:26px} body.menu-open .menu .menu-mail{transition-delay:.34s} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:.01em; padding:15px 28px;border-radius:99px;position:relative; transition:transform .3s var(--e),box-shadow .3s ease,background .3s,border-color .3s,color .3s; will-change:transform; } .btn svg{transition:transform .3s var(--e)} .btn:hover svg{transform:translateX(3px)} .btn-fill{ background:var(--grad-a);color:#fff; box-shadow:0 8px 32px -8px rgba(93,124,255,.55),inset 0 1px 0 rgba(255,255,255,.22); } .btn-fill:hover{box-shadow:0 14px 44px -8px rgba(93,124,255,.7),inset 0 1px 0 rgba(255,255,255,.22)} .btn-ghost{ color:var(--ink);border:1px solid rgba(174,200,255,.32);background:rgba(13,17,30,.5); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .btn-ghost:hover{border-color:rgba(180,205,255,.6);background:rgba(26,32,52,.66)} .btn-sm{padding:11px 20px;font-size:14px} .btn-lg{padding:18px 34px;font-size:16px} .link-arrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--blue); } .link-arrow svg{transition:transform .3s var(--e)} .link-arrow:hover svg{transform:translateX(4px)} /* ---------- type helpers ---------- */ .kicker{ font-family:var(--font-m);font-size:12px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:#8FA8D6; display:inline-flex;align-items:center;gap:12px; } .kicker::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)} h2.sec-title{ font-family:var(--font-d);font-weight:700;letter-spacing:-.035em;line-height:1.04; font-size:clamp(34px,4.6vw,58px);margin:18px 0 16px; } h2.sec-title em{font-family:var(--font-s);font-style:italic;font-weight:400;letter-spacing:-.01em; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .sec-sub{color:var(--mute);font-size:17.5px;max-width:560px} .sec-head{margin-bottom:56px} .sec-head.center{text-align:center} .sec-head.center .sec-sub{margin:0 auto} .sec-head.center .kicker::before{display:none} .section{padding:130px 0;position:relative} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(30px);filter:blur(7px); transition:opacity .95s var(--e),transform .95s var(--e),filter .95s var(--e); transition-delay:var(--d,0s);will-change:transform,filter} .rv.in{opacity:1;transform:none;filter:none} /* ========================================================== HERO ========================================================== */ .hero{ position:relative;min-height:100svh;overflow:hidden; display:flex;flex-direction:column;align-items:flex-start;justify-content:center; } /* aurora blobs */ .aurora{position:absolute;inset:0;z-index:0;overflow:hidden} .blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;opacity:.8} .blob.b1{width:640px;height:640px;top:-220px;left:-140px;background:radial-gradient(circle,rgba(124,92,255,.30),transparent 65%);animation:drift1 26s ease-in-out infinite alternate} .blob.b2{width:560px;height:560px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(59,130,246,.26),transparent 65%);animation:drift2 22s ease-in-out infinite alternate} .blob.b3{width:700px;height:520px;bottom:-140px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(62,230,196,.14),transparent 65%);animation:drift3 30s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate(70px,50px) scale(1.12)}} @keyframes drift2{to{transform:translate(-60px,70px) scale(1.08)}} @keyframes drift3{to{transform:translateX(-50%) translateY(-40px) scale(1.1)}} /* faint grid */ .hero-grid{ position:absolute;inset:0;z-index:1;opacity:.5; background-image: linear-gradient(rgba(140,170,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(140,170,255,.05) 1px,transparent 1px); background-size:84px 84px; -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 75%); } /* starfield canvas: fixed behind every page */ #stars{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none} /* global cursor glow: follows the mouse across the whole site */ .spot-fx{ position:fixed;left:0;top:0;z-index:-1;width:720px;height:720px;border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(77,159,255,.11),transparent 62%); transform:translate(-9999px,-9999px); } /* hero copy: left column, vertically centred (particle field sits on the right) */ .hero-copy{ position:relative;z-index:6;text-align:left;width:100%; padding:0 24px 0 clamp(28px,6.5vw,120px);max-width:660px; } @media (max-width:900px){ .hero{align-items:center;justify-content:flex-start;padding-bottom:30px} .hero-copy{text-align:center;padding:130px 22px 0;max-width:680px} } .hero-kicker{ opacity:0;transform:translateY(16px); transition:opacity .8s var(--e) .45s,transform .8s var(--e) .45s; } body.loaded .hero-kicker{opacity:1;transform:none} .hero h1{ font-family:var(--font-d);font-weight:700; font-size:clamp(44px,7.4vw,102px); letter-spacing:-.045em;line-height:1.0; margin:26px 0 24px; } .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em} .hero h1 .wi{display:inline-block;transform:translateY(115%); transition:transform 1s var(--e);transition-delay:calc(.5s + var(--i)*.06s)} body.loaded .hero h1 .wi{transform:none} .hero h1 em{ font-family:var(--font-s);font-style:italic;font-weight:400;letter-spacing:-.01em; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent; padding-right:.05em; } .hero-sub{ color:var(--mute);font-size:clamp(16px,1.6vw,19px);max-width:540px;margin:0 auto 38px; opacity:0;transform:translateY(18px); transition:opacity .9s var(--e) 1.05s,transform .9s var(--e) 1.05s; } body.loaded .hero-sub{opacity:1;transform:none} .hero-cta{ display:flex;gap:14px;justify-content:center;flex-wrap:wrap; opacity:0;transform:translateY(18px); transition:opacity .9s var(--e) 1.2s,transform .9s var(--e) 1.2s; } body.loaded .hero-cta{opacity:1;transform:none} /* scroll cue */ .scroll-cue{ position:absolute;left:40px;bottom:36px;z-index:7; display:flex;align-items:center;gap:12px; font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint); opacity:0;transition:opacity 1s ease 2s; } body.loaded .scroll-cue{opacity:1} .scroll-cue i{width:1px;height:44px;background:var(--line2);position:relative;overflow:hidden} .scroll-cue i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%; background:linear-gradient(var(--blue),transparent);animation:cue 2.2s ease-in-out infinite} @keyframes cue{0%{top:-100%}60%,100%{top:100%}} /* ---------- hero particle field (replaces the globe) ---------- */ .hero-particles{ position:absolute;inset:0;z-index:4;width:100%;height:100%; pointer-events:none;opacity:0; transition:opacity 1.4s ease .3s; } body.loaded .hero-particles{opacity:1} /* mobile: drop the particle field BELOW the copy + CTAs (its own space, no text overlap) */ @media (max-width:900px){ .hero-particles{position:relative;inset:auto;width:100%;height:44vh;z-index:1;margin-top:30px} } /* fade hero into page */ .hero::after{ content:"";position:absolute;z-index:8;left:0;right:0;bottom:0;height:160px; background:linear-gradient(transparent,var(--bg0) 92%);pointer-events:none; } /* ========================================================== MARQUEE ========================================================== */ .marquee{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:26px 0;overflow:hidden;position:relative;background:rgba(148,178,255,.015); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .mq-track{display:flex;gap:64px;width:max-content;animation:mq 30s linear infinite} .marquee:hover .mq-track{animation-play-state:paused} @keyframes mq{to{transform:translateX(-50%)}} .mq-item{ display:flex;align-items:center;gap:64px;flex-shrink:0; font-family:var(--font-m);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint); white-space:nowrap; } .mq-item b{color:#7FA5E8;font-weight:400} .mq-item .star{color:var(--blue);font-size:15px;letter-spacing:0} /* ========================================================== BENTO (services) ========================================================== */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px} .bcard{ position:relative;border-radius:var(--r); background:linear-gradient(180deg,rgba(148,178,255,.05),rgba(148,178,255,.015)); border:1px solid var(--line); padding:34px;overflow:hidden; transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out,border-color .35s ease; will-change:transform; } .bcard:hover{border-color:rgba(160,190,255,.22)} /* moving border light */ .bcard::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:radial-gradient(280px at var(--mx,50%) var(--my,50%),rgba(120,160,255,.65),transparent 65%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .35s ease; } .bcard:hover::before{opacity:1} /* inner glow following cursor */ .bcard::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(420px at var(--mx,50%) var(--my,50%),rgba(77,159,255,.08),transparent 60%); opacity:0;transition:opacity .35s ease; } .bcard:hover::after{opacity:1} .b7{grid-column:span 7} .b5{grid-column:span 5} .bcard h3{ font-family:var(--font-d);font-weight:600;font-size:22px;letter-spacing:-.02em;margin-bottom:8px; } .bcard>p{color:var(--mute);font-size:15.5px;max-width:400px;margin-bottom:6px} .bcard .b-link{ display:inline-flex;align-items:center;gap:7px;margin-top:14px; font-family:var(--font-d);font-size:14px;font-weight:600;color:#7FA5E8; transition:color .25s;position:relative;z-index:2; } .bcard .b-link svg{transition:transform .3s var(--e)} .bcard:hover .b-link{color:var(--cyan)} .bcard:hover .b-link svg{transform:translateX(4px)} .b-tag{ position:absolute;top:30px;right:30px; font-family:var(--font-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--faint);border:1px solid var(--line);border-radius:99px;padding:5px 12px; } /* --- mini demo: dashboard / KPIs --- */ .mini-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .kpi{ border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(8,11,20,.6); } .kpi small{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px} .kpi b{font-family:var(--font-d);font-size:21px;font-weight:700;letter-spacing:-.02em} .kpi em{font-style:normal;font-family:var(--font-m);font-size:10px;color:var(--teal);margin-left:6px} .mini-bars{ display:flex;align-items:flex-end;gap:7px;height:74px;padding:12px 14px; border:1px solid var(--line);border-radius:12px;background:rgba(8,11,20,.6); } .mini-bars i{ flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#4D9FFF,#2A55C4); height:12%;transition:height 1s var(--e);opacity:.9; } .mini-bars i:nth-child(2n){background:linear-gradient(180deg,#8B7CFF,#4A3FB8);opacity:.75} .in .mini-bars i{height:var(--h)} .in .mini-bars i:nth-child(1){transition-delay:.30s} .in .mini-bars i:nth-child(2){transition-delay:.38s} .in .mini-bars i:nth-child(3){transition-delay:.46s} .in .mini-bars i:nth-child(4){transition-delay:.54s} .in .mini-bars i:nth-child(5){transition-delay:.62s} .in .mini-bars i:nth-child(6){transition-delay:.70s} .in .mini-bars i:nth-child(7){transition-delay:.78s} .in .mini-bars i:nth-child(8){transition-delay:.86s} /* --- mini demo: chat / automation --- */ .mini-chat{display:flex;flex-direction:column;gap:9px;margin-top:26px} .bub{ max-width:78%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.45; opacity:0;transform:translateY(12px) scale(.96); } .in .bub{animation:bubIn .5s var(--e) forwards} @keyframes bubIn{to{opacity:1;transform:none}} .bub.them{align-self:flex-start;background:rgba(148,178,255,.08);border:1px solid var(--line);border-bottom-left-radius:4px;color:#C9D4E8} .bub.us{align-self:flex-end;background:linear-gradient(135deg,rgba(77,159,255,.25),rgba(139,124,255,.25));border:1px solid rgba(120,160,255,.25);border-bottom-right-radius:4px;color:#EAF1FF} .bub.auto{position:relative} .bub.auto::after{ content:"AUTO";position:absolute;top:-7px;right:10px; font-family:var(--font-m);font-size:8px;letter-spacing:.14em;color:var(--teal); background:var(--bg0);border:1px solid rgba(62,230,196,.35);border-radius:99px;padding:1px 7px; } .in .bub:nth-child(1){animation-delay:.35s} .in .bub:nth-child(2){animation-delay:.85s} .in .bub:nth-child(3){animation-delay:1.4s} .in .bub:nth-child(4){animation-delay:1.95s} /* --- mini demo: booking --- */ .mini-book{margin-top:26px;border:1px solid var(--line);border-radius:14px;background:rgba(8,11,20,.6);padding:16px} .mbk-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .mbk-head span{font-family:var(--font-d);font-weight:600;font-size:13.5px} .mbk-head small{font-family:var(--font-m);font-size:10px;color:var(--faint);letter-spacing:.1em} .mbk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .slot{ text-align:center;font-family:var(--font-m);font-size:11px;padding:10px 0;border-radius:8px; border:1px solid var(--line);color:var(--mute);background:rgba(148,178,255,.03); transition:background .4s,border-color .4s,color .4s; } .in .slot.pick{ background:var(--grad-a);border-color:transparent;color:#fff; transition-delay:.9s; } .mbk-confirm{ margin-top:12px;display:flex;align-items:center;gap:8px;justify-content:center; font-family:var(--font-d);font-size:12.5px;font-weight:600;color:var(--teal); border:1px solid rgba(62,230,196,.3);border-radius:99px;padding:8px; background:rgba(62,230,196,.06); opacity:0;transform:translateY(8px);transition:opacity .6s var(--e) 1.5s,transform .6s var(--e) 1.5s; } .mbk-confirm i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 1.6s ease infinite} @keyframes pulse{50%{opacity:.4}} .in .mbk-confirm{opacity:1;transform:none} /* ========================================================== WORK ========================================================== */ .work{background:linear-gradient(180deg,rgba(10,12,20,0),rgba(10,12,20,.55) 40%,rgba(10,12,20,0))} .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .wcard{ position:relative;border-radius:var(--r);border:1px solid var(--line);overflow:hidden; background:linear-gradient(180deg,rgba(148,178,255,.05),rgba(148,178,255,.01)); transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out,border-color .35s ease; } .wcard:hover{border-color:rgba(160,190,255,.24)} .w-visual{ position:relative;height:230px;overflow:hidden; background: radial-gradient(ellipse 90% 90% at 50% 110%,rgba(77,159,255,.16),transparent 60%), linear-gradient(180deg,#0A0E1A,#0B1226); border-bottom:1px solid var(--line); } .w-meta{padding:24px 26px 28px} .w-meta h3{font-family:var(--font-d);font-weight:600;font-size:19px;letter-spacing:-.015em;margin-bottom:6px} .w-meta p{color:var(--mute);font-size:14.5px;margin-bottom:14px} .w-tags{display:flex;gap:8px;flex-wrap:wrap} .w-tags span{ font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:#8FA8D6;border:1px solid var(--line);border-radius:99px;padding:4px 11px; } .work-more{text-align:center;margin-top:52px} /* honesty note */ .note{ display:inline-flex;align-items:center;gap:10px;margin-top:18px; font-family:var(--font-m);font-size:11.5px;color:var(--faint);letter-spacing:.04em; } .note i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0} /* ========================================================== PROCESS ========================================================== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;padding-top:34px} .steps::before{ content:"";position:absolute;top:0;left:0;height:1px;width:100%; background:linear-gradient(90deg,var(--blue),var(--violet),transparent); transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e) .2s; } .steps.in::before{transform:scaleX(1)} .step{position:relative} .step::before{ content:"";position:absolute;top:-38px;left:0;width:9px;height:9px;border-radius:50%; background:var(--blue);box-shadow:0 0 14px rgba(77,159,255,.9); opacity:0;transition:opacity .4s ease; } .steps.in .step::before{opacity:1} .steps.in .step:nth-child(1)::before{transition-delay:.3s} .steps.in .step:nth-child(2)::before{transition-delay:.65s} .steps.in .step:nth-child(3)::before{transition-delay:1s} .steps.in .step:nth-child(4)::before{transition-delay:1.35s} .step .n{ font-family:var(--font-m);font-size:12px;letter-spacing:.2em;color:#7FA5E8;display:block;margin-bottom:12px; } .step h3{font-family:var(--font-d);font-weight:600;font-size:19px;letter-spacing:-.015em;margin-bottom:8px} .step p{color:var(--mute);font-size:14.5px} /* ========================================================== CTA ========================================================== */ .cta{position:relative;overflow:hidden;text-align:center;padding:170px 0} .cta .blob{filter:blur(100px)} .cta-kicker{justify-content:center} .cta-kicker::before{display:none} .cta h2{ font-family:var(--font-d);font-weight:700;letter-spacing:-.045em;line-height:1.0; font-size:clamp(44px,7vw,96px);margin:22px 0 20px; } .cta h2 em{font-family:var(--font-s);font-style:italic;font-weight:400; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .cta .sec-sub{margin:0 auto 44px} .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center} .cta-mail{ font-family:var(--font-m);font-size:13.5px;color:var(--mute);letter-spacing:.03em; border-bottom:1px solid var(--line2);padding-bottom:2px;transition:color .3s,border-color .3s; } .cta-mail:hover{color:var(--cyan);border-color:var(--cyan)} .cta-trust{ display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:54px; font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint); } .cta-trust span{display:flex;align-items:center;gap:9px} .cta-trust i{width:5px;height:5px;border-radius:50%;background:var(--blue)} /* ========================================================== FOOTER ========================================================== */ .footer{border-top:1px solid var(--line);padding:56px 0 40px} .f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:44px} .f-brand img{height:36px;margin-bottom:14px} .f-brand p{color:var(--faint);font-size:13.5px;max-width:300px} .f-socials{display:flex;gap:10px;margin-top:20px} .f-socials a{ width:38px;height:38px;border-radius:11px; display:flex;align-items:center;justify-content:center; color:var(--mute);border:1px solid var(--line);background:var(--glass); transition:color .25s,border-color .25s,background .25s,transform .25s var(--e); } .f-socials a:hover{ color:var(--ink);border-color:rgba(160,190,255,.4); background:rgba(148,178,255,.1);transform:translateY(-2px); } .f-links{display:flex;gap:56px;flex-wrap:wrap} .f-col small{ display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);margin-bottom:14px; } .f-col a{display:block;color:var(--mute);font-size:14.5px;padding:5px 0;transition:color .25s} .f-col a:hover{color:var(--ink)} .f-bottom{ border-top:1px solid var(--line);padding-top:26px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12.5px;color:var(--faint); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:1020px){ .b7,.b5{grid-column:span 6} .work-grid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr;gap:44px 20px} .steps::before{display:none} .step::before{display:none} } @media (max-width:760px){ .section{padding:96px 0} .nav-links,.nav-cta{display:none} .burger{display:block} .scroll-cue{left:28px;bottom:26px} .b7,.b5{grid-column:span 12} .bcard{padding:26px} .b-tag{display:none} .work-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr;gap:36px} .f-links{gap:36px} .cta{padding:120px 0} } /* ========================================================== INNER PAGES | shared page hero ========================================================== */ .nav-links a.active{color:var(--ink);background:rgba(148,178,255,.07)} .phero{ position:relative;overflow:hidden;text-align:center; padding:196px 0 110px; } .phero .kicker::before{display:none} .phero h1{ font-family:var(--font-d);font-weight:700;letter-spacing:-.045em;line-height:1.02; font-size:clamp(40px,6.6vw,86px);margin:22px 0 20px; } .phero h1 em{ font-family:var(--font-s);font-style:italic;font-weight:400;letter-spacing:-.01em; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent; } .phero .sec-sub{margin:0 auto} .phero-cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .phero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px; background:linear-gradient(transparent,var(--bg0) 92%);pointer-events:none; } /* ========================================================== SERVICES ========================================================== */ /* needs strip */ .needs{display:grid;grid-template-columns:1fr 1fr;gap:14px} .need{ display:flex;justify-content:space-between;align-items:center;gap:16px; border:1px solid var(--line);border-radius:16px;padding:22px 26px; background:var(--glass);position:relative;overflow:hidden; transition:border-color .3s,transform .3s var(--e),background .3s; } .need:hover{border-color:rgba(160,190,255,.3);transform:translateY(-3px);background:rgba(148,178,255,.07)} .need .nd b{display:block;font-family:var(--font-d);font-weight:600;font-size:16.5px;margin-bottom:3px} .need .nd span{color:var(--faint);font-size:13.5px} .need>svg{flex-shrink:0;color:var(--blue);transition:transform .3s var(--e)} .need:hover>svg{transform:translateX(4px)} /* ========================================================== WORK PAGE ========================================================== */ .work-grid.cols2{grid-template-columns:1fr 1fr} .w-visual.tall{height:290px} /* ========================================================== CONTACT ========================================================== */ .contact-wrap{display:grid;grid-template-columns:1.3fr .85fr;gap:24px;align-items:start} .form-card{ border:1px solid var(--line);border-radius:26px;padding:40px;position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(148,178,255,.05),rgba(148,178,255,.015)); } .form-card h2{font-family:var(--font-d);font-weight:600;font-size:24px;letter-spacing:-.02em;margin-bottom:6px} .form-card .fsub{color:var(--mute);font-size:14.5px;margin-bottom:28px} .field{margin-bottom:20px} .field label{display:block;font-family:var(--font-d);font-size:13.5px;font-weight:600;margin-bottom:9px;color:#C9D4E8} .field label u{text-decoration:none;color:var(--blue)} .field input,.field select,.field textarea{ width:100%;background:rgba(8,11,20,.6);border:1px solid var(--line2);border-radius:12px; padding:13px 16px;color:var(--ink);font:inherit;font-size:15px; transition:border-color .25s,box-shadow .25s; } .field input::placeholder,.field textarea::placeholder{color:var(--faint)} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,159,255,.14);outline:none; } .field textarea{min-height:110px;resize:vertical} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip-opt{ border:1px solid var(--line2);border-radius:99px;padding:10px 18px; font-size:13.5px;font-weight:500;color:var(--mute);background:var(--glass); transition:background .25s,border-color .25s,color .25s,transform .2s; } .chip-opt:hover{border-color:rgba(160,190,255,.35);transform:translateY(-1px)} .chip-opt.sel{ background:linear-gradient(135deg,rgba(77,159,255,.24),rgba(139,124,255,.24)); border-color:rgba(120,160,255,.5);color:#EAF1FF; } .form-err{display:none;color:#FF8585;font-size:13.5px;font-weight:500;margin:-6px 0 16px} .form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px} .form-foot .micro{font-family:var(--font-m);font-size:11px;color:var(--faint);letter-spacing:.05em} .form-success{display:none;text-align:center;padding:48px 10px} .form-success .ok{ width:60px;height:60px;border-radius:50%;margin:0 auto 20px; display:flex;align-items:center;justify-content:center; background:rgba(62,230,196,.09);border:1px solid rgba(62,230,196,.4);color:var(--teal); } .form-success h3{font-family:var(--font-d);font-weight:600;font-size:22px;margin-bottom:8px} .form-success p{color:var(--mute);font-size:14.5px;max-width:380px;margin:0 auto} .form-card.sent form{display:none} .form-card.sent .form-success{display:block} .aside-card{ border:1px solid var(--line);border-radius:26px;padding:32px;margin-bottom:20px; background:linear-gradient(180deg,rgba(148,178,255,.05),rgba(148,178,255,.015)); } .aside-card h3{font-family:var(--font-d);font-weight:600;font-size:18px;letter-spacing:-.015em;margin-bottom:6px} .aside-card .asub{color:var(--mute);font-size:14px;margin-bottom:18px} .exp-row{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)} .exp-row .exp-n{font-family:var(--font-m);font-size:11px;color:#7FA5E8;letter-spacing:.16em;padding-top:3px;flex-shrink:0} .exp-row b{display:block;font-family:var(--font-d);font-size:15px;font-weight:600;margin-bottom:2px} .exp-row span{color:var(--mute);font-size:13.5px} .aside-mail{ display:block;font-family:var(--font-m);font-size:14px;color:var(--cyan); margin-top:6px;letter-spacing:.02em; } .aside-mail:hover{text-decoration:underline} /* small CTA variant */ .cta.cta-sm{padding:130px 0} .cta.cta-sm h2{font-size:clamp(36px,5.4vw,70px)} /* inner responsive */ @media (max-width:1020px){ .contact-wrap{grid-template-columns:1fr} .work-grid.cols2{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .phero{padding:150px 0 84px} .needs{grid-template-columns:1fr} .frow{grid-template-columns:1fr} .form-card{padding:28px} .work-grid.cols2{grid-template-columns:1fr} } /* ========================================================== SHOWCASE | scroll-driven "what we build" ========================================================== */ .sc-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:start} .sc-chapter{ min-height:76vh;display:flex;flex-direction:column;justify-content:center; opacity:.25;transition:opacity .55s ease; } .sc-chapter.on{opacity:1} .sc-chapter .num{ font-family:var(--font-m);font-size:12px;letter-spacing:.22em;color:var(--faint); margin-bottom:16px;display:flex;align-items:center;gap:12px;transition:color .4s; } .sc-chapter .num::after{content:"";height:1px;width:34px;background:var(--line2);transition:background .4s} .sc-chapter.on .num{color:#7FA5E8} .sc-chapter.on .num::after{background:linear-gradient(90deg,var(--blue),transparent)} .sc-chapter h3{ font-family:var(--font-d);font-weight:600;letter-spacing:-.03em; font-size:clamp(26px,2.7vw,38px);margin-bottom:14px; } .sc-chapter>p{color:var(--mute);font-size:16.5px;max-width:430px;margin-bottom:22px} .sc-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:24px} .sc-feats span{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#C9D4E8} .sc-feats svg{color:var(--teal);flex-shrink:0} .sc-link{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-d);font-weight:600;font-size:14.5px;color:#7FA5E8; transition:color .25s; } .sc-link svg{transition:transform .3s var(--e)} .sc-link:hover{color:var(--cyan)} .sc-link:hover svg{transform:translateX(4px)} /* the pinned stage */ .sc-stage{position:sticky;top:calc(50vh - 322px);height:604px} .sc-frame{ position:relative;height:100%;border-radius:28px;overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg,rgba(148,178,255,.055),rgba(148,178,255,.012)); transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out; will-change:transform; } .sc-frame::before{ content:"";position:absolute;inset:0;opacity:.4; background-image: linear-gradient(rgba(140,170,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(140,170,255,.05) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 78%); mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 78%); } .sc-glow{ position:absolute;left:50%;bottom:-140px;transform:translateX(-50%); width:480px;height:380px;border-radius:50%; background:radial-gradient(circle,rgba(77,159,255,.20),transparent 65%); filter:blur(30px); } .sc-orbit{ position:absolute;width:560px;height:560px;right:-170px;top:-170px; border:1px dashed rgba(140,170,255,.14);border-radius:50%; animation:orbit 44s linear infinite; } .sc-orbit i{ position:absolute;top:50%;left:-3px;width:7px;height:7px;border-radius:50%; background:var(--cyan);box-shadow:0 0 12px rgba(111,216,255,.9); } @keyframes orbit{to{transform:rotate(360deg)}} .sc-panel{ position:absolute;inset:0;z-index:2; display:flex;align-items:center;justify-content:center;padding:44px; opacity:0;transform:translateY(48px) scale(.93);filter:blur(12px); transition:opacity .6s var(--e),transform .6s var(--e),filter .6s var(--e); pointer-events:none; } .sc-panel.active{opacity:1;transform:none;filter:none;pointer-events:auto;transition-delay:.1s} .sc-panel.past{transform:translateY(-44px) scale(1.04)} .sc-panel-inner{width:100%;max-width:520px} /* stage-size component overrides */ .sc-panel .mini-kpis{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px} .sc-panel .kpi b{font-size:25px} .sc-panel .mini-bars{height:158px;padding:16px} .sc-panel .mini-chat{margin-top:0;gap:12px} .sc-panel .bub{font-size:14.5px;padding:12px 16px} .sc-panel .mini-book{margin-top:0} .sc-panel .slot{padding:13px 0;font-size:12px} /* progress meta */ .sc-meta{display:flex;align-items:center;gap:12px;margin-top:20px} .sc-count{font-family:var(--font-m);font-size:12px;color:var(--faint);letter-spacing:.14em;white-space:nowrap} .sc-count b{color:var(--ink);font-weight:500} .sc-dot{ height:3px;flex:1;border-radius:99px;background:rgba(148,178,255,.12); overflow:hidden;position:relative; } .sc-dot::after{ content:"";position:absolute;inset:0;background:var(--grad-a);border-radius:99px; transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e); } .sc-dot.on::after{transform:scaleX(1)} /* compact visuals shown inside chapters on mobile only */ .sc-mini{display:none} @media (max-height:800px){ .sc-stage{height:520px;top:calc(50vh - 280px)} } @media (max-width:1020px){ .sc-grid{display:block} .sc-stage{display:none} .sc-chapter{min-height:0;opacity:1;justify-content:flex-start;padding:36px 0;border-top:1px solid var(--line)} .sc-chapter:first-child{border-top:0;padding-top:0} .sc-mini{display:block;margin-top:24px} } /* ========================================================== REALISTIC PRODUCT MOCKS (work cards) ========================================================== */ .mock{ position:absolute;inset:16px 16px 0;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line2);border-bottom:0;border-radius:12px 12px 0 0; background:#0C1119;box-shadow:0 30px 60px -20px rgba(0,0,0,.85); line-height:1.4; opacity:0;transform:translateY(12px); transition:opacity .8s var(--e) .25s,transform .8s var(--e) .25s; } .in .mock{opacity:1;transform:none} .wcard:hover .mock{transform:translateY(-5px)} .mock-top{ display:flex;align-items:center;gap:8px;padding:9px 12px;flex-shrink:0; border-bottom:1px solid var(--line);background:rgba(148,178,255,.03); } .mock-top b{font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:-.01em;white-space:nowrap} .mt-sub{font-family:var(--font-m);font-size:7.5px;color:var(--faint);letter-spacing:.1em;margin-left:auto;white-space:nowrap} .mav{ width:18px;height:18px;border-radius:50%;background:var(--grad-a);flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--font-d);font-size:8px;font-weight:700;color:#fff; } /* --- CRM board --- */ .crm-board{flex:1;display:flex;gap:8px;padding:10px 12px;min-height:0} .crm-col{flex:1;min-width:0} .crm-col>small{ display:flex;justify-content:space-between;font-family:var(--font-m); font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint); margin-bottom:6px;padding:0 2px; } .deal{background:#121A28;border:1px solid var(--line);border-radius:7px;padding:7px 8px;margin-bottom:6px} .deal b{display:block;font-family:var(--font-d);font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .deal>span{display:block;font-size:7.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 5px} .deal-f{display:flex;align-items:center;justify-content:space-between;gap:4px} .deal-f em{font-style:normal;font-family:var(--font-m);font-size:8.5px;color:#9DC1FF} .deal-f .mav{width:13px;height:13px;font-size:6px} .deal.won{border-color:rgba(62,230,196,.35);background:rgba(62,230,196,.05)} .deal.won em{color:var(--teal)} /* --- WhatsApp --- */ .mock.wa{background:#0B141A;border-color:rgba(134,150,160,.18)} .wa-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1F2C34;flex-shrink:0} .wa-top .mav{background:linear-gradient(135deg,#00A884,#017561)} .wa-name b{display:block;font-family:var(--font-d);font-size:10.5px;font-weight:600;color:#E9EDEF;line-height:1.2} .wa-name small{font-size:7.5px;color:#8696A0} .wa-ico{margin-left:auto;display:flex;gap:12px;color:#8696A0} .wa-body{ flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:5px; padding:8px 12px;min-height:0;overflow:hidden; background:radial-gradient(circle at 18% 8%,rgba(77,159,255,.05),transparent 55%),#0B141A; } .wam{max-width:84%;padding:6px 9px;border-radius:9px;font-size:9.5px;line-height:1.45;color:#E9EDEF;position:relative} .wam.min{align-self:flex-start;background:#1F2C34;border-top-left-radius:3px} .wam.mout{align-self:flex-end;background:#005C4B;border-top-right-radius:3px} .wam .wmeta{display:inline-flex;align-items:center;gap:3px;font-size:6.5px;color:rgba(233,237,239,.5);margin-left:8px;white-space:nowrap} .wam .tick{color:#53BDEB;font-size:7px;letter-spacing:-.12em} .wam .auto-b{ position:absolute;top:-7px;right:8px; font-family:var(--font-m);font-size:6px;letter-spacing:.12em;color:var(--teal); background:#0B141A;border:1px solid rgba(62,230,196,.4);padding:1px 5px;border-radius:99px; } .wa-chips{display:flex;gap:5px;flex-wrap:wrap;align-self:flex-start;max-width:90%} .wa-chip{ font-size:8px;padding:4px 9px;border-radius:99px; border:1px solid rgba(83,189,235,.45);color:#53BDEB;background:rgba(83,189,235,.06); } .wa-chip.sel{background:rgba(83,189,235,.16);color:#9FDBF7} .wa-input{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1F2C34;flex-shrink:0} .wa-input i{ flex:1;height:20px;border-radius:99px;background:#2A3942;font-style:normal; font-size:8px;color:#8696A0;display:flex;align-items:center;padding:0 9px; } .wa-mic{ width:20px;height:20px;border-radius:50%;background:#00A884;flex-shrink:0; display:flex;align-items:center;justify-content:center;color:#0B141A; } /* --- Booking widget --- */ .bk-pill{ margin-left:auto;font-family:var(--font-m);font-size:7.5px;letter-spacing:.06em; color:#9DC1FF;border:1px solid rgba(120,160,255,.3);border-radius:99px;padding:3px 8px;white-space:nowrap; } .bk-days{display:flex;gap:5px;padding:8px 12px 3px} .bk-day{flex:1;text-align:center;padding:4px 0 5px;border-radius:7px;border:1px solid var(--line);line-height:1.3} .bk-day small{display:block;font-family:var(--font-m);font-size:6.5px;letter-spacing:.12em;color:var(--faint)} .bk-day b{font-family:var(--font-m);font-size:10px;font-weight:500;color:#C9D4E8} .bk-day.sel{background:var(--grad-a);border-color:transparent} .bk-day.sel small{color:rgba(255,255,255,.75)} .bk-day.sel b{color:#fff} .bk-times{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px 12px} .bk-t{ text-align:center;font-family:var(--font-m);font-size:8.5px;padding:5px 0; border-radius:7px;border:1px solid var(--line);color:var(--mute);line-height:1.25; } .bk-t.sel{background:rgba(77,159,255,.16);border-color:rgba(120,160,255,.5);color:#DCEBFF} .bk-t.off{opacity:.35;text-decoration:line-through} .bk-cta{ margin:4px 12px 7px;text-align:center;font-family:var(--font-d); font-size:9.5px;font-weight:600;color:#fff;padding:7px;border-radius:8px;line-height:1.25; background:var(--grad-a);box-shadow:0 6px 18px -6px rgba(93,124,255,.6); } .bk-toast{ display:flex;gap:6px;align-items:center;margin:0 12px;padding:6px 9px;border-radius:8px; border:1px solid rgba(62,230,196,.35);background:rgba(62,230,196,.07); font-size:8px;color:var(--teal); } .bk-toast svg{flex-shrink:0} /* ========================================================== MOCKS phase 2 | wraps + loyalty, analytics, website ========================================================== */ .mock-wrap{position:relative} .sc-panel .mock-wrap{height:380px;max-width:480px;margin:0 auto} .sc-mini .mock-wrap{height:320px} /* --- loyalty app --- */ .loy-bal{padding:13px 12px 0} .loy-bal small{font-family:var(--font-m);font-size:7px;letter-spacing:.16em;color:var(--faint)} .loy-bal b{display:block;font-family:var(--font-d);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:3px} .loy-bal b u{text-decoration:none;font-size:11px;color:var(--faint);font-weight:500} .loy-bar{height:5px;margin:10px 12px 0;border-radius:99px;background:rgba(148,178,255,.1);overflow:hidden} .loy-bar i{display:block;height:100%;width:var(--w,78%);border-radius:99px;background:linear-gradient(90deg,#E8C766,#8B7CFF)} .loy-cap{font-family:var(--font-m);font-size:7px;color:var(--faint);letter-spacing:.08em;margin:5px 12px 10px} .loy-redeem{ margin:0 12px 10px;text-align:center;font-family:var(--font-d);font-size:9px;font-weight:600; color:var(--teal);padding:7px;border-radius:8px; border:1px solid rgba(62,230,196,.35);background:rgba(62,230,196,.07); } .loy-row{ display:flex;justify-content:space-between;align-items:center; padding:7px 12px;border-top:1px solid var(--line);font-size:8.5px;color:var(--mute); } .loy-row em{font-style:normal;font-family:var(--font-m);font-size:8.5px;color:var(--teal)} .loy-row em.neg{color:#8FA8D6} /* --- analytics dashboard --- */ .an-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px 2px} .an-kpis .kpi{padding:8px 10px;border-radius:9px} .an-kpis .kpi small{font-size:6.5px;margin-bottom:2px} .an-kpis .kpi b{font-size:14px} .an-kpis .kpi em{font-size:8px;margin-left:3px} .an-chart{margin:8px 12px 0} .an-chart svg{width:100%;height:118px;display:block} .an-chart .cline2{ fill:none;stroke:url(#agl);stroke-width:2.2;stroke-linecap:round; stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.8s var(--e) .5s; } .in .an-chart .cline2{stroke-dashoffset:0} .an-chart .carea2{fill:url(#aga);opacity:0;transition:opacity 1s ease 1.5s} .in .an-chart .carea2{opacity:1} .an-meta{display:flex;gap:14px;padding:8px 12px;font-family:var(--font-m);font-size:7px;color:var(--faint);letter-spacing:.08em} .an-meta i{width:8px;height:2px;border-radius:2px;background:var(--blue);display:inline-block;margin-right:4px;vertical-align:middle} .an-meta .m2 i{background:var(--violet)} /* --- website concept --- */ .web-nav{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)} .web-logo{width:9px;height:9px;border-radius:3px;background:var(--grad-a);flex-shrink:0} .web-nav b{font-family:var(--font-d);font-size:9px;font-weight:700;letter-spacing:.06em} .web-links{margin-left:auto;display:flex;gap:9px;font-family:var(--font-m);font-size:6.5px;color:var(--faint);letter-spacing:.06em} .web-cta-s{font-family:var(--font-d);font-size:7px;font-weight:600;color:#fff;padding:3px 9px;border-radius:99px;background:var(--grad-a)} .web-hero{padding:14px 12px 0} .web-hero small{font-family:var(--font-m);font-size:6.5px;letter-spacing:.18em;color:#7FA5E8} .web-hero h4{font-family:var(--font-d);font-size:16.5px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:6px 0 5px} .web-hero p{font-size:8.5px;color:var(--mute);line-height:1.5;max-width:85%} .web-btns{display:flex;gap:6px;margin-top:9px} .web-b{font-family:var(--font-d);font-size:8px;font-weight:600;padding:5px 11px;border-radius:99px} .web-b.f{background:var(--grad-a);color:#fff} .web-b.g{border:1px solid var(--line2);color:var(--mute)} .web-img{ margin:11px 12px 0;height:54px;border-radius:8px;border:1px solid var(--line2); background:linear-gradient(120deg,rgba(77,159,255,.22),rgba(139,124,255,.18) 55%,rgba(62,230,196,.14)); position:relative;overflow:hidden; } .web-img::after{ content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent); animation:sheen 4.5s ease-in-out infinite; } @keyframes sheen{0%,55%{left:-60%}85%,100%{left:120%}} .web-stats{display:flex;gap:14px;padding:9px 12px;font-family:var(--font-m);font-size:7px;color:var(--faint);letter-spacing:.06em} .web-stats b{color:#C9D4E8;font-weight:500} /* ========================================================== KZ | live client site frame (real screenshot + link) ========================================================== */ .mock.kz{ display:flex;flex-direction:column;text-decoration:none;color:inherit; background:#0C1119 !important;transition:border-color .35s ease; } .mock.kz:hover{border-color:rgba(160,190,255,.3)} .kz .wb-bar{ display:flex;align-items:center;gap:6px;padding:8px 12px;flex-shrink:0; border-bottom:1px solid var(--line);background:rgba(148,178,255,.03); } .kz .wb-bar i{width:8px;height:8px;border-radius:50%;background:#2A3550} .kz .wb-bar i:first-child{background:rgba(255,107,107,.5)} .kz .wb-url{ margin-left:6px;flex:1;height:16px;border-radius:6px;background:rgba(148,178,255,.06); font-family:var(--font-m);font-size:8px;color:var(--faint); display:flex;align-items:center;padding:0 8px;letter-spacing:.06em; } .kz-shot{ flex:1;overflow:hidden;position:relative; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#0E1220,#0A0D18); } .kz-ph{font-family:var(--font-m);font-size:9.5px;letter-spacing:.16em;color:var(--faint)} .kz-shot img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:top center;display:block; transition:transform 6s ease; } .mock.kz:hover .kz-shot img{transform:scale(1.05)} .kz-foot{ display:flex;align-items:center;justify-content:space-between;flex-shrink:0; padding:10px 14px;border-top:1px solid var(--line);background:rgba(8,11,20,.6); } .kz-tag{ display:flex;align-items:center;gap:7px; font-family:var(--font-m);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute); } .kz-tag i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px rgba(62,230,196,.85)} .kz-link{ display:flex;align-items:center;gap:6px; font-family:var(--font-d);font-size:11px;font-weight:600;color:#7FA5E8; transition:color .25s; } .mock.kz:hover .kz-link{color:var(--cyan)} .kz-link svg{transition:transform .3s var(--e)} .mock.kz:hover .kz-link svg{transform:translate(2px,-2px)} /* ========================================================== ABSTRACT SIGNATURES (reusable animated visuals) ========================================================== */ .wv-abs{position:absolute;inset:0;overflow:hidden} .wv-abs .abg{ position:absolute;inset:0;opacity:.55; background-image: linear-gradient(rgba(140,170,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(140,170,255,.06) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 22%,transparent 82%); mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 22%,transparent 82%); } .wv-abs .ablob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.65;will-change:transform} .ablob.c1{width:190px;height:190px;background:radial-gradient(circle,rgba(77,159,255,.55),transparent 66%);left:-40px;top:-40px;animation:abd1 17s ease-in-out infinite alternate} .ablob.c2{width:170px;height:170px;background:radial-gradient(circle,rgba(139,124,255,.45),transparent 66%);right:-30px;bottom:-40px;animation:abd2 21s ease-in-out infinite alternate} .ablob.c3{width:150px;height:150px;background:radial-gradient(circle,rgba(62,230,196,.32),transparent 66%);left:58%;top:22%;animation:abd1 25s ease-in-out infinite alternate} @keyframes abd1{to{transform:translate(44px,28px) scale(1.16)}} @keyframes abd2{to{transform:translate(-38px,-24px) scale(1.12)}} .ab-sig{position:absolute;inset:0;z-index:2} /* 1. WEBSITE — a page builds itself, cursor clicks the CTA */ .viz-web .wb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66%;max-width:224px;aspect-ratio:2.05;border-radius:10px;overflow:hidden;background:rgba(10,14,24,.94);border:1px solid rgba(160,190,255,.22);box-shadow:0 18px 42px -16px rgba(0,0,0,.75)} .viz-web .wtop{display:flex;align-items:center;gap:4px;padding:6px 8px;background:rgba(148,178,255,.05);border-bottom:1px solid rgba(160,190,255,.12)} .viz-web .wtop i{width:5px;height:5px;border-radius:50%;background:#2A3550} .viz-web .wtop i:first-child{background:rgba(255,107,107,.55)} .viz-web .wtop u{flex:1;height:8px;margin-left:5px;border-radius:4px;background:rgba(148,178,255,.1)} .viz-web .wbody{position:relative;padding:12px 14px} .viz-web .bar{display:block;height:7px;border-radius:4px;margin-bottom:9px;transform-origin:left;background:rgba(148,178,255,.18);animation:webBar 4.8s ease infinite} .viz-web .b1{width:74%} .viz-web .b2{width:52%;background:rgba(148,178,255,.1);animation-delay:.22s} .viz-web .cta{display:block;width:42%;height:16px;border-radius:5px;background:var(--grad-a);animation:webBtn 4.8s ease infinite} .viz-web .cur{position:absolute;left:42%;bottom:2px;color:#fff;animation:webCur 4.8s ease infinite} @keyframes webBar{0%,6%{opacity:0;transform:scaleX(.15)}16%,94%{opacity:1;transform:scaleX(1)}100%{opacity:0}} @keyframes webBtn{0%,30%{opacity:0;transform:scale(.6)}42%,64%{opacity:1;transform:scale(1)}70%{transform:scale(.9);box-shadow:0 0 0 4px rgba(77,159,255,.4)}77%,94%{transform:scale(1);box-shadow:none}100%{opacity:0}} @keyframes webCur{0%,46%{opacity:0;transform:translate(26px,16px)}58%{opacity:1;transform:translate(0,0)}66%{transform:translate(0,3px)}74%,90%{opacity:1;transform:translate(0,0)}100%{opacity:0}} /* 2. HEADLESS CMS — one source publishes to every screen */ .viz-cms .src{position:absolute;left:15%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#4D9FFF,#8B7CFF);box-shadow:0 0 26px rgba(93,124,255,.55);animation:cmsPush 3.4s ease-in-out infinite} @keyframes cmsPush{0%,58%,100%{box-shadow:0 0 26px rgba(93,124,255,.5)}16%{box-shadow:0 0 42px rgba(111,216,255,.9)}} .viz-cms .lnk{position:absolute;left:22%;height:1.5px;background:rgba(140,170,255,.16);transform-origin:left;overflow:hidden} .viz-cms .lnk::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),transparent);animation:cmsLnk 3.4s ease-in-out infinite} .viz-cms .k1{top:31%;width:52%;transform:rotate(-15deg)} .viz-cms .k2{top:50%;width:56%} .viz-cms .k3{top:69%;width:52%;transform:rotate(15deg)} .viz-cms .k2::after{animation-delay:.16s}.viz-cms .k3::after{animation-delay:.32s} @keyframes cmsLnk{0%,8%{transform:scaleX(0)}28%,70%{transform:scaleX(1)}84%,100%{transform:scaleX(0)}} .viz-cms .dev{position:absolute;right:12%;border:1.5px solid rgba(160,190,255,.42);border-radius:5px;background:rgba(148,178,255,.05);display:flex;align-items:center;justify-content:center} .viz-cms .dev i{width:72%;height:66%;border-radius:2px;background:rgba(120,160,255,.16);animation:cmsScr 3.4s ease-in-out infinite} .viz-cms .d1{top:14%;width:42px;height:30px} .viz-cms .d2{top:43%;right:8%;width:26px;height:32px} .viz-cms .d3{top:72%;width:19px;height:27px} .viz-cms .d2 i{animation-delay:.16s}.viz-cms .d3 i{animation-delay:.32s} @keyframes cmsScr{0%,38%,100%{background:rgba(120,160,255,.16)}52%,72%{background:rgba(111,216,255,.62)}} /* 3. CONTACT INTAKE — fields fill, submit, entry filed */ .viz-form .frm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;max-width:210px} .viz-form .fld{height:15px;border-radius:6px;border:1px solid rgba(160,190,255,.28);margin-bottom:8px;position:relative;overflow:hidden} .viz-form .fld::after{content:"";position:absolute;inset:2px;border-radius:4px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgba(77,159,255,.55),rgba(139,124,255,.55));animation:frmFill 4.6s ease infinite} .viz-form .f2::after{animation-delay:.4s} .viz-form .sub{height:18px;border-radius:6px;background:var(--grad-a);display:flex;align-items:center;justify-content:center;position:relative;animation:frmSub 4.6s ease infinite} .viz-form .sub .ok{position:absolute;color:#fff;opacity:0;animation:frmOk 4.6s ease infinite} .viz-form .saved{margin-top:9px;height:12px;border-radius:5px;background:rgba(62,230,196,.13);border:1px solid rgba(62,230,196,.3);opacity:0;animation:frmSaved 4.6s ease infinite} @keyframes frmFill{0%,8%{transform:scaleX(0)}26%,84%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}} @keyframes frmSub{0%,42%{filter:none}54%{filter:brightness(1.35)}66%,100%{filter:none}} @keyframes frmOk{0%,50%{opacity:0;transform:scale(.4)}60%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0}} @keyframes frmSaved{0%,58%{opacity:0;transform:translateY(7px)}70%,88%{opacity:1;transform:none}96%,100%{opacity:0}} /* 4. CRM — a deal advances New -> Contacted -> Proposal -> Won */ .viz-crm .pipe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:340px;height:82px;display:flex;gap:6px} .viz-crm .col{flex:1;border:1px solid rgba(160,190,255,.14);border-radius:7px;background:rgba(148,178,255,.03);padding:6px} .viz-crm .col em{display:block;height:4px;width:62%;border-radius:2px;background:rgba(140,170,255,.24);font-style:normal} .viz-crm .card{position:absolute;top:26px;width:16%;height:22px;border-radius:6px;background:linear-gradient(135deg,rgba(77,159,255,.95),rgba(139,124,255,.95));box-shadow:0 6px 16px -6px rgba(93,124,255,.7);animation:crmMove 5s ease infinite} @keyframes crmMove{ 0%,7%{left:7%} 24%,31%{left:32%} 48%,55%{left:56%} 72%,90%{left:78%;background:linear-gradient(135deg,#3EE6C4,#1FA88C);box-shadow:0 6px 16px -6px rgba(62,230,196,.7)} 100%{left:7%} } /* 5. MARKETING AUTOMATION — a trigger fires each channel in turn */ .viz-mkt .trig{position:absolute;left:14%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#4D9FFF,#8B7CFF);box-shadow:0 0 24px rgba(93,124,255,.5)} .viz-mkt .wire{position:absolute;left:22%;height:1.5px;background:rgba(140,170,255,.16);transform-origin:left;overflow:hidden} .viz-mkt .wire::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),transparent);animation:mktW 3.6s ease-in-out infinite} .viz-mkt .w1{top:28%;width:48%;transform:rotate(-16deg)} .viz-mkt .w2{top:50%;width:52%} .viz-mkt .w3{top:72%;width:48%;transform:rotate(16deg)} .viz-mkt .w2::after{animation-delay:.42s}.viz-mkt .w3::after{animation-delay:.84s} @keyframes mktW{0%,6%{transform:scaleX(0)}24%,62%{transform:scaleX(1)}80%,100%{transform:scaleX(0)}} .viz-mkt .ch{position:absolute;right:13%;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#9DB6E4;border:1px solid rgba(160,190,255,.28);background:rgba(148,178,255,.06);animation:mktCh 3.6s ease-in-out infinite} .viz-mkt .m1{top:12%}.viz-mkt .m2{top:41%;right:9%}.viz-mkt .m3{top:70%} .viz-mkt .m2{animation-delay:.42s}.viz-mkt .m3{animation-delay:.84s} @keyframes mktCh{0%,26%,100%{color:#9DB6E4;border-color:rgba(160,190,255,.28);background:rgba(148,178,255,.06);box-shadow:none}40%,64%{color:#fff;border-color:transparent;background:linear-gradient(135deg,#4D9FFF,#8B7CFF);box-shadow:0 6px 16px -6px rgba(93,124,255,.6)}} /* 6. LOYALTY — points fill a ring, reward unlocks */ .viz-loy .lring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px} .viz-loy svg{width:100%;height:100%;transform:rotate(-90deg)} .viz-loy .trk{fill:none;stroke:rgba(140,170,255,.16);stroke-width:7} .viz-loy .prg{fill:none;stroke:url(#loyg);stroke-width:7;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;animation:loyFill 3.8s ease-in-out infinite} @keyframes loyFill{0%{stroke-dashoffset:251}60%,100%{stroke-dashoffset:0}} .viz-loy .star{position:absolute;left:50%;top:50%;color:#E8C766;transform:translate(-50%,-50%) scale(0);animation:loyStar 3.8s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(232,199,102,.7))} @keyframes loyStar{0%,56%{transform:translate(-50%,-50%) scale(0);opacity:0}68%{transform:translate(-50%,-50%) scale(1.25);opacity:1}80%,94%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{opacity:0}} /* 7. ONLINE ORDERING — items into cart, order placed */ .viz-order .menu{position:absolute;left:13%;top:50%;transform:translateY(-50%);width:42%} .viz-order .item{height:16px;border-radius:6px;border:1px solid rgba(160,190,255,.2);background:rgba(148,178,255,.05);margin-bottom:8px;position:relative;animation:ordItem 4.8s ease infinite} .viz-order .item::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-52%);font-family:var(--font-d);font-size:12px;font-weight:700;color:#7FA5E8} .viz-order .i2{animation-delay:.5s}.viz-order .i3{animation-delay:1s} @keyframes ordItem{0%,10%{border-color:rgba(160,190,255,.2);background:rgba(148,178,255,.05)}17%,28%{border-color:rgba(120,160,255,.65);background:rgba(77,159,255,.18)}38%,100%{border-color:rgba(160,190,255,.2);background:rgba(148,178,255,.05)}} .viz-order .cart{position:absolute;right:18%;top:50%;transform:translate(50%,-50%);width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#4D9FFF,#8B7CFF);box-shadow:0 0 24px rgba(93,124,255,.5);animation:ordCart 4.8s ease infinite} @keyframes ordCart{0%,18%,40%,62%,84%,100%{transform:translate(50%,-50%) scale(1)}24%,46%,68%{transform:translate(50%,-50%) scale(1.14)}} .viz-order .badge{position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;background:var(--teal);color:#08211B;display:flex;align-items:center;justify-content:center;opacity:0;animation:ordBadge 4.8s ease infinite} @keyframes ordBadge{0%,74%{opacity:0;transform:scale(0)}82%,96%{opacity:1;transform:scale(1)}100%{opacity:0}} /* 8. BOOKING — pick a day, pick a slot, confirmed */ .viz-book .bk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64%;max-width:214px} .viz-book .days{display:flex;gap:5px;margin-bottom:8px} .viz-book .days span{flex:1;height:20px;border-radius:5px;border:1px solid rgba(160,190,255,.2);background:rgba(148,178,255,.05)} .viz-book .days span.d{border-color:transparent;background:linear-gradient(135deg,#4D9FFF,#8B7CFF)} .viz-book .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px} .viz-book .slots span{height:16px;border-radius:5px;border:1px solid rgba(160,190,255,.2);background:rgba(148,178,255,.05)} .viz-book .slots span.pick{animation:bkPick 4s ease infinite} @keyframes bkPick{0%,26%{border-color:rgba(160,190,255,.2);background:rgba(148,178,255,.05)}40%,90%{border-color:rgba(120,160,255,.65);background:rgba(77,159,255,.22)}100%{border-color:rgba(160,190,255,.2);background:rgba(148,178,255,.05)}} .viz-book .ok2{position:absolute;right:-7px;bottom:-7px;width:23px;height:23px;border-radius:50%;background:var(--teal);color:#08211B;display:flex;align-items:center;justify-content:center;opacity:0;animation:bkOk 4s ease infinite} @keyframes bkOk{0%,54%{opacity:0;transform:scale(.3)}66%,90%{opacity:1;transform:scale(1)}100%{opacity:0}} /* 9. WHATSAPP — a real chat, grey in / green out with ticks */ .viz-wa .chat{position:absolute;inset:15% 16%;display:flex;flex-direction:column;justify-content:center;gap:8px} .viz-wa .b{border-radius:9px;opacity:0} .viz-wa .in{align-self:flex-start;background:#1F2C34;border-top-left-radius:3px;height:16px;width:54%} .viz-wa .out{align-self:flex-end;background:#005C4B;border-top-right-radius:3px;height:16px;width:66%;position:relative} .viz-wa .out .tk{position:absolute;right:6px;bottom:-1px;color:#53BDEB;font-size:8px;letter-spacing:-.1em} .viz-wa .out .auto{position:absolute;top:-7px;right:5px;font-family:var(--font-m);font-size:6px;letter-spacing:.1em;color:var(--teal);background:#0B141A;border:1px solid rgba(62,230,196,.4);border-radius:99px;padding:1px 5px} .viz-wa .b1{animation:wa1 4.8s ease infinite} .viz-wa .b2{animation:wa2 4.8s ease infinite} .viz-wa .b3{animation:wa3 4.8s ease infinite} @keyframes wa1{0%,4%{opacity:0;transform:translateY(8px)}13%,93%{opacity:1;transform:none}100%{opacity:0}} @keyframes wa2{0%,22%{opacity:0;transform:translateY(8px)}31%,93%{opacity:1;transform:none}100%{opacity:0}} @keyframes wa3{0%,42%{opacity:0;transform:translateY(8px)}51%,93%{opacity:1;transform:none}100%{opacity:0}} /* 10. CHATBOTS — a bot: typing dots, then a reply */ .viz-bot .bwrap{position:absolute;inset:16% 15%;display:flex;flex-direction:column;justify-content:center;gap:9px} .viz-bot .av{position:absolute;left:0;top:6px;width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#4D9FFF,#8B7CFF);box-shadow:0 0 16px rgba(93,124,255,.5)} .viz-bot .typ{align-self:flex-start;margin-left:36px;display:flex;gap:4px;padding:8px 10px;border-radius:11px 11px 11px 3px;background:rgba(148,178,255,.1);border:1px solid rgba(160,190,255,.22);animation:botTyp 4s ease infinite} .viz-bot .typ i{width:5px;height:5px;border-radius:50%;background:#AECBFF;animation:botDot 1s ease-in-out infinite} .viz-bot .typ i:nth-child(2){animation-delay:.15s}.viz-bot .typ i:nth-child(3){animation-delay:.3s} @keyframes botDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}} @keyframes botTyp{0%,10%{opacity:0;transform:scale(.9)}18%,52%{opacity:1;transform:none}60%,100%{opacity:0}} .viz-bot .rep{align-self:flex-end;width:62%;height:22px;border-radius:11px 11px 3px 11px;background:linear-gradient(135deg,rgba(77,159,255,.34),rgba(139,124,255,.34));border:1px solid rgba(120,160,255,.35);animation:botRep 4s ease infinite} @keyframes botRep{0%,58%{opacity:0;transform:translateY(8px)}68%,92%{opacity:1;transform:none}100%{opacity:0}} /* 11. DASHBOARDS & ANALYTICS — KPI + live bars */ .viz-dash .dash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;max-width:240px} .viz-dash .kpi{display:flex;align-items:baseline;gap:7px;margin-bottom:10px} .viz-dash .kpi b{font-family:var(--font-d);font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .viz-dash .kpi em{font-style:normal;font-family:var(--font-m);font-size:10px;color:var(--teal)} .viz-dash .bars{display:flex;align-items:flex-end;gap:6px;height:46px} .viz-dash .bars i{flex:1;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#4D9FFF,#2A55C4);transform-origin:bottom;animation:dashBar 3.2s ease-in-out infinite} .viz-dash .bars i:nth-child(2n){background:linear-gradient(180deg,#8B7CFF,#4A3FB8)} @keyframes dashBar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}} /* ========================================================== ORBIT | the connected system map ========================================================== */ .orb-stage{position:relative;height:720px;margin-top:10px} .orb-scene{ position:absolute;left:50%;top:50%;width:680px;height:680px; transform:translate(-50%,-50%) scale(1); } .orb-note{ position:absolute;z-index:3;font-family:var(--font-m);font-size:11px; letter-spacing:.22em;color:var(--faint); } .orb-note.tl{top:6px;left:6px} .orb-note.br{bottom:6px;right:6px} .orb-note b{color:#7FA5E8;font-weight:500} /* concentric dashed rings, dashes slowly crawling */ .oring{ position:absolute;left:50%;top:50%;border-radius:50%; border:1px dashed rgba(140,170,255,.16); animation:orbSpin 140s linear infinite; } .oring.r1{width:340px;height:340px;margin:-170px 0 0 -170px} .oring.r2{width:550px;height:550px;margin:-275px 0 0 -275px;animation-direction:reverse;animation-duration:180s} /* radar sweep */ .orb-sweep{ position:absolute;left:50%;top:50%;width:540px;height:540px;margin:-270px 0 0 -270px; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 332deg,rgba(111,216,255,.10) 352deg,transparent 360deg); animation:orbSpin 26s linear infinite; } /* expanding pings from the core */ .ping{ position:absolute;left:50%;top:50%;width:130px;height:130px;margin:-65px 0 0 -65px; border-radius:50%;border:1px solid rgba(111,216,255,.45); opacity:0;animation:ping 4.5s ease-out infinite; } .ping.p2{animation-delay:1.5s} .ping.p3{animation-delay:3s} @keyframes ping{ 0%{opacity:0;transform:scale(1)} 8%{opacity:.7} 100%{opacity:0;transform:scale(3.4)} } /* the core: the KD mark */ .orb-core{ position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;z-index:4; border-radius:50%;overflow:hidden; background:#0A142E; border:1px solid rgba(130,170,255,.4); box-shadow: 0 0 60px 6px rgba(93,124,255,.42), 0 0 140px 30px rgba(77,159,255,.16), 0 0 90px 10px rgba(232,180,76,.10), inset 0 2px 14px rgba(140,180,255,.18); animation:coreBreathe 6s ease-in-out infinite; } .orb-core img{width:100%;height:100%;object-fit:contain;padding:26px;box-sizing:border-box;display:block} @keyframes coreBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} .orb-core-label{ position:absolute;left:50%;top:calc(50% + 82px);transform:translateX(-50%);z-index:4; font-family:var(--font-m);font-size:8px;letter-spacing:.32em;color:#8FA8D6;white-space:nowrap; } /* rotating orbits with upright nodes */ @keyframes orbSpin{to{transform:rotate(360deg)}} @keyframes orbSpinC{to{transform:rotate(-360deg)}} .orbit{position:absolute;inset:0} .orbit.o1{animation:orbSpin 80s linear infinite} .orbit.o2{animation:orbSpinC 110s linear infinite} .onode{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1*var(--a)))} .onr{position:absolute;width:0;height:0} .o1 .onr{animation:orbSpinC 80s linear infinite} .o2 .onr{animation:orbSpin 110s linear infinite} .oni{ position:absolute;transform:translate(-50%,-50%); display:flex;flex-direction:column;align-items:center;gap:7px;width:120px; } .oni .ot{ width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center; color:var(--cyan);background:linear-gradient(180deg,rgba(148,178,255,.10),rgba(148,178,255,.03)); border:1px solid rgba(160,190,255,.22); box-shadow:0 10px 30px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:transform .3s var(--e),border-color .3s,color .3s; } .oni:hover .ot{transform:translateY(-3px);border-color:rgba(140,220,255,.5);color:#fff} .oni.alt .ot{color:#A99DFF} .oni small{ font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;color:#8FA8D6; white-space:nowrap;text-transform:uppercase; text-shadow:0 2px 8px rgba(5,6,11,.9); } /* data pulses circulating on their own clocks */ .pulse-ring{position:absolute;inset:0;pointer-events:none} .pulse-ring i{ position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px; border-radius:50%;background:var(--cyan); box-shadow:0 0 12px 2px rgba(111,216,255,.8); transform:rotate(var(--a)) translateX(var(--r)); } .pulse-ring.pa{animation:orbSpin 13s linear infinite} .pulse-ring.pb{animation:orbSpinC 17s linear infinite} .pulse-ring.pc{animation:orbSpin 23s linear infinite} .pulse-ring.pb i{background:#A99DFF;box-shadow:0 0 12px 2px rgba(139,124,255,.8)} /* entrance choreography */ .orb-stage .orb-core{opacity:0;scale:.55;transition:opacity .8s var(--e) .1s,scale .9s var(--e) .1s} .orb-stage .oring,.orb-stage .orb-sweep,.orb-stage .ping{opacity:0;transition:opacity 1s ease .5s} .orb-stage .orb-core-label{opacity:0;transition:opacity .8s ease .9s} .orb-stage.in .orb-core-label{opacity:1} .orb-stage .oni{opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .55s var(--e) var(--d,.6s),transform .55s var(--e) var(--d,.6s)} .orb-stage .orb-note{opacity:0;transition:opacity .8s ease 1.6s} .orb-stage.in .orb-core{opacity:1;scale:1} .orb-stage.in .oring,.orb-stage.in .orb-sweep{opacity:1} .orb-stage.in .ping{opacity:1;transition:none} .orb-stage.in .oni{opacity:1;transform:translate(-50%,-50%) scale(1)} .orb-stage.in .orb-note{opacity:1} @media (max-width:1020px){ .orb-stage{height:560px} .orb-scene{transform:translate(-50%,-50%) scale(.78)} } @media (max-width:760px){ .orb-stage{height:420px} .orb-scene{transform:translate(-50%,-50%) scale(.54)} .orb-note{font-size:10px} .orb-note.tl{top:-8px} .orb-note.br{bottom:-8px} } /* ========================================================== JOURNEY | services: follow the line ========================================================== */ .jry{position:relative;margin-top:26px} /* serpentine SVG line (desktop): path built in JS from station positions */ .jry-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .jry-svg .jtrack{fill:none;stroke:rgba(160,190,255,.13);stroke-width:2} .jry-svg .jfill{ fill:none;stroke:url(#jgrad);stroke-width:2.5;stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(93,124,255,.6)); } .jhead{ position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%; background:var(--cyan);box-shadow:0 0 18px rgba(111,216,255,.95); pointer-events:none;opacity:0;transition:opacity .4s ease; } /* straight rail (mobile fallback) */ .jry-line{ position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px; background:rgba(160,190,255,.12);border-radius:2px; } .jry-line i{ position:absolute;top:0;left:0;right:0;height:0;border-radius:2px; background:linear-gradient(180deg,var(--blue),var(--violet)); box-shadow:0 0 14px rgba(93,124,255,.55); } .jry-line i::after{ content:"";position:absolute;bottom:-5px;left:50%;width:10px;height:10px;margin-left:-5px; border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(111,216,255,.9); } @media (min-width:901px){ .jry-line{display:none} .jdot{display:none} } @media (max-width:900px){ .jry-svg,.jhead{display:none} } .jphase{position:relative;z-index:2;text-align:center;padding:52px 0 34px;opacity:0;transition:opacity .8s ease} .jphase.in{opacity:1} .jphase span{ font-family:var(--font-m);font-size:11px;letter-spacing:.26em;color:#7FA5E8; background:var(--bg0);border:1px solid var(--line);border-radius:99px;padding:7px 18px; } .jstop{position:relative;display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;padding:32px 0} .jdot{ grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2; width:14px;height:14px;border-radius:50%;background:var(--bg0); border:2px solid rgba(160,190,255,.3); transition:border-color .5s,background .5s,box-shadow .5s; } .jstop.in .jdot{background:var(--blue);border-color:rgba(140,190,255,.7);box-shadow:0 0 16px rgba(77,159,255,.8)} .jcard{ grid-column:1;grid-row:1;justify-self:end;width:min(440px,100%); border:1px solid var(--line);border-radius:20px;padding:22px; background:linear-gradient(180deg,rgba(148,178,255,.05),rgba(148,178,255,.015)); opacity:0;transform:translateX(-34px); transition:opacity .7s var(--e),transform .7s var(--e); } .jstop.flip .jcard{grid-column:3;justify-self:start;transform:translateX(34px)} .jstop.in .jcard{opacity:1;transform:none} .jcard h3{font-family:var(--font-d);font-weight:600;font-size:19px;letter-spacing:-.015em;margin:15px 0 6px} .jcard p{color:var(--mute);font-size:14px;margin-bottom:13px} .jviz{ position:relative;height:132px;border-radius:13px;overflow:hidden; border:1px solid var(--line);background:rgba(8,11,20,.5); } .jviz .ablob{opacity:.5} .jpill{ grid-column:3;grid-row:1;justify-self:start;margin-left:28px; display:inline-flex;align-items:center;position:relative;z-index:2; font-family:var(--font-m);font-size:11px;letter-spacing:.2em;white-space:nowrap; color:var(--mute);border:1px solid var(--line2);background:#0C101C; padding:9px 17px;border-radius:99px; transition:background .5s,color .5s,border-color .5s,box-shadow .5s; } .jstop.flip .jpill{grid-column:1;justify-self:end;margin-left:0;margin-right:28px} .jstop.in .jpill{ background:var(--grad-a);color:#fff;border-color:transparent; box-shadow:0 8px 24px -8px rgba(93,124,255,.6); } .jend{ position:relative;z-index:2;text-align:center;padding:60px 0 8px; opacity:0;transform:translateY(16px); transition:opacity .8s var(--e),transform .8s var(--e); } .jend.in{opacity:1;transform:none} .jend-dot{width:18px;height:18px;margin:0 auto 24px;border-radius:50%;background:var(--grad-a);box-shadow:0 0 28px rgba(93,124,255,.9)} .jend h3{font-family:var(--font-d);font-weight:700;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.03em;margin-bottom:10px} .jend p{color:var(--mute);font-size:15.5px;margin-bottom:26px} @media (max-width:900px){ .jry-line{left:17px;margin-left:0} .jstop{display:block;padding:22px 0 26px 52px} .jdot{position:absolute;left:11px;top:36px} .jpill,.jstop.flip .jpill{display:inline-flex;margin:0 0 12px} .jcard,.jstop.flip .jcard{width:100%;transform:translateY(20px)} .jstop.in .jcard{transform:none} .jphase{text-align:left;padding:38px 0 22px 52px} .jphase span{padding:6px 14px} .jend{text-align:left;padding-left:52px} .jend-dot{margin:0 0 20px} } /* ========================================================== BLOG ========================================================== */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px} @media (max-width:900px){ .blog-grid{grid-template-columns:1fr} } .post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;background:linear-gradient(160deg,rgba(20,28,50,.5),rgba(10,15,30,.62)); transition:transform .35s var(--e),border-color .35s var(--e),box-shadow .35s var(--e)} a.post{text-decoration:none;color:inherit} .post:hover{transform:translateY(-4px);border-color:var(--line2); box-shadow:0 34px 74px -36px rgba(0,0,0,.85)} .post .cover{height:176px;position:relative;overflow:hidden; background:radial-gradient(130% 120% at 26% 14%,#132043,#080d1c)} .post .cover .mesh{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(140,170,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(140,170,255,.08) 1px,transparent 1px); background-size:32px 32px; -webkit-mask-image:radial-gradient(ellipse 82% 80% at 50% 26%,#000,transparent 76%); mask-image:radial-gradient(ellipse 82% 80% at 50% 26%,#000,transparent 76%)} .post .cover .orb{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(42px);opacity:.55} .post .badge{position:absolute;left:16px;top:16px;z-index:2; font:600 10px/1 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--teal); background:rgba(62,230,196,.1);border:1px solid rgba(62,230,196,.32);padding:7px 11px;border-radius:999px} .post .meta{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1} .post .cat{font:600 10px/1 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .post h3{font:600 19px/1.28 var(--font-d);letter-spacing:-.01em;margin:13px 0 10px} .post p{color:var(--mute);font-size:14.5px;line-height:1.56;flex:1} .post .foot{margin-top:20px;display:flex;align-items:center;gap:10px; font:500 12px/1 var(--font-m);color:var(--faint)} .post .foot .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)} /* newsletter / stay-posted strip */ .blog-note{margin-top:30px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r); padding:34px 24px;background:var(--glass)} .blog-note h3{font:600 clamp(20px,2.4vw,26px)/1.2 var(--font-d);letter-spacing:-.01em} .blog-note p{color:var(--mute);margin:12px auto 20px;max-width:440px;font-size:15px} /* post card cover image */ .post .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .post .cover-img + .cover-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,9,18,.55))} .post .badge.live{color:#04121f;background:var(--teal);border-color:transparent} /* ---------- blog post / article ---------- */ .post-hero{text-align:left} .post-hero .container{max-width:840px} .post-back{display:inline-block;font:600 11.5px/1 var(--font-m);letter-spacing:.14em; text-transform:uppercase;color:var(--mute);text-decoration:none;margin-bottom:24px;transition:color .25s} .post-back:hover{color:var(--ink)} .post-cat{display:inline-block;font:600 11px/1 var(--font-m);letter-spacing:.18em; text-transform:uppercase;color:var(--blue);margin-bottom:18px} .post-hero h1{font:600 clamp(29px,4.2vw,50px)/1.1 var(--font-d);letter-spacing:-.022em;color:var(--ink)} .post-byline{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:9px; font:500 13px/1.5 var(--font-m);color:var(--mute)} .post-byline b{color:var(--ink);font-weight:600} .post-byline i{width:3px;height:3px;border-radius:50%;background:var(--faint);display:inline-block} .post-byline .byline-author{text-decoration:none;border-bottom:1px solid var(--line2);transition:border-color .25s} .post-byline .byline-author:hover{border-bottom-color:var(--blue)} .article{padding:8px 24px 40px} .prose{max-width:800px;margin:0 auto;font-family:var(--font-b);color:#ccd5ea;font-size:17.5px;line-height:1.75} .prose p{margin:0 0 22px} .prose > p:first-of-type{font-size:19px;color:#dbe3f4} .prose strong{color:var(--ink);font-weight:600} .prose em{font-family:var(--font-b);font-style:italic;background:none;-webkit-text-fill-color:currentColor;color:inherit} .prose a:not(.btn){color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(77,159,255,.32)} .prose a:not(.btn):hover{border-bottom-color:var(--blue);color:#8fc0ff} .prose h2{font:600 clamp(23px,3vw,31px)/1.22 var(--font-d);letter-spacing:-.018em;color:var(--ink);margin:54px 0 18px} .prose h3{font:600 clamp(18px,2.2vw,22px)/1.3 var(--font-d);letter-spacing:-.01em;color:var(--ink);margin:40px 0 14px} .prose ul{margin:0 0 24px;padding:0;list-style:none} .prose ul li{position:relative;padding-left:26px;margin-bottom:13px} .prose ul li::before{content:"";position:absolute;left:3px;top:10px;width:7px;height:7px;border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 0 10px rgba(77,159,255,.5)} .prose img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line2);margin:16px 0 30px;display:block;background:var(--bg2)} .prose .table-wrap{overflow-x:auto;margin:10px 0 30px;border:1px solid var(--line2);border-radius:14px} .prose table{width:100%;border-collapse:collapse;font-family:var(--font-d);font-size:14.5px;min-width:540px} .prose thead th{text-align:left;font:600 11px/1.4 var(--font-m);letter-spacing:.06em;text-transform:uppercase; color:var(--blue);padding:15px 18px;background:rgba(148,178,255,.05);border-bottom:1px solid var(--line2);white-space:nowrap} .prose tbody td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:#c1cbe0} .prose tbody tr:last-child td{border-bottom:0} .prose tbody tr:hover{background:rgba(148,178,255,.028)} .prose tbody td:first-child{color:var(--ink);font-weight:600} .article .blog-note{max-width:800px;margin:44px auto 0} /* CTA card inside prose: restore its own centred styling (prose h3/p rules were overriding it) */ .prose .blog-note{text-align:center} .prose .blog-note h3{font:600 clamp(20px,2.4vw,26px)/1.2 var(--font-d);letter-spacing:-.01em;color:var(--ink);margin:0 0 12px} .prose .blog-note p{color:var(--mute);max-width:440px;margin:0 auto 20px;font-size:15px} @media (max-width:640px){ .prose{font-size:16.5px} } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} html{scroll-behavior:auto} .rv{opacity:1;transform:none;filter:none} .mq-track{animation:none} }