/* template gallery + full preview */
.gallery{--gx-ink:#0d2a22;--gx-line:#d9e7df}
.gx-eyebrow{display:inline-block;padding:5px 14px;border-radius:99px;background:#d4f56b;color:#0b2a21;font-weight:800;font-size:.78rem;letter-spacing:.02em}
.gx-hero{max-width:980px;margin:0 auto;padding:clamp(36px,6vw,72px) 22px 12px;text-align:center}
.gx-hero h1{margin:16px 0 12px;font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.35;letter-spacing:-.03em}.gx-hero h1 em{font-style:normal;color:var(--accent)}
.gx-hero p{margin:0 auto;max-width:640px;color:#4d6a5f;font-size:1.02rem}
.gx-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.gx-chip{padding:9px 20px;border-radius:99px;border:1px solid var(--gx-line);background:#fff;color:var(--gx-ink);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,transform .15s,border-color .2s}
.gx-chip:hover{border-color:var(--accent)}.gx-chip:active{transform:scale(.96)}.gx-chip.on{background:var(--gx-ink);color:#fff;border-color:var(--gx-ink)}
.gx-grid{max-width:1180px;margin:0 auto;padding:30px 22px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gx-card{display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid var(--gx-line);overflow:hidden;box-shadow:0 14px 40px -26px rgba(11,42,33,.45);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,opacity .3s}
.gx-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(11,42,33,.55)}
.gx-card[hidden]{display:none}
.gx-stage{position:relative;display:grid;place-items:center;padding:30px 20px 0;height:430px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c2) 38%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c1) 22%,#fff),color-mix(in srgb,var(--c3) 30%,#f4f7f5))}
.gx-stage.dark{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c2) 45%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c1) 90%,#000),color-mix(in srgb,var(--c1) 70%,#000))}
.gx-phone{position:relative;align-self:end;width:236px;padding:9px;border-radius:38px 38px 0 0;background:#0e1512;box-shadow:0 -6px 40px -6px rgba(0,0,0,.35),inset 0 0 0 2px #2a3631;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.gx-card:hover .gx-phone{transform:translateY(-10px)}
.gx-notch{position:absolute;top:9px;left:50%;translate:-50% 0;width:70px;height:18px;border-radius:0 0 14px 14px;background:#0e1512;z-index:2}
.gx-screen{position:relative;width:100%;aspect-ratio:390/760;border-radius:30px 30px 0 0;overflow:hidden;background:#fff}
.gx-screen iframe{position:absolute;top:0;left:0;width:390px;height:760px;border:0;transform-origin:0 0;transform:scale(var(--s,.58));pointer-events:none;background:#fff}
.gx-hit{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;background:linear-gradient(transparent 55%,rgba(5,16,12,.55));opacity:0;transition:opacity .25s;z-index:3}
.gx-hit span{padding:10px 20px;border-radius:99px;background:#d4f56b;color:#0b2a21;font-weight:800;font-size:.9rem;box-shadow:0 10px 24px -8px #000a;transform:translateY(8px);transition:transform .3s}
.gx-card:hover .gx-hit,.gx-hit:focus-visible{opacity:1}.gx-card:hover .gx-hit span,.gx-hit:focus-visible span{transform:none}
@media(hover:none){.gx-hit{opacity:1;background:none}.gx-hit span{transform:none}}
.gx-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.gx-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.gx-row h2{margin:0;font-size:1.15rem}
.gx-sw{display:inline-flex;direction:ltr;flex:none}.gx-sw i{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0002;margin-inline-start:-6px}.gx-sw.big i{width:24px;height:24px}
.gx-desc{margin:0;color:#4d6a5f;font-size:.9rem;line-height:1.8}.gx-for{margin:0;font-size:.84rem;color:#34524a}.gx-for b{color:var(--gx-ink)}
.gx-actions{display:flex;gap:8px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.gx-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:99px;border:1px solid var(--gx-line);background:#fff;color:var(--gx-ink);font:inherit;font-weight:800;font-size:.88rem;transition:transform .15s,box-shadow .2s,background .2s}
.gx-btn:hover{background:#f1f7f3}.gx-btn:active{transform:scale(.97)}.gx-btn.primary{background:var(--gx-ink);color:#fff;border-color:var(--gx-ink)}.gx-btn.primary:hover{background:#163e33;box-shadow:0 10px 22px -10px #0d2a22aa}.gx-btn.lg{padding:14px 26px;font-size:.98rem}
.gx-cta{max-width:1180px;margin:26px auto 60px;padding:34px clamp(22px,4vw,44px);border-radius:28px;background:linear-gradient(135deg,#0d2a22,#1e7658);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;width:calc(100% - 44px)}
.gx-cta h2{margin:0 0 6px;font-size:1.5rem}.gx-cta p{margin:0;color:#cfe8dc}.gx-cta-btns{display:flex;gap:10px;flex-wrap:wrap}.gx-cta .gx-btn{border-color:#ffffff33;background:#ffffff14;color:#fff}.gx-cta .gx-btn.primary{background:#d4f56b;color:#0b2a21;border-color:#d4f56b}
/* full preview */
.gp{max-width:1240px;margin:0 auto;padding:22px 22px 60px}
.gp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.gp-back,.gp-pager a{padding:9px 16px;border-radius:99px;background:#fff;border:1px solid var(--gx-line);font-weight:700;font-size:.88rem;transition:background .2s}.gp-back:hover,.gp-pager a:hover{background:#eef6f1}.gp-pager{display:flex;gap:8px}
.gp-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.gp-stage{position:relative;border-radius:30px;padding:18px 18px 22px;border:1px solid var(--gx-line);background:radial-gradient(110% 80% at 50% 0%,color-mix(in srgb,var(--c2) 35%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c1) 20%,#fff),color-mix(in srgb,var(--c3) 28%,#f4f7f5));display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.gp-stage.dark{background:radial-gradient(110% 80% at 50% 0%,color-mix(in srgb,var(--c2) 40%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c1) 92%,#000),color-mix(in srgb,var(--c1) 72%,#000));color:#fff}
.gp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:100%}
.gp-seg{display:inline-flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.75);border:1px solid rgba(11,42,33,.08)}.gp-seg button{border:0;background:transparent;padding:8px 16px;border-radius:99px;font:inherit;font-weight:700;font-size:.85rem;color:var(--gx-ink);cursor:pointer;transition:background .2s,color .2s}.gp-seg button.on{background:var(--gx-ink);color:#fff}
.gp-tg{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.75);border:1px solid rgba(11,42,33,.08);font-size:.85rem;font-weight:700;color:var(--gx-ink);cursor:pointer}.gp-tg input{accent-color:var(--accent);width:16px;height:16px}
.gp-open{padding:8px 16px;border-radius:99px;background:#d4f56b;color:#0b2a21;font-weight:800;font-size:.85rem}
.gp-device{max-width:100%;transition:width .3s}
.gp-bezel{position:relative;padding:11px;border-radius:44px;background:#0e1512;box-shadow:0 30px 60px -24px rgba(0,0,0,.55),inset 0 0 0 2px #2a3631}
.gp-notch{position:absolute;top:11px;left:50%;translate:-50% 0;width:88px;height:22px;border-radius:0 0 16px 16px;background:#0e1512;z-index:2;transition:opacity .2s}
.gp-view{position:relative;overflow:hidden;border-radius:34px;background:#fff}
.gp-view iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.gp-device.is-d .gp-bezel{padding:34px 10px 10px;border-radius:18px;background:#1b2622}.gp-device.is-d .gp-bezel::before{content:"";position:absolute;top:12px;right:16px;width:46px;height:10px;background:radial-gradient(circle,#ff6159 4px,transparent 5px) 0 50%/16px 10px no-repeat,radial-gradient(circle,#ffbd2e 4px,transparent 5px) 16px 50%/16px 10px no-repeat,radial-gradient(circle,#27c93f 4px,transparent 5px) 32px 50%/16px 10px no-repeat}.gp-device.is-d .gp-view{border-radius:8px}.gp-device.is-d .gp-notch{opacity:0}
.gp-hint{margin:0;font-size:.82rem;opacity:.75;text-align:center}
.gp-info{position:sticky;top:90px;padding:6px 4px}
.gp-info h1{margin:12px 0 8px;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.03em}.gp-info h3{margin:22px 0 6px;font-size:.95rem}
.gp-lead{margin:0;color:#4d6a5f;line-height:1.9}.gp-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.gx-tag{padding:6px 12px;border-radius:99px;background:#eaf5ef;color:#1e5b45;font-size:.8rem;font-weight:700}
.gp-for{margin:0;color:#34524a}.gp-feats{margin:0;padding:0;list-style:none;display:grid;gap:8px}.gp-feats li{position:relative;padding-inline-start:28px;color:#34524a}.gp-feats li::before{content:"✓";position:absolute;inset-inline-start:0;top:1px;width:20px;height:20px;border-radius:50%;background:#d4f56b;color:#0b2a21;font-size:.72rem;font-weight:900;display:grid;place-items:center}
.gp-note{margin:20px 0 0;padding:12px 14px;border-radius:14px;background:#f1f7f3;color:#4d6a5f;font-size:.82rem;line-height:1.9}
.gp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.gp-strip{display:flex;gap:8px;margin-top:30px;padding:4px 2px 8px;overflow-x:auto;scrollbar-width:thin}.gp-strip a{flex:none;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:99px;background:#fff;border:1px solid var(--gx-line);font-weight:700;font-size:.86rem;transition:background .2s,border-color .2s}.gp-strip a:hover{border-color:var(--accent)}.gp-strip a.on{background:var(--gx-ink);color:#fff;border-color:var(--gx-ink)}.gp-strip .gx-sw i{width:14px;height:14px;margin-inline-start:-5px}
@media(max-width:1000px){.gx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gp-grid{grid-template-columns:1fr}.gp-info{position:static}}
@media(max-width:620px){.gx-grid{grid-template-columns:1fr;padding-inline:16px}.gx-stage{height:410px}.gp{padding-inline:14px}.gp-seg{display:none}.gp-stage{padding:14px 10px 18px;border-radius:24px}.gx-cta{width:calc(100% - 32px)}}
@media(prefers-reduced-motion:reduce){.gx-card,.gx-phone,.gx-hit,.gx-hit span,.gp-device{transition:none!important}.gx-card:hover{transform:none}}