:root{
    --hbg:#0a0710;
    --hbg-2:#0d0913;
    --hsurface:#150f1f;
    --hsurface-2:#1b1428;
    --hborder:#2a2036;
    --hpink:#e91e8c;
    --hpink-light:#ff5fb8;
    --hpurple:#8b5cf6;
    --hpurple-deep:#6d28d9;
    --htext:#f5f0fa;
    --hmuted:#a89bb8;
    --hmuted-2:#786a8c;
  }
  html{scroll-behavior:smooth;}
  body{
    background:var(--hbg);
    color:var(--htext);
    overflow-x:hidden;
    position:relative;
  }
  /* ambient background glow */
  body::before{
    content:'';
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 700px 500px at 15% 8%, rgba(233,30,140,0.14), transparent 60%),
      radial-gradient(ellipse 800px 600px at 90% 25%, rgba(139,92,246,0.13), transparent 60%),
      radial-gradient(ellipse 600px 500px at 50% 90%, rgba(233,30,140,0.08), transparent 60%);
    pointer-events:none;
    z-index:0;
    animation: ambientDrift 18s ease-in-out infinite alternate;
  }
  @keyframes ambientDrift{
    0%{ background-position: 0 0, 0 0, 0 0; }
    100%{ background-position: 30px -20px, -20px 30px, 10px -10px; }
  }
  .wrap{position:relative;z-index:1;}
  a{color:inherit;text-decoration:none;}
  .inner-container{max-width:1180px;margin:0 auto;padding-left:32px;padding-right:32px;}
  @media(max-width:640px){.inner-container{padding-left:20px;padding-right:20px;}}
  @media(min-width:768px){.wrap{margin-left:-12px;margin-top:-12px;}}
 .btn-ui{
    font-weight:600; font-size:14px; padding:11px 22px; border-radius:999px;
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    /*border:1px solid transparent;*/ transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn-ui:hover{
    transform:translateY(-2px);
    color: var(--bs-btn-hover-color);
    background-color: var(--hpink);
    border-color: inherit;
  }
  .btn-primary-ui{
    background:var(--hpink);
    color:#fff; box-shadow:0 6px 20px rgba(233,30,140,0.35);
  }
  .btn-primary-ui:hover{box-shadow:0 10px 28px rgba(233,30,140,0.5); filter:brightness(1.1);}
  .btn-ghost{
    background:var(--hpink); 
    border-color:transparent; 
    color:#fff; box-shadow:0 6px 20px rgba(233,30,140,0.35);
  }
  .btn-ghost:hover{filter:brightness(1.1); box-shadow:0 10px 28px rgba(233,30,140,0.5); border-color: var(--hpink);}
  .btn-lg{padding:15px 30px;font-size:15.5px;}
  /* ============================================ */
  /* ========== HERO — IMMERSIVE GF SHOWCASE ===== */
  /* ============================================ */
  .hero-immersive{
    position:relative;
    min-height:65vh;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  /* Background media layer */
  .hero-bg-layer{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .hero-bg-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1);
    will-change:opacity;
  }
  .hero-bg-slide.active{
    opacity:1;
  }
  .hero-bg-slide img,
  .hero-bg-slide video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
    filter:brightness(0.5) saturate(1.2);
    transform:scale(1.05);
    transition:transform 8s cubic-bezier(0.25,0.1,0.25,1);
  }
  .hero-bg-slide.active img,
  .hero-bg-slide.active video{
    transform:scale(1);
    animation:heroZoom 8s cubic-bezier(0.25,0.1,0.25,1) forwards;
  }
  @keyframes heroZoom{
    0%{transform:scale(1.08);}
    100%{transform:scale(1);}
  }

  /* Cinematic overlays */
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(180deg, rgba(10,7,16,0.3) 0%, rgba(10,7,16,0.1) 30%, rgba(10,7,16,0.6) 70%, rgba(10,7,16,0.95) 100%),
      linear-gradient(90deg, rgba(10,7,16,0.7) 0%, transparent 50%, rgba(10,7,16,0.4) 100%);
    pointer-events:none;
  }
  .hero-vignette{
    position:absolute;
    inset:0;
    z-index:1;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(10,7,16,0.6) 100%);
    pointer-events:none;
  }

  /* Animated gradient shimmer overlay */
  .hero-shimmer{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(120deg, transparent 30%, rgba(233,30,140,0.08) 50%, transparent 70%);
    background-size:200% 100%;
    animation:shimmerMove 6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes shimmerMove{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
  }

  /* Content layer */
  .hero-content{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    min-height:65vh;
    padding-top:20px;
    padding-bottom:140px;
  }
  @media(max-width:900px){
    .hero-content{
      grid-template-columns:1fr;
      text-align:center;
      padding-top:40px;
      padding-bottom:100px;
      gap:40px;
    }
  }

  /* Left column — text */
  .hero-text{
    animation:fadeSlideUp 1s cubic-bezier(0.4,0,0.2,1) 0.3s both;
  }
  @keyframes fadeSlideUp{
    from{opacity:0;transform:translateY(40px);}
    to{opacity:1;transform:translateY(0);}
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; letter-spacing:.04em;
    color:var(--hpink-light); background:rgba(233,30,140,0.1);
    border:1px solid rgba(233,30,140,0.3); padding:7px 14px; border-radius:999px;
    margin-bottom:22px;
    backdrop-filter:blur(12px);
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--hpink-light);animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

  h1.headline{
    font-size:clamp(36px,5vw,64px); line-height:1.04; font-weight:900; letter-spacing:-0.03em;
    margin-bottom:22px;
  }
  h1.headline .grad{
    background:linear-gradient(120deg,var(--hpink-light),#fff 40%, var(--hpurple) 70%, var(--hpink-light));
    background-size:300% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shine 6s linear infinite;
  }
  @keyframes shine{to{background-position:300% center;}}

  .sub{font-size:17px; color:rgba(255,255,255,0.75); max-width:520px; line-height:1.65; margin-bottom:32px;}
  @media(max-width:900px){.sub{margin-left:auto;margin-right:auto;}}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  @media(max-width:900px){.hero-ctas{justify-content:center;}}

  .hero-note{margin-top:20px; font-size:13px; color:rgba(255,255,255,0.45); display:flex; gap:16px; flex-wrap:wrap;}
  @media(max-width:900px){.hero-note{justify-content:center;}}
  .hero-note span{display:flex;align-items:center;gap:6px;}

  /* Right column — GF showcase card */
  .hero-showcase{
    display:flex;
    justify-content:center;
    align-items:center;
    animation:fadeSlideUp 1s cubic-bezier(0.4,0,0.2,1) 0.6s both;
  }
  @media(max-width:900px){
    .hero-showcase{order:-1;}
  }

  .gf-card-stack{
    position:relative;
    width:380px;
    height:536px;
    perspective:1200px;
  }
  @media(max-width:480px){
    .gf-card-stack{width:280px;height:420px;}
  }

  .gf-card{
    position:absolute;
    inset:0;
    border-radius:24px;
    overflow:hidden;
    background:var(--hsurface);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:
      0 25px 60px rgba(0,0,0,0.5),
      0 0 80px rgba(233,30,140,0.15),
      inset 0 1px 0 rgba(255,255,255,0.1);
    opacity:0;
    transform:scale(0.88) translateY(30px) rotateY(-5deg);
    transition:all 0.8s cubic-bezier(0.4,0,0.2,1);
    cursor:pointer;
  }
  .gf-card.active{
    opacity:1;
    transform:scale(1) translateY(0) rotateY(0);
    z-index:3;
  }
  .gf-card.prev{
    opacity:0.4;
    transform:scale(0.9) translateX(-40px) translateY(10px) rotateY(8deg);
    z-index:1;
    filter:blur(2px);
  }
  .gf-card.next{
    opacity:0.4;
    transform:scale(0.9) translateX(40px) translateY(10px) rotateY(-8deg);
    z-index:1;
    filter:blur(2px);
  }

  .gf-card-media{
    position:relative;
    width:100%;
    height:65%;
    overflow:hidden;
  }
  .gf-card-media img,
  .gf-card-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.6s ease;
  }
  .gf-card:hover .gf-card-media img,
  .gf-card:hover .gf-card-media video{
    transform:scale(1.05);
  }
  .gf-card-media::after{
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:60%;
    background:linear-gradient(to top, var(--hsurface) 0%, transparent 100%);
    pointer-events:none;
  }

  /* Video play indicator */
  .video-indicator{
    position:absolute;
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(233,30,140,0.8);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    z-index:2;
    animation:pulseBorder 2s ease-in-out infinite;
    box-shadow:0 0 20px rgba(233,30,140,0.4);
  }
  @keyframes pulseBorder{
    0%,100%{box-shadow:0 0 20px rgba(233,30,140,0.4);}
    50%{box-shadow:0 0 30px rgba(233,30,140,0.7);}
  }

  /* Badge */
  .gf-badge{
    position:absolute;
    top:16px;
    left:16px;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    font-family:'Outfit',sans-serif;
    letter-spacing:.04em;
    background:linear-gradient(135deg,var(--hpink),var(--hpurple));
    color:#fff;
    z-index:2;
    box-shadow:0 4px 16px rgba(233,30,140,0.4);
  }

  .gf-card-info{
    padding:20px 22px;
    position:relative;
  }
  .gf-card-name{
    font-family:'Outfit',sans-serif;
    font-size:22px;
    font-weight:700;
    margin-bottom:4px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .gf-card-name .online{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3ad0c2;
    box-shadow:0 0 8px rgba(58,208,194,0.6);
    animation:pulse 1.6s infinite;
  }
  .gf-card-age{
    font-size:13px;
    color:var(--hmuted);
    margin-bottom:10px;
  }
  .gf-card-desc{
    font-size:13px;
    color:rgba(255,255,255,0.6);
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:14px;
  }
  .gf-card-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .gf-tag{
    font-size:11px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(233,30,140,0.1);
    border:1px solid rgba(233,30,140,0.2);
    color:var(--hpink-light);
    font-weight:600;
    font-family:'Outfit',sans-serif;
  }

  /* Floating particles around hero */
  .hero-particles{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
  }
  .particle{
    position:absolute;
    border-radius:50%;
    background:var(--hpink);
    opacity:0.2;
    animation:particleFloat linear infinite;
  }
  @keyframes particleFloat{
    0%{transform:translateY(100vh) rotate(0deg);opacity:0;}
    10%{opacity:0.3;}
    90%{opacity:0.3;}
    100%{transform:translateY(-100px) rotate(360deg);opacity:0;}
  }

  /* Slide navigation dots */
  .hero-dots{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    display:flex;
    gap:8px;
    align-items:center;
  }
  .hero-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.3);
    border:none;
    cursor:pointer;
    transition:all 0.3s ease;
    padding:0;
  }
  .hero-dot.active{
    width:28px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--hpink),var(--hpurple));
    box-shadow:0 0 12px rgba(233,30,140,0.5);
  }

  /* Progress bar */
  .hero-progress{
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
    z-index:10;
    background:linear-gradient(90deg,var(--hpink),var(--hpurple));
    border-radius:0 999px 999px 0;
    transition:width 0.1s linear;
    box-shadow:0 0 10px rgba(233,30,140,0.4);
  }

  /* Floating glassmorphism elements */
  .hero-float{
    position:absolute;
    z-index:3;
    pointer-events:none;
  }
  .glass-bubble{
    backdrop-filter:blur(16px);
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    animation:floatBubble 5s ease-in-out infinite;
    white-space:nowrap;
  }
  @keyframes floatBubble{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
  }
  .glass-bubble .gb-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    background:linear-gradient(135deg,rgba(233,30,140,0.3),rgba(139,92,246,0.3));
  }
  .glass-bubble .gb-text{
    font-size:13px;
    font-weight:600;
    font-family:'Outfit',sans-serif;
  }
  .glass-bubble .gb-sub{
    font-size:11px;
    color:var(--hmuted);
  }

  .float-1{top:20%;right:5%;animation-delay:0s;}
  .float-2{bottom:25%;left:3%;animation-delay:1.5s;}
  .float-3{top:35%;left:8%;animation-delay:0.8s;}
  @media(max-width:900px){
    .float-1,.float-2,.float-3{display:none;}
  }

  /* ============================================ */
  /* ========== REST OF PAGE (unchanged) ======== */
  /* ============================================ */

  /* ---------- Trust strip ---------- */
  .trust{
    border-top:1px solid var(--hborder); border-bottom:1px solid var(--hborder);
    padding:22px 0; background:rgba(255,255,255,0.015);
  }
  .trust .inner-container{
    display:flex; flex-wrap:wrap; gap:28px; justify-content:center;
    font-size:13.5px; color:var(--hmuted);
  }
  .trust span{display:flex; align-items:center; gap:8px;}
  .trust .ic{font-size:16px;}

  /* ---------- Generic section ---------- */
  section{padding:88px 0;}
  @media(max-width:640px){section{padding:56px 0;}}
  .section-head{text-align:center; max-width:640px; margin:0 auto 52px;}
  .section-head h2{font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-0.01em; margin-bottom:14px;}
  .section-head p{color:var(--hmuted); font-size:15.5px; line-height:1.6;}

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

  /* ---------- Value props ---------- */
  .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.grid-4{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.grid-4{grid-template-columns:1fr;}}
  .card{
    background:var(--hsurface); border:1px solid var(--hborder); border-radius:18px;
    padding:26px 22px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .card:hover{transform:translateY(-6px); border-color:rgba(233,30,140,0.4); box-shadow:0 16px 40px rgba(233,30,140,0.12);}
  .card .icon{
    width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(233,30,140,0.18), rgba(139,92,246,0.18));
    font-size:20px; margin-bottom:16px;
  }
  .card h3{font-size:16.5px; font-weight:600; margin-bottom:8px; color: #fff;}
  .card p{color:var(--hmuted); font-size:14px; line-height:1.6;}

  /* ---------- Featured companions ---------- */
  .companions{background:var(--hbg-2); border-top:1px solid var(--hborder); border-bottom:1px solid var(--hborder);}
  .grid-6{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  @media(max-width:1000px){.grid-6{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.grid-6{grid-template-columns:repeat(2,1fr);}}
  .profile-card{
    background:var(--hsurface); border:1px solid var(--hborder); border-radius:18px; overflow:hidden;
    transition:transform .25s ease, border-color .25s ease;
  }
  .profile-card:hover{transform:translateY(-6px) scale(1.02); border-color:var(--hpink);}
  .avatar{
    height:300px; display:flex; align-items:center; justify-content:center; font-size:44px;
    position:relative; overflow:hidden;
  }
  .avatar img{
    width:100%;height:100%;object-fit:cover;
  }
  .avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(10,7,16,0.55), transparent 60%);}
  .p-info{padding:14px 14px 16px;}
  .p-info .name{font-weight:600; font-size:14.5px; display:flex; justify-content:space-between; align-items:center;}
  .p-info .tag{color:var(--hmuted); font-size:12px; margin:6px 0 12px; line-height:1.4; display: -webkit-box; max-height: calc(1.4em * 3); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; align-items: center;}
  .p-cta{
    display:block; text-align:center; font-size:12.5px; font-weight:600; padding:8px 0;
    border-radius:999px; border:1px solid var(--hborder); color:var(--hmuted); transition:all .2s;
  }
  .p-cta:hover{background:linear-gradient(135deg,var(--hpink),var(--hpurple)); border-color:transparent; color:#fff;}
  .see-all{text-align:center; margin-top:36px;}

  /* ---------- Features grid ---------- */
  .grid-8{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.grid-8{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.grid-8{grid-template-columns:1fr;}}

  /* ---------- Use cases ---------- */
  .use-case{display:flex; gap:16px; align-items:flex-start;}
  .use-case .icon{flex-shrink:0;}

  /* ---------- How it works ---------- */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative;}
  @media(max-width:800px){.steps{grid-template-columns:1fr;}}
  .step{position:relative; padding-left:0;}
  .step .num{
    font-size:13px; font-weight:700; color:var(--hpink-light); letter-spacing:.05em;
    margin-bottom:14px; display:block;
  }
  .step h3{font-size:18px; margin-bottom:8px;}
  .step p{color:var(--hmuted); font-size:14.5px; line-height:1.6;}

  /* ---------- Pricing ---------- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:860px){.grid-3{grid-template-columns:1fr; max-width:400px; margin:0 auto;}}
  .plan{
    background:var(--hsurface); border:1px solid var(--hborder); border-radius:20px; padding:32px 26px;
    display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease;
  }
  .plan:hover{transform:translateY(-6px);}
  .plan.featured{
    border-color:var(--hpink); position:relative;
    background:linear-gradient(180deg, rgba(233,30,140,0.08), var(--hsurface) 40%);
  }
  .plan.featured::before{
    content:'Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,var(--hpink),var(--hpurple)); font-size:11px; font-weight:700;
    padding:5px 14px; border-radius:999px; letter-spacing:.03em;
  }
  .plan .pname{font-size:15px; color:var(--hmuted); font-weight:600; margin-bottom:10px;}
  .plan .price{font-size:34px; font-weight:800; margin-bottom:18px;}
  .plan .price span{font-size:14px; color:var(--hmuted-2); font-weight:500;}
  .plan ul{list-style:none; margin-bottom:26px; flex:1;}
  .plan li{font-size:13.8px; color:var(--hmuted); padding:8px 0; border-bottom:1px solid var(--hborder); display:flex; gap:8px;}
  .plan li:last-child{border-bottom:none;}
  .plan .check{color:var(--hpink-light);}

  /* ---------- FAQ ---------- */
  .faq{max-width:760px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--hborder);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; color:var(--htext);
    font-family:'Outfit',sans-serif; font-size:16px; font-weight:600; padding:20px 4px;
    display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  }
  .faq-q .plus{transition:transform .3s ease; color:var(--hpink-light); font-size:20px;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
  .faq-a p{color:var(--hmuted); font-size:14.5px; line-height:1.65; padding:0 4px 20px;}

  /* ---------- Final CTA ---------- */
  .final-cta{
    text-align:center; border-radius:28px; padding:70px 32px; position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(233,30,140,0.14), rgba(139,92,246,0.14));
    border:1px solid rgba(233,30,140,0.25);
  }
  .final-cta::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 20% 20%, rgba(233,30,140,0.25), transparent 45%),
               radial-gradient(circle at 80% 80%, rgba(139,92,246,0.25), transparent 45%);
    animation:ambientDrift 10s ease-in-out infinite alternate;
  }
  .final-cta h2{font-size:clamp(26px,3.4vw,36px); margin-bottom:14px; position:relative;}
  .final-cta p{color:var(--hmuted); margin-bottom:28px; position:relative;}
  .final-cta .btn-ui{position:relative;}

  /* ---------- Footer ---------- */
  .footer{
    border-top:1px solid var(--hborder);
    padding:60px 0 0;
    background:var(--hbg-2);
    color:var(--hmuted);
    font-size:14px;
  }
  .footer .inner-container{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }
  .footer .row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr;
    gap:32px;
    margin-bottom:40px;
  }
  @media(max-width:900px){
    .footer .row{
      grid-template-columns:1fr 1fr;
    }
  }
  @media(max-width:520px){
    .footer .row{
      grid-template-columns:1fr;
    }
  }
  .footer-logo{
    display:inline-block;
    text-decoration:none;
  }
  .footer-logo img{
    height:40px;
    filter:brightness(1.1);
    transition:filter 0.3s ease;
  }
  .footer-logo img:hover{
    filter:brightness(1.3) drop-shadow(0 0 8px rgba(233,30,140,0.4));
  }
  .footer p{
    color:var(--hmuted);
    line-height:1.6;
    margin:0;
  }
  .footer .mt-3{ margin-top:16px; }
  .footer .mb-4{ margin-bottom:0; }
  .social-icons{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--hmuted-2);
    font-size:13px;
  }
  .social-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(233,30,140,0.1);
    border:1px solid rgba(233,30,140,0.2);
    transition:all 0.3s ease;
  }
  .social-icon:hover{
    background:rgba(233,30,140,0.2);
    border-color:var(--hpink);
    transform:translateY(-2px);
    box-shadow:0 4px 16px rgba(233,30,140,0.3);
  }
  .social-icon img{
    width:18px;
    height:18px;
    filter:brightness(0) invert(1);
    opacity:0.7;
    transition:opacity 0.3s ease;
  }
  .social-icon:hover img{
    opacity:1;
  }
  .footer-title{
    font-family:'Outfit',sans-serif;
    font-size:14px;
    font-weight:700;
    color:var(--htext);
    margin-bottom:16px;
    letter-spacing:0.02em;
    position:relative;
    padding-bottom:10px;
  }
  .footer-title::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:24px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--hpink),var(--hpurple));
  }
  .footer .list-unstyled{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer .list-unstyled li{
    margin-bottom:10px;
  }
  .footer-link{
    color:var(--hmuted) !important;
    text-decoration:none;
    font-size:13.5px !important;
    transition:color 0.2s ease, padding-left 0.2s ease;
    display:inline-block;
  }
  .footer-link:hover{
    color:var(--hpink-light) !important;
    padding-left:4px;
  }
  .footer-bottom{
    border-top:1px solid var(--hborder);
    padding:20px 0;
    margin-top:10px;
  }
  .footer-copyright{
    color:var(--hmuted-2);
    font-size:12.5px;
    line-height:1.7;
  }
  .footer-copyright a{
    color:var(--hmuted);
    text-decoration:none;
    transition:color 0.2s;
  }
  .footer-copyright a:hover{
    color:var(--hpink-light);
  }
  .footer .small{
    color:var(--hmuted-2);
    font-size:11px;
    margin-top:4px;
  }

  /* ---------- Loading spinner ---------- */
  .hero-loader{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--hbg);
    transition:opacity 0.6s ease;
  }
  .hero-loader.hidden{
    opacity:0;
    pointer-events:none;
  }
  .loader-spinner{
    width:48px;
    height:48px;
    border:3px solid rgba(255,255,255,0.1);
    border-top-color:var(--hpink);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  svg{width:30px;height:30px;}
  .ic svg{width:16px;height:16px;}
  .hero-note svg{width:13px;height:13px;}
  a.grey-btn{color:#ffffff}

  /* For Related Blogs */
    .recent_post .blog-card {
       border: 2px solid #333;
       border-radius: 12px;
       -webkit-transition: .2s;
       transition: all .2s ease;
       cursor: pointer;
       padding:0px !important;
    }
    .recent_post .blog-card .blog-img-div{
        position: relative;
        height:150px;
    }
    .recent_post .blog-card .blog-img-div .blog-img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 12px 12px 0 0;
        vertical-align: middle;
    }
    .recent_post .blog-card .blog-title-div {
        background-color: #000000;
        backdrop-filter: blur(5px);
        border-radius: 0 0 12px 12px;
        z-index: 1;
        overflow: hidden;
        position: relative;
    }
    .recent_post .blog-card .blog-title-div .blog-title-bg-img
    {
        position: absolute;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -webkit-filter: blur(5px);
        filter: blur(5px);
        z-index: -1;
    }
    .recent_post .blog-title-text
    {
        z-index: 1;
        padding: 16px;
        position: relative;
        min-height: 115px;
    }
    .recent_post .blog-card .blog-title-div .blog-date {
        color:rgb(255 255 255 / 80%);
        margin-bottom: 5px;
        font-size: 15px;
        /* font-family: Inter !important; */
    }
    .recent_post .blog-card .blog-title-div .blog-title
    {
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        margin: 0;
        text-align: left;
    }
    .recent_post .blog-card .blog-title-div::before
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #1a1a1acc;
        background: #000000;
    }
    .recent_post .blog-card:hover {
        -webkit-box-shadow: rgba(255, 92, 138, .2) 0 7px 29px 0;
        box-shadow: rgba(255, 92, 138, .2) 0 7px 29px 0;
    }
    .recent_post .truncate-2-lines {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .recent_post .blogs-title{
        font-size:72px !important;
    }
    .recent_post .blogs-subtitle{
        max-width: 500px;
        margin:0 auto;
    }
    .recent_post .page-title-container{
        border-bottom:0px;
        padding: 25px 0px 60px 0px;
    }
    .recent_post .recent_post_inner h2 {
        font-size: 50px;
        margin: 15px;
        color: #edeaf1;
        font-weight: 600;
        letter-spacing: .1px;
        text-align:center;
    }
    .recent_post .recent_post_inner>h4 {
      margin-top: 0;
      max-width: 460px;
      font-size: 20px;
      margin-left: auto;
      margin-right: auto;
      color: #adaab0;
      font-weight: 200;
      letter-spacing: .2px;
      text-transform: none;
      line-height: 1.4;
      text-align:center;
    }
    #view-all {
        background-color: var(--primary-color);
        color: var(--text-color);
        border: 0px;
    }
    .mb-6{
        margin-bottom: 6rem !important;
    }