:root{
      --bg:#f6f6f4;
      --bg-2:#ecece8;
      --text:#131313;
      --muted:#6d6d6d;
      --line:rgba(0,0,0,.08);
      --card:#ffffff;
      --accent:#b69462;
      --accent-deep:#8a683f;
      --shadow:0 18px 45px rgba(0,0,0,.10);
      --shadow-lg:0 28px 80px rgba(0,0,0,.18);
      --radius:24px;
      --container:1200px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
   body{
  margin:0;
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  background-color:#f6f6f4;
  overflow-x:hidden;
  position:relative;
}

/* soft square chessboard like your reference */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    conic-gradient(
      from 90deg,
      #f3f3f3 0deg 90deg,
      #ebebeb 90deg 180deg,
      #f3f3f3 180deg 270deg,
      #ebebeb 270deg 360deg
    );
  background-size:400px 400px;
  background-position:0 0;
  opacity:1;
}

.chess-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.chess-bg::before{
  content:none;
}

.chess-piece{
  position:absolute;
  color:rgba(0,0,0,.10);
  user-select:none;
  line-height:1;
  will-change:transform, opacity;
  font-family:"Times New Roman", serif;
  text-shadow:none;
}
 .chess-piece.s1{font-size:62px}
    .chess-piece.s2{font-size:72px}
    .chess-piece.s3{font-size:84px}
