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

 :root{
    --navy:#052048;
    --navy-2:#0a2f66;
    --blue:#1463c9;
    --blue-light:#4f9cff;
    --gold:#f3b42a;
    --gold-2:#d99a12;
    --cream:#fff8e9;
    --milk:#ffffff;
    --ink:#eaf2ff;

    --fs-eyebrow: clamp(0.68rem, 0.4vw + 0.6rem, 0.85rem);
    --fs-hero: clamp(2.4rem, 5vw + 1.4rem, 5.6rem);
    --fs-h2: clamp(1.7rem, 2.6vw + 1rem, 3.1rem);
    --fs-h3: clamp(1.1rem, 1vw + 0.8rem, 1.5rem);
    --fs-body: clamp(0.95rem, 0.35vw + 0.85rem, 1.15rem);
    --fs-small: clamp(0.8rem, 0.2vw + 0.75rem, 0.95rem);

    --pad-side: clamp(1.25rem, 6vw, 6.5rem);
  }

  *{ box-sizing:border-box; }
  html{ 
    scroll-behavior:smooth; 
    width: 100%;
    height: 115%;
  }
  body{
    margin:0;
    font-family:'Inter', sans-serif;
    color:var(--ink);
    overflow-x:hidden;
    width: 100%;
    height: 115%;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }

  h1,h2,h3,.brandword{
    font-family:'Baloo 2', sans-serif;
    margin:0;
    line-height:1.05;
  }

  a{ color:inherit; }

  /* ---------- Background video ---------- */
  .bg-video{
    position:fixed;
    inset:0;
    width: 100%;
    height: 115%;
    object-fit:cover;
    z-index:-2;
    background-size: cover;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .bg-scrim{
    
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    z-index:-1;
    background-size: cover;
    background:
      linear-gradient(100deg,
        rgba(3,18,42,0.94) 0%,
        rgba(4,25,58,0.88) 26%,
        rgba(5,32,72,0.55) 48%,
        rgba(5,32,72,0.18) 66%,
        rgba(5,32,72,0.05) 115%),
      linear-gradient(180deg, rgba(2,12,32,0.55) 0%, rgba(2,12,32,0.05) 16%, rgba(2,12,32,0.05) 80%, rgba(2,12,32,0.65) 115%);
  }

  /* ---------- Progress bar ---------- */
  .scrub-progress{
    position:fixed;
    top:0; left:0;
    height:3px;
    width:0%;
    background:linear-gradient(90deg, var(--gold), var(--blue-light));
    z-index:50;
    transition:width 60ms linear;
  }

  /* ---------- Top bar ---------- */
  header.topbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.7rem clamp(1rem, 4vw, 3rem);
    background:linear-gradient(180deg, rgba(3,15,38,0.75), rgba(3,15,38,0));
    /* backdrop-filter:blur(2px); */
  }
  .brand{
    display:flex;
    align-items:center;
    gap:0.6rem;
    text-decoration:none;
  }
  .brand img{
    height:clamp(84px, 5vw, 46px);
    width:auto;
    display:block;
    position: absolute;
    top: 10%;
  }
  .brand span{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:clamp(0.95rem, 1.2vw, 1.2rem);
    color:var(--milk);
    letter-spacing:0.02em;
  }
  nav.mainnav{
    display:flex;
    gap:clamp(0.8rem, 2vw, 1.8rem);
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  nav.mainnav a{
    text-decoration:none;
    color:var(--ink);
    font-size:var(--fs-small);
    font-weight:600;
    opacity:0.85;
    padding:0.3rem 0.1rem;
    border-bottom:2px solid transparent;
    transition:opacity .2s, border-color .2s;
    white-space:nowrap;
  }
  nav.mainnav a:hover{ opacity:1; border-color:var(--gold); }

  /* ---------- Layout helpers ---------- */
  main{ position:relative; z-index:1; }
  section{
    min-height:100svh;
    display:flex;
    align-items:center;
    padding: clamp(6rem,10vw,8rem) var(--pad-side) 4rem;
  }
  .content{
    max-width:800px;
    width:100%;
    text-align:left;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    border:1.5px solid var(--gold);
    border-radius:999px;
    padding:0.35em 1em;
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold);
    background:rgba(5,32,72,0.35);
    margin-bottom:1.1em;
  }
  .eyebrow::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--gold);
    display:inline-block;
  }

  p.lead{
    font-size:var(--fs-body);
    line-height:1.65;
    color:var(--ink);
    opacity:0.92;
    max-width:56ch;
    margin:1.1em 0 0;
  }

  .panel{
    background:rgba(4,22,52,0.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-left:4px solid var(--gold);
    border-radius:0 20px 20px 0;
    padding:clamp(1.4rem,3vw,2.6rem);
  }

  /* ---------- Hero ---------- */
  .hero{
    padding-top:clamp(7rem, 14vh, 10rem);
  }
  .hero h1{
    font-size:var(--fs-hero);
    color:var(--milk);
    text-shadow:0 6px 30px rgba(0,0,0,0.35);
  }
  .hero h1 .accent{
    color:var(--gold);
    display:block;
  }
  .hero .lead{
    max-width:44ch;
  }
  .hero-cta{
    display:flex;
    gap:1rem;
    margin-top:2rem;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.85em 1.6em;
    border-radius:999px;
    font-weight:700;
    font-size:var(--fs-small);
    text-decoration:none;
    border:2px solid transparent;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn.primary{
    background:linear-gradient(135deg, var(--gold), var(--gold-2));
    color:var(--navy);
    box-shadow:0 10px 26px rgba(243,180,42,0.28);
  }
  .btn.ghost{
    border-color:rgba(255,255,255,0.55);
    color:var(--milk);
  }

  .scroll-cue{
    position:absolute;
    left:var(--pad-side);
    bottom:2.2rem;
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:var(--fs-small);
    color:var(--ink);
    opacity:0.8;
  }
  .scroll-cue .stick{
    width:1px; height:34px;
    background:linear-gradient(var(--gold), transparent);
    position:relative;
    overflow:hidden;
  }
  .scroll-cue .stick::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:10px;
    background:var(--gold);
    animation:cue 1.8s infinite ease-in-out;
  }
  @keyframes cue{
    0%{ transform:translateY(-10px); opacity:0; }
    40%{ opacity:1; }
    100%{ transform:translateY(34px); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-cue .stick::after{ animation:none; opacity:0.6; }
  }

  /* ---------- Stats row (about) ---------- */
  .stats{
    display:flex;
    gap:clamp(1.2rem, 4vw, 2.6rem);
    flex-wrap:wrap;
    margin-top:2rem;
  }
  .stat{ min-width:110px; }
  .stat b{
    display:block;
    font-family:'Baloo 2', sans-serif;
    font-size:clamp(1.5rem, 2vw + 0.6rem, 2.4rem);
    color:var(--gold);
  }
  .stat span{
    font-size:var(--fs-small);
    opacity:0.85;
  }

  /* ---------- Products list ---------- */
  .prod-list{
    list-style:none;
    margin:1.6rem 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
  }
  .prod-list li{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    padding:1.1rem 0;
    border-bottom:1px solid rgba(255,255,255,0.14);
  }
  .prod-list li:first-child{ padding-top:0; }
  .prod-list li:last-child{ border-bottom:none; }
  .prod-icon{
    flex:0 0 auto;
    width:clamp(38px,4vw,48px);
    height:clamp(38px,4vw,48px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--blue-light), var(--blue) 70%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25);
  }
  .prod-text h3{
    font-size:var(--fs-h3);
    color:var(--milk);
  }
  .prod-text p{
    margin:0.35em 0 0;
    font-size:var(--fs-small);
    opacity:0.85;
    line-height:1.5;
  }

  /* ---------- Process steps ---------- */
  .steps{
    counter-reset:step;
    margin:1.8rem 0 0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:1.4rem;
  }
  .steps li{
    display:flex;
    gap:1rem;
    align-items:flex-start;
  }
  .steps li::before{
    counter-increment:step;
    content:counter(step);
    flex:0 0 auto;
    width:clamp(34px,3.4vw,42px);
    height:clamp(34px,3.4vw,42px);
    border-radius:50%;
    border:2px solid var(--gold);
    color:var(--gold);
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-small);
  }
  .step-text h3{
    font-size:var(--fs-h3);
    color:var(--milk);
  }
  .step-text p{
    margin:0.3em 0 0;
    font-size:var(--fs-small);
    opacity:0.85;
    line-height:1.5;
  }

  /* ---------- CTA / contact ---------- */
  .contact-list{
    margin:1.6rem 0 0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:0.7rem;
    font-size:var(--fs-body);
  }
  .contact-list li{ display:flex; gap:0.7rem; align-items:center; }
  .contact-list b{ color:var(--gold); font-family:'Baloo 2',sans-serif; }

  footer{
    position:relative;
    z-index:1;
    padding:2rem var(--pad-side) 2.4rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    font-size:var(--fs-small);
    opacity:0.75;
    border-top:1px solid rgba(255,255,255,0.15);
    background:rgba(3,15,38,0.55);
  }

  /* ---------- Landing product horizontal scroll ---------- */
  .landing-products-wrap{
    max-width:100vw !important;
    width:clamp(320px, 90vw, 900px);
  }
  .lp-track-outer{
    margin-top:1.6rem;
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) rgba(255,255,255,0.08);
    padding-bottom:10px;
    cursor:grab;
  }
  .lp-track-outer:active{ cursor:grabbing; }
  .lp-track-outer::-webkit-scrollbar{ height:4px; }
  .lp-track-outer::-webkit-scrollbar-track{ background:rgba(255,255,255,0.06); border-radius:4px; }
  .lp-track-outer::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:4px; }
  .lp-track{
    display:flex;
    gap:14px;
    padding:4px 2px 8px;
    width:max-content;
  }
  .lp-card{
    flex:0 0 auto;
    width:180px;
    background:rgba(4,22,52,0.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    text-decoration:none;
    color:var(--ink);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .lp-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
    border-color:rgba(243,180,42,0.45);
    color:var(--ink);
  }
  .lp-card-img{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    background:rgba(5,32,72,0.55);
  }
  .lp-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
  }
  .lp-card:hover .lp-card-img img{ transform:scale(1.06); }
  .lp-badge{
    position:absolute;
    top:8px;
    left:8px;
    padding:3px 9px;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:700;
    color:#fff;
    line-height:1.3;
  }
  .lp-badge--flash-sale, .lp-badge--diskon{ background:#dc3545; }
  .lp-badge--paling-laku{ background:#1f9d55; }
  .lp-badge--new{ background:var(--blue); }
  .lp-card-body{ padding:12px 14px 14px; }
  .lp-cat{
    display:block;
    font-size:0.7rem;
    color:rgba(234,242,255,0.55);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .lp-name{
    font-family:'Baloo 2', sans-serif;
    font-size:0.92rem;
    color:var(--milk);
    margin:0 0 8px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .lp-price{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .lp-price strong{
    font-size:0.88rem;
    color:var(--gold);
    font-family:'Baloo 2', sans-serif;
  }
  .lp-price s{
    font-size:0.72rem;
    color:rgba(234,242,255,0.45);
  }
  .lp-scroll-hint{
    margin-top:10px;
    font-size:0.75rem;
    color:rgba(234,242,255,0.45);
    letter-spacing:0.04em;
  }
  @media (min-width:900px){ .lp-scroll-hint{ display:none; } }
  .splash{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:clamp(40px,7vw,90px);
    margin-top:-1px;
  }

  /* ---------- Hamburger button ---------- */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:4px;
    border-radius:8px;
    z-index:60;
  }
  .nav-toggle span{
    display:block;
    height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform .3s ease, opacity .3s ease, width .3s ease;
    transform-origin:center;
  }
  .nav-toggle span:nth-child(1){ width:24px; }
  .nav-toggle span:nth-child(2){ width:18px; }
  .nav-toggle span:nth-child(3){ width:22px; }
  /* X state */
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:24px; }
  .nav-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:24px; }

  /* ---------- Mobile drawer ---------- */
  .mobile-drawer{
    position:fixed;
    inset:0;
    z-index:55;
    display:flex;
    flex-direction:column;
    background:linear-gradient(160deg, rgba(3,15,38,0.97) 0%, rgba(5,32,72,0.97) 100%);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:5rem var(--pad-side) 2.5rem;
    gap:0.2rem;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none;
  }
  .mobile-drawer.open{
    transform:translateX(0);
    pointer-events:auto;
  }
  .mobile-drawer a{
    display:block;
    padding:1.1rem 0;
    border-bottom:1px solid rgba(255,255,255,0.1);
    font-family:'Baloo 2', sans-serif;
    font-size:clamp(1.4rem, 5vw, 2rem);
    font-weight:700;
    color:var(--ink);
    text-decoration:none;
    opacity:0;
    transform:translateX(28px);
    transition:color .2s, opacity .35s ease, transform .35s ease;
  }
  .mobile-drawer.open a{
    opacity:1;
    transform:translateX(0);
  }
  /* stagger */
  .mobile-drawer a:nth-child(1){ transition-delay:.05s; }
  .mobile-drawer a:nth-child(2){ transition-delay:.10s; }
  .mobile-drawer a:nth-child(3){ transition-delay:.15s; }
  .mobile-drawer a:nth-child(4){ transition-delay:.20s; }
  .mobile-drawer a:hover{ color:var(--gold); }

  @media (max-width:560px){
    nav.mainnav{ display:none; }
    .nav-toggle{ display:flex; }
    .stats{ gap:1rem; }
  }


    /* Desktop-First Approach: Targets phones and small devices */
  @media (max-width: 767px) {

    .bg-video-landscape{
      display: none !important;
    }

    .bg-video-potrait{
      display: block !important;
    }
  }

  /* Mobile-First Approach: Default CSS is for mobile, rules apply to larger screens */
  @media (min-width: 768px) {


    .bg-video-landscape{
      display: block !important;
    }

    .bg-video-potrait{
      display: none !important;
    }
  }

  .d-none {
  display: none !important;
}