.wp-hero-grid { display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; }
.wp-hero-panel { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:18px; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.wp-browser { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.wp-browser-bar { height:34px; background:#f1f1f4; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid #e5e5ea; }
.wp-browser-bar i { width:8px; height:8px; border-radius:50%; background:#d7d7de; display:block; }
.wp-browser-body { padding:18px; }
.wp-hero-block { min-height:96px; border-radius:12px; background:linear-gradient(135deg,#111827,#E2231A); margin-bottom:14px; }
.wp-line { height:8px; border-radius:999px; background:#ececf1; margin-bottom:8px; }
.wp-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.wp-mini-grid div { height:54px; border-radius:10px; background:#f1f1f4; }
.wp-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.wp-service { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.wp-service h3 { font-size:19px; margin:16px 0 10px; }
.wp-service p { font-size:14.5px; color:var(--muted); line-height:1.65; }
.wp-focus { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:48px; }
.wp-focus-card { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; }
.wp-focus-card h3 { font-size:24px; margin-bottom:12px; }
.wp-focus-card p { color:var(--muted); line-height:1.7; margin-bottom:20px; }
.wp-checks { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
.wp-checks li { color:var(--ink-2); font-size:14.5px; display:flex; gap:10px; align-items:flex-start; }
.wp-checks li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--red); flex:0 0 auto; margin-top:7px; }
.wp-product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
.wp-product { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; text-decoration:none; color:inherit; transition:transform .2s,box-shadow .2s,border-color .2s; }
.wp-product:hover { transform:translateY(-4px); box-shadow:0 16px 50px rgba(20,20,26,.08); border-color:var(--line-2); }
.wp-product h3 { font-size:24px; margin:14px 0 10px; }
.wp-product p { color:var(--muted); line-height:1.65; font-size:14.5px; margin-bottom:18px; }
.woo-panel { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
.woo-visual { background:var(--ink); border-radius:var(--r-lg); padding:28px; min-height:300px; display:flex; align-items:center; justify-content:center; }
.woo-card { width:100%; max-width:360px; background:#fff; border-radius:16px; padding:18px; box-shadow:0 24px 60px rgba(0,0,0,.26); }
.woo-card-top { display:grid; grid-template-columns:92px 1fr; gap:14px; margin-bottom:16px; }
.woo-img { border-radius:12px; background:linear-gradient(135deg,#FEE2E2,#E2231A); }
.woo-title { height:14px; border-radius:999px; background:#111827; width:72%; margin:7px 0 12px; }
.woo-price { height:10px; border-radius:999px; background:var(--red); width:42%; }
.woo-list { display:grid; gap:8px; }
.woo-list div { height:9px; border-radius:999px; background:#ececf1; }
.woo-button { height:40px; border-radius:10px; background:var(--red); margin-top:18px; }
@media(max-width:980px){ .wp-hero-grid,.wp-service-grid,.wp-focus,.wp-product-grid,.woo-panel{grid-template-columns:1fr;} }
.web-ref-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.web-ref-featured .web-ref-screen { display: flex; flex-direction: column; }
.web-ref-featured .web-ref-shot { flex: 1; height: auto; min-height: 300px; object-fit: cover; object-position: top center; }
.web-ref-featured .web-ref-info { display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.web-ref-featured .web-ref-info .rtag { align-self: flex-start; }
@media (max-width: 760px) { .web-ref-featured { grid-template-columns: 1fr; } .web-ref-featured .web-ref-shot { min-height: 0; } }