/* ============================================================
       CREDHAWK APP – CREATIVE REDESIGN
       Prefix: chcr__ (CredHawk Creative)
       Theme: Airy white-lavender, deep violet, coral-orange CTAs
       Fonts: Plus Jakarta Sans (display) + Inter (body)
       ============================================================ */
 
    :root {
      --chcr-void:         #4C1D95;
      --chcr-violet:       #7C3AED;
      --chcr-violet-mid:   #8B5CF6;
      --chcr-violet-soft:  #A78BFA;
      --chcr-lavender:     #EDE9FE;
      --chcr-lavender-xs:  #F5F3FF;
      --chcr-lavender-2xs: #FAFAFF;
 
      --chcr-coral:        #F97316;
      --chcr-coral-deep:   #EA580C;
      --chcr-coral-tint:   #FFF7ED;
 
      --chcr-ink:          #1E0A3C;
      --chcr-body:         #4B5268;
      --chcr-muted:        #9CA3C4;
      --chcr-border:       rgba(124,58,237,0.1);
      --chcr-white:        #FFFFFF;
 
      --chcr-shadow-glow:  0 0 0 1px rgba(124,58,237,0.08), 0 8px 40px rgba(124,58,237,0.12);
      --chcr-shadow-hover: 0 0 0 1px rgba(124,58,237,0.16), 0 20px 60px rgba(124,58,237,0.2);
      --chcr-shadow-float: 0 4px 24px rgba(76,29,149,0.18);
 
      --chcr-r-sm:  8px;
      --chcr-r-md:  14px;
      --chcr-r-lg:  22px;
      --chcr-r-xl:  32px;
      --chcr-r-2xl: 48px;
 
      --chcr-ease: cubic-bezier(0.4,0,0.2,1);
    }
 
    .chcr__wrapper * { box-sizing: border-box; }
    .chcr__wrapper {
 
      color: var(--chcr-body);
      background: var(--chcr-white);
      overflow-x: hidden;
      margin-top: 20px;
    }
 
    /* ============================================================
       SHARED ATOMS
       ============================================================ */
 
    .chcr__tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
       
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--chcr-violet);
      background: var(--chcr-lavender);
      padding: 6px 14px;
      border-radius: 50px;
      border: 1px solid rgba(124,58,237,0.18);
    }
 
    .chcr__tag-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--chcr-coral);
    }
 
    .chcr__h1 {
       max-width: 460px;
       font-weight: 600;
      font-size: clamp(36px, 5vw, 52px);
      line-height: 1.05;
      letter-spacing: -0.035em;
      color: var(--chcr-ink);
    }
 
    .chcr__h2 {
       
       font-weight: 600;
      font-size: clamp(28px, 3.8vw, 46px);
      line-height: 1.1;
      letter-spacing: -0.028em;
      color: var(--chcr-ink);
    }
 
    .chcr__h2 mark {
      background: none;
      color: var(--chcr-violet);
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(135deg, var(--chcr-violet) 0%, var(--chcr-violet-soft) 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
 
    .chcr__lead {
      font-size: 16.5px;
      line-height: 1.8;
      color: var(--chcr-body);
      max-width: 520px;
    }
 
    /* ============================================================
       FOLD 1 – ORBIT HERO
       Central phone, feature nodes orbiting on elliptical path
       ============================================================ */
 
    .chcr__f1 {
      background: var(--chcr-lavender-2xs);
      position: relative;
      padding: 100px 0 0;
      overflow: hidden;
      min-height: 100vh;
    }
 
    /* Subtle mesh background */
    .chcr__f1-mesh {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 15% 20%, rgba(124,58,237,0.06) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(249,115,22,0.05) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(124,58,237,0.03) 0%, transparent 60%);
      pointer-events: none;
    }
 
    /* Grid lines overlay */
    .chcr__f1-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(124,58,237,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,0.035) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
 
    .chcr__f1-content {
      position: relative;
      z-index: 2;
    }
 
    /* Left text column */
    .chcr__f1-text {
      padding-top: 40px;
      padding-bottom: 80px;
    }
 
    .chcr__f1-tag-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }
 
    .chcr__f1-live-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ECFDF5;
      border: 1px solid #6EE7B7;
      color: #065F46;
       
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 5px 12px;
      border-radius: 50px;
    }
 
    .chcr__f1-live-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
      animation: chcrLivePulse 1.8s ease-in-out infinite;
    }
 
    @keyframes chcrLivePulse {
      0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
      50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.08); }
    }
 
    .chcr__f1-headline {
      margin-bottom: 24px;
    }
 
    .chcr__f1-headline em {
      font-style: normal;
      display: block;
      background: linear-gradient(135deg, var(--chcr-violet) 0%, var(--chcr-coral) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
 
    .chcr__f1-sub {
      margin-bottom: 38px;
    }
 
    /* Download buttons */
    .chcr__dl-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 44px;
    }
 
    .chcr__btn-android {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      background: var(--chcr-violet);
      color: var(--chcr-white);
       
      font-size: 14px;
      font-weight: 700;
      padding: 14px 26px;
      border-radius: var(--chcr-r-md);
      text-decoration: none;
      transition: all 0.28s var(--chcr-ease);
      box-shadow: 0 4px 20px rgba(124,58,237,0.36), inset 0 1px 0 rgba(255,255,255,0.12);
    }
 
    .chcr__btn-android:hover {
      background: var(--chcr-void);
      color: var(--chcr-white);
      transform: translateY(-3px);
      box-shadow: 0 10px 36px rgba(124,58,237,0.44), inset 0 1px 0 rgba(255,255,255,0.12);
    }
 
    .chcr__btn-android i { font-size: 20px; color: #4ADE80; }
 
    .chcr__btn-android-inner {
      display: flex; flex-direction: column; line-height: 1.1;
    }
    .chcr__btn-android-inner small { font-size: 9.5px; opacity: 0.75; font-weight: 500; }
    .chcr__btn-android-inner strong { font-size: 14px; }
 
    .chcr__btn-ios {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      background: #000000;
      color: #ffffff;
       
      font-size: 14px;
      font-weight: 600;
      padding: 13px 24px;
      border-radius: var(--chcr-r-md);
      border: 1.5px solid var(--chcr-border);
       
      box-shadow: var(--chcr-shadow-glow);
      opacity: 0.78;
    }
 
    .chcr__btn-ios i { font-size: 20px; color: var(--chcr-muted); }
    .chcr__btn-ios-inner { display: flex; flex-direction: column; line-height: 1.1; }
    .chcr__btn-ios-inner small { font-size: 9.5px; color: var(--chcr-muted); font-weight: 500; }
    .chcr__btn-ios-inner strong { font-size: 13px; }
 
    /* Trust badges */
    .chcr__trust-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
 
    .chcr__trust-label {
      font-size: 11.5px;
      color: var(--chcr-muted);
      font-weight: 500;
    }
 
    .chcr__trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--chcr-body);
      background: var(--chcr-white);
      border: 1px solid var(--chcr-border);
      padding: 4px 10px;
      border-radius: 6px;
    }
 
    .chcr__trust-badge i { font-size: 11px; color: var(--chcr-violet); }
 
    /* ---- ORBIT VISUAL ---- */
    .chcr__orbit-wrap {
      position: relative;
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
      aspect-ratio: 1/1.05;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    /* SVG orbit rings */
    .chcr__orbit-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
 
    /* Phone shell */
    .chcr__phone {
      position: relative;
      z-index: 5;
      width: 300px;
      flex-shrink: 0;
    }
 
    .chcr__phone-shell {
      width: 176px;
      height: 356px;
      background: var(--chcr-white);
      border-radius: 36px;
      border: 6px solid #E8E1F8;
      box-shadow:
        0 0 0 1px rgba(124,58,237,0.12),
        0 32px 80px rgba(76,29,149,0.22),
        0 8px 24px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
      overflow: hidden;
      position: relative;
    }
 
    .chcr__phone-notch {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 56px; height: 10px;
      background: #E8E1F8;
      border-radius: 50px;
      z-index: 2;
    }
 
    .chcr__phone-screen {
      width: 100%; height: 100%;
      background: linear-gradient(170deg, #F5F3FF 0%, #EDE9FE 100%);
      display: flex;
      flex-direction: column;
      padding: 28px 10px 10px;
      gap: 8px;
      overflow: hidden;
    }
 
    .chcr__ph-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px 4px;
      border-bottom: 1px solid rgba(124,58,237,0.12);
      margin-bottom: 4px;
    }
 
    .chcr__ph-logo {
       
      font-size: 9px;  font-weight: 600;
      color: var(--chcr-void);
      letter-spacing: 0.04em;
    }
 
    .chcr__ph-bell { font-size: 10px; color: var(--chcr-violet); }
 
    .chcr__ph-statrow {
      display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
    }
 
    .chcr__ph-statcard {
      background: var(--chcr-white);
      border-radius: 8px;
      padding: 7px 6px;
      border: 1px solid rgba(124,58,237,0.08);
    }
 
    .chcr__ph-statcard-ico {
      font-size: 10px;
      margin-bottom: 3px;
    }
 
    .chcr__ph-statcard-val {
       
      font-size: 11px;  font-weight: 600;
      color: var(--chcr-ink);
      line-height: 1;
    }
 
    .chcr__ph-statcard-lbl {
      font-size: 7px; color: var(--chcr-muted);
    }
 
    .chcr__ph-section-lbl {
       
      font-size: 7.5px; font-weight: 700;
      color: var(--chcr-violet);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
 
    .chcr__ph-bar-row {
      display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
    }
 
    .chcr__ph-bar-lbl { font-size: 7px; color: var(--chcr-muted); width: 52px; flex-shrink: 0; }
    .chcr__ph-bar-track {
      flex: 1; height: 4px; background: var(--chcr-lavender); border-radius: 50px; overflow: hidden;
    }
    .chcr__ph-bar-fill { height: 100%; border-radius: 50px; }
    .chcr__ph-bar-fill--v { background: linear-gradient(90deg, var(--chcr-violet), var(--chcr-violet-soft)); }
    .chcr__ph-bar-fill--o { background: linear-gradient(90deg, var(--chcr-coral-deep), var(--chcr-coral)); }
    .chcr__ph-bar-fill--g { background: linear-gradient(90deg, #059669, #34D399); }
    .chcr__ph-bar-pct { font-size: 7px; font-weight: 700; color: var(--chcr-ink); width: 18px; }
 
    .chcr__ph-notif {
      background: var(--chcr-white);
      border-radius: 8px;
      padding: 7px 8px;
      border: 1px solid rgba(124,58,237,0.08);
      display: flex; align-items: center; gap: 6px;
    }
 
    .chcr__ph-notif-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
 
    .chcr__ph-notif-text {
      font-size: 7.5px; color: var(--chcr-body); line-height: 1.3;
    }
 
    /* Orbit nodes */
    .chcr__orbit-node {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      z-index: 4;
      cursor: default;
    }
 
    .chcr__orbit-node-icon {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(124,58,237,0.2), 0 0 0 1px rgba(255,255,255,0.8);
      transition: transform 0.3s var(--chcr-ease), box-shadow 0.3s var(--chcr-ease);
    }
 
    .chcr__orbit-node-icon:hover {
      transform: scale(1.12);
      box-shadow: 0 8px 32px rgba(124,58,237,0.3), 0 0 0 1px rgba(255,255,255,0.9);
    }
 
    .chcr__orbit-node-icon i { font-size: 18px; }
 
    .chcr__orbit-node-label {
       
      font-size: 9.5px;
      font-weight: 700;
      color: var(--chcr-ink);
      white-space: nowrap;
      background: var(--chcr-white);
      padding: 3px 8px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      border: 1px solid var(--chcr-border);
      text-align: center;
    }
 
    /* node color variants */
    .chcr__on--violet { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); }
    .chcr__on--violet i { color: var(--chcr-violet); }
    .chcr__on--coral  { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
    .chcr__on--coral i { color: var(--chcr-coral-deep); }
    .chcr__on--green  { background: linear-gradient(135deg, #ECFDF5, #A7F3D0); }
    .chcr__on--green i { color: #059669; }
    .chcr__on--blue   { background: linear-gradient(135deg, #EFF6FF, #BFDBFE); }
    .chcr__on--blue i { color: #2563EB; }
    .chcr__on--pink   { background: linear-gradient(135deg, #FDF2F8, #FBCFE8); }
    .chcr__on--pink i { color: #BE185D; }
    .chcr__on--amber  { background: linear-gradient(135deg, #FFFBEB, #FDE68A); }
    .chcr__on--amber i { color: #D97706; }
    .chcr__on--teal   { background: linear-gradient(135deg, #F0FDFA, #99F6E4); }
    .chcr__on--teal i { color: #0F766E; }
    .chcr__on--indigo { background: linear-gradient(135deg, #EEF2FF, #C7D2FE); }
    .chcr__on--indigo i { color: #4338CA; }
 
    /* ============================================================
       FOLD 2 – FEATURES AS HORIZONTAL REVEAL STRIP
       Each feature: full-width row alternating text/visual sides
       ============================================================ */
 
    .chcr__f2 {
      background: var(--chcr-white);
      padding: 100px 0;
    }
 
    .chcr__f2-header {
      text-align: center;
      max-width: 620px;
      margin: 0 auto 80px;
    }
 
    .chcr__f2-accent-line {
      width: 40px; height: 3px;
      background: linear-gradient(90deg, var(--chcr-violet), var(--chcr-coral));
      border-radius: 2px;
      margin: 18px auto 0;
    }
 
    /* Feature strip items */
    .chcr__feat-strip {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
 
    .chcr__feat-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 0;
      padding: 48px 0;
      border-top: 1px solid rgba(124,58,237,0.06);
      opacity: 0;
      transform: translateY(40px);
    }
 
    .chcr__feat-row:last-child { border-bottom: 1px solid rgba(124,58,237,0.06); }
 
    .chcr__feat-row--flip .chcr__feat-text-side { order: 2; }
    .chcr__feat-row--flip .chcr__feat-vis-side  { order: 1; }
 
    .chcr__feat-text-side { padding: 0 48px 0 0; }
    .chcr__feat-row--flip .chcr__feat-text-side { padding: 0 0 0 48px; }
 
    .chcr__feat-index {
       
      font-size: 11px;
       font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--chcr-violet-soft);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
 
    .chcr__feat-index::after {
      content: '';
      flex: 1;
      max-width: 32px;
      height: 1.5px;
      background: var(--chcr-lavender);
      display: inline-block;
    }
 
    .chcr__feat-row-title {
       
      font-size: clamp(20px, 2.2vw, 26px);
       font-weight: 600;
      color: var(--chcr-ink);
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }
 
    .chcr__feat-row-desc {
      font-size: 15px;
      line-height: 1.75;
      color: var(--chcr-body);
      margin: 0;
    }
 
    /* Visual side – large icon tile */
    .chcr__feat-vis-side {
      display: flex;
      justify-content: center;
      align-items: center;
    }
 
    .chcr__feat-icon-tile {
      width: 180px; height: 180px;
      border-radius: var(--chcr-r-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
 
    .chcr__feat-icon-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: inherit;
      filter: blur(0px);
    }
 
    .chcr__feat-icon-tile i {
      font-size: 64px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
    }
 
    /* tile color variants */
    .chcr__ft--v { background: linear-gradient(145deg, #EDE9FE 0%, #C4B5FD 100%); }
    .chcr__ft--v i { color: var(--chcr-void); }
    .chcr__ft--o { background: linear-gradient(145deg, #FFF7ED 0%, #FED7AA 100%); }
    .chcr__ft--o i { color: var(--chcr-coral-deep); }
    .chcr__ft--g { background: linear-gradient(145deg, #ECFDF5 0%, #6EE7B7 100%); }
    .chcr__ft--g i { color: #065F46; }
    .chcr__ft--b { background: linear-gradient(145deg, #EFF6FF 0%, #93C5FD 100%); }
    .chcr__ft--b i { color: #1D4ED8; }
    .chcr__ft--p { background: linear-gradient(145deg, #FDF2F8 0%, #F9A8D4 100%); }
    .chcr__ft--p i { color: #9D174D; }
    .chcr__ft--a { background: linear-gradient(145deg, #FFFBEB 0%, #FCD34D 100%); }
    .chcr__ft--a i { color: #92400E; }
    .chcr__ft--t { background: linear-gradient(145deg, #F0FDFA 0%, #5EEAD4 100%); }
    .chcr__ft--t i { color: #134E4A; }
    .chcr__ft--i { background: linear-gradient(145deg, #EEF2FF 0%, #A5B4FC 100%); }
    .chcr__ft--i i { color: #312E81; }
 
    /* Fold 2 CTA */
    .chcr__f2-cta-wrap {
      display: flex;
      justify-content: center;
      margin-top: 72px;
    }
 
    .chcr__btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--chcr-violet) 0%, var(--chcr-void) 100%);
      color: var(--chcr-white);
       
      font-size: 14.5px;
      font-weight: 700;
      padding: 16px 34px;
      border-radius: var(--chcr-r-md);
      text-decoration: none;
      transition: all 0.28s var(--chcr-ease);
      box-shadow: 0 4px 24px rgba(124,58,237,0.38);
      letter-spacing: 0.01em;
    }
 
    .chcr__btn-primary:hover {
      color: var(--chcr-white);
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(124,58,237,0.46);
    }
 
    /* ============================================================
       FOLD 3 – MORPHING USER PANEL
       Large left: bold user-type display text that transforms
       Right: benefit list that fades/slides on change
       ============================================================ */
 
    .chcr__f3 {
      background: var(--chcr-lavender-xs);
      padding: 100px 0 0;
      overflow: hidden;
    }
 
    .chcr__f3-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 72px;
    }
 
    /* Selector pills */
    .chcr__user-selector {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 64px;
    }
 
    .chcr__user-sel-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: 50px;
      border: 1.5px solid var(--chcr-border);
      background: var(--chcr-white);
       
      font-size: 13px;
      font-weight: 700;
      color: var(--chcr-body);
      cursor: pointer;
      transition: all 0.24s var(--chcr-ease);
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
 
    .chcr__user-sel-btn i { font-size: 15px; }
 
    .chcr__user-sel-btn:hover {
      border-color: rgba(124,58,237,0.3);
      color: var(--chcr-violet);
      box-shadow: 0 4px 16px rgba(124,58,237,0.1);
    }
 
    .chcr__user-sel-btn.chcr--sel-active {
      background: var(--chcr-violet);
      border-color: var(--chcr-violet);
      color: var(--chcr-white);
      box-shadow: 0 6px 24px rgba(124,58,237,0.36);
    }
 
    .chcr__user-sel-btn.chcr--sel-active i { color: var(--chcr-white); }
 
    /* Panel layout */
    .chcr__user-panel {
      display: none;
    }
 
    .chcr__user-panel.chcr--panel-active {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 0;
      align-items: end;
    }
 
    /* Left: giant display type */
    .chcr__panel-display {
      padding: 60px 56px 0 24px;
      position: relative;
    }
 
    .chcr__panel-type-eyebrow {
       
      font-size: 11px;
       font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--chcr-violet-soft);
      margin-bottom: 20px;
    }
 
    .chcr__panel-type-heading {
       
      font-weight: 600;
      font-size: clamp(44px, 6vw, 52px);
      line-height: 0.96;
      letter-spacing: -0.04em;
      margin-bottom: 28px;
    }
 
    .chcr__panel-type-desc {
      font-size: 16px;
      line-height: 1.75;
      color: var(--chcr-body);
      max-width: 400px;
      margin-bottom: 36px;
    }
 
    .chcr__panel-stat-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
 
    .chcr__panel-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
 
    .chcr__panel-stat-num {
       
      font-size: 28px;
       font-weight: 600;
      line-height: 1;
      letter-spacing: -0.03em;
    }
 
    .chcr__panel-stat-lbl {
      font-size: 12px;
      color: var(--chcr-muted);
      font-weight: 500;
    }
 
    /* Right: benefit list card stack */
    .chcr__panel-benefits {
      background: var(--chcr-white);
      border-radius: var(--chcr-r-2xl) var(--chcr-r-2xl) 0 0;
      padding: 48px 44px;
      box-shadow: 0 -8px 60px rgba(124,58,237,0.1);
      position: relative;
      overflow: hidden;
    }
 
    .chcr__panel-benefits::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--chcr-violet), var(--chcr-coral));
    }
 
    .chcr__panel-benefits-label {
       
      font-size: 11px;
       font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--chcr-violet);
      margin-bottom: 24px;
    }
 
    .chcr__benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(124,58,237,0.06);
    }
 
    .chcr__benefit-item:last-child { border-bottom: none; }
 
    .chcr__benefit-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .chcr__benefit-icon i { font-size: 15px; }
 
    .chcr__benefit-text-wrap { display: flex; flex-direction: column; gap: 2px; }
 
    .chcr__benefit-title {
       
      font-size: 14px;
      font-weight: 700;
      color: var(--chcr-ink);
      line-height: 1.3;
    }
 
    .chcr__benefit-desc {
      font-size: 12.5px;
      color: var(--chcr-muted);
      line-height: 1.5;
    }
 
    /* Provider panel colors */
    .chcr__panel--provider .chcr__panel-type-heading { color: var(--chcr-void); }
    .chcr__panel--provider .chcr__panel-stat-num     { color: var(--chcr-violet); }
    .chcr__panel--provider .chcr__benefit-icon       { background: var(--chcr-lavender); }
    .chcr__panel--provider .chcr__benefit-icon i     { color: var(--chcr-violet); }
 
    /* Admin panel colors */
    .chcr__panel--admin .chcr__panel-type-heading { color: #312E81; }
    .chcr__panel--admin .chcr__panel-stat-num     { color: #4338CA; }
    .chcr__panel--admin .chcr__benefit-icon       { background: var(--chcr-indigo-tint, #EEF2FF); }
    .chcr__panel--admin .chcr__benefit-icon i     { color: #4338CA; }
 
    /* Org panel colors */
    .chcr__panel--org .chcr__panel-type-heading { color: #7C2D12; }
    .chcr__panel--org .chcr__panel-stat-num     { color: var(--chcr-coral-deep); }
    .chcr__panel--org .chcr__benefit-icon       { background: var(--chcr-coral-tint); }
    .chcr__panel--org .chcr__benefit-icon i     { color: var(--chcr-coral-deep); }
 
    /* ============================================================
       BOTTOM CTA
       ============================================================ */
 
    .chcr__cta {
      background: var(--chcr-void);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }
 
    .chcr__cta-orb1 {
      position: absolute;
      top: -120px; left: -120px;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(124,58,237,0.5) 0%, transparent 65%);
      pointer-events: none;
    }
 
    .chcr__cta-orb2 {
      position: absolute;
      bottom: -100px; right: -100px;
      width: 350px; height: 350px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 65%);
      pointer-events: none;
    }
 
    .chcr__cta-inner {
      position: relative; z-index: 1; text-align: center;
    }
 
    .chcr__cta-eyebrow {
       
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 16px;
    }
 
    .chcr__cta-title {
       
      font-size: clamp(28px, 4vw, 48px);
       font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: var(--chcr-white);
      margin-bottom: 14px;
    }
 
    .chcr__cta-title span {
      background: linear-gradient(135deg, #C4B5FD 0%, var(--chcr-coral) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
 
    .chcr__cta-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.62);
      line-height: 1.7;
      max-width: 480px;
      margin: 0 auto 40px;
    }
 
    .chcr__cta-btns {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
    }
 
    .chcr__btn-cta-solid {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--chcr-coral);
      color: var(--chcr-white);
       
      font-size: 14px;  font-weight: 600;
      padding: 16px 34px;
      border-radius: var(--chcr-r-md);
      text-decoration: none;
      transition: all 0.28s var(--chcr-ease);
      box-shadow: 0 4px 24px rgba(249,115,22,0.42);
    }
 
    .chcr__btn-cta-solid:hover {
      background: var(--chcr-coral-deep);
      color: var(--chcr-white);
      transform: translateY(-3px);
      box-shadow: 0 10px 36px rgba(234,88,12,0.5);
    }
 
    .chcr__btn-cta-outline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: rgba(255,255,255,0.82);
       
      font-size: 14px; font-weight: 600;
      padding: 15px 28px;
      border-radius: var(--chcr-r-md);
      border: 1.5px solid rgba(255,255,255,0.2);
      text-decoration: none;
      transition: all 0.24s var(--chcr-ease);
    }
 
    .chcr__btn-cta-outline:hover {
      background: rgba(255,255,255,0.08);
      color: var(--chcr-white);
    }
 
    /* ============================================================
       RESPONSIVE
       ============================================================ */
 
    @media (max-width: 1199px) {
      .chcr__feat-text-side { padding: 0 32px 0 0; }
      .chcr__feat-row--flip .chcr__feat-text-side { padding: 0 0 0 32px; }
    }
 
    @media (max-width: 991px) {
      .chcr__f1 { padding: 72px 0 0; }
      .chcr__f1-text { padding-bottom: 48px; }
      .chcr__orbit-wrap { max-width: 420px; }
      .chcr__phone { width: 148px; }
      .chcr__phone-shell { width: 148px; height: 298px; border-radius: 30px; }
 
      .chcr__feat-row { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
      .chcr__feat-row--flip .chcr__feat-text-side { order: 0; }
      .chcr__feat-row--flip .chcr__feat-vis-side  { order: 1; }
      .chcr__feat-text-side,
      .chcr__feat-row--flip .chcr__feat-text-side { padding: 0; }
      .chcr__feat-vis-side { justify-content: flex-start; }
      .chcr__feat-icon-tile { width: 120px; height: 120px; border-radius: var(--chcr-r-lg); }
      .chcr__feat-icon-tile i { font-size: 44px; }
 
      .chcr__user-panel.chcr--panel-active { grid-template-columns: 1fr; }
      .chcr__panel-display { padding: 40px 24px 0; }
      .chcr__panel-benefits { border-radius: var(--chcr-r-xl) var(--chcr-r-xl) 0 0; padding: 36px 28px; }
    }
 
    @media (max-width: 767px) {
      .chcr__orbit-node-label { display: none; }
      .chcr__orbit-node-icon { width: 40px; height: 40px; border-radius: 11px; }
      .chcr__orbit-node-icon i { font-size: 15px; }
      .chcr__dl-row { flex-direction: column; }
      .chcr__panel-type-heading { font-size: 44px; }
      .chcr__f2, .chcr__f3, .chcr__cta { padding-top: 64px; }
    }
 
    @media (prefers-reduced-motion: reduce) {
      .chcr__f1-live-dot { animation: none; }
      .chcr__feat-row { opacity: 1 !important; transform: none !important; }
      * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    .app-logo-wrapper {
    width: 150px;
    margin-left: 30px;
     }