.container{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  position:relative;
  z-index:1;
}
 
    @keyframes chess-float {
      0%,100% {
        transform: translateY(0) rotate(0);
        opacity: .06;
      }

      50% {
        transform: translateY(-20px) rotate(5deg);
        opacity: .12;
      }
    }

    @keyframes chess-float-reverse {
      0%,100% {
        transform: translateY(0) rotate(0);
        opacity: .05;
      }

      50% {
        transform: translateY(15px) rotate(-5deg);
        opacity: .1;
      }
    }

    @keyframes slide-knight {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      80% {
        opacity: 1;
      }

      100% {
        transform: translateX(200%);
        opacity: 0;
      }
    }

    @keyframes pulse-stock {
      0%,100% {
        opacity: 1;
      }

      50% {
        opacity: .6;
      }
    }

    @keyframes confetti-fall {
      0% {
        transform: translateY(-10px) rotate(0);
        opacity: 1;
      }

      100% {
        transform: translateY(100px) rotate(720deg);
        opacity: 0;
      }
    }

    @keyframes chess-move-1 {
      0% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(80px, 0);
      }

      50% {
        transform: translate(80px, 80px);
      }

      75% {
        transform: translate(0, 80px);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    @keyframes chess-move-2 {
      0% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(-60px, 40px);
      }

      50% {
        transform: translate(40px, 80px);
      }

      75% {
        transform: translate(60px, -40px);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    @keyframes chess-move-knight {
      0% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(40px, -80px);
      }

      50% {
        transform: translate(80px, 0);
      }

      75% {
        transform: translate(-40px, 80px);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    @keyframes chess-move-3 {
      0% {
        transform: translate(0, 0) rotate(0);
      }

      33% {
        transform: translate(100px, 50px) rotate(5deg);
      }

      66% {
        transform: translate(-50px, 100px) rotate(-5deg);
      }

      100% {
        transform: translate(0, 0) rotate(0);
      }
    }

    .animate-chess-float {
      animation: chess-float 6s ease-in-out infinite;
    }

    .animate-chess-float-reverse {
      animation: chess-float-reverse 8s ease-in-out infinite;
    }

    .animate-slide-knight {
      animation: slide-knight 4s ease-in-out;
    }

    .animate-pulse-stock {
      animation: pulse-stock 2s ease-in-out infinite;
    }

    .animate-chess-move-1 {
      animation: chess-move-1 12s ease-in-out infinite;
    }

    .animate-chess-move-2 {
      animation: chess-move-2 15s ease-in-out infinite;
    }

    .animate-chess-move-knight {
      animation: chess-move-knight 10s ease-in-out infinite;
    }

    .animate-chess-move-3 {
      animation: chess-move-3 18s ease-in-out infinite;
    }

    .container{
      width:100%;
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
      padding-left:20px;
      padding-right:20px;
      position:relative;
      z-index:1;
    }
    .section{padding:90px 0}

   .navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(7px);
  background: rgb(246 246 244 / 77%);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.nav-inner{
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: #131313;
}

.brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  font-size: 18px;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a{
  text-decoration: none;
  color: #434343;
  font-weight: 500;
}

.nav-buy-btn{
  padding: 12px 22px;
}

.menu-toggle,
.mobile-menu-close{
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #151515;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.menu-toggle svg,
.mobile-menu-close svg{
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
..menu-toggle{
  display:none;
  border:none;
  background:transparent;
  color:#151515;
  width:44px;
  height:44px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  position:relative;
}

.menu-toggle svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  position:absolute;
  transition:opacity .22s ease, transform .22s ease;
}

.menu-toggle .icon-close{
  opacity:0;
  transform:scale(.8);
}

.menu-toggle.active .icon-menu{
  opacity:0;
  transform:scale(.8);
}

.menu-toggle.active .icon-close{
  opacity:1;
  transform:scale(1);
}

.mobile-menu-overlay{
  display:none;
}

@media (max-width: 768px){
  .menu-toggle{
    display:inline-flex;
  }

  .nav-links{
    display:none;
  }

  .mobile-menu-overlay{
    position:fixed;
    inset:0;
    display:block;
    background:rgba(0,0,0,.02);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
    z-index:1000;
    padding:42px 8px 0;
  }

  .mobile-menu-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .mobile-menu-panel{
    width:100%;
    background:#f7f6f3;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:none;
    border-radius:0;
    padding:18px 22px 22px;
    transform:translateY(-8px);
    transition:transform .22s ease;
  }

  .mobile-menu-overlay.active .mobile-menu-panel{
    transform:translateY(0);
  }

  .mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:24px;
  }

  .mobile-menu-links{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .mobile-menu-links a{
    text-decoration:none;
    color:#5a5a5a;
    font-size:16px;
    font-weight:500;
  }

  .mobile-menu-links .btn{
    width:100%;
    margin-top:6px;
    padding:16px 24px;
    border-radius:999px;
  }
}
.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,.06);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 12px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.mobile-menu-overlay.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-panel{
  width: 100%;
  max-width: 380px;
  background: #f7f6f3;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  padding: 20px 22px;
  transform: translateY(-12px);
  transition: transform .25s ease;
}

.mobile-menu-overlay.active .mobile-menu-panel{
  transform: translateY(0);
}

.mobile-menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.mobile-menu-links{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mobile-menu-links a{
  text-decoration: none;
  color: #4a4a4a;
  font-size: 16px;
  font-weight: 500;
}

.mobile-menu-links .btn{
  width: 100%;
  margin-top: 4px;
}

.mobile-menu-overlay{
  display:none;
}

@media (max-width: 768px){
  .navbar{
    backdrop-filter:none;
    background:rgba(246,246,244,.96);
  }

  .nav-inner{
    min-height:74px;
    padding:0;
    align-items:center;
    flex-direction:row;
  }

  .brand{
    font-size:18px;
    gap:10px;
  }

  .brand-mark{
    width:34px;
    height:34px;
    font-size:17px;
  }

  .menu-toggle,
  .mobile-menu-close{
    display:inline-flex;
  }
  

  .nav-links{
    display:none;
  }

  .mobile-menu-overlay{
    position:fixed;
    inset:0;
    display:block;
    background:rgba(0,0,0,.02);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
    z-index:1000;
    padding: 55px 8px 0;
  }

  .mobile-menu-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .mobile-menu-panel{
    width:100%;
    background:#f7f6f3;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:none;
    border-radius:0;
    min-height:auto;
    padding:18px 22px 22px;
    transform:translateY(-8px);
    transition:transform .22s ease;
  }

  .mobile-menu-overlay.active .mobile-menu-panel{
    transform:translateY(0);
  }

  .mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
  }

  .mobile-brand{
    font-size:17px;
    gap:10px;
  }

  .mobile-brand-mark{
    width:auto;
    height:auto;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
  }

  .mobile-menu-close{
    width:36px;
    height:36px;
  }

  .mobile-menu-links{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .mobile-menu-links a{
    text-decoration:none;
    color:#5a5a5a;
    font-size:16px;
    font-weight:500;
  }

  .mobile-menu-links .btn{
    width:100%;
    margin-top:6px;
    padding:16px 24px;
    border-radius:999px;
  }
}
 
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:none;
      border-radius:999px;
      padding:15px 28px;
      text-decoration:none;
      font-weight:700;
      font-size:15px;
      transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      background:#171717;
      color:#fff;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }
    .btn-primary:hover{box-shadow:0 16px 34px rgba(0,0,0,.22)}
    .btn-outline{
      background:rgba(255,255,255,.55);
      color:#1d1d1d;
      border:1px solid rgba(0,0,0,.14);
    }
    .btn-outline:hover{background:#fff}

    .hero{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:56px;
      align-items:center;
      min-height:calc(100vh - 82px);
      padding:50px 0 70px;
    }

    .eyebrow,
    .mini-title{
      text-transform:uppercase;
      letter-spacing:.30em;
      font-size:12px;
      color:#454545;
      font-weight:700;
      margin-bottom:18px;
    }

    h1, h2, h3, h4{margin:0}

    .hero h1{
      font-family:'Playfair Display', serif;
      font-size: clamp(44px, 6.4vw, 55px);
      line-height:.95;
      letter-spacing:-.03em;
      margin-bottom:22px;
    }
    .hero h1 em{font-style:italic; color:#3a3a3a}

    .lead{
      font-size: clamp(17px, 2vw, 15px);
      color:var(--muted);
      max-width:650px;
      line-height:1.65;
      margin-bottom: 15px;
    }
    .hero-img {
        border-radius: 10px;
    }

    .tags{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:32px;
    }
    .tag{
      /* background:rgba(255,255,255,.62); */
      /* border:1px solid rgba(0,0,0,.08); */
      /* border-radius:999px; */
      padding: 6px 4px;
      color:#575757;
      font-size:14px;
      /* box-shadow:0 8px 20px rgba(0,0,0,.04); */
    }

    .hero-actions{display:flex; flex-wrap:wrap; gap:16px}

    .hero-visual{
      position:relative;
      min-height:540px;
      display:grid;
      place-items:center;
    }

    .glow{
      position:absolute;
      width:85%;
      aspect-ratio:1.15;
      background:radial-gradient(circle at 50% 50%, rgba(189,145,88,.42), rgba(33,23,11,.92) 58%, rgba(33,23,11,.12) 73%, transparent 78%);
      filter:blur(8px);
      opacity:.92;
      border-radius:36px;
      animation:pulseGlow 6s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow{
      from{transform:scale(.98)}
      to{transform:scale(1.03)}
    }

    .laptop-card{
      position:relative;
      width:min(100%, 700px);
      aspect-ratio: 1.25;
      border-radius:28px;
      background:linear-gradient(145deg, #1b1a18, #393124 46%, #151412 100%);
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      transform:perspective(1200px) rotateY(-12deg) rotateX(7deg) translateY(0);
      animation:floatLaptop 5s ease-in-out infinite;
      border:1px solid rgba(255,255,255,.08);
    }

    @keyframes floatLaptop{
      0%,100%{transform:perspective(1200px) rotateY(-12deg) rotateX(7deg) translateY(0)}
      50%{transform:perspective(1200px) rotateY(-9deg) rotateX(6deg) translateY(-10px)}
    }

    .board{
      position:absolute;
      inset:10% 12%;
      border-radius:26px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.06) 0 12.5%, rgba(0,0,0,.22) 12.5% 25%, rgba(255,255,255,.06) 25% 37.5%, rgba(0,0,0,.22) 37.5% 50%, rgba(255,255,255,.06) 50% 62.5%, rgba(0,0,0,.22) 62.5% 75%, rgba(255,255,255,.06) 75% 87.5%, rgba(0,0,0,.22) 87.5% 100%),
        linear-gradient(rgba(255,255,255,.07) 0 12.5%, rgba(0,0,0,.22) 12.5% 25%, rgba(255,255,255,.07) 25% 37.5%, rgba(0,0,0,.22) 37.5% 50%, rgba(255,255,255,.07) 50% 62.5%, rgba(0,0,0,.22) 62.5% 75%, rgba(255,255,255,.07) 75% 87.5%, rgba(0,0,0,.22) 87.5% 100%);
      background-size:100% 100%,100% 100%;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 45px rgba(0,0,0,.28);
    }

    .board::before,
    .board::after{
      content:"♜ ♞ ♝ ♛ ♚ ♝ ♞ ♜\A♟ ♟ ♟ ♟ ♟ ♟ ♟ ♟\A\A\A\A\A♙ ♙ ♙ ♙ ♙ ♙ ♙ ♙\A♖ ♘ ♗ ♕ ♔ ♗ ♘ ♖";
      white-space:pre;
      position:absolute;
      inset:10px 14px;
      color:#d7bb8f;
      font-size:clamp(18px, 1.5vw, 26px);
      line-height:1.8;
      letter-spacing:7px;
      font-family:"Times New Roman", serif;
      opacity:.92;
      text-shadow:0 0 16px rgba(214,182,130,.18);
    }

    .apple{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
      width:96px;
      height:96px;
      border-radius:50%;
      background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.05), rgba(0,0,0,.42));
      box-shadow: inset 0 0 16px rgba(255,255,255,.04), 0 0 30px rgba(0,0,0,.15);
    }

    .divider{
      display:flex;
      justify-content:center;
      gap:8px;
      margin-bottom:24px;
    }
    .divider span{
      width:14px;
      height:8px;
      border-radius:2px;
      background:#111;
      opacity:.9;
    }

    .section-head{
      text-align:center;
      max-width:860px;
      margin:0 auto 46px;
    }
    .section-head h2{
      font-family:'Playfair Display', serif;
      font-size:clamp(30px, 4.5vw, 56px);
      line-height:1.08;
      margin-bottom:14px;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:18px;
      line-height:1.7;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:20px;
    }
    .card{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(0,0,0,.08);
      border-radius:20px;
      padding:26px;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.12)}
    .card strong{display:block; margin-bottom:10px; font-size:18px}
    .card p{margin:0; color:var(--muted); line-height:1.7}

    .story{
      text-align:center;
      max-width:860px;
      margin:auto;
    }
    .story p{
      font-family:'Playfair Display', serif;
      font-size:clamp(24px, 3vw, 40px);
      line-height:1.6;
      color:#2a2a2a;
      margin: 0 0 0px;
    }
    .story p:last-child{margin-bottom:0}
    .story .muted{
      font-size:18px;
      color:var(--muted);
      font-family:'Inter',sans-serif;
      margin-top:22px;
    }

 .feature-grid-enhanced{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:48px;
  align-items:center;
}

.feature-media-wrap{
  perspective:1200px;
}

.feature-media-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg, #111, #2a241d 55%, #0f0f0f 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.18);
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .3s ease;
  border:1px solid rgba(255,255,255,.08);
}

.feature-media-card:hover{
  box-shadow:0 40px 90px rgba(0,0,0,.22);
}

.feature-media-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:28px;
  transform:translateZ(16px) scale(1);
  transition:transform .35s ease;
}

.feature-media-card:hover .feature-media-img{
  transform:translateZ(24px) scale(1.02);
}

.feature-media-glow{
  position:absolute;
  inset:auto -10% -18% -10%;
  height:40%;
  background:radial-gradient(circle at 50% 0%, rgba(182,148,98,.28), transparent 68%);
  pointer-events:none;
  opacity:.8;
  transition:opacity .3s ease;
}

.feature-media-card:hover .feature-media-glow{
  opacity:1;
}

.features-list-enhanced{
  display:grid;
  gap:16px;
}

.features-list-enhanced .feature-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap: 15px;
  padding: 11px 20px;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  overflow:hidden;
  transition:
    transform .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.features-list-enhanced .feature-item::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:100%;
  background:linear-gradient(90deg, rgba(182,148,98,0), rgba(182,148,98,.14));
  transition:width .32s ease;
}

.features-list-enhanced .feature-item::after{
  content:"";
  position:absolute;
  top:14px;
  right:0;
  width:4px;
  height:calc(100% - 28px);
  border-radius:999px;
  background:linear-gradient(180deg, #d5b17b, #9b7447);
  transform:scaleY(.2);
  transform-origin:center;
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}

.features-list-enhanced .feature-item:hover{
  transform:translateX(10px);
  background:rgba(255,255,255,.96);
  border-color:rgba(182,148,98,.28);
  box-shadow:0 16px 34px rgba(0,0,0,.09);
}

.features-list-enhanced .feature-item:hover::before{
  width:100%;
}

.features-list-enhanced .feature-item:hover::after{
  transform:scaleY(1);
  opacity:1;
}

.features-list-enhanced .feature-item:hover .feature-icon{
  transform:scale(1.06);
  box-shadow:0 10px 20px rgba(183,137,66,.22);
}

.features-list-enhanced .feature-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(145deg, #f4d097, #b78942);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:18px;
  transition:transform .28s ease, box-shadow .28s ease;
}

.features-list-enhanced .feature-content h4{
  font-size:18px;
  margin:0 0 6px;
}

.features-list-enhanced .feature-content p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

@media (max-width: 1024px){
  .feature-grid-enhanced{
    grid-template-columns:1fr;
    gap:32px;
  }
}

@media (max-width: 768px){
  .feature-media-card{
    border-radius:22px;
  }

  .feature-media-img{
    border-radius:22px;
  }

  .features-list-enhanced .feature-item:hover{
    transform:translateX(0);
  }
}

    .product-shot{
      border-radius:28px;
      min-height:520px;
      background:
        radial-gradient(circle at 35% 22%, rgba(217,174,100,.34), transparent 25%),
        linear-gradient(145deg, #090909 0%, #191713 35%, #2d261e 100%);
      box-shadow:var(--shadow-lg);
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.06);
    }

    .product-shot::before{
      content:"";
      position:absolute;
      width:78%;
      aspect-ratio:1;
      left:11%;
      top:12%;
      border-radius:30px;
      transform:rotate(-8deg);
      background:
        linear-gradient(90deg, rgba(183,151,93,.85) 0 12.5%, rgba(40,38,34,.9) 12.5% 25%, rgba(183,151,93,.85) 25% 37.5%, rgba(40,38,34,.9) 37.5% 50%, rgba(183,151,93,.85) 50% 62.5%, rgba(40,38,34,.9) 62.5% 75%, rgba(183,151,93,.85) 75% 87.5%, rgba(40,38,34,.9) 87.5% 100%),
        linear-gradient(rgba(183,151,93,.85) 0 12.5%, rgba(40,38,34,.9) 12.5% 25%, rgba(183,151,93,.85) 25% 37.5%, rgba(40,38,34,.9) 37.5% 50%, rgba(183,151,93,.85) 50% 62.5%, rgba(40,38,34,.9) 62.5% 75%, rgba(183,151,93,.85) 75% 87.5%, rgba(40,38,34,.9) 87.5% 100%);
      box-shadow:0 18px 50px rgba(0,0,0,.35);
    }

    .features-list{display:grid;gap: 8px;}
    .feature-item{
      display:flex;
      gap:16px;
      padding:18px 18px;
      border-radius:18px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(0,0,0,.07);
      box-shadow:0 10px 24px rgba(0,0,0,.06);
    }
    .feature-icon{
      width:42px;
      height:42px;
      border-radius:50%;
      background:linear-gradient(145deg, #f4d097, #b78942);
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:18px;
    }
    .feature-item h4{font-size:18px; margin-bottom:6px}
    .feature-item p{margin:0; color:var(--muted); line-height:1.7}

    .pricing-wrap{display:grid; place-items:center}
    .pricing-card{
      width:min(100%, 430px);
      background:rgba(255,255,255,.88);
      border:1px solid rgba(0,0,0,.08);
      border-radius:26px;
      padding:32px;
      box-shadow:var(--shadow-lg);
      text-align:center;
    }
    .chip{
      display:inline-block;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(183,148,98,.14);
      color:var(--accent-deep);
      font-size:12px;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:18px;
    }
    .price{
      font-family:'Playfair Display', serif;
      font-size:64px;
      line-height:1;
      margin:10px 0;
    }
    .pricing-card p{color:var(--muted); line-height:1.7}

    .form-wrap{
      width:min(100%, 760px);
      margin:auto;
      background:rgba(255,255,255,.88);
      border-radius:26px;
      border:1px solid rgba(0,0,0,.08);
      box-shadow:var(--shadow-lg);
      padding:34px;
    }

    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }

    .field,
    .payment-option{
      width:100%;
      border:1px solid rgba(0,0,0,.12);
      border-radius:14px;
      background:#fbfbfb;
      padding:15px 16px;
      font-size:15px;
      font-family:inherit;
      outline:none;
      transition:border-color .25s ease, box-shadow .25s ease;
    }
    .field:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(182,148,98,.12)}
    .span-2{grid-column:span 2}

    .payment-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin:6px 0 18px;
    }

    .payment-option{
      text-align:center;
      font-weight:700;
      cursor:pointer;
      transition:.25s ease;
    }
    .payment-option:hover,
    .payment-option.active{
      background:#171717;
      color:#fff;
      border-color:#171717;
    }

    .testimonials{
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap: 13px;
    }
    .review{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(0,0,0,.08);
      border-radius:20px;
      padding:24px;
      box-shadow:var(--shadow);
    }
    .stars{color:#d99b1b; letter-spacing:2px; margin-bottom:12px}
    .review p{margin:0 0 16px; color:#454545; line-height:1.8}
    .review strong{display:block}
    .review span{font-size:14px; color:var(--muted)}

    .gallery{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
  .gallery-item{
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

    .track-box{
      width:min(100%, 640px);
      margin:auto;
      display:flex;
      gap:12px;
      background:rgba(255,255,255,.9);
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(0,0,0,.08);
      box-shadow:var(--shadow);
    }
    .track-box input{flex:1; border:none; background:transparent; padding:10px 12px; font-size:15px; outline:none}

   .footer-modern{
  padding:40px 0 46px;
  position:relative;
  z-index:1;
  background: #ffffffcc;
  border-top: 1px solid #d1d1d1;
}

.footer-top{
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr;
  gap:80px;
  align-items:flex-start;
}

.footer-brand-block .footer-brand{
  display:inline-flex;
  margin-bottom:24px;
}

.footer-brand-block p{
  max-width:360px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

.footer-links-block h4{
  margin:0 0 26px;
  font-size:14px;
  letter-spacing:.08em;
  font-weight:700;
  color:#1f1f1f;
}

.footer-links-block a{
  display:block;
  text-decoration:none;
  color:var(--muted);
  font-size:17px;
  line-height:1.9;
  margin-bottom:6px;
  transition:color .25s ease, transform .25s ease;
}

.footer-links-block a:hover{
  color:#111;
  transform:translateX(3px);
}

.footer-divider{
  height:1px;
  background:rgba(0,0,0,.12);
  margin:46px 0 34px;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.footer-copy{
  color:var(--muted);
  font-size:16px;
}

.footer-socials{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.footer-socials a{
  text-decoration:none;
  color:var(--muted);
  font-size:16px;
  transition:color .25s ease;
}

.footer-socials a:hover{
  color:#111;
}

@media (max-width: 900px){
  .footer-top{
    grid-template-columns:1fr;
    gap:38px;
  }

  .footer-brand-block p{
    max-width:100%;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 768px){
  .footer-modern{
    padding:65px 0 38px;
  }

  .footer-links-block h4{
    margin-bottom:16px;
  }

  .footer-socials{
    gap:18px;
  }
}
    .copy{margin-top:26px; color:var(--muted); font-size:14px}

    .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:opacity .8s ease, transform .8s ease;
    }
    .reveal.show{
      opacity:1;
      transform:translateY(0);
    }

    @media (max-width: 1024px){
      .hero,
      .feature-grid,
      .footer-grid{grid-template-columns:1fr}
      .hero{min-height:auto; padding-top:35px}
      .hero-visual{min-height:420px}
      .section{padding:78px 0}
    }

    @media (max-width: 768px){
      /* MOBILE OPTIMIZATION */

      .container{padding-left:16px;padding-right:16px}

      .hero{
        grid-template-columns:1fr;
        gap:30px;
        text-align:center;
      }

      .hero-actions{
        justify-content:center;
      }

      .hero-visual{
        order:-1;
        min-height:280px;
      }

      .laptop-card{
        max-width:320px;
        margin:auto;
        transform:perspective(800px) rotateY(-8deg) rotateX(4deg);
      }

      .lead{
        font-size:16px;
      }

      .tags{
        justify-content:center;
      }

      .feature-grid{
        grid-template-columns:1fr;
        gap:30px;
      }

      .product-shot{
        min-height:260px;
      }

      .features-list{
        gap:14px;
      }

      .pricing-card{
        padding:26px;
      }

      .price{
        font-size:46px;
      }

      .form-wrap{
        padding:24px;
      }

      .section{
        padding:60px 0;
      }

      .section-head h2{
        font-size:32px;
      }

      .gallery{
        grid-template-columns:1fr 1fr;
      }

      .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
      }

      .footer-col{
        margin-top:10px;
      }

      .nav-links{
        width:100%;
        justify-content:space-between;
      }

      .chess-piece.s1{font-size:42px}
      .chess-piece.s2{font-size:52px}
      .chess-piece.s3{font-size:62px}

      body{background-size:90px 90px, 90px 90px, 180px 180px}
      .nav-inner{padding:12px 0;align-items:flex-start;/* flex-direction:column; */}
      .nav-links{gap:16px}
      .cards,
      .testimonials,
      .gallery,
      .form-grid{grid-template-columns:1fr}
      .payment-grid{grid-template-columns:1fr}
      .span-2{grid-column:span 1}
      .laptop-card{aspect-ratio:1.08}
      .hero h1{font-size:54px}
      .product-shot{min-height:360px}
      .track-box{flex-direction:column}
      .btn{width:100%}
      .hero-actions{display:grid; grid-template-columns:1fr}
    }
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px 18px;
}

.field-group{
  display:flex;
  flex-direction:column;
}

.field-group.span-2{
  grid-column:span 2;
}

.field{
  width:100%;
  box-sizing:border-box;
}

label.error{
  display:block;
  width:100%;
  margin-top:8px;
  font-size:14px;
  color:#ff4d5a;
  line-height:1.4;
}

.field.error{
  border-color:#ff4d5a !important;
}
.content-section {
    padding: 40px 0;
}
.content-section h1{
  font-size:36px;
  margin-bottom:10px;
}

.content-section h2{
  margin-top:30px;
  font-size:22px;
}

.content-section h3{
  margin-top:15px;
  font-size:18px;
}

.content-section p{
  color:var(--muted);
  line-height:1.7;
}

.content-section ul{
  padding-left:20px;
  margin:10px 0 20px;
}

.content-section li{
  margin-bottom:6px;
  color:var(--muted);
}

.content-section hr{
  border:none;
  height:1px;
  background:rgba(0,0,0,.1);
  margin:25px 0;
}
.contact-section .section-head{
  text-align:center;
  margin-bottom:50px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:40px;
  align-items:start;
}

.contact-info{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-card{
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
}

.contact-card .icon{
  font-size:22px;
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#f4d097,#b78942);
}

.contact-card h4{
  margin:0 0 4px;
  font-size:16px;
}

.contact-card p{
  margin:0;
  color:var(--muted);
}

.contact-card a{
  text-decoration:none;
  color:var(--text);
}

.contact-form-wrap{
  background:rgba(255,255,255,.9);
  padding:26px;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-lg);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  font-family:inherit;
  font-size:14px;
  outline:none;
  background:#fff;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(182,148,98,.12);
}

.contact-form button{
  margin-top:6px;
}

/* MOBILE */
@media (max-width:768px){
  .contact-grid{
    grid-template-columns:1fr;
  }

  .form-row{
    grid-template-columns:1fr;
  }
}
@media (max-width: 767px){
  .form-grid{
    grid-template-columns:1fr;
  }

  .field-group.span-2{
    grid-column:span 1;
  }
}