/* Makiety urządzeń z prawdziwymi zrzutami aplikacji 1HPest (strona główna + DDD dla wspólnot). */
.tech{position:relative;overflow:hidden;color:#fff;padding:96px 0;
  background:radial-gradient(circle at 12% 18%,rgba(234,79,28,.16),transparent 42%),radial-gradient(circle at 88% 82%,rgba(56,189,248,.12),transparent 40%),linear-gradient(135deg,#08111F,#0B1626 45%,#1E293B)}
.tech .eyebrow{display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#FF9B76;margin-bottom:12px}
.tech h2{color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.6px;margin:0 0 16px}
.tech h3{color:#fff;font-size:22px;margin:6px 0 10px}
.tech p,.tech li{color:#CBD5E1}
.tech .lead{font-size:18px;max-width:640px}
.tech-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-bottom:96px}
.tech-points{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:12px}
.tech-points li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.tech-points li::before{content:"";flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;box-shadow:0 0 0 3px rgba(234,79,28,.15);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(135deg,#EA4F1C,#B9380F)}
.tech-points b{color:#fff}

/* ramki */
.dev-tablet{position:relative;border-radius:30px;padding:14px;background:#05080F;box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 2px #253045}
.dev-tablet img,.dev-phone img{display:block;width:100%;height:auto;border-radius:18px;background:#fff}
.dev-tablet.pion{max-width:440px;margin:0 auto}
.dev-phone{position:relative;width:250px;border-radius:42px;padding:30px 9px 12px;background:#05080F;box-shadow:0 34px 80px rgba(0,0,0,.6),inset 0 0 0 2px #253045}
.dev-phone img{border-radius:12px 12px 30px 30px}
.dev-phone::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:64px;height:12px;border-radius:8px;background:#1E293B;z-index:2}

/* zestaw: tablet + telefon nachodzący z prawej, lekka perspektywa */
.dev-stack{position:relative;padding:0 120px 70px 0;perspective:1600px}
.dev-stack .dev-tablet{transform:rotateY(-8deg) rotateX(3deg);transform-origin:left center}
.dev-stack .dev-phone{position:absolute;right:0;bottom:0;width:200px;transform:rotateY(-8deg) rotateX(3deg) translateZ(40px)}
.dev-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font:600 13.5px Inter,system-ui,sans-serif;color:#fff;
  background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.35);white-space:nowrap}
.dev-badge i{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22)}
.dev-badge.o i{background:#EA4F1C;box-shadow:0 0 0 4px rgba(234,79,28,.22)}
.dev-badge.b i{background:#38BDF8;box-shadow:0 0 0 4px rgba(56,189,248,.22)}

/* moduły — rzędy naprzemiennie */
.tech-mod{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:88px}
.tech-mod:nth-of-type(even) .tech-mod-txt{order:2}
.tech-num{display:inline-flex;align-items:center;gap:10px;font:700 12.5px Inter,system-ui,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#FF9B76}
.tech-num span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#EA4F1C,#B9380F);color:#fff;font-size:14px;letter-spacing:0}
.tech-mod-dev{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:22px}
.tech-mod-dev .dev-phone{width:230px}
.tech-mod-dev.combo{display:block;padding:0 90px 46px 0}
.tech-mod-dev.combo .dev-phone{position:absolute;right:0;bottom:0;width:180px}
.tech-mod-dev.combo .dev-tablet.pion{max-width:400px;margin:0}
.tech-mod-dev.duo .dev-phone:last-child{transform:translateY(40px)}
.tech-note{margin-top:56px;font-size:13px;color:#64748B;text-align:center}
.tech .btn-ghost-l{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;border:1.5px solid rgba(255,255,255,.25);color:#fff;font-weight:600;text-decoration:none}
.tech .btn-ghost-l:hover{border-color:#EA4F1C;color:#FF9B76}

@media (max-width:960px){
  .tech{padding:72px 0}
  .tech-hero,.tech-mod{grid-template-columns:1fr;gap:36px}
  .tech-mod:nth-of-type(even) .tech-mod-txt{order:0}
  .dev-stack{padding:0 40px 50px 0}
  .dev-stack .dev-tablet,.dev-stack .dev-phone{transform:none}
  .dev-phone{width:180px}.tech-mod-dev .dev-phone{width:170px}.tech-mod-dev.combo{padding:0 60px 36px 0}.tech-mod-dev.combo .dev-phone{width:130px}.tech-mod-dev.duo .dev-phone{width:150px}
  .dev-badge{font-size:12px;padding:8px 11px}
}
@media (prefers-reduced-motion:no-preference){
  .dev-stack .dev-tablet,.dev-stack .dev-phone{transition:transform .6s ease}
  .dev-stack:hover .dev-tablet{transform:rotateY(-3deg) rotateX(1deg)}
  .dev-stack:hover .dev-phone{transform:rotateY(-3deg) rotateX(1deg) translateZ(60px)}
}