/* ============================================================
   ARA SMART - Impact login / product gateway
   Scope: login.html only.
   ============================================================ */

body.ara-login-premium:has(#formLogin){
  --login-bg:#03060a;
  --login-panel:rgba(8,12,18,.88);
  --login-panel-strong:rgba(13,18,27,.96);
  --login-text:#f8fafc;
  --login-muted:#aeb9c9;
  --login-soft:#d9e1ec;
  --login-line:rgba(255,255,255,.13);
  --login-gold:#f2b705;
  --login-gold-2:#ffd34a;
  --login-blue:#57a6ff;
  --login-green:#2fe6a6;
  --login-red:#ff716b;
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  background:
    radial-gradient(900px 640px at 15% 4%, rgba(242,183,5,.17), transparent 62%),
    radial-gradient(900px 680px at 95% 18%, rgba(87,166,255,.16), transparent 58%),
    linear-gradient(135deg,#03060a 0%,#08111e 46%,#05070b 100%)!important;
  color:var(--login-text);
  color-scheme:dark;
  -webkit-tap-highlight-color:rgba(242,183,5,.18);
}

body.ara-login-impact:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 88px);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  opacity:.42;
}

.ara-skip-link{
  position:fixed;
  left:16px;
  top:12px;
  z-index:9999;
  transform:translateY(-180%);
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color:#111827;
  font-weight:900;
}

.ara-skip-link:focus-visible{
  transform:translateY(0);
  outline:3px solid var(--login-gold);
  outline-offset:3px;
}

.ara-login-shell{
  position:relative;
  z-index:1;
  width:min(1680px,100%);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,470px);
  grid-template-areas:
    "hero access"
    "showcase access";
  gap:22px;
  align-items:stretch;
  padding:22px;
  padding-top:max(22px,env(safe-area-inset-top));
  padding-right:max(22px,env(safe-area-inset-right));
  padding-left:max(22px,env(safe-area-inset-left));
}

.ara-login-hero{
  grid-area:hero;
  position:relative;
  min-height:670px;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(110deg,rgba(4,8,13,.96),rgba(5,10,18,.74) 46%,rgba(6,13,24,.42)),
    radial-gradient(760px 420px at 82% 36%, rgba(242,183,5,.21), transparent 64%),
    linear-gradient(135deg,#08111f,#0a1829);
  box-shadow:0 36px 100px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10);
  perspective:1200px;
}

.ara-login-hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.07) 58% 59%, transparent 59%);
  opacity:.75;
}

.ara-hero-3d{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.92;
}

.ara-hero-topline,
.ara-hero-copy,
.ara-hero-metrics,
.ara-product-stage{
  position:relative;
  z-index:1;
}

.ara-hero-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px 28px 0;
}

.ara-hero-topline img{
  width:248px;
  height:auto;
  max-width:54vw;
  object-fit:contain;
}

.ara-wordmark,
.ara-login-wordmark{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  color:#fff;
  font-size:22px;
  font-weight:1000;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
}

.ara-wordmark:before,
.ara-login-wordmark:before{
  content:"";
  width:18px;
  height:18px;
  margin-right:10px;
  background:linear-gradient(135deg,#ffe177,#f2b705);
  clip-path:polygon(50% 0,100% 100%,70% 100%,50% 48%,30% 100%,0 100%);
}

.ara-hero-topline span{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(0,0,0,.24);
  color:#d6deeb;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}

.ara-hero-copy{
  display:flex;
  gap:22px;
  align-items:center;
  max-width:820px;
  padding:72px 34px 0;
}

.ara-hero-line{
  width:5px;
  height:172px;
  flex:0 0 5px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffe072,#f2b705);
  box-shadow:0 0 34px rgba(242,183,5,.48);
}

.ara-kicker{
  margin:0 0 12px;
  color:var(--login-gold)!important;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.ara-hero-copy h1{
  margin:0;
  color:#fff!important;
  font-size:clamp(58px,7vw,110px);
  line-height:.88;
  letter-spacing:0;
  font-weight:1000;
  text-wrap:balance;
  text-shadow:0 18px 46px rgba(0,0,0,.42);
}

.ara-hero-copy p:not(.ara-kicker){
  margin:22px 0 0;
  max-width:680px;
  color:#dde6f2!important;
  font-size:clamp(17px,1.5vw,23px);
  line-height:1.35;
  text-wrap:pretty;
}

.ara-hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:720px;
  margin:34px 34px 0;
}

.ara-hero-metrics div{
  min-width:0;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
}

.ara-hero-metrics b{
  display:block;
  color:#fff;
  font-size:24px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.ara-hero-metrics span{
  display:block;
  margin-top:6px;
  color:#c1ccdb;
  font-size:12px;
  font-weight:800;
}

.ara-product-stage{
  height:270px;
  margin:38px 0 0;
  transform-style:preserve-3d;
}

.ara-device{
  position:absolute;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:#050a12;
  box-shadow:0 26px 70px rgba(0,0,0,.50);
  transform-style:preserve-3d;
}

.ara-device img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
}

.ara-device-main{
  right:6%;
  bottom:-26px;
  width:min(720px,58vw);
  height:300px;
  transform:rotateX(58deg) rotateZ(-6deg) translateZ(40px);
  transform-origin:center bottom;
}

.ara-device-left{
  left:5%;
  bottom:16px;
  width:min(430px,34vw);
  height:190px;
  opacity:.78;
  transform:rotateX(62deg) rotateZ(9deg) translateZ(6px);
}

.ara-device-right{
  right:3%;
  top:40px;
  width:min(390px,30vw);
  height:180px;
  opacity:.62;
  transform:rotateY(-26deg) rotateZ(5deg) translateZ(-20px);
}

.ara-performance-stage{
  position:relative;
  z-index:1;
  height:330px;
  margin:30px 34px 0;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:#05070b;
  box-shadow:0 30px 80px rgba(0,0,0,.42);
}

.ara-performance-stage:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,6,10,.18), transparent 48%, rgba(3,6,10,.46)),
    linear-gradient(180deg, transparent, rgba(3,6,10,.72));
}

.ara-performance-stage img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
}

.ara-data-card{
  position:absolute;
  z-index:2;
  min-width:116px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(3,6,10,.58);
  box-shadow:0 18px 42px rgba(0,0,0,.36);
  backdrop-filter:blur(14px);
}

.ara-data-card b{
  display:block;
  color:#dbe7f8;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ara-data-card span{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:1000;
}

.ara-data-card-load{
  left:22px;
  bottom:20px;
}

.ara-data-card-load span{color:#f2b705;}

.ara-data-card-ready{
  right:22px;
  top:20px;
}

.ara-data-card-ready span{color:#57a6ff;}

.ara-device-bar{
  position:absolute;
  top:10px;
  left:12px;
  z-index:1;
  display:flex;
  gap:6px;
}

.ara-device-bar span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
}

.ara-login-card{
  grid-area:access;
  position:sticky;
  top:22px;
  overflow:hidden;
  align-self:start;
  padding:26px;
  border-radius:28px;
  border:1px solid var(--login-line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
    var(--login-panel);
  box-shadow:0 30px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(18px);
}

.ara-login-card:before{
  content:"";
  position:absolute;
  inset:-120px -140px auto auto;
  width:300px;
  height:300px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(242,183,5,.20), transparent 66%);
  pointer-events:none;
}

.ara-login-card:after{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-120px;
  width:260px;
  height:260px;
  border:1px solid rgba(87,166,255,.22);
  border-radius:999px;
  pointer-events:none;
}

.ara-login-brand,
.ara-login-title-row,
.ara-login-form,
.ara-use-cases{position:relative;z-index:1;}

.ara-login-brand{
  display:flex;
  justify-content:center;
  margin:2px 0 20px;
}

.ara-login-logo{
  width:220px;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

.ara-login-wordmark{
  min-height:48px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  font-size:20px;
}

.ara-login-title-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:22px;
}

.ara-login-user-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  margin-top:36px;
  border-radius:15px;
  border:1px solid rgba(242,183,5,.38);
  background:rgba(242,183,5,.12);
  color:var(--login-gold);
  font-size:22px;
  font-weight:1000;
}

