/* ============================================================
   NETFLIX CLONE — style.css
   ============================================================ */
   :root{
    --black: #000000;
    --near-black: #141414;
    --panel: #181818;
    --red: #E50914;
    --red-dark: #B0060F;
    --gray-text: #b3b3b3;
    --line: rgba(255,255,255,.15);
    --ease: cubic-bezier(.4,0,.2,1);
    --font-display: "Bebas Neue", sans-serif;
    --font-body: "Inter", sans-serif;
  }
  
  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0; background: var(--black); color:#fff; font-family: var(--font-body);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family: inherit; cursor:pointer; }
  h1,h2{ font-family: var(--font-display); letter-spacing: .01em; margin:0; font-weight:400; }
  p{ margin:0; }
  
  .brand{ font-family: var(--font-display); font-size: 32px; color: var(--red); letter-spacing: .02em; }
  .brand--small{ font-size: 26px; }
  
  .btn{ border:none; border-radius: 4px; font-family: var(--font-body); font-weight:600; cursor:pointer; transition: background .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease); }
  .btn--red{ background: var(--red); color:#fff; padding: 8px 18px; font-size:15px; }
  .btn--red:hover{ background: var(--red-dark); }
  .btn--full{ width:100%; padding: 13px; font-size: 16px; margin-top: 8px; }
  .btn--cta{ background: var(--red); color:#fff; padding: 16px 22px; font-size: 20px; display:flex; align-items:center; gap:8px; }
  .btn--cta:hover{ background: var(--red-dark); }
  .btn--cta span{ font-size: 26px; }
  .btn--white{ background:#fff; color:#000; padding: 10px 24px; font-size: 16px; display:inline-flex; align-items:center; gap:8px; }
  .btn--white:hover{ background: rgba(255,255,255,.75); }
  .btn--gray{ background: rgba(109,109,110,.7); color:#fff; padding: 10px 24px; font-size: 16px; display:inline-flex; align-items:center; gap:8px; }
  .btn--gray:hover{ background: rgba(109,109,110,.45); }
  
  /* ============================================================
     LOADER
     ============================================================ */
  .loader{
    position: fixed; inset:0; z-index: 999; background:#000;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
  }
  .loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .loader__logo{ font-family: var(--font-display); color: var(--red); font-size: 54px; animation: loaderPulse 1s ease-in-out infinite; }
  @keyframes loaderPulse{ 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.15); opacity:.55; } }
  
  /* ============================================================
     LANDING HEADER
     ============================================================ */
  .landing-header{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 4%; transition: background .35s var(--ease);
  }
  .landing-header.is-scrolled{ background: var(--near-black); }
  .landing-header__right{ display:flex; align-items:center; gap: 14px; }
  
  .lang-select select{
    background: rgba(0,0,0,.6); color:#fff; border: 1px solid #555; border-radius: 3px; padding: 7px 10px; font-size: 13px;
  }
  
  /* ============================================================
     HERO
     ============================================================ */
  .hero{
    position: relative; min-height: 95vh; display:flex; align-items:center; justify-content:center; text-align:center;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.4) 60%, #000 100%),
                url("https://picsum.photos/seed/heroshow/1600/900") center/cover no-repeat;
    padding: 0 20px;
  }
  .hero__overlay{ position:absolute; inset:0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.7) 100%); }
  .hero__content{ position:relative; max-width: 720px; z-index:1; }
  .hero__content h1{ font-size: clamp(30px, 6vw, 56px); font-weight: 800; font-family: var(--font-body); line-height: 1.15; }
  .hero__sub{ font-size: clamp(18px,3vw,26px); margin-top: 18px; font-weight:600; }
  .hero__sub2{ font-size: clamp(14px,2vw,17px); margin-top: 14px; color:#e5e5e5; }
  
  .email-form{ display:flex; gap: 10px; justify-content:center; margin-top: 22px; flex-wrap:wrap; }
  .email-form--center{ margin-top: 26px; }
  .email-form__field{ position: relative; }
  .email-form__field input{
    width: 320px; max-width: 60vw; padding: 17px 12px 8px; background: rgba(0,0,0,.55); border: 1px solid #767676; border-radius: 3px;
    color:#fff; font-size: 15px; outline:none; transition: border-color .2s var(--ease);
  }
  .email-form__field input:focus{ border-color:#fff; }
  .email-form__field label{
    position:absolute; left: 12px; top: 15px; color: #8c8c8c; font-size: 15px; pointer-events:none; transition: all .2s var(--ease);
  }
  .email-form__field input:focus + label, .email-form__field input:not(:placeholder-shown) + label{
    top: 5px; font-size: 11px; color: #b3b3b3;
  }
  .email-form__field--dark input{ width: 100%; max-width:none; background:#333; border: none; }
  .email-error{ color: #ff6b6b; margin-top: 10px; font-size: 14px; min-height: 18px; }
  
  .divider{ height: 8px; background: #000; border-top: 8px solid #232323; }
  
  /* ============================================================
     FEATURE SECTIONS
     ============================================================ */
  .feature{
    background: var(--near-black);
    padding: clamp(50px,8vw,110px) 6%;
    display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; max-width: 1200px; margin: 0 auto;
  }
  .feature--reverse{ direction: rtl; }
  .feature--reverse > *{ direction: ltr; }
  @media (max-width: 820px){ .feature{ grid-template-columns: 1fr; text-align:center; } .feature--reverse{ direction:ltr; } }
  
  .feature__text h2{ font-family: var(--font-body); font-weight:800; font-size: clamp(28px,4vw,44px); line-height:1.15; }
  .feature__text p{ font-size: clamp(16px,2vw,20px); color:#e5e5e5; margin-top: 14px; }
  
  .feature__media{ position:relative; }
  .feature__bg{ border-radius: 8px; width:100%; }
  .feature__glow{ position:absolute; inset:-15%; background: radial-gradient(circle, rgba(229,9,20,.25), transparent 65%); z-index:-1; }
  
  .feature__inset{
    position:absolute; left: 50%; top: 62%; transform: translate(-50%,-50%); width: 62%;
    border: 3px solid #000; border-radius: 6px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.6);
    background: #000 url("https://picsum.photos/seed/insetplayer/500/280") center/cover;
    aspect-ratio: 16/9;
  }
  .feature__inset-shine{ position:absolute; inset:0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); animation: shine 3.5s ease-in-out infinite; }
  @keyframes shine{ 0%{ transform: translateX(-120%); } 60%,100%{ transform: translateX(120%); } }
  .feature__inset-video{ display:none; }
  
  .download-card{
    position:absolute; left: 50%; bottom: -22px; transform: translateX(-50%); width: 82%;
    background: #000; border: 1px solid #333; border-radius: 8px; padding: 12px 16px; display:flex; align-items:center; gap: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
  }
  .download-card img{ width: 50px; height:50px; border-radius: 4px; object-fit:cover; }
  .download-card__info{ flex:1; text-align:left; }
  .download-card__info p{ font-size:15px; font-weight:600; }
  .download-card__info span{ font-size: 12px; color: #4da6ff; }
  .download-card__bar{ height: 4px; background: #333; border-radius: 3px; margin-top: 6px; overflow:hidden; }
  .download-card__bar i{ display:block; height:100%; width:0%; background: #4da6ff; transition: width 2.4s linear; }
  
  .device-orbit{ position:relative; width:100%; aspect-ratio:16/9; }
  .device-orbit__icon{ position:absolute; font-size: 34px; background:#000; border:1px solid #333; border-radius: 50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(0,0,0,.5); animation: floaty 4s ease-in-out infinite; }
  .device-orbit__icon--1{ top: 6%; left: 4%; animation-delay: 0s; }
  .device-orbit__icon--2{ top: 60%; left: 0%; animation-delay: .5s; }
  .device-orbit__icon--3{ top: 8%; right: 2%; animation-delay: 1s; }
  .device-orbit__icon--4{ bottom: 4%; right: 8%; animation-delay: 1.5s; }
  @keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
  
  /* ============================================================
     REVEAL ON SCROLL
     ============================================================ */
  .reveal{ opacity:0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-visible{ opacity:1; transform: translateY(0); }
  
  /* ============================================================
     FAQ
     ============================================================ */
  .faq{ background: var(--near-black); padding: clamp(50px,8vw,90px) 6%; text-align:center; }
  .faq h2{ font-family: var(--font-body); font-weight:800; font-size: clamp(28px,4vw,44px); margin-bottom: 30px; }
  .accordion{ max-width: 800px; margin: 0 auto; display:flex; flex-direction:column; gap: 2px; }
  .accordion__item{ background: #2d2d2d; }
  .accordion__trigger{
    width:100%; text-align:left; background:none; border:none; color:#fff; padding: 20px 24px; font-size: clamp(16px,2vw,24px);
    display:flex; justify-content:space-between; align-items:center; transition: background .2s var(--ease);
  }
  .accordion__trigger:hover{ background:#3d3d3d; }
  .accordion__trigger span{ font-size: 30px; font-weight:300; transition: transform .3s var(--ease); }
  .accordion__item.is-open .accordion__trigger span{ transform: rotate(45deg); }
  .accordion__panel{ max-height:0; overflow:hidden; background:#2d2d2d; transition: max-height .4s var(--ease); text-align:left; }
  .accordion__panel p{ padding: 0 24px 24px; font-size: clamp(15px,1.6vw,20px); color: #e5e5e5; }
  
  /* ============================================================
     FOOTER (landing)
     ============================================================ */
  .landing-footer{ background: var(--near-black); padding: 60px 6%; color: var(--gray-text); }
  .landing-footer__q{ font-size: clamp(16px,2vw,20px); color:#fff; margin-bottom: 30px; }
  .landing-footer__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; max-width: 900px; }
  .landing-footer__grid div{ display:flex; flex-direction:column; gap: 12px; }
  .landing-footer__grid a{ font-size: 14px; }
  .landing-footer__grid a:hover{ text-decoration: underline; }
  @media (max-width: 700px){ .landing-footer__grid{ grid-template-columns: repeat(2,1fr); } }
  .landing-footer .lang-select{ margin-top: 30px; }
  .landing-footer__copy{ margin-top: 30px; font-size: 12.5px; max-width: 700px; line-height:1.6; }
  
  /* ============================================================
     MODALS (sign-in + details)
     ============================================================ */
  .modal-backdrop{
    position: fixed; inset:0; z-index: 200; background: rgba(0,0,0,.7);
    display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .modal-backdrop.is-open{ opacity:1; visibility:visible; }
  .modal{
    background:#000; padding: 60px 68px; border-radius: 4px; width: 440px; max-width: 92vw; position:relative;
    transform: scale(.92); transition: transform .3s var(--ease);
  }
  .modal-backdrop.is-open .modal{ transform: scale(1); }
  .modal h2{ font-family: var(--font-body); font-weight:700; font-size: 32px; margin-bottom: 28px; }
  .modal__close{ position:absolute; top: 16px; right: 16px; background:none; border:none; color:#fff; font-size: 28px; line-height:1; }
  .modal__hint{ margin-top: 16px; font-size: 13px; color: #8c8c8c; }
  .modal form{ display:flex; flex-direction:column; gap: 16px; }
  
  .modal--details{ width: 780px; padding:0; overflow:hidden; max-height: 88vh; overflow-y:auto; }
  .modal--details .modal__close{ background: rgba(0,0,0,.6); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; z-index:5; }
  .modal__hero{ position:relative; aspect-ratio: 16/8; }
  .modal__hero img{ width:100%; height:100%; object-fit:cover; }
  .modal__hero-fade{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, #000 100%); }
  .modal__hero h2{ position:absolute; left: 40px; bottom: 90px; font-family: var(--font-display); font-size: 42px; }
  .modal__hero-buttons{ position:absolute; left: 40px; bottom: 28px; display:flex; gap: 12px; align-items:center; }
  .icon-circle{ width: 40px; height:40px; border-radius:50%; border: 1.5px solid #999; background: rgba(42,42,42,.6); color:#fff; font-size: 18px; display:flex; align-items:center; justify-content:center; transition: border-color .2s var(--ease); }
  .icon-circle:hover{ border-color:#fff; }
  .icon-circle.is-added{ background:#fff; color:#000; border-color:#fff; }
  .modal__body{ display:grid; grid-template-columns: 2fr 1fr; gap: 30px; padding: 24px 40px 40px; }
  @media (max-width: 640px){ .modal__body{ grid-template-columns: 1fr; } .modal__hero h2{ font-size: 28px; bottom: 70px; left: 20px; } .modal__hero-buttons{ left:20px; } .modal{ padding: 50px 24px; } }
  .modal__body-left p{ margin-bottom: 16px; font-size: 15px; color: #d2d2d2; line-height:1.6; }
  .match{ color: #46d369; font-weight:700; margin-right: 10px; }
  .age-tag{ border: 1px solid #666; padding: 1px 6px; font-size: 12px; margin: 0 6px; }
  .modal__body-right p{ font-size: 13px; color: #999; margin-bottom: 10px; }
  .modal__body-right span:first-child{ color:#777; }
  .modal__body-right span:last-child{ color: #d2d2d2; }
  
  /* ============================================================
     BROWSE HEADER
     ============================================================ */
  #browseScreen{ display:none; }
  #browseScreen.is-active{ display:block; }
  
  .browse-header{
    position: fixed; top:0; left:0; right:0; z-index: 80;
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 4%; background: linear-gradient(180deg, rgba(0,0,0,.8), transparent);
    transition: background .35s var(--ease);
  }
  .browse-header.is-scrolled{ background: var(--near-black); }
  .browse-header__left{ display:flex; align-items:center; gap: 30px; }
  .browse-nav{ display:flex; gap: 20px; font-size: 14px; }
  .browse-nav a{ color: #e5e5e5; transition: color .2s var(--ease); padding-bottom:2px; }
  .browse-nav a:hover, .browse-nav a.is-active{ color:#fff; font-weight:700; }
  @media (max-width: 800px){ .browse-nav{ display:none; } }
  
  .browse-header__right{ display:flex; align-items:center; gap: 20px; }
  .icon-btn{ cursor:pointer; font-size: 18px; }
  
  .search{ display:flex; align-items:center; }
  .search__icon{ background:none; border:none; color:#fff; font-size: 17px; }
  .search input{
    width:0; opacity:0; padding: 0; border: 1px solid #fff; background: rgba(0,0,0,.75); color:#fff; margin-left:0;
    transition: width .3s var(--ease), opacity .3s var(--ease), padding .3s var(--ease), margin .3s var(--ease);
    font-size: 14px; height: 34px;
  }
  .search.is-open input{ width: 200px; opacity:1; padding: 0 10px; margin-left: 8px; }
  
  .profile{ position:relative; }
  .profile__trigger{ display:flex; align-items:center; gap: 6px; background:none; border:none; }
  .profile__trigger img{ width: 32px; height:32px; border-radius: 4px; }
  .caret{ font-size: 11px; color:#fff; transition: transform .25s var(--ease); }
  .profile.is-open .caret{ transform: rotate(180deg); }
  .profile__dropdown{
    position:absolute; top: 46px; right:0; background: rgba(0,0,0,.92); border: 1px solid #333; width: 200px; padding: 10px 0;
    opacity:0; visibility:hidden; transform: translateY(-8px); transition: all .25s var(--ease);
  }
  .profile.is-open .profile__dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
  .profile__dropdown a{ display:flex; align-items:center; gap: 10px; padding: 8px 16px; font-size: 13px; }
  .profile__dropdown a:hover{ text-decoration: underline; }
  .profile__dropdown img{ width: 24px; height:24px; border-radius: 4px; }
  .profile__dropdown hr{ border-color: #333; margin: 8px 0; }
  
  /* ============================================================
     BANNER
     ============================================================ */
  .banner{
    position:relative; height: 88vh; min-height: 480px;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 50%), url("https://picsum.photos/seed/fracturedsky/1600/900") center/cover no-repeat;
    display:flex; align-items:flex-end;
  }
  .banner__fade{ position:absolute; left:0; right:0; bottom:0; height: 40%; background: linear-gradient(180deg, transparent, #000 95%); }
  .banner__content{ position:relative; z-index:1; padding: 0 4% 8%; max-width: 620px; }
  .banner__original{ display:flex; align-items:center; gap: 8px; font-size: 13px; font-weight:700; letter-spacing: .04em; margin-bottom: 10px; }
  .banner__original::before{ content:"N"; background:var(--red); font-family: var(--font-display); padding: 0 6px; border-radius:2px; }
  .banner__title{ font-size: clamp(38px, 7vw, 76px); margin-bottom: 16px; text-shadow: 0 4px 18px rgba(0,0,0,.6); }
  .banner__desc{ font-size: clamp(14px,1.8vw,18px); color:#e5e5e5; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
  .banner__buttons{ display:flex; gap: 12px; }
  .mute-btn{ position:absolute; right: 4%; bottom: 12%; width: 42px; height: 42px; border-radius:50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(0,0,0,.4); color:#fff; font-size: 18px; z-index:1; }
  
  /* ============================================================
     ROWS / CAROUSELS
     ============================================================ */
  .rows{ position:relative; margin-top: -80px; z-index: 2; padding-bottom: 60px; }
  .row{ margin-bottom: 40px; }
  .row__title{ font-size: clamp(16px,1.8vw,22px); font-weight:700; padding: 0 4% 12px; }
  .row__viewport{ position:relative; }
  .row__track{ display:flex; gap: 6px; padding: 0 4%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
  .row__track::-webkit-scrollbar{ display:none; }
  .row__arrow{
    position:absolute; top:0; bottom:0; width: 4%; min-width: 40px; background: rgba(20,20,20,.5);
    display:flex; align-items:center; justify-content:center; font-size: 26px; color:#fff; opacity:0; transition: opacity .2s var(--ease); z-index:3;
  }
  .row__viewport:hover .row__arrow{ opacity:1; }
  .row__arrow--left{ left:0; }
  .row__arrow--right{ right:0; }
  
  .card{
    position:relative; flex: 0 0 auto; width: 220px; cursor:pointer; border-radius: 4px; overflow:visible;
    transition: transform .3s var(--ease), z-index 0s;
  }
  .card img{ width:100%; border-radius: 4px; aspect-ratio: 16/9; object-fit: cover; }
  .card__hover{
    position:absolute; inset:0; background: rgba(0,0,0,0); opacity:0; border-radius:4px;
    transition: opacity .25s var(--ease); display:flex; flex-direction:column; justify-content:flex-end;
  }
  .card:hover{ transform: scale(1.32) translateY(-10px); z-index: 10; }
  .card:hover .card__hover{ opacity:1; background: #181818; box-shadow: 0 16px 34px rgba(0,0,0,.7); }
  .card__hover-info{ padding: 10px 12px 14px; }
  .card__hover-buttons{ display:flex; gap: 8px; align-items:center; }
  .card__hover .icon-circle{ width: 30px; height:30px; font-size: 14px; }
  .card__hover .icon-circle--play{ background:#fff; color:#000; border-color:#fff; }
  .card__hover-meta{ font-size: 12px; margin-top: 8px; display:flex; align-items:center; gap:8px; color:#d2d2d2; }
  .card__hover-meta .match{ margin-right:0; font-size: 12px; }
  .card__hover-genres{ font-size: 11.5px; color: #999; margin-top: 4px; }
  .card--empty{ display:flex; align-items:center; justify-content:center; aspect-ratio: 16/9; background: #181818; color:#666; font-size: 14px; border: 1px dashed #333; cursor:default; }
  .card--empty:hover{ transform:none; }
  
  @media (max-width: 700px){
    .card{ width: 140px; }
    .card:hover{ transform: scale(1.12) translateY(-6px); }
  }
  
  .browse-footer{ text-align:center; padding: 30px; color:#737373; font-size: 13px; }