/* =========================================================
   ARIA COMPANY — ULTRA CINEMATIC INTERNAL SYSTEM
========================================================= */

:root{

  --bg:#050505;

  --glass:
  rgba(255,255,255,.06);

  --glass-strong:
  rgba(255,255,255,.10);

  --border:
  rgba(255,255,255,.10);

  --text:
  rgba(255,255,255,.94);

  --muted:
  rgba(255,255,255,.62);

  --gold:#d4af37;
  --gold-light:#f3d27a;

  --blue:#6ea8ff;
}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html,
body{

  min-height:100%;

  background:#050505;
}

body{

  font-family:'Vazirmatn',sans-serif;

  color:#fff;

  overflow-x:hidden;

  position:relative;

  min-height:100vh;

  backface-visibility:hidden;
}

/* =========================================================
   GOLD SELECTION
========================================================= */

::selection{
  background:#d4a85d;
  color:#111;
}

::-moz-selection{
  background:#d4a85d;
  color:#111;
}

/* =========================================================
   CINEMATIC BACKGROUND
========================================================= */

body::before{

  content:'';

  position:fixed;
  inset:0;

  z-index:-10;

  pointer-events:none;

  background:

  radial-gradient(
    circle at top right,
    rgba(212,175,55,.10),
    transparent 30%
  ),

  radial-gradient(
    circle at bottom left,
    rgba(110,168,255,.08),
    transparent 35%
  ),

  linear-gradient(
    180deg,
    #090909 0%,
    #040404 100%
  );
}

/* =========================================================
   PARALLAX GRID
========================================================= */

.parallax-grid{

  position:fixed;
  inset:0;

  z-index:-8;

  opacity:.025;

  pointer-events:none;

  will-change:transform;

  background-image:

  linear-gradient(
    rgba(255,255,255,.05) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.05) 1px,
    transparent 1px
  );

  background-size:80px 80px;

  transform:
  perspective(1000px)
  rotateX(70deg)
  scale(2);

  animation:
  gridMove 24s linear infinite;
}

@keyframes gridMove{

  from{

    transform:
    perspective(1000px)
    rotateX(70deg)
    translateY(0)
    scale(2);
  }

  to{

    transform:
    perspective(1000px)
    rotateX(70deg)
    translateY(80px)
    scale(2);
  }
}

/* =========================================================
   MOUSE GLOW
========================================================= */

.mouse-glow{

  position:fixed;

  left:0;
  top:0;

  width:420px;
  height:420px;

  border-radius:50%;

  pointer-events:none;

  z-index:1;

  opacity:1;

  mix-blend-mode:screen;

  background:
  radial-gradient(
    circle,
    rgba(212,175,55,.16) 0%,
    rgba(212,175,55,.10) 25%,
    rgba(212,175,55,.04) 45%,
    transparent 72%
  );

  filter:blur(55px);

  transform:
  translate3d(-50%,-50%,0);

  will-change:
  transform,
  left,
  top;
}

/* =========================================================
   FLOATING LIGHTS
========================================================= */

.light-beam{

  position:fixed;

  border-radius:50%;

  filter:blur(120px);

  z-index:-6;

  pointer-events:none;

  opacity:.9;

  mix-blend-mode:screen;
}

.light-1{

  width:520px;
  height:520px;

  top:-180px;
  right:-120px;

  background:
  radial-gradient(
    rgba(212,175,55,.22),
    transparent 70%
  );

  animation:
  beamFloat1 18s ease-in-out infinite alternate;
}

.light-2{

  width:420px;
  height:420px;

  bottom:-120px;
  left:-120px;

  background:
  radial-gradient(
    rgba(110,168,255,.16),
    transparent 70%
  );

  animation:
  beamFloat2 20s ease-in-out infinite alternate;
}

.light-3{

  width:280px;
  height:280px;

  top:40%;
  left:50%;

  background:
  radial-gradient(
    rgba(255,255,255,.06),
    transparent 75%
  );

  animation:
  beamFloat3 14s ease-in-out infinite alternate;
}

@keyframes beamFloat1{

  from{

    transform:
    translateY(0)
    translateX(0)
    scale(1);
  }

  to{

    transform:
    translateY(60px)
    translateX(-40px)
    scale(1.15);
  }
}