.ara-secure-pill{
  width:max-content;
  max-width:100%;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 10px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(242,183,5,.44);
  background:rgba(242,183,5,.09);
  color:#ffe8a5!important;
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body.ara-login-premium:has(#formLogin) .h1{
  margin:0!important;
  color:var(--login-text)!important;
  font-size:clamp(34px,3vw,45px)!important;
  line-height:.98;
  font-weight:1000!important;
  letter-spacing:0;
  text-shadow:none!important;
  text-wrap:balance;
}

body.ara-login-premium:has(#formLogin) .h1:before{content:""!important;}

body.ara-login-premium:has(#formLogin) .p{
  margin:10px 0 0;
  color:var(--login-muted)!important;
  font-size:14px;
  line-height:1.5;
}

.ara-login-form{
  display:grid!important;
  gap:14px!important;
}

body.ara-login-premium:has(#formLogin) .field.ara-input-field{
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

body.ara-login-premium:has(#formLogin) label{
  display:block;
  margin-bottom:8px;
  color:var(--login-soft)!important;
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ara-input-shell{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  min-height:56px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--login-line);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

.ara-input-shell:focus-within{
  border-color:rgba(242,183,5,.72);
  box-shadow:0 0 0 4px rgba(242,183,5,.14)!important;
}

.ara-input-icon{
  color:var(--login-gold);
  font-size:18px;
  line-height:1;
  font-weight:1000;
}

.ara-password-toggle{
  justify-self:end;
  min-width:44px;
  min-height:34px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--login-gold);
  font-size:12px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
}

.ara-password-toggle:hover,
.ara-password-toggle:focus-visible{
  border-color:rgba(242,183,5,.45);
  background:rgba(242,183,5,.12);
  outline:none;
}

body.ara-login-premium:has(#formLogin) .ara-input-shell input{
  width:100%;
  min-width:0;
  min-height:54px;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--login-text)!important;
  font-size:16px;
}

body.ara-login-premium:has(#formLogin) .ara-input-shell input::placeholder{color:#7f8b9c!important;}

.ara-login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:1px 0 4px;
  color:var(--login-muted);
  font-size:13px;
}

.ara-remember{
  display:flex!important;
  align-items:center;
  gap:9px;
  min-height:44px;
  margin:0!important;
  color:var(--login-muted)!important;
  font-size:13px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  font-weight:850!important;
}

.ara-remember input{
  appearance:none;
  width:22px!important;
  min-height:22px!important;
  height:22px;
  border:1px solid var(--login-line)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.06)!important;
}

.ara-remember input:checked{
  background:linear-gradient(135deg,#ffe077,#f2b705)!important;
  border-color:#f2b705!important;
}

.ara-forgot,
.ara-invite-link{
  color:var(--login-gold)!important;
  text-decoration:none;
  font-weight:900;
}

.ara-forgot:hover,
.ara-invite-link:hover{text-decoration:underline;}

.ara-login-submit{
  position:relative;
  min-height:58px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#111827!important;
  background:linear-gradient(180deg,#ffd84d,#f2b705)!important;
  border:1px solid rgba(255,216,77,.78)!important;
  box-shadow:0 18px 34px rgba(242,183,5,.24)!important;
  font-size:18px;
  font-weight:1000!important;
  touch-action:manipulation;
}

.ara-login-submit:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

.ara-login-submit:focus-visible,
.ara-register-btn:focus-visible,
.ara-invite-link:focus-visible,
.ara-forgot:focus-visible{
  outline:3px solid rgba(242,183,5,.72);
  outline-offset:3px;
}

.ara-login-submit span:last-child{
  position:absolute;
  right:22px;
  font-size:26px;
  font-weight:600;
}

.ara-google-native{min-height:42px;}

.ara-register-btn{
  min-height:54px!important;
  border-radius:14px!important;
  display:flex!important;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:var(--login-text)!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid var(--login-line)!important;
  font-size:15px;
  font-weight:950!important;
  text-decoration:none;
  touch-action:manipulation;
}

.ara-register-btn:hover{border-color:rgba(242,183,5,.55)!important;}
.ara-register-btn span,.ara-invite-link span{color:var(--login-gold);}

.ara-login-separator{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  color:#8e99aa;
  font-size:14px;
  font-weight:900;
}

.ara-login-separator span{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--login-line),transparent);
}

.ara-invite-link{
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:15px;
  font-weight:950;
}

.ara-use-cases{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.ara-use-cases article{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
}

.ara-use-cases b{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-size:13px;
}

.ara-use-cases span{
  display:block;
  color:#aeb9c9;
  font-size:12px;
  line-height:1.4;
}

.ara-showcase{
  grid-area:showcase;
  display:grid;
  grid-template-columns:minmax(250px,360px) minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.ara-showcase h2{
  margin:0;
  color:#fff;
  font-size:clamp(24px,2.4vw,38px);
  line-height:1.02;
  letter-spacing:0;
  text-wrap:balance;
}

.ara-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  min-width:0;
}

.ara-showcase figure{
  min-width:0;
  margin:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:#08111d;
}

.ara-showcase img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  height:auto;
  object-fit:cover;
  object-position:left top;
}

.ara-showcase figcaption{
  padding:10px 12px;
  color:#dfe7f2;
  font-size:12px;
  font-weight:950;
}

body[data-theme="light"].ara-login-premium:has(#formLogin){
  --login-panel:rgba(255,255,255,.92);
  --login-panel-strong:#fff;
  --login-text:#111827;
  --login-muted:#4b5563;
  --login-soft:#334155;
  --login-line:rgba(17,24,39,.14);
  background:
    radial-gradient(900px 560px at 82% 8%, rgba(242,183,5,.14), transparent 60%),
    radial-gradient(720px 520px at 12% 18%, rgba(58,125,205,.12), transparent 62%),
    linear-gradient(135deg,#f7f9fc 0%,#eef3f8 52%,#e9eef5 100%)!important;
  color-scheme:light;
}

body[data-theme="light"] .ara-login-card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.90))!important;
  box-shadow:0 28px 72px rgba(30,41,59,.16), inset 0 1px 0 rgba(255,255,255,.9)!important;
}

