:root{
    --navy:#0f1b4d;
    --blue:#4771db;
    --blue-pale:#eef3ff;
    --muted:#4a5568;
    --border:rgba(71,113,219,.14);
    --bg-top:#ffffff;
    --bg-bottom:#f7f9ff;
    --shadow-sm: 0 8px 24px rgba(15,27,77,.06);
    --shadow-md: 0 14px 34px rgba(15,27,77,.10);
    --shadow-lg: 0 26px 60px rgba(15,27,77,.16);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    font-family:'Inter',system-ui,sans-serif;
    color:var(--navy);
    background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    letter-spacing:-0.02em;
  }

  a{color:inherit;}

  .wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- Header ---------- */

  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 0;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:20px;
    text-decoration:none;
    color:var(--navy);
  }

  .logo-img{
    height:36px;
    width:auto;
    display:block;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:36px;
    font-weight:600;
    font-size:15px;
  }

  .nav-links a{text-decoration:none;color:var(--muted);transition:color .2s;}
  .nav-links a:hover{color:var(--blue);}

  .nav-cta{
    background:var(--navy);
    color:#fff !important;
    padding:10px 20px;
    border-radius:999px;
    font-weight:700;
  }

  @media (max-width:800px){
    .nav-links{display:none;}
  }

  /* ---------- Hero ---------- */

  .hero{
    padding:72px 0 40px;
    overflow:hidden;
  }

  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--blue-pale);
    color:var(--blue);
    padding:8px 16px;
    border-radius:999px;
    font-weight:700;
    font-size:13px;
    margin-bottom:22px;
  }

  .eyebrow .dot{
    width:6px;height:6px;border-radius:999px;background:var(--blue);
    animation:pulse 1.8s ease-in-out infinite;
  }

  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.4;transform:scale(.7);}
  }

  h1.headline{
    font-size:clamp(38px,5vw,58px);
    line-height:1.06;
    font-weight:700;
    margin-bottom:20px;
  }

  h1.headline .accent{color:var(--blue);}

  .hero p.lead{
    color:var(--muted);
    font-size:18px;
    line-height:1.65;
    max-width:480px;
    margin-bottom:32px;
  }

  .hero-actions{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }

  .btn-primary{
    position:relative;
    overflow:hidden;
    display:inline-block;
    background:var(--blue);
    color:#fff;
    padding:16px 30px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    font-size:15px;
    box-shadow:0 10px 26px rgba(71,113,219,.32);
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .btn-primary::before{
    content:"";
    position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    transition:left .6s ease;
  }

  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(71,113,219,.42);}
  .btn-primary:hover::before{left:150%;}

  .hero-note{
    color:#8189a3;
    font-weight:600;
    font-size:14px;
  }

  /* ---------- Product showcase (static, from original design) ---------- */

  .showcase-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .showcase-wrap::before{
    content:"";
    position:absolute;
    inset:40px;
    background:radial-gradient(circle, rgba(71,113,219,.20), transparent 70%);
    filter:blur(90px);
    border-radius:999px;
  }

  .showcase{
    position:relative;
    width:100%;
    max-width:480px;
    display:grid;
    gap:18px;
  }

  .showcase-main,
  .showcase-small{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow-sm);
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease;
    display:block;
  }

  .showcase-main:hover,
  .showcase-small:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
  }

  .showcase-main{
    padding:30px;
  }

  .showcase-badge{
    display:inline-block;
    background:var(--blue-pale);
    color:var(--blue);
    padding:7px 14px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:800;
    margin-bottom:16px;
  }

  .showcase-main h3{
    font-size:clamp(32px,4vw,44px);
    line-height:1;
    margin-bottom:12px;
    letter-spacing:-0.03em;
  }

  .showcase-main p{
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
    margin:0;
  }

  .showcase-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .showcase-small{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px;
  }

  .showcase-icon{
    width:44px;height:44px;min-width:44px;
    border-radius:13px;
    background:var(--blue-pale);
    color:var(--blue);
    display:flex;align-items:center;justify-content:center;
  }

  .showcase-icon svg{width:22px;height:22px;fill:currentColor;}
  .showcase-icon--office svg{width:26px;height:26px;}

  .showcase-small h4{
    margin:0;
    font-size:16.5px;
    font-weight:700;
  }

  @media (max-width:990px){
    .hero-grid{grid-template-columns:1fr;gap:44px;}
    .hero p.lead{max-width:none;}
  }

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

  /* ---------- Trust strip ---------- */

  .trust{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    padding:36px 0 8px;
  }

  .trust span{
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    padding:11px 18px;
    font-size:13px;
    font-weight:700;
    box-shadow:var(--shadow-sm);
  }

  /* ---------- Timeline ---------- */

  .timeline{
    padding:85px 0;
    border-top:1px solid var(--border);
  }

  .timeline-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:34px;
  }

  .timeline-track::before{
    content:"";
    position:absolute;
    top:31px;
    left:12%;
    right:12%;
    height:3px;
    background:rgba(71,113,219,.12);
    border-radius:999px;
  }

  .timeline-track::after{
    content:"";
    position:absolute;
    top:31px;
    left:12%;
    height:3px;
    width:0;
    background:linear-gradient(90deg, rgba(71,113,219,.7), rgba(71,113,219,.25));
    border-radius:999px;
    animation:timelineProgress 6s ease-in-out infinite;
  }

  @keyframes timelineProgress{
    0%{width:0;opacity:0;}
    10%{opacity:1;}
    45%{width:76%;opacity:1;}
    60%{width:76%;opacity:.8;}
    100%{width:0;opacity:0;}
  }

  .timeline-step{
    position:relative;
    text-align:center;
    z-index:2;
  }

  .timeline-dot{
    width:64px;height:64px;
    margin:0 auto 24px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:900;
    border:8px solid #fff;
    box-shadow:0 14px 34px rgba(71,113,219,.28);
    animation:timelineFloat 4s ease-in-out infinite;
  }

  .timeline-step:nth-child(2) .timeline-dot{animation-delay:.5s;}
  .timeline-step:nth-child(3) .timeline-dot{animation-delay:1s;}
  .timeline-step:nth-child(4) .timeline-dot{animation-delay:1.5s;}

  @keyframes timelineFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }

  .timeline-step h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
  }

  .timeline-step p{
    color:var(--muted);
    font-size:14.5px;
    line-height:1.6;
    max-width:230px;
    margin:0 auto;
  }

  @media (max-width:900px){
    .timeline-track{grid-template-columns:1fr;gap:40px;}

    .timeline-track::before{
      top:32px;left:31px;width:3px;height:calc(100% - 100px);right:auto;
    }

    .timeline-track::after{
      top:32px;left:31px;width:3px;height:0;
      animation:timelineProgressV 6s ease-in-out infinite;
    }

    @keyframes timelineProgressV{
      0%{height:0;opacity:0;}
      10%{opacity:1;}
      45%{height:calc(100% - 100px);opacity:1;}
      60%{height:calc(100% - 100px);opacity:.8;}
      100%{height:0;opacity:0;}
    }

    .timeline-step{
      text-align:left;
      display:grid;
      grid-template-columns:64px 1fr;
      column-gap:20px;
      align-items:start;
    }

    .timeline-dot{margin:0;}
    .timeline-step h3, .timeline-step p{grid-column:2;}
    .timeline-step p{max-width:none;}
  }

  /* ---------- Products ---------- */

  .section-head{
    text-align:center;
    max-width:560px;
    margin:0 auto 52px;
  }

  .section-head .eyebrow{margin-bottom:16px;}

  .section-head h2{
    font-size:clamp(30px,4vw,42px);
    margin-bottom:14px;
  }

  .section-head p{
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
  }

  .products-section{
    padding:96px 0 40px;
  }

  .products-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 42px;
  }

  .products-badge{
    display:inline-block;
    background:var(--blue-pale);
    color:var(--blue);
    padding:8px 14px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:16px;
  }

  .products-header h2{
    font-size:clamp(32px,5vw,52px);
    line-height:1.05;
    margin-bottom:14px;
  }

  .products-header p{
    color:var(--muted);
    font-size:17px;
    margin:0;
  }

  .trust-bar{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 16px;
    margin-top:22px;
  }

  .trust-item{
    display:inline-flex;
    align-items:center;
    color:#2f855a;
    background:#f0fdf4;
    border:1px solid rgba(47,133,90,.2);
    font-size:12.5px;
    font-weight:700;
    padding:7px 14px;
    border-radius:999px;
  }

  .products-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:36px 26px;
  }

  .product-card-wrap{
    position:relative;
    height:100%;
    transition:transform .25s ease;
  }

  .product-card-wrap:hover{transform:translateY(-6px);}

  .card-sale-badge{
    position:absolute;
    top:-13px;
    left:22px;
    z-index:2;
    background:var(--navy);
    color:#fff;
    font-size:11.5px;
    font-weight:800;
    padding:7px 13px;
    border-radius:999px;
    box-shadow:0 10px 22px rgba(15,27,77,.32);
  }

  .product-card{
    background:linear-gradient(180deg,#ffffff 0%,var(--bg-bottom) 100%);
    border:1px solid var(--border);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    height:100%;
    transition:box-shadow .25s ease, border-color .25s ease;
  }

  .product-card-wrap:hover .product-card{
    border-color:var(--blue);
    box-shadow:var(--shadow-md);
  }

  .product-image-wrap{
    background:radial-gradient(circle at top right, var(--blue-pale) 0%, #ffffff 55%);
    padding:28px;
    min-height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .product-image-wrap img{
    width:100%;
    max-width:180px;
    height:auto;
    object-fit:contain;
    transition:transform .25s ease;
  }

  .product-card-wrap:hover .product-image-wrap img{transform:scale(1.04);}

  .product-info{
    padding:20px 22px 0;
  }

  .product-tag{
    display:inline-block;
    background:var(--blue-pale);
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    padding:6px 11px;
    border-radius:999px;
    margin-bottom:12px;
  }

  .product-info h3{
    font-size:18.5px;
    line-height:1.3;
    margin-bottom:10px;
  }

  .product-stars{
    color:var(--blue);
    font-size:13.5px;
    font-weight:800;
    margin-bottom:12px;
  }

  .product-stars span{
    color:#667085;
    font-weight:500;
    margin-left:6px;
  }

  .product-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    margin-top:auto;
    padding:0 22px 22px;
  }

  .product-price-wrap{
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .compare-price{
    color:#98a2b3;
    font-size:13px;
    font-weight:700;
    text-decoration:line-through;
  }

  .product-price{
    color:var(--navy);
    font-size:20px;
    font-weight:800;
  }

  .products-grid .buy-btn{
    background:var(--blue);
    color:#fff;
    padding:10px 16px;
    border-radius:999px;
    border:none;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(71,113,219,.25);
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .products-grid .buy-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(71,113,219,.4);
  }

  @media (max-width:1100px){
    .products-grid{grid-template-columns:repeat(2,1fr);}
  }

  @media (max-width:620px){
    .products-grid{grid-template-columns:1fr;}
    .products-section{padding:70px 0 30px;}
  }

  /* ---------- FAQ ---------- */

  .faq{
    padding:88px 0 40px;
  }

  .faq-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:56px;
    align-items:start;
  }

  .faq-intro{
    position:sticky;
    top:96px;
  }

  .faq-intro .eyebrow{margin-bottom:16px;}

  .faq-intro h2{
    font-size:clamp(30px,4vw,42px);
    margin-bottom:14px;
  }

  .faq-intro p{
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
    margin:0 0 24px;
    max-width:32ch;
  }

  .faq-intro-cta{
    display:inline-flex;
    align-items:center;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:10px 20px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
  }

  .faq-cats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
  }

  .faq-cat{
    appearance:none;
    border:1px solid var(--border);
    background:var(--blue-pale);
    color:var(--blue);
    padding:8px 16px;
    border-radius:999px;
    font-weight:700;
    font-size:13.5px;
    font-family:inherit;
    cursor:pointer;
    transition:background .18s cubic-bezier(.16,1,.3,1), color .18s cubic-bezier(.16,1,.3,1), border-color .18s cubic-bezier(.16,1,.3,1);
  }

  .faq-cat.is-active{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
  }

  .faq-list{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .faq-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px 26px;
    box-shadow:var(--shadow-sm);
  }

  .faq-item[open]{box-shadow:var(--shadow-md);}

  .faq-item.is-hidden{display:none;}

  .faq-item summary{
    cursor:pointer;
    font-weight:700;
    font-size:15.5px;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  .faq-item summary::-webkit-details-marker{display:none;}

  .faq-item summary::after{
    content:"+";
    color:var(--blue);
    font-size:20px;
    font-weight:700;
    transition:transform .28s cubic-bezier(.16,1,.3,1);
    flex-shrink:0;
  }

  .faq-item[open] summary::after{transform:rotate(45deg);}

  .faq-item p a,
  .faq-item li a{
    color:var(--blue);
    font-weight:600;
    text-decoration:none;
  }

  .faq-item p a:hover,
  .faq-item li a:hover{text-decoration:underline;}

  .faq-steps{
    margin:14px 0 0;
    padding:0 0 0 18px;
    color:var(--muted);
    font-size:14.5px;
    line-height:1.7;
  }

  .faq-item code{
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:12.5px;
    font-weight:500;
    color:var(--navy);
    background:var(--blue-pale);
    padding:2px 6px;
    border-radius:6px;
  }

  .faq-support{
    margin-top:24px;
    padding:24px 26px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }

  .faq-support-badge{
    display:inline-block;
    background:#f0fdf4;
    color:#2f855a;
    padding:7px 14px;
    border-radius:999px;
    font-weight:800;
    font-size:12.5px;
    margin-bottom:10px;
  }

  .faq-support h3{
    font-size:22px;
    margin-bottom:6px;
  }

  .faq-support p{
    color:var(--muted);
    font-size:14.5px;
    line-height:1.6;
    margin:0;
  }

  .faq-support-cta{
    flex-shrink:0;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:10px 20px;
    border-radius:999px;
    font-weight:700;
    font-size:14.5px;
  }

  @media (max-width:800px){
    .faq-layout{
      grid-template-columns:1fr;
      gap:32px;
    }
    .faq-intro{position:static;}
    .faq-intro p{max-width:none;}
    .faq-support{flex-direction:column;align-items:flex-start;}
  }

  /* ---------- Footer ---------- */

  .site-footer{
    margin-top:60px;
    border-top:1px solid var(--border);
    padding:70px 0 28px;
    background:linear-gradient(180deg,#ffffff 0%,var(--bg-bottom) 100%);
  }

  .footer-top{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:50px;
    align-items:center;
    padding-bottom:40px;
    border-bottom:1px solid var(--border);
  }

  .footer-brand{max-width:480px;}

  .footer-logo{
    height:34px;
    width:auto;
    display:block;
    margin-bottom:14px;
  }

  .footer-brand p,
  .footer-newsletter p,
  .footer-bottom p{
    color:var(--muted);
    margin:0;
    line-height:1.6;
    font-size:14.5px;
  }

  .footer-newsletter{
    padding:30px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
  }

  .footer-newsletter-badge{
    display:inline-block;
    background:var(--blue-pale);
    color:var(--blue);
    padding:7px 14px;
    border-radius:999px;
    font-weight:800;
    font-size:12.5px;
    margin-bottom:14px;
  }

  .footer-newsletter h3{
    font-size:clamp(24px,3vw,34px);
    line-height:1.05;
    margin-bottom:10px;
  }

  .newsletter-form{margin-top:18px;}

  .newsletter-input-row{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px;
    background:var(--bg-bottom);
  }

  .newsletter-input-row input{
    flex:1;
    border:none;
    background:transparent;
    outline:none;
    padding:10px 12px;
    color:var(--navy);
    font-size:14px;
    font-family:'Inter',sans-serif;
  }

  .newsletter-input-row button{
    width:40px;height:40px;
    border:none;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(71,113,219,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }

  .newsletter-input-row button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(71,113,219,.4);
  }

  .newsletter-message{
    margin-top:10px;
    font-size:13px;
    font-weight:600;
  }

  .newsletter-message.success{color:#16a34a;}

  .footer-middle{
    display:grid;
    grid-template-columns:1fr 1fr 1.2fr;
    gap:30px;
    padding:36px 0;
    border-bottom:1px solid var(--border);
  }

  .footer-middle h4{
    font-size:14.5px;
    font-weight:800;
    margin-bottom:14px;
  }

  .footer-middle a,
  .footer-middle span{
    display:block;
    color:var(--muted);
    text-decoration:none;
    margin-bottom:9px;
    font-size:13.5px;
  }

  .footer-middle a:hover{color:var(--blue);}

  .footer-payments{
    padding-top:26px;
    text-align:center;
  }

  .footer-payments span{
    display:block;
    color:#667085;
    font-size:12.5px;
    font-weight:600;
    margin-bottom:12px;
  }

  .payment-icons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
  }

  .payment-icons img{
    width:52px;height:32px;
    background:#fff;
    padding:5px;
    border-radius:4px;
    object-fit:contain;
    box-sizing:border-box;
    border:1px solid var(--border);
    transition:transform .2s ease;
  }

  .payment-icons img:hover{transform:translateY(-2px);}

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

  .footer-links{
    display:flex;
    gap:22px;
    font-size:13px;
    font-weight:600;
  }

  .footer-links a{text-decoration:none;color:var(--muted);}
  .footer-links a:hover{color:var(--blue);}

  @media (max-width:900px){
    .footer-top,
    .footer-middle{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
    .footer-newsletter{padding:24px;}
  }

  @media (prefers-reduced-motion:reduce){
    .key-card{transition:none;}
    .eyebrow .dot{animation:none;}
    html{scroll-behavior:auto;}
    .faq-cat{transition:none;}
    .faq-item summary::after{transition:none;}
  }

  /* ---------- Product detail page ---------- */

  .breadcrumb{
    padding:26px 0 0;
    font-size:13.5px;
    color:var(--muted);
  }

  .breadcrumb a{color:var(--muted);text-decoration:none;}
  .breadcrumb a:hover{color:var(--blue);}
  .breadcrumb span{margin:0 8px;color:#c3cade;}

  .pdp{
    padding:52px 0 110px;
  }

  .pdp-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:72px;
    align-items:start;
  }

  .pdp-image-stage{
    position:relative;
    position:sticky;
    top:100px;
  }

  .pdp-image-stage::before{
    content:"";
    position:absolute;
    inset:-40px;
    background:radial-gradient(circle, rgba(71,113,219,.22), transparent 68%);
    filter:blur(80px);
    z-index:0;
  }

  .pdp-image{
    position:relative;
    z-index:1;
    background:radial-gradient(circle at top right, var(--blue-pale) 0%, #ffffff 60%);
    border-radius:32px;
    border:1px solid var(--border);
    padding:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:520px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
  }

  .pdp-image img{
    width:100%;
    max-width:460px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 30px 40px rgba(15,27,77,.20));
    transition:transform .4s ease;
  }

  .pdp-image:hover img{
    transform:translateY(-6px) scale(1.02);
  }

  .pdp-info h1{
    font-size:clamp(34px,4.2vw,48px);
    line-height:1.06;
    letter-spacing:-0.02em;
    margin-bottom:16px;
  }

  .pdp-price-row{
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:30px;
    padding-bottom:26px;
    border-bottom:1px solid var(--border);
  }

  .pdp-price{
    font-family:'Space Grotesk',sans-serif;
    font-size:36px;
    font-weight:700;
    color:var(--navy);
    letter-spacing:-0.01em;
  }

  .pdp-compare{
    font-size:18px;
    color:#98a2b3;
    text-decoration:line-through;
    font-weight:600;
  }

  .pdp-qty-label{
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    margin-bottom:12px;
  }

  .pdp-qty-row{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
  }

  .qty-stepper{
    display:flex;
    align-items:center;
    border:1.5px solid var(--border);
    border-radius:999px;
    overflow:hidden;
    background:#fff;
  }

  .qty-stepper button{
    width:48px;height:48px;
    border:none;
    background:#fff;
    color:var(--navy);
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }

  .qty-stepper button:hover{background:var(--blue);color:#fff;}

  .qty-stepper input{
    width:56px;
    text-align:center;
    border:none;
    border-left:1.5px solid var(--border);
    border-right:1.5px solid var(--border);
    font-size:17px;
    font-weight:800;
    color:var(--navy);
    padding:12px 0;
    font-family:'Space Grotesk',sans-serif;
    -moz-appearance:textfield;
  }

  .qty-stepper input::-webkit-outer-spin-button,
  .qty-stepper input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }

  .pdp-buy-btn{
    position:relative;
    overflow:hidden;
    display:block;
    width:100%;
    text-align:center;
    background:var(--blue);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    font-size:17px;
    padding:19px 24px;
    border-radius:999px;
    box-shadow:0 14px 32px rgba(71,113,219,.34);
    transition:transform .25s ease, box-shadow .25s ease;
    margin-bottom:18px;
  }

  .pdp-buy-btn::before{
    content:"";
    position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    transition:left .6s ease;
  }

  .pdp-buy-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(71,113,219,.46);
  }

  .pdp-buy-btn:hover::before{left:150%;}

  .pdp-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-bottom:32px;
  }

  .pdp-trust-row span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:700;
    color:var(--muted);
  }

  .tier-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px;
    margin-bottom:30px;
    box-shadow:var(--shadow-sm);
  }

  .tier-box-badge{
    display:inline-block;
    background:var(--blue-pale);
    color:var(--blue);
    padding:7px 14px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:800;
    margin-bottom:14px;
  }

  .tier-box p.note{
    color:var(--muted);
    font-size:13px;
    margin:0 0 16px;
  }

  .tier-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 4px;
    border-top:1px solid var(--border);
    font-size:14.5px;
    border-radius:12px;
    transition:background .2s ease;
  }

  .tier-row:first-of-type{border-top:none;}

  .tier-row .tier-label{font-weight:700;color:var(--navy);}
  .tier-row .tier-off{color:#2f855a;font-weight:700;font-size:12px;margin-left:8px;background:#f0fdf4;padding:3px 8px;border-radius:999px;}
  .tier-row .tier-price{font-weight:800;color:var(--navy);font-family:'Space Grotesk',sans-serif;}

  .tier-row.active{
    background:var(--blue-pale);
    padding:13px 14px;
    margin:0 -14px;
    border-top-color:transparent;
  }

  .pdp-description{
    color:var(--muted);
    font-size:15.5px;
    line-height:1.7;
    margin-bottom:22px;
  }

  .pdp-includes{
    list-style:none;
    padding:0;
    margin:0 0 30px;
    display:grid;
    gap:12px;
  }

  .pdp-includes li{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--navy);
    font-size:14.5px;
    font-weight:600;
  }

  .pdp-includes li::before{
    content:"✓";
    flex-shrink:0;
    width:24px;height:24px;
    border-radius:999px;
    background:var(--blue-pale);
    color:var(--blue);
    font-weight:800;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  @media (max-width:900px){
    .pdp-grid{grid-template-columns:1fr;gap:40px;}
    .pdp-image-stage{position:static;}
    .pdp-image{min-height:320px;padding:32px;}
  }

  /* ---------- Cart icon + drawer ---------- */

  .cart-icon-btn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;height:42px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }

  .cart-icon-btn:hover{background:var(--blue-pale);border-color:var(--blue);}

  .cart-icon-btn svg{width:19px;height:19px;fill:var(--navy);}

  .cart-badge{
    position:absolute;
    top:-4px;right:-4px;
    width:19px;height:19px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:none;
    align-items:center;
    justify-content:center;
  }

  .cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,27,77,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:90;
  }

  .cart-overlay.open{opacity:1;pointer-events:auto;}

  .cart-drawer{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:400px;
    max-width:92vw;
    background:#fff;
    box-shadow:-20px 0 50px rgba(15,27,77,.18);
    z-index:91;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }

  .cart-drawer.open{transform:translateX(0);}

  .cart-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 24px;
    border-bottom:1px solid var(--border);
  }

  .cart-drawer-head h3{font-size:18px;}

  .cart-close-btn{
    width:34px;height:34px;
    border-radius:999px;
    border:none;
    background:var(--blue-pale);
    color:var(--navy);
    font-size:15px;
    cursor:pointer;
  }

  .cart-drawer-body{
    flex:1;
    overflow-y:auto;
    padding:20px 24px;
  }

  .cart-empty-msg{
    color:var(--muted);
    font-size:14.5px;
    text-align:center;
    padding:60px 0;
  }

  .cart-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:16px 0;
    border-bottom:1px solid var(--border);
  }

  .cart-item-name{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:4px;}
  .cart-item-tier{font-size:12.5px;color:var(--muted);}

  .cart-item-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }

  .cart-qty-stepper{
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:999px;
    overflow:hidden;
  }

  .cart-qty-stepper button{
    width:26px;height:26px;
    border:none;
    background:#fff;
    color:var(--navy);
    font-weight:700;
    cursor:pointer;
  }

  .cart-qty-stepper span{
    width:24px;
    text-align:center;
    font-size:13px;
    font-weight:700;
  }

  .cart-remove-btn{
    border:none;
    background:none;
    color:#98a2b3;
    font-size:13px;
    cursor:pointer;
  }

  .cart-remove-btn:hover{color:#dc2626;}

  .cart-drawer-footer{
    padding:20px 24px 24px;
    border-top:1px solid var(--border);
  }

  .cart-subtotal-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    font-weight:800;
    font-size:15.5px;
    color:var(--navy);
  }

  .cart-checkout-btn{
    display:block;
    width:100%;
    text-align:center;
    background:var(--blue);
    color:#fff;
    border:none;
    font-weight:800;
    font-size:15.5px;
    padding:16px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(71,113,219,.32);
  }

  .card-clickable{
    text-decoration:none;
    color:inherit;
    display:block;
  }

  /* ---------- Cart feedback: bounce + toast ---------- */

  @keyframes cartBounce{
    0%{transform:scale(1);}
    30%{transform:scale(1.25);}
    50%{transform:scale(0.92);}
    70%{transform:scale(1.1);}
    100%{transform:scale(1);}
  }

  .cart-icon-btn.bounce{
    animation:cartBounce .5s ease;
  }

  .cart-toast{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translateX(-50%) translateY(20px);
    background:var(--navy);
    color:#fff;
    font-size:14px;
    font-weight:700;
    padding:13px 22px;
    border-radius:999px;
    box-shadow:0 14px 32px rgba(15,27,77,.32);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:120;
  }

  .cart-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }