@font-face {
    font-family: "Coolvetica-Bold";
    src: url("../fonts/coolvetica/coolvetica/CoolveticaRg-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Coolvetica";
    src: url("../fonts/coolvetica/coolvetica/Coolvetica-Rg.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/Inter_Tight/static/InterTight-Light.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/Inter_Tight/static/InterTight-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/Inter_Tight/static/InterTight-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Tight";
    src: url("../fonts/Inter_Tight/static/InterTight-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@layer utilities {
    .font-inter-tight {
        font-family: "Inter Tight";
    }
}
  :root {
    --p-bg:       #1c1c1c;
    --p-surface:  #242424;
    --p-surface2: #2e2e2e;
    --p-border:   #333;
    --p-border2:  #444;
    --p-gold:     #FFB300;
    --p-gold-dim: #996B00;
    --p-gold-bg:  rgba(255,179,0,0.09);
    --p-text:     #F5F3EE;
    --p-mid:      #A09D97;
    --p-dim:      #666360;
    --p-green:    #22C55E;
    --p-green-bg: rgba(34,197,94,0.1);
    --p-green-br: rgba(34,197,94,0.28);
  }


/* ==========================================
   1. RESET & BASE VARIABLE CONFIGURATION
   ========================================== */
html {
    /* scroll-behavior: smooth; */
    font-family: 'Inter Tight';
    color: var(--text-primary, #ffffff);
}

body {
    background-color: transparent; /* Solid background removed so atmosphere canvas renders cleanly */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: auto !important;
}


/* --- LOADER STYLES --- */
.loader-wrapper {
    position: fixed;
    inset: 0;
    background: #1C1C1C;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: transform .8s cubic-bezier(.77,0,.175,1);
}

.loader-content{
    width: min(90%,520px);
}

.loader-logo{
    font-size: clamp(50px,7vw,90px);
    color:#f4efe8;
    margin:0;
    font-family: 'Inter Tight';
    font-weight: 900;
    display:flex;
    justify-content: center;
    align-items:center;
}
.loader-logo span{
    font-family: 'Coolvetica-Bold';   
    letter-spacing: 2px;
}

.loader-logo i{
    width:14px;
    height:14px;
    background:#FFB300;
    border-radius:50%;
    display:block;
    margin-left:18px;
}

.loader-progress{
    margin-top:35px;
    width:100%;
    height:3px;
    background:#3d3d3d;
    overflow:hidden;
    border-radius:50px;
}

.loader-bar{
    width:0%;
    height:100%;
    background: linear-gradient(90deg,#FFB300 0%, #FFD97E 36%, #FFB300 100%);
    transition:width .15s linear;
}

.loader-bottom{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    color:#777;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-family: 'Inter Tight';
}

.loader-bottom span:first-child{
    color:#9c9c9c;
    font-weight:600;
}

body.loaded .loader-wrapper{
    transform:translateY(-100%);
}


.section-nav{
    position:fixed;
    right:10px;
    top:10%;
    width:130px;
    display:flex;
    flex-direction:column;
    gap:5px;
    z-index:9999;
    transition:transform .5s ease;
}

.section-nav.scrolled{
    transform:translateY(18px);
}

.nav-link{
    display: inline-block;
    position: relative;
}

.nav-link::before {
  transition: 300ms;
  height: 2px;
  content: "";
  position: absolute;
  background: linear-gradient(90deg,#FFB300 0%, #f9d98f 50%);;
}

.nav-link-ltr::before {
  width: 0%;
  bottom: -5px;
}

.nav-link-ltr:hover::before {
  width: 100%;
}

.nav-item{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    text-decoration:none;
    color:#9d9d9d;
    font-size:12px;
    font-weight:400;

    transition:.35s;
}

.nav-item span{
    white-space:nowrap;
    margin-right:12px;
}

.nav-line{
    flex:1;
    height:2px;
    border-radius:100px;
    background:#555;
    transition:.4s ease;
}

.nav-item.active{
    color:#fff;
    font-weight:700;
}

.nav-item.active .nav-line{
    background: linear-gradient(90deg,#FFB300 0%, #f9d98f 100%);
}

.nav-item:hover{
    color:#fff;
}

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


#mobileFixNav { display: grid; gap: 6px; width: 40px;  place-content: center; }
#mobileFixNav span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: white; transition: transform .2s ease, opacity .2s ease; }
#mobileFixNav.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#mobileFixNav.is-open span:nth-child(2) { opacity: 0; }
#mobileFixNav.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.fix-mobile-nav-menu { display: none; position: absolute; top: 50px; right: 0; z-index: 99; width: min(200px, calc(100vw - 1.5rem)); padding: .65rem; flex-direction: column; gap: .2rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; background: rgba(14,14,14,.94); backdrop-filter: blur(16px); box-shadow: 0 16px 35px rgba(0,0,0,.35); }
.fix-mobile-nav-menu.open { display: flex !important; }



/* Chrome, Edge, Safari */
::selection {
    background: #FFB300;
    /* color: #000; */
}

/* Firefox */
::-moz-selection {
    background: #FFB300;
    /* color: #000; */
}

/* H1 70px
H2 50px
H3 45px
H4 40px
H5 28px */
h1{
    font-size: 70px;
    font-family: 'Coolvetica', 'Inter Tight';
}
h2{
    font-size: 50px;
    font-family: 'Coolvetica-Bold', 'Inter Tight';
    text-transform: capitalize;
}

h3 {
    font-family: 'Coolvetica-Bold', 'Inter Tight';
    text-transform: capitalize;
    letter-spacing: 2px;
    font-size: 45px;
}
h4{
    font-family: 'Coolvetica-Bold', 'Inter Tight';
    font-size: 40px;
}
h5{
    font-family: 'Coolvetica-Bold', 'Inter Tight';
    font-size: 28px;
    letter-spacing: 2px;
}
a{
    cursor: pointer;
}
p {
    font-family: 'Inter Tight';
}
ul li{
    font-family: 'Inter Tight';
}
/* ================================
   BACKGROUND ANIMATION
   ================================ */
#atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background: #1C1C1C;
}

#webgl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}


/* Keep site content above the canvases */
div[data-scroll-container],
main,
header,
footer,
nav,
section {
    position: relative;
    z-index: 2;
}

/* Structural Layout */
main {
    position: relative;
    z-index: 1;
}


.container {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

/* Hero Section style start */

/* Profile Animation */
.elastic-stack{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    row-gap:12px;
}

.avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid white;
    background-color: white;
    margin-left:-16px;
    transition:700ms;
    transition-timing-function:
        linear(
            0,
            .79 14.4%,
            1.026 22.4%,
            1.164 31.2%,
            1.207 38.2%,
            1.208 46.2%,
            1.033 80%,
            1
        );
    position:relative;
    z-index:1;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar.active{
    transform:scale(1.25);
    z-index:100;
}

.review-card{
    height: max-content;
    opacity:0;
    filter:blur(2px);
    transform:translateY(20px);
    pointer-events:none;
}

/* button hover effect */
.hero-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    color: #000;
    text-decoration: none;
    overflow: visible; /* important */
}

.hero-btn:hover{
    cursor: pointer;
}

.hero-btn img{
    position: absolute;
    right: -48px; /* 38px image + 10px gap */
    top: 50%;
    width: 38px;
    height: 38px; /* button height ke barabar */
    transform: translateY(-50%) scale(0.5);
    opacity: 0;
    transition: all .35s ease;
    pointer-events: none;
}

.hero-btn:hover img{
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.hero-title::first-line{
    line-height: 85px;
}

.hero-text-slider{
    font-family: 'Coolvetica-Bold', 'Inter Tight';
    letter-spacing: 1px;
}

/* Hero Section style end */

/* section 3 */
/* Core 3D engine properties */
/* Container stays naturally inline within standard document grids */
#scroll-pin-wrapper {
    position: relative;
    z-index: 10;
}

.animation-inner-sticky-canvas {
    width: 100%;
    height: 100vh;
    will-change: transform;
}

.container-3d-perspective {
    perspective: 1400px;
}

.flip-card-inner-box {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%;
    height: 100%;
}

.face-side-front, 
.face-side-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    inset: 0;
}

.face-side-back {
    transform: rotateY(180deg);
}

.flip-title .line {
    overflow: hidden;
    display: block;
    transform-style: preserve-3d;
}


/* Section 5 */
.lf-wrap {
      position: relative;
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      border-radius: 20px;
      overflow: hidden;
      font-family: 'Inter Tight';
  }
  .lf-svg {
      display: block;
      width: 100%;
      height: auto;
  }
  .lf-line {
      fill: none;
      stroke: rgba(255,255,255,0.16);
      stroke-width: 1.4;
  }
  .lf-fo-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
  }
  .lf-node {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 22px 14px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.055);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.14);
      white-space: nowrap;
  }
  .lf-node.lf-key {
      background: linear-gradient(90deg, #FFB300 0%, #FFCE55 50%, #FFB300 100%);
      border: 1px solid rgba(255,255,255,0.60);
  }
  .lf-node.lf-key .lf-label {
      color: #0A0A0A;
      font-weight: 600;
  }
  .lf-counter-pill {
      display: flex;
      align-items: center;
      padding: 7px 15px;
      border-radius: 999px;
      background: #FFFFFF;
      border: 1px solid #EAEAEA;
      color: #0A0A0A;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
  }
  .lf-label {
      color: #F3F1EC;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.1px;
  }
  .lf-icon { color: #FFFFFF; opacity: 0.95; }
  .lf-icon circle.lf-badge { fill: currentColor; fill-opacity: 0.14; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1.2; }
  .lf-icon .lf-glyph { fill: currentColor; }
  @keyframes lfColorDown { 0% { color: #FFFFFF; } 0%, 100% { color: #FFB300; } }
  .lf-tDown { animation: lfColorDown 3s linear infinite; }
  .lf-tDown2 { animation: lfColorDown 3s linear infinite; animation-delay: -1.5s; }

  /* ===== Breakpoint switch ===== */
  .lf-desktop-only { display: block; }
  .lf-mobile-only { display: none; }

  @media (max-width: 768px) {
    .lf-label{font-size: 13px; font-weight: normal;}
    .lf-desktop-only { display: none; }
    .lf-mobile-only { display: block; }
    .lf-mobile-only .lf-wrap { max-width: 420px; }
  }

/* section 6 */
.section-6{
    overflow: hidden;
}
.portfolio-content{
    display: none;
}

.portfolio-content.active{
    display: block;
}

.portfolio-tabs{
    position:relative;
    display:inline-flex;
    padding:6px;
    border-radius:999px;
    background: transparent;
    backdrop-filter: blur(2px);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
}

.portfolio-tab{
    position:relative;
    z-index:2;
    border:none;
    background:transparent;
    color:#fff;
    padding:5px 28px;
    border-radius:999px;
    cursor:pointer;
    transition:.3s;
    font-size:14px;
    font-family:'Inter Tight';
    white-space:nowrap;
}

.portfolio-tab.active{
    color:#111;
}

.portfolio-tab-slider{
    position:absolute;
    top:6px;
    left:0;
    height:calc(100% - 12px);
    border-radius:999px;
    background:linear-gradient(90deg,#FFB300,#FFD54A);
    z-index:1;
}

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

    .portfolio-tabs{
        padding:4px;
    }

    .portfolio-tab{
        padding:10px 18px;
        font-size:13px;
    }

    .portfolio-tab-slider{
        top:4px;
        height:calc(100% - 8px);
    }

}

/* Mobile */
@media (max-width:480px){

    .portfolio-tabs{
        width:100%;
        max-width:360px;
    }

    .portfolio-tab{
        flex:1;
        padding:10px 8px;
        font-size:12px;
        text-align:center;
    }

    .portfolio-tab-slider{
        top:4px;
        height:calc(100% - 8px);
    }

}

.portfolio-wrapper{
    position:relative;
    margin:auto;
    overflow:hidden;
}

.portfolio-slider{
    display:flex;
    width:max-content;
}

.portfolio-card{
    flex-shrink:0;
    cursor: none;
}

.portfolio-cursor-glass{
    position:absolute;
    left:0;
    top:0;

    width:110px;
    height:110px;

    border-radius:50%;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:25px;
    padding: 10px;

    pointer-events:none;

    opacity:0;
    scale:.5;

    z-index:20;
}

.portfolio-slider{
    display:flex;
    width:max-content;
}

#closePortfolio{
    position: absolute;
    left: 5px;
    z-index: 10000;
}

#modalContent::-webkit-scrollbar{
    width:8px;
}

#modalContent::-webkit-scrollbar-thumb{
    background:#666;
    border-radius:20px;
}

#modalContent::-webkit-scrollbar-track{
    background:transparent;
}

body.modal-open{
    overflow:hidden;
}

.portfolio-card{
    transition:.4s;
}

.portfolio-card:hover{
    transform:translateY(-8px);
}

/* section-7 */
/* Scroll-based horizontal fixed width & transform behavior cleanup */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    overflow: visible;
}

.video-testimonial-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.video-card {
    position: relative;
    cursor: none;
}

/* Center Glass Play/Pause Button */
.center-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    z-index: 30;
    transition: all 0.3s ease;
    pointer-events: none;
}

