/* ── Dark theme CSS variables ── */
  :root {
    --theme-bg:           #ffffff;
    --theme-body-bg:      #ffffff;
    --theme-body-color:   #171717;
    --theme-nav-shell:    rgb(250,250,250);
    --theme-nav-grip:     #ffffff;
    --theme-card-outer:   hsla(0,0%,100%,.4);
    --theme-card-inner:   hsla(0,0%,100%,.25);
    --theme-card-shadow:  hsla(0,0%,100%,.75);
    --theme-menu-bg:      hsla(0,0%,100%,.5);
    --theme-body-text:    rgb(115,115,115);
    --theme-sig-name:     rgb(64,64,64);
    --theme-sig-title:    rgb(163,163,163);
    --theme-year-color:   rgb(115,115,115);
    --theme-pill-bg:      #fff;
    --theme-pill-border:  rgba(82,82,82,.05);
    --theme-pill-shadow:  hsla(0,0%,45%,.15);
    --theme-card-icon:    rgba(82,82,82,.75);
    --theme-gradient:
      radial-gradient(ellipse 80% 60% at 50% 0%, #e8e2f5 0%, #f0f0f2 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, #e5edf8 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 20% 90%, #fae8f0 0%, transparent 70%);
    --theme-noise-opacity: 0.4;
    --theme-noise-blend:   multiply;
    --theme-footer-fill:   #3D333D;
    --ripple-color: 255, 255, 255;
  }

  [data-theme="dark"] {
    --theme-bg:           #0d0d0f;
    --theme-body-bg:      #0d0d0f;
    --theme-body-color:   #e8e6ec;
    --theme-nav-shell:    rgba(30,28,35,.85);
    --theme-nav-grip:     rgba(40,38,48,.9);
    --theme-card-outer:   rgba(255,255,255,.06);
    --theme-card-inner:   rgba(255,255,255,.05);
    --theme-card-shadow:  rgba(255,255,255,.08);
    --theme-menu-bg:      rgba(13,13,15,.75);
    --theme-body-text:    rgba(200,196,210,.75);
    --theme-sig-name:     rgba(230,226,240,.9);
    --theme-sig-title:    rgba(150,146,165,.8);
    --theme-year-color:   rgba(160,156,175,.7);
    --theme-pill-bg:      rgba(40,38,48,.9);
    --theme-pill-border:  rgba(255,255,255,.08);
    --theme-pill-shadow:  rgba(0,0,0,.4);
    --theme-card-icon:    rgba(210,206,225,.75);
    --theme-gradient:
      radial-gradient(ellipse 80% 60% at 50% 0%, #1a1530 0%, #0d0d0f 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, #0f1525 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 20% 90%, #1a0f20 0%, transparent 70%);
    --theme-noise-opacity: 0.15;
    --theme-noise-blend:   screen;
    --theme-footer-fill:   rgba(200,196,210,.3);
    --ripple-color: 0, 0, 0;
  }

  /* ── Apply variables to all themed elements ── */
  body {
    background-color: var(--theme-body-bg) !important;
    color: var(--theme-body-color) !important;
    transition: background-color .35s ease, color .35s ease;
  }
  .main-gradient {
    background: var(--theme-gradient) !important;
    transition: background .35s ease;
  }
  .main-gradient::before {
    opacity: var(--theme-noise-opacity) !important;
    mix-blend-mode: var(--theme-noise-blend) !important;
  }
  .nav-shell {
    background-color: var(--theme-nav-shell) !important;
    transition: background-color .35s ease;
  }
  .nav-grip {
    background-color: var(--theme-nav-grip) !important;
    transition: background-color .35s ease;
  }
  /* Override the black-bg class in dark mode */
  [data-theme="dark"] .black-bg {
    background: #0a0a0a !important;
  }
  /* Override purple-bg gradient shell in dark mode */
  [data-theme="dark"] .purple-bg {
    background: conic-gradient(from 0deg,
      #2a1f4a, #1f2a4a, #2a1f3a, #1f2a3a, #2a1f4a
    ) !important;
  }
  .mobile-menu {
    background-color: var(--theme-menu-bg) !important;
    transition: background-color .35s ease;
  }
  .menu-card {
    background-color: var(--theme-card-outer) !important;
    transition: background-color .35s ease;
  }
  .menu-card-inner {
    background-color: var(--theme-card-inner) !important;
    box-shadow: inset 0 2px 4px 0 var(--theme-card-shadow) !important;
    transition: background-color .35s ease, box-shadow .35s ease;
  }
  .menu-card-inner svg { color: var(--theme-card-icon) !important; }
  .menu-card-inner span { color: var(--theme-card-icon) !important; }

  /* Nav label + home pill */
  .nav-label {
    color: var(--theme-body-text) !important;
    transition: color .35s ease;
  }
  @media(min-width:768px){
    .nav-home .nav-pill {
      background: var(--theme-pill-bg) !important;
      border-color: var(--theme-pill-border) !important;
      box-shadow: 0 10px 15px -3px var(--theme-pill-shadow),
                  0 4px 6px -4px var(--theme-pill-shadow) !important;
    }
  }

  /* Body copy */
  .body-text p { color: var(--theme-body-text) !important; }
  .year-divider { color: var(--theme-year-color) !important; }
  .sig-name     { color: var(--theme-sig-name) !important; }
  .sig-title    { color: var(--theme-sig-title) !important; }

  /* Logo SVG paths in dark mode — light fill */
  [data-theme="dark"] .talk-text path,
  [data-theme="dark"] .talk-text tspan { fill: #ddd8ee !important; }
  [data-theme="dark"] .reminder-text path,
  [data-theme="dark"] .reminder-text tspan { fill: rgba(180,176,200,.8) !important; }

  /* Footer logo */
  .footer-logo svg { fill: var(--theme-footer-fill) !important; }

  /* ── Theme toggle button styling ── */
  .mc-x {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mc-x .menu-card-inner {
    transition: background-color .2s ease, transform .15s ease;
  }
  .mc-x:active .menu-card-inner {
    transform: scale(0.93);
  }

  /* Sun icon hidden by default (light mode shows moon) */
  .theme-icon-sun  { display: none; }
  .theme-icon-moon { display: block; }
  [data-theme="dark"] .theme-icon-sun  { display: block; }
  [data-theme="dark"] .theme-icon-moon { display: none; }

  /* Smooth icon swap */
  .theme-icon-sun, .theme-icon-moon {
    transition: opacity .2s ease;
  }

   /* === FONT === */
    @font-face{font-family:'Aspekta';src:url('06b9ca65a65a3b06-s.p.woff2') format('woff2');font-display:swap}

    /* === RESET (exact from compiled CSS) === */
    *,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb;margin:0;padding:0}
    html{line-height:1.5;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;font-kerning:normal;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
    html::-webkit-scrollbar{display:none}
    body{margin:0;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'Aspekta',ui-sans-serif,system-ui,Arial,sans-serif;letter-spacing:-0.01em;background-color:#fff;color:#171717}
    a{color:inherit;text-decoration:inherit}
    h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
    /* button,input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0} */
    button{text-transform:none;-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}
    img,svg,video{display:block;vertical-align:middle}

    /* === CSS VARIABLES (exact) === */
    :root{
      --main-gradient: radial-gradient(ellipse 80% 60% at 50% 0%, #e8e2f5 0%, #f0f0f2 60%),
                  radial-gradient(ellipse 60% 40% at 80% 80%, #e5edf8 0%, transparent 70%),
                  radial-gradient(ellipse 60% 40% at 20% 90%, #fae8f0 0%, transparent 70%);
    }

    /* === FRAME CLASSES (exact from source) === */
    .frame-outer{border-radius:34px;background-color:hsla(0,0%,100%,.4);padding:4px}
    .frame-inner{border-radius:30px}

    /* === BACKGROUND GRADIENT (exact) === */
    .main-gradient{
      background:var(--main-gradient);
      position:fixed;
      inset:0;
      z-index:0;
      overflow:hidden;
    }
    .main-gradient::before{
      content:"";
      position:absolute;
      inset:0;
      /* noise texture approximation using SVG */
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity:0.4;
      mix-blend-mode:multiply;
      pointer-events:none;
      background-size:200px 200px;
    }
    
    /* === NAV (exact classes: pointer-events-auto fixed left-0 right-0 top-0 flex w-screen justify-center z-[40]) === */
    .bottomnav{
      pointer-events:auto;
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      padding-bottom:20px;
      gap: 10px;
      display:flex;
      width:100vw;
      justify-content:space-around;
      align-items: center;
      z-index:40;
      transition:opacity 0.6s cubic-bezier(0.25,1,0.5,1), filter 0.6s cubic-bezier(0.25,1,0.5,1);
    }
    .bottomnav.menu-open{z-index:200}

    .bfb{backdrop-filter: blur(8px);}

    /* frame-outer mt-4 flex w-fit items-stretch justify-center overflow-hidden
       border-[1px] border-neutral-300/25 bg-neutral-50 mix-blend-multiply
       shadow-lg shadow-neutral-500/5 backdrop-blur-3xl */
    .nav-shell{
      border-radius:100px;
      background-color:hsla(0,0%,100%,.4);
      padding:5px;
      margin-top:1rem;
      display:flex;
      width:fit-content;
      align-items:stretch;
      justify-content:center;
      overflow:hidden;
      /* border:1px solid hsla(0,0%,83%,.25); */
      background-color:rgb(250,250,250);
      mix-blend-mode:multiply;
      box-shadow:0 10px 15px -3px hsla(0,0%,45%,.05),0 4px 6px -4px hsla(0,0%,45%,.05);
      backdrop-filter:blur(64px);
      -webkit-backdrop-filter:blur(64px);
    }

    /* Home link: frame-inner group pointer-events-none relative flex-none focus:outline-none md:pointer-events-auto */
    .nav-home{
      border-radius:30px;
      position:relative;
      flex:none;
      pointer-events:none; /* mobile: not clickable, only the grip opens menu */
      display:flex;
      align-items:center;
    }
    @media(min-width:768px){.nav-home{pointer-events:auto}}

    /* h1 inside: relative px-3 py-3 text-xs font-normal text-neutral-500 group-hover:text-neutral-700 */
    .nav-home .nav-label{
      position:relative;
      padding:0.75rem;
      font-size:0.75rem;
      font-weight:400;
      color:rgb(115,115,115);
      z-index:10;
      white-space:nowrap;
      transition:color 0.15s;
    }
    .nav-home:hover .nav-label{color:rgb(64,64,64)}

    /* pill span: absolute inset-0 z-0 md:border-[1px] md:border-neutral-600/5 md:bg-white md:shadow-lg md:shadow-neutral-500/15 */
    .nav-home .nav-pill{
      position:absolute;
      inset:0;
      border-radius:30px;
      z-index:0;
    }
    @media(min-width:768px){
      .nav-home .nav-pill{
        border:1px solid rgba(82,82,82,.05);
        background:#fff;
        box-shadow:0 10px 15px -3px hsla(0,0%,45%,.15),0 4px 6px -4px hsla(0,0%,45%,.15);
      }
    }

    /* Grip button (mobile): frame-inner relative flex aspect-square items-center justify-center bg-white md:hidden */
    .nav-grip{
      border-radius:100px;
      position:relative;
      display:flex;
      aspect-ratio:1/1;
      align-items:center;
      justify-content:center;
      background-color:#fff;
    }
    @media(min-width:768px){.nav-grip{display:none}}
    /* lucide-grip m-3 aspect-square h-3 w-3 text-neutral-500 */
    .nav-grip svg{
      margin:0.75rem;
      aspect-ratio:1/1;
      height:0.75rem;
      width:0.75rem;
      color:rgb(115,115,115);
    }

    /* Desktop links: items relative hidden space-x-1 md:flex */
    .nav-links{
      position:relative;
      display:none;
      gap:0.25rem; /* space-x-1 */
    }
    @media(min-width:768px){.nav-links{display:flex}}
    /* frame-inner group focus:outline-none */
    .nav-links a{
      border-radius:30px;
      display:flex;
      align-items:center;
      outline:none;
    }
    .nav-links a .nav-label{
      position:relative;
      padding:0.75rem;
      font-size:0.75rem;
      font-weight:400;
      color:rgb(115,115,115);
      z-index:10;
      white-space:nowrap;
      transition:color 0.15s;
    }
    .nav-links a:hover .nav-label{color:rgb(64,64,64)}

    /* =============================================
       MOBILE FULL-SCREEN MENU
       Exact: fixed inset-0 z-[150] flex h-[100dvh] flex-col items-center
              bg-white/50 pt-12 backdrop-blur-3xl
    ============================================= */
    .mobile-menu{
      position:fixed;
      inset:0;
      z-index:150;
      display:flex;
      height:100dvh;
      flex-direction:column;
      align-items:center;
      background-color:hsla(0,0%,100%,.5);
      padding-top:3rem; /* pt-12 */
      backdrop-filter:blur(64px); /* backdrop-blur-3xl */
      -webkit-backdrop-filter:blur(64px);
      /* Hidden state */
      opacity:0;
      pointer-events:none;
      transition:opacity 0.6s cubic-bezier(0.25,1,0.5,1), filter 0.6s cubic-bezier(0.25,1,0.5,1);
      filter:blur(12px);
    }
    .mobile-menu.open1{
      opacity:1;
      pointer-events:auto;
      filter:blur(0px);
      touch-action:none;
      overflow:hidden;
    }

    /* container relative flex h-full w-full max-w-lg flex-col items-center justify-center px-8 */
    .mobile-menu-container{
      position:relative;
      display:flex;
      height:100%;
      width:100%;
      max-width:32rem; /* max-w-lg */
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding-left:2rem; /* px-8 */
      padding-right:2rem;
    }

    /* flex w-full flex-col items-center gap-3 */
    .mobile-menu-cards{
      display:flex;
      width:100%;
      flex-direction:column;
      align-items:center;
      gap:0.75rem; /* gap-3 */
    }

    /* Each card row */
    .menu-row{
      display:flex;
      gap:0.75rem; /* gap-3 */
      align-items:stretch;
    }

    /* Individual card: frame-outer relative h-[90px] overflow-hidden */
    .menu-card{
      border-radius:34px; /* frame-outer */
      background-color:hsla(0,0%,100%,.4);
      padding:4px;
      position:relative;
      height:90px; /* h-[90px] */
      overflow:hidden;
      display:block;
      flex-shrink:0;
      text-decoration:none;
      /* Stagger reveal animation */
      opacity:0;
      transform:translateY(20px) scale(0.95);
      filter:blur(10px);
      transition:opacity 0.15s, transform 0.15s;
    }
    .mobile-menu.open1 .menu-card{
      animation:card-reveal 1s cubic-bezier(0.25,1,0.5,1) forwards;
    }
    /* Stagger delays for 3 groups */
    .mobile-menu.open1 .menu-row:nth-child(1) .menu-card{animation-delay:0ms}
    .mobile-menu.open1 .menu-row:nth-child(2) .menu-card{animation-delay:100ms}
    .mobile-menu.open1 .menu-row:nth-child(3) .menu-card{animation-delay:200ms}

    @keyframes card-reveal{
      to{opacity:1;transform:translateY(0) scale(1);filter:blur(0px)}
    }

    /* Inner card: frame-inner relative z-20 flex h-full w-full items-center justify-center gap-3 bg-white/25 px-6 shadow-inner shadow-white/75 */
    .menu-card-inner{
      border-radius:30px; /* frame-inner */
      position:relative;
      z-index:20;
      display:flex;
      height:100%;
      width:100%;
      align-items:center;
      justify-content:center;
      gap:0.75rem; /* gap-3 */
      background-color:hsla(0,0%,100%,.25); /* bg-white/25 */
      padding-left:1.5rem; /* px-6 */
      padding-right:1.5rem;
      box-shadow:inset 0 2px 4px 0 hsla(0,0%,100%,.75); /* shadow-inner shadow-white/75 */
    }
    /* Icon: h-6 w-6 text-neutral-600/75 */
    .menu-card-inner svg{height:1.7rem;width:1.7rem;color:rgba(82,82,82,.75);flex-shrink:0}
    .menu-card-inner svg.plan{height:1.5rem;width:1.5rem;color:rgba(82,82,82,.75);flex-shrink:0}
    .menu-card-inner svg.delete{height:1.2rem;width:1.2rem;color:rgba(82,82,82,.75);flex-shrink:0}
    /* Label: text-base font-medium text-neutral-600/75 */
    .menu-card-inner span{font-size:1rem;font-weight:600;color:rgba(82,82,82,.75); margin-top: 2px;}
    .menu-card-inner .style-1 span{color: #232323 !important;}
    .menu-card-inner .style-1 del span{color: #666 !important; font-size: 20px !important;}

    /* Exact widths from source: w-[334px] w-[219px] w-[103px] */
    .mc-home   {width:334px}
    .mc-work   {width:219px}
    .mc-x      {width:103px}
    .mc-insta  {width:103px}
    .mc-writing{width:219px}

    /* Active/current page card: video plays as gradient overlay */
    .menu-card.is-active .menu-card-video{
      display:block;
      position:absolute;
      inset:4px;
      border-radius:30px;
      width:calc(100% - 8px);
      height:calc(100% - 8px);
      object-fit:cover;
      z-index:1;
    }
    .menu-card-video{display:none}

    /* CSS-only gradient fallback for active Home card (simulates orange gradient video) */
    .menu-card.is-active::after{
      content:"";
      position:absolute;
      inset:4px;
      border-radius:30px;
      background:linear-gradient(135deg,
        #c9d6ff 0%,
        #e2c9ff 30%,
        #ffc9e2  60%,
        #c9f0ff 100%
      );
      z-index:1;
    }
    .menu-card.is-active .menu-card-inner{z-index:2}

    /* =============================================
       MAIN CONTENT
       mx-auto flex min-h-screen max-w-3xl flex-col items-center
       justify-center px-4 pt-40 pb-8 text-pretty
    ============================================= */
    main{position:relative;z-index:1;min-height:100vh;overflow:hidden}

    .content-wrap{
      position:relative;
      margin-left:auto;
      margin-right:auto;
      display:flex;
      min-height:100vh;
      max-width:48rem; /* max-w-3xl */
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      padding:0 2rem 0 2rem; 
      text-wrap:pretty;
    }

    .day-name{
      font-weight: 700;
      font-size: 12px !important;
      letter-spacing: 6px;
      color: #000000 !important;
    }

    .year-divider rect{fill: #000000 !important;}

    /* Logo: relative mb-12 w-full max-w-[360px] md:max-w-md */
    .logo-block{
      position:relative;
      /* margin-bottom:3rem; */
      width:100%;
      max-width:360px;
    }
    @media(min-width:768px){.logo-block{max-width:28rem}}
    .logo-block svg{height:auto;width:100%}

    /* Year divider: year-divider pt-4 mb-16 flex items-center justify-center gap-4 text-neutral-500 */
    .year-divider{
      padding-top:1rem;
      margin-bottom:4rem;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:1rem;
      color:rgb(115,115,115);
    }
    /* svg: h-3 w-auto opacity-60 */
    .year-divider svg{height:0.75rem;width:auto;opacity:0.6}
    /* span: text-sm */
    .year-divider span{font-size:0.875rem;line-height:1.25rem}

     .year-divider1{
      padding-top:1rem;
      margin-bottom:4rem;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align: center;
      gap:1rem;
      color:rgb(115,115,115);
    }
    /* svg: h-3 w-auto opacity-60 */
    .year-divider1 svg{height:0.75rem;width:auto;opacity:0.6}
    /* span: text-sm */
    .year-divider1 span{font-size:0.875rem;line-height:1.25rem}

    /* Body copy: text-neutral-500 text-lg leading-[28px] mt-4 */
    .body-text p{
      color:rgb(115,115,115);
      font-size:16px;
      line-height:28px;
      margin-top:1rem;
    }
    .body-text p:first-child{margin-top:0}

     .body-cont p{
      color:rgb(115,115,115);
      font-size:16px;
      line-height:28px;
      margin-top:1rem;
    }
    .body-cont p:first-child{margin-top:0}

    /* Signature: mt-16 */
    .signature{margin-top:4rem}
    /* name: text-lg leading-[28px] text-neutral-700 */
    .sig-name{font-size:1.125rem;line-height:28px;color:rgb(64,64,64)}
    /* title: mt-1 text-base leading-[24px] text-neutral-400 */
    .sig-title{margin-top:0.25rem;font-size:1rem;line-height:24px;color:rgb(163,163,163)}

    /* Footer logo: mt-32 mb-4 flex justify-center */
    .footer-logo{margin-top:8rem;margin-bottom:1rem;display:flex;justify-content:center}
    /* svg: h-24 w-auto mix-blend-overlay */
    .footer-logo svg{height:6rem;width:auto;mix-blend-mode:overlay;fill:#3D333D}

    /* === TEXT ANIMATIONS (exact from injected style tag in source) === */
    @keyframes text-fade-in{0%{opacity:0}100%{opacity:1}}

    .talk-text{opacity:0}
    .talk-text.animate{
      animation:text-fade-in 1.4s cubic-bezier(.61,1,.88,1) forwards;
      animation-delay:0ms;
    }
    .reminder-text{opacity:0}
    .reminder-text.animate{
      animation:text-fade-in 3.5s cubic-bezier(.61,1,.88,1) forwards;
      animation-delay:540ms;
    }
    .studio-text{opacity:0}
    .studio-text.animate{
      animation:text-fade-in 3.5s cubic-bezier(.61,1,.88,1) forwards;
      animation-delay:840ms;
    }
    .year-divider{opacity:0}
    .year-divider.animate{
      animation:text-fade-in 2s cubic-bezier(.61,1,.88,1) forwards;
      animation-delay:1000ms;
    }
    .body-text{opacity:0}
    .body-text.animate{
      animation:text-fade-in 3.5s cubic-bezier(.61,1,.88,1) forwards;
      animation-delay:1200ms;
    }

    @media(prefers-reduced-motion:reduce){
      .talk-text.animate,.reminder-text.animate,.studio-text.animate,
      .year-divider.animate,.body-text.animate{
        animation-duration:0.3s;animation-delay:0ms
      }
    }

    .h52{
      height: 52px;
    }

    .wh52{
      width: 52px;
      height: 52px;
    }

    .wh70{
      width: 80px;
      height: 80px;
    }

    .bttnflx{
      display: flex;
    align-items: center;
    gap: 10px;
    }


    .rem-box{
    /* border-radius: 12px; */
    padding: 1rem 1rem;
    cursor: pointer;
    /* background: #f5f5f5; */
    /* background: #efeeee; */
    /* border: solid 1px rgb(231 230 230); */
    margin-top: 20px;
    /* border: 0 !important; */
    /* mix-blend-mode: multiply; */
    display: inline-block;
    width: 100%;
}


.mesg1{
  font-weight: 600 !important;
    font-size: 12px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    line-height: 24px !important;
    color: #4a4d55 !important;
    text-align: left !important;
    height: auto !important;
}

    .flx{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flx1{
  display: flex;
  align-items: center;
}

.disflx{
  display: flex;
    width: 70px;
    justify-content: end;
}

.playbtn {
  background: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  max-width: 60px;
  outline: double;
  outline-color: #fff;
  box-shadow: none !important;
}

    .icon{
      height: 1.8rem !important;
      width: 1.8rem !important;
    }

    .icon1{
      height: 1rem !important;
      width: 1rem !important;
    }

    .black{color: #000000;}
    .gry{color: #636162 !important;}
    .purple{color: #9da1d1;}
    .black-bg{background: #000000 !important;}
    .purple-bg{background: conic-gradient(from 0deg,
        #c9d6ff, #e2c9ff, #ffc9e2, #c9f0ff, #c9d6ff
      ) !important; border-radius: 100px !important;}


      /* Container */
.mic-wrapper{
  position:relative;
  width:100%;
  height:260px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
}

/* Ripple circles */
/* .ripple{
  position:absolute;
  border-radius:50%;
  background:rgb(126 106 147 / 25%);
  transform:scale(0);
  opacity:0;
  transition:transform 0.15s linear, opacity 0.15s linear;
} */

/* Different layers */
/* .ripple1{ width:120px; height:120px; }
.ripple2{ width:140px; height:140px; }
.ripple3{ width:150px; height:150px; transform: scale(1.2); opacity: .5;} */


.ripple {
    position: relative;
    text-decoration: none;
    width: 138px;
    height: 138px;
    margin: 0 auto;
    border-radius: 50%;
    -webkit-animation: ripple 1s linear infinite;
    animation: ripple 1s linear infinite;
    margin-top: 70px;
    margin-bottom: 100px;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ripple-color), 0.3), 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3);
            box-shadow: 0 0 0 0 rgba(var(--ripple-color), 0.3), 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3), 0 0 0 90px rgba(var(--ripple-color), 0);
            box-shadow: 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3), 0 0 0 90px rgba(var(--ripple-color), 0);
  }
}
@keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--ripple-color), 0.3), 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3);
            box-shadow: 0 0 0 0 rgba(var(--ripple-color), 0.3), 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3), 0 0 0 90px rgba(var(--ripple-color), 0);
            box-shadow: 0 0 0 10px rgba(var(--ripple-color), 0.3), 0 0 0 30px rgba(var(--ripple-color), 0.3), 0 0 0 60px rgba(var(--ripple-color), 0.3), 0 0 0 90px rgba(var(--ripple-color), 0);
  }
}

/* Center circle */
.center{
  width:260px;
  height:260px;
  border-radius:100px;
  /* background:#fff; */
  z-index:10;
  /* box-shadow:0 0 30px rgba(255,105,180,0.5); */
}

.success-wrapper svg {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
}
.path {
    stroke-linecap: round;
    stroke-dasharray: 27;
    stroke-dashoffset: -23;
    animation: dash 600ms ease forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
.immediate-success {
    animation: fadeIn 400ms ease 300ms forwards;
    opacity: 0;
}
@keyframes fadeIn {
    to { opacity: 1; }
}

.accordion-content {
    overflow: hidden;
    transition: all 0.3s ease;
}

.w100{width: 100px;}

.select, .unselect{
  width:24px !important;
  height:24px !important;
}
.selectbox .select path{
  stroke:#8d8fb4 !important;
  fill:#8d8fb4 !important;
}

.selectbox .unselect path{
  stroke:#8d8fb4 !important;
  fill:#8d8fb4 !important;
}

.selectbox .mgr1 path{
  stroke:#8d8fb4 !important;
  fill:#8d8fb4 !important;
}

.selectbox{
  background-color: rgb(126 106 147 / 12.5%) !important;
  color:#8d8fb4 !important;
}

.selectbox .mesg1{color:#8d8fb4 !important;}

.selectbox .waves path{
  stroke:#8d8fb4 !important;
  fill:#8d8fb4 !important;
}

.mgr1{margin-right: 15px;}

  .checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.checkbox input {
    position: absolute;
    width: 0;
    left: 50px;
    height: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox .checkmark {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 3px;
    outline: 1px solid #acacac;
    transition: all 0.2s ease;
}

.checkbox:hover .checkmark {
    background: #f4f4f5;
    transition: all 0.2s ease;
}

.checkbox input:checked ~.checkmark {
    background: #8d8fb4;
    outline: 1px solid #8d8fb4;
}

.checkbox input[type="radio"] ~ .checkmark {
    border-radius: 6px;
}

.checkbox .checkmark::after {
    position: absolute;
    display: block;
    content: "";
    left: 50%;
    top: 40%;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    transition: all 0.2s ease;
}

.checkbox input:checked~.checkmark::after {
    opacity: 1;
    transition: all 0.2s ease;
}

.currency{
  font-size: 9px;
  font-family: Arial, Helvetica, sans-serif;
}

.plan-cont {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
    text-align: left;
}

.buy{
  color: #232323;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.plan-txt {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.plan-title{
  font-weight: 800 !important;
    font-size: 12px !important;
    line-height: 24px !important;
    color: #4a4d55 !important;
    text-align: left !important;
    height: auto !important;
}

.plan-title span{
  font-weight: 600 !important;
font-size: 12px !important;
}

.grad-text{
  background: linear-gradient(135deg,
        #97a3cc 0%,
        #a38cbd 30%,
        #bd92a6  60%,
        #809fac 100%
      );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.w60{width: 60px;}
.w70{width: 70px;}
.w130{width: 130px;}



/* otp box */

:where([autocomplete=one-time-code]) {
      --otp-digits: 4;
      --otp-ls: 2ch;
      --otp-gap: 1.25;

      /* private consts */
      --_otp-bgsz: calc(var(--otp-ls) + 1ch);
      --_otp-digit: 0;

      all: unset;
      background: 
        linear-gradient(90deg, 
          var(--otp-bg, #fff) calc(var(--otp-gap) * var(--otp-ls)),
          transparent 0),
        linear-gradient(90deg, 
          var(--otp-bg, #fff) calc(var(--otp-gap) * var(--otp-ls)),
          transparent 0
        );
      background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
      background-repeat: no-repeat, repeat-x;
      background-size: var(--_otp-bgsz) 100%;
      caret-color: var(--otp-cc, #222);
      caret-shape: block;
      clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
      font-family: ui-monospace, monospace;
      font-size: var(--otp-fz, 2.5em);
      inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
      letter-spacing: var(--otp-ls);
      padding-block: var(--otp-pb, 1ch);
      padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
      height: 10px;
      border-radius: 0;
      border: 0;
      outline: none;
      margin-left: 20px;
    }

    :where([autocomplete=one-time-code]:focus) {
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }

    /* Individual digit boxes styling */
    :where([autocomplete=one-time-code])::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(var(--_otp-bgsz) - 2px),
        #ddd calc(var(--_otp-bgsz) - 2px),
        #ddd calc(var(--_otp-bgsz) - 1px),
        transparent calc(var(--_otp-bgsz) - 1px),
        transparent var(--_otp-bgsz)
      );
      border-radius: 12px;
      pointer-events: none;
    }

   
    .otp-wrapper {
      position: relative;
      display: inline-block;
      margin: 20px 0;
    }

    .digit-boxes {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      gap: 10px;
      pointer-events: none;
      padding: 2px;
    }

    .digit-box {
      flex: 1;
      height: 48px;
      border: 1px solid #ddd;
      border-radius: 12px;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5em;
      font-family: ui-monospace, monospace;
      color: #333;
      transition: all 0.2s ease;
    }

    .digit-box.filled {
      border-color: #232323;
      background: #f8f9ff;
    }

    .digit-box.active {
      border-color: #232323;
      box-shadow: 0 0 0 3px rgba(35, 35, 35, 0.25);
    }

    /* otp box end */



    /* title animation */

.title-text {
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
  color: #4a4d55;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 26px;
  padding-top: 20px;
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}


.title-text span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

.title-text span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

 .title-text span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(19) {
  animation: fade-in 0.8s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title-text span:nth-child(20) {
  animation: fade-in 0.8s 2.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* title animation end */