/* ==========================================================
   FinAr Hero v4
   Чіткий офер без псевдоаналітики 78%
   ========================================================== */

.finar-hero-v4{
  position:relative;
  min-height:100vh;
  padding:150px 0 0;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #040a12 0%,
      #071523 43%,
      #0b263d 100%
    );
}

.finar-hero-v4-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );
  background-size:54px 54px;
  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.75) 62%,
      transparent 100%
    );
}

.finar-hero-v4-glow{
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}

.finar-hero-v4-glow-left{
  top:-270px;
  left:-220px;
  background:rgba(45,115,255,.23);
}

.finar-hero-v4-glow-right{
  top:-230px;
  right:-240px;
  background:rgba(24,198,216,.16);
}

.finar-hero-v4-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:
    minmax(0,1.04fr)
    minmax(440px,.96fr);
  gap:72px;
  align-items:center;
  padding-bottom:93px;
}

.finar-hero-v4-copy{
  max-width:790px;
}

.finar-hero-v4-label{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  padding:9px 13px;
  border:1px solid rgba(103,214,225,.18);
  border-radius:999px;
  color:#c8d7e7;
  background:rgba(255,255,255,.045);
  font-size:12px;
  font-weight:750;
  letter-spacing:.02em;
}

.finar-hero-v4-label span{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#49dfb9;
  box-shadow:
    0 0 15px rgba(73,223,185,.85);
}

.finar-hero-v4 h1{
  max-width:870px;
  margin:0 0 27px;
  font-size:clamp(48px,6.1vw,86px);
  line-height:.95;
  letter-spacing:-.069em;
  text-wrap:balance;
}

.finar-hero-v4-lead{
  max-width:720px;
  margin:0 0 31px;
  color:#b4c3d5;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.67;
  text-wrap:pretty;
}

.finar-hero-v4-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.finar-hero-v4-primary,
.finar-hero-v4-price{
  min-height:54px;
  padding:14px 23px;
  border-radius:14px;
}

.finar-hero-v4-price{
  border:1px solid rgba(255,255,255,.17);
  color:#fff;
  background:rgba(255,255,255,.055);
  box-shadow:none;
}

.finar-hero-v4-price:hover{
  border-color:rgba(89,226,207,.38);
  background:rgba(255,255,255,.09);
}

.finar-hero-v4-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
  margin-top:41px;
}

.finar-hero-v4-features > div{
  display:flex;
  gap:11px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.11);
}

.finar-hero-v4-features i{
  color:#55dfc7;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.finar-hero-v4-features strong{
  display:block;
  font-size:12px;
}

.finar-hero-v4-features small{
  display:block;
  margin-top:5px;
  color:#8297af;
  font-size:10px;
  line-height:1.45;
}

/* Права технологічна система */

.finar-hero-v4-visual{
  position:relative;
}

.finar-system-card{
  position:relative;
  padding:22px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:29px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.035)
    );
  box-shadow:
    0 48px 120px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(23px);
}

.finar-system-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:
    linear-gradient(
      135deg,
      rgba(48,143,255,.40),
      transparent 34%,
      rgba(63,224,184,.20)
    );
  filter:blur(22px);
  opacity:.55;
}

.finar-system-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.085);
}

.finar-system-head > div:first-child span{
  display:block;
  margin-bottom:4px;
  color:#61e1cc;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.finar-system-head strong{
  display:block;
  font-size:14px;
}

.finar-system-status{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid rgba(70,225,185,.19);
  border-radius:999px;
  color:#68e2c7;
  background:rgba(70,225,185,.07);
  font-size:9px;
  font-weight:900;
}

.finar-system-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#47dfb9;
  box-shadow:0 0 13px rgba(71,223,185,.8);
}

.finar-system-core{
  position:relative;
  min-height:400px;
  margin-top:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;
  background:
    radial-gradient(
      circle at center,
      rgba(45,115,255,.17),
      transparent 34%
    ),
    rgba(3,10,18,.22);
}

.finar-system-core::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );
  background-size:32px 32px;
}

.finar-system-center{
  position:absolute;
  top:50%;
  left:50%;
  z-index:5;
  width:132px;
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid rgba(83,223,202,.32);
  border-radius:50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(64,223,188,.24),
      transparent 47%
    ),
    linear-gradient(145deg,#0b2136,#102f4b);
  box-shadow:
    0 0 60px rgba(45,115,255,.22),
    inset 0 0 25px rgba(255,255,255,.05);
  transform:translate(-50%,-50%);
}

.finar-system-center span{
  color:#5be1cb;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.finar-system-center strong{
  margin-top:4px;
  font-size:18px;
}

