/*
Theme Name: Trendlyconcept
Theme URI: https://trendly.ng
Author: Trendly Concept Limited
Author URI: https://trendly.ng
Description: A modern WordPress theme for Trendly Concept Limited - digital services, e-commerce, and portfolio showcase. Features custom post types for services, products, and projects with full responsive design.
Version: 1.0.0
License: GPL v2 or later
Text Domain: trendlyconcept
Tags: blog, e-commerce, portfolio, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, three-columns, right-sidebar
*/

/* All the CSS from your original file goes here */
:root{ 
  --blue:        #0a2463;
  --blue-mid:    #1b4fbb;
  --blue-light:  #3a7bd5;
  --blue-pale:   #e8f0fb;
  --red:         #d90429;
  --red-dark:    #9e0219;
  --red-light:   #ff1a3c;
  --dark:        #111827;
  --gray:        #1f2937;
  --mid:         #64748b;
  --muted:       #6b7280;
  --light:       #f3f4f6;
  --white:       #ffffff;
  --gold:        #f59e0b;
  --green:       #10b981;
  --font-h: 'Oswald', sans-serif;
  --font-b: 'Source Serif 4', Georgia, serif;
  --font-m: 'JetBrains Mono', monospace;
  --r: 6px;
  --rl: 12px;
  --sh: 0 4px 24px rgba(0,0,0,.14);
  --brand:       #1a56db;
  --brand-dark:  #1240a8;
  --brand-light: #ebf0ff;
  --accent:      #f59e0b;
  --ink:         #0f172a;
  --charcoal:    #1e293b;
  --soft:        #f1f5f9;
  --border:      #cbd5e1;
  --nav-h: 66px;
  --drawer-w: 300px;
  --tv:        #1a56db;
  --design:    #7c3aed;
  --money:     #059669;
  --marketing: #ea580c;
}


  
    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      background:var(--white);
      color:var(--ink);
      font-family:var(--font-b);
      overflow-x:hidden;
    }
    h1,h2,h3,h4,.display-font{
      font-family:var(--font-h);
      letter-spacing:.01em;
      text-transform:none;
    }
    .mono{ font-family:var(--font-m); letter-spacing:.13em; text-transform:uppercase; }
    .text-brand{ color:var(--brand) !important; }
    .text-red{ color:var(--red) !important; }
    .text-muted2{ color:var(--muted) !important; }
    a{ text-decoration:none; }

    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    }

    .ring-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
    .ring{ position:absolute; border-radius:50%; border:1px solid rgba(26,86,219,0.14); }
    .ring--red{ border-color:rgba(217,4,41,0.12); }

    /* ---------- Navbar ---------- */
    .navbar{
      background:rgba(255,255,255,0.92);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--border);
      min-height:var(--nav-h);
    }
    .navbar .nav-link{
      font-family:var(--font-h);
      color:var(--charcoal); font-weight:500; font-size:.92rem;
      padding:.5rem 1rem !important;
      transition:color .2s ease;
    }
    .navbar .nav-link:hover, .navbar .nav-link.active{ color:var(--brand); }
    .brand-mark{
      width:42px; height:42px; border-radius:50%;
      
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-h); font-weight:700; color:var(--white);
      box-shadow:0 6px 18px rgba(26,86,219,0.35);
    }
    .brand-mark img {
        border-radius: 30px;
    }
    .brand-name{ font-family:var(--font-h); font-weight:700; font-size:1.08rem; color:var(--ink); letter-spacing:.02em; }
    .brand-tag{ font-family:var(--font-m); font-size:.6rem; color:var(--muted); letter-spacing:.14em; }

    .btn-primary-b{
      background:linear-gradient(135deg, var(--brand), var(--brand-dark));
      border:none; color:var(--white); font-family:var(--font-h); font-weight:600;
      padding:.62rem 1.4rem; border-radius:50px;
      box-shadow:0 10px 26px -8px rgba(26,86,219,0.55);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .btn-primary-b:hover{ transform:translateY(-2px); color:var(--white); box-shadow:0 14px 30px -6px rgba(217,4,41,0.4); }
    .btn-outline-b{
      border:1px solid var(--border); color:var(--blue-pale); font-family:var(--font-h); font-weight:500;
      padding:.6rem 1.35rem; border-radius:50px;
      transition:all .25s ease;
    }
    .btn-outline-b:hover{ background:var(--brand); border-color:var(--border); color:var(--brand); }

    /* ---------- Offcanvas drawer ---------- */
    .offcanvas{ width:min(var(--drawer-w), 86vw) !important; background:var(--white); }
    .offcanvas .nav-link{ padding:.85rem 0 !important; border-bottom:1px solid var(--soft); font-size:1rem; }

    /* ---------- Hero ---------- */
    .hero{
      position:relative;
      padding:calc(var(--nav-h) + 90px) 0 100px;
      color: var(--light);
      background: #0a2463;
        /* radial-gradient(ellipse 55% 55% at 82% 8%, var(--brand-light), transparent 60%),
        radial-gradient(ellipse 45% 45% at 6% 95%, rgba(217,4,41,0.08), transparent 60%), */
       /* // var(--tv); */
       
    }
    .eyebrow{
      font-family:var(--font-m); font-size:.7rem; color:var(--brand); font-weight:600;
      display:inline-flex; align-items:center; gap:.5rem;
      border:1px solid var(--border); border-radius:50px;
      padding:.4rem .9rem; background:var(--white);
    }
    .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); }
    .hero h1{
      font-size:clamp(2.3rem, 4.4vw, 3.7rem);
      font-weight:700; color:var(--ink); line-height:1.1;
      color: white;
    }
    /* .hero .gradient-text{
      background:linear-gradient(100deg,var(--brand),var(--red) 70%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    } */
    .hero p.lead{ color:white; font-size:1.08rem; max-width:520px; font-family:var(--font-b); }

    .orbit-wrap{ position:relative; width:100%; aspect-ratio:1/1; max-width:420px; margin:0 auto; }
    .orbit-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--border); animation:spin 34s linear infinite; }
    .orbit-ring.r2{ inset:32px; border-color:rgba(26,86,219,0.2); animation-duration:26s; animation-direction:reverse; }
    .orbit-ring.r3{ inset:64px; border-style:dashed; border-color:rgba(217,4,41,0.2); animation-duration:44s; }
    @keyframes spin{ to{ transform:rotate(360deg); } }
    .orbit-core{
      position:absolute; inset:92px; border-radius:50%;
      background:linear-gradient(135deg, var(--brand), var(--brand-dark));
      box-shadow:0 20px 50px -12px rgba(26,86,219,0.55);
      display:flex; align-items:center; justify-content:center;
    }
    .orbit-core .mark{ font-family:var(--font-h); font-weight:700; font-size:2.8rem; color:#fff; }
    .orbit-node{ position:absolute; width:13px; height:13px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(217,4,41,0.15); }

    .hero-carousel .carousel-inner{ overflow:visible; }
    .hero-dots{ display:flex; gap:.5rem; margin-top:2.4rem; }
    .hero-dots button{
      width:32px; height:4px; border:none; border-radius:4px;
      background:var(--border); padding:0; cursor:pointer;
      transition:background .3s ease, width .3s ease;
    }
    .hero-dots button.active{ background:var(--brand); width:50px; }
    .hero-arrows{ display:flex; gap:.6rem; margin-top:2.4rem; }
    .hero-arrow{
      width:42px; height:42px; border-radius:50%;
      border:1px solid var(--border); background:var(--white);
      color:var(--ink); display:flex; align-items:center; justify-content:center;
      transition:all .25s ease;
    }
    .hero-arrow:hover{ background:var(--brand-light); border-color:var(--brand); color:var(--brand); }

    .stat-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--soft); }
    .stat-strip .stat-num{ font-family:var(--font-h); font-weight:700; font-size:1.85rem; color:var(--ink); }
    .stat-strip .stat-label{ font-family:var(--font-m); font-size:.7rem; color:var(--muted); letter-spacing:.05em; }

    section{ position:relative; padding:96px 0; }
    .section-head{ max-width:640px; }
    .section-head .mono{ color:var(--brand); font-size:.7rem; }
    .section-head h2{ color:var(--ink); font-size:clamp(1.8rem,2.8vw,2.5rem); font-weight:700; margin-top:.6rem; }
    .section-head p{ color:var(--muted); font-family:var(--font-b); }

    .bg-soft{ background:var(--blue-pale); }

    /* ===== DIVISIONS SLIDER – blue background, video, no text ===== */
    .div-slider{
      /* border:1px solid var(--border); */
      border-radius:20px;
      overflow:hidden;
      background:#0a2463;
      box-shadow:var(--sh);
    }
    .div-slide{
      display:flex;
      flex-wrap:wrap;
      min-height:380px;
      background:#0a2463;
    }
    .div-visual{
      flex:1 1 100%;
      min-height:380px;
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#0a2463;
    }
    .div-visual iframe{
      width:100%;
      height:100%;
      min-height:380px;
      border:0;
      display:block;
    }
    .div-content{ display:none; }

    .div-nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:1.2rem 1.6rem;
      border-top:1px solid rgba(255,255,255,0.15);
      background:rgba(0,0,0,0.2);
    }
    .div-tabs{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
    }
    .div-tab{
      font-family:var(--font-m);
      font-size:.68rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      border:1px solid rgba(255,255,255,0.3);
      background:rgba(255,255,255,0.1);
      color:rgba(255,255,255,0.8);
      padding:.4rem .85rem;
      border-radius:50px;
      cursor:pointer;
      transition:all .2s ease;
    }
    .div-tab.active{
      color:#fff;
      border-color:transparent;
      background:var(--brand);
    }
    .div-thumb-strip{
      display:flex;
      gap:0.6rem;
      flex-wrap:wrap;
      align-items:center;
    }
    .div-thumb{
      width:52px;
      height:52px;
      border-radius:12px;
      overflow:hidden;
      border:2px solid rgba(255,255,255,0.3);
      cursor:pointer;
      transition: border 0.2s, transform 0.2s;
      background:rgba(255,255,255,0.1);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.2rem;
      color:rgba(255,255,255,0.8);
    }
    .div-thumb.active-thumb{
      border-color:#fff;
      transform:scale(1.05);
      background:var(--brand);
      color:#fff;
    }
    .div-thumb i{ font-size:1.4rem; }

    /* ===== PRODUCT CAROUSEL (3 columns) ===== */
    .product-carousel-wrap{
      position:relative;
      overflow:hidden;
    }
    .product-carousel-track{
      display:flex;
      transition:transform 0.5s ease;
      gap:1.5rem;
    }
    .product-carousel-track .tile{
      flex:0 0 calc(33.333% - 1rem);
      opacity:1;
      transform:none;
    }
    @media (max-width: 992px) {
      .product-carousel-track .tile{
        flex:0 0 calc(50% - 0.75rem);
      }
    }
    @media (max-width: 576px) {
      .product-carousel-track .tile{
        flex:0 0 100%;
      }
    }
    .product-carousel-btn{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:44px;
      height:44px;
      border-radius:50%;
      border:1px solid var(--border);
      background:var(--white);
      color:var(--ink);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.2rem;
      z-index:5;
      cursor:pointer;
      transition:all 0.25s ease;
      box-shadow:0 2px 12px rgba(0,0,0,0.08);
    }
    .product-carousel-btn:hover{
      background:var(--brand);
      border-color:var(--brand);
      color:var(--white);
    }
    .product-carousel-btn.prev{ left:-8px; }
    .product-carousel-btn.next{ right:-8px; }
    .product-carousel-dots{
      display:flex;
      justify-content:center;
      gap:0.6rem;
      margin-top:2rem;
    }
    .product-carousel-dots span{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--border);
      cursor:pointer;
      transition:background 0.3s, transform 0.2s;
    }
    .product-carousel-dots span.active{
      background:var(--brand);
      transform:scale(1.2);
    }

    /* ===== SHOP PRODUCT CARDS with image slider ===== */
    .shop-card{
      background:var(--white);
      border:1px solid var(--border);
      border-radius:var(--rl);
      overflow:hidden;
      height:100%;
      transition:transform .3s ease, box-shadow .3s ease;
      opacity:0;
      transform:translateY(24px);
    }
    .shop-card.in-view{ opacity:1; transform:translateY(0); }
    .shop-card:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
    .shop-img{
      height:200px;
      background:var(--soft);
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      border-bottom:1px solid var(--border);
    }
    .shop-img .img-slider{
      display:flex;
      width:100%;
      height:100%;
      transition:transform 0.5s ease;
    }
    .shop-img .img-slider .slide{
      min-width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:4rem;
      color:var(--brand);
      background:var(--soft);
    }
    .shop-img .img-slider .slide:nth-child(2){ background:#f0f4ff; color:var(--blue-mid); }
    .shop-img .img-slider .slide:nth-child(3){ background:#fef3c7; color:#b45309; }
    .shop-img .slide-dots{
      position:absolute;
      bottom:10px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      gap:6px;
      z-index:5;
    }
    .shop-img .slide-dots span{
      width:8px;
      height:8px;
      border-radius:50%;
      background:rgba(0,0,0,0.2);
      cursor:pointer;
      transition:background 0.2s;
    }
    .shop-img .slide-dots span.active{
      background:var(--brand);
      width:16px;
      border-radius:4px;
    }
    .shop-img .slide-arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      background:rgba(255,255,255,0.85);
      border:none;
      border-radius:50%;
      width:30px;
      height:30px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
      color:var(--ink);
      cursor:pointer;
      z-index:5;
      transition:background 0.2s;
      box-shadow:0 2px 8px rgba(0,0,0,0.1);
    }
    .shop-img .slide-arrow:hover{ background:var(--white); }
    .shop-img .slide-arrow.prev{ left:6px; }
    .shop-img .slide-arrow.next{ right:6px; }

    .shop-body{ padding:1.3rem 1.3rem 1.5rem; }
    .shop-body h4{
      font-family:var(--font-h);
      font-size:1.05rem;
      font-weight:600;
      color:var(--ink);
      margin-bottom:0.3rem;
    }
    .shop-body .shop-price{
      font-family:var(--font-h);
      font-size:1.2rem;
      font-weight:700;
      color:var(--brand);
    }
    .shop-body .shop-desc{
      color:var(--muted);
      font-size:.85rem;
      font-family:var(--font-b);
      margin:0.4rem 0 0.8rem;
    }
    .shop-badge{
      display:inline-block;
      font-family:var(--font-m);
      font-size:.55rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      padding:.25rem .6rem;
      border-radius:50px;
      background:var(--brand-light);
      color:var(--brand);
      margin-bottom:0.3rem;
    }
    .shop-badge.service{ background:#fef3c7; color:#b45309; }
    .shop-badge.digital{ background:#dbeafe; color:#1e40af; }
    .shop-badge.physical{ background:#d1fae5; color:#065f46; }

    .btn-add-cart{
      background:var(--brand);
      color:var(--white);
      border:none;
      font-family:var(--font-h);
      font-weight:500;
      padding:0.5rem 1rem;
      border-radius:50px;
      transition:background 0.2s, transform 0.15s;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:0.5rem;
    }
    .btn-add-cart:hover{ background:var(--brand-dark); color:var(--white); transform:scale(0.98); }
    .btn-add-cart.added{ background:var(--green); }

    .shop-search-wrap{
      max-width:480px;
      margin:0 auto 2rem;
      position:relative;
    }
    .shop-search-wrap input{
      width:100%;
      padding:0.8rem 1.2rem 0.8rem 3rem;
      border:2px solid var(--border);
      border-radius:50px;
      font-family:var(--font-b);
      font-size:1rem;
      background:var(--white);
      transition:border-color 0.25s, box-shadow 0.25s;
    }
    .shop-search-wrap input:focus{
      outline:none;
      border-color:var(--brand);
      box-shadow:0 0 0 4px rgba(26,86,219,0.15);
    }
    .shop-search-wrap .search-icon{
      position:absolute;
      left:1.2rem;
      top:50%;
      transform:translateY(-50%);
      color:var(--muted);
      font-size:1.2rem;
    }
    .shop-search-wrap .clear-btn{
      position:absolute;
      right:1rem;
      top:50%;
      transform:translateY(-50%);
      background:none;
      border:none;
      color:var(--muted);
      font-size:1.1rem;
      cursor:pointer;
      display:none;
      padding:0.2rem 0.4rem;
    }
    .shop-search-wrap .clear-btn.visible{ display:block; }
    .shop-search-wrap .clear-btn:hover{ color:var(--red); }
    .no-results{
      display:none;
      text-align:center;
      padding:3rem 1rem;
      color:var(--muted);
      font-family:var(--font-b);
    }
    .no-results i{ font-size:3rem; display:block; margin-bottom:1rem; color:var(--border); }

    .tile{
      background:var(--white);
      border:1px solid var(--border);
      border-radius:var(--rl);
      overflow:hidden;
      height:100%;
      transition:transform .3s ease, box-shadow .3s ease;
    }
    .tile:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
    .tile-picture{
      height:150px;
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .tile-picture i{
      font-size:3rem;
      color:rgba(255,255,255,0.95);
      filter:drop-shadow(0 6px 14px rgba(0,0,0,0.2));
      transition:transform .4s ease;
    }
    .tile-picture::after{
      content:'';
      position:absolute;
      width:170px;
      height:170px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,0.22);
      top:-55px;
      right:-45px;
    }
    .pic-brand{ background:linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%); }
    .pic-red{ background:linear-gradient(135deg, #ff7a86 0%, var(--red) 100%); }
    .pic-gold{ background:linear-gradient(135deg, #fcd34d 0%, var(--gold) 100%); }
    .pic-green{ background:linear-gradient(135deg, #6ee7b7 0%, var(--green) 100%); }
    .tile-body{ padding:1.4rem 1.5rem 1.7rem; }
    .tile h3{ color:var(--ink); font-family:var(--font-h); font-size:1.1rem; font-weight:600; margin-bottom:.5rem; }
    .tile p{ color:var(--muted); font-family:var(--font-b); font-size:.92rem; margin:0; }

    .cp-card{
      background:var(--white); border:1px solid var(--border); border-radius:var(--rl);
      overflow:hidden; height:100%;
      transition:transform .3s ease, box-shadow .3s ease;
      opacity:0; transform:translateY(22px);
    }
    .cp-card.in-view{ opacity:1; transform:translateY(0); }
    .cp-card:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
    .cp-thumb{ height:170px; position:relative; overflow:hidden; background:var(--soft); }
    .cp-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .5s ease; }
    .cp-card:hover .cp-thumb img{ transform:scale(1.06); }
    .cp-badge{
      position:absolute; top:12px; left:12px; background:var(--green); color:#fff;
      font-family:var(--font-m); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      padding:.3rem .7rem; border-radius:50px; display:flex; align-items:center; gap:.35rem;
    }
    .cp-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
    .cp-body{ padding:1.3rem 1.5rem 1.5rem; }
    .cp-body h3{ color:var(--ink); font-family:var(--font-h); font-size:1.02rem; font-weight:600; margin:0 0 .5rem; }
    .cp-rating{ color:var(--gold); font-size:.82rem; display:flex; align-items:center; gap:.35rem; margin-bottom:1rem; }
    .cp-rating .stars i{ font-size:.78rem; }
    .cp-rating span{ color:var(--muted); font-size:.78rem; font-family:var(--font-m); }
    .cp-chat{ display:inline-flex; align-items:center; gap:.45rem; color:var(--brand); font-family:var(--font-h); font-size:.85rem; font-weight:600; }
    .cp-chat:hover{ color:var(--red); }

    .why-panel{ background:var(--brand-light); border:1px solid var(--border); border-radius:24px; padding:3rem; }
    .why-item{ display:flex; align-items:flex-start; gap:.9rem; }
    .why-check{
      width:34px; height:34px; min-width:34px; border-radius:50%;
      background:var(--white); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center; color:var(--brand);
    }
    .why-item h4{ font-family:var(--font-h); color:var(--ink); font-size:1rem; font-weight:600; margin-bottom:.2rem; }
    .why-item p{ color:var(--muted); font-family:var(--font-b); font-size:.86rem; margin:0; }

    .blog-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; height:100%; transition:transform .3s ease, box-shadow .3s ease; }
    .blog-card:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
    .blog-thumb{ height:170px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .blog-thumb.bt-design{ background:linear-gradient(135deg, #c4b5fd, var(--design)); }
    .blog-thumb.bt-money{ background:linear-gradient(135deg, #6ee7b7, var(--money)); }
    .blog-thumb.bt-tv{ background:linear-gradient(135deg, #93c5fd, var(--tv)); }
    .blog-thumb i{ font-size:2.4rem; color:rgba(255,255,255,0.95); }
    .blog-thumb .blog-cat{
      position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.92); color:var(--ink);
      font-family:var(--font-m); font-size:.62rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
      padding:.28rem .7rem; border-radius:50px;
    }
    .blog-body{ padding:1.4rem 1.5rem 1.6rem; }
    .blog-date{ color:var(--muted); font-family:var(--font-m); font-size:.72rem; }
    .blog-body h3{ font-family:var(--font-h); color:var(--ink); font-size:1.02rem; font-weight:600; margin:.5rem 0 .6rem; line-height:1.35; }
    .blog-body p{ color:var(--muted); font-family:var(--font-b); font-size:.88rem; margin:0 0 1rem; }
    .blog-link{ color:var(--brand); font-family:var(--font-h); font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
    .blog-link i{ transition:transform .25s ease; }
    .blog-link:hover i{ transform:translate(3px,-3px); }

    .cta-band{
      background:linear-gradient(120deg, var(--dark), var(--gray) 60%, var(--charcoal));
      border-radius:24px; padding:3.4rem; position:relative; overflow:hidden;
    }
    .cta-band h2{ font-family:var(--font-h); color:var(--white); font-weight:700; }
    .cta-band p{ color:#cbd5e1; font-family:var(--font-b); }

    .contact-card{ background:var(--soft); border:1px solid var(--border); border-radius:var(--rl); padding:1.6rem; height:100%; }
    .contact-card i{ color:var(--brand); font-size:1.3rem; }
    .contact-card h5{ font-family:var(--font-h); color:var(--ink); font-size:.95rem; font-weight:600; margin:.7rem 0 .3rem; }
    .contact-card p, .contact-card a{ color:var(--muted); font-family:var(--font-b); font-size:.9rem; margin:0; }
    .contact-card a:hover{ color:var(--brand); }
    .qr-box{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px; width:110px; height:110px; display:flex; align-items:center; justify-content:center; }

    .follow-section{
      background:var(--white);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
    }
    .follow-grid{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:1.2rem 2rem;
    }
    .follow-item{
      display:inline-flex;
      align-items:center;
      gap:0.6rem;
      font-family:var(--font-h);
      font-weight:500;
      font-size:1.05rem;
      color:var(--ink);
      padding:0.4rem 0.8rem;
      border-radius:40px;
      background:var(--soft);
      border:1px solid transparent;
      transition: all 0.2s ease;
    }
    .follow-item i{
      font-size:1.6rem;
      width:2.2rem;
      text-align:center;
    }
    .follow-item:hover{
      transform:translateY(-3px);
      border-color:var(--brand);
      background:var(--brand-light);
      color:var(--brand);
    }
    .follow-item .social-label{ font-size:0.9rem; }
    .follow-item .bi-facebook{ color:#1877f2; }
    .follow-item .bi-twitter-x{ color:#000; }
    .follow-item .bi-tiktok{ color:#000; }
    .follow-item .bi-instagram{ color:#e4405f; }
    .follow-item .bi-youtube{ color:#ff0000; }
    .follow-item:hover .bi-facebook,
    .follow-item:hover .bi-twitter-x,
    .follow-item:hover .bi-tiktok,
    .follow-item:hover .bi-instagram,
    .follow-item:hover .bi-youtube{ color:var(--brand); }

    .team-card{
      background:var(--white);
      border:1px solid var(--border);
      border-radius:var(--rl);
      overflow:hidden;
      height:100%;
      transition:transform .3s ease, box-shadow .3s ease;
      text-align:center;
      padding:1.8rem 1.2rem 1.5rem;
    }
    .team-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--sh);
    }
    .team-avatar{
      width:110px;
      height:110px;
      border-radius:50%;
      background:var(--brand-light);
      margin:0 auto 1rem;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:3rem;
      color:var(--brand);
      border:3px solid var(--brand);
      transition:background 0.3s, color 0.3s;
    }
    .team-card:hover .team-avatar{
      background:var(--brand);
      color:var(--white);
    }
    .team-card h4{
      font-family:var(--font-h);
      font-size:1.1rem;
      font-weight:600;
      margin-bottom:0.1rem;
      color:var(--ink);
    }
    .team-card .team-role{
      font-family:var(--font-m);
      font-size:.7rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--brand);
      margin-bottom:0.5rem;
    }
    .team-card p{
      color:var(--muted);
      font-size:.85rem;
      font-family:var(--font-b);
      margin-bottom:0.8rem;
    }
    .team-social{
      display:flex;
      justify-content:center;
      gap:0.6rem;
    }
    .team-social a{
      width:32px;
      height:32px;
      border-radius:50%;
      border:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      transition: all 0.2s ease;
    }
    .team-social a:hover{
      background:var(--brand);
      border-color:var(--brand);
      color:var(--white);
    }

    footer{ border-top:1px solid var(--gray); padding:2.4rem 0; background:var(--dark); }
    footer p{ color:#94a3b8; font-family:var(--font-b); font-size:.85rem; margin:0; }
    .social-ic{
      width:38px; height:38px; border-radius:50%; border:1px solid var(--gray); color:#e5e7eb;
      display:flex; align-items:center; justify-content:center; transition:all .2s ease;
    }
    .social-ic:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

    .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
    .reveal.in-view{ opacity:1; transform:translateY(0); }

    .cart-badge{
      position:relative;
    }
    .cart-badge .badge-count{
      position:absolute;
      top:-6px;
      right:-8px;
      background:var(--red);
      color:#fff;
      font-size:.6rem;
      font-family:var(--font-m);
      font-weight:700;
      width:18px;
      height:18px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .nav-cart-link{
      font-size:1.2rem;
      color:var(--charcoal);
      padding:0.3rem 0.6rem;
      border-radius:50px;
      transition:color 0.2s, background 0.2s;
    }
    .nav-cart-link:hover{ color:var(--brand); background:var(--brand-light); }

    .shop-card.hidden{ display:none; }

    .brand-mark {font-family:var(--font-h);font-size:28px;font-weight:700;letter-spacing:.06em;color:var(--blue);line-height:1;display:flex;align-items:center;gap:10px;text-decoration:none}