@keyframes beamFloat2{

  from{

    transform:
    translateY(0)
    scale(1);
  }

  to{

    transform:
    translateY(-80px)
    scale(1.18);
  }
}

@keyframes beamFloat3{

  from{

    transform:
    translateY(0)
    translateX(0);
  }

  to{

    transform:
    translateY(-50px)
    translateX(30px);
  }
}

/* =========================================================
   HEADER
========================================================= */

.internal-header{

  position:fixed;

  top:20px;
  left:50%;

  transform:translateX(-50%);

  width:min(1380px,94%);

  z-index:999;
}

.internal-nav{

  position:relative;

  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 24px;

  border-radius:28px;

  background:
  rgba(10,10,10,.42);

  backdrop-filter:
  blur(22px);

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

  box-shadow:
  0 15px 50px rgba(0,0,0,.28);
}

/* =========================================================
   LOGO
========================================================= */

.logo{

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

  text-decoration:none;
}

.logo img{

  height:58px;

  filter:
  drop-shadow(0 8px 24px rgba(0,0,0,.45));
}

.logo-text strong{

  display:block;

  color:#fff;

  font-size:13px;

  letter-spacing:4px;

  font-weight:700;
}

.logo-text span{

  color:var(--muted);

  font-size:10px;

  letter-spacing:3px;
}

/* =========================================================
   MENU
========================================================= */

.nav-links{

  display:flex;
  align-items:center;

  gap:8px;

  flex-wrap:wrap;
}

.nav-links a{

  position:relative;

  padding:11px 15px;

  border-radius:16px;

  color:#fff;

  font-size:12px;

  text-decoration:none;

  overflow:hidden;

  transition:.35s ease;
}

.nav-links a::before{

  content:'';

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );

  opacity:0;

  transition:.5s;
}

.nav-links a:hover{

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

  transform:
  translateY(-2px);

  box-shadow:
  0 10px 30px rgba(0,0,0,.18);
}

.nav-links a:hover::before{
  opacity:1;
}

/* =========================================================
   HERO
========================================================= */

.internal-hero{

  position:relative;

  min-height:100svh;

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

  padding:
  240px 20px 120px;
}

.hero-box{

  position:relative;

  z-index:2;

  width:min(980px,94%);

  padding:72px;

  border-radius:42px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.07),
    rgba(255,255,255,.03)
  );

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

  backdrop-filter:
  blur(24px);

  box-shadow:
  0 30px 80px rgba(0,0,0,.45);

  animation:
  heroFloat 7s ease-in-out infinite alternate;
}

@keyframes heroFloat{

  from{
    transform:
    translateY(0px);
  }

  to{
    transform:
    translateY(-10px);
  }
}

.hero-box::before{

  content:'';

  position:absolute;

  width:420px;
  height:420px;

  top:-180px;
  right:-120px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(212,175,55,.14),
    transparent 70%
  );
}

.hero-box::after{

  content:'';

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.04),
    transparent
  );

  transform:
  translateX(-100%);

  animation:
  glassShine 10s linear infinite;
}

@keyframes glassShine{

  to{
    transform:
    translateX(100%);
  }
}

/* =========================================================
   HERO TEXT
========================================================= */

.hero-mini{

  color:var(--gold-light);

  font-size:13px;

  letter-spacing:4px;

  margin-bottom:24px;
}

.hero-title{

  font-size:54px;

  line-height:1.35;

  font-weight:800;

  margin-bottom:28px;

  animation:
  titleFloat 6s ease-in-out infinite alternate;
}

@keyframes titleFloat{

  from{
    transform:translateY(0px);
  }

  to{
    transform:translateY(-8px);
  }
}

.hero-desc{

  font-size:18px;

  line-height:2.3;

  color:var(--muted);
}

/* =========================================================
   CONTENT
========================================================= */

.content-section{

  width:min(1150px,92%);

  margin:auto;

  padding-bottom:120px;
}

/* =========================================================
   GLASS SECTION
========================================================= */

