/* Computer Support (parts/compsupport.php) + Website Development (parts/webdev.php). */

/* ── Computer support ─────────────────────────────────────────────────── */
.csx{position:relative;overflow:hidden}
.csx:before{content:"";position:absolute;right:-15%;top:-30%;width:70%;height:130%;background:radial-gradient(closest-side,rgba(46,224,214,.16),transparent);animation:drift 16s ease-in-out infinite alternate;pointer-events:none}
.csx-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;position:relative}
@media (max-width:980px){.csx-grid{grid-template-columns:1fr}}
.csx-dash{display:flex;flex-direction:column;gap:16px;padding:24px!important}
.csx-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.csx-g{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:#0A1F3D;border-radius:14px;padding:12px}
.csx-g svg{width:90px;height:90px;transform:rotate(-90deg)}
.csx-g .bg,.csx-g .fg{fill:none;stroke-width:9}
.csx-g .bg{stroke:#16365F}
.csx-g .fg{stroke:#FA5252;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s ease,stroke .8s}
.csx-g b{position:absolute;top:40px;font-family:Sora,sans-serif;font-size:18px;font-variant-numeric:tabular-nums}
.csx-g small{color:#9FB3D3;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.csx-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){.csx-checks{grid-template-columns:1fr}}
.csx-checks li{display:grid;grid-template-columns:12px 1fr;column-gap:10px;row-gap:2px;align-items:center;padding:10px 12px;border-radius:12px;background:#0F2E58;font-size:13.5px;transition:background .4s}
.csx-checks .dot{position:static!important;inset:auto!important;transform:none!important;animation:none!important;opacity:1!important;margin:0!important;width:10px;height:10px;border-radius:50%;background:#3A5A86;grid-column:1;grid-row:1 / span 2;transition:background .4s,box-shadow .4s}
.csx-checks strong{grid-column:2;grid-row:1;min-width:0}.csx-checks em{grid-column:2;grid-row:2;min-width:0}
.csx-checks em{font-style:normal;font-size:12px;color:#9FB3D3}
.csx-checks li.scan .dot{background:#FCC419;box-shadow:0 0 10px #FCC419}
.csx-checks li.bad .dot{background:#FA5252;box-shadow:0 0 10px #FA5252}.csx-checks li.bad em{color:#FFA8A8}
.csx-checks li.ok{background:rgba(64,192,87,.12)}.csx-checks li.ok .dot{background:#40C057;box-shadow:0 0 10px #40C057}.csx-checks li.ok em{color:#8CE99A}
.csx-side{display:flex;flex-direction:column;gap:18px}
.csx-boot{display:flex;flex-direction:column;gap:14px}
.csx-boot small{color:#9FB3D3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.csx-bars>div{display:grid;grid-template-columns:56px 1fr 44px;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.csx-bars i{height:12px;border-radius:6px;width:0;transition:width 1.4s cubic-bezier(.6,0,.2,1)}
.csx-bars .b1{background:linear-gradient(90deg,#FA5252,#FF922B)}.csx-bars .b2{background:linear-gradient(90deg,#0866FF,#2EE0D6)}
.csx-bars b{font-family:Sora,sans-serif}
.csx-boot p,.csx-tech p{margin:0;color:#B9C8E2;font-size:14px}
.csx-tech{display:flex;gap:14px;align-items:center}
.csx-tech img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0;animation:floaty2 4s ease-in-out infinite}
@keyframes floaty2{50%{transform:translateY(-5px)}}
.csx-tools li{align-items:center;text-align:center}
.csx-tools .svc-ico{background:linear-gradient(145deg,#EEF4FF,#FFF4E6)}.csx-tools .svc-ico svg{color:#0866FF}

/* ── Website development: live build ──────────────────────────────────── */
.wdx{position:relative;overflow:hidden}
.wdx-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:48px;align-items:center}
@media (max-width:980px){.wdx-grid{grid-template-columns:1fr}}
.wdx-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:w}
.wdx-steps li{counter-increment:w;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#9FB3D3;font-weight:700;font-size:13.5px;transition:.35s}
.wdx-steps li:before{content:counter(w) ". "}
.wdx-steps li.on{background:linear-gradient(135deg,#0866FF,#00A7C4);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(8,102,255,.35)}
.wdx-steps li.done{color:#5EE6DF;border-color:rgba(46,224,214,.4)}
.wdx-stage{position:relative;padding:10px 0 40px}
.wdx-browser{width:100%;max-width:640px;margin:0 auto;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);transition:max-width .9s cubic-bezier(.6,0,.2,1)}
.wdx-stage.mobile .wdx-browser{max-width:300px}
.wdx-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#E9EEF5}
.wdx-bar i{width:9px;height:9px;border-radius:50%;background:#FF6B6B}.wdx-bar i:nth-child(2){background:#FCC419}.wdx-bar i:nth-child(3){background:#51CF66}
.wdx-bar span{margin-left:10px;flex:1;background:#fff;border-radius:6px;padding:3px 10px;font-size:11.5px;color:#5A6C88}
.wdx-page{padding:14px;display:flex;flex-direction:column;gap:12px;min-height:280px}
.wdx-nav{display:flex;align-items:center;gap:10px}
.wdx-nav b{width:70px;height:14px;border-radius:4px;background:#C9D6EA;transition:.6s}
.wdx-nav span{width:38px;height:8px;border-radius:4px;background:#E3EAF4}
.wdx-nav em{margin-left:auto;width:64px;height:22px;border-radius:6px;background:#E3EAF4;transition:.6s}
.wdx-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:center;padding:14px;border-radius:12px;background:#F1F5FB;transition:background .8s}
.wdx-hero h5{margin:0 0 10px;height:18px;width:90%;border-radius:4px;background:#C9D6EA;transition:.6s}
.wdx-hero p{margin:0 0 6px;height:8px;width:100%;border-radius:4px;background:#DCE5F1}.wdx-hero p.s{width:70%}
.wdx-hero a{display:block;margin-top:10px;width:90px;height:26px;border-radius:7px;background:#C9D6EA;transition:.6s}
.wdx-hero figure{margin:0;aspect-ratio:4/3;border-radius:10px;background:#DCE5F1;transition:.8s}
.wdx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wdx-cards span{height:70px;border-radius:10px;background:#EEF2F8;border:1px dashed #C9D6EA;transition:.6s}
.wdx-stage.mobile .wdx-hero{grid-template-columns:1fr}.wdx-stage.mobile .wdx-cards{grid-template-columns:1fr}.wdx-stage.mobile .wdx-cards span{height:34px}.wdx-stage.mobile .wdx-nav span{display:none}
/* Design state */
.wdx-stage.styled .wdx-nav b{background:linear-gradient(90deg,#0866FF,#00BFB8)}
.wdx-stage.styled .wdx-nav em,.wdx-stage.styled .wdx-hero a{background:#0866FF;box-shadow:0 6px 14px rgba(8,102,255,.35)}
.wdx-stage.styled .wdx-hero{background:linear-gradient(135deg,#071A35,#0C3A7A)}
.wdx-stage.styled .wdx-hero h5{background:#fff}
.wdx-stage.styled .wdx-hero p{background:rgba(255,255,255,.45)}
.wdx-stage.styled .wdx-hero figure{background:radial-gradient(circle at 30% 30%,#2EE0D6,#0866FF 60%,#071A35);animation:blob 6s ease-in-out infinite}
@keyframes blob{50%{border-radius:40% 60% 50% 50%/50% 40% 60% 50%}}
.wdx-stage.styled .wdx-cards span{border:0;background:linear-gradient(160deg,#fff,#E8F0FF);box-shadow:0 8px 18px rgba(7,26,53,.08)}
.wdx-code{position:absolute;left:-10px;bottom:0;width:min(270px,60%);background:#071A35;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.wdx-code pre{margin:0;font:11.5px/1.6 ui-monospace,Consolas,monospace;color:#8EE7E2;white-space:pre-wrap;min-height:74px}
.wdx-score{position:absolute;right:-6px;top:30px;width:92px;height:92px;border-radius:50%;background:#071A35;border:4px solid #40C057;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 18px 36px rgba(0,0,0,.4)}
.wdx-score b{font-family:Sora,sans-serif;font-size:26px;color:#69DB7C}.wdx-score small{font-size:10px;color:#9FB3D3}

/* ── Showcase gallery: 8 animated concepts ─────────────────────────────── */
.wdx-gallery{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.js .wdx-gallery>.reveal{transition-delay:calc(var(--i,0) * 80ms)}
.wdx-gallery li{display:flex;flex-direction:column;gap:10px}
.wdx-mini{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(7,26,53,.12);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;transform:perspective(900px) rotateX(4deg)}
.wdx-gallery li:hover .wdx-mini{transform:perspective(900px) rotateX(0) translateY(-8px);box-shadow:0 30px 60px rgba(7,26,53,.2)}
.mb{display:flex;gap:5px;padding:7px 10px;background:#E9EEF5}.mb i{width:7px;height:7px;border-radius:50%;background:#C9D6EA}
.mp{position:relative;aspect-ratio:16/11;overflow:hidden;display:flex;flex-direction:column}
.mn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;z-index:2}
.mn b{font-family:Sora,sans-serif;font-size:12px;margin-right:auto}
.mn span{width:26px;height:5px;border-radius:3px;background:currentColor;opacity:.35}
.mh{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 14px;z-index:1}
.mh strong{font-family:Sora,sans-serif;font-size:17px;line-height:1.15;max-width:70%;position:relative;z-index:2}
.mh a{align-self:flex-start;font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;position:relative;z-index:2;transition:transform .3s}
.wdx-gallery li:hover .mh a{transform:scale(1.08)}
.mc{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px 12px;z-index:2}
.mc span{height:26px;border-radius:6px}
.deco{position:absolute;pointer-events:none}
.wdx-cap{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.wdx-cap strong{font-family:Sora,sans-serif}.wdx-cap span{font-size:12.5px;color:var(--muted)}

/* 1 Restaurant — warm, steam rising */
.t-ember .mp{background:linear-gradient(160deg,#2B1608,#5C2E12);color:#FFE8CC}
.t-ember .mh a{background:#FF922B;color:#2B1608}.t-ember .mc span{background:rgba(255,232,204,.12)}
.t-ember .d1{right:14%;bottom:24%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#FFB86B,#E8590C 55%,transparent 70%);animation:pulseglow 3s ease-in-out infinite}
.t-ember .d2,.t-ember .d3{right:20%;bottom:48%;width:6px;height:28px;border-radius:6px;background:rgba(255,255,255,.35);filter:blur(2px);animation:steam 2.6s ease-in infinite}
.t-ember .d3{right:25%;animation-delay:1.3s}
@keyframes steam{0%{opacity:0;transform:translateY(10px) scaleY(.6)}40%{opacity:.8}100%{opacity:0;transform:translateY(-26px) scaleY(1.2)}}
@keyframes pulseglow{50%{transform:scale(1.08);filter:brightness(1.15)}}
/* 2 Clinic — clean, heartbeat line */
.t-clinic .mp{background:linear-gradient(180deg,#F1FBFB,#fff);color:#0B4F4C}
.t-clinic .mh a{background:#12B886;color:#fff}.t-clinic .mc span{background:#E3FAF5}
.t-clinic .d1{left:0;right:0;top:44%;height:30px;background:linear-gradient(90deg,transparent 0 30%,#12B886 30% 31%,transparent 31%) 0 0/60px 100%;opacity:.0}
.t-clinic .d2{right:10%;top:22%;width:64px;height:64px;border-radius:16px;background:#12B886;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);animation:beat 1.4s ease-in-out infinite}
.t-clinic .d3{right:6%;bottom:30%;width:120px;height:30px;background:linear-gradient(90deg,#12B886,#12B886) 0 50%/100% 2px no-repeat;-webkit-mask:linear-gradient(90deg,#000 50%,transparent 0) 0 0/200% 100%;animation:ecg 2s linear infinite}
@keyframes beat{15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
@keyframes ecg{to{-webkit-mask-position:-200% 0}}
/* 3 Real estate — skyline rising */
.t-estate .mp{background:linear-gradient(180deg,#0B2545 0,#13315C 60%,#8DA9C4 100%);color:#fff}
.t-estate .mh a{background:#EEF4ED;color:#0B2545}.t-estate .mc span{background:rgba(255,255,255,.14)}
.t-estate .d1,.t-estate .d2,.t-estate .d3{bottom:0;width:16%;background:linear-gradient(180deg,#EEF4ED,#8DA9C4);transform-origin:bottom;animation:rise 4s ease-in-out infinite}
.t-estate .d1{right:6%;height:62%}.t-estate .d2{right:24%;height:44%;animation-delay:.4s}.t-estate .d3{right:42%;height:30%;animation-delay:.8s;opacity:.7}
@keyframes rise{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1)}}
/* 4 Fitness — bold neon, moving stripes */
.t-fit .mp{background:#0D0D0D;color:#E6FF4F}
.t-fit .mh strong{font-weight:900;text-transform:uppercase;font-size:16px}
.t-fit .mh a{background:#E6FF4F;color:#0D0D0D}.t-fit .mc span{background:#1F1F1F;border:1px solid #333}
.t-fit .d1{right:-20%;top:0;bottom:0;width:70%;background:repeating-linear-gradient(115deg,#E6FF4F 0 10px,transparent 10px 26px);opacity:.25;animation:stripes2 1.4s linear infinite}
.t-fit .d2{right:14%;top:30%;width:56px;height:56px;border:6px solid #E6FF4F;border-radius:50%;animation:spinring 3s linear infinite;border-right-color:transparent}
@keyframes stripes2{to{background-position:52px 0}}
@keyframes spinring{to{transform:rotate(360deg)}}
/* 5 SaaS — gradient mesh, floating cards */
.t-saas .mp{background:radial-gradient(circle at 80% 20%,#C0A9FF,transparent 50%),radial-gradient(circle at 20% 90%,#8CE0FF,transparent 50%),#F6F4FF;color:#2B1B5C}
.t-saas .mh a{background:#6741D9;color:#fff}.t-saas .mc span{background:#fff;box-shadow:0 4px 10px rgba(103,65,217,.12)}
.t-saas .d1,.t-saas .d2{right:8%;width:92px;height:40px;border-radius:10px;background:#fff;box-shadow:0 10px 24px rgba(103,65,217,.2);animation:floatc 4s ease-in-out infinite}
.t-saas .d1{top:20%}.t-saas .d2{top:48%;right:20%;animation-delay:-2s;background:linear-gradient(90deg,#6741D9 0 30%,#fff 30%)}
@keyframes floatc{50%{transform:translateY(-8px)}}
/* 6 Store — product carousel sliding */
.t-shop .mp{background:#FFF8F0;color:#5C3D2E}
.t-shop .mh a{background:#5C3D2E;color:#FFF8F0}.t-shop .mc span{background:#F3E3D3}
.t-shop .d1{right:6%;top:18%;width:42%;height:58%;border-radius:14px;background:linear-gradient(90deg,#E8C4A0 0 33%,#C9A27E 33% 66%,#A47A5B 66%) 0 0/300% 100%;animation:slide3 6s steps(3) infinite}
.t-shop .d2{right:8%;top:20%;padding:3px 7px;border-radius:999px;background:#E8590C;color:#fff;font-size:9px;font-weight:800}
.t-shop .d2:before{content:"NEW"}
@keyframes slide3{to{background-position:-300% 0}}
/* 7 Law — elegant serif, scales balancing */
.t-law .mp{background:linear-gradient(180deg,#1C1C1C,#2E2A24);color:#E9D8A6}
.t-law .mh strong{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.01em}
.t-law .mh a{background:transparent;border:1px solid #E9D8A6;color:#E9D8A6}.t-law .mc span{background:rgba(233,216,166,.1)}
.t-law .d1{right:16%;top:26%;width:80px;height:2px;background:#E9D8A6;animation:balance 4s ease-in-out infinite}
.t-law .d2{right:calc(16% + 39px);top:26%;width:2px;height:52px;background:#E9D8A6}
.t-law .d3{right:12%;top:30%;width:96px;height:20px;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:0;background:radial-gradient(circle at 10px 10px,#E9D8A6 6px,transparent 7px),radial-gradient(circle at 86px 10px,#E9D8A6 6px,transparent 7px);animation:balance 4s ease-in-out infinite}
@keyframes balance{25%{transform:rotate(6deg)}75%{transform:rotate(-6deg)}}
/* 8 Travel — plane flying over sky */
.t-travel .mp{background:linear-gradient(180deg,#4DABF7,#A5D8FF 60%,#FFE8CC);color:#0B3D66}
.t-travel .mh a{background:#FF6B6B;color:#fff}.t-travel .mc span{background:rgba(255,255,255,.6)}
.t-travel .d1{top:22%;left:-20%;width:26px;height:10px;background:#fff;clip-path:polygon(0 40%,70% 40%,100% 50%,70% 60%,0 60%,30% 50%,10% 0,25% 0,50% 40%,50% 60%,25% 100%,10% 100%);animation:fly 7s linear infinite}
.t-travel .d2,.t-travel .d3{top:16%;width:60px;height:18px;border-radius:20px;background:rgba(255,255,255,.85);animation:cloud 14s linear infinite}
.t-travel .d2{right:-30%}.t-travel .d3{top:34%;right:-50%;animation-duration:20s;transform:scale(.7)}
@keyframes fly{0%{left:-15%;transform:translateY(0)}50%{transform:translateY(-10px)}100%{left:115%;transform:translateY(0)}}
@keyframes cloud{to{right:130%}}
.wdx-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.wdx-stack span{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;color:#26385A;transition:transform .25s,border-color .25s,color .25s}
.wdx-stack span:hover{transform:translateY(-3px);border-color:#0866FF;color:#0450C4}
@media (prefers-reduced-motion:reduce){.csx:before,.csx-tech img,.wdx-stage.styled .wdx-hero figure,.wdx-mini .deco{animation:none!important}}