.video-card.playing .center-play-btn {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.8);
}

.video-card:hover.playing .center-play-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Custom Cursor Glass */
.cursor-glass {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    pointer-events: none;
    opacity: 0;
    scale: 0.5;
    z-index: 20;
}

/* Speaker Controls */
.speaker-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    color: #fff;
    cursor: pointer;
    z-index: 50;
}

.volume-popup {
    position: absolute;
    top: 55px;
    right: 0;
    width: 50px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: 0.25s;
}

.volume-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.volume-slider {
    width: 120px;
    transform: rotate(-90deg);
    cursor: pointer;
}

/* Bottom Progress Bar Container */
.video-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.video-card.playing .video-progress-container {
    opacity: 1;
    visibility: visible;
}

.progress-bar {
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFB300;
    cursor: pointer;
}

/* Offer Section */
.offer-card{
    height:fit-content;
}
.offer-card h5{
    text-wrap: balance;
    font-family: 'Coolvetica';
}

/* section 9 */
#workflow-section{
    overflow:hidden;
}

.workflow-wrapper{
    width:100%;
    overflow:hidden;
}

.workflow-track{
    position:relative;
    display:flex;
    gap:100px;
    width:max-content;

    padding-left:150px;
}

.timeline{
    position:absolute;
    left:150px;
    top:160px;
    width:calc(100% - 300px); /* 150 left + 150 right */
    height:2px;
    z-index:1;
}

