/* ========================================================= ERVUP — Digital Development Agency — clone (HTML/CSS/JS only) 1. Variables & reset 7. Bento 2. Base & utilities 8. Globe 3. Loader 9. Playground 4. Topbar & Nav 10. Use cases 5. Hero + circuit 11. Pricing / FAQ / CTA / Products 6. Light section 12. Footer & responsive ========================================================= */ /* ---------- 1. Variables & reset ---------- */ :root{ /* ERVUP Unified Tokens */ --ervup-navy-950: #050b18; --ervup-navy-900: #07111f; --ervup-navy-850: #0b1628; --ervup-navy-800: #101d33; --ervup-navy-700: #172642; --ervup-blue-600: #2563eb; --ervup-blue-500: #3b82f6; --ervup-blue-400: #60a5fa; --ervup-blue-300: #93c5fd; --ervup-blue-soft: rgba(37, 99, 235, 0.14); --ervup-blue-glow: rgba(59, 130, 246, 0.25); --ervup-surface: #ffffff; --ervup-surface-soft: #f8fafc; --ervup-surface-muted: #f1f5f9; --ervup-surface-dark: #07111f; --ervup-surface-card-dark: #0b1628; --ervup-surface-card-dark-2: #101d33; --ervup-border: #e2e8f0; --ervup-border-strong: #cbd5e1; --ervup-border-subtle: #f1f5f9; --ervup-border-dark: rgba(255, 255, 255, 0.08); --ervup-border-dark-strong: rgba(255, 255, 255, 0.14); --ervup-border-dark-brand: rgba(59, 130, 246, 0.32); --ervup-text: #0f172a; --ervup-text-muted: #64748b; --ervup-text-soft: #94a3b8; --ervup-text-white: #ffffff; --ervup-text-white-muted: rgba(255, 255, 255, 0.65); --ervup-text-white-soft: rgba(255, 255, 255, 0.42); --ervup-success: #16a34a; --ervup-success-soft: #dcfce7; --ervup-success-dark: #7ce8b6; --ervup-success-dark-soft: rgba(60, 220, 150, 0.12); --ervup-success-dark-line: rgba(60, 220, 150, 0.35); --ervup-warning: #d97706; --ervup-warning-soft: #fef3c7; --ervup-warning-dark: #ffce8a; --ervup-warning-dark-soft: rgba(255, 176, 60, 0.12); --ervup-warning-dark-line: rgba(255, 176, 60, 0.35); --ervup-danger: #dc2626; --ervup-danger-soft: #fee2e2; --ervup-danger-dark: #ffb4b4; --ervup-danger-dark-soft: rgba(255, 80, 80, 0.1); --ervup-danger-dark-line: rgba(255, 120, 120, 0.3); --ervup-info: #0284c7; --ervup-info-soft: #e0f2fe; --ervup-info-dark: #5db4ff; --ervup-info-dark-soft: rgba(30, 123, 255, 0.14); --ervup-info-dark-line: rgba(30, 123, 255, 0.35); --ervup-neutral: #64748b; --ervup-neutral-soft: #f1f5f9; --ervup-neutral-dark: rgba(255, 255, 255, 0.58); --ervup-neutral-dark-soft: rgba(255, 255, 255, 0.07); --ervup-duration-micro: 120ms; --ervup-duration-base: 180ms; --ervup-duration-modal: 220ms; --ervup-duration-page: 260ms; --ervup-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ervup-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bg:#060a14; --bg-soft:#0a1020; --card:#0e1626; --card-2:#111a2c; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --white:#fff; --muted:rgba(255,255,255,.58); --brand:#1e7bff; --brand-2:#5db4ff; --brand-soft:rgba(30,123,255,.16); --light:#fff; --light-2:#f2f6fc; --ink:#0c1526; --ink-muted:#5d6b80; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--white);font-family:var(--font); font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden; } body.is-locked{overflow:hidden} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} :focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px} /* ---------- 2. Base & utilities ---------- */ .wrap{width:min(1200px,100% - 48px);margin-inline:auto} .wrap--narrow{width:min(880px,100% - 48px)} .sec{position:relative;padding:120px 0} .sec--dark{background:var(--bg);color:#fff} .sec--light{background:var(--light);color:var(--ink)} .center{text-align:center} .narrow{max-width:620px;margin-inline:auto} .h2{ font-size:clamp(30px,4.2vw,54px);line-height:1.12;letter-spacing:-.025em;font-weight:600; max-width:min(880px,100%);margin-inline:auto;text-wrap:balance; } .h2.center{margin-bottom:56px} .on-dark{color:#fff} .muted{color:var(--ink-muted)} .muted-dark{color:var(--muted)} .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45;letter-spacing:-.01em;font-weight:500} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:44px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:500; white-space:nowrap;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .35s,border-color .25s; } .btn--lg{height:50px;padding:0 28px;font-size:15px} .btn--full{width:100%;height:46px} .btn--brand{background:var(--brand);color:#fff;box-shadow:0 6px 24px rgba(30,123,255,.28)} .btn--brand:hover{background:#1a6ae6;transform:translateY(-2px);box-shadow:0 10px 32px rgba(30,123,255,.42)} .btn--ghost{background:rgba(255,255,255,.07);border:1px solid var(--line)} .btn--ghost:hover{background:rgba(255,255,255,.13)} .btn--plain{background:transparent} .btn--plain:hover{background:rgba(255,255,255,.08)} .btn--outline{border:1px solid var(--line-2);background:transparent} .btn--outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)} .btn--danger{background:rgba(255,80,80,.16);border:1px solid rgba(255,120,120,.35);color:#ffb4b4} .btn--danger:hover{background:rgba(255,80,80,.24)} .btn--dark{background:#111;color:#fff;height:46px} .btn--dark:hover{background:#000;transform:translateY(-2px)} /* badges */ .badge{ display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px; font-size:12.5px;font-weight:500;letter-spacing:.01em; background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff; } .badge .i-spark{width:13px;height:13px;fill:var(--brand)} .badge--dark{background:#0c1526;border-color:#0c1526;color:#fff} .center-badge{display:flex;width:max-content;margin:0 auto 22px} /* icons */ .i-arrow,.i-chev,.i-globe,.i-grid,.i-swirl,.i-cpu,.i-clock,.i-card{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .i-chev{width:11px;height:11px;opacity:.7} .i-arrow{width:13px;height:13px} .i-globe{width:13px;height:13px} /* reveal on scroll */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out) var(--d,0s),transform .9s var(--ease-out) var(--d,0s)} [data-reveal].in{opacity:1;transform:none} /* word by word reveal */ .w{display:inline-block;overflow:hidden;vertical-align:top} .w-in{display:inline-block;will-change:opacity,transform,filter} /* ---------- 3. Loader ---------- */ .loader{ position:fixed;inset:0;z-index:200;overflow:hidden;display:grid;place-items:center; background:radial-gradient(120% 100% at 50% 42%,#0a1224 0%,#060a14 56%,#03060d 100%); transition:opacity .95s var(--ease),transform 1.1s cubic-bezier(.76,0,.24,1); } .loader.is-done{opacity:0;transform:scale(1.035);pointer-events:none} .loader::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(47,140,255,.55),transparent);opacity:0;transition:opacity .5s} .loader.is-ready::after{opacity:1} .loader__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.3s var(--ease-out)} .loader.is-ready .loader__canvas{opacity:1} .loader__grid{position:absolute;inset:-12%;opacity:0;transition:opacity 1.7s var(--ease-out); background-image:linear-gradient(rgba(120,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.05) 1px,transparent 1px); background-size:66px 66px;background-position:0 0; -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 8%,rgba(0,0,0,.45) 44%,transparent 76%); mask-image:radial-gradient(closest-side at 50% 50%,#000 8%,rgba(0,0,0,.45) 44%,transparent 76%); } .loader.is-ready .loader__grid{opacity:1} @keyframes ldGrid{to{background-position:66px 66px,66px 66px}} .loader__aura{position:absolute;left:50%;top:50%;width:min(1100px,124vw);aspect-ratio:1;filter:blur(4px); transform:translate(-50%,-50%) scale(.62);opacity:0; background:radial-gradient(closest-side,rgba(47,140,255,.20),rgba(18,88,216,.09) 46%,transparent 72%); transition:opacity 1.5s var(--ease-out),transform 1.9s var(--ease-out)} .loader.is-ready .loader__aura{opacity:1;transform:translate(-50%,-50%) scale(1);animation:ldAura 6.5s 1.9s ease-in-out infinite} @keyframes ldAura{0%,100%{opacity:.72}50%{opacity:1}} .loader__rings{position:absolute;left:50%;top:50%;width:0;height:0} .loader__rings i{position:absolute;left:50%;top:50%;width:540px;height:540px;margin:-270px 0 0 -270px; border-radius:50%;border:1px solid rgba(120,180,255,.16);opacity:0} .loader.is-ready .loader__rings i{animation:ldRing 5s var(--ease-out) infinite} .loader__rings i:nth-child(2){animation-delay:1.66s} .loader__rings i:nth-child(3){animation-delay:3.32s} @keyframes ldRing{0%{transform:scale(.16);opacity:0}14%{opacity:.65}100%{transform:scale(1.3);opacity:0}} .loader__stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px; transition:transform 1s var(--ease),opacity .75s var(--ease)} .loader.is-done .loader__stage{transform:scale(1.08);opacity:0} .loader__lockup{display:flex;align-items:center;gap:20px} .loader__mark{width:80px;height:auto;flex:none;overflow:visible;filter:drop-shadow(0 14px 36px rgba(30,123,255,.34))} .loader__mark .ld-draw path{fill:none;stroke:rgba(165,212,255,.95);stroke-width:1.1;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;opacity:0} .loader.is-draw .ld-draw path{animation:ldDraw 1.35s var(--ease-out) forwards} .loader.is-draw .ld-draw path:nth-child(2){animation-delay:.18s} @keyframes ldDraw{0%{stroke-dashoffset:1;opacity:1}72%{opacity:1}100%{stroke-dashoffset:0;opacity:0}} .loader__mark .ld-fill{opacity:0;transform:scale(.93);transform-origin:50% 50%; transition:opacity .95s var(--ease-out) .6s,transform 1.15s var(--ease-out) .6s} .loader.is-draw .ld-fill{opacity:1;transform:none} .ld__s{fill:url(#ldS)} .ld__b{fill:url(#ldB)} .loader__word{position:relative;display:block;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-out)} .loader.is-word .loader__word{clip-path:inset(0 0 0 0)} .loader__word img{display:block;height:34px;width:auto} .loader__sweep{position:absolute;inset:0;pointer-events:none;transform:translateX(-135%);mix-blend-mode:screen; background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.55) 50%,transparent 72%); -webkit-mask-image:url("data:image/png;base64,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");mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAfCAYAAAA8/NKAAAAyfElEQVR4nM19d9hkRZX371Td291vmsAwwzCABJWMCGZAXVcEV1HXAOInCAqrKOoyGNes4JowrCuroihBwf1UVjIqoLKiApLTEAcYZobJ84ZO91ad8/1R4dbtblh9dvd5vjvPO919+95bVadO+J1Q1XT4YUd85Ovf+MoX+/0CeZ4hHkQgpAeBCBAgnhcRsDCEBcwCwH2GwL1nACQQFhAIIIBIQZF7vlLk2yH0ej3865nfuv6C8398SN4YR2kNrAAQAiAg37i4lkEkgIhvSlyfKHxffSAif45AEGgtEGuwYN5CXH7FldIabwHCkPAs35ZSKr4ijJkovndjd+MWf39s3I8t3K/8fb1+DzffdDOu+NWvzv3Ff1x+vNg2xsYXwto+AAuBgpEcEsYsjqa+Qfc+vgKhx2Hw7nrfDQJIE6TogZ5xKOiM04WLKdDWAoozZFpDSoAWZchnBd2PvZbs+vuAbAxg5ecqoakklBWB+P4JASTkPkMcHSIhBKQyiFhgu5dCf/Kzgh2WABv7oEIgBhBTQu89AfnhuZ+y//cbpwn6gMrdsIWQMqHUma/2BRHgZpohEGR5C2W/gyPfdPT5py4/5ZjxyXEYa2GNQavVwq2334bTPvuZJQ8++PCGvDkOY7l6uOdfEPxcpO1J0ieBY3KBIkKzmaPb7WKHpcvwmc98Rg465GCUpkSe57DGIMsbOP/8H+MLXzidWq0xCARsGUY0RCiwl6clknn2soOExxJ+zfMcZb+NnXfcGZ/4+Cfl+Qc/D71OD+MTYwhy6x8QZSIKTPIsSWSZg0x4WhAIigikHE/rLMPs7Azuuete/PFPNzxw2eVX7L52zaMYH58Hw4SyLECkkM2fN2+/vfbaE/8/HDvssP3BIgKtFQx7xqVEa0QmQjxHgw+R9I2naLyf/fUMrRX2f/b+aLWywSf8rx77778/XnXEEcd98NRTjzvt81/6/FWX/8cnxloTIJXBWq7kB+SFF4kiTZ9Uqc3qoNpFwgxkOeTxm4Eb1txNr3/9PpgFpAtYTxYpBfkBBDrgyLfg11+/UEkJUXpk36lSae75wQiFfoYuxD4RRAlQGmTHvvsW++yDgT5AUwA0wD1AbQ9g/RzsPbf+QLgLNFqAZcArrapB8mNNlCgQFW5QbEqJVziuD9stXnz48573POhcQVhQGotGI4PKCJNTE7sCskGTwIqAh8brlKxTbKHthMZStQ8FkHLfNZvNib323gd777NX3SIDWLp0qe+nAnNZm8uazqwzvT8XZltQaSOJfWu2mtvtu98+eNZ++w1O3f/a8YLnPx9veNMbnvm+958s3/3u92fO/Na/zG+1xpDpBpgLZO1+fy0zo9vtegRDXnM5KyVem/mhYlikpabchyUekXLua08QgbMo1qDRaEIRodvuGKUApQSKACZyFoQ8owUuTmci9IkGJj/0LZ5LLSuBBdi0aRO22WY+iqKA1gqkFVQcv7doYX7res09jQdZcog0nlG85geBNGHxooVYtv12OPv73/n4d7994Mc/97lPU95oQqmsZhwDKKIUudS1jEcSSAQgoQJ7GNLbAvn6P+6rdt1XZLudgXYPMIBiAnoMlgzjRyy/YO7PP79QNq0AtZoQFoceowWLlPbkTgUt6VtgfFJQSoNtF8193/I0fuFLD5DNfehNHWQtBTRylAI0aBzlv31+udx59WrSOYQR26zNb/JSI/CIuU3vbvd6q7ZOzyweH2+h2+uiKEssWrgNZmZmYUo7Vz3LuvEm0E2GGhzm/XDa3eG+Lwy3t8zMgpmxZfMWNJpNAMDExDg6Hdek0OBjqtaqWQyf6u2GKwmAkPLKlFAy96fnXLuzs7PIswyklFdmDMs2GYl/xoANlohOHRZMp4GIvCJ37xUpkCJMToxhv333wRe+cNq8Zz7zGfKB5R+kRqOEVQqZsJRKqRocEhFYtjClBVsbHxoJ48dMngfBA3CixhvBBFT3gBQARlEalEUBYywaeYZup7dSqZSZErYmHtYr8bEDVi1t3hMMwgnjVLwkfrwiAg0H/4p+gdKYugKhIe6u+jmEpiqmCChfKQVoDRhCWXRB/QLLli7Bxz72ERhi+coX/plKC+c2JiAZQJyXYdpWDVR4Rqrz/mbKm5DeKsgll76T3vXOs5A3gNJAlYBuKGC9gd5tG2QHvu3o8ndf+gnQc26KTWU94QEg1WfRYMQvtQJpDTElYBvIj3rHPd3GtqCts8iyDBkxZNZC7d2CveYO2N9c/A0lBkJjgDWoM1dF2CezX1W/whUp7dhAATrzLi85GrMwGMLVdSmNgzvhkVACz9x16aTXFVqYPWGPUkTAzM5VVqrGsyyoXMqocRJDOUqfEVW2NDYc3HiG8m65sRZKKWReto2xMKZ0oYwwvERuKfY8cJHU20UlyuRdpSzPQEzodnsgIkxNTOC9J5+Emdk5+dQnPkoT42PIRMTWHuQ7rkih0VAQyQH4uAR5fy4NxohU0C0SpO7bRUseFJMfkGUGs0Uzb0AgmFww75ksAAtBoGoTWSkXGXhF9T3Vz8XravEL7XtYKS+i+l9rrIUxpSDsXBZFBChAJcybiluqmOEVdfSQ2UVXiqKAMQZ5nqPRaAAA2nNtNBo5PvaRD+GGP/zx1Ouuu+5rEXFFoU2t87BVpxpt4N2WcE9ljZHlkKu/+D16ySvOws57QFgDlpw7YjWKLX3kr333hebun/5E1t4ONBsJkwUFXht1HTDW+ssQagCmjYnDP/M2u+fBEzxTgPo50AC4AKTVB5sc5cXfPly2PADKW57hB0xqbcSj5rd+BNWcuo4U5xhxjlUCTp/sSU5zJ6gsEBxw6DDwQ2SLoOwZII/6YzwuoRMCv/p2Bi1nTYPUCFDJlB9hqk5dWLB6FiX9bjRyNJsZjGEXB1Upz1fXUkL66MWIVEoXAIug1+uh6BdotVrIdAZSLo7aGhvDe046EX++8YavX3H5xcszCmZaKoEmpQBrsXnzFnRLC5CgKK2DWFZQGgPDxgWDuAr0ijiBJKXipAbtLFR5kEQuiCjsFBdpBcsFHl27/koWhZIVrNV1LZpyc21CZIDtKuuTXhM/i58k/0dE0FpDKYraf/Xqx/HIY6vRbLRgRVD6gG5AeSIChguCMQustc4aMVdBMJ2BiNDQCgvGx7HPXs9Eq9VCt9OF9jEOEWBuro2F2yzEl774+a8e9opXfm3z9By0zgaUYqJkPAdQBVuG6ZMyXRDLrAH0NkAu/Mbu+v2n3y9qCaxYkHXWqNxEyHaZDzz7uBNkw+lnw8wB8P0Q8Uw/YNVCsFAGu6CBsg+9cD/wq488t48xyFwXUDksC2xpoXYeg7noV7fLjVf8CtqAqQmQSeZwUMmMErpRJj5BWOEqIhBpaKXBWqC0qmFeNzIBolEbeLJIjDdR7S6nwAkeVSS4MwhslmlkWRa/0ToomHR8DEAl+MsjiHQQCTijIbr4EYgwez5XpKG1BoGQaY1NGzdj7dr1mJg/BWMYvaJAYQuQEAxbiLWOVzx/x1ev7AUCsQxii4ULJrHXnnuiNb+Jdrtd0VgpdDpdLFq0CG8//rhTLrnkkuUZSFToqMAJfavVwMo1a/H24094+/T0lruUooZl2xfLhYhYy1ywsBURyyylCPsYmTi1QqScFgFEhBHjZ0H3qqB/tFIqB5ECCa1bt/FhUi1YmwY1HfGIKoQQn+WtBqWXVsCkOhmFtIKeKQMReRcGTtmcc96Pce655y7KtG4l1ltCHDD2hMWIMFsr0yIM9jzhGNqRVRNNNfNsasGiJc95xztOuORdJx4HZoEpS4gIstxF459z4IF48UteeuZll192cmjRsdnAmMO7mvcwOOhBlOWVUWMMcvsFD+C2d/weB2x/COD6rAxArGA3GGSvfPv3y9suOlvW/AHINBzzD2aHgJBllJSYnpWIACn7aL7uA98vFz8DPNMBWEGUwBYENQGY9Q3wFWf/HdqPA40x186Qm1A/Kv9/YPLie9dfoirICzh2VMoZMsWVkaMwSUQAKUS/GV6nQnyXBjJ0ERkCwT2pUEcdEQTXaEj1S/IecFAXBEmzlgHmkCSkqdOlhm9F5iQqmPAtQesMP/vZz/DNb31rh/Gx8e0LU86xWMMsZXiKiFgk9lOErTAb8Z4cCAoshkTaeSPbbvulO77iH0484fxj3vZW9Pt9sLUAEZidX73Pvvvg2fs/+zlZSlAWBluX5ivLEvfev+KcDWtXozU+DluWPpVXaemgLRNtgDqT/9eQNj2yvAGlx2A4xFvidI6wZvGb+pHw5nDgv7qPVAUPA5qBcoyxbv26rSsfemBzFF8Kk/BXDSccs+7vvjX333cvKS7k+OOPR2BErbQPKAN//4bXvueaa3518lzHuFiM914HMdooSlSHG2zFh95SWgYpBeEu7MWnvTjb9QLhsYWAFCAGMhjwZgZ2nAJe+M6P4vL7vohyI6Ab8MGCIHUVgROAHtSN0k2wnUZz9zduwwe9+gQuc+huH5IRwAzpGeRPm0Bx4U/Pwn3XrIUSp5iYR7PL8ORH2klN2Kj+EgSVSCsV0tiVrtakoEj7FKICoCslUUtKpO3TCK5WngyV8gsKDUCFBIILMhCzGRpraJsACsqrdgSkld6SyEm4yvM0w6HqtevW4f77V6wB9BrA4r95rHvggQd+dP/99/yob6yc8I63YWZmFlmuAQaKosDixYvxwoNfcEVWjcJBIPFKRinCggXzdzHd9iOT8+aj6PVQeKtbH2zyMmSAqiHXB+/z7XEiXcTFClBajpYwog8Pz0MAc1jQqxiQDHz5ZKLpXBknIDEG7Sdf5/mCPG+iOT7mgKsAzOyzaYMsNtihZMyKoJUCiFAag62bN+K0L3yFXvu6N8i22y6AsQTSAEFDBNhv332Q5zlg+16rWc+3Pps2CJtDO5Un6hkudSeRCAyDGuOQR34J3HDNGTjs7z8oRoPKEhoCJYDd0EF+2Bu+UN503hdl1a+AzHjr7m1losCj2AVrjQyAgdgMzcPfd2l/bBFkrosMLkVsC4tsEQEPbwCu/ea7UG4CZS2ItW7OiQCyqHNL1f/YrndtCfBlDEGrBOGjyNZE0HWySZybCDNJI8RM4hhr2AA1+sekAil4q+TGHVyYRAmkCqBGNRlA0kG5VMUwPqxQv60WUA/PqWLV0X2KLr2/eGxsDEopTM5bCDaFD3QLwNU1qS0eYbrdoQBNGqQIT6xbh7O/973Xvu41r75kav4U+r0eFBFMaTA5OYFdd91liao9yiO/4G0KIGVpUBpGadj5zyKwXjlY17/45yisXAwmeklUPU+CmiBYFhjDKEpGWTIKw841CvUPKXqpvQGiOapNWsqE4nVTinTSP/+u+lg7mKUvImDDsMaArYG1Bmwt2JYusxb/DETswJ+BiAHYAmIhbMCWkWU5Vj3yEDZt3uxSfIB/ddM6NT5Z2Uhi0KB78iSzHt15GaV8B8gEBWgFc+VpH1IbNgB5BkMEZgIUILMCNdECvXT5v6K1LWDSuEjyoLTRQNAsB5sZtJ71nt15zxccxB2C7rvsDTEBpoSaHEd50ZlH8eM3AkqjNkVD2isZ0AidE4dKyv1BeWVB/rPDOsPpZs+VRNoXsPg/nSi6pEupwpGUOxO6hlgM1dPbMbMV9Qol55Gy5AjjUYUKor2WcFbgE8k1PD9UFxWNp0tVl2UJy8bxbeTrEuw/x1d279M/a0uIcd8rpUAqw8YN6/648tFVaDYasD7jzGJBRGg2GshApMPYSBHEB/1EgNnZ9qOd7hy6/b73rSRlgdo4gtUI+fGgkUPFaySXP5flYwBphAqbMJkui+Zz8ZF8yWRI0mgFPQZ7hDoLRM2ZzJRjCE2EUO4ULLEpi61ubhKGCm4UQv+GCDDQrkDAEPb1pWwh4to0pqyGk2gEpUOQMfj8UhtubKf+MgKlpcgyKCzfc2ZQPgnZeifkustOlr8/7kw0GpCOhWIG5wRe2we95LD30vUvep+svBQu+JohlBdUAmdRxT0ysBQQvR2yw476BbdaULMWYO1qKroMvawJe8sdG+yNP/kpuHDuV7D2gyRMg7xPak7T7xUoqYWqwIlqOYRHw/eQUlEpwSLVdqHy/C/L8BBIKgWD8BfnoHKvJZkbGkD5w1q0dmFsuqroHbAoRJMUyjyCIQ3o0tNDvByzQmW4EsGKnxKxiy2IOOfC62ClNXSWjRVFP7YVcngsAsucpKmjYnCPy7IMy5Yte3nR7V7TbLVcLj90MqavEE2J6xghyzSU0p4QFDMtIi4lrTWh2Ryb98TaJ2b6hYHK8ujixykIwvWUMZ7qvXhoOTqNGUxRYGJ3XRWIS62NOwxzN2SXwhgpUWhPLthpVwVMCooUhBR0M4cue1DNCSxcsCCOLc1m9Yt+df5JGqjKipLygCe7cKijfqJYgLwF+5sv/pt6/t991W6zU8tXVgEakB4sbKHp8H+6BOff9FrprAV0Vn8OAIitOFJnkM4M8oNPfVm5y7570RwjKwHWgPQVBAY5j6O44qxDMfOwRwuSKP0UqVANzFRjGjVUr5ApuEVSE/BIhUH94hBHHQr7+4jD3KQtDOuooYOCako66ufrSYBYemO8TxLkkd7g9K5UcyuoBbSJSIfYU3hAVDDeeJHWMZ7uMqH1fhB8fWZ8ShIwF/GFfRp53gRkDo1Wa/HOT9sVzBzdVgUXUuj2eshE2LhHO6iulYYpDZYs2gZnffvMqzvtjkuzpROe+G1IfFOlnFCSX8cTKv/YB4eZLXKdodfv46Of/MTbr//t787JdO7SvFDezRq9pmWAzKjPwJMoltpHVU1GyoBD7hbQb7dXZpkLvvolTzU1VK1bgjciSZ9idwTCFgUAthbGOj3+udM+J9stXQJTFhHZuXogweo1T8AYV2gmAX3EzMbg2rCKFpXSGRz7KOQnEGtAWQ5pr4T85qKj6Y0n/QJZDlVaUAmIhuZ1Zbfx/Be+prj+VU+TO89/DFwmzw1xEgUIA6LBRR80vgfooDd/m3kS2VwBUi75ansGjZ1aMNdfczHffckdkBLQue8ORdP8VIp7+EhQQu2+ASfBgdQBuriaJvLova44E95OrHoNQQ6q9rqdqg2gSgAOaoxUoMKzoipLRzl0tftAXg+rRMEopbMY3K5ls0QEjUYGEgNjjEcbg4F1f20wvD4bGp4FeJeeFLZu3gRrDA7928Nv3nGHJZibm0Oeu+UuWZaj0+1gzROruxHBUIiC+wKzPMvx3AMPQP0YJej/lVofPqwx2GbhgucBfI5WDLCvFh5aWIb6xITqTko/I2K6QPeUWG4SKF7vaBcmNCAfJIgC6LbbD3U7HSidu/QbUmX31x6EsfH5OPBZ+7z6zUe++bJ3vvMEKACl+PbFuUNKEa686mp0ez1AKafcYqAwUW8R1QUGS9gyBAApnZtUWKKFgHAJNFrgP37p4sZzXn0vdnnGXqpgkHUWSEzWk3Yx1nzZx37ee/i3z5POQ4DKfLAtmXfy4mj60C/90JvtgqfvgS3WEAvQkEx1BRgHaIvAXPutY6W7Cshbrj8cp64CLVKNZZQ3UsUugnKt49Yh0EMqGz6bXigYPb8eKUTUmiiDcLpueSp6JO50fFpk47pSieckJCrIKW0vjzH7JBy9hJpiivEmgtK6qXyNVXCVgqvY7fZQFCWMFbA1+O8ey5buiGPedowsP2U5+mXh23KGMW/m2Lj6cfzxjze9JgPDI5jQdVcwI2B02h2XtvYrK1nSoKO/ltI/BaVDkBeVq+Cq0HzJNKHTM+j3yidcVz0x2WcSwm2RkWr2qM4YAzxBQB3HRhcoaONKwTj+8MIZrYH7d8ryU058/RveeGKz1Urs2SgEkUBHEY/AgnFxdGy2mpgcH8fS7Zdin712hy0NirJwNlAplEWJZqOBTRs34rJLLt3eGAullXcbqTZkiW0GgQjWabhLYfijg77+C5UDvbWQK796eP4PX3xMsglwWUCYBBmNm7XFuom9dntu+cwj9jS3fXcFSeEzJwRXER2E0EJvexDk2a/8pC3yTtbrb5Zc5sPSlOnbrY2l4wv6V17wcVn5+1mozCkqa1CPZYVZ9y7sKBcpaKIRiKSmndKREulQ8Fn/yuFk5y8EH2aEsonGKMlUDvYp4XUIgcUOK5jwOJX2wksceTQYT3tkONDf+tOqLJUzRApK6VzrCsFo5QrtrLE46sg3Yo8995DWWAv9fuHkml1JSrX20A8kGD84wJFpDZ3lgDBMWaDRaGHHHXbAfvvtjampSbQ7bcezXO1E8MjDD+Gu226/JqapIypSgYrkUrO+nF/gXR0lsaQ7LcF2UWWBWICk7rfBx2yYGSANa0r0y2Jr+Dq+ikVF9FGYoQ4f43sZjr8IVSrTZQgCgnFCIcyw1nrdQ1A+lcpi8OJDDsGLDxlq/L99dDodV8WqFUgTjHHoqDXWwsc/9Tk8+sgDT2SZBhEDDHCSrq9QfOr2yIACDgeNPp26laH2pDEFc885q/RtR57Pz/7bY60GpOSusBRSZrOdzb3tWod+8LLOw1c9g2fuAzLv2qAqwoMtQYf844dta+l2mO2vJM3jELBt0xMyv7G0fGxutrjhvH8WsxHIJgDrA6oJ+kRUpoHBq2EO9n4AqkYKqdr1kbEsBp4Z6Sih+MYiKpqRLScqfpTCFgYUQ8QV1DFjSLGH7gZEUSkqQlrgF4lCSfnEk2C0NAoHAEohV1X2LFbUW2ux9z57udXd/4OHMQbtuY6rjBaBKQyarSZm5tr4+S8uXlsWfWSI1alV/4UFWZYh92tm/qeP8fEpqGa+EAjz7BCO60QajMVIARqavFQAKX0JEDJoTgGI/RgZlkNdi1dcLLAkML2eb8drdg5WygXFYlZsYJV5FeBDzMRVuMiNRSmCsRZcFmg0m5iYmsRPf/YLnP397xELIc+cYq/K1n3RXE2xADH2NULJjFYu/vr0OwaQEYT6KH75+bdlu+37Fm4syYSLAiXmkNG42WjusLvs+Kz82f/w6v4fPns5pAOoln9kAzAzaOzwetidX3KkdGU99cstPKabbKjNJc/keXNp8buzj+Z1t4BUs3ItkGCKwTVkVI/HBAwx0uokzBAEVgW6oLpcBi4XAcBSum8YtYB1VGBBUQ+orfhfMgdBYQY0y7U74hGWibjnpii9iurUEkP+/yG9JozBsj8hUrEkyNOQlKNZr9+HNQZi/T4+1mc5g/EPylV8Bs4jfRVKTpSPx8AX5LKANEErF5/t9fqAOGP526t+jQsvuGBZq9VCFnWyD8haa5HnOdqdDi6++GJsWL8ZeStHWZYoSwNmC2vYw0CPXki59TykQVpBKxWXiUem8JOgswztbhePrnzsPACwpgRzsmETARVcHMLIIydt+KjcooiIQDHOFA+uXBsJ08guRuQUhCO6WEGI94hXwGEVeRiezjQypREhr6ogtRunRb8oIcpl2iYm5gEAzjr7fJz+2U/T3Ow0dJb7GiMFeaqURapw/qoj+ExBKQnABsgmwGuvhdz8nx/DQa/5MkBAKXMgURDi3tq5Vc0Xn3i+euDibXjtfzqkSgrgAsTzoQ5571eNLFaYaz9KmZqApb7tYkO+rX6uXfHgL+wd519BdisoG4PPKSRjSK03MDjnUVmKm8WobP2tg05WiFVUMTU2VUxEKmXmLvLr8MS56GGC4V0Wcotua9W3kUe51odaUkK8wQQQXPbAezpWGLvxMMEvnAzPdUh7aHOa2ihTOgWFJIBItdgxxCQBAMrvDOBQIovjXyeSAka1YZzXvK4PpEAsIGKvaFymSDzqZ8swRQ+kgImJMTSbLVz/hz/gA6ee8vSZ6a1ojk0gCyNRnlBsLJrNJqanp3H657/w9EdXrnxYZS6z5Fwll4Kq0KLA+3/eTar2iYhwUPwiB7ZQyuGNXr8LgGDKEi4wFpRCmKhBYFi1Nqx2Bl0nqjiTaOj60HenuR2kdUDHCV5rrOVL9ZPJi/eFfjhmDEvX+70uWMSVSwuir+3WoQiazSbGJ6ou/Ommm3HuuRds/skFP160dcsGtFpNsDAMp8qFq86mJt2Pa1DJjLT6QzeGjwkiIABaw1z3la9ke7zopLKxbCGkY1BQG8pmskXuLXeYfxi94AMfwVUPfomK9aB8Emzm0NrvQ3vYxc8/hLv9J8hyD6Qy6WMzC9sxbqH7p7OXy/RdULoZ5bnqbdWnNNsRwVYM4FIcb0S10fUOFwc6SfUcAMxc1Ifq3jCsX4kFKGKAwt4UXrkMUpaSc+IRJkk1R3EMAZXEnteAl9LB4DkZAbtlBC7eVluyV71Npy7Of+Dg0B+BMMrwPaOiAxGh1Wo4ejL7Cl5AfKyoVqsWwAAhARDe3Qqy7WOWSlU06czN4t/OPhf/+q1/2W3FvfeuzJsTKEqDzFruxr5L2AbSaSwwl4YtGtA+lRpcAqkEN2kw1EwKLMAEhvV8ELbi4zioqtI31KTU8UlakDQ41yOPUVDWz0NMPCVGpg5pvcIkAilgy5bNKEpGo5Ej1PKIh4XMDA7gnoP7w3jaTjuh2+mCLUPrDAK3aZaIczfvf+BB3HjDn9DrW9xx+x3d3173m4PvvP3OW5UmtMbGIVyC2TNaEJQI1wcHGph4mBjixzaEb2jwTYIchAHVgmy5AXTjlR/SL/o/Z1pSmgx3QaRIqYasaV+b73nEctx+1pdk1TUQ24We2A+y/7EfNeXkHIrpaaX1mFgquGc2jm8/9ory1t9/wj540SNEXYBacAE6IJrPdGBJhylhhGq0AwYmjfGF14iKAiIBrJWOBIFicZ64AMYywmI/EYH2ljmgXUnI5NfBRtpWdJPYrFIUT7NYjwhQ6arwUdXReZyFETYStY8DVAiJFvHyBoG1tm+tB2WhvF4RSAnmZtuYm+uhNdFEiK+CnLvEPgGTJnREIogBQNCKQDqD9rsFCAGzs3O4/777ccstt+C63/3u9N///rpPTs/MoNGcRFmWAAEZi1Q5Kw+ZgtabmBzfpdVsrpqcmkSv20fp1yLVi6VDFJxqPFxLrSYEdquO3WBYLEIsH341svgJd5w0LGHpmdGWmiprBm8VxKEIl1IN/U8su3AcjaYMX/3qv+BPf/rDcVqrFhFpcQUDIiLW/bnPoSVmW7zq1a/7yT999IPo9fqw7AK5FcoD8jzH1772rYPuXXHXH3s9C0iJ1lgTRARjDJjJZ6EsakMaCUBGap4hma0fKQenY6cKzSgNc+M/X6Sf8aJjeN5ee4rpdkgUa03jKHiGrC4n9z/1c+2ND37KzN6P+Yd84tj2xNN24W5vjbJZQUQNMtTXmsfUnDzeu/XrX5b+Q6BsEL0k3ZGgKwZDlrWRDX0avo6covQoIKhYa23HGTdALAW9g7IwYJaCfHGp8lYugqOITCw0NEJ2K2QggyITcq6HIngrr6HgA+i+X0RVf7TWIHILK+NoAwgbOdpEDAaoEJWOb8vasmfKMp5z4Q4NYwTn/PB8/Pyinx43MTW1hzE8x+LXgMTdEMQKczG4jx0FaSZotwyIGqRUTiDqdDuPr1m95srHHntsxtoSWZah2RxDYQoE3oob0saV0aH7IiClcx3TVDpqt3QCPQmHPg9NPgLkVW4Cs5DyJvdcyzDWwFibPC1opWp/DJIq3Rjy7ojGI7U8grAEPnByWLkRhsox/uL2sRF2PvKtd97+qeuu++15g1P6VMdNf77l31tTU7L85Heh1/PL17WGIhfF33WXnfHlL3/xD+9fvnzv++69597xeYtgiza4LMEMj16SMaeQjhIXIv6f0jix5gOs4b+IRiBpIe5h4l4MoBrgzsNQt1x1WnbILt83pDMqeQasRJPKeVNxW7bLy49VS1//rdb41vVql1ccLUVzVpXdjoZSVKKDspyd2HHea9p/OOd4XvfrJO6VVo26/g8BsJF9T7+P2mj4RnEI2gfH4lit2NKGZS4MQBR6vRI7LNsRjWZzkQg/2Gy2YHVed9P8YwkANIXCPESKxZot53KQIjRbLbRnp7Fk8eK9dtpppzhOAXmXRKCzBgTKoV9VhRDi8EfE1mqFnFHxuffOIDsFw8wz1te4WBYYa6H98+66566Vv7vuN38VT/+lB+kGxiemAGG32bd4uSYgU0o14ui8X0WkUBqD9Ru33NRuz6EsSxSmdGldqVyaYGKj9venoiZOGMqzlHMokp34K4QrXpAywLsgErIp0TcdZrDq45MwZeUThYVOvs26gBLB5/GB8anJ3bXOQFkL8LvaSYCllXZzY1cKWisU/R4+/fF/olazJe8+8Ti02x2Q8qhJBP2iwKGH/g1+dN6597zlrcftdv+9d6xstMZ8SnPESvE4VsKQPnmqYY44/qtbY6MEQDVg7/7mreO7vew3smj/A630rc8oTZJRnX5XVjf2eefyhmnZbn98I5MVJRmUspn07dZsgnaQ9WuuN/eeeS3MLKDHEPc3/gt6NIROnyLWNIoAgqBn3VWz0zO3d7udly2YNx+WLbIsQ3uujZ122hEnnHjSnz764Q/T9JYt0Fr5bCEh1kcpFaeBkPJ8wrfsxFxnCjPT09Aqx1uPOfae/fbbG3NzXbdq2bJHLoT16zcAYkC6CesFEYRq29lkLLW5qaHPCh1Fl9BfajyaYcuwlmGNW+IzMTW+q9YZxqe2Qdl3UZG4Ep28/MVwQRK0FlRb3iCgPK8AQimLMPr9Agph46cqdlZTMMoX6ShFUEpj8ZIlB/W67V8qnaHw62TSvzBsRQqZctYa2m/uE8FVEE5UxIwxDY47wWVZhtmZGfS6He9eBBQTovVO2IL7VhFbUAVZUiaU+L9zvAlCPsAVkgcDd0A5ITeF2WKtAUkB7c8Jp5mC0JhyPq4QWq0muu02PvaRD9HCySk5+ug3oN3uANr58GwZW6enceABz8LZP/jew0cfdSStXvUIlHcfaiHtZLwjWC4ZNyI9a+cTZevgdQq+K4GtbesAcsqUMkj/UZg/n/cZfein/y+ryQaMmaOS2gQQz9iHsqnd9rAWhS3MJqU5JwhUiQ6XxVxrcuEz29d+6QievRMgndAsINiqPfEddEPwBiadS6IatYPwj0Qx4Vq/ZUOIgaxY8cAZa1Y/ccqyZcucoGfO3Zlrd3DccW+DViTnnnvOEY8/vupyALGq2k2vgiI1Sc4DglIqJ6UyIqW1phZAsJZ7pTEda83WZdvveMRRR7350mOPPRZsGUVRIs80ytJganIS7U4X962450aA3e5+Rd+hGalMMBJjU4svheklx3eU0DUoJ7fVilN+1jKMBTLDkAx+50WDot8Dl32ABEwaVdbMG9DBFfyxmXRz+SDHYYcEdysjYS9PwkyRylwfGQoutVz2S8yfNx/f+PoZV83OzIE0wRrjQUBQFlVpvlIKWrltJyn5HaCYBUgIGATepcTZa0yCFYsLL7zwVz/50XmHZ9r9jkxclZVmO+qiWA0WiazEI3WRUs3vrI5wmqURv5hTVZU4PkBWWa+U3cmlaj3BrTVotMYxMz2ND3zgFNpmwZQc9spXYHauDa0VFIBGlmPzlq045IXPxdk/OFve+pa30qaNT4B0w6WLa7/9QQliGiFQEaID6VqelASUXBKDgqP2LaaBZ+kG+o+dNze29o3XqiUHHyJirFgpFbPVgJKiu0aEWEELWErKMCZdWd9c2NqneOz2n5WP/PtjYP/7RrAY3CCpNlUS1Y/7EBUj1fpdG3oNSQZaBIPnZo+tQZa3sHLlg6vve+AhPP8FzwFIYHwCo98voZXC29/xdhx8yEGXrV+/3mUERaB12PIhLKJ0PKDIGxTyqN0bvNJalGWJJUu2w+67PxNsLOZm29Bagxkwpau9euChh3HnXXd+GIB3i13/K/BSZaRGItJEBiKvUMr/7LZfYMAyQVsXe6JEJ4cNJin6EwkhvfJy+G9EJXHKO4ko1FB3anwBZKSQh0lz9R6Efuk2GTr4hS98Kpd39Hd/5cF+L1CQ4KYbrj8McMvAmQ3IhoBsUqM5JCBPAZgFEa1UeigsE3CEFl+pDFK+4BpIfrDGlVNL2MAngQWk4Eq6FCzIxZKlxNjYGNasWYX3vOc9C374w3O3vvilB2F6ZsYVWIkgUwrr12/A4Yf+Lb77ne/KMcceS/3eLIT8JuOeYeqBaCQKYtSa8TRVEQoKa7cNUCygh0H6+XqJLAOKzShuPvMM9fI992EsBJt+WwmBhEjY7XBBELdkqKAZwIIakwu7t3/zc9x91C0HIBUFpVLzA2iqBv0H3qaxCSBuWzk0lpiiTmt5DRqNFjrtaVx77TW3vOaIVx2YN3N0Oz3kzSYyytDt9lGWFnvusReete8+w4T6Kw9jgJmZGZSmcAuEGSgNw1j3O1y33HwL7r3n7t9leQPWGm+ow4KsEEROyDN0SHKeELfP8AeLVArGCoxySEYrgQRIx/Arn11wWyjZvyb+yKF/fq0/QxVHEWhEZgrR6CSln1VqgqK7InBR9vXrNgPkNv2OWR4GhB3M1ErgaunEbwJaUSeyTs2kVv0LkM1Y9/xm3sDMlpkOAIQVnLXxpKUJgzwZGkuseXXhAMwMG/6IuE11fA0BwSMWAigxC+zrnGsuclRFTsGEQqmMLKzpY2JyHh5a+eD0u046abfvfPvbD7/kbw7G5s1bYnGV1hrr1m/AG9/4Wjyx7gx53/vfR0pKsNYIvxQYUVuExxU9oqKs6VZvcRPBlRETEAwDJU+KpCJAxAUgkY3BPvFz0GNv+g/s/NojhVGysT2G0mF2BQAUZdwuVze3nXxu755ffIXXXup4RjUR4gODJqCWRK/N5YBLFK8R1K1ZclV0q6j2KAWCcIE8b+DSSy56zqEvf7m89a1HodvtotftodFsIMsbEGFs2bwVRIxqG6NQ3s5gXzYQnDuC9vYlEbcYpCfozMXlrLEoC4N+32C33ZbiwQcfwVnfOevV3U4brbEJlMa41EIaYwnzlXgtbkAD2NQRHq4gTkXaMDiuzLeWoRTHXx+FX9TsQhNeZgl1HoqoLFAxkZ8aHyV9TY8Y06keqoSlYGaURR/9fg/9vnsNKWm/cQSAUA3rhF/7LSdDvEaTgiaCpmoZFlV3Jf/CT7ISMn9f5u8t2VY1OXiSY6RFHv5ytGdRLV2EYfR7fbfXsLGw1sKUJYqigGXTr57i/2JMRCXvE1rDyaVloCxLjE/Ox70r7lx50rvfteu11/4n5s+fj7Is0e12UBR9mKLEqsdW4x3HH4NPfvzjYpnd1pFJceJQOWcqZINjG5bi0RckFnDwkoqvvEYnC3vbGZeorSvvEVal7ZmNtpBpLs0MlzwrpZnldrk6y9U8am9YVd5zxlVSbgCo4RevCmI9Dw3Q/0mQZxh6HawkyPEvOIJYGGOgVIZNmzbitNM+/bSrf3k1li5djHlT42BTouz3YUvjvSEVtyJQSvuYYoaMVHSHHO/Gofi/sDzE1XiZskTfl+WPjzex29OX4sGHH8Up/3jq52+44fdX6LwBY6x3z71xCwFWT50g4DUjG3gPygX1FCo+DLbTuvVARVGg1++i3++iKAp0+z30er3V7qo0C5V+HqReaHOQ/zHwGnYD9OcGahSzsfGxnZVSmJo3BaU1wCF16y0gVStb0+Bq+I1p1+6AdfEB0Zo1CtHnoBl9oNgYE38Hd/78yUXVIJPeessflWaNzxI/cjDDFIXIaYE0pskAlixejHnz5mFywvo1GwxSGq1WY3siV5nMwScVVPtkoKptILg6GxAQftNJK8CWBSYmpnDvirsfOfnkd+969vfOXvnCFz0P/X4PgPvpDFu6EuJPf+qjGBtvyhlnfJU2bVwPeEYerWQpUiilrTspUUEM3ltdQvGymNYlYOhnQsSCdBMy+yfYFVf/QO37tlOkqedDoIi0dr9GIVAoRc9fsHv35q9/mGdvdcwmvuy+xpQC9xvWiG4eAWH7+3qyJJnOkYgmPWoAtUJ+NhSFSolmq4X77lux6n3vf9+Op55yyuNvOPJN2G7ptk/11OpgvzGTD5gMGy7HVNa70ooIOne/0Llm7TpcceEvcdZ3zjr+uut+fS75dTssxpMvbDQ+9NAqexVKMQKXJzLoZpnjuUajhQULF2BqqomlSxciz3I0mg0Ya9BoNbavmglU5VpQPamLrgOo0Ccvh7FzMspcVPwJAFmv11/72KrVmJ6eRp41YNlZ8yot7a9UiEsA4g+7o1oMFkCzqy1J1hZJ9X0IkLlVnj5SzQBIYMVgdm6uAzjmcJlNivc/CXb23z25VaxlOaXyNxmMhx9bg27JUCDoLIMIw7JBv7CbiLz7E7clSKLowWsJE09cQ4zCAlGMsrDIG+NYseLuR9773vc87zOnf/6mXZ++CwxbKCJX3Wzc8ouj33IU1j6xnr/z7TNV0e8BlEUWSkYTZz7ubJaQYhRqHaRVSo8YKw0GBKn74plXKfCj31+ntt39t7Rg733BxgpLSZqbbKWn8sa8/pqbLy1XnbMG3HGB3QR+jPiBxtFHRE7J59iPwXdP9aSwmNUxHxFgrUWrNYYV969YvfwDp9JlV15xxsEv+ZsP7Lvfvli4zTZo5Dm0dr+bFH5tojKULgFixSaZxKQPQT/D/Vpkt9/BuifWYcXdK3DTn//8nWuuvubdc7NbQSpz4mANiJSvYAlJDAzMtZ8JcQqmYrmEkCH7o6LqQVn28cDKlbj1nhWY3jqNZt5Aa6wJYw3Wb9x4NYCqZCDwAAUsG3ZtHMYpsb0Ri1JHTE7sPwDQdtvtiP333+/D7XZnJSnK2doesy1KazvCXFZbakKBSPn9NbRykESTc/yViFiBiLCUPkfjyxwFvtwRPrIEUpST2+2dFbmfWiSFfPXqNZc+/tjjUFkWLUYkbN1kJy+D2ZNkcEGbeqjurLZTjIqAA57z3CMmpyZ2V0o3dKYnIWJZ2Nxx+12nrV+/EaIoMiqA4fBOlExJZMOhGhWGDle9WRZ97LLbM+Yv22HZq1jEEIhE2BIANrbTHB/bQQvj+j/e+P2i6AGk/Uh84LIKlfllKN7e1EzqINQdPshza1qZFB4s6X0hTUlw2zFMvgA0trP/bEHKLf+grAVur4B0VoCQ7saHiFpr6GKg1WpQoc10GkeMYUi+KfkqzJVTDtGWeiSQaY3S9ON2IzvtvBvmL5h/QJ5lE1rrMaV0QynVIIL2BGa3zz1bFmuEuUwZUUDiowKkiDQLm16/v3Hjhg23PbFmTaRBo9FEUZQOIfu6hSrdXi1+HKVAw/TWFYyqKBiCg+x+X33nXXZdvHDbRc8t+sUmrfVY3sgXEIl++MEHL9qwbh2IlFcywbXxGTNQ5I3Kig2QfqgmJ34R+1bPXAL/D6G1bS5cyUW0AAAAAElFTkSuQmCC"); -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .loader.is-word .loader__sweep{animation:ldSweep 1.7s .5s var(--ease) forwards} @keyframes ldSweep{to{transform:translateX(135%)}} .loader__tag{display:flex;align-items:center;gap:13px;margin:0;font-size:10.5px;letter-spacing:.34em; text-transform:uppercase;color:rgba(192,216,246,.62);opacity:0;transform:translateY(9px); transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)} .loader.is-tag .loader__tag{opacity:1;transform:none} .loader__tag em{width:4px;height:4px;border-radius:50%;background:rgba(47,140,255,.9);box-shadow:0 0 10px rgba(47,140,255,.85)} .loader__bar{width:186px;height:1px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;transition:opacity .6s var(--ease)} .loader.is-ready .loader__bar{opacity:1} .loader__bar i{display:block;height:100%;width:0;box-shadow:0 0 12px rgba(47,140,255,.85); background:linear-gradient(90deg,rgba(47,140,255,.15),#5db4ff 60%,#eaf5ff)} .loader.is-ready .loader__bar i{animation:ldBar 2.85s var(--ease-out) forwards} @keyframes ldBar{0%{width:0}50%{width:58%}100%{width:100%}} @media (max-width:560px){ .loader__mark{width:56px} .loader__lockup{gap:14px} .loader__word img{height:23px} .loader__tag{font-size:8.5px;letter-spacing:.24em;gap:9px} .loader__bar{width:140px} .loader__rings i{width:340px;height:340px;margin:-170px 0 0 -170px} .logo-mark--lg{width:44px;height:44px} } /* ---------- 4. Topbar & Nav ---------- */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:80;height:34px; background:#0a1120;border-bottom:1px solid rgba(255,255,255,.06); overflow:visible; transition:transform .45s var(--ease),opacity .35s; } .topbar.is-hidden{transform:translateY(-100%);opacity:0} .topbar__in{width:min(1360px,100% - 40px);margin-inline:auto;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11.5px;color:rgba(255,255,255,.72)} .topbar__promo{display:inline-flex;align-items:center;gap:8px;transition:color .25s} .topbar__promo:hover{color:#fff} .pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(30,123,255,.7);animation:pulseDot 2.2s infinite} @keyframes pulseDot{70%{box-shadow:0 0 0 7px rgba(30,123,255,0)}100%{box-shadow:0 0 0 0 rgba(30,123,255,0)}} .topbar__right{display:flex;align-items:center;gap:18px} .topbar__right a:hover{color:#fff} .lang{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:inherit} .nav{position:fixed;top:34px;left:0;right:0;z-index:70;transition:top .45s var(--ease),padding .45s var(--ease)} .nav.is-pill{top:12px} .topbar.is-hidden ~ .nav{top:12px} .nav__in{ width:min(1360px,100% - 40px);margin-inline:auto;height:64px; display:flex;align-items:center;gap:26px;padding:0 6px; border:1px solid transparent;border-radius:0;background:transparent; transition:width .6s var(--ease),height .45s var(--ease),background .45s,border-color .45s, border-radius .5s var(--ease),padding .45s var(--ease),box-shadow .45s,backdrop-filter .45s; } .nav.is-pill .nav__in{ width:min(720px,100% - 32px);height:52px;padding:0 6px 0 6px; background:rgba(10,17,32,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-color:var(--line);border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.5);gap:0; } .brand{display:flex;align-items:center;gap:10px;flex:none;padding-left:8px} .brand__logo{height:34px;width:auto;flex:none;transition:height .45s var(--ease),filter .45s} .brand__wordmark{height:15px;width:auto;max-width:190px;transition:max-width .5s var(--ease),opacity .3s,margin .5s var(--ease)} .nav.is-pill .brand{padding-left:2px} .nav.is-pill .brand__wordmark{max-width:0;opacity:0;margin-left:-4px} .nav.is-pill .brand__logo{height:30px;filter:drop-shadow(0 4px 14px rgba(30,123,255,.45))} .brand--footer{padding-left:0} .footer__logo{width:184px;height:auto} .mobile-menu__logo{width:126px;height:auto;margin:0 auto 24px} .nav__links{display:flex;align-items:center;gap:4px;margin-inline:auto} .nav__link{ display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px; font-size:13.5px;color:rgba(255,255,255,.86);transition:background .25s,color .25s; } .nav__link:hover{background:rgba(255,255,255,.08);color:#fff} .nav__cta{display:flex;align-items:center;gap:8px;flex:none} .nav.is-pill .nav__cta .btn--ghost{display:none} .nav.is-pill .nav__cta .btn--brand{background:#fff;color:#111;box-shadow:none;height:38px;padding:0 18px} .nav.is-pill .nav__cta .btn--brand:hover{background:#eef3fa;transform:none} .burger{display:none;width:40px;height:40px;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:5px} .burger i{width:18px;height:1.6px;background:#fff;transition:transform .3s var(--ease),opacity .2s} .burger.is-open i:nth-child(1){transform:translateY(3.3px) rotate(45deg)} .burger.is-open i:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0 0 auto;top:0;z-index:65;padding:110px 24px 32px;display:none;flex-direction:column;gap:6px; background:rgba(6,10,20,.96);backdrop-filter:blur(20px);transform:translateY(-100%);transition:transform .5s var(--ease) } .mobile-menu.is-open{transform:none} .mobile-menu a{padding:14px 4px;font-size:18px;border-bottom:1px solid var(--line)} .mobile-menu .btn{margin-top:18px;border-bottom:0} /* ---------- 5. Hero + circuit ---------- */ .hero{position:relative;min-height:100svh;padding:170px 0 0;overflow:hidden;isolation:isolate} .hero__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 0%,#0d1830 0%,#080f1e 45%,#05080f 100%)} .hero__grid{ position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:132px 132px; -webkit-mask-image:radial-gradient(90% 70% at 50% 20%,#000 30%,transparent 100%); mask-image:radial-gradient(90% 70% at 50% 20%,#000 30%,transparent 100%); } .beam{position:absolute;transform-origin:top right;filter:blur(14px);opacity:.85;animation:beamPulse 6s ease-in-out infinite} .beam--1{top:-40px;right:-150px;width:1150px;height:170px;border-radius:50%; background:linear-gradient(268deg,rgba(255,255,255,.95) 0%,rgba(140,200,255,.85) 16%,rgba(45,140,255,.45) 42%,rgba(25,110,250,.12) 66%,transparent 82%); transform:rotate(29deg);filter:blur(26px)} .beam--2{top:10px;right:-110px;width:950px;height:46px;border-radius:50%; background:linear-gradient(268deg,rgba(255,255,255,1) 0%,rgba(165,215,255,.9) 14%,rgba(60,155,255,.45) 40%,transparent 74%); transform:rotate(32deg);filter:blur(7px);animation-delay:-2s} .beam--3{top:-320px;right:-300px;width:820px;height:820px;border-radius:50%;filter:blur(80px); background:radial-gradient(circle,rgba(60,155,255,.5),rgba(30,123,255,.18) 45%,transparent 68%);animation-delay:-3.5s} @keyframes beamPulse{0%,100%{opacity:.7}50%{opacity:1}} .hero__vignette{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 42%,transparent 40%,rgba(0,0,0,.55) 100%)} .hero__content{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center} .hero__badge{background:rgba(255,255,255,.08)} .hero__title{ margin:22px 0 18px;font-size:clamp(40px,7.2vw,88px);line-height:1.02;letter-spacing:-.035em;font-weight:600; background:linear-gradient(180deg,#fff 40%,#cfe0f5);-webkit-background-clip:text;background-clip:text;color:transparent; } .hero__sub{max-width:560px;color:rgba(255,255,255,.62);font-size:15.5px;line-height:1.55} .hero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center} [data-load]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)} body.is-loaded [data-load]{opacity:1;transform:none} body.is-loaded [data-load="1"]{transition-delay:.05s} body.is-loaded [data-load="2"]{transition-delay:.14s} body.is-loaded [data-load="3"]{transition-delay:.24s} body.is-loaded [data-load="4"]{transition-delay:.34s} body.is-loaded [data-load="5"]{transition-delay:.42s} .circuit{position:relative;height:min(58vh,470px);margin-top:-24px} .circuit__svg{position:absolute;inset:0;width:100%;height:100%} .trace{fill:none;stroke:rgba(255,255,255,.085);stroke-width:1.1} .pulse{fill:none;stroke:#1f74f0;stroke-width:1.8;stroke-linecap:round; stroke-dasharray:80 1000;stroke-dashoffset:1080; animation:flow var(--dur,4s) linear infinite var(--delay,0s)} @keyframes flow{to{stroke-dashoffset:0}} .pulse--down{stroke-width:2.4;stroke-dasharray:40 1000;stroke-dashoffset:1040} .chip{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:132px;height:132px;border-radius:30px;display:grid;place-items:center; background:linear-gradient(158deg,#17283f 0%,#0c1526 46%,#070d1a 100%); border:1px solid rgba(125,180,255,.16); box-shadow:0 0 0 10px rgba(120,180,255,.022),0 28px 70px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -22px 40px rgba(4,10,22,.6); animation:chipGlow 6s ease-in-out infinite; } @keyframes chipGlow{ 0%,100%{box-shadow:0 0 0 10px rgba(120,180,255,.02),0 28px 70px rgba(0,0,0,.65),0 0 40px rgba(45,140,255,.10),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -22px 40px rgba(4,10,22,.6)} 50%{box-shadow:0 0 0 10px rgba(120,180,255,.035),0 28px 70px rgba(0,0,0,.65),0 0 74px rgba(45,140,255,.22),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -22px 40px rgba(4,10,22,.55)}} .chip__bezel{position:absolute;inset:9px;border-radius:22px;pointer-events:none;border:1px solid rgba(140,195,255,.1); background:radial-gradient(85% 70% at 50% 12%,rgba(120,180,255,.08),transparent 68%)} .chip__mark{position:relative;z-index:2;width:76px;height:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(45,140,255,.3))} .mk__s{fill:url(#mkS)} .mk__b{fill:url(#mkB)} .mk__sheen path{fill:#fff;opacity:.9} .mk-sheen-rect{animation:mkSheen 7.5s var(--ease) infinite} @keyframes mkSheen{0%,18%{transform:translateX(0)}62%,100%{transform:translateX(340px)}} .chip__hit{position:absolute;inset:-12px;border-radius:34px;pointer-events:none;opacity:0;z-index:3;mix-blend-mode:screen; background:radial-gradient(62% 62% at 50% 50%,rgba(140,205,255,.48),rgba(30,123,255,.15) 55%,transparent 76%); border:1px solid rgba(150,205,255,.32); box-shadow:0 0 62px rgba(45,140,255,.5),inset 0 0 30px rgba(120,195,255,.28); animation:chipHit var(--dur,5s) linear infinite var(--delay,0s)} @keyframes chipHit{0%{opacity:.5}12%{opacity:0}86%{opacity:0}95%{opacity:1}100%{opacity:.5}} .chip__pins{position:absolute;display:flex;gap:9px} .chip__pins i{background:rgba(150,195,255,.26);border-radius:2px;display:block;box-shadow:0 0 7px rgba(45,140,255,.25)} .chip__pins--top,.chip__pins--bottom{left:50%;transform:translateX(-50%)} .chip__pins--top{top:-11px}.chip__pins--bottom{bottom:-11px} .chip__pins--top i,.chip__pins--bottom i{width:5px;height:11px} .chip__pins--left,.chip__pins--right{top:50%;transform:translateY(-50%);flex-direction:column} .chip__pins--left{left:-11px}.chip__pins--right{right:-11px} .chip__pins--left i,.chip__pins--right i{width:11px;height:5px} .chip__pins--bottom i:nth-child(2),.chip__pins--bottom i:nth-child(3){background:var(--brand-2);box-shadow:0 0 10px rgba(55,150,255,.9)} .node{ position:absolute;width:80px;height:80px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; background:linear-gradient(158deg,rgba(23,40,68,.92),rgba(8,14,28,.92)); border:1px solid rgba(120,180,255,.13); box-shadow:0 18px 46px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -16px 30px rgba(5,11,24,.55); transition:transform .5s var(--ease),border-color .4s;will-change:transform} .node::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(90% 70% at 50% 0%,rgba(140,195,255,.13),transparent 62%)} .node__ico{position:relative;z-index:2;width:26px;height:26px;fill:none;stroke:#9dc2ee;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round; animation:icoFire var(--dur,5s) linear infinite var(--delay,0s)} @keyframes icoFire{0%{stroke:#eaf5ff;filter:drop-shadow(0 0 9px rgba(130,200,255,.9))}20%{stroke:#9dc2ee;filter:none}100%{stroke:#9dc2ee;filter:none}} .node__label{position:relative;z-index:2;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(190,214,240,.58)} .node__glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(72% 72% at 50% 50%,rgba(80,170,255,.38),rgba(30,123,255,.1) 60%,transparent 78%); border:1px solid rgba(140,200,255,.45); box-shadow:0 0 36px rgba(45,140,255,.5),inset 0 0 20px rgba(110,190,255,.3); animation:nodeFire var(--dur,5s) linear infinite var(--delay,0s)} @keyframes nodeFire{0%{opacity:1}18%{opacity:0}100%{opacity:0}} .node--a{left:8%;top:14%} .node--b{left:1%;top:44%} .node--c{left:6%;top:70%} .node--d{right:8%;top:14%} .node--e{right:1%;top:44%} .node--f{right:6%;top:70%} /* ---------- 5b. ERVUP : identite lumineuse du hero ---------- */ .ervup-word{position:absolute;left:50%;top:clamp(86px,13.5vh,172px);width:min(1240px,94vw);transform:translateX(-50%);pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.55) 76%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.55) 76%,rgba(0,0,0,0) 100%)} .hero__content::before{content:"";position:absolute;left:50%;top:-5%;width:min(1120px,97vw);height:114%;transform:translateX(-50%); background:radial-gradient(56% 44% at 50% 40%,rgba(4,8,18,.74),rgba(4,8,18,.44) 54%,transparent 78%); z-index:-1;pointer-events:none} .ervup-word::before{content:"";position:absolute;left:50%;top:48%;width:80%;height:135%;transform:translate(-50%,-50%); background:radial-gradient(52% 50% at 50% 50%,rgba(30,110,255,.24),rgba(18,70,180,.1) 48%,transparent 74%); filter:blur(28px);opacity:.14;animation:ervHalo 18s var(--ease) infinite} .ervup-word svg{width:100%;height:auto;display:block;overflow:visible} .erv-txt{font-family:var(--font);font-size:300px;font-weight:800;letter-spacing:.05em;text-anchor:middle} .erv-base{fill:none;stroke:rgba(150,200,255,.13);stroke-width:1.5} .erv-glow{fill:url(#ervFill);opacity:.05;animation:ervCycle 18s var(--ease) infinite; filter:drop-shadow(0 0 36px rgba(30,120,255,.35))} .erv-light{fill:#eaf5ff;filter:drop-shadow(0 0 18px rgba(120,190,255,.85))} .erv-sweep{animation:ervSweep 18s var(--ease-out) infinite} @keyframes ervCycle{0%,6%{opacity:.05}22%{opacity:.14}42%{opacity:.34}54%{opacity:.42}72%{opacity:.17}90%,100%{opacity:.05}} @keyframes ervSweep{0%{transform:translateX(-40px)}55%,100%{transform:translateX(2080px)}} @keyframes ervHalo{0%,100%{opacity:.1}52%{opacity:.4}} @media (max-width:900px){.ervup-word{top:clamp(96px,13vh,158px);width:92vw}.erv-base{stroke-width:1.1}} @media (max-width:560px){ .brand__wordmark{display:none} .nav__in,.nav.is-pill .nav__in{height:52px} .ervup-word{top:116px;width:86vw} .erv-glow{animation-name:ervCycleSm} .hero__content::before{background:radial-gradient(70% 40% at 50% 38%,rgba(4,8,18,.8),rgba(4,8,18,.5) 58%,transparent 82%)} } @keyframes ervCycleSm{0%,6%{opacity:.04}42%{opacity:.28}54%{opacity:.32}72%{opacity:.14}90%,100%{opacity:.04}} html.qa .erv-glow{animation:none;opacity:.4} html.qa .erv-sweep{animation:none;transform:translateX(820px)} html.qa .ervup-word::before{animation:none;opacity:.36} @media (prefers-reduced-motion:reduce){ .erv-glow,.erv-sweep,.ervup-word::before{animation:none} .erv-glow{opacity:.3}.erv-sweep{transform:translateX(820px)}.ervup-word::before{opacity:.3} } /* ---------- 6. Light section : device ---------- */ .sec--light .h2{color:var(--ink)} .tabs{display:flex;justify-content:center;gap:6px;margin-bottom:26px} .tab{ display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px; font-size:13px;font-weight:500;color:var(--ink-muted);transition:background .3s,color .3s,box-shadow .3s; } .tab .i-spark{width:13px;height:13px;fill:var(--brand)} .tab.is-active{background:#0c1526;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)} .device__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:stretch;margin-top:48px} .visual{ position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;min-height:360px; background:radial-gradient(120% 90% at 78% 8%,#5db4ff 0%,#12469f 22%,#0c1c3c 52%,#060d1c 78%,#04070e 100%); display:flex;align-items:flex-end;padding:28px; } .visual figcaption{position:relative;color:#fff;font-size:19px;font-weight:500;line-height:1.35;letter-spacing:-.01em} .visual__streak{position:absolute;top:-40px;right:-60px;width:420px;height:34px;border-radius:50%;transform:rotate(38deg); background:linear-gradient(260deg,#fff,rgba(150,205,255,.8) 40%,transparent 75%);filter:blur(6px);animation:beamPulse 5s ease-in-out infinite} .visual__spark{position:absolute;top:44%;left:24%;width:2px;height:34px;background:linear-gradient(#fff,transparent);opacity:.6;animation:sparkFall 4.5s linear infinite} .visual__spark--2{left:62%;top:26%;height:22px;animation-delay:-2.2s;opacity:.4} @keyframes sparkFall{0%{transform:translate(0,-30px);opacity:0}30%{opacity:.7}100%{transform:translate(-40px,120px);opacity:0}} .device__text{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:8px 0;min-width:0} .device__text .muted{font-size:14.5px;max-width:46ch} .marquee{overflow:hidden;min-width:0;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee__track{display:flex;gap:12px;width:max-content;animation:scrollX 26s linear infinite} .marquee--rev .marquee__track{animation-direction:reverse;animation-duration:32s} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes scrollX{to{transform:translateX(-50%)}} .tag{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px;border-radius:999px; background:var(--light-2);border:1px solid #e6ebf2;font-size:13.5px;color:#3a3936;white-space:nowrap} .tag__ico{width:15px;height:15px;border-radius:5px;display:block} .t-brand{background:linear-gradient(140deg,#79c2ff,#1e7bff)} .t-violet{background:linear-gradient(140deg,#9ccffa,#2f8cff)} .t-blue{background:linear-gradient(140deg,#7fb7f5,#2783de)} .t-green{background:linear-gradient(140deg,#8fd6ac,#46a171)} /* ---------- 7. Bento ---------- */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:12px} .card{ position:relative;grid-column:span 2;min-height:260px;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(180deg,var(--card),#0b1220);border:1px solid var(--line); display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:26px; transition:transform .5s var(--ease),border-color .4s,opacity .8s var(--ease-out) var(--d,0s); } .card--wide{grid-column:span 3;min-height:300px} .card::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(80,170,255,.16),transparent 65%); } .card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.17)} .card:hover::before{opacity:1} .card__body{position:relative;z-index:2;max-width:44ch} .card h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px} .card p{font-size:14px;line-height:1.5;color:var(--muted)} .card__art{position:relative;flex:1;min-height:110px} .art-globe{overflow:hidden} .mini-globe{ position:absolute;left:50%;bottom:-140px;transform:translateX(-50%);width:330px;height:330px;border-radius:50%; background:radial-gradient(circle at 50% 35%,#2a1b3f 0%,#160f22 55%,#0a0810 100%); box-shadow:0 0 70px 12px rgba(45,140,255,.35),inset -18px -24px 60px rgba(0,0,0,.7); } .mini-globe::after{ content:"";position:absolute;inset:0;border-radius:50%; background-image:radial-gradient(rgba(255,255,255,.55) 1.1px,transparent 1.2px); background-size:11px 11px; -webkit-mask-image:radial-gradient(circle at 42% 34%,#000 26%,transparent 30%),radial-gradient(circle at 66% 52%,#000 18%,transparent 22%),radial-gradient(circle at 30% 62%,#000 15%,transparent 19%); mask-image:radial-gradient(circle at 42% 34%,#000 26%,transparent 30%),radial-gradient(circle at 66% 52%,#000 18%,transparent 22%),radial-gradient(circle at 30% 62%,#000 15%,transparent 19%); animation:spinGlobe 40s linear infinite; } @keyframes spinGlobe{to{background-position:-330px 0}} .art-rings{display:grid;place-items:center;min-height:150px} .ring{position:absolute;width:110px;height:110px;border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:ringPulse 3.6s ease-out infinite} .ring--2{animation-delay:1.2s}.ring--3{animation-delay:2.4s} @keyframes ringPulse{0%{transform:scale(.6);opacity:0}40%{opacity:.9}100%{transform:scale(1.9);opacity:0}} .art-chip{position:relative;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:16px;font-weight:600; background:linear-gradient(160deg,#2b2724,#141414);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 30px rgba(45,140,255,.22)} .art-shield{display:grid;place-items:center} .art-shield svg{width:96px;height:96px;fill:none;stroke:rgba(255,255,255,.35);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 22px rgba(45,140,255,.4))} .art-shield svg path:last-child{stroke:var(--brand-2)} .art-cubes{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding-bottom:10px} .cube{width:46px;height:46px;border-radius:12px;background:linear-gradient(150deg,#79c2ff,#1257c8);box-shadow:0 12px 30px rgba(30,123,255,.3);animation:floatY 4s ease-in-out infinite} .cube--2{width:38px;height:38px;background:linear-gradient(150deg,#28324a,#222);box-shadow:none;animation-delay:-1.3s} .cube--3{width:30px;height:30px;background:linear-gradient(150deg,#2c2a28,#1a1a19);animation-delay:-2.6s} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .art-hub{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:12px} .hub-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;font-size:12.5px; background:rgba(255,255,255,.05);border:1px solid var(--line);color:#e3e9f0} .hub-pill--2{margin-right:26px;opacity:.6} .dot-brand{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px rgba(30,123,255,.8);flex:none} .dot-grey{width:8px;height:8px;border-radius:50%;background:#4a4a4a;flex:none} .dot-white{width:8px;height:8px;border-radius:50%;background:#fff;flex:none} .art-lines{min-height:150px} .art-lines svg{position:absolute;inset:0;width:100%;height:100%} .art-gpu{display:flex;align-items:center;gap:14px} .gpu-badge{width:54px;height:54px;border-radius:14px;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,#79c2ff,#1257c8);box-shadow:0 10px 26px rgba(30,123,255,.35)} .gpu-badge svg{width:28px;height:28px;fill:#fff} .code{margin:0;font-family:Menlo,Consolas,monospace;font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.42); background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow:hidden} .code span{color:#2f8cff}.code em{color:var(--brand-2);font-style:normal} /* ---------- 8. Globe ---------- */ .globe-sec{padding-bottom:0;overflow:hidden} .globe-holder{position:relative;height:min(70vh,600px);margin-top:56px;overflow:hidden} #globe{position:absolute;left:50%;bottom:-44%;width:min(880px,130vw);height:auto;z-index:2; transform:translateX(-50%) scale(var(--gs,1));transform-origin:50% 50%;transition:transform .12s linear} .globe-halo{position:absolute;left:50%;bottom:-44%;width:min(880px,130vw);aspect-ratio:1;z-index:1; transform:translateX(-50%) scale(var(--gs,1));transform-origin:50% 50%;transition:transform .12s linear;border-radius:50%; background:radial-gradient(circle,rgba(60,155,255,0) 33%,rgba(80,170,255,.8) 38%,rgba(30,123,255,.32) 47%,rgba(25,110,250,.1) 58%,transparent 68%); filter:blur(26px);animation:beamPulse 6s ease-in-out infinite} .globe-legend{z-index:3} .globe-legend{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:24px;font-size:11.5px;color:var(--muted)} .globe-legend span{display:inline-flex;align-items:center;gap:7px} /* ---------- 9. Playground ---------- */ .play{background:linear-gradient(180deg,#f1f6ff,#fff 42%)} .logos{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:26px 0 44px} .logo-chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:600;color:#fff} .c1{background:#111}.c2{background:#10a37f}.c3{background:#2f8cff}.c4{background:#2783de} .c5{background:#d97757}.c6{background:#3b7fb8}.c7{background:#46a171} .mock{ position:relative;max-width:960px;margin-inline:auto;border-radius:26px;background:#fff; border:1px solid #e6ebf2;box-shadow:0 40px 90px rgba(30,20,10,.14),0 2px 6px rgba(0,0,0,.04); padding:0 0 20px;overflow:hidden;transform:perspective(1400px) rotateX(var(--rx,6deg));transform-origin:50% 0%; } .mock__dome{position:relative;height:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:0 0 26px; background:radial-gradient(120% 150% at 50% 100%,#dbeafe 0%,#eef4fb 38%,#fff 72%); } .mock__logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(150deg,#79c2ff,#1257c8);box-shadow:0 8px 20px rgba(30,123,255,.32)} .mock__logo svg{width:16px;height:16px;fill:#fff} .mock__dome h3{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .mock__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:24px 24px 14px} .mock__item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;transition:background .3s} .mock__item:hover{background:var(--light-2)} .mi{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:600;font-style:normal} .mi-green{background:#e6f0ee;color:#46a171}.mi-brand{background:#e9f3ff;color:#2b6fd6} .mi-blue{background:#e5f2fc;color:#2783de}.mi-violet{background:#e9f3ff;color:#2f8cff} .mock__item b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:3px} .mock__item span{display:block;font-size:12px;line-height:1.45;color:#9b9895} .mock__input{display:flex;align-items:center;gap:8px;margin:6px 24px 0;padding:13px 14px;border:1px solid #e6ebf2;border-radius:14px;background:#fff;font-size:13px;color:#454e5c} .mock__input button{width:30px;height:30px;border-radius:9px;margin-left:auto;background:var(--brand);display:grid;place-items:center;flex:none} .mock__input button svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .caret{width:1.5px;height:15px;background:var(--brand);animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .mock__foot{margin:14px 24px 0;text-align:center;font-size:11px;color:#a2abb9} /* ---------- 10. Use cases ---------- */ .cases__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px} .case{transition:transform .5s var(--ease)} .case:hover{transform:translateY(-4px)} .case h3{font-size:17px;font-weight:600;color:var(--ink);margin:18px 0 12px} .case ul li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--ink-muted);margin-bottom:7px} .case ul li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:#c4ccd8} .case__art{position:relative;height:170px;border-radius:var(--r);overflow:hidden;background:var(--light-2);border:1px solid #edf1f6} .art-map{background-image:radial-gradient(#dee4ec 1.1px,transparent 1.2px);background-size:13px 13px;background-color:#f8fafc} .art-map--2{background-size:16px 16px} .pin{position:absolute;left:30%;top:38%;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand);box-shadow:0 6px 14px rgba(30,123,255,.35);animation:pinBounce 3s ease-in-out infinite} .pin--2{left:62%;top:56%;animation-delay:-1s} .pin--3{left:46%;top:24%;animation-delay:-2s} @keyframes pinBounce{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(4px,-4px)}} .art-pay{display:grid;place-items:center;gap:10px;background:#fff} .pay{position:absolute;display:grid;place-items:center;width:74px;height:46px;border-radius:10px;background:#fff;border:1px solid #e6ebf2;box-shadow:0 10px 24px rgba(0,0,0,.06);font-size:12px;font-weight:700;color:#1a1f71;animation:floatY 5s ease-in-out infinite} .pay{left:22%;top:26%} .pay--mc{left:52%;top:22%;gap:0;display:flex;align-items:center;animation-delay:-1.6s} .pay--mc i{width:17px;height:17px;border-radius:50%;background:#eb001b} .pay--mc i:last-child{background:rgba(245,158,11,.85);margin-left:-6px} .pay--pp{left:36%;top:56%;color:#003087;font-size:11px;animation-delay:-3s} .art-game{display:grid;place-items:center;background:#fff} .key{position:absolute;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:600;color:#8a8783;background:var(--light-2);border:1px solid #e6ebf2;box-shadow:0 4px 10px rgba(0,0,0,.04)} .key{left:calc(50% - 17px);top:32%} .key--a{left:calc(50% - 57px);top:56%}.key--s{left:calc(50% - 17px);top:56%}.key--d{left:calc(50% + 23px);top:56%} .art-hosp{display:grid;place-items:center;background:#fff;overflow:hidden} .arc{position:absolute;width:190px;height:190px;border-radius:50%;border:14px solid #eef2f7;bottom:-70px;left:calc(50% - 95px)} .arc--2{width:120px;height:120px;border-color:#e0e6ee;bottom:-40px;left:calc(50% - 60px)} .art-fact{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-bottom:26px;background:#fff} .bar{width:26px;border-radius:6px 6px 3px 3px;background:#e5eaf1;animation:barUp 3.2s ease-in-out infinite} .bar{height:40%}.b2{height:64%;background:var(--brand);animation-delay:-.6s}.b3{height:50%;animation-delay:-1.2s}.b4{height:76%;animation-delay:-1.8s} @keyframes barUp{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}} .art-fact .bar{transform-origin:bottom} /* ---------- 11. Pricing ---------- */ .pricing{background:linear-gradient(180deg,#060a14,#080f1e)} .toggle{position:relative;display:flex;width:max-content;margin:0 auto 26px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)} .toggle__opt{position:relative;z-index:2;width:44px;height:30px;display:grid;place-items:center;border-radius:999px;color:var(--muted);transition:color .3s} .toggle__opt svg{width:15px;height:15px} .toggle__opt.is-active{color:#060a14} .toggle__thumb{position:absolute;z-index:1;top:4px;left:4px;width:44px;height:30px;border-radius:999px;background:#fff;transition:transform .4s var(--ease)} .toggle.is-right .toggle__thumb{transform:translateX(44px)} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px} .plan{position:relative;padding:26px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card),#0b1220);border:1px solid var(--line); display:flex;flex-direction:column;gap:16px;overflow:hidden;transition:transform .5s var(--ease),border-color .4s,opacity .8s var(--ease-out) var(--d,0s)} .plan::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(80,170,255,.14),transparent 65%)} .plan:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)} .plan:hover::before{opacity:1} .plan--featured{border-color:rgba(80,170,255,.4);box-shadow:0 0 0 1px rgba(80,170,255,.12),0 30px 70px rgba(30,123,255,.14)} .plan--featured::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent)} .plan__name{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)} .plan__price{display:flex;align-items:baseline;gap:8px} .plan__price b{font-size:36px;font-weight:600;letter-spacing:-.03em} .plan__price span{font-size:12.5px;color:var(--muted)} .plan__specs{display:flex;flex-direction:column;gap:11px;margin:4px 0 6px} .plan__specs li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.8)} .plan__specs svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .plan__specs .i-spark{fill:var(--brand);stroke:none} .plan__specs em{font-style:normal;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:var(--muted);border:1px solid var(--line-2)} .plans__foot{margin-top:26px;text-align:center;font-size:12px;line-height:1.6;color:rgba(255,255,255,.38)} .plan__care{display:block;margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.48)} .cs-story{margin:42px auto 0;max-width:760px;color:rgba(255,255,255,.72);font-size:16px;line-height:1.75} .cs-story p{margin:0 0 1em} /* ---------- FAQ ---------- */ .faq{display:flex;flex-direction:column;gap:10px} .faq__item{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,#131314,#0a1020);overflow:hidden;transition:border-color .35s,background .35s} .faq__item.is-open{border-color:rgba(255,255,255,.18);background:linear-gradient(180deg,#17171a,#121213)} .faq__q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:19px 22px;font-size:15px;font-weight:500;line-height:1.35} .faq__q .i-chev{width:13px;height:13px;flex:none;opacity:.55;transition:transform .4s var(--ease),opacity .3s} .faq__item.is-open .i-chev{transform:rotate(180deg);opacity:1;color:var(--brand-2)} .faq__a{height:0;overflow:hidden;transition:height .45s var(--ease)} .faq__a p{padding:0 22px 20px 49px;font-size:14px;line-height:1.6;color:var(--muted)} /* ---------- CTA ---------- */ .cta-sec{padding-bottom:100px} .cta{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#0b1220;border:1px solid var(--line); padding:74px 32px 200px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px} .cta h2{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-.025em;position:relative;z-index:2} .cta p{max-width:560px;font-size:14.5px;line-height:1.6;color:var(--muted);position:relative;z-index:2} .cta .btn{position:relative;z-index:2;margin-top:8px;background:#fff;color:#111} .cta .btn:hover{background:#eef3fa} .cta__glow{position:absolute;left:50%;bottom:-330px;width:min(1200px,140%);height:520px;transform:translateX(-50%); background:radial-gradient(closest-side,#fff 6%,#d5ecff 22%,#2f8cff 42%,#1257c8 62%,rgba(20,84,196,.34) 78%,transparent 100%); filter:blur(4px);animation:ctaGlow 7s ease-in-out infinite} @keyframes ctaGlow{0%,100%{opacity:.72}50%{opacity:1}} /* ---------- Products ---------- */ .prod__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .prod{position:relative;padding:26px;border-radius:var(--r-lg);background:linear-gradient(180deg,#111112,#0a1120);border:1px solid var(--line); display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:transform .5s var(--ease),border-color .4s,opacity .8s var(--ease-out) var(--d,0s)} .prod::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(80,170,255,.14),transparent 65%)} .prod:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)} .prod:hover::before{opacity:1} .prod__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:17px;color:var(--brand-2); background:rgba(30,123,255,.1);border:1px solid rgba(80,170,255,.22)} .prod h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em} .prod p{font-size:13.5px;line-height:1.55;color:var(--muted);flex:1} .more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#fff} .more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)} .prod:hover .more svg{transform:translateX(4px)} /* ---------- 12. Footer ---------- */ .footer{background:#070707;border-top:1px solid var(--line);padding:70px 0 26px} .footer__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:48px} .footer__brand p{margin:18px 0;max-width:38ch;font-size:13.5px;line-height:1.6;color:var(--muted)} .footer__brand .brand{padding-left:0} .footer__reach{display:flex;flex-direction:column;gap:6px;margin-top:4px} .footer__reach a{font-size:13.5px;color:var(--muted);transition:color .25s} .footer__reach a:hover{color:#fff} .socials{display:flex;gap:10px} .socials a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:13px;color:var(--muted); background:rgba(255,255,255,.04);border:1px solid var(--line);transition:background .3s,color .3s,transform .3s} .socials a:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-2px)} .footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .footer__cols h4{font-size:13px;font-weight:600;margin-bottom:14px} .footer__cols a{display:block;padding:5px 0;font-size:13.5px;color:var(--muted);transition:color .25s} .footer__cols a:hover{color:#fff} .footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:52px;padding-top:22px; border-top:1px solid var(--line);font-size:12px;color:rgba(255,255,255,.4)} .footer__legal{display:flex;gap:20px} .footer__legal a:hover{color:#fff} /* ---------- Responsive ---------- */ @media (max-width:1080px){ .bento{grid-template-columns:repeat(4,1fr)} .card,.card--wide{grid-column:span 2} .cases__grid,.prod__grid,.plans{grid-template-columns:repeat(2,1fr)} .device__grid{grid-template-columns:minmax(0,1fr)} .node{width:64px;height:64px;border-radius:18px;gap:3px} .node__ico{width:21px;height:21px} .node__label{font-size:7.5px;letter-spacing:.12em} .chip{width:108px;height:108px;border-radius:26px} .chip__mark{width:62px} } @media (max-width:820px){ .sec{padding:84px 0} .wrap,.wrap--narrow{width:min(100% - 32px,100%)} .topbar{height:36px} .topbar__in{width:calc(100% - 24px);gap:10px} .topbar__promo{ flex:1;min-width:0;max-width:100%; overflow:hidden;white-space:nowrap;text-overflow:ellipsis; font-size:11px; } .topbar__promo .i-arrow,.topbar__right a{display:none} .topbar__right{flex:none;gap:8px} .nav{top:36px;z-index:76} .nav__links,.nav__cta{display:none} .nav__in{ width:calc(100% - 20px);height:56px;gap:10px; padding:0 6px 0 4px;justify-content:space-between; } .nav.is-pill .nav__in{width:calc(100% - 20px);height:52px;padding:0 6px} .brand{padding-left:4px;gap:8px;min-width:0} .brand__logo{height:28px} .brand__wordmark{height:12px;max-width:min(112px,38vw)} .nav.is-pill .brand__wordmark{max-width:min(112px,38vw);opacity:1;margin:0} .burger{ display:flex;flex:none;margin-inline-start:auto; width:42px;height:42px;border-radius:12px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); } .mobile-menu{ display:flex;z-index:72;inset:0;height:100dvh; padding:108px 22px 28px;overflow:auto; } .mobile-menu__in{display:flex;flex-direction:column;gap:2px;width:min(420px,100%)} .mobile-menu a{padding:13px 2px;font-size:17px} .mobile-menu .btn{margin-top:16px;width:100%;height:48px;border-bottom:0} .mobile-menu__reach{display:flex;flex-direction:column;gap:2px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .mobile-menu__reach a{font-size:14px;color:var(--muted);border-bottom:0;padding:8px 2px} .hero{padding-top:130px;min-height:auto} .circuit{height:340px} .node--a,.node--c{left:2%}.node--d,.node--f{right:2%} .node{transform:none!important} .node--b,.node--e{display:none} .bento,.cases__grid,.prod__grid,.plans,.footer__in{grid-template-columns:minmax(0,1fr);gap:14px} .card,.card--wide{grid-column:span 1;min-height:230px} .footer__cols{grid-template-columns:repeat(2,1fr)} .mock__grid{grid-template-columns:minmax(0,1fr)} .cta{padding:52px 22px 150px} .footer__bottom{flex-direction:column;text-align:center} } /* ---------- Reduced motion & QA ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} [data-reveal],[data-load]{opacity:1 !important;transform:none !important} } html.qa .loader{display:none} html.qa [data-reveal],html.qa [data-load]{opacity:1 !important;transform:none !important} html.qa .w-in{opacity:1 !important;filter:none !important;transform:none !important} /* ---------- 13. Service pages ---------- */ .subpage{background:var(--bg)} .svc-hero{position:relative;overflow:hidden;padding:190px 0 76px;border-bottom:1px solid var(--line); background:radial-gradient(125% 95% at 50% -12%,#0d1730 0%,#080e1c 54%,#050912 100%)} .svc-hero__bg{position:absolute;inset:0;pointer-events:none} .svc-orb{position:absolute;left:50%;top:-34%;width:min(1200px,124vw);aspect-ratio:1;transform:translateX(-50%);filter:blur(4px); background:radial-gradient(closest-side,rgba(47,140,255,.19),rgba(18,88,216,.07) 46%,transparent 72%);animation:svcOrb 12s ease-in-out infinite} @keyframes svcOrb{0%,100%{opacity:.72}50%{opacity:1}} .svc-mesh{position:absolute;inset:0;background-size:72px 72px; background-image:linear-gradient(rgba(120,180,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.045) 1px,transparent 1px); -webkit-mask-image:radial-gradient(closest-side at 50% 16%,#000,transparent 80%);mask-image:radial-gradient(closest-side at 50% 16%,#000,transparent 80%)} @keyframes svcMesh{to{background-position:72px 72px,72px 72px}} .crumb{position:relative;display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.42);margin-bottom:22px} .crumb a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .3s} .crumb a:hover{color:#7fc0ff} .crumb i{font-style:normal;opacity:.35} .svc-badge{position:relative} .svc-badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round} .svc-hero__title{position:relative;margin:20px 0 0;max-width:17ch;font-size:clamp(34px,5.1vw,62px);line-height:1.05;letter-spacing:-.03em;font-weight:700;color:#fff} .svc-hero__lead{position:relative;margin:20px 0 0;max-width:64ch;font-size:clamp(15px,1.2vw,17.5px);line-height:1.72;color:var(--muted)} .svc-hero__cta{position:relative;display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} .svc-stats{position:relative;display:flex;gap:52px;flex-wrap:wrap;list-style:none;margin:54px 0 0;padding:26px 0 0;border-top:1px solid var(--line)} .svc-stats b{display:block;font-size:27px;font-weight:700;letter-spacing:-.02em;color:#fff} .svc-stats span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)} .svc-sec .badge.center-badge{margin-inline:auto} .svc-cards,.svc-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px} .svc-card{position:relative;overflow:hidden;padding:26px;border-radius:20px;border:1px solid var(--line); background:linear-gradient(168deg,rgba(20,32,54,.72),rgba(10,16,30,.72)); transition:transform .55s var(--ease-out),border-color .4s var(--ease)} .svc-card:hover{transform:translateY(-4px);border-color:rgba(120,180,255,.26)} .svc-card__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px; background:rgba(30,123,255,.11);border:1px solid rgba(120,180,255,.17)} .svc-card__ico svg{width:21px;height:21px;fill:none;stroke:#7fc0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .svc-card h3{margin:17px 0 9px;font-size:17px;font-weight:600;color:#fff} .svc-card p{margin:0;font-size:14.4px;line-height:1.68;color:var(--muted)} .svc-split{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:start} .svc-split .h2{margin-top:16px} .svc-deliv{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px} .svc-deliv li{display:flex;gap:12px;font-size:15px;line-height:1.62;color:rgba(255,255,255,.76)} .svc-deliv svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:#2f8cff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .svc-panel{padding:30px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(23,40,68,.68),rgba(9,14,26,.72))} .svc-panel h3{margin:0 0 18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)} .svc-chips{display:flex;flex-wrap:wrap;gap:9px} .svc-chips span{padding:8px 13px;border-radius:999px;font-size:12.6px;color:#cfe4ff;border:1px solid rgba(120,180,255,.19);background:rgba(30,123,255,.09)} .svc-panel__note{margin:22px 0 0;font-size:13.8px;line-height:1.72;color:var(--muted)} .svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px} .svc-step{padding:24px;border-radius:18px;border:1px solid var(--line);background:rgba(12,20,36,.55)} .svc-step__n{font-size:11.5px;font-weight:600;letter-spacing:.2em;color:#2f8cff} .svc-step h3{margin:12px 0 8px;font-size:16px;font-weight:600;color:#fff} .svc-step p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)} .svc-rel__card{display:block;padding:26px;border-radius:20px;text-decoration:none;border:1px solid var(--line); background:linear-gradient(168deg,rgba(20,32,54,.68),rgba(10,16,30,.72)); transition:transform .55s var(--ease-out),border-color .4s var(--ease)} .svc-rel__card:hover{transform:translateY(-4px);border-color:rgba(120,180,255,.3)} .svc-rel__card h3{margin:0 0 10px;font-size:18px;font-weight:600;color:#fff} .svc-rel__card p{margin:0 0 18px;font-size:14px;line-height:1.62;color:var(--muted)} .svc-rel__go{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#7fc0ff} .svc-rel__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)} .svc-rel__card:hover .svc-rel__go svg{transform:translateX(4px)} .svc-cta-sec{padding-bottom:112px} .svc-cta{position:relative;overflow:hidden;text-align:center;padding:68px 26px;border-radius:30px;border:1px solid var(--line); background:linear-gradient(165deg,rgba(19,34,60,.85),rgba(8,13,24,.9))} .svc-cta__halo{position:absolute;left:50%;bottom:-56%;width:min(760px,92%);aspect-ratio:1;transform:translateX(-50%);filter:blur(2px); background:radial-gradient(closest-side,rgba(47,140,255,.32),rgba(18,88,216,.11) 45%,transparent 72%)} .svc-cta h2{position:relative;margin:0;font-size:clamp(26px,3.3vw,42px);letter-spacing:-.025em;color:#fff} .svc-cta p{position:relative;margin:12px 0 0;color:var(--muted)} .svc-cta .svc-hero__cta, .svc-cta__btns{ position:relative;z-index:2;display:flex;justify-content:center;align-items:center; gap:14px;flex-wrap:wrap;margin-top:28px; } .svc-cta__btns .btn{min-width:0} .case__link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13.5px;font-weight:500;color:#1e7bff;text-decoration:none} .case__link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)} .case:hover .case__link svg{transform:translateX(4px)} .subpage main,.subpage .footer{animation:pgIn .75s var(--ease-out) both} body.is-leaving{opacity:0;transition:opacity .3s ease} @keyframes pgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (max-width:1080px){ .svc-cards,.svc-rel,.svc-steps{grid-template-columns:repeat(2,1fr)} .svc-split{grid-template-columns:1fr;gap:36px} } @media (max-width:720px){ .svc-hero{padding:148px 0 58px} .svc-cards,.svc-rel,.svc-steps{grid-template-columns:1fr} .svc-stats{gap:24px 30px;margin-top:40px} .svc-stats li{min-width:40%} .svc-panel,.svc-cta{padding:26px 20px} .svc-cta{padding:48px 20px} } /* ---------- 14. Service hero : signature visuals ---------- */ .svc-hero{padding:168px 0 66px} .svc-hero__grid{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center} .svc-hero__txt{position:relative;z-index:3} .svc-hero__title{max-width:15ch} .svc-hero__lead{max-width:52ch} .svc-hero__stats{position:relative;z-index:3} .svc-hero__vis{position:relative;z-index:2;display:grid;place-items:center;min-height:396px} /* ghost word */ .svc-word{position:absolute;left:-2%;bottom:-10%;white-space:nowrap;pointer-events:none; font-size:clamp(110px,17vw,250px);font-weight:800;letter-spacing:-.045em;line-height:.86;color:transparent; background:linear-gradient(178deg,rgba(160,205,255,.155),rgba(110,175,255,.02)); -webkit-background-clip:text;background-clip:text; -webkit-mask-image:linear-gradient(178deg,#000 12%,transparent 90%);mask-image:linear-gradient(178deg,#000 12%,transparent 90%); animation:svcWord 15s var(--ease) infinite} @keyframes svcWord{0%,100%{opacity:.45}50%{opacity:1}} /* shared stage */ .svis{position:relative;width:min(486px,100%);aspect-ratio:1/.84} .svis::after{content:"";position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1; background:radial-gradient(closest-side,rgba(47,140,255,.16),transparent 70%);animation:svcOrb 9s ease-in-out infinite} .svis .pane{position:absolute;border-radius:18px;border:1px solid rgba(120,180,255,.14); background:linear-gradient(158deg,rgba(23,40,68,.92),rgba(9,15,28,.94));box-shadow:0 16px 38px rgba(3,8,20,.45)} .svis .lbl{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(190,215,245,.55)} /* ===== 1. WEB : browser assembling + performance ring ===== */ .svis--web .win{inset:2% 6% 20% 0;overflow:hidden} .win__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(120,180,255,.1)} .win__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)} .win__bar i:first-child{background:rgba(47,140,255,.7)} .win__url{margin-left:10px;padding:3px 12px;border-radius:99px;font-size:9.5px;color:rgba(190,215,245,.6);background:rgba(255,255,255,.05)} .win__body{padding:16px} .sk{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,rgba(120,180,255,.30),rgba(120,180,255,.10));width:var(--w,100%);transform:scaleX(0);transform-origin:left; animation:skFill 5.5s var(--ease-out) infinite} .sk--t{height:16px;margin-bottom:10px;--w:78%} .sk--s{margin-bottom:8px;--w:92%;animation-delay:.25s} .sk--s2{margin-bottom:16px;--w:64%;animation-delay:.45s} .sk--btn{height:26px;border-radius:99px;--w:118px;animation-delay:.7s; background:linear-gradient(90deg,#1e7bff,#5db4ff)} @keyframes skFill{0%{transform:scaleX(0);opacity:0}14%{opacity:1}30%,86%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}} .win__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px} .win__cards span{height:52px;border-radius:11px;border:1px solid rgba(120,180,255,.12);background:rgba(255,255,255,.03); opacity:0;transform:translateY(10px);animation:cardIn 5.5s var(--ease-out) infinite} .win__cards span:nth-child(2){animation-delay:.14s} .win__cards span:nth-child(3){animation-delay:.28s} @keyframes cardIn{0%{opacity:0;transform:translateY(10px)}22%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}} .win__scan{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(93,180,255,.10),transparent);animation:scanY 5.5s var(--ease) infinite} @keyframes scanY{0%{transform:translateY(-120px);opacity:0}12%{opacity:1}70%{transform:translateY(340px);opacity:0}100%{transform:translateY(340px);opacity:0}} .svis--web .score{right:0;bottom:6%;width:150px;padding:15px;display:flex;align-items:center;gap:12px} .score svg{flex:none;width:46px;height:46px;transform:rotate(-90deg)} .score circle{fill:none;stroke-width:3.6;stroke-linecap:round} .score .rg-bg{stroke:rgba(255,255,255,.08)} .score .rg-fg{stroke:#2f8cff;stroke-dasharray:119;stroke-dashoffset:119;animation:ringFill 5.5s var(--ease-out) infinite} @keyframes ringFill{0%{stroke-dashoffset:119}42%,88%{stroke-dashoffset:4}100%{stroke-dashoffset:4}} .score b{display:block;font-size:20px;color:#fff;line-height:1} .svis--web .codeb{left:0;bottom:2%;width:190px;padding:13px 15px} .codeb i{display:block;height:6px;border-radius:4px;margin-bottom:7px;width:var(--w,100%);transform:scaleX(0);transform-origin:left;background:rgba(120,180,255,.26);animation:skFill 4.4s linear infinite} .codeb i:nth-child(1){--w:82%} .codeb i:nth-child(2){--w:56%;animation-delay:.3s} .codeb i:nth-child(3){--w:70%;animation-delay:.6s;background:rgba(47,140,255,.5)} .codeb i:nth-child(4){--w:44%;animation-delay:.9s;margin-bottom:0} /* ===== 2. SHOP : checkout chain ===== */ .svis--shop .flow{position:absolute;inset:0;width:100%;height:100%} .flow path{fill:none;stroke-linecap:round} .flow .fl-base{stroke:rgba(120,180,255,.16);stroke-width:1.4;stroke-dasharray:4 6} .flow .fl-pulse{stroke:#5db4ff;stroke-width:2.4;stroke-dasharray:26 320;stroke-dashoffset:346; filter:drop-shadow(0 0 6px rgba(93,180,255,.9));animation:flowGo 4.6s linear infinite} @keyframes flowGo{to{stroke-dashoffset:0}} .svis--shop .p-prod{left:0;top:4%;width:172px;padding:14px} .p-prod .ph{display:block;height:74px;border-radius:12px;background:linear-gradient(140deg,rgba(47,140,255,.22),rgba(23,40,68,.5));margin-bottom:11px;position:relative;overflow:hidden} .p-prod .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);animation:phSweep 4.6s var(--ease) infinite} @keyframes phSweep{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}} .p-prod b{display:block;font-size:13px;color:#fff} .p-prod em{font-style:normal;font-size:12px;color:#7fc0ff} .svis--shop .p-cart{right:2%;top:14%;width:132px;padding:13px 14px;display:flex;align-items:center;gap:10px} .p-cart svg{width:20px;height:20px;fill:none;stroke:#7fc0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .p-cart b{font-size:12.5px;color:#fff} .p-cart .n{margin-left:auto;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center; font-size:11px;color:#fff;background:#1e7bff;box-shadow:0 0 12px rgba(30,123,255,.7);animation:pop 4.6s var(--ease-out) infinite} @keyframes pop{0%,30%{transform:scale(1)}38%{transform:scale(1.35)}46%,100%{transform:scale(1)}} .svis--shop .p-pay{right:6%;bottom:24%;width:158px;padding:14px} .p-pay .pcd{display:block;width:26px;height:19px;border-radius:5px;background:linear-gradient(140deg,#d8e6f7,#8fa9c6);margin-bottom:12px} .p-pay .row{display:flex;align-items:center;justify-content:space-between} .p-pay b{font-size:12.5px;color:#fff} .p-pay .ok{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5db4ff;opacity:0;animation:okIn 4.6s var(--ease-out) infinite} @keyframes okIn{0%,62%{opacity:0}70%,94%{opacity:1}100%{opacity:0}} .svis--shop .p-rec{left:6%;bottom:2%;width:176px;padding:14px} .p-rec i{display:block;height:5px;border-radius:3px;background:rgba(120,180,255,.2);margin-bottom:7px} .p-rec i:nth-child(2){width:72%} .p-rec i:nth-child(3){width:52%} .p-rec b{display:block;margin-top:10px;font-size:11.5px;color:#7fc0ff} /* ===== 3. APP : live dashboard ===== */ .svis--app .board{inset:4% 0 8%;display:flex;overflow:hidden} .board__side{width:56px;flex:none;padding:16px 0;border-right:1px solid rgba(120,180,255,.1);display:flex;flex-direction:column;align-items:center;gap:14px} .board__side i{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.05)} .board__side i:first-child{background:rgba(47,140,255,.35);box-shadow:0 0 12px rgba(47,140,255,.5)} .board__main{flex:1;padding:16px} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px} .kpi{padding:10px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(120,180,255,.1)} .kpi b{display:block;font-size:15px;color:#fff;line-height:1.1;overflow:hidden;height:17px} .kpi .dgt{display:block;animation:dgt 4s steps(1) infinite} @keyframes dgt{0%{transform:translateY(0)}25%{transform:translateY(-17px)}50%{transform:translateY(-34px)}75%{transform:translateY(-51px)}100%{transform:translateY(0)}} .kpi span{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(190,215,245,.45)} .chart{display:flex;align-items:flex-end;gap:8px;height:104px;padding:0 2px 10px;border-bottom:1px solid rgba(120,180,255,.1)} .chart span{flex:1;border-radius:5px 5px 2px 2px;height:100%;transform:scaleY(.08);transform-origin:bottom;background:linear-gradient(180deg,#5db4ff,rgba(30,123,255,.25)); animation:svBar 4.2s var(--ease-out) infinite} .chart span:nth-child(1){--h:.46}.chart span:nth-child(2){--h:68%;animation-delay:.1s} .chart span:nth-child(3){--h:38%;animation-delay:.2s}.chart span:nth-child(4){--h:84%;animation-delay:.3s} .chart span:nth-child(5){--h:58%;animation-delay:.4s}.chart span:nth-child(6){--h:96%;animation-delay:.5s} .chart span:nth-child(7){--h:72%;animation-delay:.6s} @keyframes svBar{0%{transform:scaleY(.08)}30%,84%{transform:scaleY(var(--h))}100%{transform:scaleY(.08)}} .rows{margin-top:14px;display:grid;gap:9px} .rows i{height:9px;border-radius:5px;background:rgba(255,255,255,.06);opacity:0;transform:translateX(-8px);animation:rowIn 4.2s var(--ease-out) infinite} .rows i:nth-child(2){animation-delay:.12s}.rows i:nth-child(3){animation-delay:.24s} @keyframes rowIn{0%{opacity:0;transform:translateX(-8px)}20%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-8px)}} .svis--app .cursor{position:absolute;right:16%;bottom:20%;width:16px;height:16px;pointer-events:none; animation:curMove 6s var(--ease-out) infinite} .cursor::before{content:"";position:absolute;inset:0;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(-45deg);border-radius:2px 0 0 0} .cursor::after{content:"";position:absolute;left:-9px;top:-9px;width:34px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(93,180,255,.4),transparent)} @keyframes curMove{0%{transform:translate(0,0)}30%{transform:translate(-70px,-40px)}60%{transform:translate(-24px,-88px)}100%{transform:translate(0,0)}} /* ===== 4. SAAS : tenant orbit ===== */ .svis--saas .core{left:50%;top:44%;width:112px;height:112px;transform:translate(-50%,-50%);border-radius:26px;display:grid;place-items:center;text-align:center; box-shadow:0 0 42px rgba(30,123,255,.24);animation:coreBeat 4.6s ease-in-out infinite} @keyframes coreBeat{0%,100%{box-shadow:0 0 30px rgba(30,123,255,.18)}50%{box-shadow:0 0 58px rgba(30,123,255,.4)}} .core b{font-size:13px;color:#fff;letter-spacing:.04em} .core span{display:block;font-size:8.5px;letter-spacing:.18em;color:#7fc0ff;margin-top:3px} .orbr{position:absolute;left:50%;top:44%;border-radius:50%;border:1px dashed rgba(120,180,255,.16);transform:translate(-50%,-50%)} .orbr--1{width:212px;height:212px;animation:spin 16s linear infinite} .orbr--2{width:292px;height:292px;animation:spin 24s linear infinite reverse} .orbr--3{width:372px;height:372px;animation:spin 34s linear infinite} @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}} .tnt{position:absolute;top:-17px;left:50%;margin-left:-17px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center; font-size:12px;color:#dceaff;border:1px solid rgba(120,180,255,.22);background:linear-gradient(150deg,rgba(23,40,68,.98),rgba(9,15,28,.98)); box-shadow:0 6px 18px rgba(3,8,20,.6)} .orbr--1 .tnt{animation:spin 16s linear infinite reverse} .orbr--2 .tnt{animation:spin 24s linear infinite} .orbr--3 .tnt{animation:spin 34s linear infinite reverse} .svis--saas .tiers{left:0;bottom:1%;width:168px;padding:13px 14px;display:grid;gap:7px} .tiers .tier{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:9px;font-size:11.5px; color:rgba(220,234,255,.7);background:rgba(255,255,255,.035);animation:planOn 6s var(--ease) infinite} .tiers .tier:nth-child(2){animation-delay:2s}.tiers .tier:nth-child(3){animation-delay:4s} @keyframes planOn{0%,66%,100%{background:rgba(255,255,255,.035);color:rgba(220,234,255,.7);box-shadow:none} 20%,50%{background:rgba(30,123,255,.2);color:#fff;box-shadow:0 0 18px rgba(30,123,255,.35)}} .svis--saas .mrr{right:0;bottom:6%;width:150px;padding:13px 14px} .mrr .lbl{display:block;margin-bottom:9px} .mrr .spark{display:flex;align-items:flex-end;gap:4px;height:38px} .mrr .spark i{flex:1;border-radius:3px;height:100%;transform:scaleY(.14);transform-origin:bottom;background:linear-gradient(180deg,#5db4ff,rgba(30,123,255,.2));animation:svBar 5s var(--ease-out) infinite} .mrr .spark i:nth-child(1){--h:.3}.mrr .spark i:nth-child(2){--h:44%;animation-delay:.1s} .mrr .spark i:nth-child(3){--h:38%;animation-delay:.2s}.mrr .spark i:nth-child(4){--h:64%;animation-delay:.3s} .mrr .spark i:nth-child(5){--h:80%;animation-delay:.4s}.mrr .spark i:nth-child(6){--h:100%;animation-delay:.5s} /* ===== 5. SYS : modules feeding the core ===== */ .svis--sys .links{position:absolute;inset:0;width:100%;height:100%} .links path{fill:none;stroke-linecap:round} .links .ln{stroke:rgba(120,180,255,.15);stroke-width:1.3} .links .lp{stroke:#5db4ff;stroke-width:2.6;stroke-dasharray:20 400;stroke-dashoffset:420; filter:drop-shadow(0 0 6px rgba(93,180,255,.9));animation:flowGo var(--dur,4s) linear var(--delay,0s) infinite} .svis--sys .db{left:50%;top:50%;width:118px;height:118px;transform:translate(-50%,-50%);border-radius:28px;display:grid;place-items:center; animation:coreBeat 4s ease-in-out infinite} .db .cyl{display:block;width:44px;height:46px;position:relative} .db .cyl i{position:absolute;left:0;right:0;height:12px;border-radius:50%;border:1.4px solid rgba(140,200,255,.55);background:rgba(30,123,255,.14)} .db .cyl i:nth-child(1){top:0}.db .cyl i:nth-child(2){top:16px;opacity:.75}.db .cyl i:nth-child(3){top:32px;opacity:.5} .db b{position:absolute;bottom:14px;font-size:9px;letter-spacing:.2em;color:#7fc0ff} .mod{position:absolute;width:88px;padding:10px 8px;border-radius:14px;text-align:center; border:1px solid rgba(120,180,255,.14);background:linear-gradient(158deg,rgba(23,40,68,.94),rgba(9,15,28,.95))} .mod svg{width:17px;height:17px;fill:none;stroke:#7fc0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .mod span{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(200,222,250,.72)} .mod::before{content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none; background:radial-gradient(closest-side,rgba(93,180,255,.45),transparent 72%);opacity:0; animation:modFire var(--dur,4s) linear var(--delay,0s) infinite} @keyframes modFire{0%{opacity:.9}16%{opacity:0}100%{opacity:0}} .mod--1{left:0;top:6%}.mod--2{right:0;top:6%} .mod--3{left:-2%;top:44%}.mod--4{right:-2%;top:44%} .mod--5{left:8%;bottom:2%}.mod--6{right:8%;bottom:2%} /* ===== 6. UX : wireframe morphing into interface ===== */ .svis--ux .frame{inset:4% 2% 8%;overflow:hidden;padding:18px} .svis--ux .frame--ui{clip-path:inset(0 0 0 var(--sp,50%));animation:uxSplit 8s var(--ease) infinite} @keyframes uxSplit{0%,100%{clip-path:inset(0 0 0 78%)}50%{clip-path:inset(0 0 0 14%)}} .uxb{display:block;border-radius:9px;margin-bottom:10px} .frame--wire .uxb{background:rgba(255,255,255,.055);border:1px dashed rgba(140,190,255,.22)} .frame--ui .uxb{background:linear-gradient(120deg,rgba(47,140,255,.34),rgba(23,40,68,.75));border:1px solid rgba(120,180,255,.26)} .uxb--h{height:34px;width:62%} .uxb--p{height:11px;width:88%} .uxb--p2{height:11px;width:70%;margin-bottom:16px} .uxb--btn{height:30px;width:120px;border-radius:99px} .frame--ui .uxb--btn{background:linear-gradient(90deg,#1e7bff,#5db4ff);border:0} .uxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px} .uxgrid span{height:56px;border-radius:11px} .frame--wire .uxgrid span{background:rgba(255,255,255,.05);border:1px dashed rgba(140,190,255,.2)} .frame--ui .uxgrid span{background:linear-gradient(150deg,rgba(47,140,255,.24),rgba(15,25,44,.85));border:1px solid rgba(120,180,255,.2)} .svis--ux .seam{position:absolute;top:4%;bottom:8%;width:2px;left:50%;pointer-events:none; background:linear-gradient(180deg,transparent,#7fc0ff,transparent);box-shadow:0 0 18px rgba(93,180,255,.9); animation:uxSeam 8s var(--ease) infinite} @keyframes uxSeam{0%,100%{left:79%}50%{left:15%}} .svis--ux .tokens{right:2%;bottom:0;padding:11px 13px;display:flex;gap:7px;align-items:center} .tokens i{width:16px;height:16px;border-radius:50%} .tokens i:nth-child(1){background:#0b1220}.tokens i:nth-child(2){background:#1e7bff} .tokens i:nth-child(3){background:#5db4ff}.tokens i:nth-child(4){background:#e9f3ff} .tokens .lbl{margin-left:4px} /* responsive */ @media (max-width:1080px){ .svc-hero__grid{grid-template-columns:1fr;gap:34px} .svc-hero__title{max-width:19ch} .svc-hero__vis{min-height:340px;order:2} .svis{width:min(430px,100%)} .svc-word{font-size:clamp(96px,22vw,180px);bottom:-4%} } @media (max-width:720px){ .svc-hero{padding:142px 0 54px} .svc-hero__vis{min-height:300px} .svis{width:min(360px,96%)} .svis--web .codeb,.svis--shop .p-rec,.svis--saas .mrr,.svis--ux .tokens{display:none} .svc-word{font-size:clamp(74px,26vw,140px);opacity:.7} } @media (prefers-reduced-motion:reduce){ .svis *,.svis::after,.svc-word{animation:none!important} .svis--ux .frame--ui{clip-path:inset(0 0 0 50%)} } /* ---------- 15. Service pages : motion & glow ---------- */ /* --- word by word text reveal --- */ .subpage [data-words]{visibility:hidden} .subpage [data-words].w-ready{visibility:visible} .w-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em} .w-word i{display:inline-block;font-style:normal;opacity:0;transform:translateY(112%) rotate(3deg); transition:transform .82s var(--ease-out) var(--wd,0s),opacity .7s var(--ease-out) var(--wd,0s)} .subpage [data-words].in .w-word i{opacity:1;transform:none} .svc-hero__lead,.svc-hero__cta,.svc-hero__stats,.svc-hero .crumb,.svc-hero .badge{opacity:0;transform:translateY(16px); transition:opacity .9s var(--ease-out) var(--d2,0s),transform .9s var(--ease-out) var(--d2,0s)} .svc-hero.is-live .svc-hero__lead,.svc-hero.is-live .svc-hero__cta,.svc-hero.is-live .svc-hero__stats, .svc-hero.is-live .crumb,.svc-hero.is-live .badge{opacity:1;transform:none} .svc-hero .crumb{--d2:.05s}.svc-hero .badge{--d2:.15s} .svc-hero__lead{--d2:.62s}.svc-hero__cta{--d2:.74s}.svc-hero__stats{--d2:.86s} .svc-hero__vis{opacity:0;transform:translateY(26px) scale(.97);transition:opacity 1.1s var(--ease-out) .3s,transform 1.2s var(--ease-out) .3s} .svc-hero.is-live .svc-hero__vis{opacity:1;transform:none} /* --- section decorations --- */ .svc-sec,.faq-sec,.svc-cta-sec{position:relative;overflow:hidden} .dec{position:absolute;inset:0;pointer-events:none;z-index:0} .dec svg{position:absolute;inset:0;width:100%;height:100%} .dec path,.dec line,.dec circle{fill:none;stroke-linecap:round} .dec .tr{stroke:rgba(120,180,255,.10);stroke-width:1.2} .dec .tp{stroke:#7fc0ff;stroke-width:2.6;stroke-dasharray:16 460;stroke-dashoffset:476; animation:decFlow var(--dur,7s) linear var(--delay,0s) infinite} @keyframes decFlow{to{stroke-dashoffset:0}} .dec .blob{position:absolute;border-radius:50%;opacity:.5; background:radial-gradient(closest-side,rgba(47,140,255,.5),transparent 72%);animation:decBlob 13s ease-in-out infinite} @keyframes decBlob{0%,100%{opacity:.3}50%{opacity:.62}} .dec .blob--a{left:-6%;top:6%;width:340px;height:340px} .dec .blob--b{right:-8%;bottom:-6%;width:400px;height:400px;animation-delay:-6s; background:radial-gradient(closest-side,rgba(93,180,255,.34),transparent 72%)} .svc-sec .wrap,.faq-sec .wrap,.svc-cta-sec .wrap{position:relative;z-index:1} /* light beam between sections */ .sec-beam{position:relative;height:1px;background:linear-gradient(90deg,transparent,rgba(120,180,255,.22),transparent);overflow:hidden} .sec-beam::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;transform:translateX(-120%); background:linear-gradient(90deg,transparent,#7fc0ff,transparent);box-shadow:0 0 14px rgba(93,180,255,.9); animation:beamRun 6.5s var(--ease) infinite} @keyframes beamRun{0%{transform:translateX(-120%)}60%,100%{transform:translateX(400%)}} /* --- cards : glow + drawn icon --- */ .svc-card{position:relative;isolation:isolate;overflow:hidden} .svc-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0; background:conic-gradient(from var(--a,0deg),transparent 0 62%,rgba(93,180,255,.85) 78%,transparent 92%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; transition:opacity .45s var(--ease)} .svc-card:hover::after{opacity:1;animation:cardSpin 3.4s linear infinite} @keyframes cardSpin{to{--a:360deg}} @property --a{syntax:"";inherits:false;initial-value:0deg} .svc-card__ico{position:relative} .svc-card__ico::before{content:"";position:absolute;inset:-9px;border-radius:50%;z-index:-1; background:radial-gradient(closest-side,rgba(47,140,255,.42),transparent 72%);opacity:.65;animation:icoPulse 4.6s ease-in-out infinite} .svc-card:nth-child(2n) .svc-card__ico::before{animation-delay:-1.2s} .svc-card:nth-child(3n) .svc-card__ico::before{animation-delay:-2.4s} @keyframes icoPulse{0%,100%{opacity:.32;transform:scale(.94)}50%{opacity:.8;transform:scale(1.1)}} .svc-card__ico svg path,.svc-card__ico svg circle,.svc-card__ico svg rect,.svc-card__ico svg polyline{ stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.25s var(--ease-out) var(--dd,.15s)} .svc-card.in .svc-card__ico svg path,.svc-card.in .svc-card__ico svg circle, .svc-card.in .svc-card__ico svg rect,.svc-card.in .svc-card__ico svg polyline{stroke-dashoffset:0} /* --- deliverables : checks draw themselves --- */ .svc-deliv li svg path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .7s var(--ease-out) var(--dd,0s)} .svc-split__l.in .svc-deliv li svg path{stroke-dashoffset:0} .svc-deliv li:nth-child(1) svg path{--dd:.10s}.svc-deliv li:nth-child(2) svg path{--dd:.20s} .svc-deliv li:nth-child(3) svg path{--dd:.30s}.svc-deliv li:nth-child(4) svg path{--dd:.40s} .svc-deliv li:nth-child(5) svg path{--dd:.50s}.svc-deliv li:nth-child(6) svg path{--dd:.60s} .svc-deliv li svg{opacity:.95} /* --- panel : orbit illustration + chip glow --- */ .svc-panel{position:relative;overflow:hidden} .panel-orb{position:absolute;right:-70px;top:-70px;width:240px;height:240px;pointer-events:none} .panel-orb i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(120,180,255,.16);animation:spinP 22s linear infinite} .panel-orb i:nth-child(2){inset:28px;border-style:dashed;animation-duration:16s;animation-direction:reverse} .panel-orb i:nth-child(3){inset:56px;border-color:rgba(93,180,255,.28);animation-duration:11s} .panel-orb i::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:#7fc0ff; box-shadow:0 0 12px rgba(127,192,255,.95)} @keyframes spinP{to{transform:rotate(360deg)}} .svc-chips span{position:relative;transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .svc-chips span:hover{color:#fff;border-color:rgba(93,180,255,.5);box-shadow:0 0 18px rgba(30,123,255,.28)} /* --- steps : glowing rail + travelling pulse --- */ .svc-steps{position:relative} .steps-rail{position:absolute;left:4%;right:4%;top:26px;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(120,180,255,.22) 12%,rgba(120,180,255,.22) 88%,transparent);overflow:hidden} .steps-rail i{position:absolute;top:0;left:0;width:18%;height:100%;transform:translateX(-120%); background:linear-gradient(90deg,transparent,#7fc0ff,transparent);box-shadow:0 0 16px rgba(93,180,255,.95); animation:railRun 5.6s var(--ease) infinite} @keyframes railRun{0%{transform:translateX(-120%)}70%,100%{transform:translateX(560%)}} .svc-step{position:relative;z-index:1} .svc-step__n{position:relative} .svc-step__n::before{content:"";position:absolute;inset:-10px;border-radius:50%;z-index:-1; background:radial-gradient(closest-side,rgba(47,140,255,.5),transparent 70%);opacity:0;animation:stepFire 5.6s var(--ease) infinite} .svc-step:nth-child(2) .svc-step__n::before{animation-delay:.5s} .svc-step:nth-child(3) .svc-step__n::before{animation-delay:1s} .svc-step:nth-child(4) .svc-step__n::before{animation-delay:1.5s} @keyframes stepFire{0%,10%{opacity:0}18%{opacity:1}34%,100%{opacity:0}} /* --- faq + related glow --- */ .faq__item{position:relative} .faq__item::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;border-radius:2px; background:linear-gradient(180deg,transparent,#2f8cff,transparent);opacity:0;transform:scaleY(.4); transition:opacity .5s var(--ease),transform .6s var(--ease-out)} .faq__item.is-open::before{opacity:1;transform:none} .svc-rel__card{position:relative;overflow:hidden} .svc-rel__card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(93,180,255,.75),transparent);transform:translateX(-100%); transition:transform .8s var(--ease-out)} .svc-rel__card:hover::before{transform:translateX(100%)} .svc-rel__card:hover .svc-rel__go svg{transform:translateX(5px)} .svc-rel__go svg{transition:transform .4s var(--ease-out)} /* --- cta orbit --- */ .svc-cta{position:relative;overflow:hidden} .svc-cta::before{content:"";position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%); border-radius:50%;border:1px dashed rgba(120,180,255,.14);animation:spinP 40s linear infinite;pointer-events:none} .svc-cta::after{content:"";position:absolute;left:50%;top:50%;width:420px;height:420px;transform:translate(-50%,-50%); border-radius:50%;border:1px solid rgba(120,180,255,.1);animation:spinP 26s linear infinite reverse;pointer-events:none} @media (max-width:1080px){.steps-rail{display:none}.panel-orb{opacity:.5}} @media (prefers-reduced-motion:reduce){ .w-word i{opacity:1!important;transform:none!important} .dec .tp,.dec .blob,.beam::after,.steps-rail i,.svc-step__n::before,.panel-orb i,.svc-card__ico::before{animation:none!important} .svc-hero__lead,.svc-hero__cta,.svc-hero__stats,.svc-hero .crumb,.svc-hero .badge,.svc-hero__vis{opacity:1!important;transform:none!important} } /* --- steps rail fix --- */ .svc-steps{padding-top:42px} .steps-rail{top:18px;left:2%;right:2%} .svc-step::before{content:"";position:absolute;top:-30px;left:24px;width:10px;height:10px;border-radius:50%; background:#0b1220;border:1.6px solid rgba(120,180,255,.45);box-shadow:0 0 0 5px rgba(6,10,20,.95); animation:dotFire 5.6s var(--ease) infinite} .svc-step:nth-child(3)::before{animation-delay:.5s} .svc-step:nth-child(4)::before{animation-delay:1s} .svc-step:nth-child(5)::before{animation-delay:1.5s} @keyframes dotFire{0%,12%{background:#0b1220;border-color:rgba(120,180,255,.45)} 20%,32%{background:#5db4ff;border-color:#7fc0ff;box-shadow:0 0 0 5px rgba(6,10,20,.95),0 0 18px rgba(93,180,255,.9)} 46%,100%{background:#0b1220;border-color:rgba(120,180,255,.45);box-shadow:0 0 0 5px rgba(6,10,20,.95)}} @media (max-width:1080px){.svc-steps{padding-top:0}.svc-step::before{display:none}} /* ---------- 16. Performance : pause off-screen motion ---------- */ .is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important} /* ---------- 17. Performance : GPU layer promotion ---------- */ /* perf-promote */ .beam,.beam--1,.beam--2,.beam--3,.hero__bg,.svc-hero__bg,.svc-orb,.svc-cta__halo, .dec .blob,.ervup-word::before,.erv-glow,.erv-light,.svc-word{will-change:opacity} /* ---------- 18. Performance : glow without per-frame SVG filter ---------- */ .pulses-glow .pulse{stroke-width:7;opacity:.18;filter:none} .pulses-glow .pulse--down{stroke-width:8} @media (max-width:820px){.pulses-glow{display:none}.chip__hit{mix-blend-mode:normal}} @media (prefers-reduced-motion:reduce){.pulses-glow{display:none}} /* ---------- 19. Start a Project : wizard ---------- */ .sp-hero .svc-word{letter-spacing:.06em} /* Hero visual : project console */ .svis--start{position:relative} .svis--start .sp-rails{position:absolute;inset:0;width:100%;height:100%;fill:none} .svis--start .sp-rails .ln{stroke:rgba(125,180,255,.16);stroke-width:1.4} .svis--start .sp-rails .lp{stroke:#5db4ff;stroke-width:2;stroke-dasharray:34 400;stroke-dashoffset:434;animation:spFlow var(--dur,4s) linear infinite var(--delay,0s)} @keyframes spFlow{to{stroke-dashoffset:0}} .sp-console{position:absolute;left:11%;right:11%;top:15%;padding:18px 18px 16px;border-radius:18px;display:flex;flex-direction:column;gap:14px} .sp-c__top{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.16em} .sp-c__top b{color:var(--light-2);font-weight:700} .sp-c__id{color:var(--brand-2);opacity:.9} .sp-c__id i{font-style:normal;opacity:.6;margin:0 3px} .sp-c__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .sp-c__steps li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);opacity:.34;transform:translateX(-6px); animation:spStep 6s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)} .sp-c__steps li i{width:16px;height:16px;flex:0 0 16px;border-radius:50%;border:1.4px solid rgba(125,180,255,.5);position:relative} .sp-c__steps li i::after{content:"";position:absolute;inset:3.4px;border-radius:50%;background:var(--brand-2);opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s} .sp-c__steps li span{color:var(--light-2);font-weight:600} .sp-c__steps li em{font-style:normal;margin-left:auto;font-size:11px;opacity:.75} @keyframes spStep{0%,10%{opacity:.34;transform:translateX(-6px)}22%,64%{opacity:1;transform:none}80%,100%{opacity:.34;transform:translateX(-6px)}} .sp-c__steps li:nth-child(1) i::after{animation:spDot 6s ease-in-out infinite} .sp-c__steps li:nth-child(2) i::after{animation:spDot 6s ease-in-out infinite .5s} .sp-c__steps li:nth-child(3) i::after{animation:spDot 6s ease-in-out infinite 1s} .sp-c__steps li:nth-child(4) i::after{animation:spDot 6s ease-in-out infinite 1.5s} .sp-c__steps li:nth-child(5) i::after{animation:spDot 6s ease-in-out infinite 2s} @keyframes spDot{0%,14%{opacity:0;transform:scale(.4)}26%,66%{opacity:1;transform:none}82%,100%{opacity:0;transform:scale(.4)}} .sp-c__bar{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .sp-c__bar i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2)); transform-origin:left center;transform:scaleX(.06);animation:spBar 6s ease-in-out infinite} @keyframes spBar{0%,8%{transform:scaleX(.06)}30%{transform:scaleX(.34)}50%{transform:scaleX(.62)}70%{transform:scaleX(.86)}84%,100%{transform:scaleX(1)}} .sp-meter{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:104px;height:104px;display:grid;place-items:center;text-align:center} .sp-meter svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none} .sp-meter .mg-bg{stroke:rgba(255,255,255,.09);stroke-width:6} .sp-meter .mg-fg{stroke:var(--brand-2);stroke-width:6;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;animation:spMeter 6s ease-in-out infinite} @keyframes spMeter{0%,8%{stroke-dashoffset:327}70%,100%{stroke-dashoffset:66}} .sp-meter b{font-size:20px;color:var(--light-2);line-height:1} .sp-meter span{position:absolute;bottom:24px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .sp-chip{position:absolute;padding:6px 11px;border-radius:99px;font-size:11.5px;font-weight:600;color:var(--light-2); border:1px solid var(--line-2);background:rgba(14,22,38,.72);animation:spFloat 7s ease-in-out infinite} .sp-chip--1{left:3%;top:3%} .sp-chip--2{right:2%;top:3%;animation-delay:1.2s} .sp-chip--3{left:3%;bottom:6%;animation-delay:2.4s} @keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* Layout */ .sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:26px;align-items:start;margin-top:34px} .sp-main{min-width:0} /* Rail */ .sp-rail{position:relative;list-style:none;margin:0 0 22px;padding:0 0 16px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .sp-rail::before,.sp-rail__fill{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px} .sp-rail::before{background:rgba(255,255,255,.1)} .sp-rail__fill{background:linear-gradient(90deg,var(--brand),var(--brand-2));transform-origin:left center;transform:scaleX(0);transition:transform .5s var(--ease-out);will-change:transform} .sp-rail li{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer;padding-bottom:12px} .sp-rail li i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px; color:var(--muted);border:1.5px solid var(--line-2);background:rgba(10,16,32,.9);transition:color .3s,border-color .3s,transform .3s} .sp-rail li span{transition:color .3s} .sp-rail li.is-active i{color:#fff;border-color:var(--brand-2);transform:scale(1.08);box-shadow:0 0 0 5px rgba(30,123,255,.14)} .sp-rail li.is-active span{color:var(--light-2)} .sp-rail li.is-past i{color:var(--brand-2);border-color:rgba(93,180,255,.6)} .sp-rail li:hover i{border-color:rgba(93,180,255,.55)} /* Steps */ .sp-form{position:relative} .sp-step{display:none} .sp-step.is-active{display:block} .sp-step.is-in{animation:spIn .5s var(--ease-out) both} @keyframes spIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .sp-step.is-shake{animation:spShake .34s ease} @keyframes spShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}48%{transform:translateX(6px)}74%{transform:translateX(-3px)}} .sp-q{font-size:clamp(20px,2.1vw,26px);line-height:1.24;letter-spacing:-.02em;color:var(--light-2);margin:0 0 6px} .sp-q--mt{margin-top:30px} .sp-hint{color:var(--muted);font-size:14px;margin:0 0 16px} /* Option cards */ .sp-opts{display:grid;gap:12px} .sp-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))} .sp-opts--3{grid-template-columns:repeat(3,minmax(0,1fr))} .sp-opt{position:relative;display:block;cursor:pointer} .sp-opt--wide{grid-column:1 / -1} .sp-opt input{position:absolute;opacity:0;width:1px;height:1px} .sp-opt__box{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 16px 15px;border-radius:16px; border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,26,44,.9),rgba(10,16,32,.9)); transition:border-color .3s,transform .3s var(--ease-out),box-shadow .3s;overflow:hidden} .sp-opt__box::after{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;opacity:0;transition:opacity .35s; background:radial-gradient(420px 160px at 50% 0%,rgba(30,123,255,.22),transparent 70%)} .sp-opt:hover .sp-opt__box{border-color:var(--line-2);transform:translateY(-2px)} .sp-opt input:checked + .sp-opt__box{border-color:rgba(93,180,255,.62);box-shadow:0 12px 30px rgba(3,8,20,.5)} .sp-opt input:checked + .sp-opt__box::after{opacity:1} .sp-opt input:focus-visible + .sp-opt__box{outline:2px solid var(--brand-2);outline-offset:2px} .sp-opt__ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(30,123,255,.1)} .sp-opt__ico svg{width:18px;height:18px;fill:none;stroke:var(--brand-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sp-opt__box b{color:var(--light-2);font-size:15.5px} .sp-opt__box em{font-style:normal;color:var(--muted);font-size:13px;line-height:1.5} .sp-opt__tag{margin-top:auto;padding-top:8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);opacity:.9} .sp-opt--sm .sp-opt__box{padding:14px 15px;gap:3px} .sp-opt--sm .sp-opt__box b{font-size:14.5px} .sp-opt input:checked + .sp-opt__box::before{content:"";position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%; background:var(--brand-2);box-shadow:0 0 0 4px rgba(93,180,255,.18)} /* Feature tags */ .sp-tags{display:flex;flex-wrap:wrap;gap:9px} .sp-tag{position:relative;cursor:pointer} .sp-tag input{position:absolute;opacity:0;width:1px;height:1px} .sp-tag span{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;font-size:13.5px;color:var(--muted); border:1px solid var(--line);background:rgba(14,22,38,.7);transition:color .25s,border-color .25s,transform .25s} .sp-tag span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;transition:opacity .25s,transform .25s} .sp-tag:hover span{border-color:var(--line-2);transform:translateY(-1px)} .sp-tag input:checked + span{color:var(--light-2);border-color:rgba(93,180,255,.55);background:rgba(30,123,255,.14)} .sp-tag input:checked + span::before{background:var(--brand-2);opacity:1;transform:scale(1.25)} .sp-tag input:focus-visible + span{outline:2px solid var(--brand-2);outline-offset:2px} /* Fields */ .sp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .sp-field{display:flex;flex-direction:column;gap:7px;position:relative} .sp-field--full{grid-column:1 / -1} .sp-field > span{font-size:12.5px;letter-spacing:.04em;color:var(--muted)} .sp-field > span i{color:var(--brand-2);font-style:normal} .sp-field input,.sp-field textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line); background:rgba(8,13,26,.86);color:var(--light-2);font:inherit;font-size:14.5px;transition:border-color .25s,box-shadow .25s;resize:vertical} .sp-field input::placeholder,.sp-field textarea::placeholder{color:rgba(255,255,255,.32)} .sp-field input:focus,.sp-field textarea:focus{outline:none;border-color:rgba(93,180,255,.6);box-shadow:0 0 0 4px rgba(30,123,255,.12)} .sp-fe{display:none;font-style:normal;font-size:12.5px;color:#ff8f8f} .sp-field.is-bad input,.sp-field.is-bad textarea{border-color:rgba(255,120,120,.6)} .sp-field.is-bad .sp-fe{display:block} /* Checkbox row */ .sp-check{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:14px;cursor:pointer; border:1px solid var(--line);background:rgba(14,22,38,.6);transition:border-color .25s} .sp-check:hover{border-color:var(--line-2)} .sp-check input{position:absolute;opacity:0;width:1px;height:1px} .sp-check__mk{flex:0 0 20px;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);position:relative;transition:border-color .25s,background .25s} .sp-check__mk::after{content:"";position:absolute;left:5.6px;top:2.4px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(42deg) scale(.5);opacity:0;transition:opacity .2s,transform .2s} .sp-check input:checked + .sp-check__mk{background:var(--brand);border-color:var(--brand)} .sp-check input:checked + .sp-check__mk::after{opacity:1;transform:rotate(42deg)} .sp-check input:focus-visible + .sp-check__mk{outline:2px solid var(--brand-2);outline-offset:2px} .sp-check__tx{display:flex;flex-direction:column;gap:3px} .sp-check__tx b{color:var(--light-2);font-size:14.5px} .sp-check__tx em{font-style:normal;color:var(--muted);font-size:13px} /* Errors */ .sp-err{display:none;margin:12px 0 0;font-size:13px;color:#ff8f8f} .sp-err.is-on{display:block;animation:spIn .3s var(--ease-out) both} /* Review */ .sp-review{display:flex;flex-direction:column;gap:8px;margin-bottom:6px} .sp-rev{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:13px 15px;border-radius:12px;cursor:pointer; border:1px solid var(--line);background:rgba(10,16,32,.7);color:var(--light-2);font:inherit;transition:border-color .25s,transform .25s} .sp-rev > span{flex:0 0 132px;color:var(--muted);font-size:12.5px;letter-spacing:.04em;padding-top:2px} .sp-rev > b{flex:1;font-weight:600;font-size:14px;line-height:1.5;word-break:break-word} .sp-rev__ed{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);opacity:0;transition:opacity .25s} .sp-rev:hover{border-color:rgba(93,180,255,.5);transform:translateX(2px)} .sp-rev:hover .sp-rev__ed{opacity:1} .sp-rev--sum{cursor:default;border-style:dashed;border-color:rgba(93,180,255,.34);background:rgba(30,123,255,.08)} .sp-rev--sum:hover{transform:none;border-color:rgba(93,180,255,.34)} .sp-rev--sum > b{color:var(--brand-2)} /* Nav */ .sp-nav{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .sp-nav__count{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:auto} .sp-back:disabled{opacity:.36;pointer-events:none} .sp-send[hidden],.sp-next[hidden]{display:none} /* Live panel */ .sp-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px} .sp-live{padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,26,44,.95),rgba(8,13,26,.95))} .sp-live__top{display:flex;align-items:center;gap:9px;font-size:12.5px} .sp-live__top b{color:var(--light-2);letter-spacing:.04em} .sp-live__dot{width:8px;height:8px;border-radius:50%;background:#48e08a;animation:spPing 2.4s ease-in-out infinite} @keyframes spPing{0%,100%{opacity:.55;transform:scale(.86)}50%{opacity:1;transform:scale(1)}} .sp-live__tag{margin-left:auto;font-size:11.5px;color:var(--brand-2);letter-spacing:.08em} .sp-live__ring{position:relative;width:196px;height:196px;margin:12px auto 6px;display:grid;place-items:center} .sp-live__ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none} .sp-live__ring .lr-bg{stroke:rgba(255,255,255,.08);stroke-width:7} .sp-live__ring .lr-fg{stroke:url(#none);stroke:var(--brand-2);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease-out)} .sp-live__val{text-align:center;padding:0 30px;max-width:150px} .sp-live__val b{display:block;font-size:17.5px;line-height:1.24;color:var(--light-2);letter-spacing:-.02em} .sp-live__val span{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .sp-live__rows{list-style:none;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px} .sp-live__rows li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)} .sp-live__rows b{color:var(--light-2);font-weight:600} .sp-live__scope{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);min-height:34px} .sp-live__empty{font-size:12.5px;color:var(--muted);opacity:.8;line-height:1.5} .sp-pill{padding:5px 10px;border-radius:99px;font-size:11.5px;color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.03); animation:spIn .34s var(--ease-out) both} .sp-pill--k{color:var(--light-2);border-color:rgba(93,180,255,.45);background:rgba(30,123,255,.14)} .sp-live__note{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted);opacity:.8} .sp-guar{display:flex;flex-direction:column;gap:10px} .sp-guar > div{display:grid;grid-template-columns:32px 1fr;gap:11px;align-items:start;padding:13px 14px;border-radius:14px; border:1px solid var(--line);background:rgba(10,16,32,.6)} .sp-guar i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(30,123,255,.1)} .sp-guar svg{width:17px;height:17px;fill:none;stroke:var(--brand-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sp-guar b{display:block;color:var(--light-2);font-size:13.5px;margin-bottom:2px} .sp-guar span{color:var(--muted);font-size:12.5px;line-height:1.5} /* Success */ .sp-done{position:relative;overflow:hidden;padding:38px 32px 34px;border-radius:22px;text-align:center; border:1px solid rgba(93,180,255,.28);background:linear-gradient(180deg,rgba(17,26,44,.96),rgba(8,13,26,.96))} .sp-done.is-in{animation:spIn .6s var(--ease-out) both} .sp-done__halo{position:absolute;left:50%;top:-40%;width:520px;height:520px;transform:translateX(-50%);pointer-events:none; background:radial-gradient(closest-side,rgba(30,123,255,.24),transparent 72%);opacity:.9;animation:spPing 6s ease-in-out infinite} .sp-done__mk{position:relative;display:grid;place-items:center;width:78px;height:78px;margin:0 auto 18px} .sp-done__mk svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round} .sp-done__mk .dk-ring{stroke:rgba(93,180,255,.5);stroke-width:2;stroke-dasharray:132;stroke-dashoffset:132;animation:spDraw .9s var(--ease-out) .1s forwards} .sp-done__mk .dk-tick{stroke:var(--brand-2);stroke-width:3.4;stroke-dasharray:40;stroke-dashoffset:40;animation:spDraw .5s var(--ease-out) .6s forwards} @keyframes spDraw{to{stroke-dashoffset:0}} .sp-done h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;color:var(--light-2);margin:0 0 10px} .sp-done__lead{max-width:600px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.65} .sp-done__lead b{color:var(--brand-2);letter-spacing:.04em} .sp-done__next{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;text-align:left} .sp-done__next li{padding:15px 15px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(10,16,32,.66); animation:spIn .5s var(--ease-out) both} .sp-done__next li:nth-child(2){animation-delay:.08s} .sp-done__next li:nth-child(3){animation-delay:.16s} .sp-done__next li:nth-child(4){animation-delay:.24s} .sp-done__next i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.14em;color:var(--brand-2);margin-bottom:7px} .sp-done__next b{display:block;color:var(--light-2);font-size:14px;margin-bottom:4px} .sp-done__next span{color:var(--muted);font-size:12.5px;line-height:1.55} .sp-done__cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px} /* Responsive */ @media (max-width:1080px){ .sp-grid{grid-template-columns:1fr} .sp-side{position:static;flex-direction:row;flex-wrap:wrap} .sp-live{flex:1 1 320px} .sp-guar{flex:1 1 280px} } @media (max-width:820px){ .svis--start .sp-rails,.sp-chip{display:none} .sp-console{left:6%;right:6%;top:12%} .sp-opts--2,.sp-opts--3,.sp-fields{grid-template-columns:1fr} .sp-rail{grid-template-columns:repeat(5,1fr);gap:4px} .sp-rail li span{display:none} .sp-rail li{padding-bottom:10px} .sp-rev{flex-direction:column;gap:5px} .sp-rev > span{flex:none} .sp-rev__ed{opacity:1} .sp-done__next{grid-template-columns:1fr} .sp-nav{flex-wrap:wrap} .sp-nav__count{order:3;width:100%;margin:0;text-align:center} } @media (prefers-reduced-motion:reduce){ .sp-c__steps li,.sp-c__steps li i::after,.sp-c__bar i,.sp-meter .mg-fg,.sp-chip,.sp-live__dot,.sp-done__halo, .svis--start .sp-rails .lp{animation:none!important} .sp-c__steps li{opacity:1;transform:none} .sp-c__bar i{transform:scaleX(.7)} .sp-meter .mg-fg{stroke-dashoffset:66} .sp-done__mk .dk-ring,.sp-done__mk .dk-tick{stroke-dashoffset:0;animation:none!important} .sp-step.is-in,.sp-pill,.sp-done__next li,.sp-done.is-in{animation:none!important} } /* =================================================================== 20. Work : case files, filters and drawers =================================================================== */ .wk-hero .svc-word{letter-spacing:.06em} /* --- hero signature visual --- */ .svis--work{position:relative} .svis--work .wk-rails{position:absolute;inset:0;width:100%;height:100%} .wk-board{position:absolute;left:9%;right:9%;top:26%;padding:18px 20px 20px;border-radius:18px} .wk-board__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .wk-board__top b{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.72)} .wk-board__live{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)} .wk-board__live i{width:6px;height:6px;border-radius:50%;background:var(--brand-2);animation:wkPing 2.4s infinite} .wk-board__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .wk-board__rows li{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px} .wk-board__rows span{font-size:11.5px;color:rgba(255,255,255,.62)} .wk-board__rows b{font-size:12.5px;color:#fff;font-variant-numeric:tabular-nums} .wk-board__rows i{position:absolute;left:0;bottom:-5px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2)); width:var(--v);transform:scaleX(0);transform-origin:0 50%;animation:wkBar 3.6s var(--ease-out) infinite;animation-delay:calc(var(--i) * .45s)} .wk-tile{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px; border:1px solid var(--line-2);background:rgba(10,16,32,.86);font-size:11.5px;color:rgba(255,255,255,.8); animation:wkFloat var(--dur,6s) ease-in-out infinite;animation-delay:var(--delay,0s);will-change:transform} .wk-tile svg{width:13px;height:13px;fill:none;stroke:var(--brand-2);stroke-width:1.7} .wk-tile--1{left:2%;top:6%} .wk-tile--2{right:2%;top:6%} .wk-tile--3{left:2%;bottom:6%} .wk-tile--4{right:2%;bottom:6%} /* --- disclaimer + filter bar --- */ .wk-disclaimer{margin:0 auto 26px;max-width:620px;text-align:center;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.42)} .wk-bar{display:flex;flex-direction:column;gap:12px;align-items:center;margin:0 0 34px} .wk-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .wk-f,.wk-s{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;cursor:pointer; border:1px solid var(--line);background:rgba(255,255,255,.03);color:rgba(255,255,255,.66);font-size:13px;font-weight:500; transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease)} .wk-f i{font-style:normal;font-size:10.5px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.55)} .wk-f:hover,.wk-s:hover{color:#fff;border-color:var(--line-2);transform:translateY(-1px)} .wk-f.is-on,.wk-s.is-on{color:#fff;border-color:rgba(30,123,255,.55);background:var(--brand-soft)} .wk-f.is-on i{background:rgba(30,123,255,.28);color:var(--brand-2)} .wk-s{padding:7px 13px;font-size:12.2px} .wk-filters--sec{opacity:.9} .wk-count{margin:2px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)} /* --- grid + cards --- */ .wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start} .wk-card{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden; background:linear-gradient(165deg,rgba(23,40,68,.55),rgba(9,14,26,.78)); transition:border-color .4s,transform .4s var(--ease),opacity .35s} .wk-card:hover{border-color:rgba(30,123,255,.4);transform:translateY(-3px)} .wk-card.is-hide{display:none} .wk-card--flag{grid-column:1/-1;grid-template-columns:minmax(0,340px) 1fr;display:grid} .wk-card__vis{position:relative;height:190px;overflow:hidden;border-bottom:1px solid var(--line); background:radial-gradient(120% 140% at 20% 0%,rgba(30,123,255,.2),transparent 60%),#080d18} .wk-card--flag .wk-card__vis{height:auto;border-bottom:0;border-right:1px solid var(--line)} .wk-card__stamp{position:absolute;left:16px;top:14px;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.5);z-index:2} .wk-card__flag{position:absolute;right:14px;top:14px;z-index:2;padding:5px 11px;border-radius:999px;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--brand-2);border:1px solid rgba(30,123,255,.45);background:rgba(6,10,20,.7)} .wk-card__body{padding:22px 24px 24px} .wk-card--flag .wk-card__body{padding:28px 30px 30px;align-self:center} .wk-card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} .wk-tag{font-style:normal;font-size:11px;letter-spacing:.04em;padding:4px 10px;border-radius:999px; border:1px solid var(--line);color:rgba(255,255,255,.6)} .wk-tag--brand{border-color:rgba(30,123,255,.45);color:var(--brand-2);background:var(--brand-soft)} .wk-card__body h3{margin:0 0 8px;font-size:21px;letter-spacing:-.01em} .wk-card--flag .wk-card__body h3{font-size:26px} .wk-card__body>p{margin:0 0 16px;font-size:14.2px;line-height:1.65;color:var(--muted)} .wk-stack{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px} .wk-mets{list-style:none;margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px} .wk-mets li{display:flex;flex-direction:column;gap:2px;min-width:88px} .wk-mets b{font-size:22px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums} .wk-mets span{font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.5)} .wk-card__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .wk .btn--sm{padding:11px 18px;font-size:13.5px} .wk-blk h4{margin:0 0 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)} .wk-blk p{margin:0;font-size:14px;line-height:1.68;color:var(--muted)} .wk-blk ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} .wk-blk li{position:relative;padding-left:18px;font-size:13.8px;line-height:1.55;color:var(--muted)} .wk-blk li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px; background:linear-gradient(135deg,var(--brand),var(--brand-2))} .wk-quote{margin:0;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02); font-size:14.5px;line-height:1.6;font-style:italic;color:rgba(255,255,255,.86)} .wk-quote cite{display:block;margin-top:8px;font-style:normal;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.45)} .wk-more{margin:0} .wk-more a{font-size:13.5px;color:var(--brand-2)} .wk-empty{display:none;margin:24px auto 0;max-width:520px;text-align:center;font-size:14px;line-height:1.7;color:var(--muted)} .wk-empty.is-on{display:block} .wk-empty a{color:var(--brand-2)} /* --- mini mock screens --- */ .wk-shot{position:absolute;inset:22px 22px 0;border-radius:12px 12px 0 0;border:1px solid var(--line-2); border-bottom:0;background:linear-gradient(180deg,#0d1526,#0a1020);overflow:hidden} .wk-shot i{position:absolute;display:block;border-radius:4px;background:rgba(255,255,255,.09)} .wk-shot .s-top{left:0;right:0;top:0;height:22px;border-radius:0;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)} .wk-card:hover .wk-shot{transform:translateY(-4px);transition:transform .5s var(--ease)} .wk-shot--store .s-p{width:26%;height:38px;top:38px;background:linear-gradient(160deg,rgba(30,123,255,.3),rgba(255,255,255,.06))} .wk-shot--store .s-p--1{left:6%} .wk-shot--store .s-p--2{left:37%} .wk-shot--store .s-p--3{left:68%} .wk-shot--store .s-p--4{left:6%;top:88px;width:57%;height:14px} .wk-shot--store .s-cart{right:6%;top:88px;width:26%;height:32px;background:linear-gradient(135deg,var(--brand),var(--brand-2));animation:wkPulse 3.2s ease-in-out infinite} .wk-shot--book .s-col{top:34px;width:26%;height:16px;background:rgba(255,255,255,.07)} .wk-shot--book .s-col--1{left:6%} .wk-shot--book .s-col--2{left:37%} .wk-shot--book .s-col--3{left:68%} .wk-shot--book .s-slot{left:6%;width:88%;height:18px;background:rgba(255,255,255,.06)} .wk-shot--book .s-slot--1{top:60px} .wk-shot--book .s-slot--2{top:84px;width:56%;background:linear-gradient(90deg,rgba(30,123,255,.45),rgba(30,123,255,.12));animation:wkPulse 3.6s ease-in-out infinite} .wk-shot--book .s-slot--3{top:108px;width:72%} .wk-shot--sys .s-side{left:0;top:22px;bottom:0;width:22%;border-radius:0;background:rgba(255,255,255,.04);border-right:1px solid var(--line)} .wk-shot--sys .s-row{left:28%;right:6%;height:13px} .wk-shot--sys .s-row--1{top:70px} .wk-shot--sys .s-row--2{top:90px} .wk-shot--sys .s-row--3{top:110px} .wk-shot--sys .s-row--4{top:130px;right:38%} .wk-shot--sys .s-kpi{left:28%;right:6%;top:34px;height:26px;background:linear-gradient(90deg,rgba(30,123,255,.34),rgba(255,255,255,.05));animation:wkPulse 4s ease-in-out infinite} .wk-shot--vit .s-hero{left:6%;right:6%;top:34px;height:44px;background:linear-gradient(140deg,rgba(30,123,255,.32),rgba(255,255,255,.05))} .wk-shot--vit .s-l{left:6%;height:11px} .wk-shot--vit .s-l--1{top:90px;width:66%} .wk-shot--vit .s-l--2{top:108px;width:44%} .wk-shot--vit .s-wa{right:8%;bottom:16px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#25d366,#0f9c4c);animation:wkPulse 2.8s ease-in-out infinite} .wk-shot--saas .s-t{top:36px;width:27%;height:52px;background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.03))} .wk-shot--saas .s-t--1{left:5%} .wk-shot--saas .s-t--2{left:36.5%;background:linear-gradient(170deg,rgba(30,123,255,.4),rgba(30,123,255,.1));animation:wkPulse 3.4s ease-in-out infinite} .wk-shot--saas .s-t--3{left:68%} .wk-shot--saas .s-line{left:5%;right:5%;top:104px;height:12px} .wk-shot--edu .s-g{width:26%;height:26px;background:rgba(255,255,255,.07)} .wk-shot--edu .s-g--1{left:6%;top:36px} .wk-shot--edu .s-g--2{left:37%;top:36px;background:linear-gradient(135deg,rgba(30,123,255,.38),rgba(30,123,255,.1))} .wk-shot--edu .s-g--3{left:68%;top:36px} .wk-shot--edu .s-g--4{left:6%;top:72px} .wk-shot--edu .s-g--5{left:37%;top:72px} .wk-shot--edu .s-g--6{left:68%;top:72px;background:linear-gradient(135deg,rgba(30,123,255,.28),rgba(30,123,255,.06))} /* --- numbers band --- */ .wk-nums{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .wk-nums li{padding:24px 22px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02);text-align:center} .wk-nums b{display:block;font-size:38px;line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} .wk-nums span{display:block;margin:10px 0 4px;font-size:13.5px;color:rgba(255,255,255,.8)} .wk-nums em{display:block;font-style:normal;font-size:12px;line-height:1.5;color:rgba(255,255,255,.45)} @keyframes wkBar{0%,12%{transform:scaleX(0)}52%,100%{transform:scaleX(1)}} @keyframes wkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes wkPing{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1)}} @keyframes wkPulse{0%,100%{opacity:.72}50%{opacity:1}} @media (max-width:1080px){ .wk-grid{grid-template-columns:1fr} .wk-card--flag{grid-template-columns:1fr} .wk-card--flag .wk-card__vis{height:190px;border-right:0;border-bottom:1px solid var(--line)} .wk-nums{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .wk-card__body,.wk-card--flag .wk-card__body{padding:20px 18px 22px} .wk-card__body h3,.wk-card--flag .wk-card__body h3{font-size:19px} .wk-mets{gap:14px} .wk-mets b{font-size:19px} .wk-nums{grid-template-columns:1fr} .wk-nums b{font-size:32px} .wk-f,.wk-s{font-size:12px;padding:8px 12px} } @media (prefers-reduced-motion:reduce){ .wk-board__rows i,.wk-tile,.wk-shot i{animation:none!important} .wk-board__rows i{transform:scaleX(1)} } /* =========================================================== 21. Case study : Atlas Froid (all classes prefixed cs-) =========================================================== */ .cs-hero .svc-word{letter-spacing:.06em} /* hero visual : four files collapsing into one core */ .svis--case{position:relative} .svis--case .cs-rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .svis--case .cs-rails .ln{fill:none;stroke:var(--line-2);stroke-width:1.1} .svis--case .cs-rails .lp{fill:none;stroke:var(--brand-2);stroke-width:2;stroke-linecap:round;stroke-dasharray:26 660;filter:drop-shadow(0 0 5px rgba(93,180,255,.55));animation:csFlow var(--dur,4s) linear var(--delay,0s) infinite} @keyframes csFlow{from{stroke-dashoffset:686}to{stroke-dashoffset:0}} .cs-file{position:absolute;left:5%;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line-2);border-radius:11px;background:linear-gradient(180deg,var(--card-2),var(--card));font:600 11.5px/1 var(--font,inherit);color:rgba(255,255,255,.72);white-space:nowrap;animation:csFile 4.6s var(--ease) var(--delay,0s) infinite} .cs-file svg{width:13px;height:13px;fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.6;stroke-linejoin:round} .cs-file--1{top:14%} .cs-file--2{top:33%} .cs-file--3{top:57%} .cs-file--4{top:76%} @keyframes csFile{0%,72%,100%{opacity:.6;transform:translateX(0)}22%{opacity:1;transform:translateX(4px);border-color:rgba(93,180,255,.4)}} .cs-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;padding:16px 12px;text-align:center;border-radius:16px} .cs-core b{display:block;font-size:12.5px;letter-spacing:.12em;color:#fff} .cs-core em{display:block;margin-top:3px;font-size:10.5px;font-style:normal;color:var(--muted)} .cs-core .cyl{display:flex;flex-direction:column;gap:4px;align-items:center;margin-bottom:10px} .cs-core .cyl i{display:block;width:52px;height:9px;border-radius:50%;background:linear-gradient(90deg,rgba(30,123,255,.5),rgba(93,180,255,.85));animation:csPulse 2.6s var(--ease) infinite} .cs-core .cyl i:nth-child(2){animation-delay:.25s;opacity:.8} .cs-core .cyl i:nth-child(3){animation-delay:.5s;opacity:.6} @keyframes csPulse{0%,100%{transform:scaleX(1);opacity:.62}50%{transform:scaleX(1.08);opacity:1}} .cs-out{position:absolute;right:3%;bottom:14%;padding:11px 14px;border:1px solid rgba(30,123,255,.34);border-radius:13px;background:rgba(30,123,255,.1);text-align:center} .cs-out b{display:block;font-size:20px;color:#fff} .cs-out span{font-size:10.5px;color:var(--muted)} /* fact strip */ .cs-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin:0 0 62px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)} .cs-facts>div{padding:18px 20px;background:var(--card)} .cs-facts span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cs-facts b{display:block;margin-top:6px;font-size:14.5px;color:var(--light-2)} /* pains */ .cs-pains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .cs-pain{padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card));transition:border-color .4s var(--ease),transform .4s var(--ease)} .cs-pain:hover{border-color:var(--line-2);transform:translateY(-3px)} .cs-pain i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--brand-soft);border:1px solid rgba(30,123,255,.28)} .cs-pain i svg{width:19px;height:19px;fill:none;stroke:var(--brand-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .cs-pain h3{margin:16px 0 8px;font-size:17px;color:#fff} .cs-pain p{font-size:14.5px;line-height:1.65;color:var(--muted)} /* decisions */ .cs-decs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px} .cs-dec{position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden} .cs-dec::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,transparent,var(--brand),transparent);opacity:.7} .cs-dec__n{font-size:12px;letter-spacing:.16em;color:var(--brand-2)} .cs-dec h3{margin:10px 0 10px;font-size:18px;color:#fff} .cs-dec p{font-size:14.5px;line-height:1.65;color:var(--muted)} .cs-dec ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px} .cs-dec li{position:relative;padding-left:18px;font-size:13.5px;color:rgba(255,255,255,.68)} .cs-dec li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 8px rgba(93,180,255,.6)} /* modules */ .cs-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .cs-mod{padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card-2)} .cs-mod i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line-2)} .cs-mod i svg{width:17px;height:17px;fill:none;stroke:var(--brand-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .cs-mod b{display:block;margin:14px 0 7px;font-size:15.5px;color:#fff} .cs-mod p{font-size:13.8px;line-height:1.6;color:var(--muted)} /* timeline */ .cs-tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:62px 0 0;padding:0;list-style:none;counter-reset:cstl} .cs-tl li{position:relative;padding:34px 16px 0} .cs-tl li::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line-2)} .cs-tl li::after{content:"";position:absolute;left:16px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(30,123,255,.16)} .cs-tl li:last-child::before{right:auto;width:16px} .cs-tl span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)} .cs-tl b{display:block;margin:7px 0 6px;font-size:15.5px;color:#fff} .cs-tl p{font-size:13.5px;line-height:1.6;color:var(--muted)} /* results */ .cs-res{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:46px 0 0;padding:0;list-style:none} .cs-res li{padding:26px 22px;text-align:center;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card))} .cs-res b{display:block;font-size:38px;line-height:1;color:#fff} .cs-res span{display:block;margin-top:10px;font-size:13.8px;color:var(--light-2)} .cs-res em{display:block;margin-top:6px;font-size:12.5px;font-style:normal;color:var(--muted)} /* before / after bars */ .cs-cmp{margin-top:34px;padding:30px 28px;border:1px solid var(--line);border-radius:20px;background:var(--card)} .cs-cmp h3{margin:0 0 22px;font-size:17px;color:#fff} .cs-cmp__row{display:grid;grid-template-columns:250px 1fr;align-items:center;gap:18px;margin-bottom:14px} .cs-cmp__row span{font-size:13.5px;color:var(--muted)} .cs-cmp__bar{position:relative;display:block;height:30px;border-radius:9px;background:rgba(255,255,255,.05)} .cs-cmp__bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,50%);border-radius:9px;transform-origin:left;animation:csBar 1.5s var(--ease-out) both} .cs-cmp__bar--old::before{background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.1))} .cs-cmp__bar--new::before{background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 22px rgba(30,123,255,.35)} .cs-cmp__bar em{position:absolute;top:50%;left:calc(var(--v,50%) + 12px);transform:translateY(-50%);font-style:normal;font-size:12.5px;color:var(--light-2)} @keyframes csBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} .cs-cmp__note{margin:18px 0 0;font-size:12.5px;color:var(--muted)} /* stack */ .cs-stack{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:34px} .cs-stack>span{margin-right:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cs-stack i{padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.04);font-style:normal;font-size:12.5px;color:rgba(255,255,255,.72)} /* quote */ .cs-quote{position:relative;margin:44px 0 0;padding:36px 34px 32px 62px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--card-2),var(--card))} .cs-quote::before{content:"\201C";position:absolute;left:26px;top:16px;font-size:62px;line-height:1;color:rgba(30,123,255,.5)} .cs-quote p{margin:0;font-size:19.5px;line-height:1.6;color:var(--light-2)} .cs-quote cite{display:block;margin-top:16px;font-style:normal;font-size:13.5px;color:var(--muted)} /* next / previous */ .cs-next{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:56px} .cs-next__card{display:block;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-decoration:none;transition:border-color .4s var(--ease),transform .4s var(--ease)} .cs-next__card:hover{border-color:rgba(30,123,255,.4);transform:translateY(-3px)} .cs-next__card span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)} .cs-next__card b{display:block;margin:9px 0 6px;font-size:18px;color:#fff} .cs-next__card em{font-style:normal;font-size:13.5px;color:var(--muted)} @media (max-width:1080px){ .cs-facts{grid-template-columns:repeat(3,1fr)} .cs-pains,.cs-decs,.cs-mods{grid-template-columns:1fr 1fr} .cs-tl{grid-template-columns:1fr 1fr} .cs-res{grid-template-columns:1fr 1fr} .cs-next{grid-template-columns:1fr} } @media (max-width:640px){ .cs-facts{grid-template-columns:1fr 1fr} .cs-pains,.cs-decs,.cs-mods,.cs-tl,.cs-res{grid-template-columns:1fr} .cs-tl li{padding:0 0 26px 26px} .cs-tl li::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto} .cs-tl li::after{left:0;top:2px} .cs-tl li:last-child::before{height:14px;width:1px} .cs-cmp{padding:22px 18px} .cs-cmp__row{grid-template-columns:1fr;gap:8px} .cs-cmp__bar em{left:auto;right:10px} .cs-res b{font-size:32px} .cs-quote{padding:30px 22px 26px 24px} .cs-quote::before{display:none} .cs-quote p{font-size:17px} .cs-file{font-size:10.5px;padding:6px 9px} .cs-core{width:112px} } @media (prefers-reduced-motion:reduce){ .svis--case .cs-rails .lp,.cs-file,.cs-core .cyl i,.cs-cmp__bar::before{animation:none!important} .cs-cmp__bar::before{transform:none} } /* --- 21b. Work hero rails : strokes only, never filled --- */ .wk-rails{overflow:visible} .wk-rails path{fill:none} .wk-rails .ln{stroke:rgba(120,180,255,.15);stroke-width:1.3} .wk-rails .lp{stroke:#5db4ff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:20 400;stroke-dashoffset:420;filter:drop-shadow(0 0 6px rgba(93,180,255,.85));animation:flowGo var(--dur,4s) linear var(--delay,0s) infinite} @media (prefers-reduced-motion:reduce){.wk-rails .lp{animation:none!important}} /* =========================================================== 22. Contact page (all classes prefixed ct-) =========================================================== */ /* --- hero visual : three channels routed into one inbox --- */ .svis--ct{position:relative} .ct-rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .ct-rails path{fill:none} .ct-rails .ln{stroke:rgba(120,180,255,.15);stroke-width:1.3} .ct-rails .lp{stroke:#5db4ff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:20 400;stroke-dashoffset:420;filter:drop-shadow(0 0 6px rgba(93,180,255,.85));animation:ctFlow var(--dur,3.6s) linear var(--delay,0s) infinite} @keyframes ctFlow{from{stroke-dashoffset:420}to{stroke-dashoffset:0}} .ct-node{position:absolute;left:2%;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line-2);border-radius:999px;background:rgba(10,16,32,.86);font-size:11.5px;color:rgba(255,255,255,.82);white-space:nowrap;animation:ctNode 5s ease-in-out var(--delay,0s) infinite} .ct-node svg{width:14px;height:14px;fill:none;stroke:var(--brand-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ct-node--1{top:18%} .ct-node--2{top:46%} .ct-node--3{top:74%} @keyframes ctNode{0%,72%,100%{transform:translateX(0);border-color:var(--line-2)}20%{transform:translateX(5px);border-color:rgba(93,180,255,.45)}} .ct-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:136px;padding:18px 12px;text-align:center;border-radius:18px} .ct-core b{display:block;font-size:13px;letter-spacing:.14em;color:#fff} .ct-core em{display:block;margin-top:4px;font-size:10.5px;font-style:normal;color:var(--muted)} .ct-core__rings{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;pointer-events:none} .ct-core__rings i{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:1px solid rgba(93,180,255,.5);border-radius:50%;animation:ctRing 3.4s var(--ease-out) infinite} .ct-core__rings i:nth-child(2){animation-delay:1.1s} .ct-core__rings i:nth-child(3){animation-delay:2.2s} @keyframes ctRing{0%{transform:scale(.6);opacity:.75}100%{transform:scale(2.5);opacity:0}} .ct-reply{position:absolute;right:1%;top:50%;transform:translateY(-50%);width:132px;padding:13px 14px;border:1px solid rgba(30,123,255,.32);border-radius:14px;background:rgba(30,123,255,.09)} .ct-reply>span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .ct-reply b{display:block;margin-top:5px;font-size:13px;font-weight:600;color:#fff} .ct-reply b i{font-style:normal;color:var(--brand-2)} .ct-reply__bar{display:block;margin-top:10px;height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;position:relative} .ct-reply__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));animation:ctBar 3.2s var(--ease) infinite} @keyframes ctBar{0%{transform:translateX(-100%)}60%,100%{transform:translateX(264%)}} /* --- channel cards --- */ .ct-chs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px} .ct-ch{position:relative;display:block;padding:26px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card));text-decoration:none;overflow:hidden;transition:border-color .4s var(--ease),transform .4s var(--ease)} .ct-ch::after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(30,123,255,.13),transparent 70%);transition:opacity .4s var(--ease);pointer-events:none} .ct-ch:hover{border-color:rgba(30,123,255,.4);transform:translateY(-4px)} .ct-ch:hover::after{opacity:1} .ct-ch i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-soft);border:1px solid rgba(30,123,255,.28)} .ct-ch i svg{width:20px;height:20px;fill:none;stroke:var(--brand-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ct-ch b{display:block;margin:16px 0 7px;font-size:17px;color:#fff} .ct-ch>span{display:block;font-size:14px;color:var(--light-2)} .ct-ch em{display:block;margin-top:7px;font-size:12.8px;font-style:normal;line-height:1.55;color:var(--muted)} .ct-ch__go{display:inline-flex!important;align-items:center;gap:7px;margin-top:16px;font-size:12.5px;color:var(--brand-2)} .ct-ch__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)} .ct-ch:hover .ct-ch__go svg{transform:translateX(4px)} .ct-ch--wa{border-color:rgba(30,123,255,.32);background:linear-gradient(180deg,rgba(30,123,255,.1),var(--card))} /* --- form layout --- */ .ct-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:24px;margin-top:46px;align-items:start} .ct-form{padding:30px 28px;border:1px solid var(--line);border-radius:22px;background:var(--card)} .ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .ct-field{display:block;position:relative} .ct-field--full{margin-bottom:18px} .ct-field>span{display:block;margin-bottom:9px;font-size:13px;color:var(--light-2)} .ct-field>span em{font-style:normal;color:var(--muted)} .ct-field input,.ct-field select,.ct-field textarea{width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.03);color:#fff;font:inherit;font-size:14.5px;transition:border-color .3s var(--ease),background .3s var(--ease)} .ct-field textarea{resize:vertical;min-height:128px;line-height:1.6} .ct-field input::placeholder,.ct-field textarea::placeholder{color:rgba(255,255,255,.3)} .ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:rgba(30,123,255,.6);background:rgba(30,123,255,.06)} .ct-field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px} .ct-field select option{background:#0a1020;color:#fff} .ct-err{display:none;margin-top:7px;font-size:12.2px;font-style:normal;color:#ff8a8a} .ct-err.is-on,#ctSubmitErr.is-on,#ctFlashErr{display:block} .ct-field.is-bad input,.ct-field.is-bad select,.ct-field.is-bad textarea{border-color:rgba(255,120,120,.55);background:rgba(255,90,90,.06)} .ct-field.is-bad .ct-err,.ct-agree.is-bad .ct-err{display:block} .ct-form .btn[disabled]{opacity:.7;cursor:wait} .ct-hint{display:block;margin-top:8px;font-size:12px;font-weight:400;color:var(--muted)} .ct-hint i{font-style:normal;color:var(--brand-2)} /* timing chips */ .ct-chips{display:flex;flex-wrap:wrap;gap:9px} .ct-chip{position:relative;cursor:pointer} .ct-chip input{position:absolute;opacity:0;width:0;height:0} .ct-chip span{display:inline-block;padding:12px 15px;border:1px solid var(--line-2);border-radius:11px;font-size:13.2px;color:rgba(255,255,255,.72);transition:all .3s var(--ease)} .ct-chip input:checked+span{border-color:rgba(30,123,255,.6);background:rgba(30,123,255,.14);color:#fff} .ct-chip input:focus-visible+span{outline:2px solid var(--brand-2);outline-offset:2px} /* agreement */ .ct-agree{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:4px 0 22px;cursor:pointer;font-size:13.2px;line-height:1.6;color:var(--muted)} .ct-agree input{position:absolute;opacity:0;width:0;height:0} .ct-agree__box{width:20px;height:20px;margin-top:1px;border:1px solid var(--line-2);border-radius:6px;background:rgba(255,255,255,.03);transition:all .3s var(--ease);position:relative} .ct-agree__box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:transform .28s var(--ease-out)} .ct-agree input:checked+.ct-agree__box{background:var(--brand);border-color:var(--brand)} .ct-agree input:checked+.ct-agree__box::after{transform:rotate(45deg) scale(1)} .ct-agree .ct-err{grid-column:2} .ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .ct-copy{padding:12px 16px;border:1px dashed var(--line-2);border-radius:11px;background:none;color:rgba(255,255,255,.66);font:inherit;font-size:13px;cursor:pointer;transition:all .3s var(--ease)} .ct-copy:hover{border-color:var(--brand-2);color:#fff} .ct-form.is-shake{animation:ctShake .45s var(--ease)} @keyframes ctShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}56%{transform:translateX(6px)}80%{transform:translateX(-3px)}} /* --- side rail --- */ .ct-side{display:grid;gap:18px;position:sticky;top:112px} .ct-card{padding:24px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card))} .ct-card__t{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)} .ct-prog__bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .ct-prog__bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 16px rgba(30,123,255,.5);transition:width .5s var(--ease-out)} .ct-prog b{display:block;margin-top:12px;font-size:19px;color:#fff} .ct-prog b i{font-style:normal} .ct-prog em{display:block;margin-top:5px;font-size:12.5px;font-style:normal;color:var(--muted)} .ct-steps{margin:0;padding:0;list-style:none;counter-reset:ctst;display:grid;gap:18px} .ct-steps li{position:relative;padding-left:36px;counter-increment:ctst} .ct-steps li::before{content:counter(ctst);position:absolute;left:0;top:0;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(30,123,255,.4);border-radius:8px;background:var(--brand-soft);font-size:11.5px;color:var(--brand-2)} .ct-steps b{display:block;margin-bottom:5px;font-size:14.5px;color:#fff} .ct-steps span{display:block;font-size:13px;line-height:1.6;color:var(--muted)} .ct-facts{margin:0;padding:0;list-style:none;display:grid;gap:14px} .ct-facts li{display:grid;gap:4px} .ct-facts i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ct-facts b{font-size:13.5px;font-weight:500;line-height:1.55;color:var(--light-2)} /* --- success panel --- */ .ct-done{max-width:720px;margin:34px auto 0;padding:38px 32px;text-align:center;border:1px solid rgba(30,123,255,.34);border-radius:22px;background:linear-gradient(180deg,rgba(30,123,255,.1),var(--card));animation:ctIn .6s var(--ease-out) both} @keyframes ctIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .ct-done__ico{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 8px rgba(30,123,255,.16)} .ct-done__ico svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .ct-done h3{margin:0 0 10px;font-size:24px;color:#fff} .ct-done p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted)} .ct-done p b{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em} .ct-done__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px} /* --- coverage map --- */ .ct-map{position:relative;list-style:none;margin:52px auto 0;padding:0;width:min(560px,100%);aspect-ratio:1/1.05;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 40% 45%,rgba(30,123,255,.09),transparent 62%),var(--card)} .ct-map li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;font-size:12.8px;color:rgba(255,255,255,.78);white-space:nowrap} .ct-map li i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 12px rgba(93,180,255,.75);flex:0 0 auto} .ct-map li i::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(93,180,255,.55);border-radius:50%;animation:ctDot 2.8s var(--ease-out) infinite} .ct-map li:nth-child(2) i::after{animation-delay:.4s} .ct-map li:nth-child(3) i::after{animation-delay:.8s} .ct-map li:nth-child(4) i::after{animation-delay:1.2s} .ct-map li:nth-child(5) i::after{animation-delay:1.6s} .ct-map li:nth-child(6) i::after{animation-delay:2s} @keyframes ctDot{0%{transform:scale(.7);opacity:.8}100%{transform:scale(2.6);opacity:0}} .ct-faq-wrap{max-width:860px} .ct-faq{margin-top:40px} @media (max-width:1080px){ .ct-chs{grid-template-columns:1fr 1fr} .ct-grid{grid-template-columns:1fr} .ct-side{position:static;grid-template-columns:1fr 1fr} .ct-side .ct-prog{grid-column:1/-1} } @media (max-width:640px){ .ct-chs{grid-template-columns:1fr} .ct-row{grid-template-columns:1fr;gap:16px} .ct-form{padding:22px 18px} .ct-side{grid-template-columns:1fr} .ct-actions .btn,.ct-actions .ct-copy{width:100%;text-align:center} .ct-node{font-size:10.5px;padding:7px 10px} .ct-core{width:114px} .ct-reply{width:112px;padding:11px} .ct-map{aspect-ratio:1/1.25} .ct-map li{font-size:11.5px} .ct-done{padding:28px 20px} .ct-done h3{font-size:20px} } @media (prefers-reduced-motion:reduce){ .ct-rails .lp,.ct-node,.ct-core__rings i,.ct-reply__bar::after,.ct-map li i::after{animation:none!important} .ct-done{animation:none} } /* --- 22b. Section badge icons : outlined, never filled --- */ .center-badge svg{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .center-badge svg.i-spark{fill:var(--brand);stroke:none} .center-badge{align-items:center;gap:8px;white-space:nowrap} /* ============================================================ 23. About page : name, rules, process rail, team ============================================================ */ .ab .svc-word{opacity:.05} /* --- hero visual : three stacked layers, light climbing --- */ .svis--ab{position:relative;min-height:408px;display:block} .svis--ab .ab-rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .svis--ab .ab-rails path{fill:none;stroke-linecap:round} .svis--ab .ab-rails .ln{stroke:rgba(255,255,255,.13);stroke-width:1.4} .svis--ab .ab-rails .lp{stroke:var(--brand-2);stroke-width:2.2;stroke-dasharray:22 300;filter:drop-shadow(0 0 6px rgba(93,180,255,.55));animation:abFlow var(--dur,2.6s) linear var(--delay,0s) infinite} @keyframes abFlow{from{stroke-dashoffset:322}to{stroke-dashoffset:0}} .ab-layer{position:absolute;left:50%;width:min(88%,362px);transform:translate(-50%,14px); padding:14px 18px;border-radius:16px;border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(20,30,50,.92),rgba(10,16,32,.92)); box-shadow:0 18px 44px rgba(0,0,0,.4);opacity:0; animation:abRise .9s var(--ease-out) var(--delay,0s) both;will-change:transform,opacity} .ab-layer--1{top:318px} .ab-layer--2{top:190px} .ab-layer--3{top:62px} @keyframes abRise{from{opacity:0;transform:translate(-50%,26px)}to{opacity:1;transform:translate(-50%,0)}} .ab-layer__k{display:inline-block;font:800 11px/1 var(--font,inherit);letter-spacing:.14em;color:var(--brand-2); padding:4px 8px;border-radius:999px;border:1px solid var(--brand-soft);background:var(--brand-soft);margin-bottom:6px} .ab-layer b{display:block;color:#fff;font-size:17px;letter-spacing:-.01em} .ab-layer em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px} .ab-layer--2{border-color:rgba(93,180,255,.24)} .ab-layer--3{border-color:rgba(93,180,255,.34);box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 0 1px rgba(93,180,255,.1),0 0 40px rgba(30,123,255,.16)} .ab-beam{position:absolute;left:50%;top:40px;width:2px;height:328px;transform:translateX(-50%); background:linear-gradient(180deg,rgba(93,180,255,0),rgba(93,180,255,.5),rgba(93,180,255,0)); opacity:.5;animation:abBeam 4.2s var(--ease) 2.6s infinite} @keyframes abBeam{0%,100%{opacity:.16}50%{opacity:.6}} /* --- the name : three cards --- */ .ab-name{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px} .ab-name__card{position:relative;padding:26px 24px 24px;border-radius:20px;border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));overflow:hidden} .ab-name__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(220px 140px at var(--mx,50%) var(--my,0%),rgba(30,123,255,.16),transparent 70%);opacity:0;transition:opacity .35s} .ab-name__card:hover::after{opacity:1} .ab-name__k{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em; background:linear-gradient(180deg,#fff,rgba(93,180,255,.75));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px} .ab-name__card h3{color:#fff;font-size:18px;margin:0 0 8px} .ab-name__card p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0} /* --- story + pull quote --- */ .ab-story{display:grid;grid-template-columns:1.35fr .85fr;gap:28px;align-items:start;margin-top:34px} .ab-story__txt h3{color:#fff;font-size:22px;margin:0 0 12px} .ab-story__txt p{color:var(--muted);font-size:15px;line-height:1.78;margin:0 0 12px} .ab-pull{position:relative;margin:0;padding:26px 24px;border-radius:20px; border:1px solid rgba(93,180,255,.2);background:linear-gradient(180deg,rgba(30,123,255,.12),rgba(10,16,32,.5))} .ab-pull::before{content:"“";position:absolute;top:6px;left:18px;font-size:64px;line-height:1;color:rgba(93,180,255,.32)} .ab-pull p{color:#eaf1ff;font-size:17.5px;line-height:1.62;margin:18px 0 12px;font-weight:500} .ab-pull cite{font-style:normal;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)} /* --- rules --- */ .ab-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} .ab-rule{position:relative;padding:24px 22px;border-radius:18px;border:1px solid var(--line);background:var(--card); transition:transform .4s var(--ease-out),border-color .3s} .ab-rule:hover{transform:translateY(-4px);border-color:var(--line-2)} .ab-rule>span{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--brand-2);margin-bottom:10px} .ab-rule h3{color:var(--light-2);font-size:16.5px;margin:0 0 8px} .ab-rule p{color:var(--muted);font-size:14.5px;line-height:1.66;margin:0} /* --- process rail --- */ .ab-proc{position:relative;margin-top:38px;padding-left:78px} .ab-proc__rail{position:absolute;left:29px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.1);border-radius:2px} .ab-proc__rail i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px; background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 0 12px rgba(30,123,255,.55)} .ab-step{position:relative;padding:0 0 30px} .ab-step:last-child{padding-bottom:0} .ab-step__n{position:absolute;left:-78px;top:0;width:58px;height:58px;border-radius:16px;display:grid;place-items:center; font-size:15px;font-weight:800;color:#fff;border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(20,30,50,.95),rgba(10,16,32,.95));z-index:1} .ab-step.is-on .ab-step__n{border-color:rgba(93,180,255,.5);box-shadow:0 0 0 4px rgba(30,123,255,.1),0 0 28px rgba(30,123,255,.28);color:var(--brand-2)} .ab-step__b{padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)} .ab-step.is-on .ab-step__b{border-color:var(--line-2);background:rgba(255,255,255,.045)} .ab-step__b h3{color:#fff;font-size:18px;margin:0 0 8px} .ab-step__b>p{color:var(--muted);font-size:14.8px;line-height:1.7;margin:0 0 14px} .ab-step__b ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ab-step__b li{display:flex;gap:12px;align-items:baseline;font-size:14px;color:var(--light-2); padding-top:10px;border-top:1px dashed rgba(255,255,255,.1)} .ab-step__b li i{flex:0 0 84px;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)} /* --- team --- */ .ab-team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px} .ab-person{padding:24px 20px;border-radius:18px;border:1px solid var(--line);background:var(--card);text-align:center; transition:transform .4s var(--ease-out),border-color .3s} .ab-person:hover{transform:translateY(-4px);border-color:var(--line-2)} .ab-person__ava{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center; font-size:15px;font-weight:800;letter-spacing:.06em;color:var(--brand-2); border:1px solid rgba(93,180,255,.3);background:radial-gradient(circle at 50% 30%,rgba(30,123,255,.28),rgba(10,16,32,.9))} .ab-person b{display:block;color:var(--light-2);font-size:15.5px;margin-bottom:6px} .ab-person em{display:block;font-style:normal;font-size:12.5px;color:var(--brand-2);margin-bottom:10px} .ab-person p{color:var(--muted);font-size:14px;line-height:1.62;margin:0} .ab-person--net{border-style:dashed} .ab-person--net .ab-person__ava{font-size:24px} /* --- numbers --- */ .ab-nums{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 0;padding:0} .ab-nums li{text-align:center;padding:22px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)} .ab-nums b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1} .ab-nums span{display:block;margin-top:6px;font-size:12.8px;color:var(--muted)} /* --- stack chips --- */ .ab-stack{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:26px; padding:22px;border-radius:18px;border:1px dashed var(--line-2);background:rgba(255,255,255,.02)} .ab-stack>span{width:100%;text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2);margin-bottom:4px} .ab-stack i{font-style:normal;font-size:13px;color:var(--light-2);padding:7px 13px;border-radius:999px; border:1px solid var(--line);background:rgba(255,255,255,.04)} .ab-faq-wrap{max-width:860px} @media (max-width:1024px){ .ab-name,.ab-rules{grid-template-columns:repeat(2,1fr)} .ab-story{grid-template-columns:1fr} .ab-team{grid-template-columns:repeat(2,1fr)} .ab-nums{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .svis--ab{min-height:360px} .ab-layer{width:94%;padding:12px 14px} .ab-layer--1{top:280px}.ab-layer--2{top:166px}.ab-layer--3{top:52px} .ab-beam{height:290px;top:34px} .ab-name,.ab-rules{grid-template-columns:1fr} .ab-team{grid-template-columns:1fr} .ab-proc{padding-left:56px} .ab-proc__rail{left:20px} .ab-step__n{left:-56px;width:42px;height:42px;border-radius:13px;font-size:13px} .ab-step__b{padding:16px 16px} .ab-step__b li{flex-direction:column;gap:2px} .ab-step__b li i{flex:none} .ab-nums b{font-size:28px} } @media (prefers-reduced-motion:reduce){ .ab-layer{animation:none;opacity:1;transform:translate(-50%,0)} .svis--ab .ab-rails .lp,.ab-beam{animation:none} } /* --- 23b. About hero : the beam stays behind the panels, never across them --- */ .svis--ab .ab-rails{z-index:0} .svis--ab .ab-beam{z-index:0} .svis--ab .ab-layer{z-index:2} /* ============================================================ 24. Services hub : chooser, bands, comparison table ============================================================ */ .sv .svc-word{opacity:.05} /* --- hero visual : six tiles feeding one core --- */ .svis--sv{position:relative;min-height:408px;display:block} .svis--sv .sv-rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} .svis--sv .sv-rails path{fill:none;stroke-linecap:round;stroke-linejoin:round} .svis--sv .sv-rails .ln{stroke:rgba(255,255,255,.12);stroke-width:1.4} .svis--sv .sv-rails .lp{stroke:var(--brand-2);stroke-width:2.2;stroke-dasharray:20 260; filter:drop-shadow(0 0 6px rgba(93,180,255,.5));animation:svFlow var(--dur,2.8s) linear var(--delay,0s) infinite} @keyframes svFlow{from{stroke-dashoffset:280}to{stroke-dashoffset:0}} .sv-tile{position:absolute;width:104px;height:44px;margin-left:-52px;margin-top:-22px;z-index:2; display:grid;place-items:center;border-radius:13px;font-size:13px;font-weight:600;color:var(--light-2); border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(20,30,50,.95),rgba(10,16,32,.95)); box-shadow:0 12px 30px rgba(0,0,0,.34);opacity:0;animation:svTile .7s var(--ease-out) var(--delay,0s) both} @keyframes svTile{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}} .sv-tile--1{left:108px;top:96px}.sv-tile--2{left:243px;top:96px}.sv-tile--3{left:378px;top:96px} .sv-tile--4{left:108px;top:312px}.sv-tile--5{left:243px;top:312px}.sv-tile--6{left:378px;top:312px} .sv-core{position:absolute;left:243px;top:204px;width:138px;height:64px;margin-left:-69px;margin-top:-32px;z-index:3; display:grid;place-items:center;align-content:center;border-radius:18px;text-align:center; border:1px solid rgba(93,180,255,.4);background:linear-gradient(180deg,rgba(18,32,60,.98),rgba(9,14,28,.98)); box-shadow:0 0 0 1px rgba(93,180,255,.1),0 18px 44px rgba(0,0,0,.45),0 0 44px rgba(30,123,255,.2)} .sv-core b{display:block;font-size:15px;letter-spacing:.1em;color:#fff} .sv-core em{display:block;font-style:normal;font-size:11px;color:var(--brand-2);margin-top:2px} .sv-core__ring{position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(93,180,255,.4); animation:svRing 3.4s var(--ease-out) infinite;pointer-events:none} .sv-core__ring--2{animation-delay:1.7s} @keyframes svRing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}} /* --- goal chooser --- */ .sv-goals{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px} .sv-goal{font:inherit;font-size:14px;color:var(--light-2);cursor:pointer;padding:11px 18px;border-radius:999px; border:1px solid var(--line-2);background:rgba(255,255,255,.04);transition:all .3s var(--ease)} .sv-goal:hover{border-color:rgba(93,180,255,.4);background:rgba(30,123,255,.1)} .sv-goal.is-on{color:#fff;border-color:rgba(93,180,255,.6);background:rgba(30,123,255,.2);box-shadow:0 0 24px rgba(30,123,255,.22)} .sv-verdict{text-align:center;margin:18px auto 0;max-width:760px;font-size:15px;line-height:1.7;color:var(--muted);min-height:52px} .sv-verdict b{color:var(--brand-2);font-weight:600} /* --- service cards --- */ .sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px} .sv-card{position:relative;display:flex;flex-direction:column;padding:26px 24px;border-radius:20px; border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); transition:transform .45s var(--ease-out),border-color .3s,opacity .35s} .sv-card:hover{transform:translateY(-5px);border-color:rgba(93,180,255,.34)} .sv-card.is-hide{display:none} .sv-card.is-hit{border-color:rgba(93,180,255,.5);box-shadow:0 0 0 1px rgba(93,180,255,.12),0 0 40px rgba(30,123,255,.16)} .sv-card__ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px; border:1px solid rgba(93,180,255,.28);background:rgba(30,123,255,.12)} .sv-card__ico svg{width:21px;height:21px;fill:none;stroke:var(--brand-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .sv-card h3{color:#fff;font-size:19px;margin:0 0 8px} .sv-card__for{color:var(--light-2);font-size:14.5px;line-height:1.66;margin:0 0 14px} .sv-card__pts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px} .sv-card__pts li{position:relative;padding-left:18px;font-size:13.8px;color:var(--muted);line-height:1.55} .sv-card__pts li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%; background:var(--brand-2);box-shadow:0 0 8px rgba(93,180,255,.6)} .sv-card__meta{display:flex;gap:8px;margin:auto 0 16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.1)} .sv-card__meta span{flex:1;font-size:13.5px;font-weight:600;color:#fff} .sv-card__meta i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);font-weight:500;margin-bottom:3px} .sv-card__go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand-2);text-decoration:none} .sv-card__go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)} .sv-card__go:hover svg{transform:translateX(4px)} /* --- price bands --- */ .sv-bands{margin-top:34px;display:grid;gap:12px} .sv-band{display:grid;grid-template-columns:190px 1fr 150px;gap:16px;align-items:center} .sv-band__n{font-size:14px;color:var(--light-2)} .sv-band__t{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)} .sv-band__t i{position:absolute;top:-1px;bottom:-1px;left:var(--a);right:calc(100% - var(--b));border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 18px rgba(30,123,255,.35); transform-origin:left;animation:svBand 1s var(--ease-out) both} @keyframes svBand{from{transform:scaleX(0)}to{transform:scaleX(1)}} .sv-band__v{text-align:right;font-size:13.5px;font-weight:600;color:#fff} .sv-band--axis .sv-band__t{background:none;border:none;height:auto;display:flex;justify-content:space-between} .sv-band--axis em{font-style:normal;font-size:11px;color:var(--muted)} /* --- comparison table --- */ .sv-tblwrap{margin-top:30px;overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02)} .sv-tbl{width:100%;min-width:720px;border-collapse:collapse;font-size:14px} .sv-tbl th,.sv-tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)} .sv-tbl thead th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);font-weight:600; background:rgba(255,255,255,.03)} .sv-tbl tbody th{color:#fff;font-weight:600;white-space:nowrap} .sv-tbl td{color:var(--muted)} .sv-tbl tbody tr:last-child th,.sv-tbl tbody tr:last-child td{border-bottom:none} .sv-tbl tbody tr{transition:background .25s} .sv-tbl tbody tr:hover{background:rgba(30,123,255,.07)} .sv-tbl tbody tr:hover th{color:var(--brand-2)} .sv-note{text-align:center;margin:18px auto 0;max-width:720px;font-size:13.8px;color:var(--muted);line-height:1.7} /* --- included list --- */ .sv-incl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 0;padding:0} .sv-incl li{padding:20px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03); font-size:13.8px;color:var(--muted);line-height:1.6} .sv-incl b{display:block;color:var(--light-2);font-size:14.8px;margin-bottom:7px} /* --- care plans --- */ .sv-care{margin-top:34px;padding:26px 24px;border-radius:20px;border:1px dashed var(--line-2);background:rgba(255,255,255,.02)} .sv-care h3{text-align:center;color:#fff;font-size:19px;margin:0 0 20px} .sv-care__row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sv-care__c{padding:20px 18px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-align:center} .sv-care__c--mid{border-color:rgba(93,180,255,.34);background:linear-gradient(180deg,rgba(30,123,255,.12),rgba(14,22,38,.9))} .sv-care__c b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);margin-bottom:8px} .sv-care__c span{display:block;font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em} .sv-care__c i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--muted);margin-left:6px} .sv-care__c p{margin:10px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6} /* --- boundaries --- */ .sv-narrow{max-width:900px} .sv-not{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px} .sv-not li{padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:var(--card); font-size:14.5px;color:var(--muted);line-height:1.68;border-left:3px solid rgba(93,180,255,.4)} .sv-not b{display:block;color:var(--light-2);font-size:16px;margin-bottom:6px} .sv-faq-wrap{max-width:860px} @media (max-width:1024px){ .sv-grid{grid-template-columns:repeat(2,1fr)} .sv-incl{grid-template-columns:repeat(2,1fr)} .sv-band{grid-template-columns:150px 1fr 120px;gap:12px} } @media (max-width:720px){ .svis--sv{min-height:360px} .sv-tile{width:88px;height:38px;margin-left:-44px;margin-top:-19px;font-size:12px} .sv-tile--1{left:70px}.sv-tile--3{left:340px}.sv-tile--4{left:70px}.sv-tile--6{left:340px} .sv-grid{grid-template-columns:1fr} .sv-incl{grid-template-columns:1fr} .sv-care__row{grid-template-columns:1fr} .sv-goal{font-size:13px;padding:9px 14px} .sv-band{grid-template-columns:1fr;gap:6px} .sv-band__v{text-align:left;font-size:13px} .sv-band--axis{display:none} } @media (prefers-reduced-motion:reduce){ .sv-tile,.sv-band__t i{animation:none;opacity:1;transform:none} .svis--sv .sv-rails .lp,.sv-core__ring{animation:none} } .sv-verdict__n{display:inline-block;margin-left:6px;font-size:12.5px;color:var(--brand-2);opacity:.85} /* --- 24b. Price bands : driven by the reveal, never by a paused keyframe --- */ .sv-bands .sv-band__t i{animation:none;transform:scaleX(1);transition:transform .9s var(--ease-out)} .sv-bands:not(.is-in) .sv-band__t i{transform:scaleX(0)} /* --- 24c. Price bands : own variable names, reveal class is "in" --- */ .sv-band__t i{left:var(--sa);right:calc(100% - var(--sb));animation:none} .sv-bands .sv-band__t i{transform:scaleX(0);transition:transform .9s var(--ease-out)} .sv-bands.in .sv-band__t i{transform:scaleX(1)} /* ========================================================================== 25. Live window (in-site preview) + real project captures ========================================================================== */ html.lv-lock, html.lv-lock body { overflow: hidden; } .lv{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.4vw,34px);opacity:0;transition:opacity .22s var(--ease)} .lv.is-on{opacity:1} .lv[hidden]{display:none} .lv__back{position:absolute;inset:0;background:rgba(3,6,14,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .lv__win{position:relative;z-index:1;width:min(1240px,100%);height:min(860px,100%);display:flex;flex-direction:column; background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line-2);border-radius:18px;overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(93,180,255,.08),0 0 90px rgba(30,123,255,.14); transform:translateY(14px) scale(.985);transition:transform .28s var(--ease-out)} .lv.is-on .lv__win{transform:none} .lv__bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);flex:none} .lv__dots{display:flex;gap:6px;flex:none} .lv__dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)} .lv__dots i:first-child{background:rgba(255,95,86,.55)} .lv__dots i:nth-child(2){background:rgba(255,189,46,.5)} .lv__dots i:last-child{background:rgba(39,201,63,.5)} .lv__addr{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.28);overflow:hidden} .lv__name{font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap} .lv__url{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lv__seg{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.28);flex:none} .lv__seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:color .2s,background .2s} .lv__seg button.is-on{background:var(--brand-soft);color:var(--light-2)} .lv__ext{flex:none;font-size:12px;color:var(--brand-2);text-decoration:none;padding:6px 12px;border:1px solid rgba(93,180,255,.28);border-radius:999px;transition:background .2s,border-color .2s} .lv__ext:hover{background:var(--brand-soft);border-color:rgba(93,180,255,.5)} .lv__x{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--light-2);cursor:pointer;font-size:13px;line-height:1;transition:background .2s,transform .2s} .lv__x:hover{background:rgba(255,255,255,.08);transform:rotate(90deg)} .lv__body{flex:1;min-height:0;position:relative;background:#0a0f1c} .lv__stage{position:absolute;inset:0;display:flex;justify-content:center;transition:padding .3s var(--ease)} .lv__win.is-phone .lv__stage{padding:16px calc(50% - 200px)} .lv__frame{width:100%;height:100%;border:0;background:#fff;opacity:1;transition:border-radius .3s var(--ease)} .lv__win.is-phone .lv__frame{border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.5)} .lv__load{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0a0f1c;color:var(--muted);font-size:13px} .lv__load.is-on{display:flex} .lv__spin{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--brand-2);animation:lvSpin .9s linear infinite} @keyframes lvSpin{to{transform:rotate(360deg)}} .lv__fall{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:clamp(16px,3vw,34px);text-align:center;background:radial-gradient(120% 90% at 50% 0%,rgba(30,123,255,.14),transparent 60%),#0a0f1c;overflow:auto} .lv__fall.is-on{display:flex} .lv__fall img{max-width:min(100%,900px);border-radius:12px;border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.5)} .lv__fall p{max-width:56ch;color:var(--muted);font-size:13.5px;line-height:1.6;margin:0} .lv__foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.02);font-size:12px;color:var(--muted)} .lv__link{border:0;background:none;color:var(--brand-2);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px} @media (max-width:760px){ .lv{padding:0} .lv__win{width:100%;height:100%;border-radius:0;border:0} .lv__seg,.lv__foot span{display:none} .lv__win.is-phone .lv__stage{padding:0} .lv__addr{padding:6px 10px} .lv__name{font-size:12px} } @media (prefers-reduced-motion:reduce){ .lv,.lv__win{transition:none} .lv__spin{animation-duration:2.4s} } /* --- real captures inside Work cards ------------------------------------ */ .wk-card__vis--photo{position:relative;padding:0;overflow:hidden;background:#0a0f1c} .wk-photo{display:block;width:100%;aspect-ratio:720/347;object-fit:cover;object-position:50% 0; transform:scale(1.02);transition:transform .6s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.92) contrast(1.02)} .wk-card:hover .wk-photo{transform:scale(1.055);filter:saturate(1) contrast(1.04)} .wk-card__vis--photo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(6,10,20,.28) 0%,transparent 34%,rgba(6,10,20,.72) 100%)} .wk-photo__bar{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;align-items:center;gap:6px; padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(6,10,20,.62); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .wk-photo__bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.26);flex:none} .wk-photo__bar b{margin-left:6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wk-card__vis--photo .wk-card__stamp{z-index:3} /* live button inside the card CTA row */ .wk-live{display:inline-flex;align-items:center;gap:8px} .wk-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#27c93f;box-shadow:0 0 0 0 rgba(39,201,63,.5);animation:wkLive 2.4s ease-out infinite} @keyframes wkLive{0%{box-shadow:0 0 0 0 rgba(39,201,63,.45)}70%{box-shadow:0 0 0 8px rgba(39,201,63,0)}100%{box-shadow:0 0 0 0 rgba(39,201,63,0)}} /* capture strip on the case study */ .cs-shot{margin:clamp(22px,4vw,40px) 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line-2); background:#0a0f1c;box-shadow:0 30px 70px rgba(0,0,0,.42)} .cs-shot img{display:block;width:100%;height:auto} .cs-shot figcaption{padding:11px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted); display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} /* --- 25b. new-tab link + live link rows ---------------------------------- */ .wk-ext{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);text-decoration:none; padding:8px 4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .wk-ext:hover{color:var(--brand-2);border-bottom-color:rgba(93,180,255,.42)} .cs-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center; margin:clamp(22px,4vw,38px) auto 0;padding:14px 18px;max-width:760px; border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)} .cs-links > span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px} .cs-shot + .badge.center-badge{margin-top:clamp(30px,5vw,54px)} /* ============================================================ 26. i18n — language switcher + RTL support (EN / FR / AR) ============================================================ */ .lang-sw { position: relative; display: inline-flex; z-index: 90; } .lang-sw > button.lang { display: inline-flex; align-items: center; gap: 6px; } .lang__code { font-variant-numeric: tabular-nums; letter-spacing: .04em; } .lang-sw > button.lang[aria-expanded="true"] { color: var(--light-2); } .lang-sw__menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 100; min-width: 172px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(10, 16, 32, .96); box-shadow: 0 18px 46px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); animation: langIn .18s var(--ease-out) both; } .lang-sw__menu[hidden] { display: none; } @keyframes langIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .lang-sw__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; text-align: start; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); } .lang-sw__menu button i { font-style: normal; font-size: 10.5px; letter-spacing: .08em; min-width: 22px; padding: 2px 0; text-align: center; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); } .lang-sw__menu button:hover { background: rgba(255, 255, 255, .05); color: var(--light-2); } .lang-sw__menu button.is-on { color: var(--light-2); background: var(--brand-soft); } .lang-sw__menu button.is-on i { border-color: var(--brand); color: var(--brand-2); } /* mobile menu row */ .lang-row { display: flex; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .lang-row button { flex: 1; padding: 10px 6px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .lang-row button:hover { color: var(--light-2); border-color: var(--line-2); } .lang-row button.is-on { color: var(--light-2); border-color: var(--brand); background: var(--brand-soft); } /* ---------- Arabic typography ---------------------------------- */ html.lang-ar body, html.lang-ar button, html.lang-ar input, html.lang-ar textarea, html.lang-ar select { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif; } html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar h4 { letter-spacing: 0; line-height: 1.28; } html.lang-ar p, html.lang-ar li { line-height: 1.85; } html.lang-ar .eyebrow, html.lang-ar .badge, html.lang-ar .chip { letter-spacing: 0; } /* ---------- RTL layout ----------------------------------------- */ html[dir="rtl"] body { direction: rtl; text-align: start; } html[dir="rtl"] .topbar__right, html[dir="rtl"] .nav__in, html[dir="rtl"] .footer { direction: rtl; } html[dir="rtl"] .i-arrow, html[dir="rtl"] .btn svg, html[dir="rtl"] .link svg, html[dir="rtl"] .sv-card__go svg, html[dir="rtl"] .cs-next__card svg { transform: scaleX(-1); } /* keep code, prices, URLs and latin marks readable */ html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] .hero__code, html[dir="rtl"] .lv__addr, html[dir="rtl"] .lv__url, html[dir="rtl"] .cs-stack, html[dir="rtl"] .wk-photo__bar { direction: ltr; text-align: left; } /* elements positioned with physical offsets */ html[dir="rtl"] .lang-sw__menu { inset-inline-end: 0; } html[dir="rtl"] .mobile-menu__in { text-align: start; } html[dir="rtl"] .sp-opt, html[dir="rtl"] .ct-card, html[dir="rtl"] .ab-card, html[dir="rtl"] .sv-card, html[dir="rtl"] .wk-card, html[dir="rtl"] .cs-mod { text-align: start; } /* numbers stay latin inside prices and metrics */ html[dir="rtl"] .price, html[dir="rtl"] .wk-nums, html[dir="rtl"] .cs-facts, html[dir="rtl"] .sv-band__val { direction: ltr; unicode-bidi: isolate; } /* ============================================================ 27) Client area — login + portal (prefix .ce-) ============================================================ */ .ce-main { padding-top: 96px; } /* ---- 27.1 login ---- */ .ce-login { position: relative; min-height: calc(100vh - 96px); display: grid; place-items: center; padding: 60px 0 100px; overflow: hidden; } .ce-login__bg { position: absolute; inset: 0; pointer-events: none; } .ce-login__bg .ce-orb { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(30,123,255,.16), rgba(30,123,255,0) 62%); } .ce-login__bg .ce-grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%); } .ce-login__in { position: relative; z-index: 2; width: min(980px, 92vw); display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; } .ce-key { position: relative; display: grid; place-items: center; } .ce-key__box { position: relative; width: 190px; height: 190px; border-radius: 30px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--card-2), var(--card)); display: grid; place-items: center; box-shadow: 0 30px 90px rgba(0,0,0,.5); } .ce-key__box img { width: 96px; height: auto; opacity: .96; } .ce-key__ring { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); animation: ceSpin 34s linear infinite; } .ce-key__ring--2 { width: 400px; height: 400px; border-style: solid; border-color: rgba(255,255,255,.06); animation-duration: 52s; animation-direction: reverse; } .ce-key__dot { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 16px var(--brand-2); } @keyframes ceSpin { to { transform: rotate(360deg); } } .ce-key__cap { margin-top: 26px; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .ce-form { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17,26,44,.92), rgba(14,22,38,.92)); border-radius: 22px; padding: 30px 28px; box-shadow: 0 24px 70px rgba(0,0,0,.42); } .ce-form h1 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.14; margin: 0 0 8px; letter-spacing: -.02em; } .ce-form__sub { color: var(--muted); font-size: 15px; margin: 0 0 22px; } .ce-field { display: block; margin-bottom: 14px; } .ce-field > span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .ce-field input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6,10,20,.7); color: var(--light-2); font: inherit; font-size: 15px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .ce-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .ce-field textarea { width: 100%; min-height: 140px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6,10,20,.7); color: var(--light-2); font: inherit; font-size: 15px; resize: vertical; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .ce-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .ce-form__row { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; } .ce-form__note { margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.55; } .ce-form__err { display: none; margin-top: 12px; font-size: 13.5px; color: #ffb4b4; border: 1px solid rgba(255,120,120,.28); background: rgba(255,80,80,.08); border-radius: 10px; padding: 9px 12px; } .ce-form__err.is-live { display: block; } .ce-demo { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; } .ce-demo b { display: block; font-size: 13px; margin-bottom: 6px; } .ce-demo code { font-size: 12.5px; color: var(--brand-2); background: rgba(30,123,255,.1); border: 1px solid var(--brand-soft); border-radius: 7px; padding: 2px 7px; } /* ---- 27.2 portal shell ---- */ .ce-app { padding: 32px 0 90px; } .ce-app__in { width: min(1280px, 94vw); margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } .ce-side { position: sticky; top: 96px; border: 1px solid var(--ervup-border-dark); background: rgba(11, 22, 40, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--ervup-r-xl); padding: 18px; box-shadow: var(--ervup-shadow-sm); } .ce-side__who { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--ervup-border-dark); margin-bottom: 12px; } .ce-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #04101f; background: linear-gradient(140deg, var(--ervup-blue-400), var(--ervup-blue-600)); flex: none; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } .ce-side__who-info { min-width: 0; } .ce-side__name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ervup-text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ce-side__identity { display: block; font-size: 12px; color: var(--ervup-text-white-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ce-side__mail { margin: 0 0 12px; font-size: 12px; color: var(--ervup-text-white-soft); word-break: break-all; } .ce-side__flash { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ervup-success-dark-line); background: var(--ervup-success-dark-soft); color: var(--ervup-success-dark); font-size: 12.5px; line-height: 1.45; } .ce-project { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--ervup-r-md); border: 1px solid var(--ervup-border-dark); background: rgba(5, 11, 24, 0.5); } .ce-project__k { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ervup-text-white-soft); } .ce-project__name { margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ervup-text-white); } .ce-project__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; } .ce-project__ref { color: var(--ervup-blue-400); font-weight: 500; font-family: var(--ervup-font-mono, monospace); font-size: 11.5px; } .ce-project__label { display: grid; gap: 6px; } .ce-project select, .ce-project__select { width: 100%; min-height: 40px; padding: 6px 10px; border-radius: var(--ervup-r-sm); border: 1px solid var(--ervup-border-dark-strong); background: var(--ervup-navy-900); color: var(--ervup-text-white); font: inherit; font-size: 12.5px; cursor: pointer; } .ce-project select:focus, .ce-project__select:focus { outline: none; border-color: var(--ervup-blue-400); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } .ce-project--select .ce-project__meta { margin-top: 8px; } .ce-nav { display: grid; gap: 14px; } .ce-nav__section { display: grid; gap: 2px; } .ce-nav__heading { display: block; padding: 4px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ervup-text-white-soft); } .ce-nav button, .ce-nav a, .ce-nav__link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 9px 11px; border-radius: var(--ervup-r-sm); border: 1px solid transparent; background: none; color: var(--ervup-text-white-muted); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); text-decoration: none; box-sizing: border-box; } .ce-nav__icon { width: 16px; height: 16px; flex: none; opacity: 0.7; } .ce-nav button i, .ce-nav a i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; } .ce-nav button:hover, .ce-nav a:hover, .ce-nav__link:hover { background: rgba(255,255,255,.04); color: var(--ervup-text-white); } .ce-nav button.is-on, .ce-nav a.is-on, .ce-nav__link.is-on { background: var(--ervup-blue-soft); border-color: var(--ervup-border-dark-brand); color: #fff; font-weight: 600; } .ce-nav button.is-on .ce-nav__icon, .ce-nav a.is-on .ce-nav__icon { opacity: 1; color: var(--ervup-blue-400); } .ce-nav button.is-on i, .ce-nav a.is-on i { opacity: 1; background: var(--ervup-blue-400); box-shadow: 0 0 10px var(--ervup-blue-400); } .ce-nav__tag { margin-inline-start: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.09); color: var(--ervup-text-white); } .ce-nav__tag--brand { background: var(--ervup-blue-600); color: #fff; } .ce-nav__tag--warn { background: rgba(217, 119, 6, 0.22); color: var(--ervup-warning-dark); border: 1px solid var(--ervup-warning-dark-line); } .ce-nav__tag--soon { background: rgba(255,255,255,.06); color: var(--ervup-text-white-soft); font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } .ce-side__out { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ervup-border-dark); } .ce-side__out-btn, .ce-side__out button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; border-radius: var(--ervup-r-sm); border: 1px solid var(--ervup-border-dark-strong); background: transparent; color: var(--ervup-text-white-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .ce-side__out-btn:hover, .ce-side__out button:hover { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.05); } .ce-view { display: none; } .ce-view.is-on { display: block; animation: ceIn .26s var(--ease-out) both; } @keyframes ceIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ce-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .ce-head__main { flex: 1 1 320px; } .ce-head__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .ce-head__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ervup-blue-400); } .ce-head h2, .ce-head__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; margin: 0 0 8px; letter-spacing: -.025em; color: var(--ervup-text-white); line-height: 1.15; } .ce-head p, .ce-head__desc { margin: 0; color: var(--ervup-text-white-muted); font-size: 14.5px; line-height: 1.55; max-width: 64ch; } .ce-head__notes { margin-top: 10px !important; color: var(--ervup-text-white-soft) !important; font-size: 13.5px !important; max-width: 68ch; } .ce-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ce-head__ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ervup-blue-400); letter-spacing: .02em; } .ce-cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .ce-box { grid-column: span 12; border: 1px solid var(--ervup-border-dark); background: linear-gradient(180deg, rgba(16, 29, 51, 0.55), rgba(11, 22, 40, 0.92)); border-radius: var(--ervup-r-xl); padding: 22px 24px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); transition: border-color .2s var(--ease), box-shadow .22s var(--ease), transform .2s var(--ease); } .ce-box:hover { border-color: rgba(255,255,255,.12); } .ce-box--6 { grid-column: span 6; } .ce-box--4 { grid-column: span 4; } .ce-box--8 { grid-column: span 8; } .ce-box--attention { border-color: rgba(217, 119, 6, 0.4); background: linear-gradient(180deg, rgba(48, 32, 12, 0.72), rgba(14, 22, 38, 0.94)); box-shadow: 0 10px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,176,60,.08); } .ce-box--progress { background: linear-gradient(145deg, rgba(30, 64, 175, 0.16), rgba(11, 22, 40, 0.95) 48%); border-color: rgba(59, 130, 246, 0.22); } .ce-box__t { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ervup-text-white-soft); margin: 0 0 16px; } .ce-box__t s { flex: 1; height: 1px; background: var(--ervup-border-dark); text-decoration: none; } .ce-cards > .ce-box { animation: ceCardIn .32s var(--ease-out) both; } .ce-cards > .ce-box:nth-child(1) { animation-delay: .02s; } .ce-cards > .ce-box:nth-child(2) { animation-delay: .05s; } .ce-cards > .ce-box:nth-child(3) { animation-delay: .08s; } .ce-cards > .ce-box:nth-child(4) { animation-delay: .11s; } .ce-cards > .ce-box:nth-child(5) { animation-delay: .14s; } .ce-cards > .ce-box:nth-child(6) { animation-delay: .17s; } .ce-cards > .ce-box:nth-child(7) { animation-delay: .2s; } .ce-cards > .ce-box:nth-child(8) { animation-delay: .23s; } @keyframes ceCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---- 27.3 pulse / progress ---- */ .ce-pulse { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ce-ring { position: relative; width: 124px; height: 124px; flex: none; } .ce-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ce-ring circle { fill: none; stroke-width: 9; } .ce-ring .ce-ring__bg { stroke: rgba(255,255,255,.08); } .ce-ring .ce-ring__fg { stroke: url(#ceGrad); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out); filter: drop-shadow(0 0 8px rgba(59,130,246,.35)); } .ce-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .ce-pulse__txt { flex: 1 1 160px; min-width: 0; } .ce-pulse__txt b, .ce-pulse__title { display: block; font-size: 18px; margin-bottom: 6px; line-height: 1.3; } .ce-pulse__txt span, .ce-pulse__sub { color: var(--muted); font-size: 13.5px; line-height: 1.45; } .ce-steps { position: relative; display: grid; gap: 0; margin-top: 4px; padding-left: 2px; } .ce-steps::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, rgba(59,130,246,.45), rgba(255,255,255,.06)); border-radius: 2px; pointer-events: none; } .ce-step { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding: 14px 12px 14px 0; border-radius: 14px; transition: background .18s var(--ease); } .ce-step:hover { background: rgba(255,255,255,.025); } .ce-step__n { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-2); color: var(--muted); background: var(--ervup-navy-900); font-variant-numeric: tabular-nums; } .ce-step__body { min-width: 0; padding-top: 2px; } .ce-step b { display: block; font-size: 14.5px; font-weight: 600; } .ce-step span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; } .ce-step__date { margin-top: 6px !important; font-size: 12px !important; color: var(--ervup-text-white-soft) !important; } .ce-step__s { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 4px; white-space: nowrap; } .ce-step.is-done .ce-step__n { border-color: rgba(60,220,150,.45); color: #7ce8b6; background: rgba(60,220,150,.12); } .ce-step.is-done .ce-step__s { color: #7ce8b6; } .ce-step.is-done b { color: rgba(255,255,255,.78); } .ce-step.is-now { background: rgba(37, 99, 235, 0.08); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22); } .ce-step.is-now .ce-step__n { border-color: var(--brand); color: #fff; background: linear-gradient(140deg, var(--ervup-blue-600), var(--ervup-blue-400)); box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 6px 16px rgba(37,99,235,.28); } .ce-step.is-now .ce-step__s { color: var(--brand-2); } .ce-step.is-now b { color: #fff; } .ce-step.is-blocked .ce-step__n { border-color: rgba(255,176,60,.45); color: #ffce8a; background: rgba(255,176,60,.12); } .ce-step.is-blocked .ce-step__s { color: #ffce8a; } .ce-step.is-blocked { background: rgba(255,176,60,.04); } .ce-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; } .ce-kpi { border: 1px solid var(--ervup-border-dark); border-radius: 14px; padding: 14px 15px; background: rgba(5, 11, 24, 0.45); transition: border-color .18s var(--ease), transform .18s var(--ease); } .ce-kpi:hover { border-color: rgba(255,255,255,.14); transform: translateY(-1px); } .ce-kpi b { display: block; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; } .ce-kpi span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; } .ce-kpi.is-blocked { border-color: rgba(255,176,60,.3); background: rgba(255,176,60,.06); } .ce-kpi.is-money b { font-size: clamp(16px, 1.6vw, 20px); } .ce-kpi.is-danger { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.06); } .ce-kpi.is-danger span { color: var(--ervup-danger-dark); } .ce-money-summary { margin: 0 0 16px; } .ce-money-summary__bar { margin-bottom: 10px; } .ce-money-summary__copy { margin: 0; color: var(--ervup-text-white-muted); font-size: 13.5px; line-height: 1.45; } .ce-money-summary__copy strong { color: var(--ervup-text-white); font-weight: 600; } .ce-dash-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .ce-dash-list li, .ce-dash-list a { display: grid; gap: 3px; text-decoration: none; color: inherit; } .ce-dash-list li { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ervup-border-dark); background: rgba(5, 11, 24, 0.42); transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); } .ce-dash-list a:hover li, .ce-dash-list li:has(a:hover), a.ce-dash-row:hover, .ce-dash-list li:hover { border-color: rgba(59,130,246,.28); background: rgba(37,99,235,.07); transform: translateY(-1px); } .ce-dash-list li.is-unread { border-color: rgba(30,123,255,.32); background: rgba(30,123,255,.1); } .ce-dash-list b { font-size: 14px; font-weight: 600; } .ce-dash-list span, .ce-dash-list em { font-size: 12.5px; color: var(--muted); font-style: normal; } .ce-dash-list .ce-amt { color: var(--light-2); font-variant-numeric: tabular-nums; font-weight: 600; } .ce-dash__stat { margin: 0 0 10px; font-size: 14.5px; color: var(--ervup-text-white-muted); } .ce-dash__stat.is-unread { color: var(--ervup-blue-400); font-weight: 500; } .ce-dash__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--brand-2); text-decoration: none; transition: color .16s var(--ease), gap .16s var(--ease); } .ce-dash__link:hover { color: #fff; gap: 9px; } .ce-link { color: var(--ervup-blue-400); text-decoration: none; } .ce-link:hover { color: #fff; } .ce-flash-ok { color: var(--ervup-success-dark); } .ce-note-block { margin-top: 20px; border-top: 1px solid var(--ervup-border-dark); padding-top: 14px; } .ce-project-label { color: var(--ervup-blue-400); } /* ---- 27.4 blocker meter ---- */ .ce-blk { border-color: rgba(255,176,60,.28); background: linear-gradient(180deg, rgba(60,42,16,.55), rgba(14,22,38,.85)); } .ce-blk__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .ce-blk__d { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; font-weight: 700; background: rgba(255,176,60,.16); color: #ffce8a; border: 1px solid rgba(255,176,60,.3); flex: none; } .ce-blk__top b { display: block; font-size: 16px; } .ce-blk__top span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .ce-owe { display: grid; gap: 8px; } .ce-owe li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(6,10,20,.45); font-size: 14px; } .ce-owe li b { font-weight: 600; } .ce-owe li em { margin-inline-start: auto; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; } .ce-owe__who { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; flex: none; } .ce-owe__who--you { background: rgba(255,176,60,.16); color: #ffce8a; } .ce-owe__who--us { background: rgba(30,123,255,.16); color: var(--brand-2); } .ce-owe__who--ok { background: rgba(60,220,150,.14); color: #7ce8b6; } .ce-owe li.is-done b { text-decoration: line-through; opacity: .6; } .ce-owe li button { margin-inline-start: 6px; height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: none; color: var(--light-2); font: inherit; font-size: 12.5px; cursor: pointer; } .ce-owe li button:hover { border-color: var(--brand); color: #fff; background: var(--brand-soft); } /* ---- 27.5 builds / preview ---- */ .ce-builds { display: grid; gap: 10px; } .ce-build { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6,10,20,.42); } .ce-build__v { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); } .ce-build.is-last .ce-build__v { border-color: var(--brand); color: var(--brand-2); background: var(--brand-soft); } .ce-build b { display: block; font-size: 14.5px; } .ce-build span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .ce-build .ce-open { height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: var(--light-2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } .ce-build .ce-open:hover { border-color: var(--brand); background: var(--brand-soft); color: #fff; } .ce-ticker { display: flex; align-items: flex-end; gap: 5px; height: 74px; margin-top: 4px; } .ce-ticker i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand-2), rgba(30,123,255,.25)); transform-origin: bottom; animation: ceBar .9s var(--ease-out) both; } @keyframes ceBar { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* ---- 27.6 invoices ---- */ .ce-tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .ce-tbl th { text-align: start; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 0 10px 12px; border-bottom: 1px solid var(--line); } .ce-tbl td { padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .ce-tbl tbody tr { transition: background .15s var(--ease); } .ce-tbl tbody tr:hover { background: rgba(255,255,255,.025); } .ce-tbl tr:last-child td { border-bottom: 0; } .ce-tbl a { color: var(--ervup-blue-400); text-decoration: none; } .ce-tbl a:hover { color: #fff; } .ce-tbl .is-amount, .ce-amt { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; } .ce-kicker { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .04em; color: var(--muted); } .ce-kicker a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .16s var(--ease); } .ce-kicker a:hover { color: var(--brand-2); } .ce-invoice-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; } .ce-invoice-cards a { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6,10,20,.4); color: inherit; text-decoration: none; transition: border-color .16s var(--ease), transform .16s var(--ease); } .ce-invoice-cards a:hover { border-color: rgba(59,130,246,.35); transform: translateY(-1px); } .ce-invoice-cards b { font-size: 15px; } .ce-invoice-cards em { font-style: normal; color: var(--muted); font-size: 13px; } .ce-proposal-cards, .ce-contract-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; } .ce-proposal-cards a, .ce-contract-cards a { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6,10,20,.4); color: inherit; text-decoration: none; transition: border-color .16s var(--ease), transform .16s var(--ease); } .ce-proposal-cards a:hover, .ce-contract-cards a:hover { border-color: rgba(59,130,246,.35); transform: translateY(-1px); } .ce-proposal-cards b, .ce-contract-cards b { font-size: 15px; } .ce-proposal-cards em, .ce-contract-cards em { font-style: normal; color: var(--muted); font-size: 13px; } .ce-request-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; } .ce-request-cards a { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6,10,20,.4); color: inherit; text-decoration: none; transition: border-color .16s var(--ease), transform .16s var(--ease); } .ce-request-cards a:hover { border-color: rgba(59,130,246,.35); transform: translateY(-1px); } .ce-request-cards b { font-size: 15px; word-break: break-word; } .ce-request-cards em { font-style: normal; color: var(--muted); font-size: 13px; } .ce-invoice-lines { display: none; list-style: none; margin: 0; padding: 0; gap: 12px; } .ce-invoice-lines li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); } .ce-invoice-lines li:first-child { border-top: 0; } .ce-invoice-lines span, .ce-invoice-lines em { font-style: normal; color: var(--muted); font-size: 13.5px; } .ce-invoice-totals { margin-top: 18px; display: grid; gap: 10px; padding-top: 4px; } .ce-invoice-totals p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; color: var(--muted); font-size: 14px; } .ce-invoice-totals p.is-total { color: var(--light-2); font-size: 18px; font-weight: 600; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--ervup-border-dark-strong); } .ce-invoice-totals .ce-amt { font-variant-numeric: tabular-nums; } .ce-muted-line { color: var(--muted); font-size: 12.5px; margin-top: 4px; } .ce-pay-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .ce-pay-history li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); } .ce-pay-history li:first-child { border-top: 0; } .ce-pay-history b { font-size: 15px; font-variant-numeric: tabular-nums; } .ce-pay-history span { color: var(--muted); font-size: 13.5px; } .ce-pill { display: inline-block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-weight: 500; } .ce-pill--paid { border-color: rgba(60,220,150,.35); color: #7ce8b6; background: rgba(60,220,150,.1); } .ce-pill--due { border-color: rgba(255,176,60,.35); color: #ffce8a; background: rgba(255,176,60,.1); } .ce-pill--soon { border-color: var(--line-2); } .ce-pill--bad { border-color: rgba(255,120,120,.35); color: #ffb4b4; background: rgba(255,80,80,.08); } .ce-paybar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 4px 0 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .ce-paybar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ervup-blue-600), var(--ervup-blue-400)); transition: width 1s var(--ease-out); box-shadow: 0 0 12px rgba(59,130,246,.35); } /* ---- 27.7 change request estimator ---- */ .ce-cr { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; } .ce-opts { display: grid; gap: 9px; } .ce-opt { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(6,10,20,.42); cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); } .ce-opt:hover { border-color: var(--line-2); } .ce-opt input { position: absolute; opacity: 0; pointer-events: none; } .ce-opt__b { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--line-2); flex: none; margin-top: 2px; display: grid; place-items: center; } .ce-opt input:checked + .ce-opt__b { background: var(--brand); border-color: var(--brand); } .ce-opt input:checked + .ce-opt__b::after { content: ""; width: 6px; height: 10px; border: 2px solid #fff; border-top: 0; border-inline-start: 0; transform: rotate(42deg) translate(-1px,-1px); } .ce-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } .ce-opt b { display: block; font-size: 14.5px; } .ce-opt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .ce-opt em { margin-inline-start: auto; font-style: normal; font-size: 13px; color: var(--brand-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .ce-quote { position: sticky; top: 96px; border: 1px solid var(--brand-soft); border-radius: 16px; padding: 18px; background: linear-gradient(180deg, rgba(30,123,255,.12), rgba(14,22,38,.9)); } .ce-quote__n { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ce-quote__n small { font-size: 15px; color: var(--muted); margin-inline-start: 4px; } .ce-quote__l { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ce-quote ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; font-size: 13px; color: var(--muted); } .ce-quote .btn { width: 100%; margin-top: 15px; justify-content: center; } /* ---- 27.8 files / vault ---- */ .ce-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .ce-file { border: 1px solid var(--ervup-border-dark); border-radius: 14px; padding: 16px; background: rgba(5, 11, 24, 0.45); display: grid; gap: 4px; color: inherit; text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } a.ce-file:hover { border-color: rgba(59, 130, 246, 0.4); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); } .ce-file__k { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: var(--brand-soft); color: var(--brand-2); border: 1px solid rgba(30,123,255,.28); margin-bottom: 8px; } .ce-file b { font-size: 14px; word-break: break-word; line-height: 1.35; } .ce-file span { font-size: 12.5px; color: var(--muted); } .ce-vault { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; border: 1px dashed rgba(60,220,150,.32); border-radius: 14px; background: rgba(60,220,150,.06); margin-top: 14px; } .ce-vault p { margin: 0; font-size: 13.5px; color: var(--muted); flex: 1 1 260px; } .ce-decision { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; } .ce-decision__form, .ce-sign { flex: 1 1 280px; min-width: 0; display: grid; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--ervup-border-dark); background: rgba(5, 11, 24, 0.4); } .ce-decision__form:has(button.btn--brand), .ce-sign { border-color: rgba(59, 130, 246, 0.28); background: linear-gradient(180deg, rgba(37, 99, 235, 0.1), rgba(5, 11, 24, 0.5)); } .ce-decision__copy { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); } .ce-opt--confirm { align-items: flex-start; } .ce-sign-awaiting { margin-bottom: 14px; } .ce-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); } .ce-field textarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6,10,20,.7); color: var(--light-2); font: inherit; font-size: 14.5px; resize: vertical; box-sizing: border-box; } .ce-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .ce-head .btn { flex: none; } @media (max-width: 720px) { .ce-decision { flex-direction: column; } .ce-decision__form .btn, .ce-sign .btn { width: 100%; min-height: 44px; } .ce-head { align-items: stretch; } .ce-head .btn { width: 100%; } } /* ---- 27.9 health ---- */ .ce-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .ce-g { text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(6,10,20,.42); } .ce-g b { display: block; font-size: 30px; letter-spacing: -.02em; } .ce-g b.is-good { color: #7ce8b6; } .ce-g span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .ce-g i { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: 11px; overflow: hidden; } .ce-g i s { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); text-decoration: none; } /* ---- 27.10 messages ---- */ .ce-msgs { display: grid; gap: 14px; max-height: 480px; overflow: auto; padding: 4px 6px 8px 0; scroll-behavior: smooth; } .ce-msg { display: grid; grid-template-columns: 38px 1fr; gap: 12px; animation: ceCardIn .28s var(--ease-out) both; } .ce-msg .ce-av { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; } .ce-msg__b { border: 1px solid var(--ervup-border-dark); border-radius: 16px 16px 16px 6px; padding: 13px 15px; background: rgba(5, 11, 24, 0.45); } .ce-msg__b b { display: block; font-size: 13.5px; margin-bottom: 5px; } .ce-msg__b b em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; margin-inline-start: 8px; } .ce-msg__b p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.84); white-space: pre-wrap; overflow-wrap: anywhere; } .ce-msg--me .ce-av { background: linear-gradient(140deg, var(--brand-2), var(--brand)); } .ce-msg--me .ce-msg__b { border-color: rgba(59, 130, 246, 0.32); background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.06)); border-radius: 16px 16px 6px 16px; } .ce-send { display: flex; gap: 10px; margin-top: 16px; align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--ervup-border-dark); } .ce-send input, .ce-send textarea { flex: 1; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(6,10,20,.7); color: var(--light-2); font: inherit; font-size: 14.5px; resize: vertical; box-sizing: border-box; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .ce-send input { height: 48px; padding: 0 14px; resize: none; } .ce-send input:focus, .ce-send textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .ce-send__field { flex: 1; min-width: 0; margin: 0; } .ce-send .btn { flex: none; min-height: 48px; height: 48px; } .ce-notes { display: grid; gap: 12px; } .ce-note { border: 1px solid var(--ervup-border-dark); border-radius: 14px; padding: 16px 18px; background: rgba(5, 11, 24, 0.42); transition: border-color .18s var(--ease), transform .18s var(--ease); } .ce-note:hover { border-color: rgba(255,255,255,.12); } .ce-note.is-unread { border-color: rgba(59, 130, 246, 0.35); background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(5, 11, 24, 0.5)); box-shadow: inset 3px 0 0 var(--ervup-blue-500); } .ce-note.is-new { animation: ceCardIn .32s var(--ease-out) both; } .ce-note__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ce-note__top em { font-style: normal; color: var(--muted); font-size: 12px; } .ce-note b { display: block; font-size: 15px; margin-bottom: 4px; } .ce-note p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.82); } .ce-note__project { color: var(--ervup-blue-400) !important; font-size: 13px !important; margin-bottom: 4px !important; } .ce-note__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; } .ce-pref-lock { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(6,10,20,.42); margin-bottom: 12px; } .ce-pref-lock b { display: block; font-size: 14.5px; } .ce-pref-lock span span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .ce-prefs .ce-opt { position: relative; } .ce-prefs .ce-opt:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .ce-pref-state { margin-inline-start: auto; font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; } .ce-pref-state::after { content: "Off"; } .ce-opt:has(input:checked) .ce-pref-state { color: var(--brand-2); } .ce-opt:has(input:checked) .ce-pref-state::after { content: "On"; } .ce-pager { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .ce-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--light-2); text-decoration: none; font-size: 13px; font-weight: 500; transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease); } .ce-pager__btn:hover:not(.is-disabled) { border-color: var(--brand); background: var(--brand-soft); color: #fff; } .ce-pager__btn.is-disabled { color: var(--muted); pointer-events: none; opacity: .55; } .ce-request-body { margin: 0; text-align: start; white-space: pre-wrap; font-size: 15px; line-height: 1.65; color: var(--ervup-text-white); } .ce-workflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; } .ce-workflow__step { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ervup-border-dark); background: rgba(5, 11, 24, 0.45); color: var(--ervup-text-white-soft); font-size: 12.5px; font-weight: 500; } .ce-workflow__step.is-done { border-color: rgba(60, 220, 150, 0.3); color: #7ce8b6; background: rgba(60, 220, 150, 0.08); } .ce-workflow__step.is-active { border-color: rgba(59, 130, 246, 0.4); color: #fff; background: rgba(37, 99, 235, 0.18); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .ce-workflow__arrow { color: var(--ervup-text-white-soft); font-size: 14px; } /* ---- 27.11 responsive ---- */ @media (max-width: 1080px) { .ce-app__in { grid-template-columns: 1fr; } .ce-side { position: static; } .ce-project { width: 100%; } .ce-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow: auto; gap: 6px; padding-bottom: 4px; } .ce-nav button, .ce-nav a { white-space: nowrap; } .ce-side__out { display: block; } .ce-box--6, .ce-box--4, .ce-box--8 { grid-column: span 12; } .ce-cr { grid-template-columns: 1fr; } .ce-quote { position: static; } } @media (max-width: 860px) { .ce-login__in { grid-template-columns: 1fr; gap: 30px; } .ce-key { order: 2; } .ce-key__ring--2 { display: none; } .ce-tbl { display: none; } .ce-invoice-cards, .ce-proposal-cards, .ce-contract-cards, .ce-invoice-lines, .ce-request-cards { display: grid; } .ce-files { grid-template-columns: 1fr; } .ce-send { flex-wrap: wrap; } .ce-send__field { flex: 1 1 100%; } .ce-send .btn { width: 100%; } } /* Button Loading & Micro-interaction feedback */ .btn.is-loading, .ce-side__out-btn.is-loading { position: relative; pointer-events: none; opacity: .82; cursor: wait; } .btn.is-loading::after, .ce-side__out-btn.is-loading::after { content: ""; display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ceSpin 0.6s linear infinite; margin-inline-start: 8px; vertical-align: middle; } .is-active-pressed { transform: scale(0.985) !important; } @media (prefers-reduced-motion: reduce) { .ce-key__ring, .ce-ticker i, .ce-view.is-on, .ce-cards > .ce-box, .ce-msg, .ce-note.is-new { animation: none !important; } .ce-box, .ce-kpi, .ce-dash-list li, .ce-file, .ce-step, .ce-invoice-cards a, .ce-proposal-cards a, .ce-contract-cards a, .ce-request-cards a { transition: none !important; } } /* RTL tweaks */ html[dir="rtl"] .ce-amt, html[dir="rtl"] .ce-quote__n, html[dir="rtl"] .ce-opt em { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] .ce-ring svg { transform: rotate(-90deg) scaleY(-1); }