/* ==================================================
   ELARA STREAM — ARABIC BRAND UPGRADE
   ================================================== */

:root{
  --elara-gold:#ffc21c;
  --elara-bg:#050505;
  --elara-card:#101010;
  --elara-muted:#aaa;
  --elara-border:rgba(255,255,255,.09);
}


/* HEADER */

header{
  height:108px !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  background:#080808 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

header .container{
  width:min(1540px,calc(100% - 88px)) !important;
  max-width:none !important;
}

.nav{
  width:100%;
  display:flex;
  align-items:center;
  gap:34px !important;
  flex-direction:row !important;
}

.logo{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:0 !important;

  color:#fff !important;
  font-size:26px;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  direction:ltr;
}

/* прибираємо старий квадрат E */
.logo-mark{
  display:none !important;
}

.logo span:last-child{
  color:#fff;
}

.logo span:last-child::first-line{
  color:#fff;
}


/* NAV */

.nav-links{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:30px !important;

  color:#aaa !important;
  font-size:16px !important;
  font-weight:800;
}

.nav-links a{
  color:#aaa !important;
  transition:.18s ease;
  white-space:nowrap;
}

.nav-links a:hover{
  color:#fff !important;
}


/* HERO */

.hero{
  padding:68px 0 66px !important;

  background:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px),
    radial-gradient(circle at 75% 25%,rgba(255,193,7,.13),transparent 34%),
    radial-gradient(circle at 20% 65%,rgba(255,193,7,.055),transparent 28%),
    #050505 !important;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;
}

.hero-grid{
  width:min(1320px,100%);
  margin:0 auto;

  grid-template-columns:1.12fr .88fr !important;
  gap:54px !important;
  align-items:center !important;
}


/* BADGE */

.badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  min-height:44px;
  padding:0 20px !important;
  margin-bottom:30px !important;

  border-radius:999px !important;

  background:rgba(255,193,7,.09) !important;
  border:1px solid rgba(255,193,7,.35) !important;

  color:#ffd34e !important;

  font-size:15px !important;
  font-weight:850;
}


/* TITLE */

.hero h1{
  max-width:800px;

  margin:0 0 28px !important;

  color:#fff;

  font-size:clamp(46px,4.6vw,76px) !important;
  line-height:1.10 !important;

  letter-spacing:-.035em !important;
  font-weight:950;
}

.hero-highlight{
  color:var(--elara-gold) !important;
  white-space:nowrap;
}


/* DESCRIPTION */

.hero p{
  max-width:790px !important;

  margin:0 0 28px !important;

  color:#aaa !important;

  font-size:19px !important;
  line-height:1.85 !important;
  font-weight:500;
}


/* BUTTONS */

.hero-actions-primary,
.hero-actions-secondary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}

.hero-actions-primary{
  margin-top:31px;
}

.hero-actions-secondary{
  margin-top:15px;
}

.hero .btn{
  min-height:60px;
  padding:0 25px !important;

  border-radius:15px !important;

  font-size:17px;
  font-weight:900 !important;

  transition:.2s ease;
}

.hero .btn-primary{
  background:linear-gradient(135deg,#ffd44c,#ffbd00) !important;
  color:#111 !important;

  border:none !important;

  box-shadow:0 14px 38px rgba(255,190,0,.16) !important;
}

.hero .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 19px 48px rgba(255,190,0,.23) !important;
}

.hero .btn-whatsapp{
  background:#25d366 !important;
  color:#07140b !important;

  box-shadow:0 14px 38px rgba(37,211,102,.12) !important;
}

.hero .btn-secondary{
  background:rgba(255,255,255,.035) !important;

  border:1px solid rgba(255,255,255,.19) !important;

  color:#eee !important;
}

.hero .btn-secondary:hover{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,193,7,.35) !important;

  color:#fff !important;
}


/* PHONE */

.phone-note{
  margin-top:18px !important;

  color:#777 !important;

  font-size:14px !important;
}


/* HERO CARD */

.hero-card{
  padding:34px !important;

  border-radius:24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.022)
    ) !important;

  border:1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 30px 80px rgba(0,0,0,.32) !important;

  transition:.22s ease;
}

.hero-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,193,7,.27) !important;
}

.hero-card h3{
  margin-top:0;

  color:#fff;

  font-size:25px;
  font-weight:900;
}

