/* Arthora — the one design system for every page of arthora.in. Light, colourful and premium: a white ground, saturated gradient accents, soft COLOURED shadows instead of black ones, and the same 3D language throughout — tilt cards, perspective screenshots, a rotating carousel. The CRM keeps its violet family; the ERP gets a teal/emerald family by switching custom properties on — same components, different light. */ :root{ /* the ground: 70% white, 20% light blue, 10% accent — blue is a highlight, never a wallpaper */ --ink:#FFFFFF; --soft-blue:#EAF6FF; --light-blue:#D9F0FF; --sky-blue:#8DD8FF; --card:rgba(255,255,255,.78); --line:rgba(46,168,255,.14); --accent:#2EA8FF; --accent2:#1261A0; --blue:#1261A0; --cyan:#2EA8FF; --text:#14202B; --sub:#5A6B7B; --glow:46,168,255; /* rgb of --accent, for coloured shadows */ --chip:#1261A0; --chipbg:rgba(46,168,255,.09); --chipline:rgba(46,168,255,.3); --ok:#059669; /* blue-tinted shadow scale — never grey, never black */ --sh-sm:0 4px 12px rgba(18,97,160,.06); --sh-md:0 12px 32px rgba(18,97,160,.08); --sh-lg:0 24px 60px rgba(18,97,160,.10); --sh-xl:0 40px 100px rgba(18,97,160,.12); --glow-blue:0 0 40px rgba(46,168,255,.28); /* the glass recipe: frosted, with the 1px inner top highlight that reads as premium */ --glass:linear-gradient(145deg,rgba(255,255,255,.85),rgba(234,246,255,.55)); --glass-hl:inset 0 1px 0 rgba(255,255,255,1); } /* each product keeps its own family as the ACCENT inside the blue system */ body.erp{ --accent:#0D9488; --accent2:#0891B2; --cyan:#0E7490; --glow:13,148,136; --chip:#0F766E; --chipbg:rgba(13,148,136,.09); --chipline:rgba(13,148,136,.3); } body.crm{ --accent:#7C3AED; --accent2:#4F46E5; --cyan:#6D28D9; --glow:124,58,237; --chip:#6D28D9; --chipbg:rgba(124,58,237,.08); --chipline:rgba(124,58,237,.28); } *{margin:0;padding:0;box-sizing:border-box} /* overflow-x on alone does not stop the page scrolling sideways — the carousel's side slides lean past the viewport and the document grows unless the root clips too. */ html{scroll-behavior:smooth;overflow-x:clip} body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--ink);color:var(--text);line-height:1.6;overflow-x:clip;font-feature-settings:"ss01","cv11"} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1280px;margin:0 auto;padding:0 28px} .btn{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:14px 28px;font-weight:700;font-size:15px;cursor:pointer;border:0;transition:.25s cubic-bezier(.2,.7,.2,1)} .btn-primary{background:linear-gradient(135deg,var(--blue),var(--accent));color:#fff;box-shadow:0 10px 34px rgba(var(--glow),.35),inset 0 1px 0 rgba(255,255,255,.25)} .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 50px rgba(var(--glow),.45)} .btn-ghost{border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.75);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(18,97,160,.05)} .btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(18,97,160,.09)} /* ---------- animated aurora background ---------- The colour of the site lives back here: big drifting orbs of the brand families, soft on a white ground — an aurora, not a disco. */ .bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#FFFFFF 0%,#F7FBFF 55%,#EAF6FF 100%)} .orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.33} @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,7%) scale(1.15)}} @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,-5%) scale(1.2)}} @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-7%) scale(1.1)}} .gridlines{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(46,168,255,.07) 1.5px,transparent 1.5px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)} /* ---------- nav ---------- */ nav{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(24px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.9);box-shadow:var(--sh-sm),var(--glass-hl)} .navin{display:flex;align-items:center;gap:28px;height:72px} .navlinks{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--sub);align-items:center} .navlinks a:hover{color:var(--text)} .navlinks a.on{color:var(--text);font-weight:700} /* sign-in chooser — two applications behind one Sign in */ .signin{position:relative} .signin summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;padding:10px 20px;background:rgba(255,255,255,.8)} .signin summary::-webkit-details-marker{display:none} .signin[open] summary{background:#fff;box-shadow:0 8px 24px rgba(18,97,160,.08)} .signin .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 30px 70px rgba(18,97,160,.16),0 10px 30px rgba(var(--glow),.12)} .signin .menu a{display:block;padding:10px 14px;border-radius:10px;font-size:13.5px} .signin .menu a:hover{background:rgba(var(--glow),.08);color:var(--text)} /* ---------- hero ---------- */ .hero{position:relative;padding:60px 0 28px;text-align:center;perspective:1400px} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both} .badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--chipline);background:var(--chipbg);border-radius:999px;padding:8px 20px;font-size:13px;font-weight:600;color:var(--chip);margin-bottom:20px;box-shadow:0 4px 24px rgba(var(--glow),.14)} .pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(5,150,105,.5);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}70%{box-shadow:0 0 0 10px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}} h1{font-size:clamp(2.3rem,5.8vw,4rem);font-weight:900;line-height:1.06;letter-spacing:-.025em} /* gradient headline — saturated stops so it sings on white */ .grad{background:linear-gradient(90deg,#7C3AED,#DB2777,#0891B2,#7C3AED);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradshift 6s linear infinite} body.erp .grad{background:linear-gradient(90deg,#0D9488,#0891B2,#4F46E5,#0D9488);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent} @keyframes gradshift{to{background-position:250% 0}} #rotword{display:inline-block;min-width:7.2ch;text-align:left;transition:opacity .35s,transform .35s} #rotword.out{opacity:0;transform:translateY(12px)} .btn-shine{position:relative;overflow:hidden} .btn-shine::after{content:"";position:absolute;pointer-events:none;top:0;left:-80%;width:50%;height:100%;transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shine 3.2s ease-in-out infinite} @keyframes shine{0%,60%{left:-80%}100%{left:160%}} .trustrow{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--sub)} .trustrow span::before{content:"✓";color:var(--ok);font-weight:800;margin-right:7px} .herowrap{position:relative} .fchip{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;border-radius:16px;padding:13px 18px; background:var(--glass);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(160%); box-shadow:0 20px 50px rgba(18,97,160,.12),0 8px 30px rgba(var(--glow),.18),var(--glass-hl);text-align:left} .fchip .fi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px} .fchip b{display:block;font-size:16px;line-height:1.1} .fchip span{font-size:11px;color:var(--sub)} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}} @keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}} @media(max-width:900px){.fchip{display:none}} .hero p.sub{margin:16px auto 0;max-width:640px;font-size:17px;color:var(--sub)} .heroshot{margin:44px auto 0;max-width:1060px;border-radius:22px;border:1px solid rgba(18,97,160,.1);overflow:hidden;background:#fff; transform:perspective(1400px) rotateX(9deg);transform-origin:center top;transition:transform .8s cubic-bezier(.2,.7,.2,1); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 60px 140px rgba(var(--glow),.22),0 24px 60px rgba(18,97,160,.14)} .heroshot:hover{transform:perspective(1400px) rotateX(0deg)} .heroshot img{width:100%} .heroglow{height:90px;margin:-40px auto 0;max-width:900px;background:radial-gradient(ellipse at center,rgba(var(--glow),.3),transparent 70%);filter:blur(30px)} /* ---------- sections ---------- */ section{padding:60px 0;position:relative} .kicker{color:var(--chip);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase} h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:850;letter-spacing:-.015em;margin-top:10px} .lead{color:var(--sub);margin-top:12px;max-width:660px;font-size:16px} /* ---------- 3D tilt cards ---------- */ .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:36px;perspective:1200px} .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;backdrop-filter:blur(12px); transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;position:relative;box-shadow:0 8px 30px rgba(18,97,160,.06)} .card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none; background:linear-gradient(135deg,rgba(8,145,178,.5),transparent 35%,transparent 65%,rgba(var(--glow),.5)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s} .card:hover{transform:translateY(-8px) rotateX(4deg);box-shadow:0 30px 70px rgba(18,97,160,.13),0 12px 40px rgba(var(--glow),.2);border-color:var(--chipline)} .card:hover::before{opacity:1} .card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:23px; background:linear-gradient(135deg,rgba(46,123,239,.14),rgba(var(--glow),.16));box-shadow:0 8px 24px rgba(46,123,239,.16),inset 0 1px 0 rgba(255,255,255,.7);transform:translateZ(30px)} .card h3{margin-top:16px;font-size:17.5px} .card p{margin-top:8px;font-size:14px;color:var(--sub)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:1050px){.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.g4{grid-template-columns:1fr}} /* ---------- product cards on the home page ---------- */ .prodgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px;perspective:1400px;text-align:left} @media(max-width:920px){.prodgrid{grid-template-columns:1fr}} .prod{position:relative;border-radius:26px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(14px);overflow:hidden; transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s;box-shadow:0 24px 60px rgba(18,97,160,.09)} .prod:hover{transform:translateY(-10px) rotateX(2deg);box-shadow:0 44px 100px rgba(18,97,160,.14)} .prod .pbody{padding:30px 30px 0} .prod .ptag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 14px} .prod.crm .ptag{color:#6D28D9;background:rgba(124,58,237,.09);border:1px solid rgba(124,58,237,.3)} .prod.erp .ptag{color:#0F766E;background:rgba(13,148,136,.09);border:1px solid rgba(13,148,136,.32)} .prod:hover.crm{border-color:rgba(124,58,237,.4)} .prod:hover.erp{border-color:rgba(13,148,136,.4)} .prod h3{font-size:26px;font-weight:850;margin-top:14px;letter-spacing:-.01em} .prod .pdesc{color:var(--sub);font-size:14.5px;margin-top:8px} .prod ul{list-style:none;margin-top:16px;display:grid;gap:8px;font-size:13.5px;color:#3A4258} .prod li::before{content:"✓";color:var(--ok);font-weight:800;margin-right:9px} .prod .pcta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap} .prod .peek{margin:26px 26px 0;border-radius:16px 16px 0 0;overflow:hidden;border:1px solid var(--line);border-bottom:0;background:#fff; transform:perspective(1100px) rotateX(6deg);transform-origin:center bottom;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .prod:hover .peek{transform:perspective(1100px) rotateX(0)} .prod.crm .peek{box-shadow:0 -30px 80px rgba(124,58,237,.18)} .prod.erp .peek{box-shadow:0 -30px 80px rgba(13,148,136,.2)} /* ---------- module chips & detailed grid ---------- */ .mods{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;justify-content:center} .mod{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;padding:9px 20px;font-size:13.5px;color:#3A4258;transition:.25s} .mod:hover{background:rgba(var(--glow),.09);border-color:var(--chipline);transform:translateY(-2px)} .modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;text-align:left;perspective:1200px} .modit{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;backdrop-filter:blur(8px);transition:transform .3s,border-color .3s,box-shadow .3s;box-shadow:0 4px 16px rgba(18,97,160,.05)} .modit:hover{border-color:var(--chipline);transform:translateY(-5px) rotateX(3deg);box-shadow:0 18px 44px rgba(18,97,160,.1),0 8px 26px rgba(var(--glow),.16)} .modit .mi{font-size:19px;width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,rgba(46,123,239,.12),rgba(var(--glow),.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .modit b{font-size:13.5px;display:block} .modit span{font-size:11.5px;color:var(--sub);line-height:1.45;display:block;margin-top:2px} @media(max-width:1000px){.modgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.modgrid{grid-template-columns:1fr}} /* ---------- 3D sliding carousel ---------- */ .carousel{position:relative;margin:40px auto 0;max-width:1100px;height:520px;perspective:1700px} .slide{position:absolute;left:50%;top:0;width:min(64%,720px);border-radius:20px;overflow:hidden;border:1px solid var(--line); background:#fff;cursor:pointer;transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s,box-shadow .8s} .slide img{width:100%;height:420px;object-fit:cover;object-position:top left} .slide .cap{padding:16px 22px;font-size:15px;font-weight:650} .slide .cap span{display:block;font-weight:400;font-size:12.5px;color:var(--sub);margin-top:2px} .pos-c{transform:translateX(-50%) translateZ(60px);z-index:3;opacity:1;box-shadow:0 50px 110px rgba(var(--glow),.26),0 26px 60px rgba(18,97,160,.16)} .pos-l{transform:translateX(-96%) rotateY(40deg) scale(.84);z-index:2;opacity:.55;box-shadow:0 30px 70px rgba(18,97,160,.12)} .pos-r{transform:translateX(-4%) rotateY(-40deg) scale(.84);z-index:2;opacity:.55;box-shadow:0 30px 70px rgba(18,97,160,.12)} .pos-h{transform:translateX(-50%) translateZ(-260px) scale(.7);z-index:1;opacity:0;pointer-events:none} .cnav{position:absolute;top:44%;z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);cursor:pointer; background:rgba(255,255,255,.9);backdrop-filter:blur(10px);color:var(--text);font-size:22px;display:grid;place-items:center;transition:.25s;box-shadow:0 8px 24px rgba(18,97,160,.12)} .cnav:hover{background:var(--accent);color:#fff;transform:scale(1.1)} .cnav.prev{left:-6px}.cnav.next{right:-6px} .dots{display:flex;gap:10px;justify-content:center;margin-top:28px} .dot{width:10px;height:10px;border-radius:999px;border:0;cursor:pointer;background:rgba(18,97,160,.15);transition:.3s} .dot.on{width:30px;background:linear-gradient(90deg,var(--blue),var(--accent))} @media(max-width:760px){.carousel{height:400px}.slide{width:86%}.slide img{height:270px}.pos-l,.pos-r{opacity:.25}} /* ---------- pricing ---------- */ .pricing-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(var(--glow),.09),transparent 60%);pointer-events:none} .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:40px;align-items:stretch;perspective:1400px} .plan{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:24px;padding:28px 26px;display:flex;flex-direction:column;backdrop-filter:blur(14px); position:relative;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;box-shadow:0 24px 60px rgba(18,97,160,.08)} /* pointer-events:none, or this full-card overlay eats every click meant for the Buy buttons under it — the pseudo-element hit-tests as the card even though the mask leaves only a 1px visible border. */ .plan::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;pointer-events:none; background:linear-gradient(160deg,rgba(8,145,178,.5),transparent 30%,transparent 70%,rgba(var(--glow),.5)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .4s} .plan:hover{transform:translateY(-10px) rotateX(3deg);box-shadow:0 44px 100px rgba(var(--glow),.2),0 20px 50px rgba(18,97,160,.1);border-color:var(--chipline)} .plan:hover::before{opacity:1} .plan.popular{border-color:var(--chipline);transform:scale(1.045);box-shadow:0 34px 90px rgba(var(--glow),.24),0 16px 44px rgba(18,97,160,.1)} .plan.popular:hover{transform:scale(1.045) translateY(-10px) rotateX(3deg)} .plan.popular::after{content:"MOST POPULAR";position:absolute;pointer-events:none;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--blue),var(--accent));color:#fff; font-size:10.5px;font-weight:800;letter-spacing:.12em;border-radius:999px;padding:5px 16px;box-shadow:0 8px 24px rgba(var(--glow),.35)} .plan h3{font-size:19px} .price{margin-top:16px;font-size:42px;font-weight:900;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .price small{font-size:14px;color:var(--sub);font-weight:500;-webkit-text-fill-color:var(--sub)} .plan ul{list-style:none;margin:20px 0 22px;display:grid;gap:9px;font-size:14px;color:#3A4258} .plan li::before{content:"✓";color:var(--ok);font-weight:800;margin-right:10px} .plan li.no{color:#9AA1B7} .plan li.no::before{content:"✕";color:#B9BFCF} .paywrap{margin-top:auto;border-radius:16px;padding:14px;background:rgba(46,168,255,.05);border:1px solid var(--line);text-align:center} .paywrap .pt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);margin-bottom:10px} .paywrap form{display:grid;place-items:center} .alt{display:block;margin-top:12px;text-align:center;font-size:12.5px;color:var(--sub)} .alt:hover{color:var(--chip)} .trial{margin-top:30px;text-align:center;font-size:14px;color:var(--sub)} .secure{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:var(--sub)} .secure span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.7)} /* product tabs on the pricing page */ .ptabs{display:flex;gap:10px;justify-content:center;margin-top:28px} .ptab{border:1px solid var(--line);border-radius:999px;padding:11px 30px;font-size:14.5px;font-weight:700;color:var(--sub);background:rgba(255,255,255,.8);cursor:pointer;transition:.25s} .ptab.on{color:#fff;background:linear-gradient(135deg,var(--blue),var(--accent));border-color:transparent;box-shadow:0 10px 30px rgba(var(--glow),.3)} /* ---------- scroll reveal ---------- */ .js .srv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .js .srv.in{opacity:1;transform:none} /* ---------- feature deep-dive rows with 3D shots ---------- */ .fx{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:54px;text-align:left} .fx.rev{direction:rtl}.fx.rev>*{direction:ltr} .fx .shotwrap{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 30px 80px rgba(18,97,160,.13),0 14px 40px rgba(var(--glow),.16);cursor:zoom-in} .fx .shotwrap{transform:perspective(1300px) rotateY(8deg) rotateX(2deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)} .fx.rev .shotwrap{transform:perspective(1300px) rotateY(-8deg) rotateX(2deg)} .fx .shotwrap:hover{transform:perspective(1300px) rotateY(0) rotateX(0) scale(1.015)} .fx img{width:100%;display:block} .fx .fk{color:var(--chip);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase} .fx h3{font-size:24px;font-weight:850;letter-spacing:-.01em;margin-top:8px} .fx p{color:var(--sub);font-size:15px;margin-top:10px} .fx ul{list-style:none;margin-top:16px;display:grid;gap:9px;font-size:14px;color:#3A4258} .fx li::before{content:"✓";color:var(--ok);font-weight:800;margin-right:9px} @media(max-width:860px){.fx{grid-template-columns:1fr;gap:22px;margin-top:52px}} /* ---------- lightbox for screenshots (stays dark — it is a theatre) ---------- */ .lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(8,10,20,.86);backdrop-filter:blur(10px);padding:30px;cursor:zoom-out} .lb.open{display:flex} .lb img{max-width:min(1200px,96vw);max-height:90vh;border-radius:14px;border:1px solid rgba(255,255,255,.2);box-shadow:0 60px 140px rgba(0,0,0,.8)} .lb .lbcap{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:13.5px;color:#C9CFDF} /* ---------- sticky module sub-nav on product pages ---------- */ .subnav{position:sticky;top:72px;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .subnav .row{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none} .subnav .row::-webkit-scrollbar{display:none} .subnav a{flex:0 0 auto;font-size:12.5px;font-weight:650;color:var(--sub);border:1px solid transparent;border-radius:999px;padding:7px 15px;transition:.2s} .subnav a:hover,.subnav a.on{color:var(--chip);background:rgba(var(--glow),.09);border-color:var(--chipline)} /* ---------- stats band ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:18px} .stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center;backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(18,97,160,.06)} .stat b{display:block;font-size:30px;font-weight:900;background:linear-gradient(90deg,var(--cyan),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .stat span{font-size:12.5px;color:var(--sub)} /* ---------- how it works ---------- */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px;text-align:left} .step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;backdrop-filter:blur(10px);transition:.3s;box-shadow:0 8px 26px rgba(18,97,160,.06)} .step:hover{transform:translateY(-6px);border-color:var(--chipline);box-shadow:0 18px 44px rgba(var(--glow),.14)} .step .n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--accent));box-shadow:0 8px 22px rgba(var(--glow),.3)} .step h3{margin-top:14px;font-size:17px} .step p{margin-top:8px;font-size:13.5px;color:var(--sub)} /* ---------- comparison table ---------- */ .cmpwrap{overflow-x:auto;margin-top:34px} .cmp{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;text-align:left;box-shadow:0 12px 36px rgba(18,97,160,.07)} .cmp th,.cmp td{padding:14px 20px;border-bottom:1px solid var(--line)} .cmp tr:last-child td{border-bottom:0} .cmp th{background:rgba(var(--glow),.07);font-size:13px;letter-spacing:.05em} .cmp td:nth-child(2){color:#DC2626} .cmp td:nth-child(3){color:var(--ok);font-weight:600} /* ---------- integrations chips ---------- */ .ichips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px} .ichip{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px 22px;font-size:14px;font-weight:650;backdrop-filter:blur(8px);transition:.3s;box-shadow:0 6px 20px rgba(18,97,160,.05)} .ichip:hover{border-color:var(--chipline);transform:translateY(-4px);box-shadow:0 16px 40px rgba(var(--glow),.18)} .ichip em{font-style:normal;font-size:19px} /* ---------- footer columns ---------- */ .fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:24px;text-align:left} .fcols h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A93AC;margin-bottom:8px} .fcols a{display:block;margin-top:9px;font-size:13.5px} .fcols a:hover{color:var(--chip)} .fcols .fdesc{font-size:13.5px;color:var(--sub);margin-top:12px;max-width:300px} @media(max-width:800px){.fcols{grid-template-columns:1fr 1fr}} /* ---------- faq ---------- */ .faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:22px;text-align:left} .faqgrid details{margin-top:0} @media(max-width:760px){.faqgrid{grid-template-columns:1fr}} details.qa{border:1px solid var(--line);border-radius:16px;background:var(--card);backdrop-filter:blur(10px);padding:16px 22px;margin-top:12px;transition:.3s;box-shadow:0 4px 16px rgba(18,97,160,.04)} details.qa:hover{border-color:var(--chipline)} details.qa summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center} details.qa summary::after{content:"+";font-size:20px;color:var(--sub)} details.qa[open] summary::after{content:"–"} details.qa p{margin-top:10px;font-size:14px;color:var(--sub)} /* ---------- trial modal & trial page ---------- */ .tmask{position:fixed;inset:0;z-index:80;background:rgba(8,10,20,.55);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px} .tmask.open{display:flex} .tcard{width:100%;max-width:460px;background:#fff;border:1px solid var(--chipline);border-radius:24px;padding:32px; box-shadow:0 50px 120px rgba(var(--glow),.3),0 24px 60px rgba(18,97,160,.2);animation:pop .35s cubic-bezier(.2,.7,.2,1)} @keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}} .tcard h3{font-size:22px;font-weight:850} .tcard .tsub{font-size:13.5px;color:var(--sub);margin-top:6px} .tfield{margin-top:14px} .tfield label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:6px} .tfield input,.tfield select{width:100%;border-radius:12px;border:1px solid var(--line);background:rgba(46,168,255,.05);padding:12px 14px;font-size:14.5px;color:var(--text);outline:none;transition:.2s} .tfield input:focus,.tfield select:focus{border-color:var(--chipline);box-shadow:0 0 0 4px rgba(var(--glow),.12);background:#fff} .tfield select option{background:#fff} .tmsg{margin-top:14px;font-size:13.5px;display:none} .tclose{position:absolute;top:16px;right:20px;background:none;border:0;color:var(--sub);font-size:22px;cursor:pointer} .tclose:hover{color:var(--text)} /* product picker on /trial/ */ .pickrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px} @media(max-width:560px){.pickrow{grid-template-columns:1fr}} .pick{border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;background:rgba(46,168,255,.05);transition:.25s;text-align:left} .pick b{display:block;font-size:15.5px} .pick span{font-size:12px;color:var(--sub)} .pick.on{border-color:var(--chipline);background:rgba(var(--glow),.08);box-shadow:0 10px 30px rgba(var(--glow),.16)} .credbox{margin-top:16px;text-align:left;border:1px solid var(--chipline);border-radius:14px;padding:16px;background:rgba(var(--glow),.05);font-size:14px} .credbox .k{color:var(--sub);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:10px} .credbox .k:first-child{margin-top:0} .credbox .v{font-weight:700} .credbox .v.mono{font-family:monospace;font-size:16px} /* ---------- cta + footer ---------- */ .cta{background:linear-gradient(135deg,rgba(46,123,239,.1),rgba(var(--glow),.12));border:1px solid var(--chipline);border-radius:28px;padding:44px 32px;text-align:center; box-shadow:0 40px 100px rgba(var(--glow),.16);backdrop-filter:blur(12px)} footer{border-top:1px solid var(--line);padding:28px 0;font-size:13.5px;color:var(--sub);background:rgba(255,255,255,.7)} .foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between} @media(max-width:720px){.navlinks{display:none}.heroshot{transform:none}} /* ---------- reduced motion: the site stays premium, it just stops moving ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} .heroshot,.fx .shotwrap,.prod .peek{transform:none!important} } /* ---------- the floating object system ---------- Not decoration sprinkled on — a layered atmosphere. Every object belongs to a depth layer; the layer sets its blur, opacity and how fast it moves with the pointer and the scroll. Near moves faster than far, always. Everything here is pointer-events:none and aria-hidden: it may never eat a click or reach a screen reader. */ .atmo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .hero .wrap,.pricing-bg .wrap,section>.wrap{position:relative;z-index:1} .fo{position:absolute;pointer-events:none;will-change:transform; animation:fo-breathe var(--dur,7s) ease-in-out infinite;animation-delay:var(--ph,0s)} @keyframes fo-breathe{ 0%,100%{transform:translate3d(0,0,0) rotate(var(--rz,0deg)) scale(1)} 50%{transform:translate3d(var(--dx,4px),var(--amp,-16px),0) rotate(calc(var(--rz,0deg) + 2deg)) scale(1.015)} } /* L1 — far field: soft, blurred, slow */ .fo.l1{filter:blur(10px);opacity:.4} /* L2 — mid field: glass shards catching rim light */ .fo.l2{filter:blur(2px);opacity:.75} /* L4 — near field: sharp, faster, allowed to crop at the edges */ .fo.l4{opacity:.92} /* glass shard — a thin frosted panel, edge catching blue light */ .fo-shard{border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(234,246,255,.35)); border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 44px rgba(18,97,160,.1),inset 0 1px 0 rgba(255,255,255,1); backdrop-filter:blur(6px)} /* torus ring */ .fo-ring{border-radius:50%;border:10px solid rgba(255,255,255,.85); box-shadow:0 16px 40px rgba(18,97,160,.12),inset 0 2px 6px rgba(141,216,255,.5),0 0 0 1px rgba(141,216,255,.35)} /* light mote — a soft glow dot that breathes */ .fo-mote{border-radius:50%;background:radial-gradient(circle,rgba(141,216,255,.75),rgba(141,216,255,0) 70%); animation:fo-breathe var(--dur,8s) ease-in-out infinite,mote-glow calc(var(--dur,8s) * 1.3) ease-in-out infinite} @keyframes mote-glow{0%,100%{opacity:.22}50%{opacity:.5}} /* every discrete object casts a soft blue contact shadow on the white below — without it, objects look pasted on */ .fo-sh{position:absolute;pointer-events:none;border-radius:50%; background:radial-gradient(ellipse,rgba(18,97,160,.09),transparent 70%); filter:blur(6px);animation:fo-shadow var(--dur,7s) ease-in-out infinite;animation-delay:var(--ph,0s)} @keyframes fo-shadow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(.86);opacity:.45}} /* ---------- the glass AI orb (pure CSS, no WebGL) ---------- */ .orb3d{position:relative;border-radius:50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.25) 42%, rgba(234,246,255,.12) 60%), radial-gradient(circle at 68% 74%, rgba(141,216,255,.5), transparent 55%), radial-gradient(circle at 50% 50%, rgba(46,168,255,.14), rgba(18,97,160,.1)); box-shadow: inset 0 2px 10px rgba(255,255,255,1), inset 0 -18px 40px rgba(46,168,255,.28), inset 12px 0 30px rgba(141,216,255,.2), 0 30px 80px rgba(18,97,160,.16), 0 0 60px rgba(141,216,255,.3); border:1px solid rgba(255,255,255,.85)} .orb3d::before{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg, rgba(141,216,255,0), rgba(141,216,255,.4), rgba(46,168,255,.12), rgba(141,216,255,0)); filter:blur(10px);animation:orb-swirl 14s linear infinite} .orb3d::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:34%;border-radius:50%;pointer-events:none; transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(46,168,255,.55),rgba(141,216,255,.18) 60%,transparent 75%); filter:blur(8px);animation:orb-core 4s ease-in-out infinite} @keyframes orb-swirl{to{transform:rotate(360deg)}} @keyframes orb-core{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}} .orb-ring{position:absolute;left:50%;top:50%;border:1.5px solid rgba(141,216,255,.55);border-radius:50%;pointer-events:none; box-shadow:0 0 18px rgba(141,216,255,.25);animation:ring-spin var(--dur,16s) linear infinite} @keyframes ring-spin{from{transform:translate(-50%,-50%) rotateX(var(--tilt,64deg)) rotate(0)}to{transform:translate(-50%,-50%) rotateX(var(--tilt,64deg)) rotate(360deg)}} /* ---------- magnetic buttons & sheen ---------- */ .btn{will-change:transform} .card{--mx:50%;--my:50%} .card:hover{background: radial-gradient(320px circle at var(--mx) var(--my), rgba(141,216,255,.14), transparent 65%), var(--card)} /* ---------- scroll-scrubbed straighten for the hero frame ---------- */ .heroshot{transform:perspective(1400px) rotateX(var(--flat,9deg));transition:none} @media(max-width:720px){.heroshot{transform:none}} /* ---------- custom cursor (fine pointers only) ---------- */ @media (pointer:fine){ .cur-dot{position:fixed;z-index:99;width:8px;height:8px;border-radius:50%;background:var(--accent); pointer-events:none;transform:translate(-50%,-50%);transition:opacity .3s} .cur-ring{position:fixed;z-index:99;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(var(--glow),.5); pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s} .cur-ring.on{width:56px;height:56px;border-color:rgba(var(--glow),.8)} } @media (prefers-reduced-motion: reduce){ .fo,.fo-sh,.fo-mote,.orb3d::before,.orb3d::after,.orb-ring{animation:none!important} .cur-dot,.cur-ring{display:none!important} }