/* ==========================================================================
   karty-opcji.css — karty prezentujące warianty/podejścia na ciemnym tle.

   Ten sam komponent w dwóch miejscach makiety:
     • strona główna, „Jeden system – dwa sposoby realizacji" (.two)
     • O firmie, „Prefabrykacja, która upraszcza budowę" (.approach-grid)
   Na O firmie karty miały w makiecie cały styl wpisany w atrybuty style=""
   plus obsługę hovera w onmouseenter/onmouseleave — tutaj to zwykłe .opt
   i czysty CSS, wynik wizualnie identyczny.
   ========================================================================== */

.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.opt{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:38px 34px;transition:transform .25s,background .25s}
.opt:hover{transform:translateY(-4px);background:rgba(255,255,255,.04)}
.opt .kicker{font-family:'Safiro',sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);font-weight:600}
.opt h3{font-size:1.55rem;margin:14px 0 12px}
.opt p{color:rgba(255,255,255,.82);font-size:1.02rem}
.opt .link-more{margin-top:24px;color:#fff}
.opt .link-more:hover{color:var(--wood)}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.opt--featured{border-color:var(--wood);box-shadow:0 6px 24px rgba(212,132,64,.13)}
.opt--featured:hover{background:rgba(255,255,255,.05)}
.montaz-cta{margin-top:36px;text-align:center}

/* Siatka kart na O firmie (dwie karty, ten sam odstęp co .two, inny margines) */
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(36px,4vw,56px)}
@media(max-width:760px){.approach-grid{grid-template-columns:1fr}}
/* Makieta O firmie ma w akapitach kart line-height 1.7, na głównej dziedziczone 1.6 */
.approach-grid .opt p{line-height:1.7}