:root{ --bg: #050505; --card-bg: rgba(20, 20, 25, 0.6); --text: #f8fafc; --muted: #94a3b8; --gold: #fbbf24; --gold-glow: rgba(251, 191, 36, 0.4); --radius: 20px; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);line-height:1.55;background: #050505; background-image: radial-gradient(circle at 15% 50%, rgba(251, 191, 36, 0.08), transparent 25%), radial-gradient(circle at 85% 30%, rgba(79, 70, 229, 0.15), transparent 25%); background-attachment: fixed; min-height: 100vh; overflow-x: hidden;}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}

/* Hero */
.hero{padding:80px 0 40px;text-align:center;}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.1;font-weight:900;letter-spacing:-.03em;background: linear-gradient(135deg, #fff, var(--gold));-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 16px;}
.hero p{max-width:680px;margin:0 auto 30px;font-size:clamp(15px,2vw,18px);color:var(--muted)}

/* Квиз на главной */
.quiz-section { margin: 40px auto 50px; max-width: 800px; }
.quiz-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; text-align: center; color: #fff;}
.quiz-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.quiz-btn { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid rgba(251, 191, 36, 0.2); padding: 12px 24px; border-radius: 30px; color: #fff; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;}
.quiz-btn:hover { border-color: var(--gold); box-shadow: 0 0 15px var(--gold-glow); transform: translateY(-2px); }
.quiz-btn.active { background: var(--gold); color: #000; border-color: var(--gold); }

/* Bento Grid */
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 0 80px; }
.bento-item { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--card-bg); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 24px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; overflow: hidden;}
.bento-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 40px -10px var(--gold-glow); border-color: rgba(251, 191, 36, 0.4); z-index: 10;}
.bento-item.highlighted { border-color: var(--gold); box-shadow: 0 0 30px var(--gold-glow); transform: scale(1.02); z-index: 5;}

.bento-large { grid-column: span 2; grid-row: span 2; align-items: flex-start; justify-content: flex-end;}
.bento-wide { grid-column: span 2; grid-row: span 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.bento-small { grid-column: span 1; grid-row: span 1; text-align: center; align-items: center;}

.bank-logo-big { width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; font-weight: 800; margin-bottom: 16px; color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.3); transition: transform 0.3s;}
.bento-large .bank-logo-big { width: 100px; height: 100px; font-size: 46px; }
.bank-title {font-size: 18px; font-weight: 700; margin-bottom: 8px;}
.bento-large .bank-title { font-size: 28px; }
.bento-wide .bank-title { font-size: 20px; margin-bottom: 0;}

/* Карточки продуктов */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding:20px 0 80px}
.product-wrapper { display: flex; flex-direction: column; height: 100%; }
.card{position:relative;display:flex;flex-direction:column;flex-grow: 1;background:var(--card-bg);backdrop-filter: blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);padding:28px;transition:transform .3s ease,box-shadow .3s ease; margin-bottom: 15px;}
.card:hover{transform:translateY(-3px);box-shadow:0 15px 30px -10px var(--gold-glow);border-color:rgba(251, 191, 36, 0.3)}
.card-img {width: 100%; height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; background: rgba(255,255,255,0.05);}
.hit{position:absolute;top:20px;right:20px;background:linear-gradient(135deg, var(--gold), #f59e0b);color:#000;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;text-transform:uppercase;z-index:10;}
.card-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-right:60px}
.logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none;background:linear-gradient(135deg, #ffffff, #d4d4d8);color:#000;}
.bank-name{font-weight:700;font-size:16px;}
.cat{font-size:13px;color:var(--muted)}
.title{font-size:22px;font-weight:700;margin-bottom:8px}
.tagline{font-size:15px;color:var(--gold);font-weight:600;margin-bottom:20px}
.features{list-style:none;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
.features li{font-size:14px;color:#d4d4d8;display:flex;gap:10px;}
.check{color:var(--gold);font-weight:800;flex:none;}
.btn{margin-top:auto;display:block;text-align:center;background:linear-gradient(135deg, var(--gold), #f59e0b);color:#000;font-weight:800;font-size:16px;padding:16px;border-radius:12px;transition:transform .2s ease;}
.btn:hover{transform:scale(1.02);box-shadow:0 8px 20px var(--gold-glow)}

/* Виджеты калькуляторов */
.calc-widget { background: rgba(251, 191, 36, 0.05); border: 1px dashed rgba(251, 191, 36, 0.3); border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.calc-widget h4 { font-size: 14px; color: var(--gold); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;}
.calc-widget input[type=range] { width: 100%; accent-color: var(--gold); cursor: pointer; margin-bottom: 10px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; color: #d4d4d8;}
.calc-row span { font-weight: 700; color: #fff; font-size: 16px;}
.calc-total { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--gold); display: flex; justify-content: space-between;}
.calc-total span { font-size: 20px; text-shadow: 0 0 10px var(--gold-glow);}
.custom-select { width: 100%; padding: 10px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 8px; margin-bottom: 15px; font-family: inherit; }

footer{padding:40px 0;text-align:center;font-size:13px;color:#52525b}
@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-large, .bento-wide, .bento-small { grid-column: span 1; grid-row: span 1; }
  .bento-wide { flex-direction: column; text-align: center; }
}