/* Main styles for DramaTime landing built from Figma export.
   Keeps data-node-id semantics and visual intent: dark background, gradients, masks, blurs.
*/
:root{
  --bg-dark:#010004;
  --muted:#a09ba8;
  --accent-start:#ad39e8;
  --accent-end:#3547ed;
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.05);
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{background:var(--bg-dark);color:#fff}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.page {

            background-image: url('../image/bj.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position-x: left;
}
/* Navbar */
.navbar{position:relative;padding:24px 0;z-index:40}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.icon{position:relative;width:40px;height:40px}
.icon-bg{position:absolute;inset:0;border-radius:10.667px;background:#d9d9d9;border:0.533px solid #ad39e8}
.icon-mask img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brand-title{font-weight:700;font-style:italic;font-size:18px;background:linear-gradient(132deg,#aacfef 8.8%,#e0afff 49.5%,#877dfd 88.7%);-webkit-background-clip:text;background-clip:text;color:transparent}

.nav-links{display:flex;gap:40px;align-items:center}
.nav-link{color:#d1d5db;text-decoration:none;font-size:16px}
.nav-link.active{color:#fff}

.btn-download{background:linear-gradient(90deg,var(--accent-start),var(--accent-end));border-radius:9999px;padding:10px 24px;border:none;color:#fff;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn-download .btn-icon img{width:16px;height:16px}

/* Background layering sits behind content */
.bg-root{position:absolute;left:0;right:0;top:0;height:100vh;overflow:hidden;z-index:0}
.bg-container{position:absolute;left:0.5px;top:0;width:1920px;height:1050.667px;pointer-events:none}
.layer{position:absolute;display:flex;align-items:center;justify-content:center}
.layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.layer-1{left:-2074.67px;top:-3429.33px;width:4869.333px;height:8661.333px;transform:rotate(180deg);}
.layer-1 img{filter:blur(120px);opacity:0.6;mask-image:var(--mask-url);mask-repeat:no-repeat;mask-position:2074.667px 3429.333px;mask-size:1920px 1050.667px;-webkit-mask-image:var(--mask-url);-webkit-mask-repeat:no-repeat;-webkit-mask-position:2074.667px 3429.333px;-webkit-mask-size:1920px 1050.667px}
.layer-2{left:calc(50% + 236.67px);top:-294.1px;width:2101.139px;height:2080.346px;transform:translateX(-50%) rotate(163.46deg)}
.layer-2 img{width:1697.008px;height:1666.153px;filter:blur(13.75px);mix-blend-mode:soft-light;mask-image:var(--mask-url);mask-repeat:no-repeat;mask-position:-146.096px 294.096px;mask-size:1920px 1050.667px;-webkit-mask-image:var(--mask-url);-webkit-mask-repeat:no-repeat;-webkit-mask-position:-146.096px 294.096px;-webkit-mask-size:1920px 1050.667px}

/* Hero */
.hero{position:relative;z-index:10;padding-top:120px;padding-bottom:100px}
.hero-inner{display:flex;gap:40px;align-items:center}
.hero-left{flex:1;max-width:840px}
.hero-badge{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.badge-box{width:150px;height:150px;background:#d9d9d9;border:2px solid #ad39e8;border-radius:40px}
.badge-mask img{width:150px;height:150px;object-fit:cover}

.hero-title{font-weight:800;font-size:56px;line-height:1;margin:0 0 16px}
.hero-title .accent{background:linear-gradient(90deg,var(--accent-start),var(--accent-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:#dce1ea;font-size:20px;max-width:672px}
.tags{display:flex;gap:16px;color:#dce1ea;margin:20px 0}
.store-cta img{height:56px}

/* Hero mockup */
.hero-mockup{flex:1;display:flex;align-items:center;justify-content:center}
.mockup-frame{width:661px;height:auto;position:relative}
.mockup.phone{}
.mockup.phone.left{left:0;top:59.41px}
.mockup.phone.right{left:276.03px;top:165.19px}
.phone-screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* explicit height so the overlay and image fill the mockup reliably */
  height: 550px;
  min-height: 320px;
  border-radius: 20px; /* optional phone corner radius */
}

.phone-screen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 85%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
  z-index: 1;
}

.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* stronger visible gradient: fully transparent upper area, darker toward bottom */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.95) 100%);
}

.details-image {
  position: relative;
  overflow: hidden;
  width: 500px;
  /* explicit height so the overlay and image fill the mockup reliably */
  height: 850px;
  min-height: 800px;
  border-radius: 20px; 
  margin-right: 150px;
}

.details-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.details-image::after {
  content: "";
  position: absolute;
  inset: 0; 
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.90) 100%);
}

/* Feature section */
.feature-section{padding:120px 0 0}
.features-inner{display:block}
.feature-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.feature-card{background:var(--glass);border:1px solid var(--glass-border);padding:33px;border-radius:16px}
.feature-icon{width:120px;height:120px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:linear-gradient(180deg,rgba(169,57,231,0.2),rgba(56,71,237,0));border:1.875px solid #ad39e8;margin-bottom:16px}
.feature-card h3{margin:0 0 8px}
.feature-card p{margin:0;color:var(--muted);font-size:16px}

/* Details Content styles */
.details-content{flex:1;display:flex;align-items:center;justify-content:center}
.details-inner{max-width:520px}
.details-heading h2{font-size:36px;line-height:1.2;margin:0 0 12px}
.details-heading .accent{background:linear-gradient(90deg,var(--accent-start),var(--accent-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.details-sub{color:#a09ba8;margin-bottom:24px}

.detail-list{display:flex;flex-direction:column;gap:16px}
.detail-item{display:flex;align-items:center;gap:16px;background:var(--glass);border:1px solid var(--glass-border);padding:16px;border-radius:12px}
.detail-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,rgba(169,57,231,0.12),rgba(56,71,237,0.06));display:flex;align-items:center;justify-content:center}
.detail-icon img{width:28px;height:28px}
.detail-title{font-weight:600}
.detail-desc{color:var(--muted);font-size:14px}

/* Footer */
.site-footer{background:#090911;border-top:1.5px solid rgba(255,255,255,0.1);padding-top:101.5px}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;padding:0 24px 120px}
.footer-brand{display:flex;gap:12px;align-items:center}
.icon-sm{width:40px;height:40px;border-radius:10.667px;background:#d9d9d9;border:0.533px solid #ad39e8;overflow:hidden}
.icon-sm img{width:100%;height:100%;object-fit:cover}
.brand-name{font-weight:700;background:linear-gradient(120deg,#aacfef 8.8%,#e0afff 49.5%,#877dfd 88.7%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-desc{color:var(--muted);max-width:307px;opacity: 0.7;background:linear-gradient(120deg,#aacfef 8.8%,#e0afff 49.5%,#877dfd 88.7%);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-contacts{display:flex;gap:24px}
.contact-item{display:flex;align-items:center;gap:12px}
.contact-icon img{width:24px;height:24px}
.contact-text{color:#d1d5db}

/* Responsive */
@media (max-width:1000px){
  .hero-inner{flex-direction:column-reverse}
  .hero-mockup{order:-1;margin-bottom:40px}
  .feature-columns{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:24px}
}

@media (min-width:1001px){
  .hero-inner{align-items:flex-start}
  .hero-left{flex:0 0 50%}
  .hero-mockup{flex:0 0 40%}
  .details-content{flex:0 0 45%}
}