body[data-theme="light"] .ara-login-logo{
  content:url("/assets/img/brand/ara-logo-horizontal-color-transparent.png");
}

body[data-theme="light"] .ara-wordmark,
body[data-theme="light"] .ara-login-wordmark{
  color:#111827;
}

body[data-theme="light"] .ara-secure-pill{
  color:#8a5b00!important;
}

body[data-theme="light"] .ara-input-shell,
body[data-theme="light"] .ara-register-btn,
body[data-theme="light"] .ara-use-cases article{
  background:#fff!important;
}

body[data-theme="light"] .ara-use-cases b{color:#111827;}
body[data-theme="light"] .ara-use-cases span{color:#4b5563;}

@media(max-width:1180px){
  .ara-login-shell{
    grid-template-columns:1fr;
    grid-template-areas:
      "hero"
      "access"
      "showcase";
  }

  .ara-login-card{
    position:relative;
    top:auto;
    min-height:auto;
    width:min(680px,100%);
    margin:0 auto;
  }

  .ara-login-hero{min-height:650px;}
  .ara-device-main{width:min(740px,78vw);}
  .ara-device-left{width:min(460px,48vw);}
}

@media(max-width:820px){
  .ara-login-shell{padding:12px;gap:14px;}
  .ara-login-hero{min-height:620px;border-radius:22px;}
  .ara-hero-topline{padding:18px 18px 0;align-items:flex-start;}
  .ara-hero-topline span{display:none;}
  .ara-hero-copy{padding:46px 20px 0;gap:14px;}
  .ara-hero-line{height:132px;width:4px;flex-basis:4px;}
  .ara-hero-copy h1{font-size:clamp(46px,13vw,72px);}
  .ara-hero-copy p:not(.ara-kicker){font-size:16px;margin-top:14px;}
  .ara-hero-metrics{grid-template-columns:1fr;max-width:none;margin:24px 20px 0;}
  .ara-hero-metrics div{padding:12px;}
  .ara-performance-stage{
    height:250px;
    margin:28px 20px 0;
    border-radius:20px;
  }
  .ara-data-card{
    min-width:96px;
    padding:11px 12px;
  }
  .ara-data-card span{font-size:24px;}
  .ara-product-stage{height:215px;margin-top:28px;}
  .ara-device-main{
    left:22px;
    right:auto;
    bottom:-8px;
    width:calc(100% - 44px);
    height:230px;
    transform:rotateX(48deg) rotateZ(-3deg) translateZ(22px);
  }
  .ara-device-left,.ara-device-right{display:none;}
  .ara-login-card{padding:22px 18px;border-radius:22px;}
  .ara-login-title-row{gap:12px;}
  .ara-login-user-icon{display:none;}
  .ara-login-options{align-items:flex-start;flex-direction:column;}
  .ara-showcase{
    grid-template-columns:1fr;
    padding:18px;
    border-radius:20px;
  }
  .ara-showcase-grid{grid-template-columns:1fr;}
}

@media(max-width:480px){
  .ara-login-hero{min-height:590px;}
  .ara-hero-topline img{width:210px;}
  .ara-hero-copy{padding-top:34px;}
  .ara-hero-copy h1{font-size:43px;}
  .ara-product-stage{height:190px;}
  .ara-performance-stage{height:220px;}
  .ara-data-card-ready{display:none;}
  .ara-device-main{height:210px;}
  body.ara-login-premium:has(#formLogin) .h1{font-size:32px!important;}
}

@media(prefers-reduced-motion:reduce){
  .ara-hero-3d{display:none;}
  .ara-login-submit:hover{transform:none;}
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

/* Realistic image layer: replaces large UI screenshots with sport context photos. */
.ara-photo-stage{
  position:relative;
  overflow:hidden;
  height:300px;
  margin:38px 28px 0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:#050a12;
  box-shadow:0 26px 70px rgba(0,0,0,.46);
}

.ara-photo-stage:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,6,10,.82),rgba(3,6,10,.12) 52%,rgba(3,6,10,.62)),
    radial-gradient(420px 240px at 82% 12%,rgba(242,183,5,.22),transparent 68%);
}

.ara-photo-stage > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.96) contrast(1.04);
}