.finar-system-orbit{
  position:absolute;
  top:50%;
  left:50%;
  border:1px solid rgba(114,166,221,.14);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.orbit-one{
  width:240px;
  height:240px;
}

.orbit-two{
  width:345px;
  height:345px;
  border-style:dashed;
}

.finar-system-item{
  position:absolute;
  z-index:6;
  min-width:145px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      rgba(17,45,72,.94),
      rgba(9,25,42,.94)
    );
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}

.finar-system-item > div{
  width:35px;
  height:35px;
  display:grid;
  flex:0 0 auto;
  place-items:center;
  border:1px solid rgba(78,221,194,.18);
  border-radius:10px;
  color:#63dfca;
  background:rgba(76,221,192,.07);
  font-size:15px;
  font-weight:900;
}

.finar-system-item small{
  display:block;
  color:#8197b0;
  font-size:9px;
}

.finar-system-item strong{
  display:block;
  margin-top:2px;
  font-size:11px;
}

.item-finance{
  top:44px;
  left:34px;
}

.item-tax{
  top:61px;
  right:28px;
}

.item-accounting{
  bottom:49px;
  left:31px;
}

.item-automation{
  right:29px;
  bottom:44px;
}

.finar-system-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:17px;
  margin-top:11px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:rgba(255,255,255,.035);
}

.finar-system-bottom small{
  display:block;
  color:#8499b1;
  font-size:9px;
}