.timeline-base{
    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:2px;

    background:#3b3b3b;
}

.timeline-progress{
    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:2px;

    background:#D6A019;
}

.step-card{
    width:fit-content;
    flex-shrink:0;
    position:relative;
    z-index:2;
}

.number{
    font-size:150px;
    font-family: 'Coolvetica-Bold';
    font-weight:700;
    color:#fff;
    line-height:1;
    margin-bottom:40px;
}

.step-card p{
    max-width: 300px;
    font-size:17px;
    line-height:1.6;
}


/* section 10 */

.testimonial-slide{
    will-change: transform, opacity;
}

.testimonial-slide h3{
    letter-spacing:-2px;
}

#prevBtn,
#nextBtn{
    transition:all .35s ease;
}

#prevBtn:hover,
#nextBtn:hover{
    transform:translateY(-2px);
}

#testimonialTrack{
    overflow:hidden;
}





/* section 11 ribbon */
.ribbon-track{
    width:max-content;
    will-change:transform;
    font-family: 'Coolvetica-Bold';
}



/* section 12 */
.faq-content{
    height:0;
}

.faq-btn{
    transition:.35s;
    text-transform: capitalize;
    font-family: 'Inter Tight';
    font-size: 18px;
}


.faq-item{
    transition:.35s;
}

.plus{
    transition:.35s;
}

/* ==========================================================
   RESPONSIVE LAYER — appended
   Preserves desktop pixel-perfect design; only adjusts
   fixed-px CSS values at <= specific breakpoints.
   Breakpoints: 1536, 1440, 1280, 1024, 768, 640, 480, 375
   ========================================================== */

html, body { max-width: 100%; overflow-x: hidden; }

/* Mobile nav overlay */
#mobileNavMenu.open { display: flex; transition: 5s; }
.mobile-nav-link { position: relative; }


/* Hero title first-line huge line-height only on desktop */
@media (max-width: 1023px) {
    .hero-title::first-line { line-height: 1.05; }
}

