.alignnone{margin:5px 0 20px 0}
.aligncenter,div.aligncenter{display:block;margin:5px auto}
.alignright{float:right;margin:5px 0 20px 20px}
.alignleft{float:left;margin:5px 20px 20px 0}
.wp-caption{background:var(--glass-dark);border:1px solid var(--border-dark);border-radius:12px;padding:8px;text-align:center;max-width:100%}
.wp-caption img{border-radius:8px;max-width:100%;height:auto}
.wp-caption-text{font-size:13px;color:var(--text-dim);margin-top:8px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.gallery{margin-bottom:1.5em;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.gallery-item{display:inline-block;text-align:center;width:100%}
.gallery-caption{display:block;font-size:13px;color:var(--text-dim);margin-top:8px}
.sticky{position:relative}
.bypostauthor{position:relative} .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:10px;background:var(--glass-dark);border:1px solid var(--border-dark);color:var(--text-light);font-weight:600;font-size:14px;transition:all 0.3s ease;margin:0 3px}
.page-numbers.current{background:var(--grad-1);color:#fff;border-color:transparent;box-shadow:0 4px 15px rgba(79,128,255,0.3)}
.page-numbers:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.page-numbers.dots{background:transparent;border:none} .comments-area{margin-top:32px}
.comments-title{font-size:20px;font-weight:700;color:var(--text-light);margin-bottom:24px}
.comment-list{list-style:none;padding:0}
.comment{padding:20px;margin-bottom:16px;border-radius:14px;background:var(--glass-dark);border:1px solid var(--border-dark)}
.comment-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.comment-author{font-weight:700;color:var(--text-light)}
.comment-metadata{font-size:13px;color:var(--text-dim)}
.comment-content{margin-top:8px;font-size:14px;color:var(--text-dim);line-height:1.8}
.comment-reply-link{display:inline-block;margin-top:8px;font-size:13px;color:var(--accent-blue)}
.comment-form textarea,.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"]{width:100%;padding:12px 16px;border-radius:10px;background:var(--glass-dark);border:1px solid var(--border-dark);color:var(--text-light);font-family:inherit;margin-bottom:12px}
.comment-form textarea:focus,.comment-form input:focus{outline:none;border-color:var(--accent-blue)}
.form-submit input[type="submit"]{padding:12px 24px;border-radius:12px;background:var(--grad-1);color:#fff;border:none;font-family:inherit;font-weight:600;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease}
.form-submit input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,0.4)} .phx-container{max-width:1400px;margin:0 auto;padding:0 32px}
.phx-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} .logo-word{font-weight:800;font-size:22px;background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:8px;display:inline-block;vertical-align:middle} .nav-actions{display:flex;align-items:center;gap:14px} body.light .page-numbers{background:var(--glass-light);border-color:var(--border-light);color:var(--text-dark)}
body.light .page-numbers.current{background:var(--grad-1);color:#fff}
body.light .page-numbers:hover{border-color:var(--accent-purple);color:var(--accent-purple)}
body.light .comment{background:var(--glass-light);border-color:var(--border-light)}
body.light .comment-author{color:var(--text-dark)}
body.light .comment-form textarea,body.light .comment-form input{background:var(--glass-light);border-color:var(--border-light);color:var(--text-dark)}
body.light .phx-card{background:var(--glass-light);border-color:var(--border-light)}
body.light .phx-card h2{color:var(--text-dark)}
body.light .phx-page h1,body.light .phx-single h1,body.light .phx-archive h1,body.light .phx-search h1{color:var(--text-dark)!important}
body.light .phx-content{color:var(--text-muted)}
body.light .phx-search-card{background:var(--glass-light);border-color:var(--border-light)}
body.light .phx-search-card h2{color:var(--text-dark)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Vazirmatn',sans-serif;font-weight:400;line-height:1.7;overflow-x:hidden;background:#070D1A;color:#C8D8F0;transition:background 0.6s ease,color 0.6s ease;min-height:100vh;width:100%}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
ul{list-style:none} :root{
--bg-deep:#070D1A;--bg-mid:#0C1220;--bg-card:#111828;
--bg-light:#F0F4FF;--bg-light-2:#E4EAFF;--bg-white:#FFFFFF;
--text-dark:#1A2040;--text-muted:#5A6890;--text-light:#C8D8F0;--text-dim:#8FA3C8;
--accent-blue:#4F80FF;--accent-purple:#8B5CF6;--accent-teal:#38E8C0;
--grad-1:linear-gradient(135deg,#4F80FF 0%,#8B5CF6 50%,#38E8C0 100%);
--grad-2:linear-gradient(135deg,#8B5CF6 0%,#4F80FF 100%);
--grad-3:linear-gradient(135deg,#38E8C0 0%,#4F80FF 100%);
--glass-dark:rgba(17,24,40,0.55);--glass-light:rgba(255,255,255,0.6);
--border-dark:rgba(79,128,255,0.18);--border-light:rgba(26,32,64,0.08);
--shadow-neon:0 0 40px rgba(79,128,255,0.35),0 0 80px rgba(139,92,246,0.18);
--shadow-soft:0 10px 40px rgba(26,32,64,0.08);
}
body.light{background:var(--bg-light);color:var(--text-dark)} #bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%!important}
body.light #bg-canvas{opacity:0.35}
.blob{position:fixed;border-radius:50%;filter:blur(100px);opacity:0.5;pointer-events:none;z-index:1;contain:strict;will-change:transform}
.blob.b1{width:500px;height:500px;background:#4F80FF;top:-150px;right:-150px;animation:drift1 22s ease-in-out infinite}
.blob.b2{width:450px;height:450px;background:#8B5CF6;bottom:-150px;left:-100px;animation:drift2 26s ease-in-out infinite}
.blob.b3{width:380px;height:380px;background:#38E8C0;top:40%;left:30%;opacity:0.25;animation:drift3 30s ease-in-out infinite}
body.light .blob{opacity:0.35}
body.light .blob.b1{background:#8B5CF6}
body.light .blob.b2{background:#4F80FF}
body.light .blob.b3{background:#38E8C0}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,60px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-80px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,40px)}}
@keyframes logoSpin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:0.3;transform:scale(1)}50%{opacity:0.55;transform:scale(1.1)}} #phx-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background 0.4s ease,backdrop-filter 0.4s ease,-webkit-backdrop-filter 0.4s ease,border-color 0.4s ease,padding 0.4s ease}
#phx-header.scrolled{background:var(--glass-dark);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-dark);padding:12px 0}
body.light #phx-header.scrolled{background:var(--glass-light);border-bottom:1px solid var(--border-light)}
.nav-wrap{max-width:1400px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:flex;align-items:center;gap:12px;position:relative;width:48px;height:48px}
.logo-ring{position:absolute;inset:0;border-radius:50%;background:var(--grad-1);padding:2px;animation:logoSpin 6s linear infinite}
.logo-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--bg-deep)}
body.light .logo-ring::before{background:var(--bg-white)}
.logo-inner{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(79,128,255,0.5)}
body.light .logo-inner{background:var(--bg-white);box-shadow:0 4px 20px rgba(139,92,246,0.2)}
.logo-text{font-weight:900;font-size:20px;background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-glow{position:absolute;inset:-8px;border-radius:50%;background:var(--grad-1);opacity:0.3;filter:blur(15px);z-index:1;animation:pulse 3s ease-in-out infinite} nav ul{display:flex;gap:6px;align-items:center}
nav a{position:relative;padding:10px 16px;font-size:14px;font-weight:500;border-radius:10px;color:var(--text-light);transition:color 0.3s ease,background 0.3s ease}
body.light nav a{color:var(--text-dark)}
nav a:hover{color:var(--accent-blue);background:rgba(79,128,255,0.08)}
nav .current-menu-item a,nav .current_page_item a,nav a.active{color:var(--accent-blue)}
nav .current-menu-item a::after,nav .current_page_item a::after,nav a.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--grad-1);border-radius:2px} .theme-toggle{position:relative;width:62px;height:32px;border-radius:20px;background:rgba(79,128,255,0.15);border:1px solid var(--border-dark);cursor:pointer;overflow:hidden;transition:background 0.3s ease,border-color 0.3s ease;flex-shrink:0}
body.light .theme-toggle{background:rgba(139,92,246,0.1);border-color:var(--border-light)}
.theme-toggle .toggle-thumb{position:absolute;top:3px;width:24px;height:24px;border-radius:50%;background:var(--grad-1);transition:left 0.4s cubic-bezier(0.68,-0.55,0.27,1.55),right 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(79,128,255,0.5)}
.theme-toggle .toggle-thumb.sun{right:4px;left:auto}
.theme-toggle .toggle-thumb.moon{left:4px;right:auto}
.theme-toggle .icon{font-size:13px}
.theme-toggle::before{content:'☀';position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;opacity:0.7;z-index:1}
.theme-toggle::after{content:'☾';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:13px;opacity:0.7;z-index:1} .btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;overflow:hidden;background:var(--grad-1);color:#fff;box-shadow:0 8px 24px rgba(79,128,255,0.35);transition:transform 0.3s ease,box-shadow 0.3s ease;flex-shrink:0}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.4) 50%,transparent 70%);transform:translateX(-100%);transition:transform 0.6s ease}
.btn:hover::before{transform:translateX(100%)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(139,92,246,0.5)}
.btn-ghost{background:transparent;border:1px solid var(--border-dark);color:var(--text-light);box-shadow:none}
body.light .btn-ghost{border-color:var(--border-light);color:var(--text-dark)}
.btn-ghost:hover{background:rgba(79,128,255,0.08);border-color:var(--accent-blue)} section{position:relative;z-index:2;padding:120px 0}
.section-head{text-align:center;margin-bottom:64px;max-width:800px;margin-left:auto;margin-right:auto}
.section-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:30px;background:rgba(79,128,255,0.1);border:1px solid var(--border-dark);color:var(--accent-blue);font-size:13px;font-weight:500;margin-bottom:20px}
body.light .section-tag{background:rgba(139,92,246,0.08);border-color:var(--border-light)}
.section-title{font-size:clamp(32px,4vw,52px);font-weight:900;line-height:1.2;letter-spacing:-1px;margin-bottom:16px}
.section-title .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-sub{font-size:17px;color:var(--text-dim);max-width:680px;margin:0 auto}
body.light .section-sub{color:var(--text-muted)} #hero{padding-top:160px;padding-bottom:80px;min-height:100vh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:30px;background:var(--glass-dark);border:1px solid var(--border-dark);backdrop-filter:blur(10px);font-size:13px;color:var(--text-light);margin-bottom:24px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-teal);box-shadow:0 0 10px var(--accent-teal);animation:pulse 2s infinite;flex-shrink:0}
.hero-title{font-size:clamp(40px,5.5vw,72px);font-weight:900;line-height:1.05;letter-spacing:-2px;margin-bottom:24px}
.hero-title .grad{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.hero-desc{font-size:18px;color:var(--text-dim);max-width:540px;margin-bottom:36px;line-height:1.9}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap}
.hero-stat-num{font-size:28px;font-weight:800;background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat-lbl{font-size:13px;color:var(--text-dim)} .sphere-wrap{position:relative;width:100%;aspect-ratio:1;max-width:520px;margin:0 auto;perspective:1200px;contain:layout style}
.sphere{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,#4F80FF 0%,#8B5CF6 35%,#0C1220 75%);box-shadow:inset -30px -30px 80px rgba(0,0,0,0.6),0 0 80px rgba(79,128,255,0.4),0 0 160px rgba(139,92,246,0.25);animation:sphereFloat 8s ease-in-out infinite}
.sphere::before{content:'';position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 70% 70%,rgba(56,232,192,0.4) 0%,transparent 50%)}
.sphere::after{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent,#4F80FF,transparent,#8B5CF6,transparent,#38E8C0,transparent);filter:blur(20px);opacity:0.6;z-index:-1;animation:logoSpin 12s linear infinite}
@keyframes sphereFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}
.ring{position:absolute;border-radius:50%;border:2px solid;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(75deg);pointer-events:none}
.ring.r1{width:110%;height:110%;border-color:rgba(79,128,255,0.4);animation:ringSpin 20s linear infinite}
.ring.r2{width:130%;height:130%;border-color:rgba(139,92,246,0.3);animation:ringSpin 28s linear infinite reverse;border-style:dashed}
.ring.r3{width:150%;height:150%;border-color:rgba(56,232,192,0.2);animation:ringSpin 36s linear infinite}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotateX(75deg) rotateZ(360deg)}}
.orbit-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent-teal);box-shadow:0 0 20px var(--accent-teal);top:-7px;left:50%}
.data-card{position:absolute;background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--border-dark);border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-light);box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:floatCard 6s ease-in-out infinite;min-width:160px}
.data-card .icn{width:36px;height:36px;border-radius:10px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.dc1{top:8%;right:-10%;animation-delay:0s}
.dc2{bottom:12%;left:-8%;animation-delay:2s}
.dc3{top:45%;right:-15%;animation-delay:4s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} #stats{padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--border-dark);border-radius:24px;padding:48px 32px;box-shadow:var(--shadow-neon)}
body.light .stats-grid{background:var(--glass-light);border-color:var(--border-light);box-shadow:var(--shadow-soft)}
.stat-item{text-align:center;position:relative}
.stat-item:not(:last-child)::after{content:'';position:absolute;left:0;top:10%;bottom:10%;width:1px;background:var(--border-dark)}
body.light .stat-item:not(:last-child)::after{background:var(--border-light)}
.stat-icon{width:56px;height:56px;border-radius:14px;margin:0 auto 16px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 30px rgba(79,128,255,0.4)}
.stat-num{font-size:42px;font-weight:900;background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.stat-lbl{font-size:14px;color:var(--text-dim)} .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.service-card{position:relative;padding:36px 28px;border-radius:20px;background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--border-dark);overflow:hidden;transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1),box-shadow 0.4s ease,border-color 0.4s ease}
.service-card::before{content:'';position:absolute;inset:0;background:var(--grad-1);opacity:0;transition:opacity 0.4s ease;z-index:0}
.service-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-neon);border-color:transparent}
.service-card:hover::before{opacity:0.08}
.service-card>*{position:relative;z-index:1}
.service-icon{width:64px;height:64px;border-radius:16px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--grad-1);box-shadow:0 0 30px rgba(79,128,255,0.3);transition:transform 0.4s ease,box-shadow 0.4s ease}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-5deg);box-shadow:0 0 50px rgba(139,92,246,0.6)}
.service-card h3{font-size:20px;font-weight:800;margin-bottom:10px;color:#fff}
body.light .service-card h3{color:var(--text-dark)}
.service-card p{font-size:14px;color:var(--text-dim);line-height:1.8}
.service-card .arrow{margin-top:18px;font-size:20px;color:var(--accent-blue);transition:transform 0.3s ease;display:inline-block}
.service-card:hover .arrow{transform:translateX(-6px)} #solutions{background:linear-gradient(180deg,transparent 0%,var(--bg-light) 15%,var(--bg-light) 85%,transparent 100%);position:relative}
#solutions::before{content:'';position:absolute;inset:0;background:var(--bg-light);z-index:-1}
body.light #solutions::before{background:var(--bg-white)}
.tabs{display:flex;justify-content:center;gap:8px;margin-bottom:48px;flex-wrap:wrap}
.tab-btn{padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;background:var(--glass-light);border:1px solid var(--border-light);color:var(--text-muted);transition:all 0.3s ease;cursor:pointer;backdrop-filter:blur(10px)}
.tab-btn:hover{color:var(--accent-purple);transform:translateY(-2px)}
.tab-btn.active{background:var(--grad-2);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(139,92,246,0.35)}
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn 0.5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.dashboard{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;background:var(--glass-light);border:1px solid var(--border-light);border-radius:24px;padding:36px;backdrop-filter:blur(20px);box-shadow:var(--shadow-soft)}
.dash-visual{position:relative;height:340px;border-radius:16px;background:linear-gradient(135deg,#fff,#F0F4FF);overflow:hidden;border:1px solid var(--border-light)}
.dash-header{padding:12px 16px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:8px;background:#fff}
.dash-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dash-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.dash-bar{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--accent-purple),var(--accent-blue))}
.dash-chart{position:absolute;bottom:20px;right:20px;left:20px;height:120px;background-image:linear-gradient(rgba(139,92,246,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,0.1) 1px,transparent 1px);background-size:20px 20px;border-radius:10px;overflow:hidden}
.dash-chart svg{width:100%;height:100%}
.dash-features{display:flex;flex-direction:column;gap:18px}
.dash-feature{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--border-light);transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease}
.dash-feature:hover{transform:translateX(-4px);box-shadow:var(--shadow-soft);border-color:var(--accent-purple)}
.dash-feature .icn{width:42px;height:42px;border-radius:10px;background:var(--grad-2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dash-feature h4{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:4px}
.dash-feature p{font-size:13px;color:var(--text-muted)} #process{background:linear-gradient(180deg,transparent 0%,var(--bg-light-2) 15%,var(--bg-light-2) 85%,transparent 100%);position:relative}
#process::before{content:'';position:absolute;inset:0;background:var(--bg-light-2);z-index:-1;opacity:0.5}
body.light #process::before{background:var(--bg-white);opacity:1}
.process-wrap{position:relative;padding:40px 0 80px;max-width:1000px;margin:0 auto}
.process-line{position:absolute;top:80px;right:5%;left:5%;height:3px;background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple),var(--accent-teal),var(--accent-blue));background-size:200% 100%;animation:lineFlow 4s linear infinite;border-radius:3px}
@keyframes lineFlow{to{background-position:200% 0}}
.process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;position:relative}
.step{text-align:center}
.step-circle{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;background:var(--bg-white);border:3px solid var(--accent-purple);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:var(--accent-purple);transition:all 0.3s ease;box-shadow:0 0 0 0 rgba(139,92,246,0.5);position:relative}
.step-circle::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent-purple);opacity:0.3;animation:stepPulse 2.5s ease-in-out infinite}
@keyframes stepPulse{0%,100%{transform:scale(1);opacity:0.3}50%{transform:scale(1.15);opacity:0}}
.step:hover .step-circle{background:var(--grad-2);color:#fff;border-color:transparent;transform:scale(1.1) rotate(360deg);box-shadow:0 0 30px rgba(139,92,246,0.5)}
.step h4{font-size:16px;font-weight:700;color:var(--text-dark);margin-bottom:8px}
.step p{font-size:13px;color:var(--text-muted);line-height:1.7} #clients{padding:80px 0;overflow:hidden}
.marquee{display:flex;gap:48px;animation:marquee 30s linear infinite;width:max-content}
.marquee:hover{animation-play-state:paused}
.marquee-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
@keyframes marquee{to{transform:translateX(50%)}}
.client-logo{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;color:var(--text-dim);white-space:nowrap;opacity:0.7;transition:opacity 0.3s ease,color 0.3s ease;min-width:200px}
.client-logo:hover{opacity:1;color:var(--accent-blue)}
.client-logo .mark{width:40px;height:40px;border-radius:10px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#fff} .num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.num-card{padding:40px 28px;border-radius:24px;text-align:center;background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--border-dark);position:relative;overflow:hidden;transition:transform 0.4s ease,box-shadow 0.4s ease,border-color 0.4s ease}
.num-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,var(--accent-blue),transparent,var(--accent-purple),transparent);opacity:0.1;animation:rot 12s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.num-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-neon);border-color:transparent}
.num-num{font-size:clamp(40px,5vw,64px);font-weight:900;background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;z-index:1;margin-bottom:8px;letter-spacing:-2px}
.num-suffix{font-size:24px}
.num-lbl{font-size:15px;color:var(--text-dim);position:relative;z-index:1} #portfolio{padding:120px 0;overflow:hidden}
.portfolio-wrapper{max-width:1000px;margin:0 auto;position:relative}
.portfolio-stage{position:relative;height:500px;margin-bottom:40px}
.portfolio-card{position:absolute;top:50%;left:50%;width:340px;height:440px;border-radius:28px;background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--border-dark);transition:transform 0.6s cubic-bezier(0.25,0.8,0.25,1.2),opacity 0.6s ease,filter 0.6s ease,box-shadow 0.6s ease;cursor:pointer;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
.portfolio-card:hover{box-shadow:var(--shadow-neon)}
.port-thumb{height:55%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.port-thumb::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,0.3) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(56,232,192,0.4) 0%,transparent 50%);z-index:1}
.port-thumb svg{width:80%;height:80%;position:relative;z-index:1}
.port-img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.port-info{padding:28px}
.port-tag{display:inline-block;padding:6px 14px;border-radius:20px;background:rgba(79,128,255,0.15);color:var(--accent-blue);font-size:12px;font-weight:600;margin-bottom:12px}
.port-info h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px}
body.light .portfolio-card .port-info h3{color:var(--text-dark)}
.port-info p{font-size:14px;color:var(--text-dim);line-height:1.8}
.port-nav{display:flex;align-items:center;justify-content:center;gap:20px}
.port-arrow{width:48px;height:48px;border-radius:50%;background:var(--glass-dark);border:1px solid var(--border-dark);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-light);transition:all 0.3s ease;backdrop-filter:blur(10px);cursor:pointer}
body.light .port-arrow{background:var(--glass-light);border-color:var(--border-light);color:var(--text-dark)}
.port-arrow:hover{background:var(--grad-1);color:#fff;border-color:transparent;transform:scale(1.1);box-shadow:0 0 30px rgba(79,128,255,0.5)}
.port-indicator{display:flex;gap:8px}
.port-dot{width:10px;height:10px;border-radius:50%;background:var(--border-dark);cursor:pointer;transition:width 0.3s ease,background 0.3s ease}
body.light .port-dot{background:var(--border-light)}
.port-dot.active{width:32px;border-radius:20px;background:var(--grad-1)} #certs{background:linear-gradient(180deg,transparent 0%,var(--bg-light) 15%,var(--bg-light) 85%,transparent 100%);position:relative}
#certs::before{content:'';position:absolute;inset:0;background:var(--bg-light);z-index:-1}
body.light #certs::before{background:var(--bg-white)}
.certs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.cert-card{padding:32px 24px;border-radius:20px;text-align:center;background:var(--glass-light);border:1px solid var(--border-light);backdrop-filter:blur(20px);transition:transform 0.4s ease,box-shadow 0.4s ease,border-color 0.4s ease}
.cert-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-soft);border-color:var(--accent-purple)}
.cert-badge{width:90px;height:90px;border-radius:50%;margin:0 auto 18px;background:var(--grad-1);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;font-weight:900;box-shadow:0 0 30px rgba(79,128,255,0.3);position:relative}
.cert-badge::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px dashed var(--accent-purple);animation:logoSpin 20s linear infinite}
.cert-card h4{font-size:16px;font-weight:700;color:var(--text-dark);margin-bottom:6px}
.cert-card p{font-size:13px;color:var(--text-muted)} .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.testi-card{padding:32px;border-radius:24px;background:var(--glass-dark);backdrop-filter:blur(20px);border:1px solid var(--border-dark);transition:transform 0.4s ease,box-shadow 0.4s ease,border-color 0.4s ease}
.testi-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-neon);border-color:transparent}
.testi-quote{font-size:30px;color:var(--accent-blue);line-height:1;margin-bottom:12px}
.testi-text{font-size:15px;color:var(--text-light);margin-bottom:24px;line-height:1.9}
body.light .testi-text{color:var(--text-dark)}
.testi-stars{color:var(--accent-teal);margin-bottom:18px;font-size:16px;letter-spacing:2px}
.testi-author{display:flex;align-items:center;gap:14px}
.testi-avatar{width:52px;height:52px;border-radius:50%;background:var(--grad-1);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0}
.testi-name{font-size:15px;font-weight:700;color:#fff}
body.light .testi-name{color:var(--text-dark)}
.testi-role{font-size:13px;color:var(--text-dim)} #techstack{background:linear-gradient(180deg,transparent 0%,var(--bg-light) 15%,var(--bg-light) 85%,transparent 100%);position:relative}
#techstack::before{content:'';position:absolute;inset:0;background:var(--bg-light);z-index:-1}
body.light #techstack::before{background:var(--bg-white)}
.tech-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tech-card{padding:24px 16px;border-radius:16px;text-align:center;background:var(--glass-light);border:1px solid var(--border-light);backdrop-filter:blur(20px);transition:transform 0.4s ease,box-shadow 0.4s ease,border-color 0.4s ease,background 0.4s ease;font-weight:700}
.tech-card:hover{transform:translateY(-6px) scale(1.05);box-shadow:var(--shadow-soft);border-color:var(--accent-purple);background:#fff}
.tech-card .tech-icn{font-size:32px;margin-bottom:10px;display:block}
.tech-card span{font-size:13px;color:var(--text-dark)} #cta-section{padding:120px 0}
.cta-banner{position:relative;border-radius:32px;overflow:hidden;background:var(--bg-mid);padding:80px 60px;text-align:center;border:1px solid var(--border-dark);max-width:1000px;margin:0 auto}
.cta-banner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(79,128,255,0.15) 1px,transparent 1px),linear-gradient(90deg,rgba(79,128,255,0.15) 1px,transparent 1px);background-size:40px 40px;animation:gridMove 20s linear infinite;mask-image:radial-gradient(circle at center,black 30%,transparent 80%);-webkit-mask-image:radial-gradient(circle at center,black 30%,transparent 80%)}
@keyframes gridMove{to{background-position:40px 40px,40px 40px}}
.cta-banner::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(139,92,246,0.3),transparent 60%);animation:pulse 6s ease-in-out infinite}
.cta-content{position:relative;z-index:2}
.cta-banner h2{font-size:clamp(32px,4vw,52px);font-weight:900;letter-spacing:-1px;margin-bottom:18px;color:#fff}
.cta-banner p{font-size:18px;color:var(--text-dim);max-width:600px;margin:0 auto 36px} #phx-contact{position:relative;z-index:2;background:var(--bg-deep);border-top:1px solid var(--border-dark);padding:80px 0 32px}
body.light #phx-contact{background:var(--bg-white);border-top:1px solid var(--border-light)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-brand p{font-size:14px;color:var(--text-dim);margin:18px 0 24px;line-height:1.9}
.foot-col h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:20px}
body.light .foot-col h4{color:var(--text-dark)}
.foot-col a{display:block;padding:6px 0;font-size:14px;color:var(--text-dim);transition:color 0.3s ease,transform 0.3s ease}
.foot-col a:hover{color:var(--accent-blue);transform:translateX(-4px)}
.foot-socials{display:flex;gap:10px}
.foot-social{width:40px;height:40px;border-radius:10px;background:var(--glass-dark);border:1px solid var(--border-dark);display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;font-size:16px}
body.light .foot-social{background:var(--glass-light);border-color:var(--border-light)}
.foot-social:hover{background:var(--grad-1);border-color:transparent;transform:translateY(-3px) rotate(-8deg)}
.foot-bottom{padding-top:32px;border-top:1px solid var(--border-dark);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--text-dim)}
body.light .foot-bottom{border-color:var(--border-light)} .back-top{position:fixed;bottom:32px;left:32px;z-index:99;width:52px;height:52px;border-radius:50%;background:var(--grad-1);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(79,128,255,0.4);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity 0.4s ease,transform 0.4s ease}
.back-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{transform:translateY(-4px) rotate(360deg);box-shadow:0 12px 32px rgba(139,92,246,0.6)} .reveal{opacity:0;transform:translateY(40px);transition:opacity 0.9s cubic-bezier(0.2,0.8,0.2,1),transform 0.9s cubic-bezier(0.2,0.8,0.2,1);will-change:opacity,transform}
.reveal.up{transform:translateY(-40px)}
.reveal.left{transform:translateX(40px)}
.reveal.right{transform:translateX(-40px)}
.reveal.show{opacity:1;transform:translate(0)} @media(max-width:1024px){
.hero-grid{grid-template-columns:1fr;gap:40px}
.sphere-wrap{max-width:420px;margin-top:20px}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:32px}
.stat-item:not(:last-child)::after{display:none}
.process-grid{grid-template-columns:repeat(3,1fr)}
.process-line{display:none}
.num-grid{grid-template-columns:repeat(2,1fr)}
.tech-grid{grid-template-columns:repeat(4,1fr)}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px}
.dashboard{grid-template-columns:1fr}
.dash-visual{height:260px}
}
@media(max-width:768px){
section{padding:80px 0}
.phx-container{padding:0 20px}
.nav-wrap{padding:0 20px}
nav ul{display:none}
.tabs{gap:6px}
.tab-btn{padding:10px 16px;font-size:13px}
.process-grid{grid-template-columns:repeat(2,1fr);gap:32px}
.portfolio-card{width:280px;height:380px}
.portfolio-stage{height:420px}
.tech-grid{grid-template-columns:repeat(3,1fr)}
.cta-banner{padding:60px 28px}
.foot-grid{grid-template-columns:1fr;gap:32px}
.hero-title{letter-spacing:-1px}
.data-card{display:none}
.ring.r2,.ring.r3{display:none}
}
@media(max-width:480px){
.stats-grid{grid-template-columns:1fr;padding:32px 20px}
.num-grid{grid-template-columns:1fr}
.tech-grid{grid-template-columns:repeat(2,1fr)}
.tabs{flex-direction:column;align-items:stretch}
.tab-btn{flex:1}
.portfolio-card{width:240px;height:340px}
.portfolio-stage{height:380px}
#phx-header{padding:14px 0}
.nav-wrap{gap:12px}
.logo{width:40px;height:40px}
.logo-text{font-size:16px}
.theme-toggle{width:50px;height:26px}
.theme-toggle .toggle-thumb{width:20px;height:20px}
}