:root{
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif;
  --font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* глобально */
body{ font-family: var(--font-ui); }

/* заголовки и CTA – более плотное начертание без потери читабельности ä/ö/ü/õ */
h1,h2,h3,.btn-text{ font-family: var(--font-heading); letter-spacing: .1px; }

/* значения в карточках – табличные цифры, чтобы столбцы не «плясали» */
.value{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* длинные параграфы: корректная расстановка переносов для ET */
html[lang="et"] p{ hyphens: auto; -webkit-hyphens: auto; }

:root{
  /* LIGHT */
  --bg:#eef1f6;
  --surface:#f7f9ff;
  --card:#ffffff;
  --text:#525c69 ;
  --muted:#6b7280;
  --border:#e3e9f3;
  
  --color1: #0000001a;

  --cta:#d8ff7c;   /* лайм как на референсе */
  --cta-text:#17202a;

  --shadow-outer: 18px 18px 40px #cfd7e5, -18px -18px 40px #ffffff;
  --shadow-card: 14px 14px 30px #d4dbea, -12px -12px 28px #ffffff;
  --shadow-in: inset 8px 8px 16px rgba(0,0,0,.07), inset -8px -8px 18px rgba(255,255,255,.8);

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 14px;

  /* Letterpress (вдавленный текст) */
  --press-hi: rgba(255,255,255,.85);
  --press-lo: rgba(0,0,0,.20);

  /* Corner CTA */
  --corner-color:#0002;
  --corner-dist:24px;
  --corner-multiplier:1.5;
  --btn-anim-fn:cubic-bezier(0,0,0,2.5);
  --btn-anim-dur:250ms;
}

/* DARK */
html[data-theme="dark"]{
  --bg:#0b1020;
  --surface:#0f1626;
  --card:#111a2c;
  --text:#e7edf6;
  --muted:#9aa4b2;
  --border:#1e2a42;
  
  --color1: #ffffffd1;

  --shadow-outer: 14px 14px 36px rgba(0,0,0,.55), -12px -12px 28px rgba(255,255,255,.06);
  --shadow-card: 12px 12px 28px rgba(0,0,0,.6), -10px -10px 24px rgba(255,255,255,.05);
  --shadow-in: inset 8px 8px 16px rgba(0,0,0,.6), inset -8px -8px 18px rgba(255,255,255,.06);

  --press-hi: rgba(255,255,255,.06);
  --press-lo: rgba(0,0,0,.85);
  --corner-color:#0004;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 460px at 120% -10%, rgba(216,255,124,.16), transparent 60%),
    radial-gradient(900px 460px at -20% 110%, rgba(145,158,255,.12), transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* ---------- Типографика ---------- */
h1{font-size:28px;margin:18px auto 10px;text-align:center}
h2{font-size:24px;margin:18px 0 10px}
h3{font-size:20px;margin:16px 0 8px}
p{margin:8px 0}
.muted{color:var(--muted)}

.container,.offers-grid,.site-header .header-inner,.ads-block{max-width:1040px;margin:0 auto;padding:0 16px}

/* ---------- Header + theme toggle ---------- */
.site-header{padding: 10px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-outer)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo img{height:40px;display:block}
.theme-toggle{
  appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);
  padding:10px 14px;border-radius:999px;box-shadow:var(--shadow-card);cursor:pointer
}
.theme-toggle:active{box-shadow:var(--shadow-in)}

/* ---------- GRID ---------- */
.offers-grid{
  display:grid;gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  padding: 12px 16px 22px;
}

/* ---------- OFFER CARD: пластиковая ---------- */
.offer-card{
    margin-top: 10px;
  position:relative;
  background: linear-gradient(180deg, #fff, #f7faff);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow: 1px 1px 2px -1px #fff inset, 0 2px 1px #00000010, 0 4px 2px #00000010, 0 8px 4px #00000010, 0 16px 8px #00000010, 0 32px 16px #00000010;
  padding: 16px 16px 18px;
  display:flex;flex-direction:column;gap:12px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  isolation:isolate; /* для подсветки */
}
html[data-theme="dark"] .offer-card{
  background: linear-gradient(180deg, #131d31, #0e1626);
}
.offer-card::after{ /* мягкий ореол, чтобы не сливалась с фоном */
  content:""; position:absolute; inset:-10px; z-index:-1; border-radius: calc(var(--radius-xl) + 10px);
  filter: blur(14px); opacity:.65;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.10), transparent 60%);
}
html[data-theme="dark"] .offer-card::after{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.35), transparent 60%);
}
.offer-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-outer); }