/* Section 9 — workflow horizontal scroll */
@media (max-width: 1279px) {
    .workflow-track { gap: 70px; padding-left: 100px; }
    .timeline { left: 100px; width: calc(100% - 200px); top: 110px; }
    .step-card { width: 300px; }
    .number { font-size: 90px; margin-bottom: 45px; }
    .step-card h3 { font-size: 38px; }
    .step-card p { font-size: 16px; width: 240px; }
}
@media (max-width: 1023px) {
    .workflow-track { gap: 50px; padding-left: 60px; }
    .timeline { left: 60px; width: calc(100% - 120px); top: 90px; }
    .step-card { width: 260px; }
    .number { font-size: 76px; margin-bottom: 35px; }
    .step-card h3 { font-size: 32px; }
    .step-card p { font-size: 15px; width: 220px; }
}
@media (max-width: 767px) {
    .workflow-track { gap: 36px; padding-left: 32px; }
    .timeline { left: 32px; width: calc(100% - 64px); top: 80px;}
    .step-card { width: 220px; }
    .number { font-size: 64px; margin-bottom: 28px; }
    .step-card h3 { font-size: 26px; margin-bottom: 14px; }
    .step-card p { font-size: 14px; width: 200px; line-height: 1.5; }
}
@media (max-width: 479px) {
    .work-section{
        min-height:max-content;
    }
    .workflow-track { gap: 40px; padding-left: 24px; }
    .timeline { left: 24px; width: calc(100% - 48px); top: 65px; }
    .step-card { width:auto; }
    .number { font-size: 80px; margin-bottom: 24px; }
    .step-card h3 { font-size: 35px; }
    .step-card p { font-size: 16px; width: 180px; }
    .timeline-base{
        top: 30px;
    }
    .timeline-progress{
        top: 30px;
    }
}

/* Section 5 — funnel SVG scales down naturally via viewBox; nothing to change */

/* Portfolio cursor smaller on touch */
#modalLoader{

    background:
    linear-gradient(
    90deg,
    #151515 25%,
    #252525 50%,
    #151515 75%);

    background-size:200% 100%;

    animation:skeleton 1s linear infinite;

}

@keyframes skeleton{

    from{
        background-position:200% 0;
    }

    to{
        background-position:-200% 0;
    }

}

@media (max-width: 1023px) {
    .portfolio-cursor-glass, .cursor-glass { width: 80px; height: 80px; font-size: 18px; }
    .portfolio-card, .video-card { cursor: pointer; }
}
@media (max-width: 767px) {
    .portfolio-cursor-glass, .cursor-glass { display: none; }
}

/* Section 8 offer cards padding */
@media (max-width: 767px) {
    .offer-card, [class*="rounded-3xl"].p-8 { padding: 1.5rem; }
}

