@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap');

:root{
  --green:#9cff00;
  --green2:#7bd400;
  --black:#030303;
  --panel:#070707;
  --line:rgba(156,255,0,.34);
  --white:#fff;
  --muted:#cfcfcf;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%, rgba(156,255,0,.055), transparent 38%),
    radial-gradient(circle at 70% 52%, rgba(156,255,0,.06), transparent 25%),
    linear-gradient(#020202,#000);
}
a{text-decoration:none;color:inherit}

.page-shell{
  position:relative;
  width:100%;
  min-height:100vh;
  border-top:1px solid rgba(156,255,0,.45);
  border-bottom:1px solid rgba(156,255,0,.45);
}

.topbar{
  width:1344px;
  max-width:calc(100% - 190px);
  margin:0 auto;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{
  width:64px;
  height:64px;
  object-fit:contain;
  display:block;
}
.menu{
  display:flex;
  gap:37px;
  align-items:center;
  margin-left:60px;
  flex:1;
}
.menu a{
  font-size:12px;
  font-weight:800;
  color:#fff;
  letter-spacing:.1px;
  line-height:84px;
  position:relative;
  white-space:nowrap;
}
.menu a.active{color:var(--green)}
.menu a.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:26px;
  height:2px;
  background:var(--green);
  box-shadow:0 0 14px var(--green);
}

.right-actions{
  display:flex;
  gap:27px;
  align-items:center;
}
.search{
  width:30px;height:30px;border:0;background:transparent;position:relative;cursor:pointer;
}
.search:before{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:2px solid #fff;
  border-radius:50%;
  left:4px;top:4px;
}
.search:after{
  content:"";
  position:absolute;
  width:11px;height:2px;
  background:#fff;
  transform:rotate(45deg);
  left:17px;top:19px;
}
.login{
  font-size:12px;
  font-weight:800;
}
.start-btn{
  height:51px;
  min-width:126px;
  padding:0 22px;
  background:linear-gradient(180deg,#b5ff16,#89de00);
  color:#071000;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  box-shadow:0 0 18px rgba(156,255,0,.26);
}

main{
  width:1344px;
  max-width:calc(100% - 190px);
  margin:0 auto;
}

.hero-wrap{
  position:relative;
}
.slider-arrow{
  position:absolute;
  top:44%;
  width:48px;height:48px;border-radius:50%;
  border:0;
  background:rgba(22,22,22,.88);
  color:white;
  font-size:43px;
  line-height:40px;
  cursor:pointer;
  z-index:5;
}
.slider-arrow.left{left:-23px}
.slider-arrow.right{right:-23px}

.hero{
  height:426px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  overflow:hidden;
  background:#050505;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(156,255,0,.035);
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#030303 0%,rgba(3,3,3,.97) 26%,rgba(3,3,3,.58) 52%,rgba(3,3,3,.18) 100%),
    radial-gradient(circle at 79% 70%, rgba(156,255,0,.18), transparent 24%);
  pointer-events:none;
}
.hero-image{
  position:absolute;
  inset:0;
  background-image:url('assets/hero-player.jpg');
  background-size:cover;
  background-position:right center;
  opacity:.96;
}
.hero-copy{
  position:relative;
  z-index:2;
  padding:37px 0 0 82px;
}
.hero h1{
  font-size:37px;
  line-height:1.02;
  letter-spacing:-1.9px;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
}
.hero h1 span{display:block}
.hero h1 strong{
  display:block;
  color:var(--green);
  font-size:76px;
  line-height:.92;
  letter-spacing:-4px;
  text-shadow:0 0 24px rgba(156,255,0,.2);
}
.hero p{
  margin-top:15px;
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1.55;
}
.hero-buttons{
  margin-top:15px;
  display:flex;
  gap:15px;
}
.primary-btn,.outline-btn{
  height:44px;
  min-width:181px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-size:12px;
  font-weight:900;
}
.primary-btn{
  background:linear-gradient(180deg,#b5ff15,#87db00);
  color:#071000;
  box-shadow:0 0 16px rgba(156,255,0,.3);
}
.primary-btn b{font-size:22px}
.outline-btn{
  color:#fff;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(0,0,0,.25);
}
.stats-title{
  margin-top:18px;
  font-size:12px;
  color:#d9d9d9;
}
.stats{
  margin-top:17px;
  display:flex;
  gap:42px;
}
.stat{
  display:flex;
  gap:12px;
  align-items:center;
}
.stat-icon{
  width:28px;height:28px;
  color:var(--green);
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.stat b{
  display:block;
  font-size:17px;
  letter-spacing:.2px;
}
.stat span{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#e8e8e8;
}
.dots{
  position:absolute;
  z-index:4;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  display:flex;
  gap:17px;
}
.dots i{
  width:9px;height:9px;border-radius:999px;
  background:#ddd;
}
.dots i.on{
  width:20px;
  background:var(--green);
  box-shadow:0 0 15px var(--green);
}

.mini-slider{
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.mini-card{
  height:128px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.17);
  position:relative;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.35)),
    var(--bg);
  background-size:cover;
  background-position:center;
  padding:28px 26px;
}
.mini-card.active{
  border-color:var(--green);
  box-shadow:0 0 0 1px rgba(156,255,0,.2);
}
.mini-card h3{
  position:relative;
  z-index:1;
  font-size:16px;
  line-height:1.2;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
}
.mini-card h3 strong{
  color:var(--green);
  font-size:24px;
  line-height:.95;
}
.mini-card em{
  position:absolute;
  right:12px;bottom:12px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(230,230,230,.85);
  color:#5c5c5c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  font-style:normal;
}

.app-section{
  margin-top:13px;
  height:299px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  overflow:hidden;
  background:
    radial-gradient(circle at 48% 60%, rgba(156,255,0,.07), transparent 33%),
    #050505;
  display:grid;
  grid-template-columns:330px 590px 1fr;
  position:relative;
}
.features{
  padding:19px 0 0 31px;
  display:grid;
  gap:14px;
}
.feature{
  display:flex;
  gap:15px;
  align-items:flex-start;
}
.feature i{
  width:49px;height:49px;
  border-radius:50%;
  border:1px solid rgba(156,255,0,.3);
  background:rgba(156,255,0,.04);
  color:var(--green);
  font-size:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  flex:0 0 auto;
}
.feature h4{
  font-size:13px;
  font-weight:900;
  margin:3px 0 4px;
}
.feature p{
  width:235px;
  font-size:11px;
  color:#d8d8d8;
  line-height:1.45;
}
.phone-mockups{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.phone-mockups img{
  width:606px;
  margin-top:3px;
  display:block;
}
.download{
  padding:56px 38px 0 16px;
}
.download h2{
  font-size:25px;
  line-height:1.12;
  font-weight:900;
  font-style:italic;
}
.download h2 strong{
  color:var(--green);
}
.download p{
  margin-top:18px;
  color:#d6d6d6;
  font-size:16px;
  line-height:1.45;
  max-width:335px;
}
.store-buttons{
  display:flex;
  gap:12px;
  margin-top:25px;
}
.store-buttons a{
  width:124px;height:38px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:12px;
  font-weight:800;
  line-height:.82;
}
.store-buttons span{font-size:22px}
.store-buttons small{
  font-size:8px;
  font-weight:600;
}

footer{
  width:1344px;
  max-width:calc(100% - 190px);
  height:78px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(156,255,0,.38);
}
.foot-left{
  display:flex;
  align-items:center;
  gap:21px;
  color:#cfcfcf;
  font-size:11px;
}
.foot-left img{
  width:39px;height:39px;object-fit:contain;
}
footer nav{
  display:flex;
  gap:63px;
  color:#cfcfcf;
  font-size:11px;
}
.social{
  display:flex;
  gap:29px;
  font-size:23px;
  color:#ddd;
}

@media(max-width:1180px){
  .topbar,main,footer{max-width:calc(100% - 32px)}
  .menu{gap:18px;margin-left:24px}
  .right-actions{gap:14px}
  .hero-copy{padding-left:46px}
  .stats{gap:22px}
  .app-section{grid-template-columns:310px 1fr}
  .download{display:none}
}
@media(max-width:900px){
  .menu{display:none}
  .topbar{height:78px}
  .hero{height:auto;min-height:590px}
  .hero-copy{padding:34px 24px 0}
  .hero h1 strong{font-size:68px}
  .hero-image{opacity:.65;background-position:center bottom}
  .stats{flex-wrap:wrap}
  .mini-slider{grid-template-columns:1fr 1fr}
  .app-section{height:auto;grid-template-columns:1fr;padding-bottom:20px}
  .phone-mockups img{width:100%;max-width:560px}
  footer{height:auto;padding:22px 0;gap:20px;flex-direction:column}
}
@media(max-width:560px){
  .right-actions .login,.search{display:none}
  .start-btn{min-width:108px;height:42px}
  .logo img{width:56px;height:56px}
  .slider-arrow{display:none}
  .hero h1{font-size:30px}
  .hero h1 strong{font-size:58px}
  .hero-buttons{flex-direction:column;align-items:flex-start}
  .mini-slider{grid-template-columns:1fr}
  .features{padding:22px}
  footer nav{flex-direction:column;gap:14px;text-align:center}
}


/* ===== ARK PROFESSIONAL INNER PAGES ===== */
.inner-body{
  background:
    radial-gradient(circle at 76% 12%, rgba(156,255,0,.13), transparent 28%),
    radial-gradient(circle at 10% 72%, rgba(156,255,0,.07), transparent 30%),
    #000;
}
.inner-main{
  width:1344px;
  max-width:calc(100% - 190px);
  margin:0 auto;
}
.inner-hero{
  min-height:300px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.62)),
    radial-gradient(circle at 85% 55%, rgba(156,255,0,.20), transparent 28%);
  overflow:hidden;
  position:relative;
  padding:54px 64px;
}
.inner-hero:before{
  content:"";
  position:absolute;
  right:50px;
  top:35px;
  width:280px;
  height:280px;
  border:1px solid rgba(156,255,0,.18);
  border-radius:50%;
  box-shadow:0 0 80px rgba(156,255,0,.12) inset;
}
.inner-kicker{
  color:var(--green);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
}
.inner-hero h1{
  margin-top:16px;
  font-size:64px;
  line-height:.95;
  letter-spacing:-3px;
  font-style:italic;
  font-weight:900;
  position:relative;
  z-index:1;
}
.inner-hero h1 strong{color:var(--green)}
.inner-hero p{
  position:relative;
  z-index:1;
  margin-top:20px;
  max-width:720px;
  color:#ddd;
  font-size:17px;
  line-height:1.7;
}
.inner-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:285px 1fr;
  gap:14px;
}
.inner-sidebar{
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(5,5,5,.92);
  padding:18px;
  align-self:start;
  position:sticky;
  top:18px;
}
.inner-sidebar a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-radius:8px;
  color:#ddd;
  font-size:12px;
  font-weight:900;
}
.inner-sidebar a:hover,
.inner-sidebar a.active{
  background:rgba(156,255,0,.10);
  color:var(--green);
}
.inner-sidebar a:after{
  content:"→";
  opacity:.45;
}
.inner-content{
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    #050505;
  overflow:hidden;
}
.inner-section{
  padding:34px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.inner-section:last-child{border-bottom:0}
.inner-section h2{
  color:var(--green);
  font-size:27px;
  font-weight:900;
  font-style:italic;
  margin-bottom:16px;
}
.inner-section h3{
  color:#fff;
  font-size:20px;
  margin-bottom:10px;
}
.inner-section p,
.inner-section li{
  color:#d0d0d0;
  font-size:15px;
  line-height:1.82;
}
.inner-section ul{padding-left:20px}
.info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.info-card{
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:
    radial-gradient(circle at 90% 10%, rgba(156,255,0,.11), transparent 34%),
    rgba(0,0,0,.42);
  padding:24px;
  min-height:170px;
}
.info-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(156,255,0,.35);
  color:var(--green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:18px;
  background:rgba(156,255,0,.05);
}
.pro-form{
  display:grid;
  gap:16px;
}
.pro-form input,
.pro-form textarea,
.pro-form select{
  width:100%;
  background:#070707;
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius:8px;
  padding:16px;
  outline:0;
  font-family:inherit;
}
.pro-form input:focus,
.pro-form textarea:focus,
.pro-form select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(156,255,0,.08);
}
.pro-form button,
.page-button{
  min-height:48px;
  border:0;
  border-radius:7px;
  background:linear-gradient(180deg,#b5ff15,#87db00);
  color:#071000;
  font-weight:900;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.auth-page{
  width:520px;
  max-width:calc(100% - 42px);
  margin:70px auto;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:
    radial-gradient(circle at 85% 10%, rgba(156,255,0,.13), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  padding:34px;
}
.auth-page .logo-center{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}
.auth-page .logo-center img{
  width:74px;
  height:74px;
  object-fit:contain;
}
.auth-page h1{
  font-size:44px;
  font-weight:900;
  font-style:italic;
  letter-spacing:-2px;
}
.auth-page p{
  margin:14px 0 24px;
  color:#d6d6d6;
  line-height:1.6;
}
.auth-link{
  margin-top:18px;
  color:#d5d5d5;
}
.auth-link a{color:var(--green);font-weight:900}
.error-page{
  min-height:calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.error-box{
  width:680px;
  max-width:calc(100% - 42px);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  padding:60px 40px;
  background:radial-gradient(circle at 50% 0%, rgba(156,255,0,.13), transparent 34%),#050505;
}
.error-box img{width:82px;height:82px;object-fit:contain;margin-bottom:22px}
.error-box h1{
  color:var(--green);
  font-size:96px;
  line-height:1;
  font-weight:900;
}
.error-box h2{
  font-size:34px;
  margin:10px 0 18px;
}
.error-box p{
  color:#d0d0d0;
  line-height:1.7;
  margin-bottom:26px;
}
@media(max-width:1180px){
  .inner-main{max-width:calc(100% - 32px)}
}
@media(max-width:900px){
  .inner-grid{grid-template-columns:1fr}
  .inner-sidebar{position:static}
  .info-grid{grid-template-columns:1fr}
  .inner-hero{padding:36px 28px}
  .inner-hero h1{font-size:46px}
}


/* ===== FIREBASE AUTH FORMS ===== */
.wide-auth{width:680px}
.check-row{display:flex;gap:12px;align-items:flex-start;color:#d6d6d6;font-size:13px;line-height:1.55}
.check-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--green)}
.check-row a{color:var(--green);font-weight:800}
.form-message{min-height:22px;font-size:13px;font-weight:800}
.form-message.info{color:#dcdcdc}
.form-message.success{color:var(--green)}
.form-message.error{color:#ff5b5b}
.auth-page textarea{resize:vertical}