/* выделенные карточки */
.offer-card.featured{
  border:2px solid var(--hl, #7decab);
      box-shadow: 1px 1px 2px -1px #83ff7287 inset, 0 2px 1px #8eff9145, 0 4px 2px #00000010, 0 8px 4px #75ff7924, 0 16px 8px #52ff6a29, 0 32px 16px #5aff6530;
}

/* шапка */
.card-head{display:flex;align-items:flex-start;gap:12px}
.card-head .company{flex:1}
.company .title{font-weight:800;font-size:18px;color:#ef4444}
html[data-theme="dark"] .company .title{color:#ffb3a8}
.company .addr{font-size:12px;color:var(--muted)}

/* логотип на «чипе» */
.logo-chip{
  min-width:112px;  height:46px;padding:6px 10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, #fff, #f1f5ff);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-in)
}
html[data-theme="dark"] .logo-chip{ background: linear-gradient(180deg, #0e2e73, #374669); }
.logo-chip img{    padding-top: 7px;
max-width:96px;object-fit:contain}

/* specs-панель: вдавленная, лейбл слева, значение справа */
.card-specs{
  background: color-mix(in srgb, var(--surface) 70%, #fff 30%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow-in);
  padding:6px;
}
.spec-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:10px 12px;
}
.spec-row:last-child{border-bottom:none}
.spec-row .label{
  font-size:12px; color:var(--muted);
  /* лёгкая вдавленность подписи */
  text-shadow: 0 1px 0 var(--press-hi), 0 -1px 0 var(--press-lo);
}
.spec-row .value{
    color: var(--color1);
    background: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    text-shadow: 0px 3px 3px rgba(255, 255, 255, 0.5);
    font-weight: 800;
    font-size: 15px;
    text-align: right;
}

/* действия внизу */
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;font-size:12px;border-radius:999px;
  background:linear-gradient(180deg,#fff,#eef2ff);border:1px solid var(--border);box-shadow:var(--shadow-in)
}
html[data-theme="dark"] .badge{ background:linear-gradient(180deg,#172338,#0e1626) }

/* ---------- CORNER CTA (как на референсе) ---------- */
.btn-container{
  --btn-color: var(--cta);
  --corner-color: var(--corner-color);
  --corner-dist: var(--corner-dist);
  --corner-multiplier: var(--corner-multiplier);
  --timing-function: var(--btn-anim-fn);
  --duration: var(--btn-anim-dur);
  position:relative;display:flex;align-items:center;justify-content:center;
}
.btn{
  position:relative; min-width:190px; min-height:calc(var(--corner-dist)*2);
  border-radius:16px; border:none; padding:6px; cursor:pointer;
  background: linear-gradient(#fff2, #0001), var(--btn-color);
  box-shadow:
    1px 1px 2px -1px #fff inset,
    0 2px 1px #00000010, 0 4px 2px #00000010,
    0 8px 4px #00000010, 0 16px 8px #00000010, 0 32px 16px #00000010;
  transition: transform var(--duration) var(--timing-function), filter var(--duration) var(--timing-function);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
html[data-theme="dark"] .btn{
  box-shadow:
    1px 1px 2px -1px rgba(255,255,255,.2) inset,
    0 2px 1px rgba(0,0,0,.25), 0 4px 2px rgba(0,0,0,.25),
    0 8px 4px rgba(0,0,0,.25), 0 16px 8px rgba(0,0,0,.25), 0 32px 16px rgba(0,0,0,.25);
}
.btn-text{
  display:inline-block; font-size:1.1em; font-weight:700; color:#5550;
  background-image: linear-gradient(#444, #000a);
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006);
  transition: transform var(--duration) var(--timing-function), filter var(--duration) var(--timing-function), color var(--duration) var(--timing-function);
}
html[data-theme="dark"] .btn-text{ background-image: linear-gradient(#222, #000a) }
.btn-drawer{
  position:absolute; display:flex; justify-content:center; align-items:center;
  min-height:32px; border-radius:16px; padding:0.25em 1em; font-size:.8em; font-weight:600; color:#0009;
  background: linear-gradient(#fff2,#0001), var(--btn-color);
  opacity:0; filter:blur(2px);
  transition: transform calc(.5*var(--duration)) ease, filter var(--duration) var(--timing-function), opacity calc(.5*var(--duration)) ease;
}
.transition-top{ top:0; left:0; border-radius:12px 12px 0 0; align-items:flex-start }
.transition-bottom{ bottom:0; right:0; border-radius:0 0 12px 12px; align-items:flex-end }

.btn-corner{ position:absolute; width:32px; fill:none; stroke:var(--corner-color);
  transition: transform var(--duration) var(--timing-function), filter var(--duration) var(--timing-function) }
.btn-corner:nth-of-type(1){ top:0; left:0; transform:translate(calc(-1*var(--corner-dist)),calc(-1*var(--corner-dist))) rotate(90deg) }
.btn-corner:nth-of-type(2){ top:0; right:0; transform:translate(var(--corner-dist),calc(-1*var(--corner-dist))) rotate(180deg) }
.btn-corner:nth-of-type(3){ bottom:0; right:0; transform:translate(var(--corner-dist),var(--corner-dist)) rotate(-90deg) }
.btn-corner:nth-of-type(4){ bottom:0; left:0; transform:translate(calc(-1*var(--corner-dist)),var(--corner-dist)) rotate(0deg) }

.btn-container:has(.btn:hover), .btn-container:has(.btn:focus-visible){
  .btn{ transform:scale(1.05); filter:drop-shadow(0 16px 16px #0002) }
  .transition-top{ transform:translateY(-24px) rotateZ(4deg); filter:blur(0); opacity:1; animation:hue-anim 3s infinite linear }
  .transition-bottom{ transform:translateY(24px) rotateZ(4deg); filter:blur(0); opacity:1; animation:hue-anim 3s infinite linear }
  .btn-text{ transform:scale(1.05); color:#0008; filter: drop-shadow(0 1px 0 #fff6) drop-shadow(0 -1px 0 #0006) drop-shadow(0 6px 2px #0003) }
  --corner-color:#0004;
}
.btn-container:has(.btn:active){
  .btn{ transform:scale(0.95); filter:drop-shadow(0 10px 4px #0002) }
  .transition-top,.transition-bottom{ transform:translateY(0) scale(.5) }
  .btn-text{ transform:scale(1); color:#000a }
  --corner-color:#0005; --corner-multiplier:.95;
}
@keyframes hue-anim{ 0%,100%{ filter:hue-rotate(0) } 50%{ filter:hue-rotate(-70deg) } }

/* вторичная кнопка — «Detailid»: пластиковая, но спокойная */
.btn-ghost{
  background: linear-gradient(180deg,#fff,#eef2ff);
  color:#374151; border:1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 12px 22px; border-radius:16px; font-weight:700; cursor:pointer;
}
.btn-ghost:active{ box-shadow: var(--shadow-in) }
html[data-theme="dark"] .btn-ghost{ background: linear-gradient(180deg,#172338,#0f172a); color:#e5e7eb }

/* Ads / Info / Footer — кратко */
.ads-block{margin:16px auto}.ads-block>*{border-radius:14px;overflow:hidden}
.info-section{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);padding:18px;margin:10px auto 24px}
.site-footer{background:var(--surface);color:var(--text);text-align:center;padding:22px 16px;border-top:1px solid var(--border);box-shadow:var(--shadow-outer) inset}
.site-footer .disclaimer{opacity:.8;font-size:13px;max-width:1040px;margin:8px auto 0}
.footer-menu{color:#2563eb;text-decoration:none;font-weight:600}.footer-menu:hover{text-decoration:underline}

.offer-details{ max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .25s ease, padding .25s ease; padding:0 2px; border-top:1px solid transparent; }
.offer-details.visible{ opacity:1; max-height:900px; padding-top:10px; border-top:1px solid var(--border); }

/* адаптив */
@media (max-width:540px){
  .offers-grid{grid-template-columns:1fr}
}