/* ===== LogicTech × theme file (modernised) ===== */
.g-kicker{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#7FE7FF;margin-bottom:14px}
.g-hero{position:relative;overflow:hidden;color:#fff;padding:150px 0 140px;background:linear-gradient(135deg,#063a5b 0%,#0a6f93 45%,#0fb5d0 100%)}
.g-hero h1{color:#fff;font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-.02em}
.g-hero h1 span{display:block;font-weight:300}
.g-hero p{color:#d6f3ff;font-size:18px;max-width:560px;margin-top:18px}
.g-hero-txt{position:relative;z-index:2;max-width:640px}
.g-hero-txt.center{margin:0 auto;text-align:center;max-width:900px}
.g-hero-txt.center p{margin-inline:auto}
.g-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.g-btns .bg-white{color:#0a5f80!important}
/* contour lines */
.g-contour{position:absolute;right:-6%;top:-12%;width:min(900px,80vw);opacity:.85;z-index:1}
.g-contour path{animation:gWob 9s ease-in-out infinite alternate;transform-origin:300px 300px}
@keyframes gWob{to{transform:rotate(6deg) scale(1.03)}}
.g-hero-about::after{content:"";position:absolute;left:-10%;bottom:-40%;width:70%;height:90%;border-radius:50%;background:radial-gradient(circle,rgba(18,216,255,.35),transparent 65%);filter:blur(20px)}
/* showcase frame */
.g-showcase{margin-top:-90px;position:relative;z-index:3}
.g-frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(4,40,70,.7)}
.g-frame img{width:100%;height:440px;object-fit:cover;display:block;filter:saturate(1.05)}
.g-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,30,52,.85),rgba(4,30,52,.1) 60%)}
.g-frame-cap{position:absolute;left:34px;bottom:30px;z-index:2;color:#fff}
.g-frame-cap b{display:block;font-size:26px}.g-frame-cap span{color:#cfefff}
.g-frame-stats{position:absolute;right:28px;bottom:28px;z-index:2;display:flex;gap:10px}
.g-frame-stats div{backdrop-filter:blur(10px);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:12px 18px;color:#fff;text-align:center}
.g-frame-stats b{display:block;font-size:24px}.g-frame-stats span{font-size:13px;color:#d6f3ff}
@media(max-width:767px){.g-frame img{height:320px}.g-frame-stats{left:16px;right:16px;bottom:16px;justify-content:space-between}.g-frame-cap{bottom:110px;left:18px}.g-frame-stats div{padding:8px 10px}}
/* about */
.g-stack{position:relative;height:480px}
.g-stack img{position:absolute;border-radius:24px;object-fit:cover;box-shadow:0 30px 60px -30px rgba(0,40,80,.5)}
.g-stack .a{left:0;top:40px;width:46%;height:380px}
.g-stack .b{left:30%;top:0;width:62%;height:470px}
.g-lead{font-size:19px;font-weight:600;color:var(--header);margin:16px 0 10px}
.g-ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-ticks li::before{content:"✓ ";color:#0fb5d0;font-weight:700}
@media(max-width:767px){.g-stack{height:340px}.g-stack .a{height:260px}.g-stack .b{height:330px}.g-ticks{grid-template-columns:1fr}}
/* clients wall */
.g-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.g-client{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #E1EAF7;transition:.3s}
.g-client:hover{transform:translateY(-5px);border-color:var(--bc);box-shadow:0 30px 60px -30px var(--bc)}
.g-client .lg{height:130px;display:grid;place-items:center;padding:18px;background:linear-gradient(160deg,#F6F9FF,#EAF2FF);position:relative}
.g-client .lg img{max-height:82px;max-width:80%;object-fit:contain;display:none}
.g-client .lg.ok img{display:block}.g-client .lg.ok .wm{display:none}
.g-client .wm{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px;color:#14223d}
.g-client .wm b{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--bc);color:#fff;font-size:17px;box-shadow:0 10px 22px -10px var(--bc)}
.g-client .cm{padding:16px 18px;display:grid;gap:2px}
.g-client .cm b{font-size:17px;color:var(--header)}.g-client .cm span{color:var(--text);font-size:14.5px}
.g-client .cm i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:13px;color:#1E86FF;margin-top:4px}
.g-marq{margin-top:26px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.g-marq div{display:flex;gap:26px;width:max-content;animation:gMq 40s linear infinite;font-weight:600;color:#8aa0bf;white-space:nowrap}
.g-marq em{font-style:normal;color:#0fb5d0}
@keyframes gMq{to{transform:translateX(-50%)}}
@media(max-width:991px){.g-cgrid{grid-template-columns:1fr 1fr}}@media(max-width:575px){.g-cgrid{grid-template-columns:1fr}}
/* what we do */
.g-whatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g-wcard{border-radius:22px;overflow:hidden;background:#fff;border:1px solid #E1EAF7;transition:.3s;display:block}
.g-wcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(15,181,208,.6)}
.g-wcard img{width:100%;height:210px;object-fit:cover;display:block;background:#EAF6FF}
.g-wcard div{padding:20px}.g-wcard span{font-family:"JetBrains Mono",monospace;color:#0fb5d0;font-size:13px}
.g-wcard b{display:block;font-size:21px;color:var(--header);margin:6px 0}.g-wcard p{margin:0}
@media(max-width:991px){.g-whatgrid{grid-template-columns:1fr}}
/* services hero (sky + mountains) */
.g-hero-serv{padding:170px 0 210px;background:linear-gradient(180deg,#0a3d63 0%,#1279a8 45%,#bfe9ff 100%)}
.g-sky{position:absolute;inset:0;background:radial-gradient(800px 300px at 50% 20%,rgba(255,255,255,.35),transparent 70%)}
.g-mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:240px}
.g-frames i{position:absolute;border:10px solid rgba(255,255,255,.22);width:200px;height:200px;top:90px;left:9%}
.g-frames i+i{left:auto;right:30%;top:110px;width:180px;height:180px}
.g-hero-serv h1{text-transform:uppercase;font-weight:800;text-shadow:0 10px 40px rgba(0,30,60,.4)}
.g-type{color:#fff;font-size:clamp(28px,3.6vw,48px);font-weight:300;text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.g-type span{font-weight:700;color:#12D8FF;border-bottom:3px solid #12D8FF;transition:opacity .25s}
.g-caret{display:inline-block;width:3px;height:.9em;background:#fff;margin-left:6px;vertical-align:-.08em;animation:gBlink 1s steps(1) infinite}
@keyframes gBlink{50%{opacity:0}}
/* tiles */
.g-tiles-sec{position:relative;padding:100px 0 0;background:linear-gradient(180deg,#F4F8FB 0 72%,#2f3236 72% 100%)}
.g-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g-tile{aspect-ratio:1/0.95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:14px;color:#fff!important;background:#7fe3f7;transition:.3s;position:relative;overflow:hidden}
.g-tile:nth-child(3n+2){background:#a9ecf9}.g-tile:nth-child(3n){background:#5dd8f2}
.g-tile:nth-child(n+7){background:#1d93ad}.g-tile:nth-child(8){background:#17788f}.g-tile:nth-child(9){background:#2b5f6e}
.g-tile i{font-size:46px;transition:transform .3s}
.g-tile span{font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:15px}
.g-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 50%);opacity:0;transition:.3s}
.g-tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,80,110,.6)}
.g-tile:hover i{transform:scale(1.12)}.g-tile:hover::after{opacity:1}
@media(max-width:575px){.g-tile i{font-size:32px}.g-tile span{font-size:12px}}
/* why us dark */
.g-why{background:#2f3236;color:#fff;padding:70px 0 110px}
.g-why h2{color:#fff;font-size:clamp(36px,4.5vw,58px);font-weight:300}.g-why h2 b{font-weight:800}
.g-whyrow{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:40px;text-align:center}
.g-whyrow span{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 18px;transition:.3s}
.g-whyrow span i{font-size:38px;color:#16191d}
.g-whyrow div:hover span{background:#12D8FF;transform:translateY(-4px)}
.g-whyrow b{display:block;text-transform:uppercase;font-size:16px;letter-spacing:.5px;color:#fff}
.g-whyrow p{color:#c8ccd2;font-size:14.5px;margin-top:8px}
@media(max-width:991px){.g-whyrow{grid-template-columns:1fr 1fr}}@media(max-width:480px){.g-whyrow{grid-template-columns:1fr}}
/* cta */
.g-cta{position:relative;overflow:hidden;padding:120px 0 220px;background:radial-gradient(900px 400px at 50% 0,#2b3566,#11142a 70%)}
.g-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 60%,#cfe,transparent),radial-gradient(1px 1px at 85% 50%,#fff,transparent),radial-gradient(1px 1px at 10% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 40%,#fff,transparent);opacity:.7;animation:gTw 4s ease-in-out infinite alternate}
@keyframes gTw{to{opacity:.35}}
.g-cta h2{color:#fff;text-transform:uppercase;font-weight:400;font-size:clamp(28px,3.4vw,44px);position:relative;z-index:2}
.g-outline{display:inline-block;margin-top:26px;padding:14px 26px;border:2px solid #12D8FF;color:#12D8FF!important;font-size:22px;text-transform:uppercase;position:relative;z-index:2;transition:.3s}
.g-outline:hover{background:#12D8FF;color:#071a2a!important;box-shadow:0 0 30px rgba(18,216,255,.6)}
.g-cta .g-mtn path{fill:rgba(120,130,150,.35)}.g-cta .g-mtn path+path{fill:rgba(90,96,112,.6)}.g-cta .g-mtn path+path+path{fill:#2a2d38}
/* subscriptions */
.g-hero-subs{padding:150px 0 110px;background:linear-gradient(180deg,#071226 0%,#0b4a73 55%,#12b7d6 100%)}
.g-hero-subs h1 span{display:inline;font-weight:800;color:#12D8FF}
.g-float i{position:absolute;color:rgba(255,255,255,.12);font-size:44px;animation:gFl 7s ease-in-out infinite}
.g-float i:nth-child(1){left:6%;top:22%}.g-float i:nth-child(2){left:18%;top:62%;animation-delay:-2s}.g-float i:nth-child(3){left:32%;top:18%;animation-delay:-4s}.g-float i:nth-child(4){right:30%;top:28%;animation-delay:-1s}
.g-float i:nth-child(5){right:12%;top:18%;animation-delay:-3s}.g-float i:nth-child(6){right:6%;top:58%;animation-delay:-5s}.g-float i:nth-child(7){left:46%;top:70%;animation-delay:-2.5s}.g-float i:nth-child(8){right:44%;top:12%;animation-delay:-6s}
@keyframes gFl{50%{transform:translateY(-16px) rotate(8deg)}}
.g-featrow{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px;text-align:center}
.g-featrow div{color:#fff;padding:16px 8px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.g-featrow i{font-size:26px;color:#7FE7FF;display:block;margin-bottom:8px}.g-featrow b{font-size:14.5px}
@media(max-width:991px){.g-featrow{grid-template-columns:repeat(3,1fr)}}
.g-subgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.g-sub{display:flex;gap:20px;align-items:center;padding:26px;border-radius:22px;background:#fff;border:1px solid #E1EAF7;box-shadow:0 20px 50px -35px rgba(0,40,80,.35);transition:.3s}
.g-sub:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px var(--bc)}
.g-sub.dark{background:#2f3236;border-color:#2f3236}.g-sub.dark h3{color:#fff}.g-sub.dark p{color:#c8ccd2}
.g-sub .mark{flex:0 0 96px;height:96px;border-radius:24px;display:grid;place-items:center;background:var(--bc);box-shadow:0 18px 30px -16px var(--bc)}
.g-sub .mark b{color:#fff;font-size:30px;font-weight:800;letter-spacing:-1px}
.g-sub .tx span{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:#8aa0bf;text-transform:uppercase;letter-spacing:1px}
.g-sub h3{font-size:24px;margin:4px 0 6px;color:var(--bc);filter:brightness(.85)}
.g-sub.dark h3{filter:none}
.g-sub p{margin:0 0 10px;font-size:15px}
.g-sub a{font-weight:600;color:#1E86FF}.g-sub.dark a{color:#12D8FF}
@media(max-width:767px){.g-subgrid{grid-template-columns:1fr}.g-sub{flex-direction:column;align-items:flex-start}}
.g-bundle{margin:30px 0;padding:44px;border-radius:28px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;color:#fff;background:linear-gradient(135deg,#141834,#232a5a);position:relative;overflow:hidden}
.g-bundle h2{color:#fff;font-size:clamp(28px,3.4vw,44px);text-transform:uppercase;line-height:1.05}.g-bundle h2 span{color:#12D8FF;display:block}
.g-bundle p{color:#c9d0ea;margin:14px 0 22px}
.g-bundle-vis{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.g-bundle-vis span{padding:10px 16px;border-radius:30px;font-weight:600;font-size:14.5px;color:#fff;background:color-mix(in srgb,var(--bc) 70%,#000);box-shadow:0 10px 24px -14px var(--bc);animation:gFl 6s ease-in-out infinite}
.g-bundle-vis span:nth-child(2n){animation-delay:-2s}.g-bundle-vis span:nth-child(3n){animation-delay:-4s}
@media(max-width:991px){.g-bundle{grid-template-columns:1fr;padding:28px}}
.g-bot{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g-bot>div{display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:22px;background:#fff;border:1px solid #E1EAF7}
.g-bot>div.alt{background:#12D8FF;border-color:#12D8FF}.g-bot>div.alt b,.g-bot>div.alt p,.g-bot>div.alt i{color:#05263a}
.g-bot i{font-size:34px;color:#0fb5d0}.g-bot b{font-size:21px;color:var(--header)}.g-bot p{margin:4px 0 0}
@media(max-width:767px){.g-bot{grid-template-columns:1fr}}
.g-subteaser{background:#F4F8FB}
.g-st{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:40px;border-radius:28px;background:linear-gradient(135deg,#141834,#232a5a);color:#fff}
.g-st h2{color:#fff;font-size:clamp(28px,3.2vw,42px)}.g-st p{color:#c9d0ea;margin:12px 0 22px}
@media(max-width:991px){.g-st{grid-template-columns:1fr;padding:26px}}
/* contact */
.g-hero-contact{padding:170px 0 150px;background:linear-gradient(120deg,#08405c,#0c9ec2 55%,#12D8FF);clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
.g-squares i{position:absolute;background:rgba(255,255,255,.14);border-radius:4px;animation:gFl 8s ease-in-out infinite}
.g-squares i:nth-child(1){width:70px;height:70px;left:8%;top:62%}.g-squares i:nth-child(2){width:40px;height:40px;left:16%;top:56%;animation-delay:-2s}.g-squares i:nth-child(3){width:120px;height:26px;left:4%;top:72%;animation-delay:-4s}
.g-squares i:nth-child(4){width:60px;height:60px;right:12%;top:20%;animation-delay:-1s}.g-squares i:nth-child(5){width:36px;height:36px;right:8%;top:30%;animation-delay:-3s}.g-squares i:nth-child(6){width:130px;height:24px;right:4%;top:36%;animation-delay:-5s}
.g-bracket{position:relative;max-width:640px;margin:0 auto;text-align:center;padding:46px 60px}
.g-bracket::before,.g-bracket::after{content:"";position:absolute;width:80px;height:80px;border:10px solid #1530d8}
.g-bracket::before{left:0;top:0;border-right:0;border-bottom:0}.g-bracket::after{right:0;bottom:0;border-left:0;border-top:0}
.g-bracket h1{color:#fff;text-transform:uppercase;font-size:clamp(44px,6vw,78px);font-weight:800}
.g-bracket p{color:#fff;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;font-weight:600;margin:6px 0 0}
.g-bracket p span{color:#071a2a}
.g-band{position:relative;padding:110px 0 120px;margin-top:-60px;background:#12c5e6;clip-path:polygon(0 8%,100% 0,100% 88%,0 100%);color:#fff}
.g-mix{color:#fff;font-size:clamp(36px,4.4vw,56px);text-transform:uppercase;line-height:1}.g-mix span{display:block;color:#1530d8;font-size:.55em;margin-top:8px}
.g-band p{color:#eafcff}
.g-cinfo{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.g-cinfo li{display:flex;gap:12px;align-items:center;font-weight:500}.g-cinfo i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.g-cinfo a{color:#fff}
.g-git{color:#fff;text-transform:uppercase;font-weight:300;font-size:clamp(34px,4vw,50px);text-align:center;margin-bottom:18px}
.g-form .g-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g-form input,.g-form select,.g-form textarea{width:100%;border:0;border-radius:10px;padding:14px 16px;background:rgba(255,255,255,.9);color:#0b2233;font:inherit;outline:2px solid transparent;transition:.2s}
.g-form input:focus,.g-form select:focus,.g-form textarea:focus{outline-color:#1530d8;background:#fff}
.g-form textarea{grid-column:1/-1;min-height:130px;resize:vertical}
.g-submit{margin-top:14px;float:right;border:0;border-radius:10px;padding:12px 30px;background:#fff;color:#0aa3c2;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:.2s}
.g-submit:hover{background:#071a2a;color:#12D8FF}
.g-form::after{content:"";display:block;clear:both}
@media(max-width:575px){.g-form .g-fgrid{grid-template-columns:1fr}}
.g-whytitle{font-size:clamp(40px,5vw,66px);color:#0fb5d0;font-weight:800;line-height:1}.g-whytitle b{font-size:.5em;vertical-align:middle}.g-whytitle span{display:block;font-size:.6em}
.g-mock{position:relative;height:300px;margin-top:30px}
.g-mock>div{position:absolute;border-radius:12px;box-shadow:0 30px 60px -30px rgba(0,40,80,.5)}
.g-mock .w1{left:0;top:10px;width:58%;height:150px;background:#1d2340;padding:18px;display:flex;gap:10px}.g-mock .w1 i{flex:1;border-radius:8px;background:linear-gradient(180deg,#2c3566,#1d2340)}
.g-mock .w2{left:20%;top:90px;width:70%;height:120px;background:linear-gradient(90deg,#7a3cff,#ff4fa0,#ffb057);display:flex;justify-content:space-around;align-items:center;animation:gFl 6s ease-in-out infinite}.g-mock .w2 b{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.8)}
.g-mock .w3{left:6%;top:200px;width:55%;height:90px;background:#fff;border:1px solid #E1EAF7;display:flex;gap:10px;padding:16px}.g-mock .w3 span{flex:1;border-radius:6px;background:#EAF6FF}
.g-wlist{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.g-wlist li{display:flex;gap:18px;align-items:flex-start}
.g-wlist i{flex:0 0 58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#0fb5d0;background:#E6FAFF}
.g-wlist b{display:block;font-size:19px;color:var(--header)}.g-wlist p{margin:4px 0 0}
.g-quote{position:relative;padding:150px 0 120px;background:linear-gradient(rgba(16,20,40,.88),rgba(16,20,40,.95)),url('../img/hosting/hosting.jpg') center/cover;clip-path:polygon(0 0,100% 10%,100% 100%,0 100%)}
.g-quote h2{color:#12D8FF;text-align:center;text-transform:uppercase;font-size:clamp(36px,4.6vw,60px);font-weight:800;margin-bottom:26px}
.g-quote .g-form{max-width:760px;margin:0 auto}
.g-quote .g-submit{float:none;display:block;margin:16px auto 0}
@media(prefers-reduced-motion:reduce){.g-contour path,.g-float i,.g-squares i,.g-bundle-vis span,.g-mock .w2,.g-marq div,.g-stars{animation:none}}
.g-form .nice-select{width:100%;height:auto;line-height:1.5;border:0;border-radius:10px;padding:14px 16px;background:rgba(255,255,255,.9);color:#0b2233;font-size:16px;float:none}
.g-form .nice-select .list{width:100%;max-height:260px;overflow:auto;color:#0b2233}
.g-form .nice-select:after{right:16px}
/* ===== client project showcase ===== */
.g-projgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.g-proj{display:flex;flex-direction:column;gap:14px;border-radius:22px;padding:12px;background:#fff;border:1px solid #E1EAF7;transition:.35s;position:relative}
.g-proj:hover{border-color:var(--bc);box-shadow:0 34px 70px -34px var(--bc)}
.g-proj.big{grid-column:span 2;grid-row:span 2}
.g-win{border-radius:14px;overflow:hidden;background:#0d1426;box-shadow:0 18px 40px -24px rgba(5,30,60,.55);flex:1;display:flex;flex-direction:column}
.g-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef3fa}
.g-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.g-bar i+i{background:#febc2e}.g-bar i+i+i{background:#28c840}
.g-bar span{margin-left:8px;flex:1;font:500 12px "JetBrains Mono",monospace;color:#5b6b88;background:#fff;padding:3px 10px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-shot{position:relative;aspect-ratio:16/10;overflow:hidden;flex:1}
.g-proj.big .g-shot{aspect-ratio:auto;min-height:100%}
.g-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s,transform 4s ease}
.g-shot>img.ok{opacity:1}
.g-proj:hover .g-shot>img.ok{transform:scale(1.06)}
/* generated mock preview (shown until real screenshot loads) */
.g-pv{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(140deg,color-mix(in srgb,var(--bc) 85%,#000) 0%,color-mix(in srgb,var(--bc) 40%,#0b1020) 60%,#0b1020 100%)}
.g-pv::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at 80% 0,rgba(255,255,255,.25),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 40px)}
.g-pv .mn{display:flex;align-items:center;gap:10px;padding:12px 16px;position:relative;z-index:1}
.g-pv .mn b{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#fff;color:var(--bc);font-size:12px}
.g-pv .mn span{height:6px;width:34px;border-radius:4px;background:rgba(255,255,255,.45)}.g-pv .mn span:first-of-type{margin-left:auto}
.g-pv .mh{position:relative;z-index:1;padding:6% 16px 0}
.g-pv .mh em{display:block;font-style:normal;font-weight:800;color:#fff;font-size:clamp(18px,2.1vw,28px);line-height:1.1;letter-spacing:-.01em}
.g-proj.big .g-pv .mh em{font-size:clamp(28px,3.6vw,48px)}
.g-pv .mh small{display:block;color:rgba(255,255,255,.8);margin-top:6px;font-size:13px}
.g-pv .mh u{display:inline-block;margin-top:12px;width:90px;height:26px;border-radius:8px;background:#fff;opacity:.9;text-decoration:none}
.g-pv .mg{position:relative;z-index:1;margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 16px}
.g-pv .mg i{height:44px;border-radius:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.g-proj.big .g-pv .mg i{height:90px}
.g-pmeta{display:flex;align-items:center;gap:12px;padding:2px 6px 4px}
.g-plogo{width:46px;height:46px;flex:0 0 46px;border-radius:12px;display:grid;place-items:center;background:var(--bc);overflow:hidden;position:relative}
.g-plogo b{color:#fff;font-size:15px}
.g-plogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;display:none}
.g-plogo.ok img{display:block}
.g-pmeta strong{display:block;font-size:17px;color:var(--header);line-height:1.2}
.g-pmeta small{color:var(--text);font-size:14px}
.g-pmeta>i{margin-left:auto;color:#9aaccc;transition:.25s}
.g-proj:hover .g-pmeta>i{color:var(--bc);transform:translate(2px,-2px)}
@media(max-width:991px){.g-projgrid{grid-template-columns:1fr 1fr}.g-proj.big{grid-column:span 2;grid-row:auto}.g-proj.big .g-shot{aspect-ratio:16/9;min-height:0}}
@media(max-width:575px){.g-projgrid{grid-template-columns:1fr}.g-proj.big{grid-column:auto}}
html[data-theme="dark"] .g-proj{background:#121B33;border-color:#22304E}
html[data-theme="dark"] .g-bar{background:#1a2440}html[data-theme="dark"] .g-bar span{background:#0E1529;color:#9fb0cc}
html[data-theme="dark"] .g-pmeta strong{color:#EEF3FF}
/* ===== Office setup builder ===== */
.ob-sec{position:relative;overflow:hidden;padding:120px 0;background:#070d24;color:#fff}
.ob-glow i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:ltAur 16s ease-in-out infinite alternate}
.ob-glow i:nth-child(1){width:520px;height:520px;left:-120px;top:-160px;background:#1E86FF}
.ob-glow i:nth-child(2){width:420px;height:420px;right:-80px;bottom:-160px;background:#9B72CB;animation-delay:-6s}
.ob-glow i:nth-child(3){width:300px;height:300px;left:45%;top:30%;background:#12D8FF;opacity:.25;animation-delay:-10s}
.ob-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%)}
.ob-kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px "JetBrains Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;color:#7FE7FF;padding:7px 14px;border-radius:30px;border:1px solid rgba(127,231,255,.35);background:rgba(18,216,255,.08)}
.ob-title{color:#fff!important;font-size:clamp(38px,4.6vw,60px);line-height:1.05;margin:18px 0 14px;letter-spacing:-.02em}
.ob-title span{background:linear-gradient(90deg,#12D8FF,#4285F4,#9B72CB);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-lead{color:#c3d2ee!important;font-size:18px;max-width:480px}
.ob-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.ob-points li{display:flex;gap:14px;align-items:flex-start}
.ob-points b{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 14px "JetBrains Mono",monospace;color:#001426;background:linear-gradient(135deg,#12D8FF,#1E86FF)}
.ob-points strong{display:block;color:#fff;font-size:17px}.ob-points span{color:#9fb2d4;font-size:15px}
.ob-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.ob-mini div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ob-mini i{color:#12D8FF;font-size:18px}.ob-mini b{display:block;color:#fff;margin-top:6px}.ob-mini span{color:#9fb2d4;font-size:13.5px}
.ob-card{position:relative;padding:26px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.2)}
.ob-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#12D8FF,transparent 35%,transparent 65%,#9B72CB);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ob-card-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.ob-card-top .dots{display:flex;gap:6px}.ob-card-top .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.ob-card-top .dots i+i{background:#febc2e}.ob-card-top .dots i+i+i{background:#28c840}
.ob-card-top b{color:#fff}.ob-card-top em{margin-left:auto;font:13px "JetBrains Mono",monospace;color:#7FE7FF;font-style:normal}
.ob-step{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:#fff}
.ob-step .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px "JetBrains Mono",monospace;background:rgba(18,216,255,.18);color:#7FE7FF;border:1px solid rgba(18,216,255,.4)}
.ob-step output{margin-left:auto;font:700 15px "JetBrains Mono",monospace;color:#12D8FF}
.ob-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ob-chip{position:relative;display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#dbe6fb;font-weight:500;text-align:left;transition:.2s}
.ob-chip>i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#7FE7FF;font-size:14px;transition:.2s}
.ob-chip .tick{margin-left:auto;width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:11px;color:transparent;transition:.2s}
.ob-chip:hover{border-color:rgba(18,216,255,.6);transform:translateY(-2px)}
.ob-chip.on{border-color:#12D8FF;background:rgba(18,216,255,.12);color:#fff;box-shadow:0 0 0 1px rgba(18,216,255,.3),0 10px 30px -14px rgba(18,216,255,.7)}
.ob-chip.on>i{background:linear-gradient(135deg,#12D8FF,#1E86FF);color:#001426}
.ob-chip.on .tick{background:#12D8FF;border-color:#12D8FF;color:#001426}
.ob-range{--p:9%;width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:8px;background:linear-gradient(90deg,#12D8FF 0,#1E86FF var(--p),rgba(255,255,255,.12) var(--p));outline:0}
.ob-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #12D8FF;box-shadow:0 0 0 6px rgba(18,216,255,.2);cursor:pointer}
.ob-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid #12D8FF;cursor:pointer}
.ob-scale{display:flex;justify-content:space-between;font:12px "JetBrains Mono",monospace;color:#7d8fb3;margin-top:8px}
.ob-summary{display:flex;flex-wrap:wrap;gap:8px;min-height:38px;padding:12px;border-radius:14px;background:rgba(0,0,0,.25);border:1px dashed rgba(255,255,255,.15)}
.ob-summary span{padding:5px 11px;border-radius:20px;font-size:13.5px;background:rgba(18,216,255,.14);color:#bff3ff;animation:obPop .25s ease}
.ob-summary em{color:#7d8fb3;font-size:14px}
@keyframes obPop{from{transform:scale(.85);opacity:0}}
.ob-cta{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:16px;font-weight:700;font-size:17px;color:#001426!important;background:linear-gradient(90deg,#12D8FF,#4FA3FF);box-shadow:0 18px 40px -16px rgba(18,216,255,.8);transition:.25s}
.ob-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ob-cta.off{opacity:.45;pointer-events:none}
.ob-note{margin:10px 0 0;text-align:center;font-size:13px;color:#8fa2c6!important}
@media(max-width:575px){.ob-chips{grid-template-columns:1fr}.ob-mini{grid-template-columns:1fr}.ob-card{padding:18px}}
.ob-chips{grid-template-columns:repeat(3,1fr);gap:8px}
.ob-chip{padding:10px 11px;gap:8px;font-size:14px;line-height:1.25}
.ob-chip>i{width:28px;height:28px;flex:0 0 28px;font-size:13px}
.ob-chip .tick{width:18px;height:18px;flex:0 0 18px}
@media(max-width:1199px){.ob-chips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.ob-chips{grid-template-columns:1fr}}
/* send buttons + status */
.lt-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.lt-sendrow{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.lt-sendrow .g-submit{float:none;margin:0;display:inline-flex;align-items:center;gap:8px}
.lt-sendrow .lt-wa-btn{background:#1DA851;color:#fff}.lt-sendrow .lt-wa-btn:hover{background:#13994d;color:#fff}
.g-quote .lt-sendrow{justify-content:center}
.lt-status{margin:12px 0 0;font-size:15px;min-height:1px;text-align:right}
.g-quote .lt-status{text-align:center}
.lt-status.ok{color:#0b7a3e;background:#e9fff2;padding:10px 14px;border-radius:10px;text-align:left}
.lt-status.err{color:#8a1c1c;background:#fff0f0;padding:10px 14px;border-radius:10px;text-align:left}
.lt-status a{text-decoration:underline;font-weight:600;color:inherit}
.g-submit:disabled{opacity:.6;cursor:wait}
/* office builder fields/actions */
.ob-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-fields input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;font:inherit;outline:0;transition:.2s}
.ob-fields input:focus{border-color:#12D8FF;box-shadow:0 0 0 3px rgba(18,216,255,.2)}
.ob-fields input::placeholder{color:#7d8fb3}
.ob-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:16px}
.ob-actions .ob-cta{margin:0;border:0;cursor:pointer;font-size:16px}
.ob-actions .ob-wa{background:#1DA851;color:#fff!important;box-shadow:0 18px 40px -16px rgba(29,168,81,.8)}
.ob-cta:disabled{opacity:.6;cursor:wait}
.ob-note.ok{color:#7CFFB2!important;font-weight:600}
.ob-note.err{color:#ffb4b4!important}
.ob-note a{color:#7FE7FF;text-decoration:underline}
@media(max-width:575px){.ob-fields,.ob-actions{grid-template-columns:1fr}}