/* ===== homepage ===== */
.hero { position: relative; overflow: hidden; }
.hero::before { content:""; position:absolute; inset:0; background:
   radial-gradient(70% 90% at 88% -10%, rgba(241,178,60,.16), transparent 60%),
   radial-gradient(60% 80% at 6% 0%, rgba(17,129,90,.10), transparent 55%);
   pointer-events:none; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 64px 24px 56px; max-width: var(--maxw); margin: 0 auto; position: relative; }
.hero h1 { font-size: clamp(36px, 5.2vw, 60px); letter-spacing: -.03em; margin: 20px 0 18px; }
.hero h1 .hl { color: var(--brand-600); position: relative; white-space: nowrap; }
.hero h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:.06em; height:.22em; background: var(--gold-300); border-radius:4px; z-index:-1; opacity:.7; }
.hero-lead { font-size: 19px; color: var(--ink-2); max-width: 500px; }

.searchbox { display:flex; gap:10px; background: var(--surface); border:1.5px solid var(--line); border-radius: var(--r-pill); padding: 8px 8px 8px 20px; box-shadow: var(--sh-md); margin-top: 28px; max-width: 520px; transition: border-color .15s; }
.searchbox:focus-within { border-color: var(--brand-500); }
.searchbox svg { width: 21px; height: 21px; color: var(--ink-3); align-self: center; flex:none; }
.searchbox input { flex:1; border:none; outline:none; font-family: var(--font); font-size: 16.5px; background: transparent; color: var(--ink); min-width: 0; }
.searchbox input::placeholder { color: var(--ink-3); }

.pop-chips { display:flex; flex-wrap:wrap; gap:9px; margin-top: 20px; align-items:center; }
.pop-chips .lbl { font-size: 13.5px; color: var(--ink-3); font-weight:600; }
.hero-trust { display:flex; gap:22px; flex-wrap:wrap; margin-top: 30px; }
.hero-trust .ht { display:flex; align-items:center; gap:9px; font-size:14.5px; color: var(--ink-2); }
.hero-trust .ht svg { width:18px;height:18px;color:var(--brand-600);flex:none; }

