:root{--bg:#111e32;--panel:#1a2d45;--panel2:#21364f;--line:#3a4d67;--text:#f4f7fb;--muted:#b4c3d7;--cyan:#65dcf1;--green:#72dfbd;--purple:#6d58c9;--orange:#ff936d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{touch-action:manipulation}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.15}button{cursor:pointer}.container{width:min(1200px,calc(100% - 48px));margin:auto}.skip{position:fixed;top:-100px;left:15px;background:var(--cyan);color:#092331;padding:10px;z-index:99}.skip:focus{top:10px}.site-header{position:sticky;top:0;z-index:50;background:#111e32f2;border-bottom:1px solid #30425a;backdrop-filter:blur(15px)}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;font-size:22px;letter-spacing:-.8px}.brand>span{display:grid;place-items:center;width:39px;height:39px;margin-right:12px;border:1px solid #31536b;background:#17324a;border-radius:10px;color:var(--cyan);font:700 17px monospace}.brand b{margin-left:0}.brand i{color:var(--cyan);font-style:normal}.nav-wrap nav{display:flex;align-items:center;gap:29px}.nav-wrap nav>a{font-size:13px;color:#bdc9da}.nav-wrap nav>a:hover{color:var(--cyan)}.nav-cta{border:1px solid #3a4d67;border-radius:8px;padding:10px 17px;color:white!important}.menu{display:none}.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:55px;align-items:center;padding-block:90px 95px}.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:1.7px;font-weight:700;margin-bottom:20px}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:8px}.hero h1{font-size:clamp(50px,5.2vw,71px);letter-spacing:-3.5px}.hero h1 span,.final h2 span{color:var(--cyan)}.lead{max-width:500px;color:#c0cce0;font-size:17px;line-height:1.8;margin-top:25px}.actions{display:flex;gap:12px;margin-block:30px 25px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:49px;padding:12px 18px;border-radius:8px;font-size:13px;font-weight:700;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--cyan);color:#082633}.ghost{border:1px solid #3a4d67;background:#1a2a40}.trust{display:flex;flex-wrap:wrap;gap:8px 21px}.trust span{font-size:11px;color:#aebdd0}.trust span::first-letter{color:var(--cyan)}.hero-art{position:relative}.hero-art:before{content:"";position:absolute;inset:-50px;background:radial-gradient(ellipse,#25627c25,transparent 70%);z-index:-1}.art-label{display:flex;justify-content:space-between;color:#879bb5;font-size:9px;letter-spacing:1.3px;margin-bottom:13px}.art-label code{color:#68cfe2}.mini-window{background:#1b3049;border:1px solid #405671;border-radius:12px;overflow:hidden;box-shadow:0 25px 50px #0004}.mini-window>header{height:39px;display:flex;align-items:center;gap:5px;padding:0 13px;background:#233a55;border-bottom:1px solid #3c5069}.mini-window>header i{width:6px;height:6px;border-radius:50%;background:#e18a85}.mini-window>header i:nth-child(2){background:#e0bc70}.mini-window>header i:nth-child(3){background:#69c3aa}.mini-window>header span{margin:auto;font-size:8px;color:#9eafc3}.mini-window>header b{font-size:7px;color:#84dceb;border:1px solid #3c6579;padding:3px 6px;border-radius:4px}.mini-body{display:grid;grid-template-columns:105px 1fr;min-height:335px}.mini-body aside{padding:19px 10px;display:flex;flex-direction:column;gap:8px;border-right:1px solid #3a4d64}.mini-body aside strong{color:var(--cyan);font-size:16px;margin:0 5px 18px}.mini-body aside small{color:#fff}.mini-body aside span{font-size:9px;color:#92a5bc;padding:7px}.mini-body aside .on{background:#20516a;color:#89e2f0;border-radius:5px}.mini-body section{padding:25px 18px}.mini-body section>p{font-size:7px;letter-spacing:1px;color:#8da0b8}.mini-body section h3{font-size:17px;margin-top:7px}.mini-body section>small{color:#93a6bc;font-size:8px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.mini-stats article{padding:10px;background:#253e59;border:1px solid #38506a;border-radius:6px}.mini-stats span{font-size:8px;color:#a6b7c9;display:block}.mini-stats b{font-size:25px}.mini-chart{background:#1c314a;border:1px solid #344b65;border-radius:6px;padding:12px;margin-top:11px}.mini-chart>strong{font-size:9px}.mini-chart>div{height:115px;display:flex;gap:11px;align-items:flex-end;background:repeating-linear-gradient(to top,transparent 0,transparent 26px,#34485f 27px)}.mini-chart i{flex:1;background:linear-gradient(#6ce1f3,#398bc8);border-radius:3px 3px 0 0}.float-price{position:absolute;right:-12px;bottom:-20px;display:flex;align-items:center;gap:10px;padding:11px 16px;background:#233b51;border:1px solid #49627a;border-radius:9px;box-shadow:0 12px 25px #0005}.float-price>span{display:grid;place-items:center;width:32px;height:32px;background:#2b6170;color:#8ee8ed;border-radius:7px}.float-price small{font-size:8px;color:#a8b9ca}.float-price b{display:block;color:#fff;font-size:15px}.audience{background:#18293f;border-block:1px solid #30445e}.audience>.container{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:25px}.audience small{max-width:120px;color:#8ca0ba;font-size:9px;letter-spacing:1.2px}.audience b{font-size:13px}.audience i{width:4px;height:4px;border-radius:50%;background:#58708a}.section{padding-block:95px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:36px}.section-head>p{max-width:370px;color:var(--muted);font-size:14px;line-height:1.8}.section .eyebrow,.center .eyebrow{margin-bottom:15px}h2{font-size:clamp(32px,3.3vw,44px);letter-spacing:-1.5px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.service-grid article{padding:22px 19px;background:#1b2d45;border:1px solid #354a65;border-radius:10px;transition:.2s}.service-grid article:hover{transform:translateY(-3px);border-color:#5b8298}.service-grid svg{color:#71d5e8;margin-bottom:17px}.service-grid h3{font-size:14px}.service-grid p{color:#b4c5d9;font-size:11px;margin-top:7px}.note{text-align:center;color:var(--muted);font-size:13px;margin-top:24px}.pricing,.process{background:#18293f;border-block:1px solid #30445e}.center{text-align:center;max-width:720px;margin:0 auto 42px}.center .eyebrow{justify-content:center}.center h2 span{color:#9fb0c6}.center>p:last-child{color:var(--muted);font-size:14px;margin-top:16px}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.price-grid>article{display:flex;flex-direction:column;padding:26px;background:#20334c;border:1px solid #405570;border-radius:14px}.price-grid>article.featured{background:linear-gradient(155deg,#1d4960,#20364f 65%);border-color:#62cade}.plan-tag{display:flex;align-items:center;gap:9px;color:#a2b3c8;font-size:8px;letter-spacing:1px;margin-bottom:23px}.plan-tag b{display:grid;place-items:center;width:27px;height:27px;border:1px solid #4a6079;border-radius:5px;color:#89dceb;font:11px monospace}.price-grid h3{font-size:21px;margin-bottom:18px}.price-grid>article>small{font-size:11px;color:#a9bbcf}.price-grid .price{font-size:39px;line-height:1.2;letter-spacing:-1px}.price-grid .price i{font-size:23px;font-style:normal}.custom-price{font-size:31px;line-height:1.25}.price-grid>article>p:not(.source){color:var(--muted);font-size:13px;line-height:1.8;margin-top:18px;min-height:92px}.payment{display:flex;align-items:center;gap:7px;padding-block:12px;margin-block:18px 22px;border-block:1px solid #40556e;color:#c8e9ef;font-size:11px}.payment svg{width:16px}.price-grid h4{font-size:11px;color:#b3c1d3;font-weight:500}.price-grid ul{list-style:none;padding:0;margin:14px 0 20px}.price-grid li{font-size:13px;margin:9px 0}.price-grid li:before{content:"✓";color:var(--cyan);margin-right:9px}.source{font-size:11px!important;color:#aebed1;min-height:0!important;margin:0 0 19px!important}.price-grid .btn{margin-top:auto}.price-grid details{font-size:11px;border:1px solid #496078;border-radius:7px;margin-bottom:20px}.price-grid summary{padding:9px;display:flex;justify-content:space-between;list-style:none;cursor:pointer}.price-grid details p{padding:0 9px 10px;color:#b6c5d9}.price-note{text-align:center;color:#a8b9cd;font-size:11px;margin-top:23px}.hosting{display:grid;grid-template-columns:1fr 1.1fr;gap:75px;padding-block:68px;border-bottom:1px solid #34455d}.hosting>div:first-child>svg{width:42px;height:42px;padding:9px;color:var(--cyan);background:#183a50;border:1px solid #326279;border-radius:9px;margin-bottom:19px}.hosting h2{font-size:29px}.hosting>div:first-child>p:last-child{color:var(--muted);font-size:13px;margin-top:13px;max-width:390px}.hosting-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.hosting-grid article{position:relative;padding-left:25px}.hosting-grid b{position:absolute;left:0;color:var(--cyan)}.hosting-grid h3{font-size:14px}.hosting-grid p{font-size:11px;color:var(--muted);margin-top:5px}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.tabs button{min-height:44px;padding:10px 21px;background:#21354d;border:1px solid #405570;border-radius:7px;color:#b4c2d5;font-size:12px}.tabs button[aria-selected=true]{background:#174357;border-color:#63cada;color:#8feafa}.demo-panel{min-height:520px;border:1px solid #3b506a;border-radius:13px;overflow:hidden;background:#1b3048}.disclaimer{text-align:center;color:#a9bed4;font-size:11px;margin-top:17px}.disclaimer b{color:#bcecf4}.demo-topbar{height:64px;display:flex;align-items:center;gap:20px;padding:0 23px;border-bottom:1px solid #3a4d66}.demo-logo{font-size:19px;font-weight:800;display:flex;align-items:center;gap:7px}.demo-logo small{font-size:12px;color:#fff}.fiction{margin-left:auto;border:1px solid #446078;border-radius:4px;padding:3px 7px;color:#8ddcec;font-size:8px;letter-spacing:1px}.demo-user{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#31516a;color:#a6e6ef;font-size:8px}.student-shell{display:grid;grid-template-columns:180px 1fr;min-height:520px}.student-side{padding:25px 16px;border-right:1px solid #3a4d66;display:flex;flex-direction:column}.student-side .demo-logo{color:var(--cyan);margin-bottom:28px}.student-side>small{color:#8da3bc;font-size:8px;letter-spacing:1.5px}.student-side span:not(.demo-logo){padding:9px;margin-top:6px;color:#a5b5c9;font-size:10px;border-radius:6px}.student-side span.on{background:#1e5268;color:#8ce8f3}.student-side footer{margin-top:auto;font-size:9px;color:#b7c7d9}.student-main,.inventory-main,.booking-main,.project-main{padding:25px}.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:21px}.demo-heading p{font-size:8px;color:#8198b3;letter-spacing:1.2px;margin-bottom:6px}.demo-heading h3{font-size:22px}.demo-heading small{color:#9eb1c6}.fake-btn{background:var(--cyan);color:#0b2b35;padding:8px 12px;border-radius:6px;font-size:9px;font-weight:700}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat-grid article{background:#263f5a;border:1px solid #39516b;border-radius:7px;padding:13px}.stat-grid span,.stat-grid small{display:block;color:#aebed0;font-size:8px}.stat-grid b{display:block;font-size:27px}.data-card{margin-top:18px;border:1px solid #3a4f68;border-radius:8px;overflow:auto}.data-card header{padding:12px 14px;background:#223a54;font-size:10px;font-weight:700}.data-card table{width:100%;border-collapse:collapse;font-size:9px}.data-card th,.data-card td{padding:11px 13px;text-align:left;border-top:1px solid #364b64;white-space:nowrap}.data-card th{color:#91aac3;font-weight:500}.status{padding:3px 7px;border-radius:4px;background:#174a3f;color:#78dfbb}.status.warn{background:#4c402a;color:#e3c078}.avatar{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#28516a;color:#8be3f0;font-style:normal;font-size:8px;margin-right:6px}.avatar.purple{background:#42385f;color:#c1acef}.avatar.amber{background:#55452e;color:#e9c47b}.inventory{background:#192f42}.inventory .demo-topbar{background:#183c40}.inventory .demo-logo{color:var(--green)}.inventory .fake-btn{background:var(--green)}.inventory-overview{display:grid;grid-template-columns:1fr 1.35fr;gap:12px}.health{display:flex;justify-content:space-between;align-items:center;padding:18px;background:#174441;border:1px solid #326d63;border-radius:9px}.health span{font-size:9px;color:#acd9cd}.health b{display:block;font-size:31px}.ring{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 81%,#315552 81%);position:relative}.ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#174441}.ring i{z-index:1;font-style:normal;font-size:16px}.inventory-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.inventory-stats article{padding:15px 12px;background:#253f55;border:1px solid #3c566d;border-radius:9px}.inventory-stats article:last-child{background:#493a2e}.inventory-stats span,.inventory-stats small{display:block;color:#a8b9ca;font-size:8px}.inventory-stats b{font-size:25px}.asset-layout{display:grid;grid-template-columns:1.6fr .7fr;gap:12px;margin-top:12px}.asset-list,.maintenance{background:#20384c;border:1px solid #3b5269;border-radius:9px;overflow:hidden}.panel-title{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #3a5066;font-size:9px}.panel-title span{color:#8ba1b8}.asset-row{display:grid;grid-template-columns:32px 1fr 62px;gap:9px;align-items:center;padding:10px 13px;border-bottom:1px solid #354b61;font-size:8px}.asset-row:last-child{border:0}.asset-icon{display:grid;place-items:center;width:30px;height:30px;background:#2c5260;border-radius:6px;color:#83dec5;font-style:normal}.asset-row b,.asset-row small{display:block}.asset-row small{color:#8ea5ba}.maintenance{padding-bottom:10px}.maintenance>p{padding:12px 14px;border-bottom:1px solid #3a5066;font-size:9px}.maintenance div{display:flex;gap:9px;align-items:center;margin:12px}.maintenance div b{font-size:22px}.maintenance div span{color:#94aabd;font-size:8px}.booking{background:#f7f5fb;color:#2c2940}.booking .demo-topbar{background:#f0edfa;border-color:#ded8ed}.booking .demo-logo{color:var(--purple)}.booking .demo-logo small{color:#2c2940}.booking .fiction{color:#6c5bb4;border-color:#b9afe0}.booking .demo-user{background:var(--purple);color:white}.booking .fake-btn{background:var(--purple);color:#fff}.booking .demo-heading small{color:#756f86}.booking-layout{display:grid;grid-template-columns:1.45fr .65fr;gap:14px}.calendar,.agenda{background:#fff;border:1px solid #dfd9ec;border-radius:9px;overflow:hidden}.calendar>header,.agenda>header{display:flex;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #e5e0ed;font-size:9px}.cal-days,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.cal-days{padding:10px 8px 3px;color:#918b9e;font-size:7px}.cal-grid{padding:0 8px 12px}.cal-grid span{height:43px;display:grid;place-items:center;font-size:9px;position:relative}.cal-grid span.today{background:var(--purple);color:#fff;border-radius:7px}.cal-grid span.dot:after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:#ec916e}.agenda article{display:grid;grid-template-columns:37px 1fr 4px;gap:8px;align-items:center;padding:12px;border-bottom:1px solid #ece8f2}.agenda time,.agenda small{font-size:7px;color:#8a8498}.agenda b{font-size:9px;display:block}.agenda i{height:26px;background:#ec916e;border-radius:4px}.agenda article:nth-child(3) i{background:var(--purple)}.agenda article:nth-child(4) i{background:#3fb795}.availability{margin:13px;font-size:8px}.availability b{float:right}.availability div{clear:both;height:5px;background:#ebe7f2;border-radius:5px;margin-top:8px}.availability i{display:block;width:67%;height:5px;background:var(--purple);border-radius:5px}.project{background:#17273b}.project .demo-logo{color:var(--orange)}.project .fake-btn{background:var(--orange);color:#422016}.project-summary{display:flex;align-items:center;gap:13px;padding:12px;background:#21384f;border:1px solid #3b526a;border-radius:8px;margin-bottom:13px;font-size:8px;color:#a2b4c6}.project-summary b{font-size:18px;color:white}.track{height:5px;background:#3b5065;flex:1;border-radius:5px}.track i{display:block;width:68%;height:5px;background:linear-gradient(90deg,var(--orange),#f3c16d);border-radius:5px}.project-summary em{font-style:normal;background:#2a4258;padding:5px 8px;border-radius:4px}.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.kanban section{background:#132235;border:1px solid #30475e;border-radius:8px;padding:10px}.kanban section>header{display:flex;justify-content:space-between;color:#91a6bb;font-size:8px}.task{background:#20354d;border:1px solid #3b5068;border-radius:7px;padding:11px;margin-top:9px}.task.active{background:#352e38;border-color:#a66851}.task.done{opacity:.75}.task small{font-size:7px;color:#ff9d79;letter-spacing:.6px}.task h4{font-size:10px;margin-top:6px}.task p{color:#8fa3b7;font-size:8px;margin-top:4px}.task footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:#8fa3b7;font-size:7px}.task .avatar{width:21px;height:21px;margin:0}.process ol{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;list-style:none;padding:0;margin:45px 0 0}.process li{position:relative}.process li:after{content:"→";position:absolute;top:5px;left:55px;right:0;text-align:right;color:#66819a;border-bottom:1px solid #40526a;height:19px}.process li:last-child:after{display:none}.process li>b{display:grid;place-items:center;width:42px;height:42px;border:1px solid #41657a;background:#1a3a4e;color:var(--cyan);border-radius:9px;font:13px monospace;margin-bottom:20px}.process h3{font-size:15px}.process li p{font-size:12px;color:var(--muted);margin-top:8px}.faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}.faq>div:first-child>p:not(.eyebrow){color:var(--muted);font-size:14px;margin-top:18px}.faq>div:first-child>a{display:inline-block;color:var(--cyan);font-size:13px;margin-top:22px}.faq-list details{border-bottom:1px solid #3a4c64}.faq-list details:first-child{border-top:1px solid #3a4c64}.faq-list summary{display:flex;justify-content:space-between;padding:21px 0;list-style:none;cursor:pointer;font-size:14px}.faq-list details>p{color:var(--muted);font-size:13px;padding:0 20px 20px 0}.final{display:flex;justify-content:space-between;align-items:center;padding:52px 60px;margin-bottom:65px;background:radial-gradient(circle at 80%,#24607b44,transparent 50%),#1b3a51;border:1px solid #3f7185;border-radius:17px;overflow:hidden}.final h2{font-size:46px}.final>div>p:not(.eyebrow){max-width:500px;color:#bed0df;font-size:14px;margin-top:18px}.final .btn{margin-top:24px}.final>code{font:110px monospace;color:#4a859b;transform:rotate(-9deg)}body>footer{height:105px;border-top:1px solid #34475e;display:flex;align-items:center;gap:25px;padding-right:130px}body>footer p,body>footer small{color:#91a5bc;font-size:10px}body>footer small{margin-left:auto}.float-tg{position:fixed;right:22px;bottom:20px;z-index:40;display:flex;align-items:center;gap:9px;background:var(--cyan);color:#082633;border-radius:50px;padding:12px 16px;font-size:11px;font-weight:700;box-shadow:0 10px 30px #0005}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:65px}.hero>div:first-child{max-width:650px}.service-grid{grid-template-columns:repeat(3,1fr)}.price-grid{grid-template-columns:1fr;max-width:580px;margin:auto}.price-grid>article>p:not(.source){min-height:0}.price-grid ul{columns:2}.hosting{gap:35px}.student-shell{grid-template-columns:135px 1fr}.student-main,.inventory-main,.booking-main,.project-main{padding:20px}.inventory-overview{grid-template-columns:1fr}.asset-layout{grid-template-columns:1fr}.booking-layout{grid-template-columns:1.2fr .8fr}.faq{gap:45px}.final>code{font-size:80px}}
@media(max-width:650px){.container{width:calc(100% - 34px)}.nav-wrap{height:70px}.menu{display:flex;width:44px;height:44px;background:#1c2e45;border:1px solid #40516a;border-radius:8px;flex-direction:column;justify-content:center;gap:6px;align-items:center}.menu i{width:18px;height:1px;background:white}.nav-wrap nav{display:none;position:absolute;top:70px;left:0;right:0;background:#17263a;padding:12px 17px 20px;border-bottom:1px solid #3b4e66}.nav-wrap nav.open{display:flex;flex-direction:column;align-items:stretch;gap:2px}.nav-wrap nav a{padding:10px}.hero{padding-block:48px 55px;gap:42px}.hero h1{font-size:49px}.lead{font-size:15px}.actions{flex-direction:column}.trust{gap:7px 16px}.mini-body{grid-template-columns:48px 1fr}.mini-body aside{padding-inline:7px}.mini-body aside span{font-size:0;text-align:center}.mini-body aside span:first-letter{font-size:13px}.mini-body aside small{display:none}.mini-body section{padding:16px 10px}.mini-stats article{padding:7px}.mini-stats b{font-size:19px}.mini-chart>div{height:95px}.float-price{right:4px}.audience>.container{display:grid;grid-template-columns:1fr 1fr;text-align:center;padding-block:19px;gap:9px}.audience small{grid-column:1/-1;max-width:none}.audience i{display:none}.section{padding-block:60px}.section-head{flex-direction:column;align-items:start;gap:17px}.service-grid{grid-template-columns:1fr 1fr;gap:9px}.service-grid article{padding:18px 13px}.service-grid h3{font-size:13px}.price-grid ul{columns:1}.price-grid>article{padding:23px}.hosting{grid-template-columns:1fr;padding-block:48px}.tabs{display:grid;grid-template-columns:1fr 1fr}.tabs button{padding-inline:6px}.demo-panel{min-height:0}.student-shell{display:block;min-height:0}.student-side{display:none}.demo-heading{align-items:start;flex-direction:column}.fake-btn{width:100%;text-align:center}.stat-grid{grid-template-columns:1fr 1fr}.data-card th,.data-card td{padding:9px 7px;font-size:8px}.inventory-main,.booking-main,.project-main,.student-main{padding:15px 11px}.demo-topbar{height:55px;padding-inline:13px}.demo-topbar .fiction{display:none}.inventory-stats{grid-template-columns:repeat(3,1fr)}.inventory-stats article{padding:11px 7px}.inventory-stats b{font-size:22px}.asset-row{grid-template-columns:31px 1fr 55px}.booking-layout{grid-template-columns:1fr}.cal-grid span{height:38px}.kanban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.kanban section{min-width:80%;scroll-snap-align:start}.project-summary{flex-wrap:wrap}.project-summary .track{min-width:48%}.project-summary em{width:100%;text-align:center}.process ol{display:flex;flex-direction:column;gap:0}.process li{padding:0 0 30px 62px}.process li>b{position:absolute;left:0}.process li:after{content:"";left:20px;right:auto;top:47px;bottom:7px;width:1px;height:auto;background:#40526a}.faq{grid-template-columns:1fr;gap:28px}.final{padding:32px 23px}.final h2{font-size:38px}.final>code{display:none}.final .btn{width:100%;font-size:12px}body>footer{height:auto;padding:28px 55px 28px 0;flex-direction:column;align-items:start;gap:10px}body>footer small{margin:0}.float-tg span{display:none}.float-tg{padding:13px;right:15px;bottom:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.service-grid article{transition:none}}
/* System Dev visual identity */
body{background:#101e31;background-image:radial-gradient(ellipse at 90% 5%,#15546b55,transparent 30%),radial-gradient(ellipse at 0% 35%,#343b7330,transparent 25%)}
main{position:relative;isolation:isolate}.code-atmosphere{position:absolute;inset:0 0 auto;height:650px;z-index:-1;overflow:hidden;pointer-events:none;background-image:linear-gradient(#75d8f108 1px,transparent 1px),linear-gradient(90deg,#75d8f108 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(#000 75%,transparent)}.code-atmosphere span{position:absolute;font:11px/1.5 Consolas,monospace;color:#78cadd55;letter-spacing:1px}.code-atmosphere span:nth-child(1){top:27px;left:6%}.code-atmosphere span:nth-child(2){bottom:36px;right:7%}.code-atmosphere span:nth-child(3){top:50%;right:1%;writing-mode:vertical-rl}
.brand{font-size:24px;letter-spacing:-1px}.brand .brand-dev{font-weight:400;color:#bdd0e2;margin-left:4px}.brand>.brand-mark{width:42px;height:42px;font:700 25px/1 Consolas,monospace;border-radius:13px 4px 13px 4px;background:#153d50;box-shadow:inset 0 1px #78d9ef30;margin-right:11px;display:flex;justify-content:center;gap:0;letter-spacing:-5px;padding-right:5px}.brand-mark>span{color:#fff;transform:translateY(3px)}.site-header{background:#101e31e8}.nav-wrap nav>a{font-size:14px}.nav-cta{background:#20344980}
.hero{padding-block:100px 105px;gap:48px}.hero h1{font-weight:750;letter-spacing:-3px;line-height:1.04}.hero h1 span{color:#79e2f2}.lead{color:#c3d1e0}.hero .eyebrow{font:10px/1.7 Consolas,monospace;letter-spacing:1.5px}.hero-art{min-width:0}.hero-art:before{inset:-25px;background:radial-gradient(ellipse,#29b7cc24,transparent 70%)}.btn{border-radius:10px;min-height:51px}.primary{box-shadow:0 4px 20px #62d8f11a}.primary:hover{background:#8be8f5}.trust{gap:8px}.trust span{padding:5px 9px;background:#1c354b88;border:1px solid #42607770;border-radius:5px;font-size:10px}.mini-window{transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);border-color:#56748b;box-shadow:0 30px 65px #020c1c66}.art-label{font-family:Consolas,monospace;letter-spacing:.5px}.float-price{bottom:-25px;right:0;background:#214459}
.audience{background:#1b3041cc}.audience b{font-weight:600}.section{padding-block:88px}h2{line-height:1.14;letter-spacing:-1.4px}.section-head>p{font-size:15px}.service-grid{gap:14px}.service-grid article{background:linear-gradient(135deg,#233b50d9,#172b40);padding:25px 20px;border-color:#3a566a;border-radius:13px}.service-grid svg{width:38px;height:38px;padding:8px;background:#61d9eb12;border:1px solid #62d8e626;border-radius:10px}.service-grid h3{font-size:15px;line-height:1.4}.service-grid p{font-size:12px;line-height:1.7}.note{margin-top:30px}
.pricing{background:#15263b radial-gradient(ellipse at 50% 0,#27607540,transparent 55%)}.center h2 span{color:#81dcec}.center>p:last-child{font-size:15px}.price-grid{gap:18px;align-items:stretch}.price-grid>article{padding:28px 25px;background:#20364bd9;border-color:#405c72;border-radius:18px;box-shadow:0 14px 32px #06122024}.price-grid>article.featured{background:linear-gradient(160deg,#204b60,#1d344b 65%);border-color:#6cd4e5}.plan-tag{font-family:Consolas,monospace;font-size:9px;letter-spacing:.6px;margin-bottom:23px}.price-grid h3{font-size:23px;margin-bottom:22px}.price-grid>article>small{font-size:12px;color:#b9cde0}.price-grid .price,.custom-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px;min-height:66px;font-size:40px;letter-spacing:-1.4px;line-height:1.4}.price-grid .price i{font-size:22px;letter-spacing:-.5px}.custom-price{font-size:27px;letter-spacing:-.7px;line-height:1.25;align-items:center;max-width:270px}.price-grid>article>p:not(.source){font-size:14px;line-height:1.75;min-height:100px;margin-top:16px}.payment{padding:13px 10px;margin-block:8px 23px;background:#0e233655;border:1px solid #46667c;border-radius:7px;font-size:12px}.price-grid h4{font-size:12px;font-weight:600}.price-grid li{font-size:14px;line-height:1.55;margin:10px 0}.price-grid details{font-size:12px;line-height:1.8}.price-grid .btn{font-size:12px}.price-note{font-size:12px;line-height:1.8}.source{font-size:12px!important;line-height:1.75!important}.source-notice{padding:13px 14px;border-left:3px solid #fb8795;border-radius:5px;background:#f7798910;color:#ffacb6!important;font-size:12px!important;line-height:1.7!important;min-height:0!important;margin:0 0 20px!important}.source-notice strong{display:block;color:#ffc0c8;margin-bottom:4px;font-size:10px;letter-spacing:1px}
.hosting{padding-block:75px}.hosting-grid h3{font-size:15px}.hosting-grid p{font-size:12px}.hosting>div:first-child>p:last-child{font-size:14px}.hosting-grid article{padding:18px 14px 18px 38px;background:#1c334880;border:1px solid #365368;border-radius:10px}.hosting-grid b{left:15px}.hosting-grid{gap:12px}.process{background:linear-gradient(110deg,#182d42,#14283a)}.process h3{line-height:1.4}.process li p{font-size:13px}.faq-list summary{font-size:15px}.faq-list details>p{font-size:14px;line-height:1.8}.faq-list details[open] summary{color:#82dfef}.final{background-color:#173b50;background-image:linear-gradient(#80deed08 1px,transparent 1px),linear-gradient(90deg,#80deed08 1px,transparent 1px),radial-gradient(ellipse at 90% 50%,#34809760,transparent 60%);background-size:30px 30px,30px 30px,auto}.final>code{color:#76d8e766}body>footer p,body>footer small{font-size:11px}:focus-visible{outline:2px solid #85e6f5;outline-offset:5px}summary::-webkit-details-marker{display:none}
@media(min-width:901px){.price-grid>article>.source,.price-grid>article>details{margin-top:auto!important}.price-grid>article>.btn{margin-top:4px}}
@media(max-width:1100px) and (min-width:901px){.price-grid>article{padding:24px 18px}.price-grid .price{font-size:34px}.price-grid .price i{font-size:19px}.hero{gap:30px}.actions{flex-wrap:wrap}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-block:65px 75px}.hero-art{max-width:650px;width:100%;margin-inline:auto}.price-grid>article>p:not(.source){min-height:0}.price-grid .price,.custom-price{min-height:0}.hosting{gap:30px}.code-atmosphere{height:1000px}.code-atmosphere span:nth-child(3){display:none}}
@media(max-width:650px){.hero{padding-block:55px 65px;gap:45px}.hero h1{font-size:clamp(42px,11.8vw,60px);letter-spacing:-2.3px}.hero .eyebrow{font-size:9px;letter-spacing:.8px}.brand{font-size:22px}.brand>.brand-mark{width:36px;height:36px;font-size:23px}.section{padding-block:60px}.section-head>p{font-size:14px}.service-grid article{padding:19px 13px}.service-grid h3{font-size:13px}.service-grid p{font-size:11px}.price-grid>article{padding:26px 23px}.price-grid .price{font-size:39px}.custom-price{font-size:28px}.hosting-grid article{padding-left:30px}.hosting-grid b{left:10px}.hosting-grid h3{font-size:13px}.hosting-grid p{font-size:11px}.hero .actions{flex-wrap:nowrap}.code-atmosphere span:nth-child(1){font-size:9px;top:16px}.code-atmosphere span:nth-child(2){display:none}.art-label{font-size:8px}.mini-window{transform:none}.final h2{font-size:36px}.demo-topbar{gap:10px}.demo-topbar .demo-logo{flex-shrink:0}}
@media(max-width:650px){.hero-art:before{inset:0}.demo-topbar>span:not(.fiction):not(.demo-user){font-size:8px}}
@media(prefers-reduced-motion:no-preference){.reveal.visible{animation:section-in .5s ease-out both}@keyframes section-in{from{opacity:.65;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}

/* ===== Premium UI Refresh 2026 ===== */
:root{
  --bg:#0b1424;
  --panel:#132238;
  --panel2:#192c45;
  --line:#2f4864;
  --text:#f7fbff;
  --muted:#9eb1c9;
  --cyan:#62e6ff;
  --green:#69e6bd;
  --purple:#8d79ff;
  --orange:#ff9b78;
  --shadow:0 24px 70px rgba(0,0,0,.28);
}
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 7%,rgba(98,230,255,.08),transparent 25rem),
    radial-gradient(circle at 92% 17%,rgba(141,121,255,.07),transparent 28rem),
    linear-gradient(180deg,#0b1424 0%,#0e192a 42%,#0b1424 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
::selection{background:rgba(98,230,255,.28);color:#fff}
.site-header{
  background:rgba(9,18,32,.80);
  border-bottom:1px solid rgba(103,151,190,.22);
  box-shadow:0 10px 35px rgba(0,0,0,.13);
}
.nav-wrap{height:76px}
.brand>span{
  border:1px solid rgba(98,230,255,.38);
  background:linear-gradient(145deg,rgba(98,230,255,.15),rgba(141,121,255,.10));
  box-shadow:inset 0 0 22px rgba(98,230,255,.08),0 8px 22px rgba(0,0,0,.18);
}
.nav-wrap nav{gap:26px}
.nav-wrap nav>a{transition:color .2s ease,transform .2s ease}
.nav-wrap nav>a:hover{transform:translateY(-1px)}
.nav-cta{
  background:linear-gradient(135deg,rgba(98,230,255,.13),rgba(98,230,255,.03));
  border-color:rgba(98,230,255,.35)!important;
  box-shadow:inset 0 0 18px rgba(98,230,255,.04);
}
.hero{min-height:690px;padding-block:82px 92px}
.hero h1{
  text-wrap:balance;
  text-shadow:0 16px 44px rgba(0,0,0,.24);
}
.hero h1 span{
  background:linear-gradient(90deg,#62e6ff,#9cf1ff 52%,#8d79ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{font-size:16px;color:#afc1d8;max-width:540px}
.btn{
  border-radius:10px;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.btn:after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.18),transparent 75%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.btn:hover:after{transform:translateX(120%)}
.btn:hover{transform:translateY(-3px)}
.primary{
  background:linear-gradient(135deg,#72ebff,#4ac8e7);
  box-shadow:0 12px 30px rgba(71,207,235,.20);
}
.primary:hover{box-shadow:0 16px 38px rgba(71,207,235,.28)}
.ghost{background:rgba(23,40,62,.72);border-color:rgba(97,130,164,.42)}
.ghost:hover{border-color:rgba(98,230,255,.45);box-shadow:0 12px 26px rgba(0,0,0,.16)}
.trust{margin-top:4px}
.trust span{padding:6px 9px;border:1px solid rgba(111,147,182,.17);border-radius:999px;background:rgba(255,255,255,.018)}
.hero-art:before{
  inset:-90px;
  background:radial-gradient(circle,rgba(98,230,255,.16) 0,rgba(141,121,255,.07) 32%,transparent 68%);
  filter:blur(8px);
}
.mini-window{
  border-color:rgba(117,170,209,.40);
  box-shadow:0 35px 90px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.025) inset;
  transform:perspective(1200px) rotateY(-1.8deg) rotateX(.8deg);
  transition:transform .4s ease,box-shadow .4s ease;
}
.hero-art:hover .mini-window{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-3px);box-shadow:0 42px 100px rgba(0,0,0,.42)}
.float-price{
  border-color:rgba(98,230,255,.32);
  background:rgba(24,45,66,.91);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 45px rgba(0,0,0,.34);
}
.audience{background:rgba(17,34,54,.68);border-color:rgba(101,144,180,.20);backdrop-filter:blur(10px)}
.audience b{color:#dfeaf6}
.section-head h2,.center h2{max-width:780px}
.service-grid{gap:14px}
.service-grid article{
  position:relative;
  min-height:148px;
  background:linear-gradient(145deg,rgba(25,45,70,.94),rgba(17,33,53,.94));
  border-color:rgba(83,122,158,.34);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  overflow:hidden;
}
.service-grid article:before{
  content:"";
  position:absolute;
  width:110px;height:110px;
  right:-55px;top:-65px;
  border-radius:50%;
  background:rgba(98,230,255,.075);
  transition:transform .25s ease,background .25s ease;
}
.service-grid article:hover{
  transform:translateY(-5px);
  border-color:rgba(98,230,255,.47);
  box-shadow:0 20px 36px rgba(0,0,0,.18);
}
.service-grid article:hover:before{transform:scale(1.35);background:rgba(98,230,255,.11)}
.service-grid svg{padding:9px;width:40px;height:40px;border-radius:10px;background:rgba(98,230,255,.08);border:1px solid rgba(98,230,255,.13)}
.service-grid h3{font-size:14px}.service-grid p{font-size:11.5px;line-height:1.65}
.pricing,.process{
  background:linear-gradient(180deg,rgba(16,32,51,.90),rgba(20,39,61,.72));
  border-color:rgba(91,130,164,.25);
}
.pricing{position:relative;overflow:hidden}
.pricing:before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  left:50%;top:-330px;
  transform:translateX(-50%);
  background:rgba(98,230,255,.055);
  filter:blur(20px);
}
.price-grid{position:relative;z-index:1;gap:20px;align-items:stretch}
.price-grid>article{
  position:relative;
  padding:30px;
  background:linear-gradient(160deg,rgba(30,53,80,.96),rgba(19,36,58,.96));
  border:1px solid rgba(83,126,163,.40);
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.16);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.price-grid>article:hover{transform:translateY(-6px);border-color:rgba(98,230,255,.46);box-shadow:0 28px 58px rgba(0,0,0,.24)}
.price-grid>article.featured{
  transform:translateY(-10px);
  background:linear-gradient(155deg,rgba(27,78,98,.98),rgba(27,51,76,.98) 58%,rgba(29,42,67,.98));
  border-color:rgba(98,230,255,.78);
  box-shadow:0 26px 65px rgba(0,0,0,.26),0 0 44px rgba(98,230,255,.07);
}
.price-grid>article.featured:hover{transform:translateY(-16px)}
.price-grid>article.featured:before{
  content:"PILIHAN POPULAR";
  position:absolute;
  top:0;right:22px;
  transform:translateY(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:linear-gradient(135deg,#72ebff,#55d0ec);
  color:#082633;
  font-size:8px;
  letter-spacing:1px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(69,206,233,.22);
}
.plan-tag b{border-color:rgba(98,230,255,.30);background:rgba(98,230,255,.055)}
.price-grid .price,.custom-price{color:#fff;text-shadow:0 12px 28px rgba(0,0,0,.18)}
.price-grid .featured .price{color:#90f1ff}
.payment{border-color:rgba(108,146,179,.28);background:rgba(255,255,255,.018);padding-inline:10px;border-radius:8px}
.price-grid li:before{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(98,230,255,.10);font-size:10px}
.price-grid details{border-color:rgba(106,150,184,.34);background:rgba(0,0,0,.08)}
.handover-note{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  margin-top:30px;
  padding:20px 22px;
  border:1px solid rgba(105,230,189,.34);
  border-radius:16px;
  background:linear-gradient(115deg,rgba(105,230,189,.095),rgba(98,230,255,.04) 55%,rgba(141,121,255,.055));
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}
.handover-icon{
  display:grid;
  place-items:center;
  width:50px;height:50px;
  border-radius:13px;
  background:rgba(105,230,189,.12);
  border:1px solid rgba(105,230,189,.24);
  color:#8df0d0;
  font:800 14px/1 monospace;
}
.handover-copy small{display:block;color:#79dec1;font-size:8px;letter-spacing:1.3px;font-weight:800;margin-bottom:4px}
.handover-copy strong{display:block;font-size:15px;color:#f4fbff;margin-bottom:3px}
.handover-copy p{font-size:11.5px;color:#adc0d4;line-height:1.6}
.paid-badge{
  white-space:nowrap;
  font-size:8px;
  letter-spacing:.9px;
  font-weight:900;
  color:#8df0d0;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(105,230,189,.25);
  background:rgba(105,230,189,.08);
}
.price-note{margin-top:16px}
.hosting{position:relative}.hosting:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(98,230,255,.35),transparent)}
.hosting-grid article{padding:18px 18px 18px 46px;border:1px solid rgba(76,119,157,.28);border-radius:12px;background:rgba(19,37,58,.45)}
.hosting-grid b{left:18px;top:18px}
.tabs{padding:6px;border:1px solid rgba(75,115,151,.26);border-radius:12px;background:rgba(18,34,54,.50);width:max-content;max-width:100%}
.tabs button{border-color:transparent;background:transparent;border-radius:9px;transition:.2s ease}
.tabs button[aria-selected=true]{box-shadow:0 8px 18px rgba(0,0,0,.14)}
.demo-panel{border-radius:17px;border-color:rgba(84,128,166,.38);box-shadow:var(--shadow)}
.process ol li{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.process ol li:hover{transform:translateY(-4px);border-color:rgba(98,230,255,.38);background:rgba(98,230,255,.035)}
.faq-list details{transition:border-color .2s ease,background .2s ease}
.faq-list details[open]{border-color:rgba(98,230,255,.38);background:rgba(98,230,255,.025)}
.final{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(98,230,255,.22);
  border-radius:22px;
  margin-block:70px;
  padding-inline:56px;
  background:linear-gradient(120deg,rgba(19,48,68,.92),rgba(17,34,55,.96) 60%,rgba(41,33,76,.70));
  box-shadow:0 30px 80px rgba(0,0,0,.24);
}
.final:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-80px;top:-130px;background:rgba(98,230,255,.09);filter:blur(4px)}
.float-tg{box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px rgba(98,230,255,.09) inset}
@media(max-width:900px){
  .price-grid>article.featured{transform:none}.price-grid>article.featured:hover{transform:translateY(-6px)}
  .handover-note{grid-template-columns:auto 1fr}.paid-badge{grid-column:2;justify-self:start}
}
@media(max-width:650px){
  .container{width:min(100% - 30px,1200px)}
  .hero{min-height:auto}.mini-window{transform:none}
  .trust span{font-size:10px}
  .price-grid>article{padding:24px 21px}
  .handover-note{grid-template-columns:1fr;padding:18px}.handover-icon{width:44px;height:44px}.paid-badge{grid-column:1}
  .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}.tabs button{white-space:nowrap}
  .final{padding-inline:26px;margin-block:45px;border-radius:17px}
}

/* ===== COLOR ACCENT PASS v2 ===== */
:root{
  --accent-violet:#9a8cff;
  --accent-mint:#78e8bd;
  --accent-amber:#ffc36b;
  --accent-rose:#ff8fa3;
}

/* Navigation & section hierarchy */
.nav-wrap nav>a[href="#harga"]{color:#8eeeff}
.nav-wrap nav>a[href="#demo"]{color:#b8adff}
.nav-wrap nav>a[href="#faq"]{color:#8ce7c5}
.section:nth-of-type(1) .eyebrow{color:var(--accent-violet)}
.pricing .eyebrow{color:var(--cyan)}
#demo .eyebrow{color:var(--accent-amber)}
.process .eyebrow{color:var(--accent-mint)}
.faq .eyebrow{color:var(--accent-violet)}

/* Service cards: restrained multi-accent rhythm */
.service-grid article:nth-child(4n+1) svg{color:#7de9fb;background:rgba(101,220,241,.10);border-color:rgba(101,220,241,.20)}
.service-grid article:nth-child(4n+2) svg{color:var(--accent-violet);background:rgba(154,140,255,.10);border-color:rgba(154,140,255,.20)}
.service-grid article:nth-child(4n+3) svg{color:var(--accent-mint);background:rgba(120,232,189,.10);border-color:rgba(120,232,189,.20)}
.service-grid article:nth-child(4n+4) svg{color:var(--accent-amber);background:rgba(255,195,107,.10);border-color:rgba(255,195,107,.20)}
.service-grid article:nth-child(4n+1):hover{border-color:rgba(101,220,241,.50)}
.service-grid article:nth-child(4n+2):hover{border-color:rgba(154,140,255,.48)}
.service-grid article:nth-child(4n+3):hover{border-color:rgba(120,232,189,.46)}
.service-grid article:nth-child(4n+4):hover{border-color:rgba(255,195,107,.45)}
.service-grid article:nth-child(4n+2):before{background:rgba(154,140,255,.065)}
.service-grid article:nth-child(4n+3):before{background:rgba(120,232,189,.06)}
.service-grid article:nth-child(4n+4):before{background:rgba(255,195,107,.06)}

/* Pricing: each package gets a distinct visual identity */
.price-grid>article:after{
  content:"";
  position:absolute;
  left:22px;right:22px;top:-1px;
  height:3px;
  border-radius:0 0 999px 999px;
  opacity:.9;
}
.price-grid>article:nth-child(1):after{background:linear-gradient(90deg,transparent,var(--accent-violet),transparent)}
.price-grid>article:nth-child(2):after{background:linear-gradient(90deg,transparent,#72ebff,transparent)}
.price-grid>article:nth-child(3):after{background:linear-gradient(90deg,transparent,var(--accent-amber),transparent)}
.price-grid>article:nth-child(1) .plan-tag b{color:#c3bbff;border-color:rgba(154,140,255,.34);background:rgba(154,140,255,.08)}
.price-grid>article:nth-child(3) .plan-tag b{color:#ffd89b;border-color:rgba(255,195,107,.32);background:rgba(255,195,107,.08)}
.price-grid>article:nth-child(1) .price{color:#cbc5ff}
.price-grid>article:nth-child(3) .custom-price{color:#ffd393}
.price-grid>article:nth-child(1) li:before{color:#c9c2ff;background:rgba(154,140,255,.11)}
.price-grid>article:nth-child(3) li:before{color:#ffd498;background:rgba(255,195,107,.10)}
.price-grid>article:nth-child(1) .ghost:hover{border-color:rgba(154,140,255,.52);box-shadow:0 12px 30px rgba(117,99,225,.12)}
.price-grid>article:nth-child(3) .ghost:hover{border-color:rgba(255,195,107,.50);box-shadow:0 12px 30px rgba(222,157,61,.10)}

/* Hosting benefits */
.hosting-grid article:nth-child(1) b{color:#7beaff}
.hosting-grid article:nth-child(2) b{color:var(--accent-mint)}
.hosting-grid article:nth-child(3) b{color:var(--accent-violet)}
.hosting-grid article:nth-child(4) b{color:var(--accent-amber)}
.hosting-grid article:nth-child(1):hover{border-color:rgba(101,220,241,.35)}
.hosting-grid article:nth-child(2):hover{border-color:rgba(120,232,189,.34)}
.hosting-grid article:nth-child(3):hover{border-color:rgba(154,140,255,.34)}
.hosting-grid article:nth-child(4):hover{border-color:rgba(255,195,107,.34)}

/* Demo tabs use color to reinforce selected state */
.tabs button:nth-child(1)[aria-selected=true]{color:#9cf2ff;border-color:rgba(101,220,241,.28);background:rgba(101,220,241,.09)}
.tabs button:nth-child(2)[aria-selected=true]{color:#bcb2ff;border-color:rgba(154,140,255,.28);background:rgba(154,140,255,.09)}
.tabs button:nth-child(3)[aria-selected=true]{color:#ffd493;border-color:rgba(255,195,107,.28);background:rgba(255,195,107,.09)}
.tabs button:nth-child(4)[aria-selected=true]{color:#99f0cf;border-color:rgba(120,232,189,.28);background:rgba(120,232,189,.09)}

/* Process steps: clearer scan path */
.process ol li:nth-child(1) b{color:#8feeff}
.process ol li:nth-child(2) b{color:#bdb4ff}
.process ol li:nth-child(3) b{color:#9cefd0}
.process ol li:nth-child(4) b{color:#ffd392}
.process ol li:nth-child(5) b{color:#ff9caf}
.process ol li:nth-child(1):hover{border-color:rgba(101,220,241,.40)}
.process ol li:nth-child(2):hover{border-color:rgba(154,140,255,.40)}
.process ol li:nth-child(3):hover{border-color:rgba(120,232,189,.38)}
.process ol li:nth-child(4):hover{border-color:rgba(255,195,107,.38)}
.process ol li:nth-child(5):hover{border-color:rgba(255,143,163,.36)}

/* FAQ and final CTA */
.faq-list details[open] summary{color:#aeefff}
.faq-list details[open] summary span{color:var(--accent-violet)}
.final h2 span{
  background:linear-gradient(90deg,#7aeaff 0%,#a79aff 52%,#86ebc5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.final .primary{background:linear-gradient(135deg,#76ebff 0%,#66d9ef 55%,#8ee8c7 135%)}

/* Small emphasis details */
.note{color:#b8c8da}.note::first-letter{color:var(--accent-amber)}
.price-note{color:#b5c5d7}
.handover-note{border-color:rgba(120,232,189,.42);box-shadow:0 18px 46px rgba(0,0,0,.16),0 0 34px rgba(120,232,189,.035)}

@media (prefers-reduced-motion:reduce){
  .service-grid article,.price-grid>article,.process ol li,.btn,.mini-window{transition:none!important}
}

/* ===== AI / Developer ambient background v3 ===== */
body{background-attachment:fixed}
.dev-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.site-header,main,body>footer,.float-tg,.skip{position:relative;z-index:2}
.site-header{position:sticky}
.float-tg,.skip{position:fixed}

.dev-grid{
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(98,230,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(98,230,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(98,230,255,.075) 1px,transparent 1.5px);
  background-size:56px 56px,56px 56px,28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.45) 55%,rgba(0,0,0,.75));
}
.dev-backdrop:before,
.dev-backdrop:after{
  content:"";
  position:absolute;
  width:46vw;
  height:46vw;
  min-width:460px;
  min-height:460px;
  border-radius:50%;
  filter:blur(2px);
  opacity:.9;
}
.dev-backdrop:before{
  top:-23vw;
  right:-14vw;
  background:radial-gradient(circle,rgba(98,230,255,.10) 0,rgba(98,230,255,.035) 32%,transparent 68%);
}
.dev-backdrop:after{
  bottom:-29vw;
  left:-18vw;
  background:radial-gradient(circle,rgba(154,140,255,.095) 0,rgba(154,140,255,.03) 34%,transparent 70%);
}

.dev-code{
  position:absolute;
  display:block;
  padding:6px 9px;
  border:1px solid rgba(111,213,236,.10);
  border-radius:5px;
  background:rgba(6,18,32,.22);
  color:rgba(130,217,237,.19);
  font:500 10px/1.35 Consolas,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.45px;
  white-space:nowrap;
  backdrop-filter:blur(2px);
  text-shadow:0 0 18px rgba(98,230,255,.12);
}
.dev-code:before{content:"> ";color:rgba(120,232,189,.24)}
.dev-code-1{top:15%;left:1.5%;transform:rotate(-4deg)}
.dev-code-2{top:35%;right:1%;transform:rotate(3deg)}
.dev-code-3{top:51%;left:2.5%;transform:rotate(-2deg);color:rgba(167,154,255,.17);border-color:rgba(154,140,255,.10)}
.dev-code-4{top:67%;right:1.5%;transform:rotate(2deg);color:rgba(120,232,189,.17);border-color:rgba(120,232,189,.10)}
.dev-code-5{top:81%;left:1%;transform:rotate(-3deg);color:rgba(255,195,107,.15);border-color:rgba(255,195,107,.09)}
.dev-code-6{top:92%;right:3%;transform:rotate(2deg)}

.ai-node{
  position:absolute;
  width:190px;
  height:190px;
  border:1px solid rgba(98,230,255,.075);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(98,230,255,.11) 0 2px,transparent 3px),
    radial-gradient(circle,rgba(98,230,255,.035),transparent 62%);
  box-shadow:0 0 60px rgba(98,230,255,.025),inset 0 0 40px rgba(98,230,255,.018);
}
.ai-node:before,.ai-node:after,.ai-node i{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(98,230,255,.08);
}
.ai-node:before{inset:24px;border-style:dashed}
.ai-node:after{inset:51px;border-color:rgba(154,140,255,.11)}
.ai-node i{width:7px;height:7px;background:rgba(98,230,255,.38);border:none;box-shadow:0 0 14px rgba(98,230,255,.3)}
.ai-node i:nth-child(1){left:27px;top:46px}
.ai-node i:nth-child(2){right:35px;top:28px;background:rgba(154,140,255,.34);box-shadow:0 0 14px rgba(154,140,255,.25)}
.ai-node i:nth-child(3){right:18px;bottom:58px;background:rgba(120,232,189,.32);box-shadow:0 0 14px rgba(120,232,189,.22)}
.ai-node-a{right:-72px;top:27%}
.ai-node-b{left:-92px;top:61%;transform:scale(.78);opacity:.7}

.circuit-line{
  position:absolute;
  width:180px;
  height:110px;
  opacity:.18;
  background:
    linear-gradient(90deg,transparent 0 18%,rgba(98,230,255,.45) 18% 18.5%,transparent 18.5% 100%),
    linear-gradient(0deg,transparent 0 52%,rgba(98,230,255,.45) 52% 52.8%,transparent 52.8% 100%);
}
.circuit-line:before,.circuit-line:after{
  content:"";position:absolute;width:6px;height:6px;border:1px solid rgba(98,230,255,.65);border-radius:50%;background:#0b1424;box-shadow:0 0 10px rgba(98,230,255,.25)
}
.circuit-line:before{left:29px;top:54px}.circuit-line:after{right:0;top:54px}
.circuit-line-a{left:0;top:42%}
.circuit-line-b{right:0;top:74%;transform:scaleX(-1)}

/* Let transparent content reveal the ambient layer more naturally */
#servis,#demo,.hosting,.faq{position:relative}
#servis:before,#demo:before,.faq:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:360px;height:360px;
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
}
#servis:before{left:-210px;top:90px;background:radial-gradient(circle,rgba(154,140,255,.065),transparent 68%)}
#demo:before{right:-230px;top:120px;background:radial-gradient(circle,rgba(255,195,107,.05),transparent 68%)}
.faq:before{left:-240px;top:40px;background:radial-gradient(circle,rgba(120,232,189,.055),transparent 68%)}

/* Programmer terminal accent on the hero without adding visual clutter */
.hero>div:first-child{position:relative}
.hero>div:first-child:after{
  content:"01  build / deploy / iterate  •  PHP 8+  •  MySQL  •  responsive_ui";
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:31px;
  padding-top:14px;
  border-top:1px dashed rgba(98,230,255,.16);
  color:rgba(148,190,210,.42);
  font:9px/1.5 Consolas,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.65px;
  white-space:normal;
}

/* Gentle scan effect, disabled for reduced motion */
@media(prefers-reduced-motion:no-preference){
  .dev-grid{animation:gridDrift 28s linear infinite}
  .ai-node:before{animation:nodeSpin 24s linear infinite}
  .ai-node-b:before{animation-duration:31s;animation-direction:reverse}
  .dev-code{animation:codeFloat 8s ease-in-out infinite alternate}
  .dev-code:nth-of-type(even){animation-delay:-3s}
  @keyframes gridDrift{to{background-position:56px 56px,56px 56px,28px 28px}}
  @keyframes nodeSpin{to{transform:rotate(360deg)}}
  @keyframes codeFloat{to{translate:0 -7px;opacity:.72}}
}

@media(max-width:900px){
  .dev-code{opacity:.55;font-size:8px}
  .dev-code-2,.dev-code-5,.circuit-line{display:none}
  .ai-node{width:145px;height:145px}
  .ai-node-a{right:-88px}.ai-node-b{left:-100px}
}
@media(max-width:650px){
  .dev-grid{opacity:.24;background-size:42px 42px,42px 42px,21px 21px}
  .dev-code-3,.dev-code-4,.dev-code-6,.ai-node-b{display:none}
  .dev-code-1{top:13%;left:-26px;font-size:7px;opacity:.34}
  .ai-node-a{top:38%;right:-105px;opacity:.45}
  .hero>div:first-child:after{font-size:8px;margin-top:24px}
}


/* ===== Typography & content hierarchy pass v4 ===== */
body{
  font-family:Inter,"Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.price,.custom-price,.brand b{
  font-family:"Segoe UI Variable Display",Inter,"Segoe UI",Arial,sans-serif;
}
h1,h2{font-weight:800}
h3{font-weight:750}
.hero h1{
  font-size:clamp(54px,5.5vw,76px);
  line-height:.98;
  letter-spacing:-3.8px;
}
.hero .lead{
  font-size:17px;
  line-height:1.85;
  color:#bfd0e4;
}
.eyebrow,.plan-tag,.art-label,.handover-copy small,.paid-badge{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  text-transform:uppercase;
}
.eyebrow{
  font-size:10px;
  letter-spacing:1.9px;
  font-weight:800;
}
h2{
  font-size:clamp(34px,3.5vw,48px);
  line-height:1.07;
  letter-spacing:-1.9px;
}
.section-head>p,.center>p:last-child{
  font-size:14px;
  color:#afc1d6;
}
.service-grid h3{
  font-size:15px;
  line-height:1.35;
  letter-spacing:-.15px;
}
.service-grid p{
  font-size:12px;
  line-height:1.7;
  color:#aebfd2;
}
.price-grid h3{
  font-size:23px;
  letter-spacing:-.4px;
}
.price-grid .price{
  font-size:43px;
  font-weight:850;
  letter-spacing:-1.8px;
}
.price-grid .price i{font-size:22px;font-weight:700}
.custom-price{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.8px;
}
.price-grid>article>p:not(.source){
  font-size:13.5px;
  color:#adbed2;
}
.price-grid h4{
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-weight:800;
  color:#91a9c1;
}
.price-grid li{
  font-size:13px;
  color:#e1eaf4;
}
.source{
  padding:10px 12px;
  border-left:2px solid rgba(154,140,255,.65);
  border-radius:0 8px 8px 0;
  background:rgba(154,140,255,.055);
  color:#bfc9e9!important;
  font-size:11.5px!important;
  line-height:1.55;
}
.handover-note{
  padding:22px 24px;
  border-color:rgba(120,232,189,.46);
  background:linear-gradient(115deg,rgba(120,232,189,.105),rgba(98,230,255,.045) 54%,rgba(154,140,255,.06));
}
.handover-copy small{
  font-size:8.5px;
  letter-spacing:1.5px;
}
.handover-copy strong{
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.25px;
  color:#f7fcff;
}
.handover-copy p{
  margin-top:5px;
  font-size:13px;
  line-height:1.6;
  color:#b8c9da;
}
.paid-badge{
  font-size:8.5px;
  letter-spacing:1px;
  padding:9px 11px;
}
.hosting h2{font-size:32px;letter-spacing:-1px}
.hosting-grid h3{font-size:15px}
.hosting-grid p{font-size:12px}
.tabs button{font-size:12.5px;font-weight:700}
.faq>div:first-child>p:not(.eyebrow){color:#acbdd1}
.faq-list summary{
  font-size:15px;
  font-weight:750;
  letter-spacing:-.1px;
}
.faq-list details>p{
  color:#afc0d3;
  font-size:13.5px;
}
.final h2{
  font-size:clamp(38px,4.4vw,58px);
  line-height:1.03;
  letter-spacing:-2.3px;
}
.nav-wrap nav>a{font-size:12.5px;font-weight:650}
.brand b{font-weight:850}
.brand-dev{color:#a6b5c8;font-weight:700}

@media(max-width:650px){
  .hero h1{font-size:clamp(44px,12vw,62px);letter-spacing:-2.7px}
  .hero .lead{font-size:15.5px;line-height:1.75}
  h2{font-size:clamp(31px,9vw,40px);letter-spacing:-1.4px}
  .service-grid h3{font-size:13.5px}
  .service-grid p{font-size:11.5px}
  .price-grid h3{font-size:21px}
  .price-grid .price{font-size:40px}
  .custom-price{font-size:29px}
  .handover-copy strong{font-size:16px}
  .handover-copy p{font-size:12px}
  .final h2{font-size:36px;letter-spacing:-1.6px}
}

/* ===== Programmer atmosphere v5 — stronger visual identity ===== */
body{
  background:
    radial-gradient(circle at 82% 8%,rgba(73,199,235,.11),transparent 28%),
    radial-gradient(circle at 8% 72%,rgba(136,104,255,.085),transparent 24%),
    #0d192b;
}
.dev-backdrop{z-index:0}
.dev-grid{
  opacity:.62;
  background-image:
    linear-gradient(rgba(98,230,255,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(98,230,255,.065) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(98,230,255,.16) 1px,transparent 1.7px);
  background-size:56px 56px,56px 56px,28px 28px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.88) 48%,rgba(0,0,0,.95) 100%);
}
.dev-backdrop:before{
  top:-19vw;right:-11vw;
  background:radial-gradient(circle,rgba(55,215,255,.20) 0,rgba(55,215,255,.075) 31%,transparent 67%);
}
.dev-backdrop:after{
  bottom:-25vw;left:-15vw;
  background:radial-gradient(circle,rgba(143,111,255,.18) 0,rgba(143,111,255,.06) 34%,transparent 69%);
}
.dev-backdrop{background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,.009) 4px)}
.dev-code{
  padding:8px 11px;
  border-color:rgba(111,213,236,.22);
  background:rgba(4,14,27,.52);
  color:rgba(137,224,244,.43);
  font-size:10.5px;
  box-shadow:0 8px 28px rgba(0,0,0,.16),inset 0 0 18px rgba(98,230,255,.025);
  text-shadow:0 0 16px rgba(98,230,255,.20);
}
.dev-code:before{color:rgba(120,232,189,.56)}
.dev-code-1{top:12%;left:1.4%}
.dev-code-2{top:29%;right:1%}
.dev-code-3{top:46%;left:2.1%;color:rgba(180,167,255,.40);border-color:rgba(154,140,255,.20)}
.dev-code-4{top:61%;right:1.2%;color:rgba(141,242,205,.40);border-color:rgba(120,232,189,.20)}
.dev-code-5{top:77%;left:1.2%;color:rgba(255,205,127,.36);border-color:rgba(255,195,107,.18)}
.dev-code-6{top:90%;right:2%}
.dev-code-7{top:20%;left:42%;transform:rotate(1deg);color:rgba(120,232,189,.30)}
.dev-code-8{top:70%;left:38%;transform:rotate(-1deg);color:rgba(177,165,255,.30)}
.dev-code-9{top:97%;left:29%;transform:rotate(.5deg);color:rgba(137,224,244,.28)}

.dev-terminal{
  position:absolute;
  width:250px;
  border:1px solid rgba(105,220,243,.22);
  border-radius:10px;
  overflow:hidden;
  background:rgba(5,14,27,.54);
  box-shadow:0 22px 55px rgba(0,0,0,.20),0 0 35px rgba(67,211,242,.045);
  backdrop-filter:blur(5px);
  color:rgba(164,223,237,.34);
  font:10px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.terminal-head{
  height:29px;display:flex;align-items:center;gap:5px;padding:0 9px;
  border-bottom:1px solid rgba(105,220,243,.15);
  background:rgba(31,60,82,.42)
}
.terminal-head i{width:6px;height:6px;border-radius:50%;background:#ff8d84;opacity:.72}
.terminal-head i:nth-child(2){background:#ffd074}.terminal-head i:nth-child(3){background:#78e8bd}
.terminal-head span{margin-left:5px;color:rgba(187,213,228,.44);font-size:8px}
.dev-terminal code{display:block;padding:12px 13px;white-space:normal}
.dev-terminal code b{color:rgba(120,232,189,.60)}
.dev-terminal code em{color:rgba(128,226,194,.37);font-style:normal}
.dev-terminal code span{display:inline-block;width:22px;color:rgba(117,148,171,.38)}
.dev-terminal-left{top:37%;left:-120px;transform:rotate(-2deg)}
.dev-terminal-right{top:82%;right:-118px;transform:rotate(2deg)}

.ai-node{border-color:rgba(98,230,255,.16);box-shadow:0 0 70px rgba(98,230,255,.07),inset 0 0 42px rgba(98,230,255,.035)}
.ai-node:before,.ai-node:after,.ai-node i{border-color:rgba(98,230,255,.18)}
.ai-node i{background:rgba(98,230,255,.72);box-shadow:0 0 18px rgba(98,230,255,.58)}
.circuit-line{opacity:.38}
.circuit-line:before,.circuit-line:after{box-shadow:0 0 15px rgba(98,230,255,.40)}

/* Large coding glyphs make empty areas feel intentionally technical */
main:before,main:after{
  position:absolute;z-index:-1;pointer-events:none;
  font:900 clamp(150px,19vw,310px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(105,220,243,.025);
  text-shadow:0 0 50px rgba(105,220,243,.025)
}
main:before{content:"</>";top:720px;right:-32px;transform:rotate(-7deg)}
main:after{content:"{}";top:2450px;left:-38px;transform:rotate(8deg);color:rgba(154,140,255,.025)}

/* Give transparent sections a subtle glass layer while preserving the backdrop */
#servis,#demo,.hosting,.faq{background:linear-gradient(180deg,rgba(10,25,42,.10),rgba(10,25,42,.02))}
.pricing,.process{background:rgba(20,39,61,.84);backdrop-filter:blur(2px)}

.payment-start-note{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:16px;
  width:min(720px,100%);margin:-14px auto 32px;padding:15px 18px;
  border:1px solid rgba(120,232,189,.42);border-radius:14px;
  background:linear-gradient(110deg,rgba(120,232,189,.11),rgba(12,31,48,.82) 44%,rgba(98,230,255,.07));
  box-shadow:0 14px 34px rgba(0,0,0,.14),0 0 28px rgba(120,232,189,.035)
}
.payment-start-note>span{
  display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:13px;
  border:1px solid rgba(120,232,189,.35);background:rgba(120,232,189,.10);
  color:#8ff0cf;font:850 22px/1 "Segoe UI Variable Display",Inter,sans-serif;
  box-shadow:inset 0 0 24px rgba(120,232,189,.035)
}
.payment-start-note small{
  display:block;margin-bottom:2px;color:#7ce2c0;
  font:800 8.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:1.4px
}
.payment-start-note strong{display:block;color:#f5fbff;font-size:15px;letter-spacing:-.2px}
.payment-start-note p{margin-top:3px;color:#afc2d4;font-size:12px;line-height:1.55}

@media(prefers-reduced-motion:no-preference){
  .dev-terminal-left{animation:terminalFloatL 10s ease-in-out infinite alternate}
  .dev-terminal-right{animation:terminalFloatR 12s ease-in-out infinite alternate}
  @keyframes terminalFloatL{to{transform:rotate(-1deg) translateY(-10px)}}
  @keyframes terminalFloatR{to{transform:rotate(1deg) translateY(10px)}}
}
@media(max-width:1050px){
  .dev-terminal{opacity:.58;transform:scale(.88)}
  .dev-terminal-left{left:-155px}.dev-terminal-right{right:-160px}
  .dev-code-7,.dev-code-8,.dev-code-9{display:none}
}
@media(max-width:650px){
  .dev-grid{opacity:.42}
  .dev-terminal{display:none}
  .dev-code{border-color:rgba(111,213,236,.16);background:rgba(4,14,27,.38)}
  main:before,main:after{font-size:130px;opacity:.55}
  .payment-start-note{margin-top:-6px;padding:13px 14px;gap:12px}
  .payment-start-note>span{flex-basis:52px;height:52px;font-size:18px}
  .payment-start-note strong{font-size:13.5px}
  .payment-start-note p{font-size:11.5px}
}

/* ===== PAYMENT FLOW REFINEMENT ===== */
.payment-flow{
  position:relative;
  z-index:2;
  margin-top:30px;
  padding:22px;
  border:1px solid rgba(101,220,241,.28);
  border-radius:17px;
  background:linear-gradient(125deg,rgba(101,220,241,.075),rgba(11,28,46,.86) 46%,rgba(154,140,255,.055));
  box-shadow:0 18px 45px rgba(0,0,0,.16);
  overflow:hidden;
}
.payment-flow:before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-100px;top:-120px;
  border-radius:50%;
  background:rgba(101,220,241,.08);
  filter:blur(8px);
  pointer-events:none;
}
.payment-flow-head{display:flex;align-items:baseline;gap:12px 18px;flex-wrap:wrap;margin-bottom:18px}
.payment-flow-head small{
  color:#7ee8f8;
  font:800 8.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:1.35px;
}
.payment-flow-head strong{font-size:16px;color:#f6fbff;letter-spacing:-.25px}
.payment-flow-head p{margin-left:auto;color:#aebfd2;font-size:11.5px}
.payment-flow-steps{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
  gap:10px;
}
.flow-step{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:14px;
  border:1px solid rgba(87,126,160,.30);
  border-radius:12px;
  background:rgba(18,39,61,.64);
}
.flow-step>b{
  flex:0 0 30px;
  display:grid;
  place-items:center;
  height:30px;
  border-radius:8px;
  color:#8cecff;
  border:1px solid rgba(101,220,241,.27);
  background:rgba(101,220,241,.08);
  font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.flow-step span{display:block;min-width:0}
.flow-step strong{display:block;color:#eef8ff;font-size:11.5px;line-height:1.35}
.flow-step small{display:block;margin-top:4px;color:#9fb3c9;font-size:9.5px;line-height:1.45}
.payment-flow-steps>i{
  align-self:center;
  color:rgba(116,224,243,.55);
  font-style:normal;
  font-size:17px;
}
.flow-step:nth-of-type(3)>b{color:#c5bcff;border-color:rgba(154,140,255,.27);background:rgba(154,140,255,.08)}
.flow-step:nth-of-type(4)>b{color:#94ebcd;border-color:rgba(120,232,189,.27);background:rgba(120,232,189,.08)}
.price-note{margin-top:15px}
@media(max-width:900px){
  .payment-flow-head p{width:100%;margin-left:0}
  .payment-flow-steps{grid-template-columns:1fr 1fr;gap:10px}
  .payment-flow-steps>i{display:none}
}
@media(max-width:650px){
  .payment-flow{padding:17px;margin-top:22px}
  .payment-flow-head{display:block;margin-bottom:14px}
  .payment-flow-head small{display:block;margin-bottom:4px}
  .payment-flow-head strong{font-size:14px}
  .payment-flow-head p{margin-top:4px;font-size:11px}
  .payment-flow-steps{grid-template-columns:1fr}
  .flow-step{padding:12px}
  .flow-step strong{font-size:11.5px}
}

/* ===== v6 — full-page programmer background + safe sticky header + back-to-top ===== */
html{
  scroll-padding-top:108px;
}
#servis,#harga,#demo,#faq{
  scroll-margin-top:108px;
}

/* Keep the sticky nav readable: content can pass behind it, but never show through it. */
.site-header{
  position:sticky;
  top:0;
  z-index:80 !important;
  background:#0b1728;
  border-bottom:1px solid rgba(101,220,241,.16);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 10px 32px rgba(0,0,0,.20);
}
.site-header:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(101,220,241,.35),rgba(154,140,255,.25),transparent);
  pointer-events:none;
}

/* Let the AI/developer atmosphere continue through every part of the page. */
main,
.audience,
.pricing,
.process,
#servis,
#demo,
.hosting,
.faq,
body>footer{
  position:relative;
  background-color:transparent;
}
.audience{
  background:linear-gradient(90deg,rgba(15,32,52,.76),rgba(20,43,65,.66),rgba(15,32,52,.76));
  backdrop-filter:blur(1.5px);
  border-block-color:rgba(101,220,241,.14);
}
.pricing{
  background:
    radial-gradient(circle at 50% 12%,rgba(101,220,241,.075),transparent 31%),
    linear-gradient(180deg,rgba(9,24,40,.55),rgba(16,34,54,.50));
  backdrop-filter:blur(1px);
  border-block-color:rgba(101,220,241,.14);
}
.process{
  background:
    radial-gradient(circle at 13% 48%,rgba(154,140,255,.065),transparent 28%),
    linear-gradient(180deg,rgba(14,30,49,.52),rgba(10,25,42,.46));
  backdrop-filter:blur(1px);
  border-block-color:rgba(154,140,255,.14);
}
#servis,#demo,.hosting,.faq{
  background:linear-gradient(180deg,rgba(6,20,34,.12),rgba(7,23,39,.04));
}
body>footer{
  background:rgba(7,20,35,.42);
  backdrop-filter:blur(2px);
}

/* Section-level code traces keep the programmer theme visible after the hero. */
.pricing:before,.process:before,#demo:after,#servis:after{
  position:absolute;
  z-index:0;
  pointer-events:none;
  color:rgba(123,218,239,.10);
  font:600 9px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.7px;
  white-space:nowrap;
}
.pricing:before{content:"$ calculate(scope)  // modules · roles · workflow · database";left:3.5%;top:38px}
.process:before{content:"git status  →  scope → develop → review → deploy";right:4%;top:38px;color:rgba(171,157,255,.10)}
#demo:after{content:"GET /dashboard  200 OK   ·   render(component)";right:1%;bottom:34px}
#servis:after{content:"SELECT solution FROM requirements WHERE custom = true;";left:1%;bottom:38px;color:rgba(120,232,189,.09)}
.pricing>.container,.process>.container,#demo>* ,#servis>*{position:relative;z-index:1}

/* Floating back-to-top control. Hidden until the page has been scrolled. */
.scroll-top{
  position:fixed;
  right:22px;
  bottom:78px;
  z-index:75;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:5px 0 4px;
  border:1px solid rgba(101,220,241,.42);
  border-radius:12px;
  background:rgba(12,31,49,.96);
  color:#8cecff;
  box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 0 22px rgba(101,220,241,.045);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,border-color .2s ease,background .2s ease;
}
.scroll-top span{display:block;font:800 20px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.scroll-top small{display:block;font:800 6px/8px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:1.1px;color:#8ba8bc}
.scroll-top:hover{border-color:#78e8f7;background:#143a52;color:#c0f7ff;transform:translateY(-2px)}
.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:focus-visible{outline:2px solid #7ee8f8;outline-offset:3px}

@media(max-width:650px){
  html{scroll-padding-top:88px}
  #servis,#harga,#demo,#faq{scroll-margin-top:88px}
  .site-header{box-shadow:0 8px 24px rgba(0,0,0,.24)}
  .scroll-top{right:15px;bottom:72px;width:43px;height:43px;border-radius:11px}
  .pricing:before,.process:before,#demo:after,#servis:after{font-size:7px;opacity:.75;max-width:86vw;overflow:hidden}
}