/*
Theme Name: RanKlick
Theme URI: https://ranklick.com/
Author: RanKlick
Author URI: https://ranklick.com/
Description: The RanKlick agency theme. Bright violet design with dark mode, branded page transitions, mega menu and full Elementor support. Works with the RanKlick Site plugin for pages, leads and settings.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ranklick
Tags: custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready, blog, business
*/

:root{
  --bg:#FFFFFF; --bg2:#F7F5FF; --bg3:#EEEAFF; --text:#1C1250; --muted:#5E5985; --line:#E6E1FA;
  --violet:#6A4CF5; --vd:#4B2FD1; --vl:#9D8CFF; --ember:#FF7A1A; --el:#FFA65C; --mint:#13C39C; --sky:#38A6FF; --pink:#FF5FA2;
  --sh1:0 2px 6px rgba(60,40,160,.05), 0 12px 32px -14px rgba(60,40,160,.20);
  --sh2:0 6px 14px rgba(60,40,160,.07), 0 34px 70px -24px rgba(60,40,160,.38);
  --display:"Archivo","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --surface:#FFFFFF; --glass:rgba(255,255,255,.88); --ink:#16102F;
  --t-violet:#F3F0FF; --t-sky:#EAF5FF; --t-green:#E5FAF4; --t-orange:#FFF0E4; --t-pink:#FFE9F3;
  --green-text:#0B8F71; --orange-text:#D35400; --sky-text:#1672C9; --pink-text:#C2306F;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--glass)}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--ember); outline-offset:3px; border-radius:8px}
.wrap{width:min(1220px, 100% - 40px); margin-inline:auto}
h1,h2,h3,h4{font-family:var(--display); line-height:1.06; margin:0; font-weight:700; letter-spacing:-.02em; font-variation-settings:"wdth" 90}
h1{font-size:clamp(2.5rem,5.8vw,4.9rem); font-weight:800}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:1.32rem; letter-spacing:-.01em}
p{margin:0}
.lead{font-size:1.18rem; color:var(--muted); max-width:62ch}
.muted{color:var(--muted)}
.kicker{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:var(--bg3); color:var(--vd); font-weight:700; font-size:.88rem; margin-bottom:18px}
.kicker i{width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--sky)); display:grid; place-items:center; color:#fff; font-style:normal; font-size:.7rem}
.grad-text{background:linear-gradient(100deg,var(--vd),var(--violet) 45%,var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* backgrounds */
.sec{padding:104px 0; position:relative}
.sec.tint{background:var(--bg2)}
.sec.dots{background-color:var(--bg2); background-image:radial-gradient(rgba(106,76,245,.16) 1.2px, transparent 1.3px); background-size:24px 24px}
.sec.glow{background:radial-gradient(60% 70% at 85% 0%, rgba(56,166,255,.14), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(106,76,245,.12), transparent 60%), var(--bg)}
.circuit{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden}
.circuit path.tr{fill:none; stroke:rgba(106,76,245,.13); stroke-width:2}
.circuit path.pl{fill:none; stroke:url(#pulseG); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:46 1400; stroke-dashoffset:1446; animation:flow 5s linear infinite}
.circuit circle{fill:#fff; stroke:rgba(106,76,245,.3); stroke-width:2}
@keyframes flow{to{stroke-dashoffset:0}}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:52px; flex-wrap:wrap}
.sec-head .lead{max-width:48ch}
.sec-head.center{flex-direction:column; align-items:center; text-align:center}
.sec-head.center .lead{margin-top:14px}

/* progress, header, mega menu */
#progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--violet),var(--sky),var(--ember)); z-index:70}
.topbar{background:linear-gradient(90deg,var(--vd),var(--violet) 50%,var(--sky)); color:#fff; font-size:.9rem; font-weight:600; text-align:center; padding:9px 16px}
.topbar a{text-decoration:underline; text-underline-offset:3px}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; padding:14px 0; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:box-shadow .3s, padding .3s}
header.site.scrolled{box-shadow:0 1px 0 var(--line), 0 10px 30px -20px rgba(60,40,160,.3); padding:9px 0}
.menu-open header.site{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface)}
.nav{display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:-.03em}
.brand img{width:50px; height:auto; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(-6deg) scale(1.08)}
.brand span{background:linear-gradient(100deg,var(--vd),var(--vl)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav ul.links{display:flex; gap:2px; list-style:none; margin:0 0 0 auto; padding:0; align-items:center}
.nav ul.links > li{position:relative}
.nav ul.links > li > a{position:relative; display:flex; align-items:center; gap:6px; padding:9px 13px; border-radius:12px; font-weight:600; font-size:.97rem; color:var(--muted); transition:color .2s}
.nav ul.links > li > a::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--violet),var(--ember)); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.nav ul.links > li > a:hover{color:var(--text)}
.nav ul.links > li > a:hover::after,.nav ul.links > li > a.active::after{transform:scaleX(1)}
.nav ul.links > li > a.active{color:var(--text)}
.nav a.seo-link{color:var(--vd)}
.nav a.seo-link b{font-size:.68rem; padding:2px 7px; border-radius:999px; background:var(--ember); color:#fff; font-weight:800}
.caret{width:14px; transition:transform .3s}
.has-mega:hover .caret{transform:rotate(180deg)}
.mega{position:absolute; top:100%; left:50%; translate:-50% 0; width:min(1120px,94vw); padding-top:14px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1; visibility:visible; transform:none}
.mega-in{background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--sh2); padding:22px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.mega h4{font-family:var(--body); font-size:.85rem; color:var(--muted); letter-spacing:0; margin:0 0 10px 10px; font-weight:700}
.mega a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; font-weight:600; font-size:.93rem; transition:background .2s, transform .2s}
.mega a:hover{background:var(--bg2); transform:translateX(3px)}
.mega a .mi{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--bg3); color:var(--violet)}
.mega a .mi svg{width:16px}
.mega .col-seo{background:linear-gradient(160deg,#F2EEFF,var(--t-sky)); border-radius:16px; padding:12px 6px}
.menu-btn{display:none; margin-left:auto; width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.menu-btn i{display:block; width:20px; height:2px; background:var(--text); margin:5px auto; transition:transform .3s, opacity .3s; border-radius:2px}
.menu-open .menu-btn i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border:0; border-radius:14px; font-weight:700; font-size:1rem; isolation:isolate; overflow:visible; transition:transform .25s cubic-bezier(.2,.8,.2,1); white-space:nowrap}
.btn::before{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; transform:skewX(-12deg); transition:transform .3s, box-shadow .3s}
.btn::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; transform:skewX(-12deg); background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) -200% 0/250% 100% no-repeat; transition:background-position .7s}
.btn:hover::after{background-position:200% 0}
.btn-primary{color:#fff}
.btn-primary::before{background:linear-gradient(110deg,var(--vd),var(--violet) 60%,#8A6BFF); box-shadow:0 12px 26px -12px rgba(75,47,209,.7)}
.btn-ember{color:#fff}
.btn-ember::before{background:linear-gradient(110deg,#FF6A00,var(--ember) 50%,var(--el)); box-shadow:0 12px 26px -12px rgba(255,106,0,.7)}
.btn-ghost{color:var(--text)}
.btn-ghost::before{background:var(--surface); box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover::before{box-shadow:inset 0 0 0 2px var(--violet), 0 10px 24px -14px rgba(106,76,245,.6)}
.btn:hover::before{transform:skewX(-12deg) scale(1.04)}
.btn svg{width:18px; height:18px; transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn-sm{padding:11px 20px; font-size:.93rem}

/* views + transition */
main{min-height:70vh}
main:focus{outline:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.menu-open{overflow:hidden}
.view{display:none}
.view.on{display:block; animation:viewIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
#wipe{position:fixed; inset:0; z-index:80; pointer-events:none; display:flex}
#wipe:not(.go){visibility:hidden}
#wipe b{flex:1; transform:translateY(105%) skewY(-8deg); background:var(--violet)}
#wipe b:nth-child(1){background:var(--vd)}
#wipe b:nth-child(3){background:var(--sky)}
#wipe.go b{animation:wipe .78s cubic-bezier(.7,0,.2,1) forwards}
#wipe.go b:nth-child(2){animation-delay:.06s}
#wipe.go b:nth-child(3){animation-delay:.12s}
@keyframes wipe{0%{transform:translateY(105%) skewY(-8deg)}45%,55%{transform:translateY(0) skewY(0)}100%{transform:translateY(-105%) skewY(-8deg)}}
.ripple{position:fixed; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid var(--mint); pointer-events:none; z-index:90; animation:rip .7s ease-out forwards}
.ripple.r2{border-color:var(--sky); animation-delay:.08s; opacity:0}
@keyframes rip{0%{transform:scale(.4); opacity:1}100%{transform:scale(4.2); opacity:0}}

/* hero */
.hero{position:relative; padding:56px 0 90px; overflow:hidden; background:radial-gradient(55% 60% at 80% 20%, rgba(56,166,255,.16), transparent 65%), radial-gradient(50% 55% at 10% 90%, rgba(106,76,245,.12), transparent 65%), linear-gradient(180deg,#fff,#F7F5FF)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.02fr; gap:48px; align-items:center}
.hero h1 .hln{display:block; overflow:hidden; padding-bottom:.04em}
.hero h1 .hln span{display:inline-block; transform:translateY(105%); animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .hln:nth-child(2) span{animation-delay:.12s}
.hero h1 .hln:nth-child(3) span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.hero .lead{margin:24px 0 32px; opacity:0; animation:fade .8s .5s forwards}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:fade .8s .65s forwards}
@keyframes fade{to{opacity:1}}
.hero .kicker{opacity:0; animation:fade .6s .1s forwards}
.trust{display:flex; gap:22px; margin-top:38px; flex-wrap:wrap; color:var(--muted); font-size:.95rem; opacity:0; animation:fade .8s .8s forwards}
.trust div{display:flex; gap:8px; align-items:center}
.trust svg{width:20px; height:20px; color:var(--mint)}
.stars{color:#FFB400; letter-spacing:2px}
.hero-vis{position:relative}
.hero-vis .win{animation:fade .8s .3s both}
.fchip{position:absolute; display:flex; gap:10px; align-items:center; padding:11px 15px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh2); font-weight:700; font-size:.92rem; opacity:0; transform:translateY(12px); animation:chipIn .6s forwards, bob 6s ease-in-out infinite; z-index:3; white-space:nowrap}
.fchip small{display:block; font-weight:500; color:var(--muted); font-size:.76rem}
.fchip .ic{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none}
.fchip.c1{top:-22px; right:-14px; animation-delay:1.6s,2.2s}
.fchip.c2{bottom:70px; left:-34px; animation-delay:1.9s,2.5s}
.fchip.c3{bottom:-24px; right:30px; animation-delay:2.2s,2.8s}
@keyframes chipIn{to{opacity:1; transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.spark{width:70px; height:28px}

/* browser window mock */
.win{background:var(--surface); border-radius:20px; border:1px solid var(--line); box-shadow:var(--sh2); overflow:hidden; position:relative; transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s}
.win .bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--bg2); border-bottom:1px solid var(--line)}
.win .bar i{width:10px; height:10px; border-radius:50%; background:#FF6159}
.win .bar i:nth-child(2){background:#FFBD2E}.win .bar i:nth-child(3){background:#28C941}
.win .bar .url{margin-left:10px; flex:1; background:var(--surface); border:1px solid var(--line); border-radius:8px; font-size:.76rem; color:var(--muted); padding:4px 10px; display:flex; gap:6px; align-items:center}
.win .bar .url svg{width:11px; color:var(--mint)}
.scr{padding:18px; position:relative}
.tilt{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ln{display:block; height:8px; border-radius:4px; background:#ECE8FB; margin-bottom:7px}
.ln.d{background:var(--text)} .ln.v{background:var(--violet)} .ln.o{background:var(--ember)} .ln.s{background:var(--sky)} .ln.m{background:var(--mint)}
.ln.t{height:12px}
/* serp */
.sbox{display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; margin-bottom:14px; font-size:.9rem; box-shadow:0 4px 14px -8px rgba(60,40,160,.25)}
.sbox svg{width:16px; color:var(--muted); flex:none}
.typing::after{content:"|"; animation:blink 1s steps(1) infinite; color:var(--violet); margin-left:1px}
@keyframes blink{50%{opacity:0}}
.serp-tabs{display:flex; gap:16px; font-size:.75rem; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px}
.serp-tabs b{color:var(--violet); border-bottom:2px solid var(--violet); padding-bottom:7px; margin-bottom:-9px}
.serp-list{position:relative; height:calc(var(--h,62px) * 5)}
.res{position:absolute; left:0; right:0; top:0; height:var(--h,62px); padding:7px 10px; border-radius:12px; transition:transform .55s cubic-bezier(.6,0,.2,1), background .3s, box-shadow .3s}
.res .u{display:flex; align-items:center; gap:7px; font-size:.68rem; color:var(--muted); margin-bottom:3px}
.res .u i{width:16px; height:16px; border-radius:50%; background:#ECE8FB; flex:none}
.res .tt{height:10px; border-radius:5px; background:#7E95F5; opacity:.55; width:65%; margin-bottom:6px}
.res .ds{height:7px; border-radius:4px; background:#ECE8FB; width:90%}
.res.you{background:linear-gradient(90deg,var(--t-orange),#fff); box-shadow:inset 0 0 0 1.5px var(--el); z-index:2}
.res.you .u{color:var(--text); font-weight:700}
.res.you .u i{background:linear-gradient(135deg,var(--violet),var(--ember))}
.res.you .tt{background:var(--vd); opacity:1}
.res .rk{position:absolute; right:10px; top:50%; translate:0 -50%; font-family:var(--display); font-weight:800; font-size:.9rem; background:var(--ember); color:#fff; border-radius:10px; padding:4px 9px; transition:background .3s}
.res.you.top .rk{background:var(--mint)}
.res.you.top{box-shadow:inset 0 0 0 1.5px var(--mint), 0 10px 24px -14px rgba(19,195,156,.8); background:linear-gradient(90deg,var(--t-green),#fff)}

/* rings & bars */
.ring{width:84px; height:84px; position:relative; display:grid; place-items:center}
.ring svg{position:absolute; inset:0; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:8}
.ring .bg{stroke:var(--t-green)}
.ring .fg{stroke:var(--mint); stroke-linecap:round; stroke-dasharray:226; stroke-dashoffset:226; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .2s}
.in .ring .fg,.ring.in .fg{stroke-dashoffset:var(--off)}
.ring b{font-family:var(--display); font-size:1.45rem; font-weight:800; color:var(--green-text)}
.ring small{display:block}
.rings{display:flex; gap:22px; flex-wrap:wrap}
.rings .r{text-align:center; font-size:.85rem; font-weight:600; color:var(--muted)}
.rings .r .ring{margin:0 auto 8px}
.gbar{height:10px; border-radius:6px; background:#EFEBFF; overflow:hidden}
.gbar i{display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--violet),var(--sky)); transition:width 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.in .gbar i{width:var(--w)}

/* cards with gradient border hover */
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; overflow:hidden; isolation:isolate}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; background:linear-gradient(135deg,var(--violet),var(--sky),var(--ember)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; pointer-events:none}
.card::before{content:""; position:absolute; inset:0; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(106,76,245,.10), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none; z-index:-1}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh2)}
.card:hover::after,.card:hover::before{opacity:1}
.ico{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--bg3); color:var(--violet); transition:transform .45s cubic-bezier(.3,1.6,.4,1), background .35s, color .35s; flex:none}
.ico svg{width:26px; height:26px}
.card:hover .ico{transform:rotate(-8deg) scale(1.1); background:linear-gradient(135deg,var(--violet),var(--sky)); color:#fff}
.card h3{margin:18px 0 8px}
.card p{color:var(--muted); font-size:.98rem}
.more{margin-top:16px; font-weight:700; color:var(--violet); display:inline-flex; gap:8px; align-items:center}
.more svg{width:18px; transition:transform .3s}
.card:hover .more svg{transform:translateX(6px)}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.c-mint .ico{background:var(--t-green); color:var(--green-text)}
.c-sky .ico{background:var(--t-sky); color:var(--sky-text)}
.c-ember .ico{background:var(--t-orange); color:var(--orange-text)}
.c-pink .ico{background:var(--t-pink); color:var(--pink-text)}

/* tools marquee */
.tools{padding:28px 0; border-block:1px solid var(--line); background:var(--surface); overflow:hidden}
.tools .track{display:flex; gap:16px; width:max-content; animation:scroll 40s linear infinite}
.tools:hover .track{animation-play-state:paused}
.tools span{display:flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); font-weight:700; color:var(--muted); white-space:nowrap; transition:all .3s}
.tools span:hover{color:var(--vd); border-color:var(--vl); background:var(--surface); transform:translateY(-2px)}
.tools span i{width:10px; height:10px; border-radius:3px; transform:rotate(45deg)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SEO spotlight */
.spot{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.spot-panel{background:var(--surface); border:1px solid var(--line); border-radius:28px; box-shadow:var(--sh2); padding:26px; position:relative}
.rt-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.rt-head b{font-family:var(--display); font-size:1.2rem}
.live{display:inline-flex; gap:6px; align-items:center; font-size:.8rem; font-weight:700; color:var(--green-text); background:var(--t-green); padding:4px 10px; border-radius:999px}
.live i{width:7px; height:7px; border-radius:50%; background:var(--mint); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(19,195,156,.6)}100%{box-shadow:0 0 0 9px rgba(19,195,156,0)}}
.rt{width:100%; border-collapse:collapse; font-size:.92rem}
.rt th{text-align:left; font-weight:600; color:var(--muted); font-size:.8rem; padding:8px 8px; border-bottom:1px solid var(--line)}
.rt td{padding:11px 8px; border-bottom:1px solid var(--line)}
.rt tr{transition:background .2s}
.rt tbody tr:hover{background:var(--bg2)}
.pos{font-family:var(--display); font-weight:800; display:inline-grid; place-items:center; min-width:34px; height:28px; border-radius:9px; background:var(--t-green); color:var(--green-text)}
.up{color:var(--green-text); font-weight:700; font-size:.85rem}
.chart-mini{margin-top:20px; display:flex; align-items:end; gap:6px; height:90px}
.chart-mini i{flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--violet),var(--vl)); height:0; transition:height 1.2s cubic-bezier(.2,.8,.2,1)}
.in .chart-mini i{height:var(--h)}
.chart-mini i:last-child{background:linear-gradient(180deg,var(--ember),var(--el))}
.sub-list{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px}
.sub-list a{display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--line); font-weight:700; transition:all .3s}
.sub-list a:hover{border-color:var(--violet); transform:translateX(4px); box-shadow:var(--sh1)}
.sub-list a .mi{width:38px; height:38px; flex:none; border-radius:11px; background:var(--bg3); color:var(--violet); display:grid; place-items:center; transition:all .3s}
.sub-list a:hover .mi{background:var(--violet); color:#fff}
.sub-list a .mi svg{width:19px}
.sub-list a small{display:block; font-weight:500; color:var(--muted); font-size:.82rem}

/* devices mock */
.devices{position:relative; padding:10px 40px 40px 0}
.laptop{background:var(--surface); border:10px solid #2B2160; border-bottom-width:14px; border-radius:18px 18px 6px 6px; box-shadow:var(--sh2); position:relative; overflow:hidden}
.laptop-base{height:16px; margin:0 -3%; background:linear-gradient(180deg,#D9D3F6,#BDB4EC); border-radius:0 0 20px 20px}
.phone{position:absolute; right:0; bottom:0; width:30%; background:var(--surface); border:7px solid #2B2160; border-radius:24px; box-shadow:var(--sh2); overflow:hidden; aspect-ratio:9/18}
.mock-site{font-size:0}
.ms-nav{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line)}
.ms-nav b{width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg,var(--violet),var(--ember))}
.ms-nav i{height:6px; width:30px; border-radius:3px; background:#ECE8FB}
.ms-nav i:first-of-type{margin-left:auto}
.ms-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:12px; padding:16px 14px; background:linear-gradient(135deg,var(--t-violet),var(--t-sky))}
.ms-img{border-radius:12px; min-height:90px; background:linear-gradient(135deg,var(--violet),var(--sky)); position:relative; overflow:hidden}
.ms-img::after{content:""; position:absolute; width:60%; height:60%; right:-10%; bottom:-14%; border-radius:50%; background:rgba(255,255,255,.25)}
.ms-btn{display:inline-block; width:56px; height:16px; border-radius:6px; background:var(--ember); transform:skewX(-12deg); margin-top:4px}
.ms-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 14px}
.ms-cards div{border-radius:10px; border:1px solid var(--line); padding:8px; min-height:50px}
.ms-cards div::before{content:""; display:block; width:16px; height:16px; border-radius:5px; background:var(--bg3); margin-bottom:6px}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:30px; text-align:left; transition:transform .35s, box-shadow .35s}
.stat:hover{transform:translateY(-6px); box-shadow:var(--sh2)}
.stat b{display:block; font-family:var(--display); font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:800; line-height:1; letter-spacing:-.03em; margin-bottom:8px}
.stat:nth-child(1) b{color:var(--violet)}.stat:nth-child(2) b{color:var(--green-text)}.stat:nth-child(3) b{color:var(--sky-text)}.stat:nth-child(4) b{color:var(--orange-text)}
.stat span{color:var(--muted); font-weight:600}

/* process */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; counter-reset:s}
.steps::before{content:""; position:absolute; top:28px; left:6%; right:6%; height:3px; background:repeating-linear-gradient(90deg,var(--vl) 0 10px,transparent 10px 18px); opacity:.5}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.step{position:relative; text-align:left}
.step .n{width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--surface); border:2px solid var(--violet); color:var(--violet); font-family:var(--display); font-weight:800; font-size:1.3rem; position:relative; z-index:1; margin-bottom:18px; transition:all .35s cubic-bezier(.3,1.6,.4,1)}
.step:hover .n{background:var(--violet); color:#fff; transform:translateY(-4px) rotate(-6deg)}
.step:last-child .n{border-color:var(--ember); color:var(--ember)}
.step:last-child:hover .n{background:var(--ember); color:#fff}
.step h3{font-size:1.15rem; margin-bottom:6px}
.step p{color:var(--muted); font-size:.95rem}

/* tables */
.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--sh1)}
.tbl table{width:100%; border-collapse:collapse; min-width:620px}
.tbl th,.tbl td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--bg2); font-family:var(--display); font-size:1.05rem}
.tbl thead th.hl{background:linear-gradient(135deg,var(--violet),#8A6BFF); color:#fff}
.tbl td.hl{background:#F8F6FF; font-weight:700; color:var(--vd)}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover td{background:#FBFAFF}
.tbl tbody tr:hover td.hl{background:#F1EDFF}
.tbl tr:last-child td{border-bottom:0}
.yes{color:var(--green-text); font-weight:800}
.no{color:#C4BFDD}

/* industries */
.ind{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.ind div{display:flex; align-items:center; gap:14px; padding:20px; border-radius:18px; background:var(--surface); border:1px solid var(--line); font-weight:700; transition:all .3s cubic-bezier(.2,.8,.2,1)}
.ind div:hover{transform:translateY(-4px) scale(1.02); border-color:var(--vl); box-shadow:var(--sh1)}
.ind span{font-size:1.6rem; width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:var(--bg2); transition:transform .4s cubic-bezier(.3,1.6,.4,1)}
.ind div:hover span{transform:rotate(-10deg) scale(1.12)}

/* work */
.case{border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .35s, box-shadow .35s}
.case:hover{transform:translateY(-6px); box-shadow:var(--sh2)}
.case .art{aspect-ratio:16/10; position:relative; overflow:hidden}
.case .art .inner{position:absolute; inset:0; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.case:hover .art .inner{transform:scale(1.07)}
.case .art .ov{position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(28,18,80,.65)); opacity:0; transition:opacity .4s; display:flex; align-items:end; padding:18px; color:#fff; font-weight:700}
.case:hover .art .ov{opacity:1}
.case .body{padding:22px 24px 26px; display:grid; gap:8px}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:.8rem; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--bg3); color:var(--vd)}
.case .result{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--green-text)}
.case.hide{display:none}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px}
.filters button{border:1px solid var(--line); background:var(--surface); padding:10px 18px; border-radius:999px; font-weight:600; transition:all .25s}
.filters button:hover{border-color:var(--violet); color:var(--violet)}
.filters button.on{background:var(--violet); color:#fff; border-color:var(--violet)}

/* testimonials */
.quotes{position:relative; background:linear-gradient(135deg,var(--t-violet),var(--t-sky)); border-radius:34px; padding:56px; overflow:hidden; display:grid; grid-template-columns:1.4fr .6fr; gap:40px; align-items:center}
.quote{display:none}
.quote.on{display:block; animation:viewIn .6s}
.quote blockquote{margin:0; font-family:var(--display); font-size:clamp(1.35rem,2.4vw,2rem); font-weight:600; line-height:1.28; letter-spacing:-.015em}
.who{display:flex; gap:14px; align-items:center; margin-top:28px}
.avatar{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--violet),var(--sky))}
.q-nav{display:flex; gap:10px; margin-top:30px; align-items:center}
.q-nav button{width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; transition:all .25s}
.q-nav button:hover{background:var(--violet); color:#fff; border-color:var(--violet)}
.q-nav svg{width:20px}
.q-dots{display:flex; gap:6px; margin-left:12px}
.q-dots i{width:8px; height:8px; border-radius:4px; background:#D6CFF7; transition:width .3s, background .3s}
.q-dots i.on{width:26px; background:var(--ember)}
.rating-card{background:var(--surface); border-radius:24px; padding:28px; box-shadow:var(--sh1); text-align:center}
.rating-card b{font-family:var(--display); font-size:3.4rem; font-weight:800; line-height:1; color:var(--vd)}

/* faq */
.faq{display:grid; gap:12px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:0 24px; transition:border-color .3s, box-shadow .3s}
.faq details:hover{border-color:var(--vl)}
.faq details[open]{box-shadow:var(--sh1); border-color:var(--vl)}
.faq summary{list-style:none; cursor:pointer; padding:20px 0; font-weight:700; font-size:1.06rem; display:flex; justify-content:space-between; gap:20px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:30px; height:30px; border-radius:10px; background:var(--bg3); position:relative; flex:none; transition:background .3s, transform .3s}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; left:9px; right:9px; top:14px; height:2px; background:var(--violet); transition:transform .3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--violet); transform:rotate(180deg)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--surface)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding-bottom:22px; color:var(--muted); max-width:72ch}
.faq-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:start}

/* CTA */
.cta{position:relative; border-radius:38px; padding:76px 56px; overflow:hidden; background:linear-gradient(120deg,var(--vd),var(--violet) 45%,var(--sky)); color:#fff}
.cta .circuit path.tr{stroke:rgba(255,255,255,.18)}
.cta .circuit circle{fill:rgba(255,255,255,.2); stroke:rgba(255,255,255,.5)}
.cta-in{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.cta h2{max-width:16ch}
.cta p{color:rgba(255,255,255,.9); margin:16px 0 30px; max-width:50ch; font-size:1.12rem}
.cta .audit{display:flex; gap:12px; flex-wrap:wrap}
.cta input{flex:1; min-width:220px; padding:16px 20px; border-radius:14px; border:2px solid rgba(255,255,255,.4); background:rgba(255,255,255,.16); color:#fff; font:inherit}
.cta input::placeholder{color:rgba(255,255,255,.8)}
.cta input:focus{outline:none; border-color:#fff; background:rgba(255,255,255,.24)}
.cta-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.cta-list li{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:14px 16px; border-radius:16px; font-weight:600; backdrop-filter:blur(4px); transition:transform .3s, background .3s}
.cta-list li:hover{transform:translateX(-6px); background:rgba(255,255,255,.22)}
.cta-list li::before{content:"✓"; width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--surface); color:var(--violet); font-weight:800}

/* page heads */
.page-head{position:relative; overflow:hidden; padding:70px 0 70px; background:radial-gradient(50% 70% at 90% 10%, rgba(56,166,255,.16), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(106,76,245,.12), transparent 60%), linear-gradient(180deg,#fff,var(--bg2))}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{font-size:clamp(2.4rem,5.2vw,4.3rem); max-width:18ch}
.page-head .lead{margin-top:20px}
.crumbs{display:flex; gap:8px; color:var(--muted); font-size:.92rem; margin-bottom:22px; flex-wrap:wrap}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--violet)}
.ph-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center}
.kstats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; max-width:600px}
.kstats div{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px 16px; box-shadow:var(--sh1); transition:transform .3s}
.kstats div:hover{transform:translateY(-4px)}
.kstats b{display:block; font-family:var(--display); font-size:1.7rem; font-weight:800; color:var(--vd); line-height:1.1}
.kstats span{font-size:.85rem; color:var(--muted); display:block; max-width:22ch; line-height:1.4; margin-top:4px}
.badge-ic{width:74px; height:74px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(135deg,var(--vd),var(--violet),var(--sky)); color:#fff; margin-bottom:22px; box-shadow:0 18px 30px -14px rgba(75,47,209,.7)}
.badge-ic svg{width:36px}
.ph-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}

/* services list page */
.group-title{display:flex; align-items:center; gap:14px; margin:0 0 24px; flex-wrap:wrap}
.group-title h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.group-title span{font-weight:700; font-size:.85rem; color:var(--vd); background:var(--bg3); padding:5px 12px; border-radius:999px}
.svc-feature{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; background:linear-gradient(135deg,var(--t-violet),var(--t-sky)); border-radius:32px; padding:44px; margin-bottom:22px}

/* detail content */
.two{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.two.top{align-items:start}
.prose p{color:var(--muted); font-size:1.06rem}
.prose p+p{margin-top:14px}
.prose h2{margin-bottom:18px}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.checks.cols{grid-template-columns:1fr 1fr; gap:12px 24px}
.checks li{display:flex; gap:12px; align-items:flex-start}
.checks li::before{content:""; flex:none; width:24px; height:24px; margin-top:2px; border-radius:8px; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}
.box{background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:34px; box-shadow:var(--sh1)}
.box h3{margin-bottom:18px}
.side-facts{display:grid; gap:14px}
.side-facts div{display:flex; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px dashed var(--line)}
.side-facts div:last-child{border:0; padding:0}
.side-facts span{color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:7px 13px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); font-weight:600; font-size:.88rem; transition:all .25s}
.chip:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-2px)}
.strip{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:30px 36px; border-radius:26px; background:linear-gradient(110deg,var(--t-orange),var(--t-orange)); border:1px solid var(--line)}
.strip h3{font-size:1.5rem}
.strip p{color:var(--orange-text)}
.result-card{border-radius:26px; padding:34px; background:linear-gradient(135deg,var(--t-green),var(--t-sky)); border:1px solid var(--line)}
.result-card .big{font-family:var(--display); font-size:clamp(2.2rem,8vw,3.4rem); overflow-wrap:anywhere; font-weight:800; color:var(--green-text); line-height:1}
.mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.mini-stats div{background:var(--surface); border-radius:16px; padding:14px}
.mini-stats b{font-family:var(--display); font-size:1.4rem; color:var(--vd); display:block}
.mini-stats span{font-size:.82rem; color:var(--muted)}

/* plans */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.plan{border-radius:28px; padding:34px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:18px; position:relative; transition:transform .35s, box-shadow .35s}
.plan:hover{transform:translateY(-8px); box-shadow:var(--sh2)}
.plan.pop{background:linear-gradient(160deg,var(--vd),var(--violet) 60%,#7F8BFF); color:#fff; border-color:transparent; box-shadow:var(--sh2)}
.plan.pop .muted,.plan.pop .checks li{color:rgba(255,255,255,.88)}
.plan.pop .checks li::before{background-color:rgba(255,255,255,.25)}
.plan .pbadge{position:absolute; top:22px; right:22px; background:var(--ember); color:#fff; font-weight:700; font-size:.78rem; padding:5px 12px; border-radius:999px}
.plan .price{font-family:var(--display); font-weight:800; font-size:3rem; line-height:1; letter-spacing:-.03em}
.plan .price small{font-size:.95rem; font-weight:500; font-family:var(--body); opacity:.75; letter-spacing:0}
.plan .btn{margin-top:auto}
.plan.pop .btn-ghost{color:var(--vd)}
.tabs{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px; margin-bottom:36px; position:relative; flex-wrap:wrap}
.tabs button{border:0; background:none; padding:10px 22px; border-radius:999px; font-weight:700; position:relative; z-index:1; transition:color .3s}
.tabs button.on{color:#fff}
.tabs .pill{position:absolute; top:5px; bottom:5px; left:0; border-radius:999px; background:linear-gradient(110deg,var(--vd),var(--violet)); transition:transform .4s cubic-bezier(.2,.8,.2,1), width .4s}
.tabpane{display:none}
.tabpane.on{display:block; animation:viewIn .5s}

/* about */
.logo-card{border-radius:34px; background:var(--surface); padding:50px; box-shadow:var(--sh2); border:1px solid var(--line); position:relative; overflow:hidden}
.logo-card::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(106,76,245,.18) 1.2px, transparent 1.3px); background-size:22px 22px}
.logo-card img{position:relative; width:100%; max-width:380px; margin:auto; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.logo-card:hover img{transform:scale(1.05) rotate(-2deg)}
.team-card{text-align:center}
.team-card .av{width:96px; height:96px; margin:0 auto 6px; border-radius:30px; display:grid; place-items:center; font-size:2.4rem; transition:transform .45s cubic-bezier(.3,1.6,.4,1)}
.team-card:hover .av{transform:rotate(-8deg) scale(1.08)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:start}
form.fcard{background:var(--surface); border:1px solid var(--line); border-radius:30px; padding:40px; display:grid; gap:20px; box-shadow:var(--sh1)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
label{display:grid; gap:8px; font-weight:600; font-size:.95rem}
input,select,textarea{font:inherit; color:var(--text); background:var(--bg2); border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; transition:border-color .2s, box-shadow .2s, background .2s; width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--vl)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--violet); background:var(--surface); box-shadow:0 0 0 4px rgba(106,76,245,.15)}
textarea{min-height:130px; resize:vertical}
.pick{display:flex; flex-wrap:wrap; gap:8px}
.pick label{display:inline-flex; font-size:.9rem}
.pick input{position:absolute; opacity:0; width:1px; height:1px}
.pick span{padding:9px 15px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg2); cursor:pointer; transition:all .2s; user-select:none}
.pick span:hover{border-color:var(--violet)}
.pick input:checked+span{background:var(--violet); border-color:var(--violet); color:#fff}
.pick input:focus-visible+span{outline:3px solid var(--ember); outline-offset:2px}
.side{display:grid; gap:16px}
.li{display:flex; gap:14px; align-items:center}
.li a{color:var(--violet); font-weight:700}
.form-msg{display:none; padding:16px 18px; border-radius:14px; background:var(--t-green); border:1px solid var(--mint); font-weight:600}
.form-msg.show{display:block; animation:viewIn .5s}
.err{color:#E5484D; font-size:.86rem; font-weight:600; display:none}
.invalid .err{display:block}
.invalid input,.invalid textarea{border-color:#E5484D}

/* footer */
footer{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--bg2),var(--bg3)); margin-top:40px; padding:84px 0 calc(30px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line)}
footer .wrap{position:relative; z-index:1}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:34px}
footer h4{font-family:var(--body); font-size:1rem; letter-spacing:0; margin-bottom:16px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
footer ul a{color:var(--muted); transition:color .2s, padding .2s}
footer ul a:hover{color:var(--violet); padding-left:4px}
footer p{color:var(--muted)}
.news{display:flex; gap:8px; margin-top:20px}
.news input{background:var(--surface); padding:12px 14px}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem}
.big-word{font-family:var(--display); font-weight:800; font-size:clamp(4rem,16vw,13rem); line-height:.85; letter-spacing:-.05em; margin-top:40px; background:linear-gradient(180deg,rgba(106,76,245,.22),rgba(106,76,245,0)); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; white-space:nowrap; overflow:hidden}

/* mock visual pieces */
.vis{position:relative}
.mapbox{height:170px; border-radius:14px; position:relative; overflow:hidden; background:#EAF6EF; background-image:linear-gradient(90deg,rgba(255,255,255,.9) 6px,transparent 6px),linear-gradient(rgba(255,255,255,.9) 6px,transparent 6px); background-size:70px 60px; margin-bottom:12px}
.mapbox::before{content:""; position:absolute; left:-10%; top:40%; width:120%; height:18px; background:#FFE9B8; transform:rotate(-12deg)}
.mapbox::after{content:""; position:absolute; right:12%; top:-10%; width:46px; height:130%; background:#D5EBFF; border-radius:20px; transform:rotate(18deg)}
.pin{position:absolute; width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--vl); z-index:1; box-shadow:0 4px 8px rgba(0,0,0,.2)}
.pin.you{background:var(--ember); width:30px; height:30px; animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{translate:0 0}50%{translate:0 -8px}}
.listing{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; font-size:.8rem; margin-bottom:6px; transition:background .3s}
.listing.you{background:var(--t-orange); box-shadow:inset 0 0 0 1.5px var(--el)}
.listing b{display:block}
.listing .stars{font-size:.72rem}
.listing .n{width:24px; height:24px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--bg3); font-weight:800; font-size:.75rem}
.listing.you .n{background:var(--ember); color:#fff}
.gauges{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.gauges .r{background:var(--bg2); border-radius:14px; padding:12px 6px; text-align:center; font-size:.72rem; font-weight:700; color:var(--muted)}
.gauges .ring{width:64px; height:64px; margin:0 auto 6px}
.gauges .ring b{font-size:.85rem}
.tree{display:flex; flex-direction:column; align-items:center; gap:10px}
.tree .lvl{display:flex; gap:10px; justify-content:center}
.tree .nd{padding:5px 10px; border-radius:8px; font-size:.7rem; font-weight:700; background:var(--bg3); color:var(--vd)}
.tree .nd.root{background:var(--violet); color:#fff}
.tree .nd.ok{background:var(--t-green); color:var(--green-text)}
.tree .nd.warn{background:var(--t-orange); color:var(--orange-text)}
.snip{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; font-size:.78rem}
.snip .u{color:var(--green-text)}
.snip .t{color:#1A0DAB; font-size:.95rem; font-weight:600; margin:2px 0}
.snip .d{color:var(--muted)}
.doc .hlw{display:inline; padding:1px 4px; border-radius:4px; background:var(--t-orange); color:#C24F00; font-weight:700; font-size:.78rem}
.doc p{font-size:.78rem; color:var(--muted); margin-bottom:8px; line-height:1.5}
.score{position:absolute; top:62px; right:16px; display:flex; gap:8px; align-items:center; padding:8px 12px; border-radius:12px; background:var(--t-green); color:var(--green-text); font-weight:800; font-size:.85rem; box-shadow:var(--sh1)}
.net{width:100%; height:240px}
.net line{stroke:#D9D2FA; stroke-width:2}
.net .pl2{stroke:var(--ember); stroke-width:3; stroke-dasharray:14 200; animation:flow2 2.4s linear infinite}
@keyframes flow2{from{stroke-dashoffset:214}to{stroke-dashoffset:0}}
.net text{font-family:var(--body); font-size:11px; font-weight:700; fill:var(--vd)}
.checklist{display:grid; gap:7px; font-size:.8rem}
.checklist div{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; background:var(--bg2)}
.checklist .ok{color:var(--green-text); font-weight:800}
.checklist .wn{color:var(--orange-text); font-weight:800}
.shop-g{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.shop-g div{border:1px solid var(--line); border-radius:12px; padding:8px; transition:transform .3s}
.shop-g div:hover{transform:translateY(-4px)}
.shop-g div i{display:block; aspect-ratio:1; border-radius:8px; margin-bottom:6px}
.cartb{position:absolute; top:58px; right:18px; background:var(--ember); color:#fff; font-weight:800; font-size:.75rem; padding:6px 10px; border-radius:10px}
.wp{display:grid; grid-template-columns:70px 1fr; gap:10px}
.wp .sb{background:#2B2160; border-radius:10px; padding:10px 8px; display:grid; gap:8px; align-content:start}
.wp .sb i{height:7px; border-radius:3px; background:rgba(255,255,255,.25)}
.wp .sb i.a{background:var(--sky)}
.wp .cv{border:1px dashed var(--vl); border-radius:10px; padding:12px; position:relative}
.wp .blk{border-radius:8px; background:var(--bg2); padding:10px; margin-bottom:8px; transition:box-shadow .3s}
.wp .blk.sel{box-shadow:inset 0 0 0 2px var(--sky)}
.pub{position:absolute; top:-12px; right:10px; background:var(--sky); color:#fff; font-size:.7rem; font-weight:800; padding:5px 10px; border-radius:8px}
.form-m{display:grid; gap:7px; background:var(--surface); border-radius:12px; padding:12px; box-shadow:var(--sh1)}
.form-m i{display:block; height:20px; border-radius:6px; border:1px solid var(--line); background:var(--bg2)}
.form-m b{display:block; height:24px; border-radius:7px; background:var(--ember)}
.upt{display:flex; gap:3px; align-items:end; height:40px; margin:10px 0 14px}
.upt i{flex:1; height:100%; border-radius:3px; background:var(--mint)}
.upt i.w{background:var(--el); height:70%}
.ph-mock{width:62%; margin:0 auto; border:7px solid #2B2160; border-radius:26px; overflow:hidden; background:var(--surface)}
.ph-mock .top{display:flex; gap:8px; align-items:center; padding:10px; font-size:.72rem; font-weight:800}
.ph-mock .top i{width:26px; height:26px; border-radius:50%; background:conic-gradient(var(--ember),var(--pink),var(--violet),var(--ember)); padding:2px}
.feed{display:grid; grid-template-columns:repeat(3,1fr); gap:2px}
.feed i{aspect-ratio:1}
.heart{position:absolute; font-size:.82rem; font-weight:800; background:var(--surface); border-radius:14px; padding:8px 12px; box-shadow:var(--sh2); display:flex; gap:6px; align-items:center; animation:bob 4s ease-in-out infinite}
.adcard{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px}
.adcard .h{display:flex; gap:8px; align-items:center; padding:10px; font-size:.72rem}
.adcard .h i{width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--ember))}
.adcard .im{height:96px; background:linear-gradient(135deg,var(--ember),var(--el) 50%,#FFD1A8); position:relative}
.adcard .ft{display:flex; justify-content:space-between; align-items:center; padding:9px 10px; font-size:.72rem; font-weight:700; background:var(--bg2)}
.adcard .ft b{background:var(--violet); color:#fff; padding:5px 10px; border-radius:6px}
.mets{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mets div{background:var(--bg2); border-radius:12px; padding:10px; text-align:center}
.mets b{display:block; font-family:var(--display); font-size:1.15rem; color:var(--vd)}
.mets span{font-size:.68rem; color:var(--muted); font-weight:600}
.spons{font-size:.72rem; font-weight:800; color:var(--text)}
.artb{display:grid; grid-template-columns:1fr 70px; gap:10px}
.artb .cv{height:190px; border-radius:12px; background:#FFF8F1; position:relative; overflow:hidden; background-image:linear-gradient(rgba(106,76,245,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(106,76,245,.07) 1px,transparent 1px); background-size:16px 16px}
.artb .sh{position:absolute; transition:transform .5s}
.artb:hover .sh1{transform:rotate(20deg)}
.artb:hover .sh2{transform:translateY(-8px)}
.artb .layers{display:grid; gap:6px; align-content:start}
.artb .layers i{height:22px; border-radius:6px; background:var(--bg2)}
.artb .layers i.a{background:var(--bg3); box-shadow:inset 0 0 0 1.5px var(--violet)}
.sw{display:flex; gap:6px; margin-top:10px}
.sw i{width:26px; height:26px; border-radius:8px; transition:transform .3s}
.sw i:hover{transform:translateY(-4px)}
.vid{height:130px; border-radius:12px; background:linear-gradient(135deg,var(--vd),var(--violet),var(--sky)); position:relative; display:grid; place-items:center; margin-bottom:10px; overflow:hidden}
.vid .play{width:48px; height:48px; border-radius:50%; background:var(--surface); display:grid; place-items:center; color:var(--violet); box-shadow:0 0 0 10px rgba(255,255,255,.2); animation:pulseW 2s infinite}
@keyframes pulseW{50%{box-shadow:0 0 0 18px rgba(255,255,255,.08)}}
.vid .orb{position:absolute; width:40px; height:40px; border-radius:12px; background:var(--ember); top:20%; left:12%; animation:orb 4s ease-in-out infinite}
@keyframes orb{50%{transform:translate(120px,30px) rotate(90deg); border-radius:50%}}
.tl{display:grid; gap:6px; position:relative}
.tl div{height:18px; border-radius:6px; background:var(--bg2); position:relative}
.tl div i{position:absolute; top:3px; height:12px; border-radius:4px}
.tl .ph{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ember); left:10%; animation:play 4s linear infinite}
@keyframes play{to{left:95%}}
.brandsheet{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.brandsheet > div{border-radius:12px; background:var(--bg2); padding:12px; min-height:84px; display:grid; place-items:center}
.brandsheet .aa{font-family:var(--display); font-size:2.4rem; font-weight:800; color:var(--vd)}
.flow{display:flex; align-items:center; gap:8px}
.flow .sc{flex:1; border:5px solid #2B2160; border-radius:16px; padding:8px; min-height:160px; background:var(--surface); transition:transform .4s}
.flow .sc:hover{transform:translateY(-6px)}
.flow .sc.wf i{display:block; border:1.5px dashed #C9C1F2; border-radius:5px; height:16px; margin-bottom:6px}
.flow .sc.wf i.b{height:40px}
.flow .ar{color:var(--vl); font-weight:800}

/* reveal */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}

/* responsive */
@media (max-width:1100px){
  .nav ul.links > li > a{padding:9px 9px}
  .nav > .btn{display:none}
}
@media (max-width:1000px){
  .hero-grid,.spot,.ph-grid,.two,.contact-grid,.cta-in,.quotes,.svc-feature,.faq-wrap{grid-template-columns:1fr}
  .hero-vis{max-width:600px; margin:20px auto 0; width:100%}
  .grid4,.stats,.ind{grid-template-columns:repeat(2,1fr)}
  .grid3,.plans{grid-template-columns:1fr 1fr}
  .steps,.steps.s4{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .mega{display:none}
}
@media (max-width:860px){
  .nav ul.links{position:fixed; inset:0; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:2px; padding:calc(env(safe-area-inset-top,0px) + 140px) 26px 40px; background:var(--surface); transform:translateY(-100%); visibility:hidden; transition:transform .5s cubic-bezier(.7,0,.2,1), visibility .5s; z-index:-1; margin:0; overflow-y:auto}
  .nav ul.links > li > a{font-family:var(--display); font-size:1.9rem; font-weight:700; color:var(--text); padding:6px 4px}
  .nav ul.links > li > a::after{display:none}
  .caret{display:none}
  .menu-open .nav ul.links{transform:none; visibility:visible}
  header.site,header.site.scrolled{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface)}
  .hero .circuit,.page-head .circuit{opacity:.45}
  .menu-btn{display:block}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:72px 0}
  .kstats{grid-template-columns:1fr}
  .grid2,.grid3,.grid4,.stats,.plans,.row2,.checks.cols,.sub-list,.ind,.steps,.steps.s4,.mini-stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta,.quotes,.svc-feature{padding:40px 24px; border-radius:28px}
  form.fcard,.box{padding:24px}
  .fchip.c1{right:0}.fchip.c2{left:0}
  .devices{padding-right:20px}
  .topbar{font-size:.8rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  .tools .track{animation:none}
  #wipe{display:none}
  html{scroll-behavior:auto}
}

/* photos */
.photo{position:relative; margin:0; border-radius:26px; overflow:hidden; background:linear-gradient(135deg,var(--violet),var(--sky)); box-shadow:var(--sh2); aspect-ratio:4/3; isolation:isolate}
.photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .4s}
.photo:hover img{transform:scale(1.06)}
.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(28,18,80,.45)); pointer-events:none}
.photo .ph-fb{position:absolute; inset:0; display:none; place-items:center; color:rgba(255,255,255,.85)}
.photo .ph-fb svg{width:64px; height:64px}
.photo.nf img{opacity:0}
.photo.nf .ph-fb{display:grid; background-image:radial-gradient(rgba(255,255,255,.25) 1.2px, transparent 1.3px); background-size:20px 20px}
.photo figcaption{position:absolute; left:18px; bottom:18px; z-index:2; background:var(--glass); backdrop-filter:blur(6px); border-radius:16px; padding:12px 16px; box-shadow:var(--sh1); max-width:80%}
.photo figcaption b{display:block; font-family:var(--display); font-size:1.05rem}
.photo figcaption span{display:block; font-size:.85rem; color:var(--muted)}
.photo.wide{aspect-ratio:16/10}
.photo.banner{aspect-ratio:21/8}
.photo-stack{position:relative; padding:0 0 60px 0}
.photo-stack .photo.main{width:86%}
.photo-stack .photo.small{position:absolute; right:0; bottom:0; width:46%; aspect-ratio:1; border:6px solid var(--surface); animation:bob 7s ease-in-out infinite}
.photo-stack .small-logo{position:absolute; right:0; bottom:0; width:44%; padding:22px; border-radius:24px}
a.inl{color:var(--violet); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:rgba(106,76,245,.35); transition:text-decoration-color .2s}
a.inl:hover{text-decoration-color:var(--violet)}
.ind a{display:flex; align-items:center; gap:14px; padding:20px; border-radius:18px; background:linear-gradient(135deg,var(--t-violet),var(--t-sky)); border:1px solid var(--vl); font-weight:700; color:var(--vd); transition:all .3s cubic-bezier(.2,.8,.2,1)}
.ind a:hover{transform:translateY(-4px) scale(1.02); box-shadow:var(--sh1); border-color:var(--violet)}
.ind a span{font-size:1.6rem; width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:var(--surface); transition:transform .4s cubic-bezier(.3,1.6,.4,1)}
.ind a:hover span{transform:rotate(-10deg) scale(1.12)}
@media (max-width:640px){ .photo.banner{aspect-ratio:4/3} .photo-stack{padding-bottom:40px} }

/* quick answers, guides, promises, blog */
.qa-sec{padding:56px 0 0}
.qa{background:linear-gradient(135deg,var(--t-violet),var(--t-sky)); border:1px solid var(--line); border-radius:28px; padding:34px}
.qa-head h2{font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:20px}
.qa-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.qa-grid > div{background:var(--surface); border-radius:18px; padding:22px; border:1px solid var(--line); transition:transform .3s, box-shadow .3s}
.qa-grid > div:hover{transform:translateY(-4px); box-shadow:var(--sh1)}
.qa-grid h3{font-size:1.08rem; margin-bottom:8px}
.qa-grid p{color:var(--muted); font-size:.98rem}
.guide-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.guide-grid article{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px 30px 30px 84px; transition:border-color .3s, box-shadow .3s}
.guide-grid article:hover{border-color:var(--vl); box-shadow:var(--sh1)}
.guide-grid .gnum{position:absolute; left:26px; top:28px; font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--vl)}
.guide-grid h3{margin-bottom:10px}
.guide-grid p{color:var(--muted)}
.promises{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.promises > div{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:20px; transition:transform .3s, box-shadow .3s}
.promises > div:hover{transform:translateY(-4px); box-shadow:var(--sh1)}
.promises .ico{width:46px; height:46px; border-radius:14px}
.promises .ico svg{width:22px; height:22px}
.promises b{display:block; margin-bottom:2px}
.promises span{color:var(--muted); font-size:.9rem}
.post-card{color:inherit}
.post-card .photo{border-radius:0; box-shadow:none}
.post-card .more{margin-top:8px}
.post-card:hover .more svg{transform:translateX(6px)}
.post-head h1{max-width:22ch}
.post-meta{display:flex; gap:12px; align-items:center; margin-top:22px}
.post-meta .avatar{width:44px; height:44px; border-radius:14px}
.post-meta b{display:block}
.post-meta span{color:var(--muted); font-size:.9rem}
.post-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:50px; align-items:start}
.post{max-width:760px}
.post .photo{margin-bottom:30px}
.post-lead{font-size:1.15rem; color:var(--text); margin-bottom:16px}
.post-sec{margin-top:40px; scroll-margin-top:110px}
.post-sec h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:14px}
.post-sec p{color:var(--muted); margin-bottom:14px; font-size:1.05rem}
.post-sec .checks{margin:16px 0}
.post-sec .tbl{margin:18px 0}
.post-sec .tbl table{min-width:480px}
.author-box{display:flex; gap:16px; align-items:flex-start; margin-top:44px; padding:24px; border-radius:20px; background:var(--bg2); border:1px solid var(--line)}
.post-side{position:sticky; top:110px; display:grid; gap:18px}
.toc h3{font-size:1.1rem; margin-bottom:12px}
.toc ol{margin:0; padding-left:20px; display:grid; gap:7px; font-size:.92rem}
.toc a{color:var(--muted); transition:color .2s}
.toc a:hover{color:var(--violet)}
.side-cta{padding:26px}
.chat{display:grid; gap:12px; font-size:.86rem}
.chat .msg{padding:12px 14px; border-radius:16px; max-width:90%}
.chat .me{justify-self:end; background:var(--violet); color:#fff; border-bottom-right-radius:4px}
.chat .bot{display:flex; gap:10px; background:var(--bg2); border-bottom-left-radius:4px}
.chat .bot-ic{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,var(--mint),var(--sky)); color:#fff}
.chat .cite{display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:var(--t-green); color:var(--green-text); font-weight:700; font-size:.75rem}
.ai-tags{display:flex; flex-wrap:wrap; gap:6px}
.ai-tags span{font-size:.75rem; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--green-text)}
@media (max-width:1000px){ .post-grid{grid-template-columns:minmax(0,1fr)} .post-side{position:static} .promises{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .qa-grid,.guide-grid,.promises{grid-template-columns:1fr} .guide-grid article{padding:26px 22px 26px 66px} .guide-grid .gnum{left:20px} .qa{padding:24px} }

.hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.case .result.small{font-size:1.05rem; color:var(--vd)}

/* industries */
.ind-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.ind-card{display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:20px; background:var(--surface); border:1px solid var(--line); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s}
.ind-card:hover{transform:translateY(-4px); box-shadow:var(--sh1); border-color:var(--vl)}
.ind-card .ind-ico{flex:none; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; background:linear-gradient(135deg,var(--t-violet),var(--t-sky)); transition:transform .45s cubic-bezier(.3,1.6,.4,1)}
.ind-card:hover .ind-ico{transform:rotate(-10deg) scale(1.1)}
.ind-card h3{font-size:1.12rem; margin:0 0 4px}
.ind-card p{color:var(--muted); font-size:.93rem; margin:0}
.ind-card .go{margin-left:auto; flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--violet); transition:all .3s}
.ind-card .go svg{width:18px}
.ind-card:hover .go{background:var(--violet); color:#fff; border-color:var(--violet); transform:rotate(-45deg)}
.mega-all{margin-top:6px; color:var(--violet)!important; font-weight:800!important}
.foot-grid{grid-template-columns:1.3fr repeat(5,1fr)}
@media (max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:640px){ .ind-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} }

/* compact mega menu so it fits laptop screens */
.mega-in{padding:18px; gap:12px; max-height:calc(100vh - 130px); overflow-y:auto; overscroll-behavior:contain}
.mega a{padding:6px 8px; font-size:.88rem; gap:8px; line-height:1.3}
.mega a .mi{width:26px; height:26px; border-radius:8px}
.mega a .mi svg{width:14px}
.mega h4{margin:0 0 6px 8px}
.mega .col-seo{padding:10px 4px}
@media (max-width:1000px){ .devices{padding:10px 30px 40px 14px} }


/* ================= DESIGN 2.0 ================= */
/* light product mockups stay light in both themes */
.win,.laptop,.phone,.ph-mock,.flow .sc,.case .art,.mapbox{--bg:#fff;--bg2:#F7F5FF;--bg3:#EEEAFF;--text:#1C1250;--muted:#5E5985;--line:#E6E1FA;--surface:#fff;--t-violet:#F3F0FF;--t-sky:#EAF5FF;--t-green:#E5FAF4;--t-orange:#FFF0E4;--green-text:#0B8F71;--orange-text:#D35400;color:var(--text)}

/* dark theme */
:root[data-theme="dark"]{
 --bg:#0E0A22; --bg2:#141033; --bg3:#1D1745; --surface:#17123A; --glass:rgba(14,10,34,.84); --ink:#0A0719;
 --text:#F2F0FF; --muted:#ABA5CF; --line:rgba(255,255,255,.10);
 --violet:#8C77FF; --vd:#B3A6FF; --vl:#7A66F0; --ember:#FF7A2E; --el:#FF9E5E; --mint:#2FD3A0; --sky:#5BB6FF;
 --t-violet:#211A4F; --t-sky:#152B4D; --t-green:#103A33; --t-orange:#3A2214; --t-pink:#3A1630;
 --green-text:#47E0B3; --orange-text:#FFA36B; --sky-text:#7CC4FF; --pink-text:#FF8CC0;
 --sh1:0 2px 6px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
 --sh2:0 6px 14px rgba(0,0,0,.35),0 34px 70px -24px rgba(0,0,0,.75);
 color-scheme:dark;
}
:root[data-theme="dark"] .hero{background:radial-gradient(55% 60% at 80% 20%, rgba(91,182,255,.14), transparent 65%), radial-gradient(50% 55% at 10% 90%, rgba(140,119,255,.16), transparent 65%), linear-gradient(180deg,var(--bg),var(--bg2))}
:root[data-theme="dark"] .page-head{background:radial-gradient(50% 70% at 90% 10%, rgba(91,182,255,.12), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(140,119,255,.14), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg2))}
:root[data-theme="dark"] .sec.glow{background:radial-gradient(60% 70% at 85% 0%, rgba(91,182,255,.10), transparent 60%), var(--bg)}
:root[data-theme="dark"] .circuit path.tr{stroke:rgba(140,119,255,.16)}
:root[data-theme="dark"] .circuit circle{fill:var(--bg); stroke:rgba(140,119,255,.4)}
:root[data-theme="dark"] .brand span{background:linear-gradient(100deg,#fff,#B3A6FF); -webkit-background-clip:text; background-clip:text}
:root[data-theme="dark"] .btn-primary::before{background:linear-gradient(110deg,#5B3DF5,#7A5CFF)}
:root[data-theme="dark"] .logo-card{background:#fff}
:root[data-theme="dark"] .tbl thead th{background:var(--bg3)}
:root[data-theme="dark"] .tbl td.hl{background:rgba(140,119,255,.08)}
:root[data-theme="dark"] .tbl tbody tr:hover td{background:rgba(255,255,255,.03)}
:root[data-theme="dark"] .menu-btn i{background:var(--text)}
:root[data-theme="dark"] .big-word{background:linear-gradient(180deg,rgba(140,119,255,.28),rgba(140,119,255,0)); -webkit-background-clip:text; background-clip:text}
:root[data-theme="dark"] .tools span{background:var(--surface)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--bg2)}
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus{background:var(--surface)}
.theme-anim,.theme-anim *{transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important}

/* typography: confident, wide headlines */
h1,h2,h3,h4{font-variation-settings:"wdth" 112; letter-spacing:-.025em}
h1{font-size:clamp(2.6rem,5.6vw,4.8rem); font-weight:800; line-height:1.02}
h2{font-size:clamp(1.9rem,3.6vw,3rem); font-weight:750; line-height:1.06}
h3{font-variation-settings:"wdth" 104; letter-spacing:-.012em; font-weight:700}
.hero h1{font-size:clamp(2.7rem,6vw,5.3rem); font-variation-settings:"wdth" 118; letter-spacing:-.035em}
.brand{font-variation-settings:"wdth" 110}
.lead{font-size:1.16rem; line-height:1.7}

/* one deep, confident band for results */
.sec.dots{background:var(--ink); background-image:radial-gradient(rgba(140,119,255,.22) 1.1px, transparent 1.2px); background-size:26px 26px; color:#F2F0FF}
.sec.dots h2,.sec.dots .sec-head h2{color:#fff}
.sec.dots .lead,.sec.dots .muted{color:#B9B3DD}
.sec.dots .stat{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10)}
.sec.dots .stat span{color:#C9C4EA}
.sec.dots .stat:nth-child(1) b{color:#A898FF}.sec.dots .stat:nth-child(2) b{color:#47E0B3}.sec.dots .stat:nth-child(3) b{color:#7CC4FF}.sec.dots .stat:nth-child(4) b{color:#FFA36B}
.sec.dots .prose p{color:#C9C4EA}
.sec.dots .card{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); color:#F2F0FF}
.sec.dots .card p{color:#C9C4EA}
.sec.dots .team-card .av{filter:saturate(.9)}

/* theme toggle */
.theme-btn{flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); display:grid; place-items:center; transition:border-color .25s, transform .25s, background .25s}
.theme-btn:hover{border-color:var(--violet); transform:rotate(-12deg)}
.theme-btn svg{width:19px; height:19px}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block; color:#FFC24A}
@media (max-width:860px){ .theme-btn{margin-left:auto} .menu-btn{margin-left:8px} }

/* RanKlick brand transition */
#rk-trans{position:fixed; inset:0; z-index:96; display:grid; place-items:center; pointer-events:none; visibility:hidden; clip-path:inset(100% 0 0 0);
 background:radial-gradient(60% 80% at 80% 10%, rgba(91,182,255,.35), transparent 60%), linear-gradient(140deg,#24168A,#4B2FD1 55%,#6A4CF5)}
#rk-trans .rkt{display:flex; align-items:center; gap:18px}
#rk-trans svg{width:clamp(70px,9vw,110px); height:auto; overflow:visible}
#rk-trans .bar{transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0)}
#rk-trans .curve{stroke-dasharray:200; stroke-dashoffset:200}
#rk-trans .dot{opacity:0}
#rk-trans .word{display:flex; font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,6vw,4.4rem); letter-spacing:-.03em; color:#fff; font-variation-settings:"wdth" 115; overflow:hidden; padding:.08em 0}
#rk-trans .word span{display:inline-block; transform:translateY(105%); opacity:0}
html.rk-cover #rk-trans{visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .36s cubic-bezier(.7,0,.25,1)}
html.rk-cover #rk-trans .bar{animation:rktBar .34s cubic-bezier(.2,.8,.2,1) forwards}
html.rk-cover #rk-trans .b2{animation-delay:.07s} html.rk-cover #rk-trans .b3{animation-delay:.14s}
html.rk-cover #rk-trans .curve{animation:rktCurve .32s .22s ease-out forwards}
html.rk-cover #rk-trans .dot{animation:rktDot .2s .5s forwards}
html.rk-cover.rk-full #rk-trans .word span{animation:rktLetter .32s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.12s + var(--i) * 32ms)}
html.rk-hold #rk-trans,html.rk-leave #rk-trans{visibility:visible; clip-path:inset(0 0 0 0)}
html.rk-hold #rk-trans .bar,html.rk-leave #rk-trans .bar{transform:none}
html.rk-hold #rk-trans .curve,html.rk-leave #rk-trans .curve{stroke-dashoffset:0}
html.rk-hold #rk-trans .dot,html.rk-leave #rk-trans .dot{opacity:1}
html.rk-leave #rk-trans{clip-path:inset(0 0 100% 0); transition:clip-path .42s cubic-bezier(.7,0,.25,1)}
@keyframes rktBar{to{transform:scaleY(1)}}
@keyframes rktCurve{to{stroke-dashoffset:0}}
@keyframes rktDot{to{opacity:1}}
@keyframes rktLetter{to{transform:none; opacity:1}}
#wipe{display:none!important}
@media (prefers-reduced-motion: reduce){ #rk-trans{display:none!important} }

/* hero + header refinements */
.hero h1{font-size:clamp(2.4rem,4.5vw,4.15rem); font-variation-settings:"wdth" 108; line-height:1.03}
@media (min-width:1001px){ .hero-grid{grid-template-columns:1.08fr .92fr; gap:56px} }
.nav{gap:14px}
.nav ul.links{gap:0}
.nav ul.links > li > a{padding:8px 10px; font-size:.94rem}
.nav ul.links > li > a::after{left:10px; right:10px}
.brand{margin-right:10px}
@media (max-width:1240px){ .nav ul.links > li > a{padding:8px 8px; font-size:.9rem} }
@media (max-width:1100px){ .nav > .btn{display:none} }
#rk-trans svg{width:clamp(92px,11vw,140px)}
#rk-trans .word{font-size:clamp(2.6rem,7vw,5.2rem)}
.topbar{background:linear-gradient(90deg,#4B2FD1,#6A4CF5 50%,#2E8BE6)}

/* ===== restored + improved effects ===== */
/* hero: line-by-line reveal, gradient line, sized so each line fits */
.hero h1{font-size:clamp(2.3rem,3.7vw,3.45rem); font-variation-settings:"wdth" 106; line-height:1.06}
.hero h1 .hln{display:block; overflow:hidden; padding-bottom:.06em}
.hero h1 .hln > span{display:inline-block}
.hero .circuit path.tr{stroke:rgba(106,76,245,.16)}
/* transition: brand name on every page change */
html.rk-hold #rk-trans .word span,html.rk-leave #rk-trans .word span{transform:none; opacity:1}
html.rk-cover:not(.rk-full) #rk-trans .word span{animation:rktLetter .26s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.08s + var(--i) * 22ms)}
/* richer hover: lift, glowing gradient border, cursor spotlight, animated icon */
.card{transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s}
.card:hover{transform:translateY(-7px); box-shadow:0 26px 60px -24px rgba(106,76,245,.45), 0 8px 18px -10px rgba(56,166,255,.25)}
.card::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(106,76,245,.14), transparent 62%)}
.card:hover .ico{transform:rotate(-8deg) scale(1.12); background:linear-gradient(135deg,var(--violet),var(--sky)); color:#fff; box-shadow:0 10px 22px -10px rgba(106,76,245,.8)}
.card h3{transition:color .3s}
.card:hover h3{color:var(--violet)}
:root[data-theme="dark"] .card:hover{box-shadow:0 26px 60px -24px rgba(140,119,255,.5), 0 8px 18px -10px rgba(91,182,255,.25)}
.ind-card:hover{transform:translateY(-5px); box-shadow:0 22px 50px -24px rgba(106,76,245,.45)}
.ind-card:hover .ind-ico{transform:rotate(-10deg) scale(1.12)}
.case:hover{transform:translateY(-8px); box-shadow:0 30px 60px -26px rgba(106,76,245,.5)}
.plan:hover{transform:translateY(-10px)}
.stat:hover{transform:translateY(-6px); box-shadow:var(--sh2)}
.tools span:hover{transform:translateY(-3px)}
.step:hover .n{transform:translateY(-4px) rotate(-6deg)}
.sub-list a:hover{transform:translateX(5px)}
.photo:hover img{transform:scale(1.07)}
.btn:hover::before{transform:skewX(-12deg) scale(1.05)}
/* click ripple in brand colours */
.ripple{border-color:var(--violet); border-width:2.5px}
.ripple.r2{border-color:var(--ember)}


/* ================= THEME: WordPress content, blog, Elementor ================= */
/* readable content for normal pages and posts */
.rk-content{font-size:1.06rem; line-height:1.8; color:var(--text)}
.rk-content > * + *{margin-top:1.1em}
.rk-content p{margin:0 0 1.1em; color:var(--muted)}
.rk-content h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:1.8em 0 .6em}
.rk-content h3{font-size:1.35rem; margin:1.5em 0 .5em}
.rk-content h4{font-size:1.1rem; margin:1.3em 0 .4em}
.rk-content a{color:var(--violet); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--violet) 35%,transparent)}
.rk-content a:hover{text-decoration-color:var(--violet)}
.rk-content ul,.rk-content ol{padding-left:1.4em; color:var(--muted)}
.rk-content li{margin:.35em 0}
.rk-content blockquote{margin:1.6em 0; padding:18px 24px; border-left:4px solid var(--violet); background:var(--bg2); border-radius:0 14px 14px 0; font-family:var(--display); font-size:1.2rem; color:var(--text)}
.rk-content img{border-radius:16px; height:auto}
.rk-content table{width:100%; border-collapse:collapse; display:block; overflow-x:auto}
.rk-content th,.rk-content td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left}
.rk-content th{background:var(--bg2); font-family:var(--display)}
.rk-content code{background:var(--bg3); padding:2px 6px; border-radius:6px; font-size:.92em}
.rk-content pre{background:var(--bg2); padding:18px; border-radius:14px; overflow-x:auto}
.rk-content hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.rk-narrow{max-width:780px}
.alignwide{max-width:min(1220px,100%)}
.alignfull{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw)}
.aligncenter{margin-left:auto; margin-right:auto; text-align:center}
.alignleft{float:left; margin:0 1.5em 1em 0}
.alignright{float:right; margin:0 0 1em 1.5em}
.wp-caption-text,.wp-element-caption{font-size:.88rem; color:var(--muted); text-align:center; margin-top:8px}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.skip-link:focus{position:fixed; left:16px; top:16px; z-index:100; width:auto; height:auto; clip:auto; padding:12px 18px; background:var(--surface); color:var(--text); border-radius:10px; box-shadow:var(--sh2)}
.sticky,.bypostauthor,.gallery-caption{}

/* custom WordPress menus (Appearance > Menus) */
.nav ul.links .sub-menu{position:absolute; top:100%; left:0; min-width:230px; list-style:none; margin:0; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh2); opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s; z-index:5}
.nav ul.links li:hover > .sub-menu,.nav ul.links li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:none}
.nav ul.links .sub-menu a{display:block; padding:9px 12px; border-radius:10px; font-weight:600; font-size:.92rem; color:var(--text)}
.nav ul.links .sub-menu a:hover{background:var(--bg2)}
.nav ul.links > li.current-menu-item > a,.nav ul.links > li.current-menu-ancestor > a{color:var(--text)}
.nav ul.links > li.current-menu-item > a::after{transform:scaleX(1)}
.brand .custom-logo{width:auto; max-height:46px}
@media (max-width:860px){ .nav ul.links .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 0 14px; background:none} .nav ul.links .sub-menu a{font-size:1.1rem} }

/* blog list, single post, archive, search, 404 */
.post-grid-list{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.post-tile{display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:var(--surface); border:1px solid var(--line); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s}
.post-tile:hover{transform:translateY(-6px); box-shadow:0 26px 60px -24px rgba(106,76,245,.45)}
.post-tile .thumb{aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--violet),var(--sky)); display:grid; place-items:center}
.post-tile .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .7s}
.post-tile:hover .thumb img{transform:scale(1.06)}
.post-tile .thumb .ph-mark{width:72px; opacity:.85}
.post-tile .body{padding:22px 24px 26px; display:grid; gap:8px}
.post-tile h2,.post-tile h3{font-size:1.25rem; margin:0}
.post-tile .meta{font-size:.85rem; color:var(--muted)}
.post-tile p{color:var(--muted); font-size:.96rem; margin:0}
.rk-pagination{display:flex; gap:8px; justify-content:center; margin-top:44px; flex-wrap:wrap}
.rk-pagination .page-numbers{min-width:44px; height:44px; padding:0 14px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-weight:700}
.rk-pagination .page-numbers.current,.rk-pagination a.page-numbers:hover{background:var(--violet); color:#fff; border-color:var(--violet)}
.post-nav{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px}
.post-nav a{display:block; padding:18px 20px; border-radius:16px; border:1px solid var(--line); background:var(--surface); font-weight:700; transition:border-color .25s}
.post-nav a:hover{border-color:var(--violet)}
.post-nav small{display:block; color:var(--muted); font-weight:600; margin-bottom:4px}
.post-nav .next{text-align:right}
.rk-featured{margin:0 0 32px; border-radius:24px; overflow:hidden; box-shadow:var(--sh2)}
.rk-featured img{width:100%; height:auto}
.tag-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.err-404{text-align:center; padding:40px 0}
.err-404 .big{font-family:var(--display); font-size:clamp(5rem,16vw,10rem); font-weight:800; line-height:1; background:linear-gradient(120deg,var(--violet),var(--sky),var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variation-settings:"wdth" 118}
.search-form{display:flex; gap:10px; max-width:560px}
.search-form input[type=search]{flex:1}
.comments-area{margin-top:50px}
.comment-list{list-style:none; padding:0}
.comment-body{padding:18px 20px; border:1px solid var(--line); border-radius:16px; margin-bottom:14px; background:var(--surface)}
@media (max-width:1000px){ .post-grid-list{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .post-grid-list,.post-nav{grid-template-columns:1fr} }

/* Elementor: RanKlick look on Elementor pages */
.rk-elementor{min-height:50vh}
.elementor p{margin:0 0 1em}
.elementor p:last-child{margin-bottom:0}
.elementor a{color:inherit}
.elementor-widget-text-editor a{color:var(--violet); text-decoration:underline; text-underline-offset:3px}
.elementor-widget-heading .elementor-heading-title{font-family:var(--display); font-variation-settings:"wdth" 110; letter-spacing:-.02em}
.elementor-button{font-family:var(--body); font-weight:700; border-radius:14px; transition:transform .25s, box-shadow .25s, filter .25s}
.elementor-button:hover{transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(106,76,245,.7)}
.elementor img{display:inline-block}
.elementor-widget-image img{border-radius:inherit}
.elementor-section,.e-con{position:relative}
.rk-site .elementor-widget-icon-box:hover .elementor-icon,.rk-site .elementor-widget-image-box:hover img{transform:translateY(-4px)}
.elementor-icon,.elementor-widget-image-box img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
:root[data-theme="dark"] .elementor-widget-text-editor,:root[data-theme="dark"] .elementor-widget-heading .elementor-heading-title{color:inherit}
:root[data-theme="dark"] .rk-elementor{color:var(--text)}
/* Elementor global colours follow light/dark mode (use Global Colours in Elementor for this to work) */
:root[data-theme="dark"] body[class*="elementor-kit-"]{--e-global-color-primary:#8C77FF; --e-global-color-secondary:#F2F0FF; --e-global-color-text:#ABA5CF; --e-global-color-accent:#FF7A2E}
:root[data-theme="dark"] body[class*="elementor-kit-"]{background:var(--bg); color:var(--text)}
.post-tile .thumb img.ph-mark{width:72px; height:auto; object-fit:contain; opacity:.9}
.post-tile:hover .thumb img.ph-mark{transform:scale(1.1) rotate(-4deg)}
.page-head .wrap.rk-narrow{max-width:780px}