/* About section — hide extra decorative cards on smaller screens (keep image card1 only) */
.hero-word{
    background: linear-gradient(
        180deg,
        #414141 0%,
        #E3E3E3 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: 'Coolvetica-Bold';
}
.about-container{
    max-height: 750px;
}
.about-cta:hover{
    background-color: #1C1C1C;
    /* background-color: #FFB300; */
    color: white;
}

/* Footer */
.footer-title{
    font-family: 'Coolvetica-Bold';
}
.faqFooter-title{
    font-family: 'Coolvetica-Bold';
}
@media (max-width: 1023px) {
    .about-section .card2,
    .about-section .card3,
    .about-section .card4 { display: none; }
    .about-section .card1 { position: relative !important; right: auto !important; margin: 0 auto; height: 480px; width: 380px; max-width: 100%; }
}
@media (max-width: 640px) {
    .about-section .card1 { height: 380px; width: 300px; }
}

/* Testimonial slide bottom info spacing */
@media (max-width: 1023px) {
    .testimonial-slide .mt-16 { margin-top: 1.5rem; }
}

/* FAQ heading on mobile */


/* Prevent portfolio modal overflow on small screens */
@media (max-width: 640px) {
    #portfolioModal { padding: 1rem; padding-top: 0;}
    #modalContent { max-width: 100%; height: 85vh; }
    #closePortfolio { position: fixed; left: 20px; top: 20px; color: #FFB300; border-color: #FFB300; width: 40px; height: 40px; font-size: 20px; z-index: 99;}
}

/* Ribbon square separators */
@media (max-width: 767px) {
    .ribbon-item .w-8.h-8 { width: 18px; height: 18px; margin-left: 1.5rem; margin-right: 1.5rem; }
}

/* Video volume popup — keep tappable */
@media (max-width: 640px) {
    .speaker-btn { width: 38px; height: 38px; top: 10px; right: 10px; }
}

/* Hero inline nav tabs — reduce height */
@media (max-width: 640px) {
    #leftCurrent, #centerCurrent, #rightCurrent,
    #leftNext, #centerNext, #rightNext { font-size: 25px; }
}

/* ==========================================================
   MOBILE + TABLET SAFETY LAYER
   These rules deliberately begin below the desktop breakpoint.
   Desktop composition and animation values remain unchanged.
   ========================================================== */
@media (max-width: 1023px) {
    h1 { font-size: 42px; }
    h2 { font-size: clamp(2.2rem, 6vw, 3.1rem); }
    h3 { font-size: clamp(1.9rem, 5vw, 2.7rem); }

    .hero-section nav { width: min(100%, 680px); }
    .hero-section > .relative.w-\[700px\] { width: min(100%, 700px); padding-inline: .5rem; }
    .hero-title { width: min(100%, 640px) !important; }

    .offer-section > .flex { flex-wrap: wrap; padding-inline: 1.5rem; }
    .offer-card { width: min(380px, calc(50vw - 2.25rem)); }

    .video-testimonial-container {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 1rem 1rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .video-testimonial-container::-webkit-scrollbar { display: none; }
    .video-card { scroll-snap-align: center; }

    .faq-title { width: min(100%, 650px) !important; }
    .footer { min-height: 720px; height: 100svh; }
}

/* ==========================================================
   TABLET LAYOUT (768px–1023px)
   Keep the desktop composition from 1024px upward and the
   existing phone treatment below 768px completely independent.
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        min-height: 100svh;
        padding-inline: 2rem;
    }

    .hero-section nav {
        width: min(100%, 680px);
        gap: 1.25rem;
        padding-inline: 1.25rem;
    }

    .hero-section .desktop-nav-links { gap: 1.5rem; }
    .hero-section .desktop-nav-links a { font-size: .9rem !important; }
    .hero-subtitle { max-width: 38rem; }

    /* The desktop pinned composition needs more horizontal room than a tablet
       provides. Present the same content as a readable vertical sequence. */
    #scroll-pin-wrapper {
        min-height: 0 !important;
        max-width: 720px;
        padding: 5rem 2rem 0;
    }

    .animation-inner-sticky-canvas {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .animation-inner-sticky-canvas > div {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        gap: 1.25rem !important;
    }

    .animation-inner-sticky-canvas > div > div:first-child,
    .animation-inner-sticky-canvas > div > div:last-child { display: contents; }

    .animation-inner-sticky-canvas > div > div:nth-child(2) {
        order: 1;
        width: min(100%, 420px) !important;
        height: 520px !important;
        margin: 2rem auto 1rem;
    }

    .cards-left-group,
    .cards-right-group {
        position: static !important;
        inset: auto !important;
        display: contents !important;
        width: 100% !important;
        height: auto !important;
    }

    .cards-left-group > div,
    .cards-right-group > div {
        width: 100% !important;
        min-height: 150px;
        margin: 0 !important;
        padding: 1.5rem !important;
    }

    .cards-left-group > div:nth-child(1) { order: 2; }
    .cards-left-group > div:nth-child(2) { order: 3; }
    .cards-right-group > div:nth-child(1) { order: 4; }
    .cards-right-group > div:nth-child(2) { order: 5; }
    .text-left-final,
    .text-right-final { display: none !important; }
    .flip-badge { display: flex !important; }

    /* Reuse the existing second half of this story at a comfortable tablet width. */
    .mobile-real-problem {
        display: block !important;
        max-width: 680px;
        margin: 0 auto;
        padding: 5rem 2rem 0;
        text-align: center;
    }

    .mobile-real-problem .animated-bage {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        margin-bottom: 1.25rem;
    }

    .mobile-real-problem .animated-bage img { width: 28px; height: 28px; }
    .mobile-real-problem h3 { margin: 0; line-height: 1; letter-spacing: -.5px; }
        .mobile-real-problem strong { color: #FFCD56; font-weight: inherit; }
    .mobile-real-problem-image { width: 100%; margin: 2rem auto; border-radius: 1rem; }
    .mobile-real-problem p { font-size: 1.125rem; line-height: 1.6; }

    .about-container {
        max-width: 720px;
        max-height: none;
        min-height: 0;
        padding-block: 5rem;
    }

    .about-section .about-content { padding-top: 0; text-align: center; }
    .about-section .about-content .animated-bage { text-align: center; }
    .about-section .hero-desc { margin-inline: auto; }
    .about-section .hero-actions { justify-content: center; }
    .about-section .cards-wrap { height: 510px; }
    .about-section .card1 { height: 480px; width: 380px; }
    .about-section .hero-word { display: none; }

    .testimonial-section #testimonialTrack { height: 500px; }
    .testimonial-section .review { font-size: clamp(1.8rem, 4vw, 2.4rem) !important; }
    .footer { min-height: 680px; }
}

@media (max-width: 767px) {
    html { scroll-padding-top: 1rem; }
    body { -webkit-tap-highlight-color: transparent; }

    .hero-section { min-height: 100svh;  background-image: url(../images/hero-mobile-image.webp)!important; }
    /* Compact mobile-only pill nav. Desktop navigation is left untouched. */
    .hero-section nav { width: 100%; gap: .4rem; padding: .42rem .55rem; }
    .hero-section nav > img { height: 37px; width: auto; }
    .hero-section nav > div { gap: .42rem; min-width: 0; }
    .hero-section nav a { font-size: .64rem !important; line-height: 1; white-space: nowrap; }
    .hero-section .call-btn img { height: 1.45rem; }
    .hero-text-slider { padding-block: 1.75rem !important; width: 300px; }

    /* Sections 3–4 are deliberately static on mobile. The desktop pinned
       flip/reveal composition remains unchanged above this breakpoint. */
    #scroll-pin-wrapper { min-height: 0 !important; padding: 3.5rem 1rem 0; }
    .animation-inner-sticky-canvas { height: auto !important; overflow: visible !important; padding: 0 !important; }
    .animation-inner-sticky-canvas > div {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
    }
    .animation-inner-sticky-canvas > div > div:first-child,
    .animation-inner-sticky-canvas > div > div:last-child { display: contents; }
    .animation-inner-sticky-canvas > div > div:nth-child(2) {
        order: 2;
        width: 100% !important;
        height: 440px !important;
        min-height: 0 !important;
    }
    .text-left-final {
        display: flex !important;
        order: 1;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding: 0 !important;
    }
    .text-left-final .animated-bage { margin-bottom: .65rem !important; }
    .text-left-final .flip-title { font-size: clamp(2rem, 10vw, 2.6rem) !important; }
    .cards-left-group, .cards-right-group {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        gap: .85rem !important;
    }
    .cards-left-group { display: contents !important; }
    .cards-right-group { display: contents !important; }
    .cards-left-group > div, .cards-right-group > div {
        width: 100% !important;
        min-height: 118px;
        padding: 1rem !important;
    }
    .cards-left-group > div:nth-child(1) { order: 3; }
    .cards-left-group > div:nth-child(2) { order: 4; }
    .cards-right-group > div:nth-child(1) { order: 5; }
    .cards-right-group > div:nth-child(2) { order: 6; }
    .text-right-final, .flip-badge { display: none !important; }

    .offer-section > .flex { flex-direction: column; align-items: stretch; margin-top: 2.5rem; padding-inline: 1rem; }
    .offer-card { width: 100%; padding: 2rem 1.5rem; }
    .offer-card h5 { margin-bottom: 2rem; }

    .video-wrapper { width: 100% !important; padding-top: 2rem !important; }
    .video-testimonial-container { gap: 1rem !important; }
    .video-card { width: 214px !important; height: 380px !important; }

    .testimonial-section{ min-height: max-content;}
    .testimonial-section #testimonialTrack { height: 620px !important; }
    .testimonial-section .testimonial-slide .mt-16 { margin-top: 1.25rem; }
    .testimonial-section .testimonial-slide .review { font-size: 22px !important; }

    .about-container { max-height: none; min-height: 620px; }
    .about-section .hero-actions { flex-wrap: wrap; }
    .faq-section .relative.max-w-3xl { padding-inline: 1.25rem; }
    .faq-title { margin-bottom: 2.5rem; }
    .faq-btn { gap: 1rem; padding-block: 1.25rem; }
    .faq-btn span:first-child { font-size: 1rem; }
    .faq-content > div { padding-right: 1rem; line-height: 1.6; }

    .footer { min-height: 650px; height: 100svh; background-position: center bottom; }
}

@media (max-width: 479px) {
    .hero-section nav > div { gap: .35rem; }
    .hero-section nav a { font-size: .67rem !important; }
    .hero-section nav > img { height: 35px; }
    .hero-section .call-btn img { height: 1.5rem; }
    .hero-text-slider { font-size: 20px  !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Reference mobile layout — intentionally isolated from desktop. */
@media (max-width: 767px) {
    h2{
        font-size: 35px;
    }
    h3{
        font-size: 35px;
    }
    h5{
        font-size: 25px;
    }
    .hero-section nav { position: relative; z-index: 30; }
    .hero-section .desktop-nav-links,
    .hero-section .call-btn { display: none !important; }
    .mobile-menu-toggle { display: grid; gap: 7px; width: 40px; padding: 3px 1px; place-content: center; }
    .mobile-menu-toggle span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: #FFCD56; transition: transform .2s ease, opacity .2s ease; }
    .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .mobile-nav-menu { display: none; position: absolute; top: 75px; right: .75rem; z-index: 99; width: min(200px, calc(100vw - 1.5rem)); padding: .65rem; flex-direction: column; gap: .2rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; background: rgba(14,14,14,.94); backdrop-filter: blur(16px); box-shadow: 0 16px 35px rgba(0,0,0,.35); }
    .mobile-nav-menu.open { display: flex !important; }
    .mobile-nav-link { padding: .7rem .8rem; border-radius: .65rem; font: 400 .88rem/1 "Inter Tight"; color: white; text-align: left; }
    .mobile-nav-call { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-left: 5px; padding: .42rem .45rem .42rem .8rem; color: #151515; background: #fff; text-align: center; font-size: .72rem !important; }
    .mobile-nav-call img { width: 1.4rem; height: 1.4rem; border-radius: 999px; object-fit: cover; }

    .hero-title::first-line{
        line-height: 48px;
    }

    /* This is a vertical visual stack, with the existing labels sliding sideways. */
    .hero-text-slider {
        flex-direction: column !important;
        gap: 0.25rem;
    }
    
    .hero-text-slider > div {
        flex: none;
        width: 100%;
        height: 50px !important;
        min-height: 0;
    }
    
    

    /* First static half: coach badge, visual, then the four pain cards. */
    .text-left-final { display: none !important; }
    .flip-badge { display: flex !important; }
    .animation-inner-sticky-canvas > div > div:nth-child(2) { order: 1; }
    .cards-left-group > div:nth-child(1) { order: 2; }
    .cards-left-group > div:nth-child(2) { order: 3; }
    .cards-right-group > div:nth-child(1) { order: 4; }
    .cards-right-group > div:nth-child(2) { order: 5; }

    .mobile-real-problem { display: block; padding: .2rem 1rem 0; text-align: center; }
    .mobile-real-problem .animated-bage { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: 20px; font: 16px "Inter Tight"; }
    .mobile-real-problem .animated-bage img { width: 25px; height: 25px; object-fit: contain; }
    .mobile-real-problem h3 { margin: 0; line-height: .94; letter-spacing: -.5px; }
    .mobile-real-problem strong { color: #FFCD56; font-weight: inherit; }
    .mobile-real-problem-image { display: block; width: 100%; margin: 40px auto 40px; border-radius: .6rem; }

    /* Founder panel matches the reference's static text + portrait composition. */
    .about-section { padding-top: 20px !important; }
    .about-container { max-height: none; min-height: 0; padding: 0 1rem 80px !important; }
    .about-section .about-content { text-align: center; }
    .about-section .about-content .animated-bage { text-align: center; }
    .about-section .about-title { margin-bottom: .8rem !important; }
    .about-section .hero-desc { line-height: 1.42 !important; margin: 0 auto 1.2rem !important; }
    .about-section .hero-actions { justify-content: center; flex-wrap: wrap; gap: .5rem; }
    .about-section .hero-actions a { padding: .65rem .75rem; }
    .about-section .cards-wrap { display: block !important; height: 330px !important; }
    .about-section .card1 { position: relative !important; top: auto !important; right: auto !important; width: 270px !important; height: 337px !important; margin: 0 auto; overflow: hidden; border-radius: 1.25rem !important; }
    .about-section .card2 { position: absolute !important; top: 0 !important; left: 0 !important; width: 270px !important; height: 337px !important; margin: 0 auto; overflow: hidden; display: block; }
    .about-section .card3 { position: absolute !important; top: 0 !important; right: 0 !important; width: 270px !important; height: 337px !important; margin: 0 auto; overflow: hidden; display: block; border: 0.5px solid #ffffff69;}
    .about-section .card1 img { object-fit: cover; }
    .about-section .hero-word { display: none; }

    .mobile-real-problem { padding-top: 100px; }
    .faq-section { min-height: 0 !important; }

    footer{
        background-image: url(../images/footer-mobile.webp) !important;
    }
}

@media (min-width: 768px) {
    .mobile-menu-toggle, .mobile-nav-menu { display: none !important; }
}

@media (min-width: 1024px) {
    .mobile-real-problem { display: none !important; }
}

















  /* Overlay */
  .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  .popup-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  /* Modal shell */
  .popup-modal {
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    scrollbar-width: thin;
    scrollbar-color: var(--p-border) transparent;
  }

  .popup-overlay.open .popup-modal {
    transform: translateY(0) scale(1);
  }

  .popup-modal::-webkit-scrollbar { width: 4px; }
  .popup-modal::-webkit-scrollbar-track { background: transparent; }
  .popup-modal::-webkit-scrollbar-thumb { background: var(--p-border); border-radius: 2px; }

  /* Close button */
  .popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    background: var(--p-surface2);
    border: 1px solid var(--p-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--p-dim);
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
    z-index: 2;
    flex-shrink: 0;
  }

  .popup-close:hover { color: var(--p-text); border-color: var(--p-border2); }

  .popup-inner { padding: 36px 32px 32px; }

  /* Header */
  .popup-eyebrow {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p-gold);
    display: block;
    margin-bottom: 10px;
  }

  .popup-title {
    font-family: 'Coolvetica', serif;
    font-size: clamp(1.35rem, 3.5vw, 1.7rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--p-text);
    margin-bottom: 8px;
  }

  .popup-title em { font-style: italic; color: var(--p-gold); }

  .popup-subtitle {
    font-size: 0.83rem;
    color: var(--p-mid);
    line-height: 1.6;
    margin-bottom: 28px;
    font-family: 'Inter Tight', sans-serif;
  }

  /* Progress */
  .p-progress { margin-bottom: 28px; }

  .p-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .p-progress-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--p-dim);
    font-family: 'Inter Tight', sans-serif;
  }

  .p-progress-pct {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--p-gold);
    font-family: 'Inter Tight', sans-serif;
  }

  .p-bar {
    height: 2px;
    background: var(--p-border);
    border-radius: 2px;
    overflow: hidden;
  }

  .p-bar-fill {
    height: 100%;
    background: var(--p-gold);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  }

  /* Steps */
  .p-step { display: none; }
  .p-step.active { display: block; animation: pFadeUp 0.3s ease; }

  @keyframes pFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Question */
  .p-q-label {
    font-family: 'Coolvetica', serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--p-text);
    line-height: 1.35;
    margin-bottom: 5px;
  }

  .p-q-sub {
    font-size: 0.77rem;
    color: var(--p-dim);
    line-height: 1.5;
    margin-bottom: 18px;
    font-family: 'Inter Tight', sans-serif;
  }

  /* Options */
  .p-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }

  .p-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--p-border);
    border-radius: 7px;
    cursor: pointer;
    background: var(--p-surface);
    transition: border-color 0.16s, background 0.16s;
    user-select: none;
  }

  .p-option:hover { border-color: var(--p-border2); background: var(--p-surface2); }
  .p-option.selected { border-color: var(--p-gold); background: var(--p-gold-bg); }

  .p-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--p-border2);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.16s, background 0.16s;
  }

  .p-option.selected .p-radio { border-color: var(--p-gold); background: var(--p-gold); }
  .p-option.selected .p-radio::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #111;
    display: block;
  }

  .p-option-text {
    font-size: 0.84rem;
    color: var(--p-mid);
    line-height: 1.45;
    font-family: 'Inter Tight', sans-serif;
    transition: color 0.16s;
  }

  .p-option.selected .p-option-text { color: var(--p-text); font-weight: 500; }

  /* Button row */
  .p-btn-row { display: flex; gap: 10px; align-items: center; }

  .p-btn-back {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    border: 1px solid var(--p-border);
    background: var(--p-surface);
    color: var(--p-mid);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.16s, color 0.16s, background 0.16s;
    font-family: 'Inter Tight', sans-serif;
  }

  .p-btn-back:hover { border-color: var(--p-border2); color: var(--p-text); background: var(--p-surface2); }
  .p-btn-back:disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; }

  .p-btn-next {
    flex: 1;
    padding: 12px 20px;
    background: var(--p-gold);
    color: #111;
    border: none;
    border-radius: 7px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    opacity: 0.32;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  }

  .p-btn-next.enabled { opacity: 1; pointer-events: all; }
  .p-btn-next.enabled:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(255,179,0,0.3); }

  /* Trust strip */
  .p-trust {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--p-border);
  }

  .p-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71rem;
    color: var(--p-dim);
    font-family: 'Inter Tight', sans-serif;
  }

  .p-trust-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--p-gold);
    opacity: 0.65;
    flex-shrink: 0;
  }

  /* Results */
  .p-result { display: none; }
  .p-result.show { display: block; animation: pFadeUp 0.35s ease; }

  /* Qualified */
  .p-qualified-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: var(--p-green-bg);
    border: 1px solid var(--p-green-br);
    border-radius: 100px;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--p-green);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-family: 'Inter Tight', sans-serif;
  }

  .p-qualified-title {
    font-family: 'Coolvetica', serif;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    font-weight: 400;
    color: var(--p-text);
    margin-bottom: 8px;
    line-height: 1.22;
  }

  .p-qualified-sub {
    font-size: 0.83rem;
    color: var(--p-mid);
    line-height: 1.65;
    margin-bottom: 24px;
    font-family: 'Inter Tight', sans-serif;
  }

  .p-cal-card {
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-top: 2px solid var(--p-gold);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .p-cal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--p-border);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .p-cal-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--p-gold-bg);
    border: 1px solid var(--p-gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
  }

  .p-cal-title {
    font-family: 'Coolvetica', serif;
    font-size: 0.88rem;
    color: var(--p-text);
    margin-bottom: 1px;
    font-weight: 400;
  }

  .p-cal-sub { font-size: 0.73rem; color: var(--p-dim); font-family: 'Inter Tight', sans-serif; }
  .p-cal-body { padding: 0; }

  .p-cal-body .calendly-inline-widget {
    min-width: 100% !important;
    width: 100% !important;
  }

  .p-qtrust { display: flex; gap: 16px; flex-wrap: wrap; }

  .p-qtrust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    color: var(--p-dim);
    font-family: 'Inter Tight', sans-serif;
  }

  .p-qtrust-check {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--p-gold-bg);
    border: 1px solid var(--p-gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    color: var(--p-gold);
    flex-shrink: 0;
  }

  /* Not qualified */
  .p-notfit-title {
    font-family: 'Coolvetica', serif;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 400;
    color: var(--p-text);
    margin-bottom: 10px;
    line-height: 1.25;
  }

  .p-notfit-sub {
    font-size: 0.84rem;
    color: var(--p-mid);
    line-height: 1.65;
    margin-bottom: 20px;
    font-family: 'Inter Tight', sans-serif;
  }

  .p-notfit-form {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--p-border);
  }

  .p-notfit-form iframe {
    display: block;
    width: 100%;
    border: none;
    height: 600px;
  }

  /* Mobile */
  @media (max-width: 600px) {
    .popup-inner { padding: 28px 20px 24px; }
    .popup-modal { border-radius: 10px; max-height: 95vh; }
    .popup-overlay { padding: 10px; }
    .p-trust { gap: 10px; }
    .p-qtrust { gap: 10px; }
    .p-cal-body .calendly-inline-widget { height: 550px !important; }
    .p-notfit-form iframe { height: 500px; }
  }

  @media (max-width: 400px) {
    .popup-title { font-size: 1.2rem; }
    .p-q-label { font-size: 0.95rem; }
  }
  /* Native form */
  .p-native-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
  }

  .p-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .p-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--p-text);
    font-family: 'Inter Tight', sans-serif;
    line-height: 1.4;
  }

  .p-optional {
    color: var(--p-dim);
    font-weight: 400;
  }

  .p-input,
  .p-textarea {
    -webkit-appearance: none;
    appearance: none;
    background: var(--p-surface2);
    border: 1px solid var(--p-border);
    border-radius: 6px;
    padding: 10px 13px;
    font-size: 0.84rem;
    color: var(--p-text);
    font-family: 'Inter Tight', sans-serif;
    line-height: 1.5;
    transition: border-color 0.16s;
    width: 100%;
    outline: none;
    resize: none;
  }

  .p-input::placeholder,
  .p-textarea::placeholder { color: var(--p-dim); }

  .p-input:focus,
  .p-textarea:focus { border-color: var(--p-gold); }

  input.p-input {
    background: var(--p-surface2) !important;
    color: var(--p-text) !important;
    -webkit-text-fill-color: var(--p-text) !important;
    border: 1px solid var(--p-border) !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 0.84rem !important;
    font-family: 'Inter Tight', sans-serif !important;
    line-height: 1.5 !important;
  }

  input.p-input::placeholder {
    color: var(--p-dim) !important;
    -webkit-text-fill-color: var(--p-dim) !important;
    opacity: 1;
  }

  input.p-input:focus {
    border: 1px solid var(--p-gold) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  input.p-input:-webkit-autofill,
  input.p-input:-webkit-autofill:hover,
  input.p-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--p-surface2) inset !important;
    -webkit-text-fill-color: var(--p-text) !important;
    border: 1px solid var(--p-border) !important;
    caret-color: var(--p-text);
  }

  .p-submit {
    width: 100%;
    padding: 13px 20px;
    background: var(--p-gold);
    color: #111;
    border: none;
    border-radius: 7px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    margin-top: 4px;
    transition: transform 0.18s, box-shadow 0.18s;
  }

  .p-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(255,179,0,0.3);
  }

  .p-form-note {
    font-size: 0.74rem;
    color: var(--p-dim);
    text-align: center;
    font-family: 'Inter Tight', sans-serif;
  }

  .p-success {
    text-align: center;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .p-success-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--p-green);
  }

  .p-success h3 {
    font-family: 'Coolvetica', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--p-text);
  }

  .p-success p {
    font-size: 0.84rem;
    color: var(--p-mid);
    font-family: 'Inter Tight', sans-serif;
    line-height: 1.6;
    max-width: 280px;
  }