.hero-card .step{
  margin-top:13px;
  padding:15px 17px;

  border-radius:13px;

  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);

  color:#bbb;
}


/* SECTIONS */

.section{
  padding:72px 0 !important;
}

.section-title{
  margin-bottom:40px !important;
}

.section-title h2{
  color:#fff;

  font-size:clamp(30px,3.2vw,46px) !important;

  font-weight:900;
  letter-spacing:-.025em;
}

.section-title p{
  color:#999 !important;
}


/* GENERAL CARDS */

.box{
  border-radius:20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.018)
    ) !important;

  border:1px solid rgba(255,255,255,.08) !important;

  box-shadow:0 20px 55px rgba(0,0,0,.20);
}


/* PANEL SCREENSHOTS */

.panel-shot{
  overflow:hidden;

  border-radius:20px !important;

  border:1px solid rgba(255,255,255,.09) !important;

  background:#0b0b0b;

  box-shadow:0 20px 60px rgba(0,0,0,.27);
}


/* PRICING */

#pricing{
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255,193,7,.07),
      transparent 35%
    ),
    #070707 !important;
}


/* CONTACT */

.contact{
  padding:78px 0 !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,193,7,.12),
      transparent 42%
    ),
    #080808 !important;
}

.contact h2{
  font-weight:900;
}


/* MOBILE */

@media(max-width:900px){

  header{
    height:auto !important;
    padding:20px 0 !important;
  }

  header .container{
    width:calc(100% - 30px) !important;
  }

  .nav{
    align-items:flex-start !important;
  }

  .nav-links{
    margin-right:0;
    gap:18px !important;
  }

  .hero{
    padding:54px 0 52px !important;
  }

  .hero-grid{
    grid-template-columns:1fr !important;
    gap:35px !important;
  }

  .hero h1{
    font-size:clamp(39px,11vw,58px) !important;
  }

  .hero p{
    font-size:18px !important;
  }

  .hero-card{
    padding:25px !important;
  }

  .hero-actions-primary .btn,
  .hero-actions-secondary .btn{
    width:100%;
  }

}



/* ==================================================
   ELARA AR — PREMIUM POLISH
   ================================================== */


/* HEADER — cleaner, balanced RTL */

header{
  height:104px !important;
}

header .container{
  width:min(1540px,calc(100% - 80px)) !important;
}

.nav{
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:34px !important;
}

.logo{
  order:1;
  direction:ltr;
  font-size:25px !important;
  font-weight:950 !important;
  color:#fff !important;
}

.logo span:last-child{
  color:#fff !important;
}

.nav-links{
  order:2;
  margin:0 auto !important;
  gap:34px !important;
  font-size:15px !important;
  font-weight:800 !important;
}

.nav-links a{
  color:#9e9e9e !important;
}

.nav-links a:hover{
  color:#ffc21c !important;
}


/* HERO — no more cut-off text */

.hero{
  padding:72px 0 68px !important;
}

.hero-grid{
  display:block !important;
  width:min(1220px,100%) !important;
  margin:0 auto !important;
}

.hero-grid > div:first-child{
  text-align:center !important;
  max-width:1120px;
  margin:0 auto !important;
}


/* BADGE */

.hero .badge{
  margin:0 auto 30px !important;

  min-height:44px;
  padding:0 21px !important;

  font-size:15px !important;
  font-weight:850 !important;
}


/* HERO TITLE */

.hero h1{
  max-width:1120px !important;

  margin:
    0 auto 28px !important;

  font-size:
    clamp(48px,4.45vw,76px) !important;

  line-height:1.18 !important;

  letter-spacing:-.025em !important;

  text-align:center !important;

  overflow:visible !important;
}

.hero-highlight{
  display:inline-block;
  color:#ffc107 !important;
}


/* HERO DESCRIPTION */

.hero p{
  max-width:970px !important;

  margin:
    0 auto 30px !important;

  color:#a8a8a8 !important;

  font-size:
    clamp(18px,1.35vw,22px) !important;

  line-height:1.9 !important;

  text-align:center !important;
}


/* BUTTONS */

.hero-actions-primary,
.hero-actions-secondary{
  justify-content:center !important;
  align-items:center !important;
}