.ara-photo-stage .ara-data-card{
  z-index:2;
}

.ara-real-showcase-grid figure{
  min-height:220px;
}

.ara-real-showcase-grid img{
  height:190px;
  object-fit:cover;
}

.ara-real-showcase-grid figure:nth-child(2) img{
  object-position:center 40%;
}

.ara-mini-data-visual{
  display:grid;
  align-content:center;
  min-height:190px;
  padding:18px;
  background:
    radial-gradient(180px 120px at 80% 20%,rgba(87,166,255,.20),transparent 70%),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
}

.ara-mini-data-visual b{
  color:var(--login-gold);
  font-size:42px;
  line-height:1;
}

.ara-mini-data-visual span{
  color:#dbe5f2;
  font-weight:900;
}

.ara-mini-data-visual i{
  display:block;
  height:9px;
  margin-top:11px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--login-gold),rgba(242,183,5,.12));
}

.ara-mini-data-visual i:nth-of-type(2){
  width:72%;
  background:linear-gradient(90deg,var(--login-blue),rgba(87,166,255,.12));
}

.ara-mini-data-visual i:nth-of-type(3){
  width:54%;
  background:linear-gradient(90deg,var(--login-green),rgba(47,230,166,.12));
}

@media(max-width:820px){
  .ara-photo-stage{
    height:230px;
    margin:28px 20px 0;
  }
}