.finar-system-bottom strong{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.finar-system-bottom a{
  flex:0 0 auto;
  color:#61e0ca;
  font-size:11px;
  font-weight:900;
}

.finar-floating-card{
  position:absolute;
  z-index:8;
  min-width:173px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  color:#fff;
  background:rgba(8,25,42,.86);
  box-shadow:0 21px 50px rgba(0,0,0,.29);
  backdrop-filter:blur(14px);
}

.finar-floating-card span{
  display:block;
  color:#8197ae;
  font-size:9px;
}

.finar-floating-card strong{
  display:block;
  margin-top:4px;
  font-size:11px;
}

.finar-floating-card-top{
  top:75px;
  right:-38px;
}

.finar-floating-card-bottom{
  left:-38px;
  bottom:74px;
}

/* Нижня смуга */

.finar-hero-v4-bottom{
  position:relative;
  z-index:3;
  border-top:1px solid rgba(255,255,255,.075);
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
}

.finar-hero-v4-bottom-inner{
  min-height:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.finar-hero-v4-bottom span{
  position:relative;
  color:#9dacc0;
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}

.finar-hero-v4-bottom span::before{
  content:"";
  width:5px;
  height:5px;
  display:inline-block;
  margin-right:9px;
  border-radius:50%;
  background:#45ddb9;
  vertical-align:middle;
}

/* Планшет */

@media(max-width:1080px){
  .finar-hero-v4{
    padding-top:137px;
  }

  .finar-hero-v4-layout{
    grid-template-columns:1fr;
    gap:50px;
  }

  .finar-hero-v4-copy{
    max-width:880px;
  }

  .finar-hero-v4-visual{
    width:min(760px,100%);
  }

  .finar-floating-card-top{
    right:-10px;
  }

  .finar-floating-card-bottom{
    left:-10px;
  }
}

/* Телефон */

@media(max-width:700px){
  .finar-hero-v4{
    min-height:auto;
    padding-top:108px;
  }

  .finar-hero-v4-layout{
    gap:36px;
    padding-bottom:61px;
  }

  .finar-hero-v4-label{
    white-space:normal;
    line-height:1.35;
  }

  .finar-hero-v4 h1{
    font-size:clamp(39px,12vw,57px);
    line-height:.97;
  }

  .finar-hero-v4-lead{
    font-size:16px;
  }

  .finar-hero-v4-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .finar-hero-v4-actions .btn{
    width:100%;
  }

  .finar-hero-v4-features{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:32px;
  }

  .finar-system-card{
    padding:14px;
    border-radius:21px;
  }

  .finar-system-head{
    align-items:stretch;
    flex-direction:column;
  }

  .finar-system-status{
    width:max-content;
  }

  .finar-system-core{
    min-height:480px;
  }

  .finar-system-center{
    width:115px;
    height:115px;
  }

  .orbit-one{
    width:205px;
    height:205px;
  }

  .orbit-two{
    width:300px;
    height:300px;
  }

  .finar-system-item{
    min-width:137px;
  }

  .item-finance{
    top:39px;
    left:15px;
  }

  .item-tax{
    top:114px;
    right:15px;
  }

  .item-accounting{
    bottom:114px;
    left:15px;
  }

  .item-automation{
    right:15px;
    bottom:38px;
  }

  .finar-system-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .finar-floating-card{
    display:none;
  }

  .finar-hero-v4-bottom-inner{
    justify-content:flex-start;
    overflow-x:auto;
    padding:0 4px;
    scrollbar-width:none;
  }

  .finar-hero-v4-bottom-inner::-webkit-scrollbar{
    display:none;
  }
}

@media(max-width:390px){
  .finar-system-item{
    min-width:125px;
    padding:10px;
  }

  .finar-system-item > div{
    width:31px;
    height:31px;
  }

  .finar-system-core{
    min-height:465px;
  }
}

/* FinAr Hero — compact title fix */

.finar-hero-v4-layout{
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
  gap:54px;
}

.finar-hero-v4 h1{
  max-width:760px;
  font-size:clamp(44px,4.8vw,68px);
  line-height:1.01;
  letter-spacing:-.055em;
}

.finar-hero-v4-lead{
  max-width:650px;
}

@media(max-width:1080px){
  .finar-hero-v4 h1{
    max-width:850px;
    font-size:clamp(44px,7vw,70px);
  }
}

@media(max-width:700px){
  .finar-hero-v4 h1{
    font-size:clamp(36px,10.5vw,49px);
    line-height:1.02;
  }
}

/* ==========================================================
   FinAr Hero v4 — MOBILE CRITICAL FIX
   ========================================================== */

@media(max-width:700px){

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .finar-hero-v4{
    width:100%;
    min-height:auto;
    padding:112px 0 48px;
    overflow:hidden;
  }

  .finar-hero-v4 .container{
    width:calc(100% - 28px);
  }

  .finar-hero-v4-layout{
    display:block;
    width:100%;
    padding-bottom:0;
  }

  .finar-hero-v4-copy{
    width:100%;
    max-width:none;
  }

  .finar-hero-v4-label{
    max-width:100%;
    margin-bottom:18px;
    padding:8px 11px;
    font-size:11px;
  }

  .finar-hero-v4 h1{
    width:100%;
    max-width:none;
    margin-bottom:20px;
    font-size:clamp(38px,11vw,48px);
    line-height:1;
    letter-spacing:-.052em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  .finar-hero-v4-lead{
    width:100%;
    max-width:none;
    margin-bottom:24px;
    font-size:16px;
    line-height:1.6;
  }

  .finar-hero-v4-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }

  .finar-hero-v4-actions .btn{
    width:100%;
    min-height:50px;
  }

  .finar-hero-v4-features{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    margin-top:27px;
  }

  .finar-hero-v4-features > div{
    padding:13px 0 0;
  }

  /* Велику desktop-схему на телефоні прибираємо */
  .finar-hero-v4-visual{
    width:100%;
    margin-top:30px;
  }

  .finar-system-card{
    width:100%;
    max-width:100%;
    padding:16px;
    border-radius:20px;
  }

  .finar-system-head{
    display:block;
    padding-bottom:14px;
  }

  .finar-system-head strong{
    font-size:15px;
    line-height:1.35;
  }

  .finar-system-status{
    margin-top:12px;
  }

  .finar-system-core{
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:14px;
    padding:0;
    overflow:visible;
    border:0;
    background:none;
  }

  .finar-system-core::before,
  .finar-system-center,
  .finar-system-orbit{
    display:none;
  }

  .finar-system-item{
    position:static;
    width:100%;
    min-width:0;
    min-height:92px;
    padding:12px;
    transform:none!important;
  }

  .finar-system-item > div{
    width:34px;
    height:34px;
  }

  .finar-system-item small{
    font-size:9px;
  }

  .finar-system-item strong{
    font-size:12px;
    line-height:1.25;
  }

  .finar-system-bottom{
    display:block;
    margin-top:12px;
  }

  .finar-system-bottom a{
    display:inline-flex;
    margin-top:10px;
  }

  .finar-floating-card{
    display:none!important;
  }

  .finar-hero-v4-bottom{
    margin-top:35px;
  }

  .finar-hero-v4-bottom-inner{
    min-height:58px;
    overflow-x:auto;
    justify-content:flex-start;
    gap:18px;
    padding:0 3px;
  }

  .finar-hero-v4-bottom span{
    flex:0 0 auto;
    font-size:11px;
  }

  /* Плаваючі кнопки */
  .floating-actions,
  .contact-float,
  .social-float{
    right:14px!important;
    bottom:96px!important;
    gap:10px!important;
  }

  .floating-actions a,
  .contact-float a,
  .social-float a{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
  }
}

@media(max-width:390px){

  .finar-hero-v4 h1{
    font-size:36px;
  }

  .finar-system-core{
    grid-template-columns:1fr;
  }

  .finar-system-item{
    min-height:76px;
  }
}