.glass-section{

  position:relative;

  z-index:2;

  margin-bottom:36px;

  padding:54px;

  border-radius:34px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.07),
    rgba(255,255,255,.035)
  );

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

  backdrop-filter:
  blur(18px);

  transform-style:preserve-3d;

  will-change:
  transform,
  border-radius;

  transition:
  transform .55s cubic-bezier(.2,.8,.2,1),
  border-radius .55s cubic-bezier(.2,.8,.2,1),
  border-color .55s ease,
  background .55s ease,
  box-shadow .55s ease;
}

.glass-section:hover{

  transform:
  perspective(1400px)
  rotateX(2deg)
  rotateY(-2deg)
  translateY(-10px)
  scale(1.015);

  border-radius:46px;

  border-color:
  rgba(212,175,55,.30);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.05)
  );

  box-shadow:
  0 35px 90px rgba(0,0,0,.40),
  0 0 50px rgba(212,175,55,.10);
}

.glass-section::after{

  content:'';

  position:absolute;

  top:-120%;
  left:-40%;

  width:60%;
  height:300%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.05),
    transparent
  );

  transform:
  rotate(25deg);

  animation:
  sweep 12s linear infinite;
}

@keyframes sweep{

  from{
    left:-60%;
  }

  to{
    left:140%;
  }
}

/* =========================================================
   SECTION TEXT
========================================================= */

.glass-section h2{

  font-size:36px;

  margin-bottom:26px;

  line-height:1.5;
}

.glass-section p{

  font-size:17px;

  line-height:2.35;

  color:var(--muted);
}

/* =========================================================
   FEATURE LIST
========================================================= */

.feature-list{

  margin-top:34px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:18px;
}

.feature-item{

  position:relative;

  z-index:2;

  padding:22px;

  border-radius:22px;

  overflow:hidden;

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

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

  transform-style:preserve-3d;

  will-change:
  transform,
  border-radius;

  transition:
  .45s cubic-bezier(.2,.8,.2,1);
}

.feature-item:hover{

  transform:
  perspective(1200px)
  rotateX(4deg)
  rotateY(-4deg)
  translateY(-8px)
  scale(1.03);

  border-radius:32px;

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

  border-color:
  rgba(212,175,55,.30);

  box-shadow:
  0 20px 50px rgba(0,0,0,.30),
  0 0 30px rgba(212,175,55,.10);
}

.feature-item::before{

  content:'';

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.05),
    transparent
  );

  opacity:0;

  transition:.5s;
}

.feature-item:hover::before{
  opacity:1;
}

.feature-item span{

  position:relative;

  z-index:2;

  line-height:2;

  font-size:15px;
  
  color: white;
	
  text-decoration: none;

}


/* =========================================================
   CTA
========================================================= */

.cta-box{

  text-align:center;
}

.cta-box h3{

  font-size:40px;

  margin-bottom:24px;
}

.cta-buttons{

  margin-top:34px;

  display:flex;
  justify-content:center;

  gap:18px;

  flex-wrap:wrap;
}

.cta-buttons a{

  position:relative;

  padding:16px 34px;

  border-radius:60px;

  color:#fff;

  text-decoration:none;

  overflow:hidden;

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

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

  transition:.4s ease;
}

.cta-buttons a:hover{

  transform:
  translateY(-4px);

  background:
  linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light)
  );

  color:#111;

  box-shadow:
  0 18px 40px rgba(212,175,55,.24);
}

/* =========================================================
   FOOTER
========================================================= */

.footer{

  position:relative;

  z-index:3;

  padding:40px 20px 60px;

  text-align:center;

  color:
  rgba(255,255,255,.45);

  font-size:13px;
}

