/* Back Links Net UA · «2 епоха середзем’я» · Approved mockup implementation
   Premium finish v1.1.0-rc1 · Scoped to main landing; no other subdomains modified. */
.era-home{--premium-bg:#f5f8fd;--premium-shadow:0 16px 40px rgba(41,70,131,.08)}
.era-home .era-shell{max-width:1256px}
.era-home h2{font-size:clamp(28px,2.75vw,36px);line-height:1.15;letter-spacing:-.049em}
.era-home .era-section{padding:33px 0}
.era-home .era-section-head{margin-bottom:19px}
.era-home .era-section-head p{line-height:1.45}
.era-home .era-section-head h2{margin:5px 0 8px}
.era-home .era-kicker{font-size:10px;letter-spacing:.13em}
.era-home .era-button,.era-home .era-button:visited{border-radius:13px;min-height:45px;padding:11px 18px;font-size:13px;font-weight:800}
.era-home .era-button-primary,.era-home .era-button-purple{background:linear-gradient(112deg,#188dfd,#626af4 53%,#ab31dc);box-shadow:0 12px 26px rgba(68,91,223,.21)}
/* Elegant compact hero with art from the approved mockup */
.era-home .era-hero{padding:38px 0 59px;background:
 radial-gradient(590px 295px at 71% 16%,rgba(73,213,241,.27),transparent 78%),
 radial-gradient(610px 340px at 76% 85%,rgba(155,98,255,.27),transparent 82%),
 radial-gradient(400px 250px at 25% 72%,rgba(151,148,255,.1),transparent 80%),
 linear-gradient(145deg,#f8fbff 5%,#edf5ff 54%,#f4edff 100%);border:0}
.era-home .era-hero-grid{grid-template-columns:1.03fr .97fr;gap:10px;align-items:center}
.era-home .era-hero-copy{padding:0;align-self:center}
.era-home .era-eyebrow{padding:7px 12px;font-size:11px;background:#bdefff;border-color:#a1eaff;color:#17436e;box-shadow:0 5px 12px rgba(23,148,215,.06)}
.era-home .era-hero h1{font-size:clamp(39px,4.05vw,62px);max-width:680px;line-height:1.08;margin:14px 0 15px;font-weight:900;letter-spacing:-.062em;color:#111d3c}
.era-home .era-gradient-text{background:linear-gradient(105deg,#08c4f2,#287bea 38%,#8c4bfa 87%);-webkit-background-clip:text;background-clip:text;color:transparent}
.era-home .era-lead{font-size:14.5px;line-height:1.55;max-width:500px;margin-bottom:19px;color:#536585}
.era-home .era-actions{gap:10px}
.era-home .era-trust-line{margin-top:21px;gap:9px 18px;font-size:11px;color:#4f6583}
.era-home .era-trust-line span{display:inline-flex;align-items:center;gap:3px}
.era-home .era-reference-art{display:flex;align-items:center;justify-content:center;position:relative;height:330px;overflow:visible}
.era-home .era-reference-image{position:relative;display:block;width:112%;max-width:none;height:auto;aspect-ratio:390/259;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(74,80,168,.10));transform:translate(9px,0)}
.era-home .era-art-caption{position:absolute;bottom:-4px;right:10px;font-size:9px;font-weight:700;color:#556995;background:rgba(255,255,255,.8);border-radius:999px;padding:5px 9px;border:1px solid #e5e9fd}
/* Metric strip belongs directly to hero, not an isolated blank area */
.era-home .era-metric-band{margin-top:-32px;z-index:3}
.era-home .era-metric-grid{min-height:89px;padding:11px 14px;border-radius:18px;border:1px solid #e7eefa;background:rgba(255,255,255,.95);box-shadow:0 16px 38px rgba(56,74,140,.11)}
.era-home .era-metric{gap:12px;padding:8px 12px}.era-home .era-metric-icon{height:40px;width:40px;font-size:19px}
.era-home .era-metric strong{font-size:25px;color:#15244d}.era-home .era-metric>div>span{font-size:11px;color:#546784}
/* Three convincing persona cards with visual hierarchy, not giant empty boxes */
.era-home .era-personas{padding-top:36px;padding-bottom:33px;background:radial-gradient(540px 260px at 0% 86%,rgba(130,176,255,.06),transparent 85%)}
.era-home .era-role-grid{gap:17px}
.era-home .era-role-card{min-height:312px;padding:23px;border-radius:19px;border-color:rgba(148,180,238,.19);box-shadow:0 13px 33px rgba(64,87,156,.055);position:relative;overflow:hidden}
.era-home .era-role-blue{background:linear-gradient(137deg,#f0f8ff 0%,#dfeaff 100%)}
.era-home .era-role-green{background:linear-gradient(137deg,#effff8 0%,#d8f6ef 100%)}
.era-home .era-role-purple{background:linear-gradient(137deg,#f8f3ff 0%,#ecddfb 100%)}
.era-home .era-role-card:after{content:"";width:142px;height:142px;position:absolute;right:-60px;top:-62px;border-radius:50%;background:rgba(255,255,255,.24);pointer-events:none}
.era-home .era-role-top{margin-bottom:2px}.era-home .era-role-icon{height:42px;width:42px}
.era-home .era-role-symbol{font-size:52px;filter:drop-shadow(0 9px 10px rgba(54,105,237,.26))}
.era-home .era-role-card h3{font-size:22px;margin:5px 0 6px}.era-home .era-role-card>p{font-size:12px;margin-bottom:10px;line-height:1.46;color:#5d718f}
.era-home .era-role-card ul{gap:7px;margin-bottom:15px}.era-home .era-role-card li{font-size:12px;line-height:1.35;color:#273a63}
.era-home .era-role-card>.era-button{margin-top:auto;align-self:flex-start;min-height:42px}
/* Process timeline: clear, connected and compact */
.era-home .era-process{padding:25px 0 27px}
.era-home .era-steps{margin-top:20px;margin-bottom:0;padding:5px 0 11px;position:relative}
.era-home .era-step-icon{width:61px;height:61px;font-size:24px;box-shadow:inset 0 0 0 1px rgba(101,149,232,.08)}
.era-home .era-steps li{padding:0 11px}.era-home .era-steps li strong{font-size:14px}.era-home .era-steps li p{font-size:11px;line-height:1.42;margin:7px auto 0;max-width:210px}
/* Benefits and a 3-card catalog line exactly as in approved reference */
.era-home .era-benefit-sites{padding:30px 0 34px;border-top:1px solid var(--era-line);background:linear-gradient(170deg,rgba(255,255,255,.64),rgba(238,245,255,.56))}
.era-home .era-two-col{display:grid;grid-template-columns: .98fr 1.12fr;gap:40px;align-items:start}
.era-home .era-benefits{position:relative;min-height:335px;padding-bottom:8px}
.era-home .era-benefit{max-width:420px;gap:13px;margin:13px 0}
.era-home .era-benefit>span{width:39px;height:39px;font-size:17px;flex:none}
.era-home .era-benefit h3{font-size:14px;margin:0 0 3px}.era-home .era-benefit p{font-size:11px;line-height:1.35}
.era-home .era-benefits-link-art{position:absolute;right:-16px;bottom:22px;width:185px;max-width:37%;opacity:.92;filter:drop-shadow(0 12px 16px rgba(70,93,223,.14));pointer-events:none}
.era-home .era-benefits>.era-inline-link{position:relative;z-index:2;margin-top:9px}
.era-home .era-featured-heading{margin-bottom:13px}.era-home .era-featured-heading h2{margin:5px 0 6px}
.era-home .era-catalog-search{margin-bottom:12px}.era-home .era-catalog-search input{padding:10px 12px}
.era-home .era-site-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.era-home .era-site-card{min-width:0;border-radius:15px;box-shadow:0 10px 25px rgba(42,76,152,.075);transition:transform .2s,box-shadow .2s}
.era-home .era-site-card:hover{transform:translateY(-4px);box-shadow:0 18px 32px rgba(42,76,152,.12)}
.era-home .era-site-media{height:129px;background:#edf3fb}.era-home .era-site-card-body{padding:10px}
.era-home .era-site-domain{font-size:12px;font-weight:850}.era-home .era-site-meta{gap:5px}.era-home .era-site-meta span{font-size:10px}
.era-home .era-site-meta a{font-size:10px}.era-home .era-site-preview{font-size:10px}
.era-home .era-catalog-more{display:table;margin:13px auto 0;min-height:40px}
/* Review section: faithful 3-card slider rather than 6 tall rows */
.era-home .era-reviews{padding:35px 0 39px;background:linear-gradient(145deg,#f1f5ff,#f8f8ff 59%,#f1f7ff)}
.era-home .era-review-head{margin-bottom:19px}
.era-home .era-review-controls{display:flex;gap:8px;align-items:center}
.era-home .era-review-nav{width:40px;height:40px;background:#fff;border:1px solid #dfe8fa;color:#26375c;border-radius:50%;box-shadow:0 5px 16px rgba(59,82,157,.07);cursor:pointer}
.era-home .era-review-nav:hover{border-color:#7d93f9;color:#7659ed}
.era-home .era-review-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);grid-template-columns:none;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:0 1px 7px}
.era-home .era-review-grid::-webkit-scrollbar{display:none}
.era-home .era-review-card{scroll-snap-align:start;min-height:197px;gap:11px;padding:20px;border-radius:17px;background:#fff;box-shadow:0 9px 27px rgba(46,70,127,.055)}
.era-home .era-review-stars{font-size:16px}.era-home .era-review-content{font-size:13px;line-height:1.55;color:#253456;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.era-home .era-review-author{padding-top:10px}.era-home .era-avatar{width:36px;height:36px}.era-home .era-review-note{margin:10px 0 0}
/* FAQ: tighter structure and higher contrast */
.era-home .era-faq{padding:30px 0 26px}.era-home .era-faq-grid{grid-template-columns:.82fr 1.18fr;gap:42px}
.era-home .era-faq-list{gap:8px}.era-home .era-faq-list details{border:1px solid var(--era-line);background:var(--card);border-radius:13px;box-shadow:0 4px 16px rgba(26,58,112,.025)}
.era-home .era-faq-search{margin-bottom:9px;padding:10px 13px}
.era-home .era-faq-list summary{font-size:13px;font-weight:750;padding:13px 15px}
/* Tools are useful, but secondary; don't create empty vertical mass */
.era-home .era-tools{padding:22px 0 18px;background:linear-gradient(180deg,transparent,rgba(128,153,242,.035))}
.era-home .era-tool-grid{gap:13px}.era-home .era-tool-card{border-radius:15px}
.era-home .era-tool-card>summary{padding:15px 17px}.era-home .era-tool-body{padding:15px}
/* Conversion CTA, footer */
.era-home .era-last-cta{padding:29px 0 36px}
.era-home .era-cta-surface{min-height:105px;padding:21px 29px;border-radius:19px;background:linear-gradient(100deg,#8975f8 0%,#4e7dfe 49%,#0ac5ef 100%);box-shadow:0 17px 37px rgba(66,113,244,.19)}
.era-home .era-cta-surface h2{font-size:23px;margin:0 0 6px;color:#fff}.era-home .era-cta-surface p{font-size:12px;max-width:480px;line-height:1.4;margin:0;color:#f5f8ff}
.era-home .era-cta-icon{height:66px;width:66px;font-size:30px}
.era-home .era-cta-surface .era-button-white{border-radius:12px}
.era-home + .era-footer{padding-top:37px}
body.era-home .bln-footer.era-footer{padding-top:37px}
body.era-home .era-footer-grid{gap:26px}
body.era-home .era-footer-brand p{margin:8px 0 11px;line-height:1.5}
body.era-home .era-footer-links,body.era-home .era-footer-support{gap:9px}
body.era-home .era-footer-bottom{margin-top:28px;padding:15px 0}
/* dark palette retains same approved design hierarchy without white cards */
html:not(.light-mode) .era-home .era-hero{background:radial-gradient(610px 320px at 69% 12%,rgba(21,145,208,.19),transparent 79%),radial-gradient(520px 330px at 79% 85%,rgba(94,66,205,.26),transparent 83%),linear-gradient(140deg,#0a142a,#101a38 66%,#171335)}
html:not(.light-mode) .era-home .era-hero h1{color:#f4f8ff}
html:not(.light-mode) .era-home .era-lead,html:not(.light-mode) .era-home .era-trust-line{color:#acbfdd}
html:not(.light-mode) .era-home .era-eyebrow{background:#113354;border-color:#1d5275;color:#a9e8ff}
html:not(.light-mode) .era-home .era-art-caption{background:rgba(14,27,57,.85);border-color:#2c3e62;color:#c2d5f3}
html:not(.light-mode) .era-home .era-metric-grid{background:#14233b;border-color:#2d3d5c}
html:not(.light-mode) .era-home .era-metric strong{color:#f0f6ff}
html:not(.light-mode) .era-home .era-metric>div>span{color:#b2c5df}
html:not(.light-mode) .era-home .era-role-blue{background:linear-gradient(145deg,#112d4d,#142744)}
html:not(.light-mode) .era-home .era-role-green{background:linear-gradient(145deg,#103635,#0e2c32)}
html:not(.light-mode) .era-home .era-role-purple{background:linear-gradient(145deg,#332849,#27213e)}
html:not(.light-mode) .era-home .era-role-card>p,html:not(.light-mode) .era-home .era-role-card li{color:#c1cfe8}
html:not(.light-mode) .era-home .era-benefit-sites{background:linear-gradient(160deg,#0b1830,#111d36)}
html:not(.light-mode) .era-home .era-site-media{background:#14253f}
html:not(.light-mode) .era-home .era-reviews{background:linear-gradient(155deg,#0b1831,#11172c 55%,#111d39)}
html:not(.light-mode) .era-home .era-review-card{background:#192842;border-color:#304563}
html:not(.light-mode) .era-home .era-review-content{color:#dce9fb}
html:not(.light-mode) .era-home .era-review-nav{background:#1c2b44;border-color:#314968;color:#f0f7ff}
html:not(.light-mode) .era-home .era-faq-list details{background:#14233a}
@media(max-width:1100px){
 .era-home .era-two-col{gap:20px}
 .era-home .era-site-grid{gap:8px}
 .era-home .era-site-media{height:105px}
 .era-home .era-hero h1{font-size:clamp(34px,4.5vw,52px)}
 .era-home .era-hero-art{height:300px}
 .era-home .era-role-card{padding:19px}
}
@media(max-width:840px){
 .era-home .era-hero{padding:35px 0 48px}
 .era-home .era-hero-grid{grid-template-columns:1fr;gap:8px;text-align:left}
 .era-home .era-reference-art{height:auto;max-width:570px;width:100%;justify-self:center}
 .era-home .era-reference-image{width:100%;transform:none}
 .era-home .era-art-caption{bottom:2px}
 .era-home .era-role-grid{grid-template-columns:1fr 1fr}
 .era-home .era-role-card{min-height:0}
 .era-home .era-role-card:last-child{grid-column:1/-1}
 .era-home .era-two-col{grid-template-columns:1fr;gap:27px}
 .era-home .era-benefits{min-height:0;padding-bottom:8px}
 .era-home .era-benefits-link-art{right:16px;bottom:18px}
 .era-home .era-site-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .era-home .era-site-media{height:125px}
 .era-home .era-faq-grid{gap:22px}
 .era-home .era-review-grid{grid-auto-columns:calc((100% - 18px)/2)}
}
@media(max-width:620px){
 .era-home .era-section{padding:26px 0}
 .era-home .era-hero{padding:26px 0 44px}
 .era-home .era-hero h1{font-size:clamp(31px,8vw,43px);margin:12px 0}
 .era-home .era-lead{font-size:13px;margin-bottom:18px}
 .era-home .era-reference-art{height:auto}.era-home .era-reference-image{width:112%;transform:translateX(-5%)}
 .era-home .era-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));min-height:auto;gap:2px;padding:11px 7px}
 .era-home .era-metric{justify-content:flex-start;padding:10px 12px;border-bottom:1px solid var(--era-line)}
 .era-home .era-metric:nth-child(even){border-right:0}.era-home .era-metric:nth-child(n+3){border-bottom:0}
 .era-home .era-metric strong{font-size:22px}
 .era-home .era-role-grid{grid-template-columns:1fr;gap:12px}.era-home .era-role-card:last-child{grid-column:auto}
 .era-home .era-role-card{padding:20px}.era-home .era-role-card>p{max-width:420px}
 .era-home .era-process{padding-top:22px}
 .era-home .era-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 11px}
 .era-home .era-steps li{padding:0 5px}
 .era-home .era-site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .era-home .era-featured-heading{gap:8px}
 .era-home .era-benefits-link-art{opacity:.3;width:155px}
 .era-home .era-review-grid{grid-auto-columns:88%;gap:12px}
 .era-home .era-review-card{min-height:185px}
 .era-home .era-faq-grid{grid-template-columns:1fr;gap:16px}
 .era-home .era-cta-surface{padding:22px;gap:10px}
 .era-home .era-cta-surface h2{font-size:21px}
 .era-home .era-cta-surface .era-button-white{width:100%}
}
@media(prefers-reduced-motion:reduce){.era-home .era-review-grid{scroll-behavior:auto}.era-home .era-site-card{transition:none}}

/* Offline-ready vector details match the approved mockup */
.era-home .era-role-symbol{display:grid;place-items:center;width:105px;height:82px;font-size:0;filter:none}
.era-home .era-role-symbol img{display:block;max-width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 10px rgba(70,98,205,.11))}
.era-home .era-step-icon{display:grid;place-items:center}
.era-home .era-step-icon img{display:block;width:37px;height:37px;object-fit:contain}
.era-home .era-site-placeholder{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(147deg,#edf9ff,#e9edff 75%,#e7e8ff);color:#4971ba}
.era-home .era-site-placeholder:before{content:"";position:absolute;top:14%;left:17%;width:68%;height:69%;border:4px solid rgba(73,139,246,.19);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.72) 0 20%,transparent 20% 100%),linear-gradient(123deg,rgba(43,194,239,.23),rgba(150,91,255,.15));transform:rotate(-3deg);z-index:-1}
.era-home .era-site-placeholder:after{content:"";position:absolute;top:34%;left:32%;width:39%;height:25%;border-radius:8px;background:linear-gradient(130deg,rgba(28,132,246,.35),rgba(100,91,248,.23));transform:rotate(-3deg);z-index:-1}
.era-home .era-site-placeholder small{background:rgba(255,255,255,.9);border-radius:20px;padding:5px 7px;max-width:94%;line-height:1.1}
html:not(.light-mode) .era-home .era-site-placeholder{background:linear-gradient(130deg,#203959,#252d58);color:#8ad5ff}
/* Theme indicator remains obvious even when external icon CDNs are blocked */
body.era-home .theme-switcher:after{content:"☾";font-size:21px;line-height:1;font-weight:700;color:var(--ink)}
html:not(.light-mode) body.era-home .theme-switcher:after{content:"☀";font-size:19px}
body.era-home .theme-switcher i{display:none!important}

/* Packaged metric and benefit icons; theme-sensitive artwork */
.era-home .era-metric-icon img{width:26px;height:26px;display:block;object-fit:contain}
.era-home .era-benefit>span img{width:24px;height:24px;display:block;object-fit:contain}
.era-home .era-cta-icon img{width:60px;height:60px;display:block;object-fit:contain}
.era-home .era-reference-light{display:block}
.era-home .era-reference-dark{display:none}
html:not(.light-mode) .era-home .era-reference-light{display:none}
html:not(.light-mode) .era-home .era-reference-dark{display:block;filter:drop-shadow(0 22px 26px rgba(12,19,56,.6));}
.era-home .era-reference-art .era-reference-image{grid-area:1/1}
.era-home .era-reference-art{display:grid;grid-template-columns:1fr;align-items:center;justify-items:center}