.hero-actions-primary{
  margin-top:34px !important;
}

.hero-actions-secondary{
  margin-top:14px !important;
}

.hero .btn{
  min-height:60px !important;

  padding:
    0 30px !important;

  border-radius:16px !important;

  font-size:16px !important;

  font-weight:900 !important;
}

.hero .btn-primary{
  min-width:235px;

  background:
    linear-gradient(
      135deg,
      #ffd54f,
      #ffbd00
    ) !important;
}

.hero .btn-whatsapp{
  min-width:225px;

  background:#25d366 !important;
}

.hero .btn-secondary{
  min-width:205px;
}


/* PHONE NOTE */

.hero .phone-note{
  text-align:center !important;
  margin-top:16px !important;
}


/* HOW CARD — move it below hero text */

.hero-card{
  max-width:940px !important;

  margin:
    50px auto 0 !important;

  padding:
    31px 34px !important;

  text-align:right !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.018)
    ) !important;

  border:
    1px solid rgba(255,255,255,.095) !important;

  border-radius:
    24px !important;

  box-shadow:
    0 24px 75px rgba(0,0,0,.30) !important;
}

.hero-card h3{
  text-align:center !important;

  margin-bottom:
    26px !important;

  font-size:
    25px !important;

  color:#fff !important;
}


/* STEPS — desktop: 2 x 2 */

.hero-card .steps{
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:13px !important;
}

.hero-card .step{
  margin:0 !important;

  padding:
    17px 18px !important;

  min-height:72px;

  display:flex;
  align-items:center;

  border-radius:
    14px !important;

  background:
    rgba(255,255,255,.035) !important;

  border:
    1px solid rgba(255,255,255,.065) !important;

  color:#b7b7b7 !important;

  font-size:
    15px !important;

  line-height:
    1.75 !important;
}


/* REMOVE BLUE FEEL — keep ELARA black/gold */

.hero{
  background:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 24%,
      rgba(255,193,7,.13),
      transparent 34%
    ),
    #050505 !important;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;
}


/* CARDS BELOW HERO */

.box{
  transition:
    transform .2s ease,
    border-color .2s ease !important;
}

.box:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(255,193,7,.25) !important;
}


/* MOBILE */

@media(max-width:900px){

  header{
    height:auto !important;
  }

  .nav{
    flex-direction:column !important;
    align-items:center !important;
  }

  .logo{
    order:1;
  }

  .nav-links{
    order:2;
    justify-content:center;
    flex-wrap:wrap;
    gap:17px !important;
  }

  .hero{
    padding:
      54px 0 52px !important;
  }

  .hero h1{
    font-size:
      clamp(38px,10.8vw,56px) !important;

    line-height:
      1.22 !important;
  }

  .hero p{
    font-size:
      17px !important;
  }

  .hero-card{
    margin-top:
      36px !important;

    padding:
      23px !important;
  }

  .hero-card .steps{
    grid-template-columns:
      1fr !important;
  }

  .hero-actions-primary,
  .hero-actions-secondary{
    flex-direction:
      column !important;
  }

}



/* ==================================================
   ELARA AR — PREMIUM POLISH
   ================================================== */


/* HEADER — cleaner, balanced RTL */

header{
  height:104px !important;
}

header .container{
  width:min(1540px,calc(100% - 80px)) !important;
}

.nav{
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:34px !important;
}

.logo{
  order:1;
  direction:ltr;
  font-size:25px !important;
  font-weight:950 !important;
  color:#fff !important;
}

.logo span:last-child{
  color:#fff !important;
}

.nav-links{
  order:2;
  margin:0 auto !important;
  gap:34px !important;
  font-size:15px !important;
  font-weight:800 !important;
}

.nav-links a{
  color:#9e9e9e !important;
}

.nav-links a:hover{
  color:#ffc21c !important;
}


/* HERO — no more cut-off text */

.hero{
  padding:72px 0 68px !important;
}

.hero-grid{
  display:block !important;
  width:min(1220px,100%) !important;
  margin:0 auto !important;
}

.hero-grid > div:first-child{
  text-align:center !important;
  max-width:1120px;
  margin:0 auto !important;
}


/* BADGE */

.hero .badge{
  margin:0 auto 30px !important;

  min-height:44px;
  padding:0 21px !important;

  font-size:15px !important;
  font-weight:850 !important;
}