/* hero visual */
.hero-visual { position: relative; height: 460px; }
.calc-card { position:absolute; top: 34px; left: 26px; right: 8px; background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 24px; transform: rotate(-1.4deg); }
.calc-card .cc-head { display:flex; align-items:center; gap:10px; margin-bottom: 18px; }
.calc-card .cc-ico { width:38px;height:38px;border-radius:11px;background:var(--brand-50);display:grid;place-items:center;color:var(--brand-600); }
.calc-card .cc-ico svg{width:21px;height:21px;}
.calc-card .cc-head b { font-size:15.5px; }
.calc-card .cc-head span { font-size:12.5px; color:var(--ink-3); display:block; }
.cc-row { display:flex; justify-content:space-between; align-items:center; padding: 9px 0; font-size:14.5px; color:var(--ink-2); border-bottom:1px dashed var(--line); }
.cc-row b { color: var(--ink); font-weight:600; }
.cc-result { margin-top:16px; background: var(--brand-600); color:#fff; border-radius: var(--r); padding:16px 18px; display:flex; align-items:baseline; justify-content:space-between; }
.cc-result span { font-size:13.5px; color:#BFE6D2; }
.cc-result b { font-family:var(--display); font-weight:700; font-size:26px; }
.float-pill { position:absolute; background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-pill); box-shadow: var(--sh-md); padding: 11px 16px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.float-pill .fp-ic { width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none; }
.float-pill small{ display:block;font-size:11.5px;color:var(--ink-3);font-weight:500; }
.fp-usd { top: 2px; right: 18px; transform: rotate(3deg); animation: floaty 6s ease-in-out infinite; }
.fp-rate { bottom: 36px; left: -6px; transform: rotate(-2deg); animation: floaty 7s ease-in-out infinite .8s; }
.fp-min { bottom: -2px; right: 40px; transform: rotate(2.5deg); animation: floaty 6.5s ease-in-out infinite .4s; }
@keyframes floaty { 0%,100%{ translate:0 0; } 50%{ translate:0 -9px; } }

/* live data strip */
.datastrip { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.dcard { background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r); padding:18px 20px; box-shadow: var(--sh-sm); }
.dcard .dl { font-size:13.5px; color:var(--ink-3); font-weight:600; display:flex; align-items:center; gap:7px; }
.dcard .dv { font-family:var(--display); font-weight:700; font-size:27px; margin-top:8px; letter-spacing:-.02em; }
.dcard .dd { font-size:13px; margin-top:6px; display:flex; align-items:center; gap:6px; }
.dcard .dd .up{color:var(--up);font-weight:600;} .dcard .dd .down{color:var(--down);font-weight:600;}
.dcard .dd .muted{color:var(--ink-3);}

/* sections */
section.block { padding: 72px 0 0; }

/* category grid */
.cat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.cat-card { background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px; transition: transform .18s ease, box-shadow .22s ease, border-color .18s; display:flex; flex-direction:column; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-300); }
.cat-head { display:block; color:inherit; }
.cat-ico { width:50px;height:50px;border-radius:15px; display:grid; place-items:center; margin-bottom:16px; color: var(--brand-700); background: var(--brand-50); }
.cat-ico svg{ width:27px;height:27px; }
.cat-card:nth-child(4n+2) .cat-ico{ background:var(--gold-50); color:var(--gold-600); }
.cat-card:nth-child(4n+3) .cat-ico{ background:#EEF1FA; color:#4B53A0; }
.cat-card h3 { font-size:18.5px; margin-bottom:6px; letter-spacing:-.01em; }
.cat-card .cc-count { font-size:13px; color:var(--ink-3); font-weight:600; margin-bottom:14px; }
.cat-links { list-style:none; margin:0; padding:0; display:grid; gap:2px; margin-top:auto; }
.cat-links a { font-size:14.5px; color:var(--ink-2); padding:5px 0; display:flex; align-items:center; gap:8px; transition:color .14s; border-bottom:1px solid transparent; }
.cat-links a::before{ content:""; width:5px;height:5px;border-radius:50%;background:var(--brand-300); flex:none; }
.cat-links a:hover{ color:var(--brand-700); }

/* popular calculators */
.pop-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.pop-card { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:12px; transition: transform .16s, box-shadow .2s, border-color .16s; }
.pop-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-300); }
.pop-card .pc-top { display:flex; align-items:center; justify-content:space-between; }
.pop-card .pc-ic { width:42px;height:42px;border-radius:12px;background:var(--brand-50);display:grid;place-items:center;color:var(--brand-600); }
.pop-card .pc-ic svg{width:22px;height:22px;}
.pop-card h3{ font-size:18px; }
.pop-card p{ font-size:14.5px; color:var(--ink-2); }
.pop-card .pc-foot{ display:flex; align-items:center; gap:8px; margin-top:auto; font-size:13.5px; color:var(--ink-3); }
.pop-card .pc-go{ margin-left:auto; color:var(--brand-700); font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.pop-card .pc-go svg{ width:15px;height:15px; transition:transform .15s; }
.pop-card:hover .pc-go svg{ transform:translateX(3px); }

/* trust band */
.trust-band { background: var(--brand-900); color:#fff; border-radius: var(--r-xl); padding: 52px; margin-top: 72px; display:grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items:center; position:relative; overflow:hidden; }
.trust-band::before{ content:""; position:absolute; right:-60px; top:-60px; width:280px;height:280px;border-radius:50%; background:radial-gradient(circle, rgba(241,178,60,.16), transparent 70%); }
.trust-band h2{ font-size: clamp(26px,3vw,34px); color:#fff; }
.trust-band .tb-lead{ color:#9EC4B1; margin-top:14px; font-size:16.5px; }
.author { display:flex; gap:16px; align-items:center; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:16px; margin-top:24px; }
.author .av{ width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,var(--brand-500),var(--brand-700)); display:grid;place-items:center; font-family:var(--display); font-weight:700; color:#fff; font-size:20px; flex:none; }
.author b{ color:#fff; font-size:15.5px; } .author span{ color:#87AC99; font-size:13.5px; display:block; }
.trust-points{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tp{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:20px; }
.tp .tp-ic{ width:40px;height:40px;border-radius:11px;background:rgba(241,178,60,.16);display:grid;place-items:center;color:var(--gold-300);margin-bottom:13px; }
.tp .tp-ic svg{width:21px;height:21px;}
.tp b{ display:block; color:#fff; font-size:16px; margin-bottom:6px; }
.tp p{ color:#9EC4B1; font-size:14px; line-height:1.55; }

/* articles */
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.art-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; transition:transform .16s,box-shadow .2s; display:flex; flex-direction:column; }
.art-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.art-thumb{ height:168px; background:var(--brand-50); position:relative; overflow:hidden; }
.art-thumb svg{ width:100%; height:100%; display:block; }
.art-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.art-body h3{ font-size:18px; line-height:1.25; }
.art-body p{ font-size:14px; color:var(--ink-2); }
.art-meta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); }

/* newsletter */
.news-band{ background: var(--gold-50); border:1px solid var(--gold-100); border-radius:var(--r-xl); padding:48px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; margin-top:72px; }
.news-band h2{ font-size:clamp(24px,2.8vw,32px); }
.news-band p{ color:var(--ink-2); margin-top:12px; max-width:440px; }
.news-form{ display:flex; gap:10px; flex-wrap:wrap; }
.news-form input{ flex:1; min-width:200px; border:1.5px solid var(--gold-300); border-radius:var(--r-pill); padding:14px 20px; font-family:var(--font); font-size:16px; background:#fff; outline:none; }
.news-form input:focus{ border-color:var(--gold-600); }
.news-note{ font-size:13px; color:var(--ink-3); margin-top:12px; }

/* різне / latest feed */
.misc-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.misc-item{ display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:16px 18px; transition:transform .14s,box-shadow .2s,border-color .14s; }
.misc-item:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--brand-300); }
.mi-date{ flex:none; width:52px; text-align:center; font-family:var(--display); font-weight:700; font-size:18px; color:var(--brand-700); line-height:1.05; }
.mi-date small{ display:block; font-family:var(--font); font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.04em; }
.mi-div{ width:1px; align-self:stretch; background:var(--line-2); flex:none; }
.mi-body{ flex:1; min-width:0; }
.mi-body .mi-tags{ display:flex; gap:7px; margin-bottom:5px; }
.mi-body h3{ font-size:16px; line-height:1.3; font-weight:600; }
.misc-item .mi-arrow{ flex:none; color:var(--brand-600); opacity:0; transition:opacity .15s,transform .15s; }
.misc-item:hover .mi-arrow{ opacity:1; transform:translateX(2px); }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-visual{ height:380px; max-width:460px; }
  .datastrip{ grid-template-columns:1fr 1fr; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .pop-grid,.art-grid{ grid-template-columns:1fr 1fr; }
  .trust-band,.news-band{ grid-template-columns:1fr; padding:36px; }
  .trust-band{ gap:30px; }
}
@media (max-width: 620px){
  .cat-grid,.pop-grid,.art-grid,.datastrip,.misc-list{ grid-template-columns:1fr; }
  .trust-points{ grid-template-columns:1fr; }
  section.block{ padding:52px 0 0; }
  .hero-visual{ display:none; }
}