﻿:root{
  --ink:        #07090F;
  --ink-deep:   #04050A;
  --ink-soft:   #10142A;
  --ink-line:   #1B2138;
  --bone:       #F2EDE1;
  --bone-deep:  #E6DDC9;
  --bone-line:  #D9CFB8;
  --mist:       #6F7E9C;
  --mist-soft:  #9FB0C8;

  --amber:      #F2A93C;
  --coral:      #FF5E47;
  --magenta:    #FF1E73;
  --electric:   #3A5BFF;
  --violet:     #6A3DFF;
  --signal:     #3AE8A1;
}

.heading-gap {margin-bottom: clamp(2rem, 4vw, 3.75rem);}

.section-hero{height:calc(100vh - 100px); background: url(../images/genie-overview/hero-bg.png) no-repeat center;}

.hero-btn{font-size: 13px; line-height: 46px;transition:all 0.5s ease;}
.book-btn{border-color: #ECECEF!important; background: #F8F8FB; color: #121317;}
.book-btn:hover{background: linear-gradient(90deg, #6622CA 0%, #05387B 100%); color:#ffffff;}

.genie-btn{border-color: #ECECEF!important; background: linear-gradient(90deg, #6622CA 0%, #05387B 100%); color:#ffffff;}
.genie-btn:hover{background: linear-gradient(90deg, #05387B 0%, #6622CA 100%);}


.rotate-180{transform: rotate(180deg);}
/* .video-holder{
    width:100%;
    max-width: 1400px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    min-height: 420px;
    overflow: hidden;
    transform: scale(0.9);
    transform-origin: center center;
    will-change: transform;
    padding: 0 10px;
}
.video-holder video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:36px;
} */

.video-scale-section{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background:linear-gradient(180deg, #0A015C 0%, #0D0556 34.78%, #FFFFFF 100%);
}


.video-holder{
    width:100%;
    will-change:transform;
}

.video-holder video{
    width:100%;
    height:100%;
    display:block;
    border-radius:36px;
}



.section-genie-diffrent{background: #090414; border-radius: calc( var(--BorderRadius) + 30px);}
.section-genie-diffrent .container{max-width: 1170px;}
.section-genie-diffrent .body-text{letter-spacing: 0.5%; line-height: 32px; max-width:660px;}

.genie-number-cards{grid-template-columns:200px 400px 1fr; column-gap:2rem; padding: 1.7rem 0px; border-bottom: solid 1px #525252;transition:background .4s ease; --mx:50%; --my:50%;}
.genie-number-cards:last-child{border-bottom: 0px;}
.genie-number-cards:hover{
  background:
    radial-gradient(360px circle at var(--mx) var(--my), rgba(116,90,249,.32), rgba(90,95,246,.13) 42%, rgba(12,14,19,0) 70%),
    #0c0e13;
}
.genie-number-cards:before{content: ''; background:#5E32B4; width:0px; height: 100%; position: absolute; left: 0px; top: 0px;transition:all 0.5s ease;}
.genie-number-cards:hover:before{content: ''; width:2px;}
.genie-number-cards:hover .step-no{transform: translateX(5px);}

.step-no{font-size: clamp(36px, 8vw, 115px); background: linear-gradient(73.36deg, #AA81FF 4.48%, #0C24D3 82.99%);
 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  transition:all 0.5s ease;
}
.step-label{font-size: clamp(18px, 2.5vw, 32px); line-height: 46px;}
.step-bio p{letter-spacing: 0.5%; line-height: 26px; max-width:96%;}

.section-results .container{max-width: 1200px;}
.section-results h2 span{color: #6142FF;}
.result-cards{border: solid 2px #4949ff61; border-radius: 20px; overflow: hidden;}

.result-cards > div{border-color:#4949ff61!important; margin-bottom: -1px; border-left: 0px!important; border-top: 0px!important; padding:2.2rem;  transition:all 0.5s ease;}
.result-cards > div:hover{background: radial-gradient(101.46% 398.82% at -5.25% 100%, #9371FF 0%, #0118BB 97.12%)}
.result-cards > div:hover h3,
.result-cards > div:hover p{color:#ffffff;}

.result-cards{margin-top: var(--section-gap-medium); letter-spacing: 0.5%; }
.result-cards h3{color:#4F4F5C; line-height: 30px;}
.result-cards p{color:#4F4F5C; line-height: 28px;}

.wins-hd p{max-width: 700px;}

.genie-counter{padding-top:var(--section-gap-medium);}
.genie-counter .col-md-3{border:solid 1px #d8d8da; border-right:0px; row-gap:1.4rem;}
.genie-counter .col-md-3:first-child{border-left: 0px;}

.growth-lable{font-size: 14px; padding: 0.2rem 0px;}
.growth-lable img{max-height: 14px;}
.genie-counter .counter{
  font-size: clamp(36px, 5vw, 80px);
    background: linear-gradient(78.39deg, #9C8CFB 16%, #5A5FF6 50%, #3340DE 86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  transition:all 0.5s ease;
}

.genie-work-cta{background: #000000; padding: calc( var(--section-gap-large) * 1.5) 0px;}
.genie-work-cta:before{content: ''; background: radial-gradient(78.73% 56.55% at 54.17% 43.45%, rgba(0, 0, 0, 0) 0%, #000000 96.15%); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2;}
.cta-video{object-fit: cover; opacity: 0.5; object-position: center;}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ INDUSTRIES */
.ind-wrap{grid-template-columns: 0.95fr 1.4fr; margin-top: var(--section-gap-medium);}

@media(max-width:980px){ 
.ind-wrap{grid-template-columns:1fr} }
.ind-tabs{ display:flex; flex-direction:column}
.ind-tab{
  padding: 30px 24px;
  display:flex; align-items:baseline; gap:20px;
  position:relative;
  transition: color .35s ease, padding-left .35s ease;
  background: white;
  border: 0px;
  border-top: solid 1px #d8d8da;
  font-size: 24px;
  color:#121317
}
.ind-tab:last-child{border-bottom:solid 1px #d8d8da;}
.ind-tab .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mist); width:36px; flex:0 0 36px; padding-top:11px}
.ind-tab .arr{ margin-left:auto; font-family:var(--mono); font-size:11px; opacity:0; transform:translateX(-8px); transition: all .35s ease; color: var(--amber); padding-top: 11px}
.ind-tab[aria-selected="true"]{ color:#712AB0; font-weight: 700!important; padding-left: 30px}
.ind-tab[aria-selected="true"] .arr{ opacity:1; transform:translateX(0)}
.ind-tab[aria-selected="true"]::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--aurora)}
.ind-tab:hover{color:#712AB0;}

.ind-panel{
  position:relative;
  background:#07090E;
  padding: clamp(30px, 2.5vw, 40px);
  overflow:hidden;
}
.ind-card{ position:relative; display:none; animation: fadeUp .7s cubic-bezier(.2,.8,.2,1); z-index:1}
.ind-card[data-active="true"]{ display:flex; flex-direction: column; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(14px)} to{ opacity:1; transform: translateY(0)} }

.genie-design-cards{
  border-radius: var(--BorderRadius);
  box-shadow: 0px 9.78px 48.88px -3.67px #00000003;
  box-shadow: 0px 2.24px 11.19px -2.44px #00000008;
  box-shadow: 0px 0.59px 2.95px -1.22px #0000000A;
}

.section-genie-cards{margin-top: var(--section-gap-large);}
.ai-card-image{border-radius: var(--BorderRadius);}

.genie-design-cards .text-link{color:#8FB7FF; font-size:13px; text-decoration:none; display:inline-block;}
.genie-design-cards .text-link:hover{color:#ffffff; text-decoration:underline;}


.cap{transition: background .45s ease;}
.cap::before{
  content:""; position:absolute; inset:0; opacity:0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--magenta) 25%, transparent) 0%, transparent 45%);
  transition: opacity .35s ease;
  pointer-events:none;
}
.cap:hover::before{ opacity:1 }
/* .cap:hover{ background: var(--ink-soft)} */

.genie-cta{padding: var(--section-gap-medium);  background: url('../images/genie-overview/cta-bg.jpg') no-repeat right bottom; background-size:cover;  border-radius: var(--BorderRadius);}
.section-cat-footer{padding-block: clamp(40px, 8.2vw, 118px); background: url('../images/genie-overview/footer-cta.jpg') no-repeat top; background-size: cover; letter-spacing: 0.5%; display: flex; align-items: center;}
.cta-top-caption{font-size: 10px; margin-bottom: 3rem;}
.section-cat-footer h2{max-width:730px;}
.section-cat-footer p{max-width: 700px;}
.section-cat-footer .btn-white-blue-border{background:#F2EDE2; border-color:#F2EDE2!important;}
.section-cat-footer .btn-white-blue-border:hover{background:#000000!important;}


.caption-title.explore{color: #666BFF;}
.explore-cards{background:#F8F9FF; border-color:#CCCCFF!important; box-shadow:0px 1px 3.7px rgba(204, 204, 255, 0.64); border-radius:var(--BorderRadius);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; will-change:transform}
.explore-cards:hover {transform:translateY(-5px) scale(1.01);
  box-shadow:0px 10px 30px rgba(97, 66, 255, 0.25), 0px 4px 10px rgba(97, 66, 255, 0.15)}
.arrow-button a {--sise:46px; width:var(--sise); height:var(--sise)}

.section-exp-genie{background: linear-gradient(245.65deg, #0E178F -1.2%, #020965 23.57%, #010863 32.92%, #010863 48.49%, #742CFA 130.93%);}
.section-exp-genie:before{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url('../images/genie-overview/experiance-genie-bg-logo.svg') no-repeat center;
}

.section-exp-genie .group-hd p{max-width:700px;}
.section-exp-genie .border-outline{font-size: 14px; padding-top:10px; padding-bottom: 10px;}
.section-exp-genie .border-outline:hover{background:var(--PrimaryClr);}

.genie-svg-logo{
    width:min(90vw,1190px);
    margin:0 auto;
}

.genie-svg-logo svg{
    width:100%;
    height:auto;
    display:block;
}
.genie-svg-logo svg > *{
    opacity:0;
    transition:opacity .6s ease;
}
.genie-svg-logo svg > *{
    opacity:0;
    transform:translateY(20px) scale(0.98);
    transform-origin:center;
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
}

.genie-svg-logo svg > *.active{
    opacity:1;
    transform:translateY(0) scale(1);
}




/* custom cursor removed — default system pointer is used */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ motion */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{ opacity:1; transform:none}
.reveal.d1{ transition-delay:.06s} .reveal.d2{ transition-delay:.14s}
.reveal.d3{ transition-delay:.22s} .reveal.d4{ transition-delay:.30s}
.reveal.d5{ transition-delay:.38s}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in{ opacity:1; transform:none}
  .cta-band::before{ animation: none}
  .aurora-text, .hero-line.l1 .wordmark, .cta-band h2 em{ animation: none}
}


@media all and (min-width:960px){
 .w-md-75{max-width:50%;}
 .section-cat-footer{height: calc(100vh - 100px);}
 .genie-cta{padding: var(--section-gap-large);}
}

@media all and (max-width:1400px){
  .section-cat-footer h2 {
      max-width: 530px;
  }
}

@media all and (max-width:880px){
  .genie-number-cards {grid-template-columns: 80px 1fr; row-gap: 1rem; column-gap: 0;}
  .genie-number-cards .step-bio {grid-column: 1 / -1;}
  .step-label{line-height: inherit;}
  .genie-number-cards:before{display: none;}
  .section-genie-diffrent{border-radius: var(--BorderRadius);}
  .section-genie-diffrent .body-text{line-height: 24px;}
  .genie-counter .col-md-3{border-left: 0px; border-right: 0px; border-bottom: 0px;}
  .result-cards > div{border-right: 0px!important;}
  .gn-agent{display: none;}
  .ai-modals{height: auto!important;}
}

.play-btn {top:50%; left:50%; transform: translate(-50%, -50%); --size:50px; width:var(--size); height:var(--size); background:rgba(255,255,255,0.85); transition:all .4s ease; z-index:2;}
.play-btn::before, .play-btn::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:rgb(28 2 165); animation:pulse 2s infinite ease-out; z-index:-1;}
.play-btn::after {animation-delay:1s;}

@keyframes pulse {
  0%   { transform:scale(1); opacity:.7;}
  100% { transform:scale(1.8); opacity:0;}
}
.play-btn svg {width:28px; height:32px; fill:#ffffff;}
.play-btn:hover {background:#fff; }