/* HERO TITLE */

.hero h1{
  max-width:1120px !important;

  margin:
    0 auto 28px !important;

  font-size:
    clamp(48px,4.45vw,76px) !important;

  line-height:1.18 !important;

  letter-spacing:-.025em !important;

  text-align:center !important;

  overflow:visible !important;
}

.hero-highlight{
  display:inline-block;
  color:#ffc107 !important;
}


/* HERO DESCRIPTION */

.hero p{
  max-width:970px !important;

  margin:
    0 auto 30px !important;

  color:#a8a8a8 !important;

  font-size:
    clamp(18px,1.35vw,22px) !important;

  line-height:1.9 !important;

  text-align:center !important;
}


/* BUTTONS */

.hero-actions-primary,
.hero-actions-secondary{
  justify-content:center !important;
  align-items:center !important;
}

.hero-actions-primary{
  margin-top:34px !important;
}

.hero-actions-secondary{
  margin-top:14px !important;
}

.hero .btn{
  min-height:60px !important;

  padding:
    0 30px !important;

  border-radius:16px !important;

  font-size:16px !important;

  font-weight:900 !important;
}

.hero .btn-primary{
  min-width:235px;

  background:
    linear-gradient(
      135deg,
      #ffd54f,
      #ffbd00
    ) !important;
}

.hero .btn-whatsapp{
  min-width:225px;

  background:#25d366 !important;
}

.hero .btn-secondary{
  min-width:205px;
}


/* PHONE NOTE */

.hero .phone-note{
  text-align:center !important;
  margin-top:16px !important;
}


/* HOW CARD — move it below hero text */

.hero-card{
  max-width:940px !important;

  margin:
    50px auto 0 !important;

  padding:
    31px 34px !important;

  text-align:right !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.018)
    ) !important;

  border:
    1px solid rgba(255,255,255,.095) !important;

  border-radius:
    24px !important;

  box-shadow:
    0 24px 75px rgba(0,0,0,.30) !important;
}

.hero-card h3{
  text-align:center !important;

  margin-bottom:
    26px !important;

  font-size:
    25px !important;

  color:#fff !important;
}


/* STEPS — desktop: 2 x 2 */

.hero-card .steps{
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:13px !important;
}

.hero-card .step{
  margin:0 !important;

  padding:
    17px 18px !important;

  min-height:72px;

  display:flex;
  align-items:center;

  border-radius:
    14px !important;

  background:
    rgba(255,255,255,.035) !important;

  border:
    1px solid rgba(255,255,255,.065) !important;

  color:#b7b7b7 !important;

  font-size:
    15px !important;

  line-height:
    1.75 !important;
}


/* REMOVE BLUE FEEL — keep ELARA black/gold */

.hero{
  background:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 24%,
      rgba(255,193,7,.13),
      transparent 34%
    ),
    #050505 !important;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;
}


/* CARDS BELOW HERO */

.box{
  transition:
    transform .2s ease,
    border-color .2s ease !important;
}

.box:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(255,193,7,.25) !important;
}


/* MOBILE */

@media(max-width:900px){

  header{
    height:auto !important;
  }

  .nav{
    flex-direction:column !important;
    align-items:center !important;
  }

  .logo{
    order:1;
  }

  .nav-links{
    order:2;
    justify-content:center;
    flex-wrap:wrap;
    gap:17px !important;
  }

  .hero{
    padding:
      54px 0 52px !important;
  }

  .hero h1{
    font-size:
      clamp(38px,10.8vw,56px) !important;

    line-height:
      1.22 !important;
  }

  .hero p{
    font-size:
      17px !important;
  }

  .hero-card{
    margin-top:
      36px !important;

    padding:
      23px !important;
  }

  .hero-card .steps{
    grid-template-columns:
      1fr !important;
  }

  .hero-actions-primary,
  .hero-actions-secondary{
    flex-direction:
      column !important;
  }

}



/* ======================================================
   AR — SAME BRAND FAMILY AS UA / EN / TR
   ====================================================== */


/* HEADER */

.ar-brand-header{
  height:108px !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  background:#080808 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  position:relative !important;
}