.footer::before{

  content:'';

  position:absolute;

  top:-120px;
  left:0;


  height:120px;

  background:

  linear-gradient(
    to top,
    rgba(5,5,5,1),
    transparent
  );
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.glass-section,
.feature-item,
.hero-box{

  opacity:0;

  transform:
  translateY(60px)
  scale(.96);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.glass-section.revealed,
.feature-item.revealed,
.hero-box.revealed{

  opacity:1;

  transform:
  translateY(0)
  scale(1);
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:992px){

  .internal-header{
    top:10px;
  }

  .internal-nav{

    padding:18px;

    border-radius:24px;

    flex-direction:column;

    gap:18px;
  }

  .nav-links{

    gap:6px;

    justify-content:center;
  }

  .nav-links a{

    padding:10px 12px;

    font-size:12px;
  }

  .internal-hero{

    padding:
    320px 20px 100px;
  }

  .hero-box{

    padding:44px 28px;
  }

  .hero-title{

    font-size:42px;

    line-height:1.5;
  }

  .hero-desc{

    font-size:16px;
  }

  .glass-section{

    padding:36px 26px;
  }

  .glass-section h2{

    font-size:28px;
  }
}

@media(max-width:768px){

  .logo img{
    height:46px;
  }

  .hero-title{
    font-size:34px;
  }

  .hero-desc{

    font-size:15px;

    line-height:2.1;
  }

  .feature-list{

    grid-template-columns:1fr;
  }

  .cta-buttons{

    flex-direction:column;
  }

  .cta-buttons a{



    text-align:center;
  }

  .nav-links{
    justify-content:center;
  }
}

/* =========================================================
   ULTRA CINEMATIC HOVER FINAL
========================================================= */

.glass-section,
.feature-item{

  transform-style:preserve-3d;

  will-change:
  transform,
  border-radius,
  box-shadow,
  background;

  transition:
  transform .65s cubic-bezier(.2,.8,.2,1),
  border-radius .65s cubic-bezier(.2,.8,.2,1),
  background .65s ease,
  border-color .65s ease,
  box-shadow .65s ease;
}

/* =========================================
   GLASS SECTION HOVER
========================================= */

.glass-section:hover{

  transform:
  perspective(1400px)
  rotateX(2deg)
  rotateY(-2deg)
  translateY(-10px)
  scale(1.012);

  border-radius:48px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.11),
    rgba(255,255,255,.045)
  );

  border-color:
  rgba(212,175,55,.28);

  box-shadow:
  0 30px 90px rgba(0,0,0,.38),
  0 0 50px rgba(212,175,55,.10);
}

/* =========================================
   FEATURE ITEM HOVER
========================================= */

.feature-item:hover{

  transform:
  perspective(1200px)
  rotateX(4deg)
  rotateY(-4deg)
  translateY(-8px)
  scale(1.03);

  border-radius:34px;

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

  border-color:
  rgba(212,175,55,.30);

  box-shadow:
  0 20px 50px rgba(0,0,0,.32),
  0 0 35px rgba(212,175,55,.08);
}

/* =========================================
   LIGHT SWEEP EFFECT
========================================= */

.glass-section::after,
.feature-item::after{

  content:'';

  position:absolute;

  top:-120%;
  left:-40%;

  width:60%;
  height:320%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );

  transform:
  rotate(25deg);

  opacity:.7;

  animation:
  cinematicSweep 10s linear infinite;

  pointer-events:none;
}

@keyframes cinematicSweep{

  from{
    left:-60%;
  }

  to{
    left:140%;
  }
}

/* =========================================
   SOFT INNER GLOW
========================================= */

.glass-section::before,
.feature-item::before{

  content:'';

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
  radial-gradient(
    circle at top left,
    rgba(255,255,255,.08),
    transparent 60%
  );

  opacity:.7;

  pointer-events:none;
}

/* =========================================
   MOBILE PERFORMANCE
========================================= */

@media(max-width:768px){

  .glass-section:hover,
  .feature-item:hover{

    transform:
    translateY(-4px)
    scale(1.01);

  }

}

/* =========================================================
   FINAL LAYOUT STABILITY FIX
========================================================= */

html,
body{

  overflow-x:hidden !important;

  width:100%;
  max-width:100%;
}

/* prevent cinematic layers from affecting layout */

body::before,
.parallax-grid,
.light-beam{

  position:fixed;

  inset:0;

  pointer-events:none;

  contain:layout paint;
}

/* FIX HERO SHIFT */

.internal-hero{

  overflow:hidden;

  isolation:isolate;
}

/* FIX HERO BOX */

.hero-box{

  position:relative;

  transform-style:preserve-3d;

  backface-visibility:hidden;

  will-change:transform;

  max-width:100%;

  margin:auto;
}

/* prevent hover overflow */

.glass-section,
.feature-item,
.hero-box{

  contain:layout paint;
}

/* smoother GPU rendering */

.glass-section,
.feature-item,
.hero-box,
.light-beam{

  transform:translateZ(0);
}

/* footer stability */

.footer{

  overflow:hidden;
}