/* style.css */
@font-face{font-family:Yekan;src:url('/fonts/IRANYekanX-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Yekan;src:url('/fonts/IRANYekanX-Bold.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Yekan;src:url('/fonts/IRANYekanX-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--bg:#0a0911;--surface:#14121f;--text:#f5f3fa;--muted:#a49eb6;--line:#ffffff16;--blue:#5145ff;--orange:#f88d00;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:Yekan,Tahoma,sans-serif;font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}img{max-width:100%;height:auto}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{line-height:1.6}h1{font-size:clamp(34px,4.2vw,60px);font-weight:800;letter-spacing:-1.8px}h2{font-size:clamp(25px,2.6vw,35px);letter-spacing:-1px;font-weight:800;margin-bottom:14px}h3{font-size:19px;font-weight:700}p{color:var(--muted)}.shell{max-width:1240px;width:calc(100% - 100px);margin-inline:auto}.icon{flex-shrink:0;vertical-align:middle}.en{font:14px/1.5 Arial,sans-serif;letter-spacing:1.9px;color:#aaa2c4}.glass{border:1px solid var(--line);background:linear-gradient(125deg,#ffffff08,#ffffff02);backdrop-filter:blur(18px);border-radius:var(--radius)}.site-header{position:sticky;top:0;z-index:30;background:#0a0911de;border-bottom:1px solid var(--line);backdrop-filter:blur(22px)}.nav{display:flex;align-items:center;justify-content:space-between;gap:30px;height:98px}.brand{display:inline-flex;flex-shrink:0;align-items:center}.brand img{object-fit:contain;width:145px;height:auto}.nav nav{display:flex;gap:28px;align-items:center;font-size:15px}.nav nav a{color:#c7c1d6;transition:color .2s}.nav nav a:hover,.nav nav .nav-home{color:white}.nav nav span{margin-right:6px;color:#8f85a9}.nav-actions{display:flex;gap:20px;align-items:center}.portal-link{font-size:14px;color:#c0b8d1;display:flex;gap:8px;align-items:center}.portal-link .icon{width:16px}.btn{display:inline-flex;gap:25px;justify-content:center;align-items:center;border:1px solid #786dff;background:linear-gradient(110deg,#5648f9,#382beb);border-radius:12px;color:#fff;min-height:54px;padding:12px 24px;font-size:16px;box-shadow:0 6px 30px #4933e51a;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px);background:#6658ff}.btn .icon{width:19px}.btn.small{font-size:14px;min-height:44px;padding:10px 18px;gap:18px}.btn.ghost{background:#ffffff04;border-color:#ffffff22;box-shadow:none}.menu-toggle{display:none;color:white;background:none;border:0}.eyebrow{display:flex;align-items:center;gap:9px;color:#b2a9cc;font-size:14px;margin-bottom:18px}.eyebrow i{width:6px;height:6px;border-radius:50%;background:#8d7fff;box-shadow:0 0 14px #7365ff}.hero{position:relative;min-height:665px;padding-top:88px;display:grid;grid-template-columns:1.1fr 1fr;gap:25px;isolation:isolate}.hero:before{content:'';position:absolute;inset:-100px -40px 0;background:radial-gradient(ellipse at 25% 42%,#32217730,transparent 49%);z-index:-2;pointer-events:none}.hero-grid{position:absolute;inset:0 0 80px;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(ellipse at center,black,transparent 70%);z-index:-1}.hero-copy{padding-top:27px;position:relative;z-index:2}.hero-badge{border:1px solid #ffffff13;background:#ffffff04;border-radius:30px;width:fit-content;padding:5px 13px;font-size:14px;margin-bottom:23px}.hero h1{margin-bottom:19px;line-height:1.65}.hero h1 span{color:#b0a4ff;background:linear-gradient(90deg,#8676ff,#dbd2ff);background-clip:text;-webkit-text-fill-color:transparent}.hero-copy>p{font-size:16px;line-height:2.2;max-width:450px;color:#a59cb8;margin-bottom:29px}.hero-buttons{display:flex;gap:12px}.play{font-size:21px}.hero-proof{display:flex;align-items:center;gap:12px;color:#9790a8;font-size:14px;margin-top:30px}.hero-proof b{padding:0 7px;color:#5f566f}.proof-icons{display:flex;direction:ltr}.proof-icons .icon{width:28px;height:28px;padding:6px;border-radius:50%;background:#201a30;border:1px solid #514161;margin-left:-7px;color:#b9a9d8}.hero-art{position:relative;height:440px;direction:ltr;display:grid;place-items:center;perspective:900px}.orb-core{width:242px;height:242px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#c6bbffbf 0%,#785cff99 15%,#4632c879 38%,#2d1b6580 60%,#6551c450 76%,#b6a1ff80 100%);box-shadow:inset 3px 4px 15px #e7d6ff8f,inset -14px -20px 36px #8e5fe449,0 0 90px #6841fc38,0 20px 50px #0008;position:relative;border:1px solid #bfa8f755;transform:rotate(-12deg)}.orb-core:after{content:'';position:absolute;inset:14px;border-radius:50%;border-top:1px solid #ecddff66;filter:blur(1px)}.core-shine{width:90px;height:30px;background:#d7c0ff75;filter:blur(16px);position:absolute;left:34px;top:21px;transform:rotate(-25deg)}.core-symbol{font:bold 115px/1 Arial,sans-serif;letter-spacing:-18px;color:#e5ddffdc;position:absolute;top:56px;left:65px;text-shadow:2px 3px 0 #a594db,7px 8px 18px #14052a80}.core-symbol>span{color:#bc9bff}.core-symbol i{font:35px Arial;position:absolute;top:-10px;right:-30px;color:#ffcd8c}.orbital{position:absolute;left:50%;top:50%;width:440px;height:210px;border:1px solid #9b7df143;border-radius:50%;transform:translate(-50%,-50%) rotate(-33deg);box-shadow:0 0 1px #ab91ed}.orbit-two{width:420px;height:310px;transform:translate(-50%,-50%) rotate(53deg);border-color:#9071c327}.orbit-three{width:355px;height:355px;transform:translate(-50%,-50%);border-style:dashed;border-color:#aa8bf017}.float-chip{position:absolute;display:flex;align-items:center;gap:11px;padding:12px 15px;border-color:#a091c335;border-radius:14px;box-shadow:0 10px 40px #0004;background:linear-gradient(120deg,#3e324477,#201b3699);direction:rtl;font-size:14px;color:#eee7ff;animation:float 6s ease-in-out infinite}.float-chip .icon{width:22px;color:#b19af6}.float-chip small{display:block;font:13px Arial;letter-spacing:1.1px;margin-top:5px;color:#a69abf}.chip-code{right:-5px;top:37px;transform:rotate(5deg)}.chip-ai{left:-7px;top:178px;animation-delay:-2s}.chip-ai .icon{color:#f7ba79}.chip-growth{right:22px;bottom:29px;animation-delay:-4s}.chip-growth .icon{color:#8bddba}.orbit-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#b3a3ff;box-shadow:0 0 18px #9982f9}.dot-one{top:83px;left:100px}.dot-two{bottom:80px;left:94px;width:7px;height:7px;background:#f8b170}.art-caption{position:absolute;bottom:-4px;left:80px;font-size:14px;letter-spacing:3px}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;color:#6f657f;font-size:14px;margin-top:48px;padding-bottom:25px;border-bottom:1px solid var(--line)}.hero-bottom span:first-child{font:14px Arial;letter-spacing:2px}.partners{padding:35px 0 5px}.partner-heading{display:flex;align-items:center;justify-content:center;gap:20px}.partner-heading p{font-size:14px;margin:0;color:#82798f}.line{height:1px;width:45px;background:#ffffff14}.logo-carousel{display:flex;align-items:center;gap:50px;overflow-x:auto;padding:25px 0 20px;scrollbar-width:thin;scrollbar-color:#42354c transparent;scroll-snap-type:x mandatory}.logo-carousel>a,.logo-carousel>span{flex:0 0 128px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center}.logo-carousel img{width:128px;height:60px;object-fit:contain;filter:grayscale(1);opacity:.52;transition:.3s}.logo-carousel img:hover{opacity:1;filter:none}.section{padding-top:92px;padding-bottom:12px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:25px}.section-head .eyebrow{margin-bottom:10px}.section-head p{margin:0;font-size:15px}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:15px;color:#c5b9e5}.text-link .icon{width:18px}.text-link:hover{color:white}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{padding:25px 25px 19px;transition:.3s;position:relative;overflow:hidden}.service-card:after{content:'';position:absolute;top:-100px;right:-90px;width:170px;height:170px;background:#6a48ff12;filter:blur(40px)}.service-card:hover{border-color:#8e6af769;transform:translateY(-4px);background:#1d162c}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:14px}.card-top>.icon{width:17px;color:#5f536e}.card-top .en{font-size:14px;flex:1;letter-spacing:1px}.service-icon{width:46px;height:46px;border-radius:13px;border:1px solid #9d7be52c;background:linear-gradient(140deg,#6754aa21,#2d204520);display:flex;align-items:center;justify-content:center;color:#b7a3f3}.service-card h3{font-size:17px;margin-bottom:11px}.service-card p{font-size:14px;line-height:2;min-height:45px}.service-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding-top:16px;margin-top:22px;font-size:14px;color:#b2a6c5}.service-bottom span:last-child{color:#776b8b}.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 24px}.work-visual{height:325px;background:#191426;border:1px solid #ffffff12;border-radius:var(--radius);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;padding:34px 30px 0}.tone-0{background:radial-gradient(ellipse at 50% 100%,#52402a,#201b1b 80%)}.tone-1{background:radial-gradient(ellipse at 50% 100%,#244a56,#111d28 80%)}.tone-2{background:radial-gradient(ellipse at 50% 100%,#605840,#282621 80%)}.tone-3{background:radial-gradient(ellipse at 50% 100%,#47327b,#191524 80%)}.browser-frame{width:100%;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 22px 50px #0009;border:1px solid #ffffff40;background:#090a0d;transform:perspective(900px) rotateY(-7deg) rotateX(6deg) rotateZ(2deg);transition:transform .5s;align-self:flex-end;height:270px}.work-visual:hover .browser-frame{transform:perspective(900px) rotateY(0) rotateX(0);}.browser-frame img{width:100%;height:240px;object-fit:cover;object-position:top}.browser-bar{height:24px;display:flex;align-items:center;justify-content:space-between;direction:ltr;color:#b2acbb;padding:0 12px;background:#1c1b22;font:14px Arial;letter-spacing:.4px}.browser-bar b{font-size:14px;color:#7e7589;letter-spacing:3px}.work-view{position:absolute;bottom:16px;left:16px;padding:7px 12px;background:#16101cbf;backdrop-filter:blur(12px);border:1px solid #ffffff20;border-radius:8px;font-size:14px;display:flex;gap:18px;align-items:center}.work-view .icon{width:15px}.work-info{display:flex;justify-content:space-between;align-items:center;padding:19px 3px 0}.work-info h3{font-size:16px;margin:0 0 3px}.work-info p{font-size:14px;margin:0}.work-info p span{margin:0 8px;color:#6c5e7f}.round-link{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#a495ba}.round-link .icon{width:17px}.project-art{width:100%;height:100%;padding:22px 8px;position:relative;direction:ltr}.project-art strong{display:block;font:700 clamp(22px,3vw,45px) Arial;letter-spacing:-2px;color:#f3eddc;margin:30px 0}.project-art strong em{font:30px Arial;color:#b3a574;float:right}.project-art small{font-size:14px;position:absolute;bottom:35px;color:#bcb299}.art-lines{display:flex;gap:14px}.art-lines i{height:68px;flex:1;border-radius:5px;background:linear-gradient(120deg,#b4a17e25,transparent);border:1px solid #c6b79320}.collab-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.journey>div{display:flex;gap:20px;margin-bottom:28px}.journey b{font-size:16px;color:#806db2;padding-top:4px}.journey h3{font-size:16px;margin:0 0 5px}.journey p{font-size:14px;margin:0}.portal-preview{padding:24px;background:linear-gradient(135deg,#25203380,#111019);transform:rotate(-2deg);box-shadow:0 35px 80px #0004}.preview-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}.preview-top .icon{width:16px;margin-left:7px;color:#aa96d0}.pill{border-radius:30px;padding:3px 10px;background:#7e62b71a;color:#b7a7d3;font-size:14px}.preview-project{display:flex;gap:13px;align-items:center;margin:25px 0}.preview-project strong{font-size:16px}.preview-project p{font-size:14px;margin:4px 0 0}.preview-steps{display:flex;align-items:center;font-size:14px;color:#8c809c;margin-bottom:26px}.preview-steps i{height:1px;background:#5c456d;flex:1;margin:0 10px}.preview-steps .done{color:#ad97e4}.preview-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-tiles>div{padding:15px;border:1px solid var(--line);border-radius:10px;background:#ffffff03}.preview-tiles .icon{width:20px;color:#ae9bc9}.preview-tiles h4{font-size:14px;margin:10px 0 3px}.preview-tiles p{font-size:14px;margin:0}.preview-note{font-size:14px;color:#92859f;margin-top:20px;display:flex;align-items:center;gap:8px}.preview-note i{width:5px;height:5px;background:#89b99c;border-radius:50%}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.blog-card{overflow:hidden}.blog-card>a>img{width:100%;height:195px;object-fit:cover}.blog-content{padding:24px}.blog-content .eyebrow{font-size:14px;margin-bottom:12px}.blog-content h3{font-size:16px}.blog-content p{font-size:14px;line-height:2}.blog-content .text-link{font-size:14px;margin-top:10px}.cta{margin-top:105px;margin-bottom:90px;display:flex;align-items:center;justify-content:space-between;padding:50px 55px;position:relative;overflow:hidden;background:linear-gradient(120deg,#251a4155,#15111e);gap:25px}.cta h2{font-size:32px}.cta p{font-size:15px;margin:0}.cta-orb{position:absolute;left:20%;top:-70px;border:1px solid #8b60df33;width:280px;height:280px;border-radius:50%;box-shadow:0 0 110px #6833cc1a,inset 0 0 110px #6833cc1a;pointer-events:none}.cta .btn{position:relative}.cta .eyebrow{font-size:14px}footer{border-top:1px solid var(--line);padding-top:50px;background:#08070e}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px}.footer-grid h3{font-size:16px;margin:20px 0 10px}.footer-grid h4{font-size:15px;margin:0 0 20px}.footer-grid p{font-size:14px}.footer-grid>div>a:not(.brand){display:block;font-size:14px;color:#94889f;margin-bottom:11px;width:fit-content}.footer-grid .text-link{margin-top:25px}.footer-bottom{margin-top:40px;padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#71667e;font-size:14px}.footer-bottom span[dir]{font:14px Arial;letter-spacing:2px}.page-intro{padding-top:65px;padding-bottom:80px}.page-intro .section-head{margin-bottom:40px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.filters button{background:#ffffff03;border:1px solid var(--line);border-radius:30px;color:#a99db8;padding:8px 18px;font-size:14px}.filters button.active{background:#5945d8;color:white;border-color:#7d65e1}.work-card[hidden]{display:none}.search-form{margin:20px 0 35px;max-width:600px}.search-form label{display:block;margin-bottom:10px}.search-form>div{display:flex;gap:10px}.search-form input{flex:1}.detail-intro{padding-top:45px}.breadcrumbs{display:flex;gap:15px;color:#91839e;font-size:14px;margin-bottom:35px}.detail-intro h1{font-size:38px;max-width:900px}.detail-intro>p{max-width:780px;font-size:16px}.article-meta{color:#92879f;font-size:14px;margin-bottom:20px}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}.prose{padding:36px;font-size:16px;line-height:2.2;overflow-wrap:anywhere}.prose p,.prose li{color:#b7aec6}.prose h2{font-size:23px;margin-top:30px}.prose h3{font-size:20px}.prose a{color:#aa98ff}.prose img{max-width:100%;height:auto;border-radius:12px}.prose .detail-cover{width:100%;max-height:480px;object-fit:cover}.prose table{display:block;overflow:auto;max-width:100%}.prose td,.prose th{padding:10px;border:1px solid var(--line)}.prose iframe{width:100%;height:600px;border:1px solid var(--line);border-radius:12px;background:white}.prose figcaption{font-size:14px;color:var(--muted)}.detail-aside{padding:26px;position:sticky;top:125px}.detail-aside h2{font-size:21px;margin-top:22px}.detail-aside p{font-size:15px}.detail-aside .btn{width:100%;font-size:14px;gap:10px}.detail-aside .text-link{margin-top:20px}.price{display:block;margin:25px 0;color:#bdace8}.live-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.muted{color:var(--muted);font-size:14px}.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:35px}.form-card{padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-size:15px;color:#c9bfd9}input,textarea,select{width:100%;border:1px solid #ffffff21;border-radius:10px;background:#100d1a;color:#f4eefc;padding:12px 14px;min-height:46px;transition:border-color .2s}label input,label textarea,label select{margin-top:7px}input:focus,textarea:focus,select:focus{border-color:#8b71db;outline:1px solid #8b71db}textarea{resize:vertical}.full{grid-column:1/-1}.trap{position:absolute;left:-9999px}.info-card{padding:30px}.info-card h2{font-size:23px;margin-top:20px}.info-card>a{display:block;width:fit-content;margin:12px 0}.skip{position:fixed;top:-70px;right:20px;background:white;color:black;padding:10px;z-index:100}.skip:focus{top:10px}#toast{position:fixed;bottom:30px;left:30px;max-width:450px;padding:15px 25px;border-radius:12px;z-index:100;background:#302344;box-shadow:0 10px 40px #0008;display:none;border:1px solid #8d70ac}#toast.visible{display:block}.empty{text-align:center;padding:50px;border:1px dashed #ffffff25;border-radius:18px;grid-column:1/-1}.loading{padding:80px;text-align:center}.error{color:#ffb7b7}.success{color:#a1e2b8}
/* The administration and customer workspace share the same accessible components. */
.panel-body{background:#0e0b15}.panel-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.sidebar{border-left:1px solid var(--line);padding:28px 18px;position:sticky;top:0;height:100vh;background:#110e1b;display:flex;flex-direction:column}.sidebar-brand{font-size:21px;font-weight:800;margin:0 12px 8px}.sidebar .en{margin:0 12px 30px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar button,.sidebar>a{display:flex;align-items:center;gap:12px;border:0;background:none;color:#aea0c1;padding:11px 15px;border-radius:10px;text-align:right;font-size:15px}.sidebar button.active{background:#6d4ce62b;color:#dbcbff}.sidebar button:hover{background:#ffffff09}.sidebar .icon{width:19px}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}.workspace{min-width:0;padding:0 36px 50px}.panel-top{height:95px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.panel-top p{margin:0;font-size:14px}.panel-top strong{font-size:16px}.avatar{width:38px;height:38px;background:#36224e;border:1px solid #674589;border-radius:50%;display:grid;place-items:center}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0;gap:15px}.panel-heading h1{font-size:26px;letter-spacing:-.5px;margin:0}.panel-heading p{font-size:14px;margin:4px 0 0}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:28px}.metric{padding:24px}.metric span{font-size:14px;color:#9f90b1}.metric strong{display:block;font-size:30px;margin-top:10px}.metric .icon{float:left;color:#a687d1;width:20px}.dashboard-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}.panel-card{padding:24px}.panel-card h2{font-size:19px;margin-bottom:22px}.panel-card p{font-size:15px}.record-list{overflow:auto}.records-table{width:100%;border-collapse:collapse;min-width:650px;font-size:14px}.records-table th{text-align:right;color:#94839f;font-weight:400;padding:15px 14px;border-bottom:1px solid var(--line);white-space:nowrap}.records-table td{padding:16px 14px;border-bottom:1px solid var(--line);max-width:330px;overflow-wrap:anywhere}.records-table td strong{font-size:15px}.records-table td small{display:block;color:#8b7b98;margin-top:4px}.subtle-btn{border:1px solid #ffffff18;background:#ffffff04;color:#c1add8;border-radius:8px;padding:6px 13px;font-size:14px;white-space:nowrap}.status{display:inline-block;border-radius:30px;background:#67518425;color:#baa0d7;padding:3px 10px;font-size:14px;white-space:nowrap}.status.green{color:#8bd1ac;background:#54866b20}.status.orange{color:#e7b881;background:#bd875124}.status.red{color:#ec9b9b;background:#b55e6323}.activity-item{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.activity-item small{display:block;color:#85728f}.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-links button{padding:20px 14px;text-align:right;color:#c9b5db;font-size:15px}.progress-track{height:5px;border-radius:20px;background:#342a43;overflow:hidden;margin-top:15px}.progress-track>span{display:block;height:100%;background:linear-gradient(90deg,#ac7bf0,#6746bf)}.project-card{padding:25px;margin-bottom:16px}.project-card h3{font-size:17px}.project-card .dates{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.date-tile{background:#ffffff03;border:1px solid var(--line);padding:13px;border-radius:12px}.date-tile small{display:block;color:#9a87aa;font-size:14px}.date-tile strong{display:block;font-size:14px;margin-top:8px}.login-shell{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 45% 30%,#3c236366,transparent 65%);padding:30px}.login-card{width:100%;max-width:440px;padding:38px}.login-card h1{font-size:28px;margin-bottom:8px}.login-card p{font-size:15px}.login-card label{margin-top:18px}.login-card .btn{width:100%;margin-top:24px}.login-card>a{font-size:14px;color:#b5a0cd;display:block;margin-top:20px}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.editor-main,.editor-side{padding:25px}.editor-main label,.editor-side label{margin-bottom:18px}.editor-main textarea[name=content]{min-height:350px;line-height:2}.editor-main .editor-tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.editor-tools button{background:#ffffff08;border:1px solid #ffffff15;color:#bca6d0;border-radius:6px;padding:6px 10px}.editor-preview{border:1px solid var(--line);padding:25px;border-radius:12px;margin-top:20px}.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.media-item{padding:12px;overflow:hidden}.media-item img{width:100%;height:125px;object-fit:contain;background:#fff;border-radius:8px}.media-item p{font-size:14px;overflow-wrap:anywhere;margin:10px 0}.ticket-message{padding:20px;margin:15px 0}.ticket-message.admin{border-color:#8060b55a;background:#553c7222}.ticket-message small{font-size:14px;color:#9e87b3}.ticket-message p{white-space:pre-wrap;color:#d2c3de;margin:10px 0 0}.inline-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.panel-tabs{display:flex;gap:10px;margin-bottom:20px}.panel-tabs button.active{background:#634594}.seo-check{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:14px}.user-form{max-width:800px}.help-note{border-right:2px solid #a483d3;padding:10px 15px;background:#6a418012;color:#ab94be;font-size:14px;margin:20px 0}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.planner-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}.planner-layout aside{align-self:start}.planner-layout aside h2{font-size:25px}@media(max-width:850px){.planner-layout{grid-template-columns:1fr}}
@media(min-width:1450px){.hero{min-height:735px;padding-top:112px}.hero-art{height:470px}.hero-copy{padding-top:30px}}
@media(max-width:1150px){.shell{width:calc(100% - 60px)}.nav{gap:20px}.nav nav{gap:18px;font-size:14px}.portal-link{display:none}.hero{gap:5px}.hero h1{font-size:46px}.hero-art{scale:.9}.hero-buttons .btn{padding:12px 18px;font-size:14px;gap:15px}.hero-proof{font-size:14px}.collab-grid{gap:40px}.sidebar{padding:24px 10px}.panel-layout{grid-template-columns:210px 1fr}.workspace{padding:0 24px 40px}}
@media(max-width:850px){.nav nav{display:none}.nav nav.open{display:flex;position:absolute;top:80px;left:20px;right:20px;background:#171020;padding:25px;flex-direction:column;border:1px solid #645070;border-radius:15px;align-items:stretch}.menu-toggle{display:block}.nav{height:80px}.hero{padding-top:40px;grid-template-columns:1fr;gap:0}.hero-copy{text-align:center;padding-top:0}.hero-badge{margin-inline:auto}.hero-copy>p{margin-inline:auto;max-width:550px}.hero h1{font-size:45px}.hero-buttons,.hero-proof{justify-content:center}.hero-art{height:430px;max-width:470px;width:100%;margin:auto;scale:.9}.hero-bottom{margin-top:0}.hero-bottom span:last-child{display:none}.services-grid{grid-template-columns:repeat(2,1fr)}.section{padding-top:65px}.work-visual{height:265px;padding:25px 20px 0}.browser-frame{height:225px}.browser-frame img{height:200px}.collab-grid{grid-template-columns:1fr;gap:25px}.portal-preview{transform:none}.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-card:last-child{grid-column:1/-1}.cta{padding:35px;flex-direction:column;align-items:flex-start;margin-top:65px;margin-bottom:60px}.footer-grid{grid-template-columns:repeat(2,1fr);gap:35px}.detail-grid{grid-template-columns:1fr}.detail-aside{position:static}.contact-grid{grid-template-columns:1fr}.panel-layout{grid-template-columns:175px 1fr}.sidebar button{font-size:14px;padding:10px}.sidebar-brand{font-size:18px}.workspace{padding:0 18px 35px}.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.editor-grid{grid-template-columns:1fr}.media-grid{grid-template-columns:repeat(2,1fr)}.project-card .dates{grid-template-columns:1fr}.panel-heading{align-items:flex-start}.panel-heading .btn{font-size:14px;padding:10px 14px;gap:8px}}
@media(max-width:560px){.shell{width:calc(100% - 36px)}.nav-actions{gap:12px}.brand img{width:124px}.nav .btn.small{padding:7px 12px;font-size:14px;gap:10px;min-height:38px}.hero{padding-top:35px}.hero h1{font-size:36px;letter-spacing:-1px}.hero-copy>p{font-size:15px}.hero-buttons{gap:8px}.hero-buttons .btn{font-size:14px;padding:10px 12px;gap:10px}.hero-art{height:360px;scale:.82;margin-top:-10px;margin-bottom:-25px}.orbital{width:390px}.chip-code{right:-15px}.chip-ai{left:-23px}.chip-growth{right:-4px;bottom:5px}.hero-bottom{font-size:14px;gap:10px;padding-bottom:18px}.hero-bottom span:first-child{font-size:13px;letter-spacing:1px}.hero-proof{font-size:14px;gap:10px}.hero-proof b{padding:0 3px}.partner-heading{gap:10px}.partner-heading p{font-size:14px}.line{width:20px}.logo-carousel{gap:25px;padding-top:20px}.logo-carousel>a{flex-basis:100px}.logo-carousel img{width:100px;height:50px}.section-head{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:25px}.section-head h2{font-size:25px}.section-head p{font-size:14px}.section-head .text-link{font-size:14px}.services-grid,.works-grid,.blog-grid{grid-template-columns:1fr}.service-card{padding:24px}.service-card p{min-height:0}.service-bottom{margin-top:18px}.card-top{margin-bottom:20px}.work-visual{height:280px}.browser-frame{height:230px}.browser-frame img{height:205px}.project-art strong{font-size:38px}.works-grid{gap:28px}.blog-card:last-child{grid-column:auto}.cta{padding:28px}.cta h2{font-size:26px}.footer-grid{gap:30px 20px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{flex-wrap:wrap;gap:15px}.footer-bottom span[dir]{font-size:13px}.detail-intro h1{font-size:28px}.prose{padding:22px;font-size:16px}.prose h2{font-size:21px}.form-card{grid-template-columns:1fr;padding:23px}.panel-layout{display:block}.sidebar{position:relative;height:auto;padding:15px;border-left:0;border-bottom:1px solid var(--line)}.sidebar .en{display:none}.sidebar nav{flex-direction:row;overflow-x:auto;margin-top:15px}.sidebar nav button{white-space:nowrap;flex-shrink:0}.sidebar-bottom{display:flex;margin-top:12px;padding-top:10px;align-items:center}.sidebar-bottom button,.sidebar-bottom a{font-size:14px;margin-left:20px}.panel-top{height:70px;margin-bottom:20px}.panel-heading h1{font-size:21px}.metric{padding:17px}.metric strong{font-size:26px}.panel-card{padding:18px}.editor-main,.editor-side{padding:20px}.panel-heading{flex-wrap:wrap}.login-card{padding:28px}.record-list{margin:0 -5px}.preview-tiles h4{font-size:14px}.preview-steps{font-size:14px}.portal-preview{padding:20px}.contact-grid aside{min-width:0}#toast{left:18px;right:18px;bottom:18px}.live-controls .btn{font-size:14px;padding:10px 14px}}

.portfolio-mockup{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}.work-visual:hover .portfolio-mockup{transform:scale(1.045)}.btn{background:linear-gradient(110deg,color-mix(in srgb,var(--brand,#0700dc),white 26%),var(--brand,#0700dc))}.btn.ghost{background:#ffffff04}.hero-art .core-symbol i{color:var(--orange)}
body{overflow-x:clip}.hero-art{min-width:0}.section-head h1{font-size:clamp(28px,3.5vw,44px);margin-bottom:14px}.prose{content-visibility:auto;contain-intrinsic-size:auto 800px}
.rich-editor{min-height:360px;max-height:850px;overflow:auto;background:#100d1a;border:1px solid #ffffff21;border-radius:12px;padding:24px;font-size:16px;line-height:2.2;outline-offset:3px}.rich-editor:focus{outline:1px solid #9474c5}.rich-editor h2{font-size:23px}.rich-editor h3{font-size:20px}.rich-editor p{color:#d6c7e7}.rich-editor img{max-width:100%;height:auto}.rich-editor a{color:#bea3f8}.rich-editor table{display:block;max-width:100%;overflow:auto}
.sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4e365e transparent}.sidebar nav{flex-shrink:0}.sidebar-bottom{flex-shrink:0}.sidebar-bottom button{width:100%}@media(max-width:560px){.sidebar{overflow-y:visible}.sidebar-bottom button{width:auto}}
.carousel-controls{display:flex;justify-content:center;gap:8px;margin-top:16px}.carousel-controls button{border:1px solid var(--line);background:#ffffff04;color:#b7a7cc;border-radius:50%;width:28px;height:28px;font-size:16px}.service-card p{font-size:15px}.service-bottom{font-size:14px}.blog-content p{font-size:15px}.panel-card p{line-height:2}.nav nav{font-size:15px}.hero-proof{font-size:14px}@media(max-width:560px){.hero-proof{font-size:14px}.hero-copy>p{font-size:16px}.btn.small{font-size:14px}}

/* ocean.css */
/* Ocean identity: luminous depths, restrained motion, legible glass surfaces. */
body:not(.panel-body){background-color:#080b16;background-image:radial-gradient(ellipse 65% 650px at 92% 350px,#4323a03b,transparent),radial-gradient(ellipse 55% 650px at 0 850px,#006a8133,transparent);isolation:isolate}
body:not(.panel-body):before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 70%,#116c9020,transparent 48%),radial-gradient(ellipse at 90% 20%,#7c29ce22,transparent 50%)}
body:not(.panel-body) main{background:repeating-radial-gradient(ellipse at -30% 600px,transparent 0 86px,#7184db07 87px 88px,transparent 89px 140px)}
.hero{position:relative}.hero:before{content:"";position:absolute;width:70%;height:280px;left:-10%;top:180px;background:#6143ff32;filter:blur(100px);z-index:-1;pointer-events:none}.hero h1 span{background:linear-gradient(100deg,#6af6e8,#9d8aff 60%,#e4c5ff);background-clip:text;color:transparent}.orb-core{box-shadow:0 0 80px #7348ff50,0 0 170px #22c9de25,inset 0 0 70px #a47bff40}.hero-grid{opacity:.5}.hero-art:after{content:"";position:absolute;bottom:2%;width:110%;height:90px;background:repeating-radial-gradient(ellipse,#42d9e828 0 1px,transparent 2px 16px);transform:rotate(-8deg);border-radius:50%;mask-image:linear-gradient(transparent,#000,transparent);pointer-events:none}
.services-grid{gap:22px}.service-card{position:relative;isolation:isolate;overflow:hidden;min-height:280px;border:1px solid #a08bff29;background:linear-gradient(130deg,#21253b9c,#101421b8);box-shadow:inset 0 1px #ffffff0b;transition:transform .3s,border-color .3s,box-shadow .3s}.service-card:before{content:"";position:absolute;z-index:-1;width:180px;height:180px;left:-70px;top:-80px;border-radius:50%;background:#7860ed35;filter:blur(30px)}.service-card:after{content:"";position:absolute;left:-50px;bottom:-100px;width:240px;height:240px;border:1px solid #9e9bfa14;box-shadow:0 0 0 22px #9e9bfa05,0 0 0 44px #9e9bfa04;border-radius:50%;z-index:-1}.service-card:nth-child(3n+2):before{background:#12baba35}.service-card:nth-child(3n):before{background:#bd50da35}.service-card:hover{transform:translateY(-6px);border-color:#a78eff70;box-shadow:0 18px 55px #0005,0 0 35px #6447ff15}.service-card h3{font-size:21px}.service-card p{line-height:2.1;font-size:16px}.service-icon{width:54px;height:54px;background:linear-gradient(140deg,#9173e83b,#3b296129);border:1px solid #bfa1ff3b;box-shadow:inset 0 1px #e3d5ff33,0 8px 24px #0003;border-radius:16px}.service-icon .icon{width:27px;height:27px}.card-top .en{letter-spacing:2px}.service-bottom{border-top:1px solid #ffffff10;padding-top:17px}
.service-story{--glow:#8761ff;position:relative;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:65px;padding-top:135px;padding-bottom:95px;min-width:0}.service-story:before{content:"";position:absolute;left:-10%;right:-10%;top:0;bottom:0;background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--glow),transparent 88%),transparent 64%);z-index:-1;pointer-events:none}.story-copy{min-width:0}.story-copy h2{font-size:clamp(30px,3vw,45px);line-height:1.65;letter-spacing:-1.5px;margin:20px 0}.story-copy p{font-size:16px;line-height:2.3;color:#b7bacf}.story-copy ul{list-style:none;padding:0;margin:25px 0 32px;display:grid;gap:12px;font-size:15px;color:#ced0e3}.story-copy li:before{content:"↗";display:inline-grid;place-items:center;width:24px;height:24px;background:#bcb5ff0d;border:1px solid #bcb5ff24;border-radius:50%;color:#aca0ff;margin-left:12px}.story-visual{min-width:0;position:relative}.story-web{--glow:#38cbd9}.story-crm{--glow:#c282ed}.story-erp{--glow:#44e0bb}.story-ai{--glow:#6876ff}.story-crm .story-copy,.story-ai .story-copy{order:2}.story-crm .story-visual,.story-ai .story-visual{order:1}
.story-seo{display:block;text-align:center;padding-bottom:80px}.story-seo>.story-copy{max-width:800px;margin:0 auto 50px}.story-seo .eyebrow{justify-content:center}.story-seo ul{display:flex;justify-content:center;flex-wrap:wrap}.seo-universe{position:relative;padding:25px 12% 10px 7%;isolation:isolate;text-align:right}.dot-globe{position:absolute;z-index:-1;left:-8%;top:-80px;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#9871ff80 1.3px,transparent 2px);background-size:13px 13px;box-shadow:inset -65px -10px 90px #080b16,inset 20px 0 80px #5448f429;transform:rotate(-18deg);mask-image:radial-gradient(ellipse,#0006 10%,#000 50%,transparent 72%)}.seo-letters{position:absolute;right:0;top:0;writing-mode:vertical-rl;letter-spacing:25px;font:bold clamp(90px,13vw,175px) Arial;color:#9995b0;background:linear-gradient(#fff,#c6c0ec30);background-clip:text;-webkit-text-fill-color:transparent;line-height:1;z-index:-1}.search-console{padding:24px;background:linear-gradient(135deg,#211b349c,#0d1523c9);border:1px solid #a09cdc4d;box-shadow:0 25px 90px #0005}.console-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:15px}.console-head small{font-size:14px;color:#a3a9c1}.console-head i{display:inline-block;width:6px;height:6px;background:#74eacb;border-radius:50%;margin-left:7px}.console-legend{display:flex;gap:28px;color:#b29afa;font-size:14px;margin-top:25px}.console-legend span:last-child{color:#52d6d6}.search-console svg{display:block;width:100%;height:auto;margin-top:30px;overflow:visible}.console-axis{display:flex;justify-content:space-between;font-size:14px;color:#a0a4bb;margin-top:15px}.seo-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.seo-mini-grid>div{padding:22px;background:#1118279e;min-height:155px}.seo-mini-grid b{font-size:16px}.seo-mini-grid p{font-size:14px}.mini-bars{height:45px;display:flex;align-items:flex-end;gap:9px;direction:ltr}.mini-bars i{flex:1;height:25%;background:linear-gradient(#a185f5,#614f9830);border-radius:4px 4px 0 0}.mini-bars i:nth-child(2n){height:45%}.mini-bars i:nth-child(3n){height:70%}.mini-bars i:last-child{height:100%}.signal-line{height:40px;background:linear-gradient(160deg,transparent 46%,#54cec8 48%,transparent 50%);border-bottom:1px solid #ffffff20}
.web-stage{padding:30px 20px 55px 35px;position:relative;perspective:1000px}.design-window{transform:rotateY(8deg) rotate(-3deg);overflow:hidden;background:#141b2a;border-color:#98b6f150;box-shadow:0 30px 80px #0007}.window-toolbar{display:flex;justify-content:space-between;padding:15px;border-bottom:1px solid #ffffff14;font:14px Arial;color:#a9acc5}.window-toolbar>span:first-child{letter-spacing:3px;color:#a7c9d9}.window-body{height:275px;padding:30px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 10% 70%,#277c9166,transparent 70%)}.window-body small{font:14px Arial;letter-spacing:2px;position:relative;z-index:1}.window-body strong{font-size:32px;display:block;line-height:1.6;margin-top:25px;position:relative;z-index:1}.mini-button{margin-top:15px;font-size:14px;border:1px solid #ffffff40;padding:8px 14px;display:inline-block;border-radius:6px}.window-sphere{width:220px;height:220px;position:absolute;left:-35px;top:65px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#bbffff,#426fdf 35%,#11263d 68%);box-shadow:inset -20px -10px 30px #030c18,0 0 70px #41bfc040;opacity:.8}.window-cards{display:flex;gap:12px;padding:20px}.window-cards i{height:55px;flex:1;border:1px solid #92cde329;border-radius:6px;background:linear-gradient(130deg,#406f8030,transparent)}.mobile-window{position:absolute;bottom:20px;left:0;width:130px;height:245px;border:3px solid #7e96b1;background:#101c2c;padding:10px 12px;transform:rotate(7deg);box-shadow:0 15px 40px #0008;border-radius:22px}.mobile-window>span{font-size:13px}.mobile-orb{width:75px;height:75px;margin:13px auto;background:radial-gradient(circle at 30% 20%,#adfff1,#536fd4 40%,#0e1b30 75%);border-radius:50%}.mobile-window b{font-size:17px}.mobile-window>i{display:block;background:#7189c7;height:12px;border-radius:4px;margin-top:12px;width:65%}.stage-label{display:block;text-align:center;font-size:14px;color:#9eacc3;margin-top:35px}
.ops-stage{background:linear-gradient(145deg,#20233db8,#101927);padding:22px;transform:rotate(-2deg);box-shadow:0 30px 70px #0005;border-color:#a0a3f03b}.ops-layout{display:flex;direction:ltr;margin-top:22px;border-top:1px solid #ffffff14;padding-top:18px;gap:18px}.ops-menu{width:30px;display:grid;gap:18px;align-content:start;color:#b2a0f7}.ops-menu i{width:19px;height:19px;border:1px solid #a899d84a;border-radius:5px}.ops-content{flex:1;min-width:0;direction:rtl}.ops-tags{display:flex;gap:10px;font-size:14px}.ops-tags span{padding:7px 10px;border:1px solid #a899d838;border-radius:6px}.ops-tags span:first-child{background:#8e6beb35}.ops-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.ops-flow>div{background:#ffffff03;padding:8px;border-radius:8px}.ops-flow small{font-size:14px;color:#bdafd9}.ops-flow article{padding:12px 8px;border:1px solid #c1a6ec28;border-radius:7px;background:#ffffff04;margin-top:12px;min-height:100px}.ops-flow article i{display:block;width:18px;height:4px;background:#9c80df;border-radius:4px;margin-bottom:12px}.ops-flow article b{font-size:14px}.ops-flow article p{font-size:14px;color:#8993b0}.ops-flow .short{min-height:40px;opacity:.5}.ops-footer{display:flex;justify-content:space-between;gap:10px;margin-top:23px;font-size:14px;color:#acb4c7;align-items:center}
.agent-stage{min-height:430px;position:relative;display:grid;place-items:center;padding-bottom:120px}.agent-orbit{position:absolute;width:300px;height:300px;border:1px solid #9890f040;border-radius:50%;top:0;box-shadow:0 0 0 30px #9c8cff06,0 0 0 60px #9c8cff04}.agent-core{width:145px;height:145px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:75px;color:#dfd8ff;background:radial-gradient(circle at 35% 20%,#9a92ff,#4b30a4 48%,#151730 80%);border:1px solid #b5a3ff78;border-radius:38px;box-shadow:0 0 65px #775dff66;transform:rotate(-8deg)}.agent-core small{font:14px Arial;letter-spacing:3px;margin-bottom:15px}.agent-node{position:absolute;background:#191d34e6;border:1px solid #aaa0ed40;padding:13px 17px;border-radius:12px;font-size:14px;box-shadow:0 10px 35px #0005}.agent-node span{color:#9fe3e1;margin-right:14px}.node-one{right:0;top:35px}.node-two{left:0;top:85px}.node-three{right:5%;top:225px}.agent-message{position:absolute;bottom:0;width:95%;padding:20px;background:#171b30d9}.agent-message small{font-size:14px;color:#a89bd4}.agent-message p{font-size:15px;line-height:2}.agent-pulse{display:flex;align-items:center;gap:5px;font-size:14px;color:#9daac4}.agent-pulse i{width:4px;height:8px;background:#9f90ef;border-radius:5px}.agent-pulse i:nth-child(2){height:16px}.agent-pulse span{margin-right:8px}
.service-landing{padding-top:45px;padding-bottom:55px}.landing-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:30px 0 70px}.service-landing .story-copy h1{font-size:17px;color:#b0a8d3;letter-spacing:0;margin:16px 0}.service-landing .story-copy h2{font-size:clamp(30px,3.4vw,48px)}.service-landing .landing-more{display:block;margin-top:22px;font-size:15px}.service-deliverables{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-deliverables>div{padding:25px;background:linear-gradient(125deg,#26223c88,#141c2c80)}.service-deliverables span{font-size:15px;color:#8e81be}.service-deliverables h3{font-size:16px;margin:12px 0 0}.service-detail-content .prose{background:linear-gradient(160deg,#1c2031b8,#101420c9);border-color:#a9a4ee29}.service-detail-content .prose h2{border-right:3px solid #8971e4;padding-right:16px}.service-detail-content .detail-aside{background:radial-gradient(ellipse at top,#5e458746,#151b2b);border-color:#b2a0eb42}.service-landing.story-seo{text-align:right}.service-landing.story-seo .eyebrow{justify-content:flex-start}.service-landing .seo-universe{padding:10px 7% 10px 0}.service-landing .seo-letters{font-size:65px}.service-landing .seo-mini-grid>div{padding:14px;min-height:125px}.service-landing .console-head{flex-wrap:wrap}
@media(max-width:950px){.service-story{gap:30px}.landing-grid{gap:30px}.story-copy h2{font-size:31px}.window-body{padding:20px}.window-body strong{font-size:27px}.ops-stage{padding:15px}.console-head{flex-wrap:wrap}}
@media(max-width:760px){.service-story,.landing-grid{grid-template-columns:1fr;gap:35px}.service-story{padding-top:75px;padding-bottom:35px}.story-crm .story-copy,.story-ai .story-copy,.story-crm .story-visual,.story-ai .story-visual{order:initial}.story-copy h2{font-size:31px}.story-copy p{font-size:16px}.story-visual{width:100%;max-width:580px;margin:auto}.story-seo ul{display:grid;justify-content:start;text-align:right}.seo-universe{padding:10px 5% 0 0}.seo-letters{font-size:65px;opacity:.4}.search-console{padding:17px}.console-head{font-size:14px}.console-head small{font-size:14px}.seo-mini-grid{gap:10px}.seo-mini-grid>div{padding:15px;min-height:140px}.seo-mini-grid b{font-size:14px}.seo-mini-grid p{font-size:14px}.dot-globe{width:100%;left:0;top:-20px}.service-deliverables{grid-template-columns:1fr}.service-deliverables>div{display:flex;align-items:center;gap:15px;padding:20px}.service-deliverables h3{margin:0}.landing-grid{padding-bottom:40px}.service-landing .story-copy h2{font-size:34px}.service-landing .story-copy h1{font-size:17px}.ops-stage{transform:none}.agent-stage{margin-top:25px}.web-stage{padding-right:8px;padding-left:20px}.hero-art:after{width:100%}.service-card{min-height:260px}.story-seo>.story-copy{margin-bottom:30px}.story-copy .btn{font-size:15px}.ops-layout{gap:8px}.ops-flow{gap:5px}.ops-flow article{padding:10px 5px}.ops-menu{width:22px}.ops-footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.service-card{transition:none}}
.seo-letters{text-orientation:upright;letter-spacing:0;line-height:.95}.service-story{scroll-margin-top:100px}
.console-axis{direction:ltr}.console-axis span{direction:rtl}
body:not(.panel-body) main{overflow-x:clip}.service-story:before{left:0;right:0}

/* premium.css */
:root{--orange:#ff941a}body:not(.panel-body){color:#fff;background:#090b13;background-image:radial-gradient(ellipse 65% 600px at 8% 450px,#6f2c4a44,transparent),radial-gradient(ellipse 65% 600px at 92% 750px,#282c6840,transparent)}body:not(.panel-body) main{background:none}body:not(.panel-body):before{background:radial-gradient(ellipse at 15% 55%,#ff8c0010,transparent 40%),radial-gradient(ellipse at 85% 15%,#573dbc19,transparent 55%)}.service-story:before{background:radial-gradient(ellipse at 30% 50%,#733c6317,transparent 68%)}.btn,.btn.small{background:linear-gradient(115deg,#ffac45,#f58310);color:#211306;border-color:#ffb45b;box-shadow:0 7px 26px #e97a1722;font-weight:700}.btn.ghost{background:transparent;color:inherit;border-color:#ffffff40;box-shadow:none}body:not(.panel-body) p,body:not(.panel-body) .muted,body:not(.panel-body) .story-copy p{color:#e1e1eb}body:not(.panel-body) .eyebrow{color:#ffbc70}.hero h1 span{background-image:linear-gradient(100deg,#ffcc89,#ff9828 60%,#ffca8f)}.site-header{background:#090b13d9;backdrop-filter:blur(22px);border-bottom:1px solid #ffc88a1c}.nav{position:relative}.nav nav{gap:24px}.theme-toggle{background:#ffffff0d;border:1px solid #ffffff25;border-radius:50%;width:34px;height:34px;flex-shrink:0;color:#ffb762;cursor:pointer}.mega-menu summary{cursor:pointer;list-style:none;font-size:15px;white-space:nowrap}.mega-menu summary::-webkit-details-marker{display:none}.mega-menu[open] summary{color:#ffb762}.mega-panel{position:absolute;top:calc(100% - 4px);right:0;left:0;padding:30px;display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:25px;background:#14151ff5;border:1px solid #ffb65e30;border-radius:0 0 22px 22px;box-shadow:0 30px 70px #0008;z-index:40}.mega-panel h3{font-size:16px;color:#ffc98d;margin:0 0 17px}.mega-panel a{display:block;padding:10px 0}.mega-panel a:hover{color:#ffb665}.mega-panel b{display:block;font-size:15px}.mega-panel small{display:block;font-size:14px;color:#d1cbd9;line-height:1.9;margin-top:5px}.mega-promo{padding:22px;background:linear-gradient(140deg,#a466302b,#47405b20);border:1px solid #ffb87320;border-radius:14px}.mega-promo>span{font-size:14px}.mega-promo h3{font-size:21px;margin:15px 0}.mega-promo .btn{font-size:14px;padding:12px}.hero-with-gallery{overflow:visible;grid-template-columns:1fr 1.15fr;gap:50px}.hero-showcase{direction:ltr;overflow:hidden;position:relative;margin-left:calc(-1 * max(18px,(100vw - 1180px)/2));height:460px;mask-image:linear-gradient(90deg,#000 85%,transparent);border-radius:0 28px 28px 0}.hero-film{display:flex;gap:24px;width:max-content;align-items:center;height:100%;animation:film 65s linear infinite}.hero-film>a{position:relative;width:330px;height:350px;display:block;border:1px solid #ffffff25;border-radius:12px;overflow:hidden;box-shadow:0 20px 45px #0007;transform:rotate(-5deg)}.hero-film>a:nth-child(even){transform:rotate(4deg);margin-top:55px}.hero-film img{width:100%;height:100%;object-fit:cover;object-position:top}.hero-film span{position:absolute;bottom:0;left:0;right:0;background:#101018dc;color:white;padding:14px;font-size:14px;direction:rtl}.hero-showcase:hover .hero-film,.hero-showcase:focus-within .hero-film,.hero-showcase.paused .hero-film{animation-play-state:paused}.motion-toggle{position:absolute;bottom:4px;right:35px;background:#191a29;border:1px solid #ffc78950;color:#fff;padding:9px 16px;border-radius:20px;font-size:14px;z-index:2}.logo-carousel{gap:45px;padding:30px 0;scroll-behavior:auto}.logo-carousel img{filter:none!important;opacity:1!important;width:165px;height:85px;object-fit:contain}.logo-carousel>a,.logo-carousel>span{flex:0 0 165px}.logo-carousel img{mix-blend-mode:screen}.laptop-stage{position:relative;padding:18px 30px 55px;perspective:900px}.laptop-screen{position:relative;border:6px solid #b4b4c3;border-top-width:10px;border-radius:12px 12px 4px 4px;aspect-ratio:1.5;overflow:hidden;transform:rotateY(-9deg) rotateX(2deg);transform-origin:bottom;background:#141421;box-shadow:20px 20px 50px #0006}.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.laptop-stage:hover .laptop-screen img{object-position:bottom;transition:object-position 5s linear}.laptop-keyboard{height:55px;background:repeating-linear-gradient(90deg,transparent 0 13px,#62616c 14px 15px),repeating-linear-gradient(0deg,#45444e 0 8px,#b8b7c1 9px 11px);border:10px solid #a8a7b4;border-bottom:14px solid #b7b6c4;transform:rotateX(55deg) rotateZ(-1deg);transform-origin:top;border-radius:0 0 20px 20px;box-shadow:0 20px 30px #0006}.laptop-keyboard i{display:block;background:#9998a6;width:28%;height:24px;margin:12px auto 0;border-radius:3px}.work-visual .laptop-stage{width:100%;padding:5px 30px 35px}.work-visual .laptop-screen{aspect-ratio:1.65}.work-visual .laptop-keyboard{height:35px}.capture-empty{height:100%;display:grid;place-content:center;text-align:center;gap:15px}.capture-empty span{font-size:14px}.real-web-stage{position:relative}.web-word{display:block;font-size:65px;font-weight:900;line-height:1.2;color:#ffffff28;margin-bottom:-35px;position:relative;z-index:-1}.web-thumbs{display:flex;gap:12px;margin-top:12px}.web-thumbs a{flex:1;min-width:0}.web-thumbs img{width:100%;height:90px;object-fit:cover;border:1px solid #ffffff20;border-radius:7px}.chart-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:20px 0}.chart-controls label{display:flex;align-items:center;gap:6px;font-size:14px}.chart-controls input{width:15px;min-height:15px;margin:0;accent-color:#ff9c35}.chart-controls select{width:auto;font-size:14px;min-height:32px;padding:5px 10px}.chart-metrics{display:grid;grid-template-columns:repeat(4,1fr);direction:ltr;border:1px solid #ffffff1a;border-radius:10px;overflow:hidden}.chart-metrics>div{padding:16px 10px;background:#f1922115}.chart-metrics>div:nth-child(2){background:#8b68e820}.chart-metrics small{font-size:14px;display:block}.chart-metrics strong{font:700 21px Arial;display:block;margin-top:8px}.chart-tooltip{font-size:14px!important;min-height:35px;line-height:1.8}.search-console svg{cursor:crosshair}.consent{display:flex;align-items:center;gap:10px;font-size:14px}.consent input{width:16px;min-height:16px;margin:0}.request-form h2{font-size:26px}.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-top:70px}.about-hero h1{font-size:60px;line-height:1.6}.about-hero p{font-size:16px;line-height:2.3}.about-hero figure{margin:0;position:relative}.about-hero img{width:100%;height:auto;border-radius:28px;box-shadow:0 30px 90px #d4791920}.about-hero figcaption{position:absolute;bottom:20px;left:20px;right:20px;background:#10121bd9;padding:18px 25px;border:1px solid #ffffff30;border-radius:16px;backdrop-filter:blur(15px);display:flex;justify-content:space-between;gap:10px;font-size:15px}.about-story{margin-top:70px;margin-bottom:80px;padding:45px}.about-story p{font-size:16px;line-height:2.3}.about-story .service-deliverables{margin:30px 0}.price-filters{display:flex;gap:15px;flex-wrap:wrap;margin:30px 0}.price-filters input:not([type=checkbox]),.price-filters select{flex:1;min-width:160px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pricing-card{padding:27px;display:flex;flex-direction:column}.pricing-card[hidden]{display:none}.pricing-card h2{font-size:21px}.pricing-card p{font-size:15px;line-height:2;flex:1}.pricing-card strong{font-size:21px;color:#ffbc6e;margin-top:20px}.pricing-card small{margin:10px 0 25px}.pricing-card .btn{font-size:15px}.audit-page{max-width:1000px}.audit-score{padding:30px;margin:30px 0}.audit-score strong{font-size:65px;color:#ffb257}.audit-score h2{font-size:23px}.audit-detail{padding:20px;margin-bottom:15px}.audit-detail summary{cursor:pointer}.audit-detail p{font-size:15px}.auth-tabs{display:flex;gap:8px;margin:22px 0}.auth-tabs button{flex:1;background:transparent;border:1px solid #ffffff25;border-radius:8px;color:inherit;padding:8px;font-size:14px}.auth-tabs button.active{background:#f7922525;border-color:#ffad58}.coin-card{background:radial-gradient(ellipse at top right,#a8692640,#181522);padding:25px;border:1px solid #ffb85d45;border-radius:18px;margin-bottom:25px}.coin-card strong{font-size:38px;color:#ffbb68}.sms-preview{max-height:280px;overflow:auto}.lead-filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.lead-filters>*{flex:1;min-width:130px}.sms-history{margin-top:25px}.service-detail-content .prose{font-size:16px}.service-detail-content .prose h3{color:#ffc489}.theme-toggle:focus-visible,.mega-menu summary:focus-visible{outline:2px solid #ffb35b;outline-offset:5px}
@keyframes film{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 12px))}}
html[data-theme=light]{color-scheme:light;--muted:#4b5060;--line:#38445b22}html[data-theme=light] body{background:#f5f4f1!important;color:#202333}html[data-theme=light] body:before{background:radial-gradient(ellipse at top right,#ffc47725,transparent 60%)}html[data-theme=light] .site-header,html[data-theme=light] footer,html[data-theme=light] .sidebar{background:#f9f8f4ee;color:#202333}html[data-theme=light] .glass,html[data-theme=light] .mega-panel,html[data-theme=light] .service-card,html[data-theme=light] .detail-aside,html[data-theme=light] .search-console,html[data-theme=light] .seo-mini-grid>div,html[data-theme=light] .agent-message,html[data-theme=light] .ops-stage,html[data-theme=light] .pricing-card,html[data-theme=light] .coin-card{background:#ffffffdd;color:#202333;border-color:#5c5c762b;box-shadow:0 15px 35px #2532510a}html[data-theme=light] p,html[data-theme=light] small,html[data-theme=light] label,html[data-theme=light] .muted,html[data-theme=light] .story-copy li,html[data-theme=light] .footer-grid>div>a:not(.brand),html[data-theme=light] .text-link,html[data-theme=light] .breadcrumbs,html[data-theme=light] .console-axis{color:#454959!important}html[data-theme=light] h1,html[data-theme=light] h2,html[data-theme=light] h3,html[data-theme=light] h4{color:#242738}html[data-theme=light] .eyebrow,html[data-theme=light] .pricing-card strong,html[data-theme=light] .coin-card strong{color:#9b4a00!important}html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea,html[data-theme=light] .rich-editor{background:#fff;color:#242738;border-color:#777a8d55}html[data-theme=light] .btn.ghost{color:#242738;border-color:#4446}html[data-theme=light] .logo-carousel img{mix-blend-mode:multiply}html[data-theme=light] .brand img{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}html[data-theme=light] .service-icon{color:#874b10;background:#f5e6d6}html[data-theme=light] .seo-letters{background-image:linear-gradient(#626274,#62627430)}html[data-theme=light] .theme-toggle{color:#854b0e;border-color:#5554}html[data-theme=light] .hero h1 span{background-image:linear-gradient(100deg,#8f4200,#bb6400)}html[data-theme=light] .mega-panel h3{color:#754115}html[data-theme=light] .agent-node{background:#eeeaf8;color:#29223e}html[data-theme=light] .login-shell{background:#f6f3ef}html[data-theme=light] .web-word{color:#3f425b28}html[data-theme=light] .ops-flow article{border-color:#8a8ca944}html[data-theme=light] .status{color:#694680}html[data-theme=light] .status.green{color:#246c49}html[data-theme=light] .status.orange{color:#8c5219}html[data-theme=light] .preview-note,html[data-theme=light] .en{color:#555c70}html[data-theme=light] .prose a{color:#694cb5}html[data-theme=light] .hero-film span,html[data-theme=light] .about-hero figcaption{color:white}html[data-theme=light] .about-hero figcaption span{color:white}
@media(max-width:1000px){.nav nav{gap:14px}.hero-with-gallery{gap:25px}.hero-film>a{width:280px;height:330px}.mega-panel{gap:15px;padding:22px}.about-hero{gap:35px}.about-hero h1{font-size:45px}}
@media(max-width:850px){.hero-with-gallery{grid-template-columns:1fr}.hero-showcase{margin-left:-30px;margin-right:-30px;mask-image:none;height:380px}.hero-film>a{height:290px}.mega-panel{position:static;grid-template-columns:1fr 1fr;margin-top:12px;box-shadow:none}.nav nav.open{max-height:75vh;overflow-y:auto}.mega-promo{grid-column:1/-1}.about-hero{grid-template-columns:1fr}.about-hero figure{max-width:500px;margin:auto}.pricing-grid{grid-template-columns:1fr 1fr}.logo-carousel img{width:145px}.hero-with-gallery .hero-bottom{margin-top:20px}}
@media(max-width:560px){.hero-showcase{margin-left:-18px;margin-right:-18px;height:335px}.hero-film>a{width:245px;height:245px}.hero-film{gap:18px}.hero-with-gallery{gap:15px}.mega-panel{grid-template-columns:1fr;padding:18px}.mega-promo{grid-column:auto}.theme-toggle{width:30px;height:30px}.nav-actions{gap:8px}.nav .btn.small{padding:7px 9px}.brand img{width:108px}.logo-carousel>a,.logo-carousel>span{flex-basis:145px}.pricing-grid{grid-template-columns:1fr}.chart-metrics strong{font-size:18px}.chart-metrics>div{padding:12px 7px}.chart-metrics small{font-size:14px}.chart-controls{gap:10px}.chart-controls label{font-size:14px}.laptop-stage{padding:10px 15px 35px}.web-word{font-size:50px}.about-hero{padding-top:40px}.about-hero h1{font-size:42px}.about-story{padding:25px}.about-story .service-deliverables>div{display:block}.about-hero figcaption{font-size:14px;padding:15px}.request-form h2{font-size:21px}.hero-film>a:nth-child(even){margin-top:25px}html[data-theme=light] .nav nav.open{background:#fff}.work-visual .laptop-stage{padding:10px 12px 30px}}
@media(prefers-reduced-motion:reduce){.hero-film{animation:none}.hero-showcase{overflow-x:auto}.laptop-stage:hover .laptop-screen img{transition:none}}

.logo-carousel img{filter:url(#logo-white-knockout)!important;mix-blend-mode:normal!important}.logo-carousel{background:transparent}.hero-with-gallery .hero-proof{color:#dfdce9}.hero-with-gallery .hero-proof b{color:#ffb15c}html[data-theme=light] .hero-proof{color:#494b59}html[data-theme=light] .brand{background:#141520;padding:7px 12px;border-radius:10px}html[data-theme=light] .brand img{filter:none}.chart-metrics strong{font-family:inherit;font-size:21px}
html[data-theme=light] .nav nav a,html[data-theme=light] .nav-actions>a:not(.btn),html[data-theme=light] .nav nav span{color:#34394b}
html[data-theme=light] .nav nav a:hover,html[data-theme=light] .nav nav .nav-home{color:#8f4200}
html[data-theme=light] .carousel-controls button,html[data-theme=light] .filters button,html[data-theme=light] .subtle-btn{color:#34394b;border-color:#45495945}
html[data-theme=light] .sidebar button,html[data-theme=light] .sidebar a,html[data-theme=light] .sidebar-brand{color:#34394b}
html[data-theme=light] .sidebar button.active{background:#ff941a20;color:#873c00}
html[data-theme=light] .auth-tabs button{border-color:#45495945}
html[data-theme=light] .auth-tabs button.active{background:#ff941a20;color:#873c00}
.logo-carousel{scrollbar-width:none}.logo-carousel::-webkit-scrollbar{display:none}
html[data-theme=light] .menu-toggle,html[data-theme=light] .service-bottom,html[data-theme=light] .service-bottom span,html[data-theme=light] .mega-menu[open] summary{color:#454959}
@media(max-width:480px){.nav .btn.small{white-space:nowrap;padding:8px 10px}.nav-actions{gap:8px}.nav{gap:12px}.brand img{max-width:115px}}

/* September refinement: desktop mockups, richer service merchandising and bundles. */
.nav nav,.mega-menu summary{font-size:16px;font-weight:650}.nav nav{gap:30px}.mega-panel b{font-size:16px}.mega-panel small{font-size:14px}
.work-visual{height:390px;padding:28px 24px 0}.work-visual .laptop-stage{width:100%;max-width:none;padding:0 18px 44px}.work-visual .laptop-screen,.real-web-stage .laptop-screen{transform:none;aspect-ratio:16/9;border-width:8px;border-top-width:12px;background:#0d0e17}.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:object-position 8s cubic-bezier(.18,.72,.22,1)}.work-visual:hover .laptop-screen img,.work-visual:focus-within .laptop-screen img,.real-web-stage:hover .laptop-screen img{object-position:center bottom}.work-visual .laptop-keyboard,.real-web-stage .laptop-keyboard{transform:rotateX(58deg);height:42px;margin-inline:3%;box-shadow:0 24px 35px #0008}.work-card{min-width:0}.works-grid{gap:42px 28px}
.real-web-stage{isolation:isolate;padding-top:65px}.real-web-stage .laptop-stage{width:100%;padding:0 0 58px}.web-word{position:absolute;z-index:-1;top:-34px;left:-5%;font:900 clamp(86px,10vw,155px)/.82 Arial,sans-serif;letter-spacing:-8px;color:#ffffff0d;white-space:nowrap;margin:0}.web-thumbs{max-width:82%;margin:-15px auto 0}.web-thumbs img{height:115px}
.service-card{padding:0;min-height:430px}.service-card-body{padding:22px 25px 21px}.service-card .card-top{margin-bottom:18px}.service-card h3{font-size:21px}.service-art{height:168px;position:relative;overflow:hidden;border-bottom:1px solid #ffffff14;background:radial-gradient(circle at 15% 20%,#ff9d3930,transparent 34%),linear-gradient(145deg,#25213b,#0f1422)}.art-head{height:38px;display:flex;gap:5px;align-items:center;padding:0 14px;border-bottom:1px solid #ffffff12;direction:ltr}.art-head i{width:6px;height:6px;border-radius:50%;background:#ff9a2e}.art-head i:nth-child(2){background:#9475ff}.art-head i:nth-child(3){background:#48d8c5}.art-head span{margin-left:auto;font-size:14px;color:#aba8ba;direction:rtl}.art-canvas{height:130px;display:grid;grid-template-columns:1.15fr 1fr;gap:13px;padding:15px;direction:ltr}.art-primary{padding:13px;border:1px solid #ffffff18;border-radius:10px;background:#070912aa;direction:rtl}.art-primary b{display:block;font-size:15px}.art-primary span{display:block;width:80%;height:7px;margin-top:13px;border-radius:6px;background:#ffffff12}.art-primary span:last-child{width:52%}.art-flow{display:grid;gap:6px;align-content:center}.art-flow em{font-style:normal;font-size:14px;padding:7px 9px;border:1px solid #ffffff17;border-radius:7px;background:color-mix(in srgb,#ff941a calc((var(--i) + 1) * 6%),#171827);transform:translateX(calc(var(--i) * -7px))}.art-ai .art-flow em{border-color:#9075ff50}.art-ai .art-primary{background:radial-gradient(circle at 20% 20%,#8f71ff50,#090a13 65%)}.art-seo .art-primary{background:linear-gradient(155deg,#ff941a25,#090a13 65%)}.art-web .art-primary{background:linear-gradient(155deg,#34c7d62a,#090a13 65%)}.art-crm .art-primary{background:linear-gradient(155deg,#c36bea2b,#090a13 65%)}.art-erp .art-primary{background:linear-gradient(155deg,#45dab12b,#090a13 65%)}
.home-pricing{padding-top:120px}.price-table{overflow:hidden;background:#0f121ee0}.price-row{display:grid;grid-template-columns:1.5fr .7fr .8fr 35px;align-items:center;gap:18px;min-height:68px;padding:12px 24px;border-bottom:1px solid #ffffff0c;transition:.25s}.price-row:last-child{border-bottom:0}.price-row:not(.price-head):hover{background:#ff941a12;padding-inline-start:31px}.price-row strong{font-size:16px}.price-row>span{font-size:14px;color:#aaaebe}.price-row>b{font-size:16px;color:#ffb660}.price-row small{font-size:14px}.price-row i{font-style:normal;width:30px;height:30px;border:1px solid #ffffff1a;border-radius:50%;display:grid;place-items:center}.price-head{min-height:48px;background:#ffffff05;color:#8f93a7;font-size:14px}
.bundle-section{padding-top:125px}.bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}.bundle-card{position:relative;overflow:hidden;padding:30px;background:linear-gradient(150deg,#181724,#0c101a);display:flex;flex-direction:column;min-height:530px}.bundle-card:before{content:"";position:absolute;width:260px;height:260px;top:-150px;left:-100px;border-radius:50%;background:#ff941a25;filter:blur(25px)}.bundle-card.featured{transform:translateY(-18px);border-color:#ffaf565c;box-shadow:0 28px 80px #d86c171c}.bundle-card.featured:before{background:#815cff40}.bundle-top{display:flex;justify-content:space-between;align-items:center;position:relative}.bundle-top span{font-size:14px;padding:5px 10px;border:1px solid #ffab4a40;border-radius:20px;color:#ffba6d}.bundle-top b{font:700 32px Arial;color:#ffffff10}.bundle-card h3{font-size:25px;margin:24px 0 9px}.bundle-card>p{font-size:15px;line-height:2;min-height:72px}.bundle-card ul{list-style:none;padding:20px 0;margin:10px 0 20px;border-top:1px solid #ffffff0e;border-bottom:1px solid #ffffff0e;display:grid;gap:12px}.bundle-card li{font-size:14px}.bundle-card li span{color:#ffae50;margin-left:9px}.bundle-price{margin-top:auto;display:grid;gap:4px}.bundle-price del{color:#777d8e;font-size:14px}.bundle-price strong{font-size:27px;color:#fff}.bundle-price strong small{font-size:14px}.bundle-price em{font-style:normal;font-size:14px;color:#62d9b5}.bundle-card .btn{margin-top:22px;width:100%}
.catalog-page{padding-top:75px}.catalog-intro{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;margin-bottom:38px}.catalog-intro>div:first-child{max-width:760px}.catalog-intro p{font-size:16px}.catalog-count{width:150px;height:150px;border:1px solid #ffb35b40;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#ff941a22,transparent 67%)}.catalog-count strong{font-size:42px}.catalog-count span{font-size:14px}.catalog-page .price-filters{padding:18px;position:sticky;top:100px;z-index:5;background:#11131bea}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-catalog-card{padding:0;overflow:hidden;display:flex;flex-direction:column}.catalog-card-body{padding:23px;display:flex;flex-direction:column;flex:1}.catalog-index{font:700 14px Arial;color:#ffac50}.service-catalog-card h2{font-size:20px;margin:12px 0 6px}.service-catalog-card p{font-size:14px;line-height:2;min-height:66px}.catalog-price{display:flex;justify-content:space-between;align-items:center;margin:10px 0 20px;padding-top:16px;border-top:1px solid #ffffff10}.catalog-price strong{font-size:16px;color:#ffb259}.catalog-price small{font-size:14px}.service-catalog-card .btn{margin-top:auto;font-size:14px}
.service-landing{padding-top:70px}.landing-grid{min-height:650px;background:radial-gradient(circle at 80% 45%,#734cff16,transparent 35%);border-bottom:1px solid #ffffff0c}.service-landing .story-copy h1{display:inline-flex;padding:6px 12px;border:1px solid #ffad4f40;border-radius:20px;color:#ffb35e}.service-landing .story-copy h2{font-size:clamp(38px,4.5vw,62px);line-height:1.45}.service-detail-content{grid-template-columns:minmax(0,1fr) 330px;gap:35px}.service-detail-content .prose{padding:50px}.service-detail-content .prose>h2{font-size:28px;margin-top:45px}.service-detail-content .prose>h2:first-child{margin-top:0}.service-detail-content .prose p,.service-detail-content .prose li{font-size:16px;line-height:2.25}.service-detail-content .detail-aside{padding:32px}.service-request{padding-top:75px;max-width:1080px}.service-smart-form{position:relative;overflow:hidden;padding:42px;background:radial-gradient(circle at 100% 0,#ff941a1d,transparent 35%),linear-gradient(145deg,#1a1826,#0e121c)}.service-smart-form:before{content:"فرم اختصاصی";position:absolute;left:-12px;top:15px;font-size:65px;font-weight:900;color:#ffffff04;pointer-events:none}.form-heading span{font-size:14px;color:#ffb35e}.form-heading h2{font-size:30px;margin:7px 0}.form-heading p{font-size:15px}.form-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.form-submit small{color:#9499aa;font-size:14px}.bundle-service-picker{border:1px solid #ffffff18;border-radius:12px;padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.bundle-service-picker legend{padding:0 8px}.bundle-service-picker label{display:flex;gap:8px;align-items:center}.bundle-service-picker input{width:16px;min-height:16px;margin:0}
.story-seo{padding-inline:0}.story-seo>.story-copy{max-width:900px}.story-seo .story-visual{width:100%}.seo-universe{padding:35px max(6%,70px) 15px}.search-console{padding:30px 34px;min-height:520px;background:#0d1120e8;border-color:#ff9f3338;border-radius:20px}.chart-metrics{margin-top:18px}.search-console svg{height:280px}.seo-mini-grid{grid-template-columns:1fr 1fr}.seo-letters{right:-18px;font-size:clamp(110px,15vw,210px);opacity:.2}.dot-globe{left:-10%;width:65%;background-size:11px 11px}.agent-stage{min-height:500px}.agent-network{position:absolute;top:10px;width:330px;height:330px;border:1px solid #8f78ef3d;border-radius:50%;box-shadow:0 0 0 35px #8067ec08,0 0 0 70px #8067ec05}.agent-network i{position:absolute;width:9px;height:9px;border-radius:50%;background:#a993ff;box-shadow:0 0 16px #9378ff}.agent-network i:nth-child(1){top:12%;left:21%}.agent-network i:nth-child(2){top:37%;right:2%}.agent-network i:nth-child(3){bottom:8%;right:29%}.agent-network i:nth-child(4){bottom:27%;left:3%}.agent-network i:nth-child(5){top:3%;right:35%}.agent-network i:nth-child(6){bottom:1%;left:39%}.agent-core{width:170px;height:170px;border-radius:50%;transform:none;background:radial-gradient(circle at 40% 35%,#5e4fa3,#191832 68%)}.agent-brain{position:relative;width:82px;height:64px;border:2px solid #c9bdff;border-radius:42% 48% 45% 48%;filter:drop-shadow(0 0 14px #967cff)}.agent-brain:before,.agent-brain:after{content:"";position:absolute;background:#c9bdff}.agent-brain:before{width:2px;height:52px;left:39px;top:5px}.agent-brain:after{height:2px;width:61px;left:10px;top:31px}.agent-brain i{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffae50;z-index:1}.agent-brain i:nth-child(1){top:9px;left:21px}.agent-brain i:nth-child(2){top:9px;right:18px}.agent-brain i:nth-child(3){bottom:9px;left:17px}.agent-brain i:nth-child(4){bottom:8px;right:17px}.agent-brain i:nth-child(5){top:27px;left:35px}.agent-brain i:nth-child(6){top:28px;right:8px}.agent-core small{font-family:inherit;letter-spacing:0;margin:13px 0 0}.agent-message p{display:flex;align-items:center;justify-content:space-between;gap:8px}.agent-message p b{font-size:14px}.agent-message p i{font-style:normal;color:#ffac4f}
html[data-theme=light] .service-art{background:radial-gradient(circle at 15% 20%,#ff9d392b,transparent 34%),linear-gradient(145deg,#f1eef8,#e9edf3)}html[data-theme=light] .art-primary{background:#fff}html[data-theme=light] .art-flow em{background:#ffffffaa;border-color:#4f53601d;color:#303442}html[data-theme=light] .price-table,html[data-theme=light] .bundle-card,html[data-theme=light] .service-smart-form{background:#ffffffea;color:#202333}html[data-theme=light] .price-row{border-color:#3332}html[data-theme=light] .catalog-page .price-filters{background:#f9f8f4ef}html[data-theme=light] .search-console{background:#fff}
@media(max-width:980px){.catalog-grid,.bundle-grid{grid-template-columns:1fr 1fr}.bundle-card:last-child{grid-column:1/-1}.work-visual{height:330px}.nav nav,.mega-menu summary{font-size:15px}.seo-universe{padding-inline:25px}.search-console{min-height:450px}.search-console svg{height:230px}}
@media(max-width:680px){.catalog-grid,.bundle-grid{grid-template-columns:1fr}.bundle-card,.bundle-card.featured{transform:none;min-height:0}.bundle-card:last-child{grid-column:auto}.price-row{grid-template-columns:1.2fr .8fr 30px;padding:12px 15px}.price-row>span:nth-child(2),.price-head>span:nth-child(2){display:none}.price-row>b{font-size:15px}.price-head{display:none}.catalog-intro{grid-template-columns:1fr}.catalog-count{width:100%;height:auto;border-radius:18px;display:flex;gap:10px;align-items:center;justify-content:center;padding:14px}.catalog-count strong{font-size:25px}.catalog-page .price-filters{position:static}.work-visual{height:300px;padding-inline:8px}.work-visual .laptop-stage{padding-inline:3px}.service-card{min-height:0}.service-detail-content .prose{padding:26px}.service-detail-content .prose p,.service-detail-content .prose li{font-size:16px}.service-smart-form{padding:25px}.form-heading h2{font-size:24px}.web-word{font-size:68px;letter-spacing:-5px;top:0}.real-web-stage{padding-top:70px}.search-console{padding:18px;min-height:0}.search-console svg{height:auto}.chart-metrics{grid-template-columns:1fr 1fr}.seo-mini-grid{grid-template-columns:1fr}.agent-message p{flex-wrap:wrap;justify-content:center}.bundle-service-picker{grid-template-columns:1fr}.logo-carousel img{width:175px;height:95px}.logo-carousel>a,.logo-carousel>span{flex-basis:175px}}
.logo-carousel img{width:200px;height:105px}.logo-carousel>a,.logo-carousel>span{flex:0 0 200px}.logo-carousel{gap:58px}
@media(max-width:680px){.logo-carousel img{width:175px;height:95px}.logo-carousel>a,.logo-carousel>span{flex-basis:175px}}
.seo-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px}.seo-kpis>div{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #ff9f3324;border-radius:13px;background:linear-gradient(115deg,#ff941a16,#12162580);backdrop-filter:blur(14px)}.seo-kpis strong{font:800 25px Arial;color:#ffad4d}.seo-kpis span{font-size:14px;color:#d6d8e2}.seo-kpis>div:nth-child(2) strong{color:#aa8dff}.seo-kpis>div:nth-child(3) strong{color:#48d8c5}@media(max-width:680px){.seo-kpis{grid-template-columns:1fr}.seo-kpis>div{justify-content:space-between}}

/* cinematic.css */
.cinematic-art{height:235px!important;background:#090b13!important;border:0;isolation:isolate}.cinematic-art:before,.cinematic-art:after{content:"";position:absolute;inset:-35%;pointer-events:none;z-index:2}.cinematic-art:before{background:linear-gradient(108deg,transparent 36%,rgba(255,176,74,.14) 48%,rgba(119,91,255,.11) 53%,transparent 65%);transform:translateX(-75%) rotate(5deg);animation:art-light-sweep calc(8s + var(--art-seed)*.8s) ease-in-out infinite}.cinematic-art:after{inset:auto -10% -45% -10%;height:70%;background:radial-gradient(ellipse,rgba(248,141,0,.16),transparent 67%);filter:blur(18px);animation:art-glow calc(5s + var(--art-seed)*.45s) ease-in-out infinite alternate}.cinematic-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.035);animation:art-breathe calc(9s + var(--art-seed)*.7s) ease-in-out infinite alternate;transition:filter .7s}.service-card:hover .cinematic-art img,.service-catalog-card:hover .cinematic-art img{filter:saturate(1.12) brightness(1.08)}.service-card{overflow:hidden}.service-card-body{padding-top:25px}.service-detail-art .cinematic-art{height:min(560px,55vw)!important;border-radius:28px;box-shadow:0 35px 100px #0008}.art-crm img,.art-erp img{object-position:center}.art-brand img{filter:none}@keyframes art-breathe{0%{transform:scale(1.035) translate3d(-.6%,.2%,0)}100%{transform:scale(1.095) translate3d(.7%,-.5%,0)}}@keyframes art-light-sweep{0%,18%{transform:translateX(-75%) rotate(5deg);opacity:0}36%,62%{opacity:1}82%,100%{transform:translateX(75%) rotate(5deg);opacity:0}}@keyframes art-glow{to{opacity:.45;transform:translateY(-12%) scale(1.12)}}
.live-composition{position:relative;width:100%;padding:15px 0 65px;isolation:isolate;direction:ltr}.device-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#f88d0028,transparent 65%);filter:blur(20px);z-index:-1}.live-device{background:linear-gradient(125deg,#c4c4cd,#393a42 40%,#b4b5bd);padding:9px;border-radius:15px;box-shadow:0 30px 60px #0008,0 0 0 1px #ffffff40;position:relative}.device-viewport{position:relative;overflow:hidden;background:#090b13;aspect-ratio:16/10;border-radius:7px}.device-viewport iframe{position:absolute;left:0;top:0;border:0;transform-origin:top left;background:white;width:1440px;height:900px}.device-camera{height:5px}.device-chin{height:7px}.device-trio{padding:40px 55px 105px 0}.device-trio .live-desktop{width:93%;transform:perspective(1300px) rotateY(8deg) rotateX(2deg)}.device-trio .live-tablet{position:absolute;right:0;bottom:77px;width:32%;border-radius:19px;padding:7px;transform:rotate(5deg)}.live-tablet .device-viewport{aspect-ratio:768/1024}.device-trio .live-phone{position:absolute;left:4%;bottom:47px;width:20%;padding:5px;border-radius:21px;transform:rotate(-7deg);box-shadow:0 20px 35px #000b}.live-phone .device-viewport{aspect-ratio:390/844;border-radius:15px}.live-external{position:absolute;bottom:28px;right:0;display:flex;align-items:center;gap:8px;font-size:14px;color:#ffbd76;border:1px solid #ffad4d40;border-radius:30px;padding:9px 14px;background:#10121bed;direction:rtl}.live-external i{width:6px;height:6px;background:#69dbb8;border-radius:50%;box-shadow:0 0 10px #69dbb8}.live-help{position:absolute;bottom:0;right:0;font-size:14px!important;color:#a9adbc!important;direction:rtl;margin:0}.work-visual{height:auto!important;min-height:330px;padding:24px 24px 35px!important;overflow:visible}.work-view{bottom:3px;left:24px}.work-visual .live-composition{padding-bottom:75px}.real-web-stage{padding-top:90px}.web-thumbs{display:none}.web-word{top:0;font-size:clamp(70px,9vw,145px);color:#ffffff12;letter-spacing:-6px}.story-web .story-visual{min-width:0}.story-web{overflow:visible}.real-web-stage:before{content:"";position:absolute;inset:-70px;background:radial-gradient(ellipse,#9b692b18,transparent 70%);z-index:-2}
.cinema-seo{position:relative;isolation:isolate;display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;direction:ltr;padding:35px 30px 30px;min-height:660px}.earth-particles{position:absolute;left:-210px;top:-100px;width:850px;height:850px;z-index:-1;opacity:.72;pointer-events:none}.cinema-seo-word{position:absolute;right:-40px;top:30px;writing-mode:vertical-rl;font:900 135px/.85 Arial;color:#ffffff0a;z-index:-1}.cinema-kpis{display:flex;flex-direction:column;justify-content:space-between;padding:15px 0 50px;gap:30px}.cinema-kpis>div{display:flex;flex-direction:row-reverse;gap:17px;align-items:center;text-align:right}.kpi-sculpture{flex:none;display:grid;place-items:center;width:82px;height:86px;border-radius:19px;font:700 43px Arial;color:#ffb361;border-top:9px solid #e78b29;border-right:8px solid #814714;background:linear-gradient(135deg,#9e531d,#21121a 75%);box-shadow:0 10px 25px #0008,inset 0 0 15px #ff990025;text-shadow:0 0 18px #ff8800}.cinema-kpis b{display:block;font-size:16px}.cinema-kpis small{font-size:14px;color:#b9b3bc;display:block;margin-top:9px}.cinema-main-chart,.cinema-mini{border:1px solid #9e784a65;border-radius:18px;background:linear-gradient(125deg,#2b1b1470,#0b0c148c);backdrop-filter:blur(4px);padding:22px}.cinema-metrics{display:grid;grid-template-columns:1fr 1fr;gap:35px;font-family:Arial;color:#ddd7df}.cinema-metrics label{font-size:15px;display:flex;align-items:center;gap:6px}.cinema-metrics input{width:12px;min-height:12px;accent-color:#ff981f;margin:0}.cinema-metrics strong{display:block;font-size:21px;margin:9px 0}.cinema-metrics strong small{padding:0 25px}.cinema-metrics span{font-size:14px;display:flex;justify-content:space-between;max-width:265px}.cinema-main-chart svg{width:100%;height:auto;display:block;margin-top:30px;color:#ded9e2}.cinema-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:16px}.cinema-mini{padding:22px 18px 8px;border-color:#ffffff36;background:#15101a60}.cinema-mini svg{display:block;width:100%;margin-top:15px;color:#cfcad1}.mini-heading{font:14px Arial;letter-spacing:.6px;display:flex;gap:15px;align-items:center}.mini-heading b{font-size:19px}.cinema-disclosure{font-size:14px;color:#aca2b0;display:block;text-align:right;direction:rtl;margin:10px}.story-seo .story-copy{text-align:center;margin:auto}.story-seo .story-copy ul{justify-content:center}.story-seo .story-visual{width:100%;max-width:1300px}.service-landing.story-seo .landing-grid{display:block}.service-landing.story-seo .story-copy{max-width:850px;padding:55px 0}
html[data-theme=light] .cinema-seo{background:#0b0c14;border-radius:25px;color:white}html[data-theme=light] .cinema-seo label{color:#ddd!important}html[data-theme=light] .web-word{color:#20203320}
@media(max-width:800px){.cinema-seo{grid-template-columns:1fr;padding:15px;gap:20px;min-height:0}.cinema-kpis{flex-direction:row;padding:0;gap:10px}.cinema-kpis>div{flex-direction:column;gap:8px;text-align:center;flex:1}.kpi-sculpture{width:55px;height:58px;font-size:30px;border-width:5px}.cinema-kpis b{font-size:14px}.cinema-kpis small{display:none}.earth-particles{left:-200px;width:700px;height:700px}.cinema-metrics{gap:18px}.cinema-metrics strong{font-size:17px}.cinema-metrics strong small{padding:0 8px}.cinema-metrics span{font-size:14px}.cinema-main-chart{padding:14px}.cinema-mini{padding:15px 8px}.mini-heading{font-size:14px}.mini-heading b{font-size:15px}.device-trio{padding-right:25px}.cinematic-art{height:220px!important}.work-visual{min-height:0}.live-help{font-size:14px!important}.cinema-seo-word{display:none}}
@media(prefers-reduced-motion:reduce){.cinematic-art img,.cinematic-art:before,.cinematic-art:after{animation:none;transition:none}}
.cinematic-agent-hero{width:100%;height:390px;object-fit:cover;border-radius:24px;mask-image:linear-gradient(#000 80%,transparent)}.agent-stage .agent-network,.agent-stage .agent-core,.agent-stage .agent-node{display:none}.agent-stage{display:block}.agent-stage .agent-message{position:relative;bottom:auto;margin:-10px auto 0;width:95%}@media(max-width:680px){.cinematic-agent-hero{height:280px}}
.blocked-preview{width:100%;height:100%;object-fit:cover;object-position:top}.live-tablet .blocked-preview,.live-phone .blocked-preview{object-position:top left}
.earth-particles{opacity:.16}.cinema-seo-word{font-size:clamp(220px,24vw,360px);right:-25px;top:5px;color:#ffffff0d;letter-spacing:-12px;line-height:.9}
.web-dual-showcase{position:relative;isolation:isolate;height:650px;width:100%;overflow:hidden;border-radius:26px;background:#080a10;direction:ltr;box-shadow:0 25px 80px #0004}.web-background-carousel{position:absolute;inset:-30% -90% -30% -40%;perspective:900px;z-index:-1;opacity:.12;pointer-events:none;mask-image:linear-gradient(90deg,#000,transparent 96%)}.web-background-track{display:flex;width:max-content;gap:28px;transform-origin:center;animation:web-background-drift 85s linear infinite}.web-background-track>div{display:flex;gap:28px}.web-background-track img{width:250px;height:750px;object-fit:cover;object-position:top;border-radius:12px;filter:grayscale(.75)}.web-foreground-carousel{position:absolute;inset:45px 0 78px 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 88%,transparent)}.web-foreground-track{display:flex;width:max-content;gap:26px;animation:web-foreground-drift 65s linear infinite}.web-foreground-track>div{display:flex;gap:26px}.web-carousel-card{position:relative;display:block;flex:none;width:285px;height:520px;overflow:hidden;border-radius:14px;border:1px solid #ffffff28;box-shadow:0 18px 45px #0008;background:#14141d}.web-carousel-card img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 9s linear}.web-carousel-card:hover img{object-position:bottom}.web-carousel-card>span{position:absolute;bottom:0;left:0;right:0;padding:25px 15px 14px;background:linear-gradient(transparent,#080911ee);direction:rtl;font-size:14px;display:flex;justify-content:space-between}.web-carousel-caption{position:absolute;bottom:18px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:10px}.web-carousel-caption>span{font:700 19px Arial;letter-spacing:2px;color:#ffb765}.web-carousel-caption b{font-weight:400;color:#ffffff50;font-size:14px}.web-carousel-caption button{background:#ffffff0a;border:1px solid #ffffff2a;color:#fff;border-radius:24px;padding:9px 15px;font:14px inherit;cursor:pointer}.web-dual-showcase:hover .web-foreground-track,.web-dual-showcase:focus-within .web-foreground-track,.web-dual-showcase.is-paused .web-foreground-track,.web-dual-showcase.is-paused .web-background-track{animation-play-state:paused}.story-web .story-visual{position:relative;width:100%}
@keyframes web-foreground-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes web-background-drift{from{transform:rotateX(48deg) rotateZ(-28deg) translateX(-15%)}to{transform:rotateX(48deg) rotateZ(-28deg) translateX(-55%)}}
@media(max-width:680px){.web-dual-showcase{height:490px}.web-foreground-carousel{inset:28px 0 68px}.web-carousel-card{width:225px;height:385px}.web-carousel-caption>span{font-size:16px}.cinema-seo-word{display:block;font-size:220px;right:0;opacity:.45}.cinema-charts{min-width:0}}
@media(prefers-reduced-motion:reduce){.web-foreground-track,.web-background-track{animation:none}.web-foreground-carousel{overflow-x:auto}.web-carousel-card img{transition:none}}

/* Animated data layer shared by the unique service illustrations. */
.cinematic-art .art-orbit,.cinematic-art .art-current{position:absolute;inset:8%;z-index:2;pointer-events:none;opacity:0;transition:opacity .7s ease}
.cinematic-art.art-in-view .art-orbit,.cinematic-art.art-in-view .art-current{opacity:1}
.cinematic-art .art-orbit{border:1px solid color-mix(in srgb,var(--brand-amber) 35%,transparent);border-radius:50%;filter:drop-shadow(0 0 16px #f88d0040);animation:art-orbit-spin 16s linear infinite}
.cinematic-art .art-orbit:before,.cinematic-art .art-orbit:after{content:'';position:absolute;inset:14%;border:1px solid #9a72db32;border-radius:46% 54% 58% 42%;transform:rotate(35deg)}
.cinematic-art .art-orbit:after{inset:29%;border-color:#ffffff20;transform:rotate(-28deg)}
.cinematic-art .art-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffd092;box-shadow:0 0 10px #f88d00,0 0 24px #f88d00}
.cinematic-art .art-orbit i:nth-child(1){top:-4px;left:48%}.cinematic-art .art-orbit i:nth-child(2){right:4%;top:28%}.cinematic-art .art-orbit i:nth-child(3){bottom:5%;left:26%}.cinematic-art .art-orbit i:nth-child(4){left:2%;top:43%}
.cinematic-art.art-in-view .art-orbit i{animation:art-node-pulse 2.4s ease-in-out infinite alternate}.cinematic-art .art-orbit i:nth-child(2){animation-delay:-.6s}.cinematic-art .art-orbit i:nth-child(3){animation-delay:-1.2s}.cinematic-art .art-orbit i:nth-child(4){animation-delay:-1.8s}
.cinematic-art .art-current{inset:auto -25% 8%;height:45%;background:linear-gradient(105deg,transparent 12%,#f88d0000 30%,#f88d0055 47%,#b184ff55 55%,transparent 72%);filter:blur(12px);mix-blend-mode:screen;transform:translateX(55%) skewX(-18deg);animation:art-current-drift 7s cubic-bezier(.4,0,.2,1) infinite}
.cinematic-art:nth-of-type(3n+2) .art-orbit{animation-direction:reverse;animation-duration:20s}.cinematic-art:nth-of-type(3n) .art-current{animation-delay:-3.5s}
@keyframes art-orbit-spin{to{transform:rotate(360deg)}}
@keyframes art-node-pulse{to{transform:scale(1.8);opacity:.38}}
@keyframes art-current-drift{0%,100%{transform:translateX(65%) skewX(-18deg);opacity:0}42%,62%{transform:translateX(-32%) skewX(-18deg);opacity:.8}}
@media(prefers-reduced-motion:reduce){.cinematic-art .art-orbit,.cinematic-art .art-orbit i,.cinematic-art .art-current{animation:none!important}.cinematic-art .art-orbit,.cinematic-art .art-current{opacity:.45}}

/* Fully vector service scenes: no photographic service thumbnails. */
.vector-art{background:radial-gradient(circle at calc(72% + var(--art-shift)*.3%) 18%,#8c64da22,transparent 34%),linear-gradient(145deg,#11131f,#070910)!important}
.vector-art svg{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.01);overflow:visible}
.vector-art .visual-panel text:last-of-type{direction:ltr;unicode-bidi:bidi-override}
.vector-art .visual-panel{transform-origin:center;animation:visual-float calc(7s + var(--art-seed)*.5s) ease-in-out infinite alternate}
.vector-art .visual-grid{animation:visual-grid-shift 16s linear infinite}
.vector-art .visual-halo{animation:visual-halo 5s ease-in-out infinite alternate}
.vector-art .visual-chart{stroke-dasharray:700;stroke-dashoffset:700;animation:visual-chart-draw 5.8s cubic-bezier(.24,.72,.22,1) infinite}
.vector-art .visual-chart-ghost{stroke-dasharray:10 12;animation:visual-dash 9s linear infinite}
.vector-art .visual-symbol{filter:drop-shadow(0 0 10px #f88d0066);transform-origin:100px 160px;animation:visual-symbol 4.6s ease-in-out infinite alternate}
.vector-art .visual-pulses circle{transform-box:fill-box;transform-origin:center;animation:visual-pulse 1.8s ease-out infinite}.vector-art .visual-pulses circle:nth-child(2){animation-delay:-.6s}.vector-art .visual-pulses circle:nth-child(3){animation-delay:-1.2s}
.service-card:hover .vector-art svg,.service-catalog-card:hover .vector-art svg{filter:saturate(1.18) brightness(1.08)}
.service-detail-art .vector-art svg{transform:scale(1.025)}
.article-style-art{background:#110a29!important}
.article-style-art:before{background:linear-gradient(108deg,transparent 38%,rgba(255,178,75,.09) 49%,rgba(139,100,219,.08) 54%,transparent 66%)}
.article-style-art img{object-position:center;filter:saturate(.96) contrast(1.02)}
.service-card:hover .article-style-art img,.service-catalog-card:hover .article-style-art img{filter:saturate(1.08) contrast(1.04) brightness(1.05)}
@keyframes visual-float{to{transform:translate3d(0,-7px,0)}}
@keyframes visual-grid-shift{to{transform:translate3d(30px,18px,0)}}
@keyframes visual-halo{to{transform:translate(-36px,24px) scale(1.16);opacity:.55}}
@keyframes visual-chart-draw{0%,12%{stroke-dashoffset:700;opacity:.2}55%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-80;opacity:0}}
@keyframes visual-dash{to{stroke-dashoffset:-220}}
@keyframes visual-symbol{to{transform:translate(5px,-6px) scale(1.035);filter:drop-shadow(0 0 18px #a579ff88)}}
@keyframes visual-pulse{0%{transform:scale(.6);opacity:.25}55%{opacity:1}100%{transform:scale(2.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.vector-art *{animation:none!important}.vector-art .visual-chart{stroke-dashoffset:0}}

/* brand.css */
/* ===========================================================================
   لایهٔ هویت بصری دیجی لایکرز
   ---------------------------------------------------------------------------
   این فایل آخر از همه بارگذاری می‌شود و «قانون» است. چهار فایل قبلی
   (style, ocean, premium, cinematic) لایه‌به‌لایه روی هم نوشته شده‌اند و
   جاهایی همدیگر را نقض می‌کنند. به‌جای بازنویسی آن‌ها، سیستم برند از
   اینجا اعمال می‌شود: یک مجموعه توکن، یک رنگ کنش، یک قاعده برای تصویر.

   قاعده‌های سیستم
   1. کهربا رنگ کنش است. بنفش فقط نور محیطی است، نه دکمه.
   2. هر تصویرِ سایت داخل قاب ۱۶:۱۰ با نوار مرورگر یکسان می‌نشیند.
   3. متن فارسی هرگز داخل فایل تصویری نمی‌رود؛ همیشه HTML است.
   4. نشان مشتری‌ها تک‌رنگ سفید با وزن نوری یکسان.
   5. حرکت فقط با transform و opacity؛ هیچ چیدمانی انیمیت نمی‌شود.
   =========================================================================== */

:root {
  /* ---- رنگ ---------------------------------------------------------- */
  --brand-ink: #0a0911;
  --brand-surface: #14121f;
  --brand-raised: #191624;
  --brand-hairline: #ffffff1f;
  --brand-hairline-strong: #ffffff33;

  /* کهربا: همان نارنجی نشان برند. تنها رنگ کنش. */
  --brand-amber: #f88d00;
  --brand-amber-lift: #ffa62e;
  --brand-amber-deep: #d2760a;
  --brand-amber-ink: #241403;

  /* بنفش: فقط نور پس‌زمینه و حالت‌های ثانویه. */
  --brand-violet: #5145ff;

  --brand-text: #f5f3fa;
  --brand-muted: #a49eb6;
  --brand-faint: #7d7691;

  /* ---- شکل ---------------------------------------------------------- */
  --brand-r-lg: 24px;
  --brand-r-md: 16px;
  --brand-r-sm: 10px;

  /* ---- حرکت --------------------------------------------------------- */
  --brand-ease: cubic-bezier(.32, .72, 0, 1);
  --brand-fast: .2s;
  --brand-slow: .55s;

  /* ---- سایه: هم‌رنگ زمینه، نه سیاه خالص ------------------------------ */
  --brand-shadow-sm: 0 4px 16px #06050c66;
  --brand-shadow-md: 0 14px 40px #06050c80;
  --brand-shadow-lg: 0 28px 70px #06050c99;
}

/* یک مقدار برای --orange در کل سایت. پیش از این style.css و premium.css
   دو مقدار متفاوت تعریف می‌کردند و دکمه‌ها بین دو نارنجی جابه‌جا می‌شدند. */
:root, html[data-theme=light] { --orange: var(--brand-amber); }

/* ===========================================================================
   ۱. سیستم دکمه
   دکمهٔ بزرگ بنفش بود و دکمهٔ کوچک کهربایی — دقیقاً برعکسِ نشان برند.
   حالا کنش اصلی همیشه کهرباست و بقیه سلسله‌مراتب پایین‌تر می‌گیرند.
   =========================================================================== */
.btn {
  border: 1px solid var(--brand-amber-lift);
  background: linear-gradient(115deg, var(--brand-amber-lift), var(--brand-amber-deep));
  color: var(--brand-amber-ink);
  font-weight: 700;
  border-radius: var(--brand-r-md);
  box-shadow: 0 8px 26px #f88d0026;
  transition: transform var(--brand-fast) var(--brand-ease),
              box-shadow var(--brand-fast) var(--brand-ease),
              filter var(--brand-fast) var(--brand-ease);
}
.btn:hover { background: linear-gradient(115deg, #ffb551, var(--brand-amber)); transform: translateY(-2px); box-shadow: 0 12px 34px #f88d0038; }
.btn:active { transform: translateY(0) scale(.985); }

/* کنش ثانویه: بدون پُری، فقط خط مو. */
.btn.ghost, .btn.secondary {
  background: #ffffff08;
  border-color: var(--brand-hairline-strong);
  color: var(--brand-text);
  box-shadow: none;
  font-weight: 400;
}
.btn.ghost:hover, .btn.secondary:hover { background: #ffffff12; border-color: #ffffff4d; }
html[data-theme=light] .btn.ghost, html[data-theme=light] .btn.secondary { color: #242738; border-color: #2427384d; background: #24273808; }

.btn .icon { transition: transform var(--brand-fast) var(--brand-ease); }
.btn:hover .icon { transform: translateX(-3px); }

/* حلقهٔ فوکوس یکسان و همیشه دیدنی — الزام دسترس‌پذیری. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-amber-lift);
  outline-offset: 3px;
  border-radius: var(--brand-r-sm);
}

/* ===========================================================================
   ۲. دیوار موکاپ‌های مورب — بخش «طراحی سایت»
   در حالت دسکتاپ، روبه‌روی متن خالی بود. حالا آن نیمه یک دیوار زنده
   است: سه ستون موکاپ، کل شبکه کج، هر ستون با سرعت و جهت خودش.
   =========================================================================== */
.drift-wall {
  position: absolute;
  /* لنگر سمت راست: پشتِ ستون متن. کارهای مشتری پس‌زمینهٔ حرفی می‌شوند
     که زده می‌شود، نه یک تکه تزئین در گوشهٔ دیگر صفحه. */
  inset: 0 0 0 auto;
  width: 62%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: radial-gradient(ellipse 82% 96% at 76% 50%, #000 44%, transparent 80%);
  mask-image: radial-gradient(ellipse 82% 96% at 76% 50%, #000 44%, transparent 80%);
}
.drift-grid {
  position: absolute;
  top: 50%;
  left: 52%;
  display: flex;
  gap: 26px;
  /* شبکه به‌عنوان یک کل کج می‌شود؛ حرکت داخل ستون‌ها عمودی می‌ماند و
     همین باعث می‌شود مورب حرکت کنند بدون محاسبهٔ زاویه در انیمیشن. */
  transform: translate(-50%, -50%) rotate(-32deg);
  opacity: .17;
}
.drift-col { width: 260px; height: 136vh; overflow: hidden; }
.drift-run {
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: drift var(--pace, 40s) linear infinite;
  animation-direction: var(--dir, normal);
  will-change: transform;
}
.drift-run img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 750;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #ffffff1a;
  box-shadow: 0 16px 40px #06050c7a;
}
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }

/* چیدمان بخش: دو ستون کنار هم — متن راست، کاروسل چپ، دیوار پشت هر دو.
   در گرید راست‌به‌چپ ستون اول سمت راست می‌نشیند، پس متن order:1 و
   کاروسل order:2 می‌گیرد. */
.story-web { position: relative; isolation: isolate; overflow: hidden; }
.service-story.story-web {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 48px;
  align-items: center;
  min-height: 660px;
}
.story-web .story-copy { position: relative; z-index: 1; order: 1; max-width: 520px; }
.story-web .story-visual { display: block; position: relative; z-index: 1; order: 2; min-width: 0; }

/* ---- کاروسل صفحهٔ نخست سایت‌ها -------------------------------------- */
.site-reel {
  /* در سند راست‌به‌چپ flex از راست می‌چیند و نوار به‌جای عبور از جلوی
     چشم از صفحه دور می‌شود؛ همان باگی که در دیوار برندها هم بود. */
  direction: ltr;
  overflow: clip;
  padding: 6px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.site-track { display: flex; width: max-content; animation: site-slide 74s linear infinite; will-change: transform; }
.site-set { display: flex; }
@keyframes site-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.site-reel:hover .site-track, .site-reel:focus-within .site-track { animation-play-state: paused; }

.site-card {
  flex: none;
  width: 330px;
  margin: 0 11px;
  display: block;
  border-radius: var(--brand-r-md);
  overflow: hidden;
  border: 1px solid var(--brand-hairline);
  background: var(--brand-raised);
  box-shadow: var(--brand-shadow-md);
  transition: transform var(--brand-fast) var(--brand-ease),
              border-color var(--brand-fast) var(--brand-ease);
}
.site-card:hover { transform: translateY(-6px); border-color: #f88d0059; }
.site-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #191722;
  border-bottom: 1px solid #ffffff14;
}
.site-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff26; flex: none; }
.site-chrome b {
  flex: 1;
  margin-inline-start: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  background: #ffffff0d;
  font: 400 12px/1.6 Arial, sans-serif;
  color: #cec9dc;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-view { display: block; aspect-ratio: 1 / 1.62; overflow: hidden; background: var(--brand-ink); }
.site-view img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--brand-ease); }
/* با بردن نشانگر، بقیهٔ صفحه هم می‌غلتد — کل صفحهٔ نخست دیده می‌شود. */
.site-card:hover .site-view img { transform: translateY(calc(-1 * var(--travel, 0%))); transition: transform var(--roll, 12s) linear; }
.site-name {
  display: block;
  padding: 13px 15px;
  direction: rtl;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text);
  border-top: 1px solid var(--brand-hairline);
}

@media (max-width: 980px) {
  .service-story.story-web { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .story-web .story-copy { max-width: none; }
  .drift-wall { inset: 0; width: 100%; -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 50%, #000 30%, transparent 82%); mask-image: radial-gradient(ellipse 120% 90% at 50% 50%, #000 30%, transparent 82%); }
  .drift-grid { left: 50%; opacity: .12; }
  .drift-col { width: 190px; }
  .story-web .story-copy { max-width: none; }
}
@media (max-width: 700px) { .site-card { width: 250px; margin: 0 7px; } }
@media (prefers-reduced-motion: reduce) {
  .drift-run, .site-track { animation: none; }
  .site-reel { overflow-x: auto; }
}

/* ===========================================================================
   ۲ب. سکوی نمونه‌کار
   قاب مرورگر داخل خود فایل تصویری است، پس اینجا فقط نور، عمق و پیوند
   سایت زنده اضافه می‌شود. هیچ قاب دومی روی قاب اول نمی‌نشیند.
   =========================================================================== */
.work-stage {
  position: relative;
  margin: 0;
  padding: 0 0 46px;
  isolation: isolate;
}
.work-stage-glow {
  position: absolute;
  inset: 8% 4% 12% 4%;
  background: radial-gradient(ellipse at 50% 80%, #f88d0033, transparent 66%);
  filter: blur(26px);
  z-index: -1;
  pointer-events: none;
}
.work-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 750;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--brand-r-md);
  border: 1px solid var(--brand-hairline);
  box-shadow: var(--brand-shadow-lg);
  background: var(--brand-raised);
  transition: transform var(--brand-slow) var(--brand-ease),
              box-shadow var(--brand-slow) var(--brand-ease);
}
.work-card:hover .work-shot, .work-stage:hover .work-shot {
  transform: translateY(-5px) scale(1.006);
  box-shadow: 0 34px 80px #06050ca6;
}
.work-stage figcaption {
  position: absolute;
  inset: auto 0 4px auto;   /* پایین-راست؛ سمت چپ جای «مشاهده پروژه» است */
  margin: 0;
}
.live-external {
  /* cinematic.css این پیوند را position:absolute کرده بود. با آن، عنصر از
     جریان خارج می‌شد، figcaption به ۰×۰ می‌رسید و متن پیوند سه‌خطی
     می‌شکست و روی تصویر می‌افتاد. جایگاه را حالا figcaption تعیین می‌کند. */
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 11px;
  color: #ffc487;
  border: 1px solid #ffad4d3d;
  border-radius: 30px;
  padding: 9px 15px;
  background: #10121bee;
  direction: rtl;
  transition: border-color var(--brand-fast) var(--brand-ease),
              background var(--brand-fast) var(--brand-ease);
}
.live-external:hover { border-color: #ffad4d8a; background: #171a25f2; }
.live-external i { width: 6px; height: 6px; background: #69dbb8; border-radius: 50%; box-shadow: 0 0 9px #69dbb8; }

/* بقایای سیستم دستگاه زنده که دیگر رندر نمی‌شود. */
.live-composition, .device-atmosphere, .live-device, .device-viewport, .live-help { display: none !important; }

/* ===========================================================================
   ۲ج. گالری قهرمان صفحهٔ نخست
   قاب ۳۳۰×۳۵۰ تقریباً مربع بود و تصویر ۱۶:۱۰. حدود یک‌پنجم عرض هر سایت
   بریده می‌شد. اندازهٔ قاب حالا از نسبت خود تصویر می‌آید، پس چیزی
   بریده نمی‌شود. چرخش ملایم می‌ماند — عمق می‌سازد بی‌آنکه محتوا را بخورد.
   =========================================================================== */
.hero-showcase {
  height: auto;
  padding: 34px 0 60px;
  /* لبهٔ چپ با کنارهٔ صفحه بریده می‌شد و کارت اول نصفه می‌ماند — همان
     چیزی که باید حذف می‌شد. حالا هر دو طرف محو می‌شوند، پس ادامهٔ نوار
     عمدی به نظر می‌رسد نه بریده. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 84%, transparent);
}
.motion-toggle {
  bottom: 8px;
  right: auto;
  left: 34px;
  background: #191a29e6;
  border-color: #ffc78938;
  backdrop-filter: blur(8px);
}
.hero-film { gap: 32px; align-items: center; }
.hero-film > a {
  width: 520px;
  height: auto;
  border-radius: var(--brand-r-md);
  border: 1px solid var(--brand-hairline);
  box-shadow: var(--brand-shadow-lg);
  transform: rotate(-3.5deg);
  transition: transform var(--brand-slow) var(--brand-ease);
}
.hero-film > a:nth-child(even) { transform: rotate(2.5deg); margin-top: 44px; }
.hero-film > a:hover { transform: rotate(0deg) translateY(-6px); }
.hero-film img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 750;
  object-fit: cover;
  object-position: top center;
}
.hero-film span { background: linear-gradient(transparent, #06050cf0); padding: 30px 14px 12px; }
@media (max-width: 900px) { .hero-film > a { width: 330px; } }

/* ===========================================================================
   ۲د. قاب نمونه‌کار — اسکرین‌شات تمام‌صفحهٔ ثابت
   نسخهٔ قابل‌اسکرول کنار رفت: روی بعضی سایت‌ها تمیز درنمی‌آمد و چون فقط
   بالای صفحه دیده می‌شد، تصویرِ نیمه‌بارگذاری‌شده را هم پنهان می‌کرد.
   حالا کل صفحه یک‌جا هست؛ هر نقصی فوری پیداست.
   =========================================================================== */
.work-shots {
  position: relative;
  margin: 0;
  padding: 0 0 50px;
  isolation: isolate;
  direction: ltr;
}
.shot-glow {
  position: absolute;
  inset: 4% 5% 12% 5%;
  background: radial-gradient(ellipse at 50% 26%, #f88d0030, transparent 64%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

.shot-desktop {
  width: 88%;
  border-radius: var(--brand-r-md);
  overflow: hidden;
  border: 1px solid var(--brand-hairline);
  background: var(--brand-raised);
  box-shadow: var(--brand-shadow-lg);
  /* صفحهٔ کامل خیلی بلند است. کارت در ارتفاع معقولی بسته می‌شود و
     پایینش محو می‌شود تا پیدا باشد صفحه ادامه دارد — نه اینکه بریده
     شده باشد. تصویر کامل در فایل هست و صفحهٔ نمونه‌کار نشانش می‌دهد. */
  max-height: 560px;
  -webkit-mask-image: linear-gradient(#000 78%, #000a 92%, transparent);
  mask-image: linear-gradient(#000 78%, #000a 92%, transparent);
}
.shot-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: #191722;
  border-bottom: 1px solid #ffffff14;
}
.shot-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff26; flex: none; }
.shot-chrome span {
  flex: 1;
  margin-inline-start: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #ffffff0d;
  font: 13px/1.6 Arial, sans-serif;
  color: #cec9dc;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot-desktop img { display: block; width: 100%; height: auto; }

.shot-phone {
  position: absolute;
  bottom: 32px;
  right: 0;
  width: 25%;
  aspect-ratio: 9 / 19.5;
  max-width: 180px;
  padding: 7px;
  border-radius: 26px;
  background: linear-gradient(150deg, #3a3946, #17161f 45%, #35333f);
  box-shadow: var(--brand-shadow-lg), 0 0 0 1px #ffffff1a;
  overflow: hidden;
  max-height: none;
  -webkit-mask-image: linear-gradient(#000 80%, #000a 93%, transparent);
  mask-image: linear-gradient(#000 80%, #000a 93%, transparent);
}
.shot-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 19px; }
.shot-phone-bar {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 3px;
  border-radius: 3px;
  background: #ffffff40;
}

.work-shots figcaption { position: absolute; inset: auto 0 4px auto; margin: 0; }

@media (max-width: 820px) {
  .shot-desktop { width: 100%; max-height: 330px; }
  .shot-phone { position: static; width: 138px; margin: 14px 0 0 auto; max-height: none; }
  .work-shots figcaption { position: static; margin-top: 14px; }
  .work-shots { padding-bottom: 0; }
}

/* بقایای نسخهٔ قابل‌اسکرول که دیگر رندر نمی‌شود. */
.live-composition, .device-atmosphere, .live-device, .device-viewport, .live-help,
.live-stage, .live-pane, .live-desktop, .live-phone, .live-hint { display: none !important; }

/* ===========================================================================
   ۳. تیمار یکسان تصویر
   هر تصویری که سایت مشتری را نشان می‌دهد از یک قانون پیروی می‌کند:
   نسبت ۱۶:۱۰، گوشهٔ یکسان، خط موی یکسان.
   =========================================================================== */
.hero-film img, .work-visual img.brand-mockup, .brand-mockup {
  aspect-ratio: 1200 / 750;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--brand-r-md);
  background: var(--brand-raised);
}

/* ===========================================================================
   ۴. دیوار نشان مشتری‌ها
   نشان‌ها از پیش تک‌رنگ و هم‌وزن شده‌اند. اینجا فقط فاصله و شفافیت
   یکنواخت می‌شود تا هیچ نشانی از بقیه فریاد نزند.
   =========================================================================== */
/* دیوار برندها.
   نسخهٔ قبلی با scrollLeft و requestAnimationFrame حرکت می‌کرد و در
   عمل ساکن می‌ماند؛ در چیدمان راست‌به‌چپ علامت scrollLeft برعکس است و
   شرط بازگشت هیچ‌وقت درست عمل نمی‌کرد. حالا همان نوار CSS ای است که
   جاهای دیگر سایت کار می‌کند: دو نسخهٔ هم‌عرض و حرکت تا منفی پنجاه درصد. */
.brand-wall {
  /* در سند راست‌به‌چپ، flex آیتم‌ها را از راست می‌چیند و نوار به‌جای
     عبور از جلوی چشم، از صفحه دور می‌شد — فقط دو نشان اول دیده می‌شد.
     جهت چیدمان چپ‌به‌راست می‌شود؛ متن فارسیِ داخل سلول جهت خودش را
     جداگانه می‌گیرد. */
  direction: ltr;
  overflow: clip;
  padding: 10px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brand-track { display: flex; width: max-content; animation: brand-slide 52s linear infinite; will-change: transform; }
.brand-set { display: flex; align-items: center; }
@keyframes brand-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.brand-wall:hover .brand-track, .brand-wall:focus-within .brand-track,
.partners.is-paused .brand-track { animation-play-state: paused; }

.brand-cell {
  flex: none;
  display: grid;
  place-items: center;
  width: 268px;
  height: 132px;
  margin: 0 9px;
  padding: 18px 22px;
  /* کاشی روشن زیر نشان.
     نشان‌ها حالا رنگی‌اند و رنگ اصلی هر برند حفظ شده، ولی بعضی‌شان
     مشکی یا طلایی روشن‌اند و روی زمینهٔ تیرهٔ سایت ناپدید می‌شوند.
     کاشی سفید، هم کنتراست را تضمین می‌کند هم به دیوار ریتم می‌دهد. */
  border-radius: var(--brand-r-md);
  border: 1px solid #ffffff1f;
  box-shadow: var(--brand-shadow-sm);
  transition: transform var(--brand-fast) var(--brand-ease),
              box-shadow var(--brand-fast) var(--brand-ease);
}
.brand-cell:hover { transform: translateY(-4px); box-shadow: var(--brand-shadow-md); }
/* نشان تیره روی کاشی روشن، نشان روشن روی کاشی تیره. تصمیم برای هر
   نشان جداگانه و بر پایهٔ روشنایی خودش گرفته می‌شود. */
.brand-tone-dark { background: #f6f5f8; }
.brand-tone-light { background: #14121f; border-color: #ffffff2b; }
.brand-cell img {
  filter: none !important;
  mix-blend-mode: normal !important;
  width: 100% !important;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}

/* شریکی که فایل نشان ندارد، به‌شکل واژه‌نشان می‌آید تا از فهرست نیفتد. */
.brand-cell-name { direction: rtl; }
.brand-cell-name { background: #f6f5f8; }
.brand-cell-name b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: #2b2f3f;
  text-align: center;
  line-height: 1.6;
}

.brand-motion {
  display: block;
  margin: 18px auto 0;
  background: #ffffff0a;
  border: 1px solid var(--brand-hairline);
  color: var(--brand-text);
  border-radius: 30px;
  padding: 9px 20px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.brand-motion:hover { background: #ffffff16; }

@media (max-width: 700px) { .brand-cell { width: 196px; height: 104px; padding: 14px 16px; margin: 0 6px; } .brand-cell-name b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } .brand-wall { overflow-x: auto; } }

/* ===========================================================================
   ۴ب. نشانه‌ها و تراشه‌ها
   آیکن خدمات، فیلتر فعال و پیوند دایره‌ای همه بنفش بودند در حالی که نشان
   برند نارنجی است. حالا هر عنصری که «کنش» یا «انتخاب فعلی» را نشان
   می‌دهد کهرباست و بقیه خنثی می‌مانند. یعنی رنگ دیگر تزئین نیست، معنا دارد.
   =========================================================================== */
.service-icon {
  border: 1px solid #f88d0033;
  background: linear-gradient(140deg, #f88d001f, #f88d0008);
  color: var(--brand-amber-lift);
  box-shadow: inset 0 1px #ffd7a52e, 0 8px 24px #06050c4d;
}
html[data-theme=light] .service-icon { color: #9c5a0d; background: #f88d0018; border-color: #f88d0038; }

.round-link {
  border-color: var(--brand-hairline);
  color: var(--brand-muted);
  transition: color var(--brand-fast) var(--brand-ease),
              border-color var(--brand-fast) var(--brand-ease),
              transform var(--brand-fast) var(--brand-ease);
}
a:hover > .round-link, .work-card:hover .round-link, .round-link:hover {
  color: var(--brand-amber-lift);
  border-color: #f88d0059;
  transform: translateY(-2px);
}

.text-link { color: #cfc6dd; transition: color var(--brand-fast) var(--brand-ease); }
.text-link:hover { color: var(--brand-amber-lift); }

/* تب‌های ورود: حالت فعال کهربای رقیق روی زمینهٔ تیره بود و قهوه‌ای
   گل‌آلود درمی‌آمد — نه انتخاب‌شده به نظر می‌رسید نه خاموش. همان قاعدهٔ
   تراشهٔ فیلتر اینجا هم برقرار است: انتخاب‌شده پُر و خوانا. */
.auth-tabs button {
  border-radius: var(--brand-r-sm);
  transition: background var(--brand-fast) var(--brand-ease),
              border-color var(--brand-fast) var(--brand-ease);
}
.auth-tabs button:hover { background: #ffffff0f; }
.auth-tabs button.active {
  background: linear-gradient(115deg, var(--brand-amber-lift), var(--brand-amber-deep));
  border-color: var(--brand-amber-lift);
  color: var(--brand-amber-ink);
  font-weight: 700;
}
html[data-theme=light] .auth-tabs button.active { color: var(--brand-amber-ink); }

/* تراشهٔ فیلتر: انتخاب فعلی کهرباست، بقیه فقط خط مو. */
.filters button[aria-pressed=true], .filters .active,
.filter-row .active, [data-filter].active {
  background: linear-gradient(115deg, var(--brand-amber-lift), var(--brand-amber-deep)) !important;
  border-color: var(--brand-amber-lift) !important;
  color: var(--brand-amber-ink) !important;
  font-weight: 700;
}

/* ===========================================================================
   ۴ج. کارت مقاله
   جلدها تصویرسازی تختِ روشن‌اند و کنار رابط تیره جیغ می‌زنند. یک پردهٔ
   نازک آن‌ها را عقب می‌برد؛ روی هاور رنگ کامل برمی‌گردد.
   =========================================================================== */
.blog-cover { position: relative; display: block; overflow: hidden; border-radius: var(--brand-r-md) var(--brand-r-md) 0 0; }
.blog-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 750;
  object-fit: cover;
  filter: saturate(.84) brightness(.9);
  transition: filter var(--brand-slow) var(--brand-ease),
              transform var(--brand-slow) var(--brand-ease);
}
.blog-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, #0a091100, #0a091159);
  pointer-events: none;
}
.blog-card:hover .blog-cover img { filter: none; transform: scale(1.03); }
.detail-cover { border-radius: var(--brand-r-lg); aspect-ratio: 1200 / 750; object-fit: cover; width: 100%; height: auto; }

/* ===========================================================================
   ۴د. مگا منو
   نسخهٔ قبلی <details> بود: فقط با کلیک باز می‌شد و همان کلیک را نمی‌شد
   هم‌زمان برای رفتن به صفحهٔ خدمات به کار برد. پس‌زمینه‌اش هم ۹۶٪ مات
   بود و عنوان درشت قهرمان از پشتش رد می‌شد. و آیتم‌ها هیچ مرزی نداشتند،
   پس عنوان و توضیح در هم می‌رفتند.
   =========================================================================== */
.mega-menu { display: inline-flex; align-items: center; gap: 4px; }
.site-header .nav { position: relative; }

.mega-trigger {
  padding: 8px 2px;
  transition: color var(--brand-fast) var(--brand-ease);
}
.mega-toggle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  border-radius: 50%;
  cursor: pointer;
}
.mega-toggle i {
  width: 7px; height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--brand-fast) var(--brand-ease);
}
.mega-menu.is-open .mega-trigger { color: var(--brand-amber-lift); }
.mega-menu.is-open .mega-toggle i { transform: rotate(-135deg) translate(-2px, -2px); }

.mega-panel {
  /* premium.css اینجا display:grid با چهار ستون می‌گذارد که چیدمان تازه
     را به هم می‌زند؛ ستون‌بندی حالا کار .mega-cols است. */
  display: block;
  position: absolute;
  top: calc(100% - 8px);
  right: 0;
  left: auto;
  width: min(980px, 100%);
  padding: 24px;
  background: #14121f;             /* کاملاً مات */
  border: 1px solid var(--brand-hairline-strong);
  border-radius: var(--brand-r-lg);
  box-shadow: var(--brand-shadow-lg), 0 0 0 1px #f88d0014;
  z-index: 60;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s var(--brand-ease), transform .18s var(--brand-ease);
}
.mega-menu.is-open .mega-panel { opacity: 1; transform: translateY(0); }
/* premium.css روی .mega-panel مقدار display:grid دارد و هر اعلان display
   در شیوه‌نامهٔ نویسنده، خاصیت hidden را بی‌اثر می‌کند. نتیجه: پنلِ بسته
   از جریان خارج نمی‌شد و نامرئی روی محتوای زیرش می‌نشست — دیوار برندها
   کاملاً خالی به نظر می‌رسید چون پنل جلویش بود. */
.mega-panel[hidden] { display: none !important; }
html[data-theme=light] .mega-panel { background: #fff; border-color: #2427381f; }

.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; align-items: start; }
.mega-col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  padding: 0 10px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-amber-lift);
  border-bottom: 1px solid var(--brand-hairline);
}
.mega-col-icon { width: 17px; height: 17px; flex: none; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }

/* هر آیتم یک بلوک مستقل با مرز روشن. پیش از این عنوان و توضیح پشت هم
   می‌آمدند و ستون یک تودهٔ متن یکدست به نظر می‌رسید. */
.mega-col li + li { border-top: 1px solid #ffffff0f; }
html[data-theme=light] .mega-col li + li { border-top-color: #24273812; }
.mega-panel .mega-col a {
  display: block;
  padding: 11px 10px;
  border-radius: var(--brand-r-sm);
  transition: background var(--brand-fast) var(--brand-ease);
}
.mega-panel .mega-col a:hover { background: #ffffff0f; }
html[data-theme=light] .mega-panel .mega-col a:hover { background: #2427380a; }
.mega-panel b { display: block; font-size: 15px; font-weight: 700; line-height: 1.7; }
.mega-panel small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.85;
  color: var(--brand-muted);
  margin-top: 2px;
}

.mega-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-hairline);
}
.mega-foot .btn { margin: 0; min-height: 48px; gap: 14px; white-space: nowrap; }
.mega-link { font-size: 14px; color: var(--brand-muted); }
.mega-link:hover { color: var(--brand-amber-lift); }

@media (max-width: 980px) {
  /* روی صفحهٔ کوچک منوی همبرگری کار را می‌کند؛ پنل عریض فقط مزاحم است. */
  .mega-panel { display: none !important; }
  .mega-toggle { display: none; }
}

/* ===========================================================================
   ۵. حرکت — سازگار با ترجیح کاربر
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* پرش به محتوا — پیوند از قبل در HTML بود ولی سفید ساده و بی‌ربط به
   برند. حالا همان رنگ کنش را می‌گیرد. */
.skip {
  background: var(--brand-amber);
  color: var(--brand-amber-ink);
  padding: 12px 22px;
  border-radius: 0 0 var(--brand-r-md) var(--brand-r-md);
  font-weight: 700;
  transition: top var(--brand-fast) var(--brand-ease);
}

/* ===========================================================================
   ۶. نظر مشتری‌ها
   نوار افقی از نقل‌قول‌ها. مثل بقیهٔ نوارهای سایت direction:ltr می‌گیرد
   چون در سند راست‌به‌چپ، flex از راست می‌چیند و نوار به‌جای عبور از
   جلوی چشم از صفحه دور می‌شود؛ متن هر کارت جهت خودش را پس می‌گیرد.
   =========================================================================== */
.voices { padding-top: 30px; }
.voice-wall {
  direction: ltr;
  overflow: clip;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.voice-track { display: flex; width: max-content; animation: voice-slide 64s linear infinite; will-change: transform; }
.voice-set { display: flex; }
@keyframes voice-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.voice-wall:hover .voice-track, .voice-wall:focus-within .voice-track { animation-play-state: paused; }

.voice-card {
  direction: rtl;
  flex: none;
  width: 420px;
  margin: 0 11px;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--brand-r-lg);
  border: 1px solid var(--brand-hairline);
  background: linear-gradient(150deg, #17141f, #100e18);
  box-shadow: var(--brand-shadow-md);
  transition: border-color var(--brand-fast) var(--brand-ease),
              transform var(--brand-fast) var(--brand-ease);
}
.voice-card:hover { border-color: #f88d0047; transform: translateY(-4px); }
html[data-theme=light] .voice-card { background: #fff; border-color: #2427381a; }

.voice-card blockquote {
  position: relative;
  margin: 0;
  flex: 1;
  font-size: 15px;
  line-height: 2.1;
  color: var(--brand-text);
}
.voice-card blockquote::before {
  content: "”";
  display: block;
  font: 800 46px/0.8 Georgia, serif;
  color: var(--brand-amber);
  opacity: .55;
  margin-bottom: 10px;
}
html[data-theme=light] .voice-card blockquote { color: #242738; }

.voice-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--brand-hairline);
}
.voice-logo { width: 96px; height: 38px; object-fit: contain; opacity: .8; flex: none; }
html[data-theme=light] .voice-logo { filter: invert(1) brightness(.4); }
.voice-initials {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f88d0033, #f88d000f);
  border: 1px solid #f88d0040;
  color: var(--brand-amber-lift);
  font-weight: 800;
  font-size: 15px;
}
.voice-who { flex: 1; min-width: 0; }
.voice-who b { display: block; font-size: 15px; }
.voice-who small { display: block; font-size: 13px; color: var(--brand-muted); margin-top: 3px; }
.voice-link {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--brand-hairline);
  color: var(--brand-muted);
  transition: color var(--brand-fast) var(--brand-ease), border-color var(--brand-fast) var(--brand-ease);
}
.voice-link:hover { color: var(--brand-amber-lift); border-color: #f88d0059; }

@media (max-width: 700px) { .voice-card { width: 300px; margin: 0 7px; padding: 22px 20px 18px; } }
@media (prefers-reduced-motion: reduce) { .voice-track { animation: none; } .voice-wall { overflow-x: auto; } }

/* ===========================================================================
   ۷. کلید انتخاب دوره پرداخت
   فقط برای خدمتی که بیش از یک دوره دارد ساخته می‌شود؛ خدمت یک‌بارمصرف
   اصلاً این عنصر را در HTML نمی‌گیرد، چون انتخابی وجود ندارد.
   =========================================================================== */
.period-switch {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin: 4px 0 18px;
  border-radius: 999px;
  border: 1px solid var(--brand-hairline);
  background: #ffffff08;
}
.period-opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--brand-muted);
  font: inherit;
  cursor: pointer;
  transition: background var(--brand-fast) var(--brand-ease),
              color var(--brand-fast) var(--brand-ease);
}
.period-opt span { font-size: 13px; }
.period-opt b { font-size: 15px; font-weight: 800; color: var(--brand-text); }
.period-opt:hover { background: #ffffff0f; }
.period-opt.is-on {
  background: linear-gradient(115deg, var(--brand-amber-lift), var(--brand-amber-deep));
  color: var(--brand-amber-ink);
}
.period-opt.is-on b { color: var(--brand-amber-ink); }
html[data-theme=light] .period-switch { background: #24273808; border-color: #24273826; }
html[data-theme=light] .period-opt b { color: #242738; }

.hint { font-size: 13px; color: var(--brand-muted); line-height: 1.9; margin: 8px 0 0; }

/* ===========================================================================
   ۸. صفحهٔ درباره ما
   عددها از دیتابیس می‌آیند، پس بخش «آمار» ادعا نیست؛ شمارش است.
   =========================================================================== */
.about-facts { padding-top: 20px; }
.fact-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fact {
  padding: 26px 22px;
  border-radius: var(--brand-r-lg);
  border: 1px solid var(--brand-hairline);
  background: linear-gradient(150deg, #17141f, #100e18);
  text-align: center;
}
html[data-theme=light] .fact { background: #fff; border-color: #2427381a; }
.fact b {
  display: block;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.5px;
  background: linear-gradient(140deg, var(--brand-amber-lift), var(--brand-amber-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fact span { display: block; margin-top: 8px; font-size: 14px; color: var(--brand-muted); }
.fact-note { margin: 16px 0 0; font-size: 13px; color: var(--brand-faint); text-align: center; }

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.about-card {
  padding: 28px 26px;
  border-radius: var(--brand-r-lg);
  border: 1px solid var(--brand-hairline);
  background: linear-gradient(150deg, #17141f, #100e18);
  transition: border-color var(--brand-fast) var(--brand-ease);
}
.about-card:hover { border-color: #f88d0047; }
html[data-theme=light] .about-card { background: #fff; border-color: #2427381a; }
.about-card-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid #f88d0033;
  background: linear-gradient(140deg, #f88d001f, #f88d0008);
  color: var(--brand-amber-lift);
  margin-bottom: 16px;
}
.about-card-icon svg { width: 20px; height: 20px; }
.about-card h3 { font-size: 17px; margin-bottom: 8px; }
.about-card p { font-size: 14px; margin-bottom: 14px; }
.about-card ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--brand-hairline); }
.about-card li { border-bottom: 1px solid #ffffff0d; }
html[data-theme=light] .about-card li { border-bottom-color: #24273812; }
.about-card li a {
  display: block;
  padding: 10px 2px;
  font-size: 14px;
  color: var(--brand-muted);
  transition: color var(--brand-fast) var(--brand-ease), padding var(--brand-fast) var(--brand-ease);
}
.about-card li a:hover { color: var(--brand-amber-lift); padding-inline-start: 6px; }

.about-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.about-steps li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px 4px;
  border-bottom: 1px solid var(--brand-hairline);
}
.about-steps li:first-child { border-top: 1px solid var(--brand-hairline); }
.about-steps b {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-amber);
  padding-top: 3px;
  min-width: 34px;
}
.about-steps h3 { font-size: 17px; margin-bottom: 6px; }
.about-steps p { font-size: 14px; margin: 0; max-width: 62ch; }

/* Mobile navigation drawer */
.mobile-menu-head,.mobile-menu-foot,.menu-backdrop{display:none}
@media(max-width:850px){
  body.menu-open{overflow:hidden}
  .site-header{z-index:100}
  .nav nav,.nav nav.open{display:flex;position:fixed;inset:0 0 0 auto;width:min(88vw,390px);height:100dvh;padding:22px 20px 28px;flex-direction:column;align-items:stretch;gap:5px;overflow-y:auto;background:linear-gradient(165deg,#191421 0%,#0a0910 78%);border:0;border-left:1px solid #ffffff1f;border-radius:0;box-shadow:-30px 0 80px #000b;z-index:102;transform:translateX(105%);visibility:hidden;transition:transform .36s cubic-bezier(.2,.8,.2,1),visibility .36s}
  .nav nav.open{transform:translateX(0);visibility:visible}
  .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #ffffff17;color:#ffb55d;font-size:14px;font-weight:800}
  .menu-close{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff24;border-radius:50%;background:#ffffff08;color:#fff;font:300 28px/1 Arial;cursor:pointer}
  .nav nav>a,.nav nav>.mega-menu>.mega-trigger{display:flex;align-items:center;min-height:58px;padding:11px 14px;border-bottom:1px solid #ffffff0f;color:#f3eef8;font-size:17px;font-weight:750}
  .nav nav>a:after,.nav nav>.mega-menu>.mega-trigger:after{content:'↗';margin-right:auto;color:#f88d00;font:16px Arial;transform:rotate(-45deg)}
  .nav nav>.mega-menu{display:block}.nav nav>.mega-menu>.mega-trigger{width:100%}
  .mobile-menu-foot{display:grid;gap:10px;margin-top:auto;padding-top:24px}
  .mobile-menu-foot>a:first-child{display:block;padding:12px 14px;text-align:center;border:1px solid #ffffff1c;border-radius:12px;color:#fff}
  .mobile-menu-foot .btn{display:flex;justify-content:center;color:#211306;min-height:52px}
  .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;border:0;background:#020207b8;backdrop-filter:blur(7px);z-index:101;animation:menu-fade .25s both}
  html[data-theme=light] .nav nav{background:linear-gradient(165deg,#fff 0%,#f5f0e9 100%);border-left-color:#261c1430;box-shadow:-30px 0 80px #33271833}
  html[data-theme=light] .nav nav>a,html[data-theme=light] .nav nav>.mega-menu>.mega-trigger,html[data-theme=light] .mobile-menu-foot>a:first-child,html[data-theme=light] .menu-close{color:#211a16;border-color:#261c1424}
}

/* Two-view portfolio slider: desktop and mobile share one compact stage. */
.work-shots.has-device-slider{width:100%;padding-bottom:58px;overflow:hidden}
.device-slider-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;touch-action:pan-y pinch-zoom;cursor:grab;border-radius:18px}
.device-slider-viewport::-webkit-scrollbar{display:none}
.device-slider-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.device-slider-track{display:flex;width:200%;align-items:stretch}
.device-slide{position:relative;flex:0 0 50%;height:clamp(330px,34vw,500px);display:grid;place-items:center;padding:16px 20px 34px;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.device-slide-desktop .shot-desktop{width:min(94%,760px);height:100%;max-height:none;mask-image:linear-gradient(#000 76%,#000b 91%,transparent);-webkit-mask-image:linear-gradient(#000 76%,#000b 91%,transparent)}
.device-slide-desktop .shot-desktop img{width:100%;height:auto;min-height:calc(100% - 38px);object-fit:cover;object-position:top center}
.device-slide-mobile .shot-phone{position:relative;inset:auto;width:auto;height:94%;max-width:none;max-height:none;margin:0;aspect-ratio:9/19.5;mask-image:linear-gradient(#000 82%,#000b 94%,transparent);-webkit-mask-image:linear-gradient(#000 82%,#000b 94%,transparent)}
.device-slide-mobile .shot-phone img{width:100%;height:100%;object-fit:cover;object-position:top center}
.device-slide-label{position:absolute;inset:auto auto 7px 50%;transform:translateX(-50%);padding:5px 12px;border:1px solid #ffffff1a;border-radius:20px;background:#0b0b12cc;backdrop-filter:blur(10px);color:#c9c2d5;font-size:12px;white-space:nowrap}
.device-slider-nav{position:absolute;left:50%;bottom:13px;z-index:4;transform:translateX(-50%);display:flex;align-items:center;gap:12px;direction:ltr}
.device-slider-nav>button{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid #ffffff22;border-radius:50%;background:#11111bdd;color:#fff;font:22px/1 Arial;cursor:pointer;transition:.2s}
.device-slider-nav>button:hover{border-color:#f88d0088;background:#f88d0018}
.device-slider-dots{display:flex;align-items:center;gap:7px}
.device-slider-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#ffffff35;cursor:pointer;transition:.25s}
.device-slider-dots button.is-active{width:22px;background:#f6a33f;box-shadow:0 0 12px #f88d0070}
.work-shots.has-device-slider figcaption{right:0;bottom:9px}
@media(max-width:820px){.work-shots.has-device-slider{padding-bottom:54px}.device-slide{height:310px;padding:10px 8px 31px}.device-slide-desktop .shot-desktop{width:96%;max-height:none}.device-slide-mobile .shot-phone{position:relative;width:auto;height:95%;margin:0}.work-shots.has-device-slider figcaption{display:none}.device-slider-nav{bottom:10px}}
@media(prefers-reduced-motion:reduce){.device-slider-viewport{scroll-behavior:auto}}
@keyframes menu-fade{from{opacity:0}to{opacity:1}}

@media (max-width: 900px) {
  .fact-row { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-steps li { gap: 14px; padding: 20px 2px; }
}