.ar-brand-nav{
  width:min(1540px,calc(100% - 88px));
  margin:0 auto;

  display:flex;
  align-items:center;
  gap:38px;

  /* layout like UA */
  direction:ltr;
}

.ar-brand-logo{
  flex-shrink:0;

  display:flex;
  align-items:center;

  text-decoration:none !important;

  color:#fff !important;

  font-size:26px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.025em;
}

.ar-brand-logo strong{
  margin-left:7px;

  color:#ffc21c;

  font-weight:950;
}

.ar-brand-menu{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:34px;

  direction:rtl;
}

.ar-brand-menu a{
  color:#9d9d9d !important;

  text-decoration:none !important;

  font-size:16px;
  font-weight:800;

  white-space:nowrap;

  transition:.18s ease;
}

.ar-brand-menu a:hover{
  color:#fff !important;
}

.ar-brand-actions{
  display:flex;
  align-items:center;
  gap:24px;

  direction:ltr;
}

.ar-brand-lang{
  color:#a7a7a7 !important;

  text-decoration:none !important;

  font-size:16px;
  font-weight:850;
}

.ar-brand-login{
  min-width:112px;
  height:54px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:2px solid #b98d00;
  border-radius:16px;

  color:#ffc21c !important;

  text-decoration:none !important;

  font-size:17px;
  font-weight:900;
}

.ar-brand-login:hover{
  background:#ffc21c;
  color:#111 !important;
}


/* HERO */

.ar-premium-hero{
  min-height:650px;

  padding:68px 24px 62px;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  text-align:center;

  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    radial-gradient(
      circle at 50% 31%,
      rgba(255,193,7,.13),
      transparent 36%
    ),
    #050505;

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto;
}

.ar-hero-inner{
  width:min(1280px,100%);
  margin:0 auto;
}

.ar-hero-badge{
  min-height:44px;

  padding:0 21px;
  margin-bottom:34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  direction:ltr;

  border:1px solid rgba(255,193,7,.36);
  border-radius:999px;

  background:rgba(255,193,7,.09);

  color:#ffd34e;

  font-size:16px;
  font-weight:850;
}

.ar-hero-badge span{
  width:10px;
  height:10px;

  border-radius:50%;

  background:#ffc107;

  box-shadow:
    0 0 18px rgba(255,193,7,.75);
}


.ar-premium-hero h1{
  max-width:1180px;

  margin:0 auto;

  color:#fff;

  font-size:
    clamp(52px,4.7vw,82px);

  line-height:1.18;

  letter-spacing:-.025em;

  font-weight:950;
}

.ar-premium-hero h1 strong{
  display:inline-block;

  direction:ltr;

  color:#ffc107;

  font-size:1.08em;

  white-space:nowrap;
}


.ar-hero-lead{
  max-width:970px;

  margin:34px auto 0 !important;

  color:#a5a5a5 !important;

  font-size:
    clamp(19px,1.4vw,24px) !important;

  line-height:1.85 !important;

  font-weight:500;

  text-align:center;
}


.ar-hero-actions{
  margin-top:34px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  direction:rtl;
}

.ar-hero-primary,
.ar-hero-secondary{
  height:70px;

  padding:0 31px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  border-radius:16px;

  text-decoration:none !important;

  font-size:18px;
  font-weight:900;

  transition:.2s ease;
}

.ar-hero-primary{
  min-width:320px;

  color:#111 !important;

  background:
    linear-gradient(
      135deg,
      #ffd44c,
      #ffbd00
    );

  box-shadow:
    0 15px 45px rgba(255,190,0,.14);
}

.ar-hero-primary:hover{
  transform:translateY(-2px);

  box-shadow:
    0 20px 55px rgba(255,190,0,.20);
}

.ar-hero-primary span{
  font-size:26px;
}

.ar-hero-secondary{
  min-width:240px;

  color:#f1f1f1 !important;

  background:rgba(255,255,255,.035);

  border:1px solid rgba(255,255,255,.21);
}

.ar-hero-secondary:hover{
  background:rgba(255,255,255,.075);
}


/* BENEFITS LIKE UA */

.ar-hero-benefits{
  margin-top:32px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:34px;

  color:#8f8f8f;

  font-size:16px;
  font-weight:800;
}

.ar-hero-benefits div{
  display:flex;
  align-items:center;
  gap:10px;
}

.ar-hero-benefits span{
  width:24px;
  height:24px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#ffc107;

  background:
    rgba(255,193,7,.08);

  border:
    1px solid rgba(255,193,7,.30);

  font-size:13px;
}


/* HOW BLOCK */

.ar-how-compact{
  padding:72px 24px;

  background:#090909;

  border-top:
    1px solid rgba(255,255,255,.055);
}

.ar-how-inner{
  width:min(1120px,100%);
  margin:0 auto;
}

.ar-how-title{
  text-align:center;
  margin-bottom:34px;
}

.ar-how-title span{
  color:#ffc21c;

  font-size:13px;
  font-weight:900;

  letter-spacing:.08em;
}

.ar-how-title h2{
  margin:8px 0 0;

  color:#fff;

  font-size:
    clamp(30px,3vw,43px);

  font-weight:950;
}

.ar-how-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}

.ar-how-step{
  min-height:150px;

  padding:23px 20px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:17px;

  text-align:right;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:19px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.018)
    );

  color:#aaa;

  font-size:15px;
  line-height:1.8;
}

.ar-how-step b{
  width:34px;
  height:34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:#111;

  background:#ffc21c;

  font-size:15px;
}


/* MOBILE */

@media(max-width:900px){

  .ar-brand-header{
    height:auto !important;
    padding:20px 0 !important;
  }

  .ar-brand-nav{
    width:calc(100% - 30px);

    flex-wrap:wrap;
  }

  .ar-brand-logo{
    font-size:23px;
  }

  .ar-brand-menu{
    order:3;

    width:100%;

    overflow-x:auto;

    justify-content:flex-start;

    gap:20px;
  }

  .ar-brand-actions{
    margin-left:auto;
  }

  .ar-brand-login{
    min-width:88px;
    height:48px;

    font-size:15px;
  }

  .ar-premium-hero{
    min-height:auto;

    padding:55px 18px 52px;
  }

  .ar-premium-hero h1{
    font-size:
      clamp(39px,11vw,57px);

    line-height:1.22;
  }

  .ar-hero-lead{
    font-size:17px !important;
  }

  .ar-hero-actions{
    flex-direction:column;

    width:100%;
  }

  .ar-hero-primary,
  .ar-hero-secondary{
    width:100%;

    min-width:0;
  }

  .ar-hero-benefits{
    justify-content:flex-start;

    gap:18px 27px;
  }

  .ar-how-grid{
    grid-template-columns:1fr;
  }

}


/* ===== AR HERO — SLIGHTLY MORE COMPACT ===== */

.ar-brand-header{
  height:100px !important;
}

.ar-brand-logo{
  font-size:24px !important;
}

.ar-brand-menu a,
.ar-brand-lang{
  font-size:15px !important;
}

.ar-brand-login{
  min-width:104px;
  height:50px;
  font-size:16px;
}

.ar-premium-hero{
  min-height:575px !important;
  padding:54px 24px 50px !important;
}

.ar-hero-badge{
  min-height:40px;
  padding:0 19px;
  margin-bottom:27px;
  font-size:15px;
}

.ar-premium-hero h1{
  max-width:1080px;
  font-size:clamp(46px,4.15vw,70px) !important;
  line-height:1.17;
}

.ar-hero-lead{
  max-width:900px;
  margin-top:27px !important;
  font-size:clamp(17px,1.22vw,21px) !important;
  line-height:1.8 !important;
}

.ar-hero-actions{
  margin-top:28px;
}

.ar-hero-primary,
.ar-hero-secondary{
  height:62px;
  padding:0 27px;
  font-size:16px;
  border-radius:15px;
}

.ar-hero-primary{
  min-width:285px;
}

.ar-hero-secondary{
  min-width:215px;
}

.ar-hero-benefits{
  margin-top:26px;
  gap:28px;
  font-size:14px;
}

.ar-hero-benefits span{
  width:22px;
  height:22px;
  font-size:12px;
}

@media(max-width:900px){

  .ar-brand-header{
    height:auto !important;
  }

  .ar-premium-hero{
    min-height:auto !important;
    padding:48px 18px 46px !important;
  }

  .ar-premium-hero h1{
    font-size:clamp(36px,10vw,52px) !important;
  }

  .ar-hero-lead{
    font-size:16px !important;
  }

}