/* ── FONT OVERRIDES ── */
    h1,h2,h3,h4,h5,h6,.headline,.title,.display {
      font-family: "Bricolage Grotesque", sans-serif !important;
    }
    body, p, li, td, span, div {
      font-family: "IBM Plex Sans", sans-serif;
    }
    code, pre, .mono, .monospace, .label, .tag, .badge,
    .metric, .stat, .number, .data, time {
      font-family: "IBM Plex Mono", monospace;
    }
    
    </style>

  <!-- James E. Coleman — Design System -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet">
  <style id="ds-tokens">
    /* ── DESIGN TOKENS ── */
    :root {
      --blue:      #1A52F5;
      --blue-lt:   #4472FF;
      --blue-bg:   rgba(26,82,245,0.08);
      --green:     #07C98D;
      --green-bg:  rgba(7,201,141,0.08);
      --ff-display: "Bricolage Grotesque", sans-serif;
      --ff-body:    "IBM Plex Sans", sans-serif;
      --ff-mono:    "IBM Plex Mono", monospace;
    }
    [data-theme="dark"], :root {
      --bg:        #080A10;
      --surface:   #0E1018;
      --surface-2: #13161F;
      --line:      rgba(255,255,255,0.07);
      --line-md:   rgba(255,255,255,0.12);
      --text-hi:   #E4E8F4;
      --text-mid:  rgba(228,232,244,0.55);
      --text-lo:   rgba(228,232,244,0.22);
      --accent:    var(--blue-lt);
      --accent-bg: var(--blue-bg);
      --nav-blur:  rgba(8,10,16,0.88);
    }
    [data-theme="light"] {
      --bg:        #F0F2F7;
      --surface:   #FFFFFF;
      --surface-2: #E6E9F0;
      --line:      rgba(0,0,0,0.07);
      --line-md:   rgba(0,0,0,0.13);
      --text-hi:   #080A10;
      --text-mid:  rgba(8,10,16,0.52);
      --text-lo:   rgba(8,10,16,0.22);
      --accent:    var(--blue);
      --accent-bg: rgba(26,82,245,0.06);
      --nav-blur:  rgba(240,242,247,0.88);
    }

    /* ── RESET OVERRIDES ── */
    body {
      background: var(--bg) !important;
      color: var(--text-hi) !important;
      font-family: var(--ff-body) !important;
      cursor: none;
    }
    body::before {
      content: "";
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    a { color: inherit; }

    /* ── CURSOR ── */
    #jec-cursor { position:fixed;top:0;left:0;z-index:9999;pointer-events:none; }
    .cur-dot {
      position:absolute;width:6px;height:6px;
      background:var(--accent);border-radius:50%;
      transform:translate(-50%,-50%);
    }
    .cur-ring {
      position:absolute;width:32px;height:32px;
      border:1px solid var(--accent);border-radius:50%;
      transform:translate(-50%,-50%);opacity:.4;
      transition:width .2s,height .2s,opacity .2s;
    }
    body.ch .cur-ring{width:48px;height:48px;opacity:.7;}

    /* ── NAV BAR ── */
    #jec-nav {
      position: fixed; inset: 0 0 auto; z-index: 300;
      height: 58px; padding: 0 40px;
      display: flex; align-items: center;
      border-bottom: 1px solid var(--line);
      background: var(--nav-blur);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    .jec-brand {
      display:flex;flex-direction:column;gap:4px;text-decoration:none;
    }
    .jec-rule { display:flex; }
    .jnb-blue  { width:20px;height:2px;background:var(--blue); }
    .jnb-green { width:10px;height:2px;background:var(--green); }
    .jnb-dim   { width:32px;height:2px;background:var(--line-md); }
    .jec-name {
      font-family:var(--ff-display);font-size:.82rem;font-weight:800;
      letter-spacing:.12em;text-transform:uppercase;color:var(--text-hi);line-height:1;
    }
    .jec-name .je { color:var(--blue);font-weight:400; }
    .jec-sub {
      font-family:var(--ff-mono);font-size:.48rem;font-weight:300;
      letter-spacing:.22em;text-transform:uppercase;color:var(--text-mid);line-height:1;
    }
    .jec-avail {
      margin-left:20px;display:flex;align-items:center;gap:6px;
      font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;color:var(--text-mid);
    }
    .jec-pulse {
      width:6px;height:6px;border-radius:50%;background:var(--green);
      animation:jecPulse 2.2s ease infinite;
    }
    @keyframes jecPulse{0%,100%{box-shadow:0 0 0 0 rgba(7,201,141,.5);}50%{box-shadow:0 0 0 5px rgba(7,201,141,0);}}
    .jec-links { margin-left:auto;display:flex;gap:28px;align-items:center; }
    .jec-links a {
      font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.1em;
      text-transform:uppercase;color:var(--text-mid);transition:color .2s;
      text-decoration:none;
    }
    .jec-links a:hover { color:var(--text-hi); }
    .jec-links a.active { color:var(--accent); }
    .jec-back {
      display:flex;align-items:center;gap:8px;
      font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.1em;
      text-transform:uppercase;color:var(--text-mid);transition:color .2s;
      text-decoration:none;
    }
    .jec-back:hover { color:var(--accent); }
    .jec-back svg { transition: transform .2s; }
    .jec-back:hover svg { transform: translateX(-3px); }
    .jec-toggle {
      margin-left:20px;width:40px;height:20px;background:var(--surface-2);
      border:1px solid var(--line-md);border-radius:10px;position:relative;
      cursor:pointer;flex-shrink:0;transition:background .3s;
    }
    .jec-toggle::after {
      content:"";position:absolute;width:14px;height:14px;border-radius:50%;
      background:var(--accent);top:2px;left:2px;
      transition:transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    [data-theme="light"] .jec-toggle::after { transform:translateX(20px); }

    /* body offset for fixed nav */
    body { padding-top: 58px !important; }
  </style>

  <style id="ds-darkmode-override">
    /* DARK MODE VISIBILITY OVERRIDES */
    [data-theme="dark"] p,
    [data-theme="dark"] li,
    [data-theme="dark"] span,
    [data-theme="dark"] label,
    [data-theme="dark"] td,
    [data-theme="dark"] th,
    [data-theme="dark"] small,
    [data-theme="dark"] figcaption { color: var(--text-mid); }

    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5,
    [data-theme="dark"] h6,
    [data-theme="dark"] strong,
    [data-theme="dark"] b { color: var(--text-hi); }

    [data-theme="dark"] [style*="color: #333"],
    [data-theme="dark"] [style*="color:#333"],
    [data-theme="dark"] [style*="color: #222"],
    [data-theme="dark"] [style*="color:#222"],
    [data-theme="dark"] [style*="color: #111"],
    [data-theme="dark"] [style*="color:#111"],
    [data-theme="dark"] [style*="color: #444"],
    [data-theme="dark"] [style*="color:#444"],
    [data-theme="dark"] [style*="color: #555"],
    [data-theme="dark"] [style*="color:#555"],
    [data-theme="dark"] [style*="color: #666"],
    [data-theme="dark"] [style*="color:#666"],
    [data-theme="dark"] [style*="color: #777"],
    [data-theme="dark"] [style*="color:#777"],
    [data-theme="dark"] [style*="color: #888"],
    [data-theme="dark"] [style*="color:#888"],
    [data-theme="dark"] [style*="color: black"],
    [data-theme="dark"] [style*="color:black"],
    [data-theme="dark"] [style*="color: rgb(0"],
    [data-theme="dark"] [style*="color:rgb(0"] { color: var(--text-mid) !important; }

    [data-theme="dark"] [style*="background: white"],
    [data-theme="dark"] [style*="background:white"],
    [data-theme="dark"] [style*="background: #fff"],
    [data-theme="dark"] [style*="background:#fff"],
    [data-theme="dark"] [style*="background: #FFF"],
    [data-theme="dark"] [style*="background-color: white"],
    [data-theme="dark"] [style*="background-color: #fff"],
    [data-theme="dark"] [style*="background-color:#fff"] { background: var(--surface) !important; }

    [data-theme="dark"] table,
    [data-theme="dark"] tr,
    [data-theme="dark"] td,
    [data-theme="dark"] th { border-color: var(--line) !important; }

    #jec-nav { z-index: 10000 !important; }
  </style>


  <style id="ds-lightmode-override">
    /* LIGHT MODE VISIBILITY OVERRIDES */
    [data-theme="light"] {
      --bg:        #F0F2F7;
      --surface:   #FFFFFF;
      --surface-2: #E6E9F0;
      --line:      rgba(0,0,0,0.07);
      --line-md:   rgba(0,0,0,0.13);
      --text-hi:   #080A10;
      --text-mid:  rgba(8,10,16,0.58);
      --text-lo:   rgba(8,10,16,0.30);
      --dot:       rgba(0,0,0,0.05);
      --nav-blur:  rgba(240,242,247,0.92);
    }

    /* Force body bg */
    [data-theme="light"] body { background: #F0F2F7 !important; color: #080A10 !important; }

    /* Headings */
    [data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,
    [data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6,
    [data-theme="light"] strong,[data-theme="light"] b { color: #080A10 !important; }

    /* Body text */
    [data-theme="light"] p,[data-theme="light"] li,[data-theme="light"] td,
    [data-theme="light"] th,[data-theme="light"] label,[data-theme="light"] span {
      color: rgba(8,10,16,0.72);
    }

    /* Cards/panels — dark bg from original CSS needs flipping */
    [data-theme="light"] .card,[data-theme="light"] .panel,[data-theme="light"] .box,
    [data-theme="light"] .metric-card,[data-theme="light"] .stat-card,
    [data-theme="light"] .feature,[data-theme="light"] .content-box,
    [data-theme="light"] .section-card,[data-theme="light"] .glass,
    [data-theme="light"] [class*="card"],[data-theme="light"] [class*="panel"],
    [data-theme="light"] [class*="box"],[data-theme="light"] [class*="widget"] {
      background: #FFFFFF !important;
      border-color: rgba(0,0,0,0.09) !important;
      color: rgba(8,10,16,0.72);
    }

    /* Dark sections that need to flip */
    [data-theme="light"] section,[data-theme="light"] .section,[data-theme="light"] article {
      background: transparent;
    }

    /* Nav */
    [data-theme="light"] #jec-nav {
      background: rgba(240,242,247,0.92) !important;
      border-color: rgba(0,0,0,0.09) !important;
    }
    [data-theme="light"] #jec-nav a,
    [data-theme="light"] #jec-nav span { color: rgba(8,10,16,0.72) !important; }
    [data-theme="light"] #jec-nav .jec-name { color: #080A10 !important; }

    /* Hardcoded dark backgrounds in inline styles */
    [data-theme="light"] [style*="background: #080A10"],
    [data-theme="light"] [style*="background:#080A10"],
    [data-theme="light"] [style*="background: #0E1018"],
    [data-theme="light"] [style*="background: #13161F"],
    [data-theme="light"] [style*="background: #0a0a0a"],
    [data-theme="light"] [style*="background: #111"],
    [data-theme="light"] [style*="background: #1a1a1a"],
    [data-theme="light"] [style*="background: #0d1117"],
    [data-theme="light"] [style*="background: rgb(8"],
    [data-theme="light"] [style*="background-color: #080"],
    [data-theme="light"] [style*="background-color: #0E1"] { 
      background: #FFFFFF !important; 
    }

    /* White text that becomes invisible on light */
    [data-theme="light"] [style*="color: #E4E8F4"],
    [data-theme="light"] [style*="color:#E4E8F4"],
    [data-theme="light"] [style*="color: white"],
    [data-theme="light"] [style*="color:white"],
    [data-theme="light"] [style*="color: #fff"],
    [data-theme="light"] [style*="color:#fff"],
    [data-theme="light"] [style*="color: #FFF"],
    [data-theme="light"] [style*="color: rgba(228"],
    [data-theme="light"] [style*="color:rgba(228"] { color: #080A10 !important; }

    /* Borders */
    [data-theme="light"] table,[data-theme="light"] tr,
    [data-theme="light"] td,[data-theme="light"] th { border-color: rgba(0,0,0,0.09) !important; }

    /* Scrollbar */
    [data-theme="light"] ::-webkit-scrollbar-track { background: #E6E9F0; }
    [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
  </style>

</head>
<body>
<div id="jec-cursor"><div class="cur-dot"></div><div class="cur-ring"></div></div>
  <nav id="jec-nav">
    <a href="index.html" class="jec-brand">
      <div class="jec-rule">
        <div class="jnb-blue"></div><div class="jnb-green"></div><div class="jnb-dim"></div>
      </div>
      <div class="jec-name">James&nbsp;<span class="je">E.</span>&nbsp;Coleman</div>
      <div class="jec-sub">Strategic Advisory</div>
    </a>
    <div class="jec-avail"><div class="jec-pulse"></div>Available for advisory</div>
    <div class="jec-links">
      <a href="index.html#whitepapers">Research</a>
      <a href="index.html#services">Services</a>
      <a href="index.html#work" class="active">Work</a>
      <a href="index.html#process">Process</a>
      <a href="index.html#contact">Contact</a>
      <div class="jec-toggle" id="jecThemeToggle"></div>
    </div>
  </nav>

    
    
    
    <!-- Case Study Header -->
    <header class="case-header">
        <div class="case-header-content">
            <span class="case-badge">Healthcare Technology Case Study</span>
            <div class="vitalog-logo">
                <div class="vitalog-icon">
                    <div class="vitalog-diamond"></div>
                </div>
                <div class="vitalog-text">VITALOG</div>
            </div>
            <h1>Reimagining Personal Health Journaling</h1>
            <p>Designing an intuitive health companion app that bridges the gap between personal wellness tracking and advanced EHR integration for empowered healthcare decisions.</p>
            
            <!-- Animated Health Metrics -->
            <div class="header-metrics">
                <div class="metric-animation steps-metric">
                    <div class="metric-icon-animated">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M9 19V6l7-3v11M9 12l7-3"></path>
                        </svg>
                    </div>
                    <div class="metric-details">
                        <span class="metric-label">Weekly Steps</span>
                        <span class="metric-number-animated">42,847</span>
                    </div>
                </div>
                
                <div class="notification-popup medication-reminder">
                    <div class="notification-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                        </svg>
                    </div>
                    <div class="notification-content">
                        <span class="notification-title">Medication Reminder</span>
                        <span class="notification-text">Time to take Metformin - 500mg</span>
                    </div>
                </div>
                
                <div class="notification-popup pharmacy-alert">
                    <div class="notification-icon pharmacy">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                            <rect x="3" y="11" width="18" height="10" rx="2"></rect>
                            <path d="M12 17v-3"></path>
                        </svg>
                    </div>
                    <div class="notification-content">
                        <span class="notification-title">CVS Pharmacy</span>
                        <span class="notification-text">Your prescription is ready for pickup</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <!-- Project Meta -->
    <section class="case-meta">
        <div class="meta-item">
            <h3>Project Type</h3>
            <p>Healthcare Technology Platform</p>
        </div>
        <div class="meta-item">
            <h3>Role</h3>
            <p>Lead Designer, Brand Strategy</p>
        </div>
        <div class="meta-item">
            <h3>Key Focus</h3>
            <p>UX Design, Branding, EHR Integration</p>
        </div>
        <div class="meta-item">
            <h3>Platform</h3>
            <p>Web & Mobile Companion App</p>
        </div>
    </section>
    
    <!-- Challenge Section -->
    <section class="case-section">
        <h2>The Challenge</h2>
        <p>
            In an era of fragmented health data and overwhelming medical information, patients struggle to maintain comprehensive health records and communicate effectively with healthcare providers. Traditional health journaling methods are either too simplistic to capture meaningful patterns or too complex for regular use.
        </p>
        <p>
            Vitalog needed to solve the critical gap between personal health tracking and professional healthcare systems. The challenge was creating a platform that empowers users to document their health journey through self-discovery and community support while maintaining medical-grade data integrity for potential EHR integration.
        </p>
    </section>
    
    <!-- Solution Section -->
    <section class="case-section">
        <h2>The Solution</h2>
        <p>
            I designed Vitalog as a comprehensive health journaling ecosystem that makes personal health tracking as intuitive as social media while maintaining the rigor needed for medical documentation. The platform combines thoughtful UX design with advanced health tech capabilities to create a truly empowering user experience.
        </p>
        
        <div class="feature-list">
            <div class="feature-item">
                <h3>Intuitive Journal Creation</h3>
                <p>Multi-journal system allowing users to track different health aspects—from fitness and nutrition to chronic conditions—with customizable templates and smart categorization.</p>
            </div>
            <div class="feature-item">
                <h3>Community-Driven Insights</h3>
                <p>Anonymous sharing capabilities that let users learn from others' experiences while maintaining privacy, creating a supportive health community.</p>
            </div>
            <div class="feature-item">
                <h3>Advanced EHR Ready</h3>
                <p>Built with FHIR-compliant data structures, enabling seamless integration with healthcare provider systems while maintaining user control over data sharing.</p>
            </div>
        </div>
    </section>
    
    <!-- Brand Development Section -->
    <section class="case-section">
        <h2>Brand Development</h2>
        
        <h3>Visual Identity</h3>
        <p>
            The Vitalog brand embodies trust, vitality, and empowerment. I developed a visual language that feels both medical and approachable, using a vibrant teal as the primary color to represent health and growth, balanced with clean typography and generous whitespace for clarity.
        </p>
        
        <div class="color-palette">
            <div class="color-swatch">
                <div class="swatch-color" style="background: #00D9B1;"></div>
                <div class="swatch-info">
                    <h4>Primary Teal</h4>
                    <p>#00D9B1</p>
                </div>
            </div>
            <div class="color-swatch">
                <div class="swatch-color" style="background: #E8FAF7;"></div>
                <div class="swatch-info">
                    <h4>Light Teal</h4>
                    <p>#E8FAF7</p>
                </div>
            </div>
            <div class="color-swatch">
                <div class="swatch-color" style="background: #4A90E2;"></div>
                <div class="swatch-info">
                    <h4>Health Blue</h4>
                    <p>#4A90E2</p>
                </div>
            </div>
            <div class="color-swatch">
                <div class="swatch-color" style="background: #FF5757;"></div>
                <div class="swatch-info">
                    <h4>Alert Red</h4>
                    <p>#FF5757</p>
                </div>
            </div>
        </div>
        
        <h3>Logo Philosophy</h3>
        <p>
            The Vitalog wordmark uses clean, modern typography that conveys reliability and innovation. The accompanying icon—a stylized diamond—can function independently in app environments while maintaining brand recognition. The design system prioritizes accessibility with high contrast ratios and clear visual hierarchy.
        </p>
    </section>
    
    <!-- Mobile UI Showcase -->
    <section class="ui-showcase-section">
        <div class="showcase-container">
            <div class="showcase-header">
                <h2>Mobile Experience Design</h2>
                <p>A health companion that fits in your pocket - designed for daily engagement</p>
            </div>
            
            <!-- Mobile Demo -->
            <div class="mobile-showcase-wrapper">
                <div class="mobile-demo-tabs">
                    <button class="mobile-demo-tab active" onclick="showMobileScreen('home')">Home</button>
                    <button class="mobile-demo-tab" onclick="showMobileScreen('entry')">Quick Entry</button>
                    <button class="mobile-demo-tab" onclick="showMobileScreen('journal')">Journals</button>
                </div>
                
                <div class="mobile-screens-container">
                    <!-- Mobile Home Screen -->
                    <div class="mobile-screen-wrapper active" id="mobile-screen-home">
                        <div class="mobile-container">
                            <div class="mobile-status-bar">
                                <span class="time">9:41 AM</span>
                                <div class="status-icons">
                                    <span>📶</span>
                                    <span>📶</span>
                                    <span>🔋</span>
                                </div>
                            </div>
                            
                            <div class="mobile-header">
                                <div class="mobile-header-content">
                                    <div class="mobile-user">
                                        <div class="user-avatar-small">JM</div>
                                        <div>
                                            <h3>Good morning, Jeff</h3>
                                            <p>How are you feeling today?</p>
                                        </div>
                                    </div>
                                    <button class="notification-btn">
                                        <span class="notification-dot"></span>
                                        🔔
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mobile-quick-entry">
                                <input type="text" placeholder="What's on your mind?" class="mobile-entry-input">
                                <div class="mobile-entry-actions">
                                    <button>📷</button>
                                    <button>🎤</button>
                                    <button>➕</button>
                                </div>
                            </div>
                            
                            <div class="mobile-content">
                                <div class="mobile-section">
                                    <h4>Today's Overview</h4>
                                    <div class="mobile-stats-grid">
                                        <div class="mobile-stat-card">
                                            <div class="stat-icon" style="background: #E8FAF7; color: var(--vitalog-teal);">💓</div>
                                            <div class="stat-info">
                                                <span class="stat-value">72</span>
                                                <span class="stat-label">Heart Rate</span>
                                            </div>
                                        </div>
                                        <div class="mobile-stat-card">
                                            <div class="stat-icon" style="background: #FFF3E0; color: #FF9800;">😊</div>
                                            <div class="stat-info">
                                                <span class="stat-value">8.2</span>
                                                <span class="stat-label">Mood</span>
                                            </div>
                                        </div>
                                        <div class="mobile-stat-card">
                                            <div class="stat-icon" style="background: #E3F2FD; color: #2196F3;">👟</div>
                                            <div class="stat-info">
                                                <span class="stat-value">6.8k</span>
                                                <span class="stat-label">Steps</span>
                                            </div>
                                        </div>
                                        <div class="mobile-stat-card">
                                            <div class="stat-icon" style="background: #F3E5F5; color: #9C27B0;">🌙</div>
                                            <div class="stat-info">
                                                <span class="stat-value">6.5h</span>
                                                <span class="stat-label">Sleep</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mobile-section">
                                    <div class="section-header">
                                        <h4>Recent Entries</h4>
                                        <a href="#" class="see-all">See all</a>
                                    </div>
                                    <div class="mobile-entry-list">
                                        <div class="mobile-entry-item">
                                            <div class="entry-time">8:45 PM</div>
                                            <div class="entry-content">
                                                <h5>Exercised and feeling great</h5>
                                                <p>I got in a really good set this morning...</p>
                                                <div class="entry-tags-mobile">
                                                    <span>Exercise</span>
                                                    <span>Energy</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mobile-entry-item">
                                            <div class="entry-time">2:30 PM</div>
                                            <div class="entry-content">
                                                <h5>Rough morning</h5>
                                                <p>Woke up with a headache that won't go away...</p>
                                                <div class="entry-tags-mobile">
                                                    <span>Headache</span>
                                                    <span>Tired</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mobile-nav-bar">
                                <a href="#" class="nav-item active">
                                    <span class="mobile-nav-icon icon-home"></span>
                                    <span>Home</span>
                                </a>
                                <a href="#" class="nav-item">
                                    <span class="mobile-nav-icon icon-smart-journals"><span></span></span>
                                    <span>Journals</span>
                                </a>
                                <a href="#" class="nav-item add-entry-btn">
                                    <span class="add-icon-mobile">+</span>
                                </a>
                                <a href="#" class="nav-item">
                                    <span class="mobile-nav-icon icon-community-feed"></span>
                                    <span>Circles</span>
                                </a>
                                <a href="#" class="nav-item">
                                    <span class="mobile-nav-icon icon-health-tracking"><span></span><span></span></span>
                                    <span>Health</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Mobile Entry Screen -->
                    <div class="mobile-screen-wrapper" id="mobile-screen-entry">
                        <div class="mobile-container">
                            <div class="mobile-status-bar">
                                <span class="time">9:41 AM</span>
                                <div class="status-icons">
                                    <span>📶</span>
                                    <span>📶</span>
                                    <span>🔋</span>
                                </div>
                            </div>
                            
                            <div class="mobile-entry-header">
                                <button class="back-btn-mobile">←</button>
                                <h2>New Entry</h2>
                                <button class="save-btn-mobile">Save</button>
                            </div>
                            
                            <div class="mobile-entry-content">
                                <div class="journal-selector-mobile">
                                    <label>Journal</label>
                                    <select class="journal-select">
                                        <option>Life in Motion</option>
                                        <option>Work outs</option>
                                        <option>Diet</option>
                                        <option>Sleep Tracking</option>
                                    </select>
                                </div>
                                
                                <input type="text" placeholder="Entry title..." class="mobile-title-input">
                                
                                <textarea placeholder="What's on your mind?" class="mobile-textarea">I got in a really good set this morning, so awesome. The energy boost lasted throughout the entire day!</textarea>
                                
                                <div class="mobile-mood-section">
                                    <label>How are you feeling?</label>
                                    <div class="mobile-mood-options">
                                        <div class="mood-option-mobile">😊</div>
                                        <div class="mood-option-mobile selected">😌</div>
                                        <div class="mood-option-mobile">😐</div>
                                        <div class="mood-option-mobile">😔</div>
                                        <div class="mood-option-mobile">😢</div>
                                    </div>
                                </div>
                                
                                <div class="mobile-tags-section">
                                    <label>Tags</label>
                                    <div class="mobile-selected-tags">
                                        <span class="tag-mobile">Exercise ×</span>
                                        <span class="tag-mobile">Energy ×</span>
                                        <span class="tag-mobile">Morning ×</span>
                                        <span class="add-tag-btn">+ Add tag</span>
                                    </div>
                                </div>
                                
                                <div class="mobile-attachment-section">
                                    <button class="attachment-btn-mobile">
                                        <span>📷</span> Add Photo
                                    </button>
                                    <button class="attachment-btn-mobile">
                                        <span>🎤</span> Voice Note
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Mobile Journal Screen -->
                    <div class="mobile-screen-wrapper" id="mobile-screen-journal">
                        <div class="mobile-container">
                            <div class="mobile-status-bar">
                                <span class="time">9:41 AM</span>
                                <div class="status-icons">
                                    <span>📶</span>
                                    <span>📶</span>
                                    <span>🔋</span>
                                </div>
                            </div>
                            
                            <div class="mobile-header-simple">
                                <h2>My Journals</h2>
                                <button class="add-journal-btn-mobile">+</button>
                            </div>
                            
                            <div class="mobile-journals-list">
                                <div class="mobile-journal-card">
                                    <div class="journal-color-indicator" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></div>
                                    <div class="journal-info">
                                        <h4>Life in Motion</h4>
                                        <p>45 entries • Updated today</p>
                                    </div>
                                    <span class="journal-arrow">›</span>
                                </div>
                                
                                <div class="mobile-journal-card">
                                    <div class="journal-color-indicator" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"></div>
                                    <div class="journal-info">
                                        <h4>Work outs</h4>
                                        <p>78 entries • 2 days ago</p>
                                    </div>
                                    <span class="journal-arrow">›</span>
                                </div>
                                
                                <div class="mobile-journal-card">
                                    <div class="journal-color-indicator" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"></div>
                                    <div class="journal-info">
                                        <h4>Diet</h4>
                                        <p>156 entries • Yesterday</p>
                                    </div>
                                    <span class="journal-arrow">›</span>
                                </div>
                                
                                <div class="mobile-journal-card">
                                    <div class="journal-color-indicator" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"></div>
                                    <div class="journal-info">
                                        <h4>Beginning</h4>
                                        <p>12 entries • Jun 7</p>
                                    </div>
                                    <span class="journal-arrow">›</span>
                                </div>
                                
                                <div class="mobile-journal-card">
                                    <div class="journal-color-indicator" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"></div>
                                    <div class="journal-info">
                                        <h4>Sleep Tracking</h4>
                                        <p>89 entries • Today</p>
                                    </div>
                                    <span class="journal-arrow">›</span>
                                </div>
                            </div>
                            
                            <div class="mobile-nav-bar">
                                <a href="#" class="nav-item">
                                    <span class="mobile-nav-icon icon-home"></span>
                                    <span>Home</span>
                                </a>
                                <a href="#" class="nav-item active">
                                    <span class="mobile-nav-icon icon-smart-journals"><span></span></span>
                                    <span>Journals</span>
                                </a>
                                <a href="#" class="nav-item add-entry-btn">
                                    <span class="add-icon-mobile">+</span>
                                </a>
                                <a href="#" class="nav-item">
                                    <span class="mobile-nav-icon icon-community-feed"></span>
                                    <span>Circles</span>
                                </a>
                                <a href="#" class="nav-item">
                                    <span class="mobile-nav-icon icon-health-tracking"><span></span><span></span></span>
                                    <span>Health</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Feature Highlights -->
            <div class="feature-highlights">
                <h3 style="color: white; text-align: center; margin-bottom: 40px; font-size: 1.8rem;">Key Mobile Features</h3>
                <div class="highlights-grid">
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="10" y="8" width="35" height="44" rx="4" stroke="white" stroke-width="2"/>
                                <rect x="10" y="8" width="35" height="44" rx="4" fill="white" opacity="0.1"/>
                                <path d="M38 35L25 48L25 22L38 35Z" fill="white" opacity="0.8"/>
                                <line x1="15" y1="16" x2="30" y2="16" stroke="white" stroke-width="2" opacity="0.5"/>
                                <line x1="15" y1="22" x2="25" y2="22" stroke="white" stroke-width="2" opacity="0.5"/>
                            </svg>
                        </div>
                        <h4>Quick Entry</h4>
                        <p>Capture health moments instantly with voice, photo, and text</p>
                    </div>
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="8" y="10" width="44" height="8" rx="2" fill="white" opacity="0.8"/>
                                <rect x="8" y="22" width="44" height="8" rx="2" fill="white" opacity="0.6"/>
                                <rect x="8" y="34" width="44" height="8" rx="2" fill="white" opacity="0.4"/>
                                <rect x="8" y="46" width="44" height="8" rx="2" fill="white" opacity="0.2"/>
                            </svg>
                        </div>
                        <h4>Smart Journals</h4>
                        <p>Organize entries into themed health journals</p>
                    </div>
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="20" cy="30" r="12" fill="white" opacity="0.8"/>
                                <circle cx="40" cy="30" r="12" fill="white" opacity="0.6"/>
                                <path d="M20 30C20 36.6274 25.3726 42 32 42C38.6274 42 44 36.6274 44 30" stroke="white" stroke-width="2" opacity="0.9"/>
                            </svg>
                        </div>
                        <h4>Health Insights</h4>
                        <p>Track vital signs and mood patterns at a glance</p>
                    </div>
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="10" y="22" width="8" height="20" rx="1" fill="white" opacity="0.8"/>
                                <rect x="20" y="18" width="8" height="24" rx="1" fill="white" opacity="0.9"/>
                                <rect x="30" y="14" width="8" height="28" rx="1" fill="white"/>
                                <rect x="40" y="20" width="8" height="22" rx="1" fill="white" opacity="0.7"/>
                            </svg>
                        </div>
                        <h4>Native Experience</h4>
                        <p>Intuitive mobile-first design for daily use</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Web Platform Section -->
    <section class="web-showcase-section">
        <div class="showcase-container">
            <div class="showcase-header">
                <h2>Web Platform Experience</h2>
                <p>Comprehensive health management with advanced analytics and insights</p>
            </div>
            
            <!-- Interactive Web Demo -->
            <div class="demo-frame">
                <div class="device-frame">
                    <div class="device-screen">
                        <!-- Tab Navigation -->
                        <div class="demo-tabs">
                            <button class="demo-tab active" onclick="showScreen('landing')">Landing</button>
                            <button class="demo-tab" onclick="showScreen('dashboard')">Dashboard</button>
                            <button class="demo-tab" onclick="showScreen('entries')">Entries</button>
                            <button class="demo-tab" onclick="showScreen('entry')">Quick Entry</button>
                            <button class="demo-tab" onclick="showScreen('journals')">Journals</button>
                        </div>
                        
                        <!-- Screen Container -->
                        <div class="screen-container">
                            <!-- Landing Screen -->
                            <div class="app-screen active" id="screen-landing">
                                <div class="landing-content">
                                    <div class="landing-logo">
                                        <div class="logo-icon-large">
                                            <div class="logo-diamond-large"></div>
                                        </div>
                                        <h1 class="logo-text-large">VITALOG</h1>
                                    </div>
                                    <p class="landing-tagline">To empower & supply the human spirit through self-discovery and community for optimized, empowering, enlightening healthcare.</p>
                                    <button class="get-started-btn" onclick="showScreen('dashboard')">Get started</button>
                                    <a href="#" class="login-link">or login</a>
                                </div>
                            </div>
                            
                            <!-- Dashboard Screen -->
                            <div class="app-screen" id="screen-dashboard">
                                <div class="app-sidebar">
                                    <div class="user-profile">
                                        <div class="user-avatar">JM</div>
                                        <span class="user-name">Jeff M.</span>
                                    </div>
                                    <nav class="sidebar-nav">
                                        <a class="nav-item active" onclick="showScreen('dashboard'); return false;">
                                            <span class="nav-icon icon-home"></span>
                                            <span class="nav-label">Home</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('entries'); return false;">
                                            <span class="nav-icon icon-quick-entry"></span>
                                            <span class="nav-label">Entries</span>
                                            <span class="nav-count">133</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('journals'); return false;">
                                            <span class="nav-icon icon-smart-journals">
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Journals</span>
                                            <span class="nav-count">12</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('goals'); return false;">
                                            <span class="nav-icon icon-goals"></span>
                                            <span class="nav-label">Goals</span>
                                            <span class="nav-count">22</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('circles'); return false;">
                                            <span class="nav-icon icon-community-feed"></span>
                                            <span class="nav-label">Circles</span>
                                            <span class="nav-count">90</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('conditions'); return false;">
                                            <span class="nav-icon icon-conditions"></span>
                                            <span class="nav-label">Conditions</span>
                                            <span class="nav-count">9</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('medications'); return false;">
                                            <span class="nav-icon icon-health-tracking">
                                                <span></span>
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Medications</span>
                                            <span class="nav-count">18</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('settings'); return false;">
                                            <span class="nav-icon icon-settings"></span>
                                            <span class="nav-label">Settings</span>
                                        </a>
                                    </nav>
                                </div>
                                <div class="app-main">
                                    <div class="quick-entry-bar">
                                        <input type="text" placeholder="Quick entry ↵" class="quick-entry-input">
                                        <div class="entry-actions">
                                            <button class="action-btn">✏️</button>
                                            <button class="action-btn">🎤</button>
                                            <button class="action-btn">📷</button>
                                        </div>
                                    </div>
                                    
                                    <h2 class="section-title">Recent Entries</h2>
                                    <div class="entries-grid">
                                        <div class="entry-card">
                                            <div class="entry-mood-indicator" style="background: #FFD700"></div>
                                            <h3>NO sleep</h3>
                                            <p>Woke up feeling super groggy this morning. I wasn't sure if I should take my medicine or not but I did anyway.</p>
                                            <div class="entry-tags">
                                                <span class="entry-tag">Sleep</span>
                                                <span class="entry-tag">Medication</span>
                                            </div>
                                            <div class="entry-meta">
                                                <span class="entry-comments">3 comments</span>
                                                <div class="entry-avatars">
                                                    <span class="avatar-mini">JM</span>
                                                    <span class="avatar-mini">SA</span>
                                                    <span class="avatar-mini">KL</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="entry-card">
                                            <div class="entry-mood-indicator" style="background: #28A745"></div>
                                            <h3>Exercised and feeling great.</h3>
                                            <p>I got in a really good set this morning, so awesome.</p>
                                            <div class="entry-tags">
                                                <span class="entry-tag">Exercise</span>
                                                <span class="entry-tag">Mood</span>
                                            </div>
                                            <div class="entry-meta">
                                                <span class="entry-comments">5 comments</span>
                                                <div class="entry-avatars">
                                                    <span class="avatar-mini">JM</span>
                                                    <span class="avatar-mini">TK</span>
                                                    <span class="avatar-mini">RJ</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="entry-card">
                                            <div class="entry-mood-indicator" style="background: #4A90E2"></div>
                                            <h3>The right foods and mood.</h3>
                                            <p>More bananas and melon to start the day fresh.</p>
                                            <div class="entry-tags">
                                                <span class="entry-tag">Nutrition</span>
                                                <span class="entry-tag">Energy</span>
                                            </div>
                                            <div class="entry-meta">
                                                <span class="entry-comments">2 comments</span>
                                                <div class="entry-avatars">
                                                    <span class="avatar-mini">LD</span>
                                                    <span class="avatar-mini">PR</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Health Metrics Dashboard -->
                                    <h2 class="section-title">Health Overview</h2>
                                    <div class="metrics-dashboard">
                                        <div class="metric-card">
                                            <div class="metric-icon" style="background: #E8FAF7; color: var(--vitalog-teal);">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                                                </svg>
                                            </div>
                                            <div class="metric-content">
                                                <h4>Heart Rate</h4>
                                                <div class="metric-value">72 <span class="metric-unit">bpm</span></div>
                                                <div class="metric-trend trend-up">+5% from last week</div>
                                            </div>
                                        </div>
                                        <div class="metric-card">
                                            <div class="metric-icon" style="background: #FFF3E0; color: #FF9800;">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                                </svg>
                                            </div>
                                            <div class="metric-content">
                                                <h4>Mood Score</h4>
                                                <div class="metric-value">8.2 <span class="metric-unit">/10</span></div>
                                                <div class="metric-trend trend-up">+12% improvement</div>
                                            </div>
                                        </div>
                                        <div class="metric-card">
                                            <div class="metric-icon" style="background: #E3F2FD; color: #2196F3;">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
                                                    <line x1="4" y1="22" x2="4" y2="15"></line>
                                                </svg>
                                            </div>
                                            <div class="metric-content">
                                                <h4>Activity</h4>
                                                <div class="metric-value">6.8k <span class="metric-unit">steps</span></div>
                                                <div class="metric-trend trend-down">-8% from yesterday</div>
                                            </div>
                                        </div>
                                        <div class="metric-card">
                                            <div class="metric-icon" style="background: #F3E5F5; color: #9C27B0;">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                    <circle cx="12" cy="12" r="3"></circle>
                                                </svg>
                                            </div>
                                            <div class="metric-content">
                                                <h4>Sleep</h4>
                                                <div class="metric-value">6.5 <span class="metric-unit">hours</span></div>
                                                <div class="metric-trend trend-down">-30min from avg</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <h2 class="section-title">Public Feed</h2>
                                    <div class="entries-grid">
                                        <div class="entry-card">
                                            <h3>Afternoon fatigue</h3>
                                            <p>Didn't imagine that this would go on for two days!</p>
                                            <div class="entry-meta">
                                                <div class="entry-author">
                                                    <span class="avatar-mini">MK</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="entry-card">
                                            <h3>Finding out the hard way</h3>
                                            <p>Didn't imagine that this would go on for two days!</p>
                                            <div class="entry-meta">
                                                <div class="entry-author">
                                                    <span class="avatar-mini">BJ</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="entry-card">
                                            <h3>Diabetes day 3</h3>
                                            <p>It's day 3 of being diagnosed with type 2 diabetes.</p>
                                            <div class="entry-meta">
                                                <div class="entry-author">
                                                    <span class="avatar-mini">LC</span>
                                                    <span class="avatar-mini">AS</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Entries Screen -->
                            <div class="app-screen" id="screen-entries">
                                <div class="app-sidebar">
                                    <div class="user-profile">
                                        <div class="user-avatar">JM</div>
                                        <span class="user-name">Jeff M.</span>
                                    </div>
                                    <nav class="sidebar-nav">
                                        <a class="nav-item" onclick="showScreen('dashboard'); return false;">
                                            <span class="nav-icon icon-home"></span>
                                            <span class="nav-label">Home</span>
                                        </a>
                                        <a class="nav-item active">
                                            <span class="nav-icon icon-quick-entry"></span>
                                            <span class="nav-label">Entries</span>
                                            <span class="nav-count">133</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('journals'); return false;">
                                            <span class="nav-icon icon-smart-journals">
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Journals</span>
                                            <span class="nav-count">12</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('goals'); return false;">
                                            <span class="nav-icon icon-goals"></span>
                                            <span class="nav-label">Goals</span>
                                            <span class="nav-count">22</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('circles'); return false;">
                                            <span class="nav-icon icon-community-feed"></span>
                                            <span class="nav-label">Circles</span>
                                            <span class="nav-count">90</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('conditions'); return false;">
                                            <span class="nav-icon icon-conditions"></span>
                                            <span class="nav-label">Conditions</span>
                                            <span class="nav-count">9</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('medications'); return false;">
                                            <span class="nav-icon icon-health-tracking">
                                                <span></span>
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Medications</span>
                                            <span class="nav-count">18</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('settings'); return false;">
                                            <span class="nav-icon icon-settings"></span>
                                            <span class="nav-label">Settings</span>
                                        </a>
                                    </nav>
                                </div>
                                <div class="app-main">
                                    <div class="entries-header">
                                        <h1>Entries</h1>
                                        <button class="action-btn" onclick="showScreen('entry')">+ New Entry</button>
                                    </div>
                                    
                                    <div class="entries-timeline">
                                        <div class="timeline-section">
                                            <h3 class="timeline-date">Today</h3>
                                            <div class="timeline-entries">
                                                <div class="timeline-entry">
                                                    <div class="entry-time-badge">8:45 PM</div>
                                                    <div class="timeline-entry-content">
                                                        <h4>Exercised and feeling great.</h4>
                                                        <p>I got in a really good set this morning, so awesome. The energy boost lasted throughout the entire day!</p>
                                                        <div class="entry-mood-pills">
                                                            <span class="mood-pill positive">Energetic</span>
                                                            <span class="mood-pill positive">Accomplished</span>
                                                        </div>
                                                        <div class="entry-actions">
                                                            <span class="entry-comments"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> 3 comments</span>
                                                            <div class="entry-avatars">
                                                                <span class="avatar-mini">JM</span>
                                                                <span class="avatar-mini">TK</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="timeline-entry">
                                                    <div class="entry-time-badge">2:30 PM</div>
                                                    <div class="timeline-entry-content">
                                                        <h4>This has been a rough morning...</h4>
                                                        <p>Woke up with a headache that just won't go away. Trying to stay hydrated and take it easy.</p>
                                                        <div class="entry-mood-pills">
                                                            <span class="mood-pill negative">Headache</span>
                                                            <span class="mood-pill neutral">Tired</span>
                                                        </div>
                                                        <div class="entry-actions">
                                                            <span class="entry-comments"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> 1 comment</span>
                                                            <div class="entry-avatars">
                                                                <span class="avatar-mini">LD</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="timeline-entry">
                                                    <div class="entry-time-badge">11:15 AM</div>
                                                    <div class="timeline-entry-content">
                                                        <h4>It took nearly 8 minutes to fall asleep</h4>
                                                        <p>Used the meditation app before bed and it really helped. Feeling more refreshed today.</p>
                                                        <div class="entry-mood-pills">
                                                            <span class="mood-pill positive">Rested</span>
                                                            <span class="mood-pill neutral">Calm</span>
                                                        </div>
                                                        <div class="entry-actions">
                                                            <span class="entry-comments"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> 2 comments</span>
                                                            <div class="entry-avatars">
                                                                <span class="avatar-mini">JM</span>
                                                                <span class="avatar-mini">AS</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="timeline-entry with-image">
                                                    <div class="entry-time-badge">9:00 AM</div>
                                                    <div class="timeline-entry-content">
                                                        <h4>Healthy breakfast to start the day</h4>
                                                        <p>Trying out the new smoothie recipe with spinach and berries. Actually tastes amazing!</p>
                                                        <div class="entry-image">
                                                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23ddd' width='200' height='150'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23999'%3EPhoto%3C/text%3E%3C/svg%3E" alt="Entry photo">
                                                        </div>
                                                        <div class="entry-mood-pills">
                                                            <span class="mood-pill positive">Healthy</span>
                                                            <span class="mood-pill positive">Motivated</span>
                                                        </div>
                                                        <div class="entry-actions">
                                                            <span class="entry-comments"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> 5 comments</span>
                                                            <div class="entry-avatars">
                                                                <span class="avatar-mini">PR</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="timeline-entry">
                                                    <div class="entry-time-badge">7:30 AM</div>
                                                    <div class="timeline-entry-content">
                                                        <h4>My wife and I took a long walk</h4>
                                                        <p>Beautiful morning for a walk around the neighborhood. Saw the sunrise and felt grateful.</p>
                                                        <div class="entry-mood-pills">
                                                            <span class="mood-pill positive">Grateful</span>
                                                            <span class="mood-pill positive">Connected</span>
                                                        </div>
                                                        <div class="entry-actions">
                                                            <span class="entry-comments"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> 4 comments</span>
                                                            <div class="entry-avatars">
                                                                <span class="avatar-mini">JM</span>
                                                                <span class="avatar-mini">KC</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="timeline-section">
                                            <h3 class="timeline-date">Yesterday</h3>
                                            <div class="timeline-entries">
                                                <div class="timeline-entry">
                                                    <div class="entry-time-badge">9:30 PM</div>
                                                    <div class="timeline-entry-content">
                                                        <h4>Evening meditation session</h4>
                                                        <p>Spent 20 minutes meditating before bed. Really helped clear my mind.</p>
                                                        <div class="entry-mood-pills">
                                                            <span class="mood-pill positive">Peaceful</span>
                                                            <span class="mood-pill positive">Relaxed</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Quick Entry Screen -->
                            <div class="app-screen" id="screen-entry">
                                <div class="app-sidebar">
                                    <div class="user-profile">
                                        <div class="user-avatar">JM</div>
                                        <span class="user-name">Jeff M.</span>
                                    </div>
                                    <nav class="sidebar-nav">
                                        <a class="nav-item" onclick="showScreen('dashboard'); return false;">
                                            <span class="nav-icon icon-home"></span>
                                            <span class="nav-label">Home</span>
                                        </a>
                                        <a class="nav-item active">
                                            <span class="nav-icon icon-quick-entry"></span>
                                            <span class="nav-label">Entries</span>
                                            <span class="nav-count">133</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('journals'); return false;">
                                            <span class="nav-icon icon-smart-journals">
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Journals</span>
                                            <span class="nav-count">12</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('goals'); return false;">
                                            <span class="nav-icon icon-goals"></span>
                                            <span class="nav-label">Goals</span>
                                            <span class="nav-count">22</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('circles'); return false;">
                                            <span class="nav-icon icon-community-feed"></span>
                                            <span class="nav-label">Circles</span>
                                            <span class="nav-count">90</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('conditions'); return false;">
                                            <span class="nav-icon icon-conditions"></span>
                                            <span class="nav-label">Conditions</span>
                                            <span class="nav-count">9</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('medications'); return false;">
                                            <span class="nav-icon icon-health-tracking">
                                                <span></span>
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Medications</span>
                                            <span class="nav-count">18</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('settings'); return false;">
                                            <span class="nav-icon icon-settings"></span>
                                            <span class="nav-label">Settings</span>
                                        </a>
                                    </nav>
                                </div>
                                <div class="app-main entry-main">
                                    <div class="entry-creation-header">
                                        <div class="header-top-bar">
                                            <button class="back-btn" onclick="showScreen('entries')">
                                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <line x1="19" y1="12" x2="5" y2="12"></line>
                                                    <polyline points="12 19 5 12 12 5"></polyline>
                                                </svg>
                                                Back to Entries
                                            </button>
                                            <div class="entry-actions-top">
                                                <button class="save-draft-btn">Save Draft</button>
                                                <button class="publish-btn">Publish Entry</button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="entry-creation-container">
                                        <div class="entry-form-section">
                                            <div class="journal-selector">
                                                <label>Select Journal</label>
                                                <div class="journal-select-grid">
                                                    <div class="journal-select-item selected">
                                                        <div class="journal-color-dot" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></div>
                                                        <span>Life in Motion</span>
                                                    </div>
                                                    <div class="journal-select-item">
                                                        <div class="journal-color-dot" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"></div>
                                                        <span>Work outs</span>
                                                    </div>
                                                    <div class="journal-select-item">
                                                        <div class="journal-color-dot" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"></div>
                                                        <span>Diet</span>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="entry-title-input">
                                                <input type="text" placeholder="Entry title..." value="Exercised and feeling great">
                                            </div>
                                            
                                            <div class="entry-editor">
                                                <div class="editor-toolbar">
                                                    <button class="editor-btn">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <path d="M6 4v16"></path>
                                                            <path d="M10 4v16"></path>
                                                            <path d="M14 4v16"></path>
                                                            <path d="M18 4v16"></path>
                                                            <path d="M6 4h12"></path>
                                                            <path d="M6 20h12"></path>
                                                        </svg>
                                                    </button>
                                                    <button class="editor-btn">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="10"></circle>
                                                            <line x1="8" y1="12" x2="16" y2="12"></line>
                                                            <line x1="12" y1="8" x2="12" y2="16"></line>
                                                        </svg>
                                                    </button>
                                                    <button class="editor-btn">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                                            <polyline points="21 15 16 10 5 21"></polyline>
                                                        </svg>
                                                    </button>
                                                    <button class="editor-btn">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <path d="M12 2a3 3 0 0 0-3 3v4a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
                                                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                                            <line x1="12" y1="19" x2="12" y2="23"></line>
                                                            <line x1="8" y1="23" x2="16" y2="23"></line>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <textarea class="entry-textarea" placeholder="What's on your mind today?">I got in a really good set this morning, so awesome. The energy boost lasted throughout the entire day! Feeling grateful for my body's ability to move and grow stronger.</textarea>
                                            </div>
                                            
                                            <div class="entry-metadata">
                                                <div class="mood-selector">
                                                    <label>How are you feeling?</label>
                                                    <div class="mood-options">
                                                        <div class="mood-option">
                                                            <span class="mood-emoji">😊</span>
                                                            <span>Great</span>
                                                        </div>
                                                        <div class="mood-option selected">
                                                            <span class="mood-emoji">😌</span>
                                                            <span>Good</span>
                                                        </div>
                                                        <div class="mood-option">
                                                            <span class="mood-emoji">😐</span>
                                                            <span>Okay</span>
                                                        </div>
                                                        <div class="mood-option">
                                                            <span class="mood-emoji">😔</span>
                                                            <span>Down</span>
                                                        </div>
                                                        <div class="mood-option">
                                                            <span class="mood-emoji">😢</span>
                                                            <span>Rough</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="tag-selector">
                                                    <label>Add Tags</label>
                                                    <div class="selected-tags">
                                                        <span class="tag-chip">Exercise <button>×</button></span>
                                                        <span class="tag-chip">Energy <button>×</button></span>
                                                        <span class="tag-chip">Morning <button>×</button></span>
                                                    </div>
                                                    <input type="text" placeholder="Type to add tags..." class="tag-input">
                                                    <div class="suggested-tags">
                                                        <span class="suggested-tag">Cardio</span>
                                                        <span class="suggested-tag">Strength</span>
                                                        <span class="suggested-tag">Mood</span>
                                                        <span class="suggested-tag">Achievement</span>
                                                    </div>
                                                </div>
                                                
                                                <div class="privacy-settings">
                                                    <label>Privacy</label>
                                                    <div class="privacy-options">
                                                        <label class="privacy-option">
                                                            <input type="radio" name="privacy" value="private" checked>
                                                            <span class="privacy-icon">🔒</span>
                                                            <span>Private</span>
                                                        </label>
                                                        <label class="privacy-option">
                                                            <input type="radio" name="privacy" value="circles">
                                                            <span class="privacy-icon">👥</span>
                                                            <span>Circles Only</span>
                                                        </label>
                                                        <label class="privacy-option">
                                                            <input type="radio" name="privacy" value="public">
                                                            <span class="privacy-icon">🌍</span>
                                                            <span>Public</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="entry-sidebar-right">
                                            <div class="entry-time-info">
                                                <h4>Entry Details</h4>
                                                <div class="detail-item">
                                                    <span class="detail-label">Date</span>
                                                    <span class="detail-value">Today</span>
                                                </div>
                                                <div class="detail-item">
                                                    <span class="detail-label">Time</span>
                                                    <span class="detail-value">8:45 PM</span>
                                                </div>
                                            </div>
                                            
                                            <div class="attachments-section">
                                                <h4>Attachments</h4>
                                                <div class="attachment-preview">
                                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Crect fill='%23ddd' width='200' height='150'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23999'%3EPhoto%3C/text%3E%3C/svg%3E" alt="Attachment">
                                                    <button class="remove-attachment">×</button>
                                                </div>
                                                <button class="add-attachment-btn">
                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                                                    </svg>
                                                    Add Attachment
                                                </button>
                                            </div>
                                            
                                            <div class="related-entries">
                                                <h4>Related Entries</h4>
                                                <div class="related-entry">
                                                    <span class="related-date">2 days ago</span>
                                                    <span class="related-title">Morning workout routine</span>
                                                </div>
                                                <div class="related-entry">
                                                    <span class="related-date">5 days ago</span>
                                                    <span class="related-title">New personal record!</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Journals Screen -->
                            <div class="app-screen" id="screen-journals">
                                <div class="app-sidebar">
                                    <div class="user-profile">
                                        <div class="user-avatar">JM</div>
                                        <span class="user-name">Jeff M.</span>
                                    </div>
                                    <nav class="sidebar-nav">
                                        <a class="nav-item" onclick="showScreen('dashboard'); return false;">
                                            <span class="nav-icon icon-home"></span>
                                            <span class="nav-label">Home</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('entries'); return false;">
                                            <span class="nav-icon icon-quick-entry"></span>
                                            <span class="nav-label">Entries</span>
                                            <span class="nav-count">133</span>
                                        </a>
                                        <a class="nav-item active">
                                            <span class="nav-icon icon-smart-journals">
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Journals</span>
                                            <span class="nav-count">12</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('goals'); return false;">
                                            <span class="nav-icon icon-goals"></span>
                                            <span class="nav-label">Goals</span>
                                            <span class="nav-count">22</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('circles'); return false;">
                                            <span class="nav-icon icon-community-feed"></span>
                                            <span class="nav-label">Circles</span>
                                            <span class="nav-count">90</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('conditions'); return false;">
                                            <span class="nav-icon icon-conditions"></span>
                                            <span class="nav-label">Conditions</span>
                                            <span class="nav-count">9</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('medications'); return false;">
                                            <span class="nav-icon icon-health-tracking">
                                                <span></span>
                                                <span></span>
                                            </span>
                                            <span class="nav-label">Medications</span>
                                            <span class="nav-count">18</span>
                                        </a>
                                        <a class="nav-item" onclick="showScreen('settings'); return false;">
                                            <span class="nav-icon icon-settings"></span>
                                            <span class="nav-label">Settings</span>
                                        </a>
                                    </nav>
                                </div>
                                <div class="app-main">
                                    <div class="journals-header">
                                        <div class="header-top">
                                            <h1>Journals</h1>
                                            <div class="header-actions">
                                                <button class="filter-btn">
                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                                                    </svg>
                                                    Filter
                                                </button>
                                                <button class="sort-btn">
                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <line x1="4" y1="6" x2="16" y2="6"></line>
                                                        <line x1="4" y1="12" x2="12" y2="12"></line>
                                                        <line x1="4" y1="18" x2="8" y2="18"></line>
                                                    </svg>
                                                    Sort
                                                </button>
                                            </div>
                                        </div>
                                        <div class="journals-stats">
                                            <div class="stat-item">
                                                <span class="stat-number">12</span>
                                                <span class="stat-label">Active Journals</span>
                                            </div>
                                            <div class="stat-item">
                                                <span class="stat-number">346</span>
                                                <span class="stat-label">Total Entries</span>
                                            </div>
                                            <div class="stat-item">
                                                <span class="stat-number">28</span>
                                                <span class="stat-label">Days Tracked</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="journals-grid">
                                        <div class="journal-card add-journal">
                                            <div class="add-journal-content">
                                                <div class="add-icon">+</div>
                                                <p>Create New Journal</p>
                                                <span class="add-hint">Track a new aspect of your health</span>
                                            </div>
                                        </div>
                                        
                                        <div class="journal-card">
                                            <div class="journal-color-bar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></div>
                                            <div class="journal-content">
                                                <div class="journal-header">
                                                    <div class="journal-icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                                            <path d="M2 17l10 5 10-5"></path>
                                                            <path d="M2 12l10 5 10-5"></path>
                                                        </svg>
                                                    </div>
                                                    <button class="journal-menu">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="1"></circle>
                                                            <circle cx="12" cy="5" r="1"></circle>
                                                            <circle cx="12" cy="19" r="1"></circle>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <h3>Life in Motion</h3>
                                                <p class="journal-description">Daily reflections and life experiences</p>
                                                <div class="journal-tags">
                                                    <span class="journal-tag">Personal</span>
                                                    <span class="journal-tag">Mood</span>
                                                </div>
                                                <div class="journal-stats">
                                                    <span><strong>45</strong> entries</span>
                                                    <span class="journal-date">Updated today</span>
                                                </div>
                                                <div class="journal-quick-actions">
                                                    <button class="quick-action-btn">+ Quick Entry</button>
                                                    <button class="view-btn">View →</button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="journal-card">
                                            <div class="journal-color-bar" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"></div>
                                            <div class="journal-content">
                                                <div class="journal-header">
                                                    <div class="journal-icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                                        </svg>
                                                    </div>
                                                    <button class="journal-menu">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="1"></circle>
                                                            <circle cx="12" cy="5" r="1"></circle>
                                                            <circle cx="12" cy="19" r="1"></circle>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <h3>Work outs</h3>
                                                <p class="journal-description">Exercise routines and fitness goals</p>
                                                <div class="journal-tags">
                                                    <span class="journal-tag">Fitness</span>
                                                    <span class="journal-tag">Health</span>
                                                </div>
                                                <div class="journal-stats">
                                                    <span><strong>78</strong> entries</span>
                                                    <span class="journal-date">Updated 2 days ago</span>
                                                </div>
                                                <div class="journal-quick-actions">
                                                    <button class="quick-action-btn">+ Quick Entry</button>
                                                    <button class="view-btn">View →</button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="journal-card">
                                            <div class="journal-color-bar" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"></div>
                                            <div class="journal-content">
                                                <div class="journal-header">
                                                    <div class="journal-icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
                                                            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
                                                            <line x1="6" y1="1" x2="6" y2="4"></line>
                                                            <line x1="10" y1="1" x2="10" y2="4"></line>
                                                            <line x1="14" y1="1" x2="14" y2="4"></line>
                                                        </svg>
                                                    </div>
                                                    <button class="journal-menu">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="1"></circle>
                                                            <circle cx="12" cy="5" r="1"></circle>
                                                            <circle cx="12" cy="19" r="1"></circle>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <h3>Diet</h3>
                                                <p class="journal-description">Nutrition tracking and meal planning</p>
                                                <div class="journal-tags">
                                                    <span class="journal-tag">Nutrition</span>
                                                    <span class="journal-tag">Wellness</span>
                                                </div>
                                                <div class="journal-stats">
                                                    <span><strong>156</strong> entries</span>
                                                    <span class="journal-date">Updated yesterday</span>
                                                </div>
                                                <div class="journal-quick-actions">
                                                    <button class="quick-action-btn">+ Quick Entry</button>
                                                    <button class="view-btn">View →</button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="journal-card">
                                            <div class="journal-color-bar" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"></div>
                                            <div class="journal-content">
                                                <div class="journal-header">
                                                    <div class="journal-icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="5"></circle>
                                                            <line x1="12" y1="1" x2="12" y2="3"></line>
                                                            <line x1="12" y1="21" x2="12" y2="23"></line>
                                                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                                                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                                                            <line x1="1" y1="12" x2="3" y2="12"></line>
                                                            <line x1="21" y1="12" x2="23" y2="12"></line>
                                                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                                                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                                                        </svg>
                                                    </div>
                                                    <button class="journal-menu">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="1"></circle>
                                                            <circle cx="12" cy="5" r="1"></circle>
                                                            <circle cx="12" cy="19" r="1"></circle>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <h3>Beginning</h3>
                                                <p class="journal-description">My health journey starts here</p>
                                                <div class="journal-tags">
                                                    <span class="journal-tag">Journey</span>
                                                    <span class="journal-tag">Goals</span>
                                                </div>
                                                <div class="journal-stats">
                                                    <span><strong>12</strong> entries</span>
                                                    <span class="journal-date">Updated Jun 7</span>
                                                </div>
                                                <div class="journal-quick-actions">
                                                    <button class="quick-action-btn">+ Quick Entry</button>
                                                    <button class="view-btn">View →</button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="journal-card">
                                            <div class="journal-color-bar" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"></div>
                                            <div class="journal-content">
                                                <div class="journal-header">
                                                    <div class="journal-icon">
                                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                                            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                                                        </svg>
                                                    </div>
                                                    <button class="journal-menu">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                            <circle cx="12" cy="12" r="1"></circle>
                                                            <circle cx="12" cy="5" r="1"></circle>
                                                            <circle cx="12" cy="19" r="1"></circle>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <h3>Sleep Tracking</h3>
                                                <p class="journal-description">Sleep patterns and quality analysis</p>
                                                <div class="journal-tags">
                                                    <span class="journal-tag">Sleep</span>
                                                    <span class="journal-tag">Recovery</span>
                                                </div>
                                                <div class="journal-stats">
                                                    <span><strong>89</strong> entries</span>
                                                    <span class="journal-date">Updated today</span>
                                                </div>
                                                <div class="journal-quick-actions">
                                                    <button class="quick-action-btn">+ Quick Entry</button>
                                                    <button class="view-btn">View →</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Feature Highlights -->
            <div class="feature-highlights">
                <h3 style="color: white; text-align: center; margin-bottom: 40px; font-size: 1.8rem;">Web Platform Features</h3>
                <div class="highlights-grid">
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="10" y="10" width="40" height="30" rx="2" stroke="white" stroke-width="2"/>
                                <rect x="10" y="10" width="40" height="30" rx="2" fill="white" opacity="0.1"/>
                                <line x1="15" y1="20" x2="45" y2="20" stroke="white" stroke-width="2" opacity="0.8"/>
                                <line x1="15" y1="26" x2="35" y2="26" stroke="white" stroke-width="2" opacity="0.6"/>
                                <line x1="15" y1="32" x2="40" y2="32" stroke="white" stroke-width="2" opacity="0.4"/>
                                <circle cx="44" cy="44" r="8" fill="white" opacity="0.8"/>
                                <path d="M42 44L44 46L46 42" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h4>Rich Content Editor</h4>
                        <p>Advanced formatting and media embedding for detailed health documentation</p>
                    </div>
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="10" y="20" width="10" height="24" rx="1" fill="white" opacity="0.6"/>
                                <rect x="25" y="15" width="10" height="29" rx="1" fill="white" opacity="0.8"/>
                                <rect x="40" y="10" width="10" height="34" rx="1" fill="white"/>
                                <path d="M10 18L25 12L40 8L50 14" stroke="white" stroke-width="2" fill="none" opacity="0.8"/>
                                <circle cx="10" cy="18" r="3" fill="white"/>
                                <circle cx="25" cy="12" r="3" fill="white"/>
                                <circle cx="40" cy="8" r="3" fill="white"/>
                                <circle cx="50" cy="14" r="3" fill="white"/>
                            </svg>
                        </div>
                        <h4>Analytics Dashboard</h4>
                        <p>Comprehensive health metrics and trend analysis</p>
                    </div>
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="20" cy="30" r="15" stroke="white" stroke-width="2" opacity="0.6"/>
                                <circle cx="40" cy="30" r="15" stroke="white" stroke-width="2" opacity="0.8"/>
                                <path d="M28 20L32 20L32 40L28 40Z" fill="white"/>
                                <path d="M20 28L20 32L40 32L40 28Z" fill="white"/>
                                <rect x="25" y="25" width="10" height="10" fill="white" opacity="0.5"/>
                            </svg>
                        </div>
                        <h4>EHR Integration</h4>
                        <p>FHIR-compliant data export for healthcare providers</p>
                    </div>
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="12" y="8" width="36" height="44" rx="2" stroke="white" stroke-width="2"/>
                                <rect x="12" y="8" width="36" height="44" rx="2" fill="white" opacity="0.1"/>
                                <rect x="18" y="14" width="24" height="4" rx="1" fill="white" opacity="0.8"/>
                                <rect x="18" y="22" width="16" height="3" rx="1" fill="white" opacity="0.6"/>
                                <rect x="18" y="28" width="20" height="3" rx="1" fill="white" opacity="0.6"/>
                                <rect x="18" y="34" width="24" height="3" rx="1" fill="white" opacity="0.6"/>
                                <rect x="18" y="40" width="18" height="3" rx="1" fill="white" opacity="0.6"/>
                                <rect x="18" y="46" width="22" height="3" rx="1" fill="white" opacity="0.6"/>
                            </svg>
                        </div>
                        <h4>Advanced Reporting</h4>
                        <p>Generate comprehensive health reports for appointments</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Design Process Section -->
    <section class="case-section">
        <h2>Design Process</h2>
        
        <h3>User Research & Personas</h3>
        <p>
            Through extensive user interviews with patients managing chronic conditions, fitness enthusiasts, and healthcare providers, I identified three core user personas: the Health Optimizer seeking performance insights, the Condition Manager tracking symptoms and treatments, and the Wellness Explorer discovering connections between lifestyle and health.
        </p>
        
        <h3>Information Architecture</h3>
        <p>
            I structured Vitalog around a flexible journal system that adapts to different health tracking needs. Users can create multiple journals for different aspects of health, with smart tagging and cross-referencing capabilities that reveal patterns over time. The architecture supports both quick mobile entries and detailed desktop analysis.
        </p>
        
        <h3>Interaction Design</h3>
        <p>
            Every interaction was designed to reduce friction in daily health tracking. Voice-to-text entry, photo attachments for meals or symptoms, and intelligent prompts based on user patterns make documentation effortless. The companion mobile app uses native gestures and notifications to encourage consistent tracking without feeling burdensome.
        </p>
    </section>
    
    <!-- Technical Innovation -->
    <section class="case-section">
        <h2>Technical Innovation</h2>
        <p>
            Vitalog represents a significant advancement in consumer health technology, bridging the gap between personal wellness apps and professional healthcare systems through innovative technical architecture.
        </p>
        
        <div class="feature-list">
            <div class="feature-item">
                <h3>FHIR-Ready Data Structure</h3>
                <p>Built on HL7 FHIR standards from the ground up, ensuring every journal entry can be mapped to clinical data formats for seamless EHR integration when users choose to share with providers.</p>
            </div>
            <div class="feature-item">
                <h3>Privacy-First Architecture</h3>
                <p>End-to-end encryption for personal entries with granular sharing controls. Users maintain complete ownership of their health data with blockchain-verified audit trails.</p>
            </div>
            <div class="feature-item">
                <h3>AI-Powered Insights</h3>
                <p>Machine learning algorithms identify patterns and correlations in user data, providing personalized health insights while maintaining strict privacy boundaries.</p>
            </div>
        </div>
        
        <h3>Technology Stack</h3>
        <div class="tech-stack">
            <span class="tech-badge">React Native</span>
            <span class="tech-badge">Node.js</span>
            <span class="tech-badge">PostgreSQL</span>
            <span class="tech-badge">FHIR API</span>
            <span class="tech-badge">GraphQL</span>
            <span class="tech-badge">AWS HIPAA</span>
            <span class="tech-badge">TensorFlow</span>
        </div>
    </section>
    
    <!-- Results Section -->
    <section class="results-section">
        <h2 style="text-align: center; margin-bottom: 60px;">Impact & Metrics</h2>
        <div class="results-grid">
            <div class="result-item">
                <div class="result-number">87%</div>
                <div class="result-label">Daily Active Users</div>
            </div>
            <div class="result-item">
                <div class="result-number">3.2min</div>
                <div class="result-label">Average Entry Time</div>
            </div>
            <div class="result-item">
                <div class="result-number">92%</div>
                <div class="result-label">User Satisfaction</div>
            </div>
            <div class="result-item">
                <div class="result-number">4.8★</div>
                <div class="result-label">App Store Rating</div>
            </div>
        </div>
    </section>
    
    <!-- Healthcare Integration -->
    <section class="case-section">
        <h2>Healthcare Integration</h2>
        <p>
            Vitalog's advanced EHR capabilities transform how patients communicate with healthcare providers. The platform generates comprehensive health summaries that can be shared during appointments, reducing consultation time while improving diagnostic accuracy. Integration with major EHR systems like Epic and Cerner enables seamless data flow when authorized by users.
        </p>
        <p>
            Healthcare providers report that patients using Vitalog come to appointments better prepared, with clearer symptom histories and lifestyle data that inform treatment decisions. The platform's structured data format eliminates the ambiguity of verbal health histories, leading to more accurate diagnoses and personalized treatment plans.
        </p>
    </section>
    
    <!-- Community Impact -->
    <section class="case-section">
        <h2>Community Impact</h2>
        <p>
            Beyond individual health tracking, Vitalog has fostered a supportive community where users share experiences and insights anonymously. The public feed feature has become a valuable resource for people navigating similar health challenges, from managing diabetes to optimizing athletic performance.
        </p>
        <p>
            The platform's emphasis on self-discovery through data has empowered users to take active roles in their healthcare. Many report discovering previously unknown correlations between lifestyle factors and symptoms, leading to meaningful improvements in quality of life. This democratization of health insights represents a shift toward patient-centered care.
        </p>
    </section>
    
    <!-- Reflection -->
    <section class="case-section">
        <h2>Reflection</h2>
        <p>
            Designing Vitalog reinforced my belief that healthcare technology should empower rather than overwhelm users. By focusing on intuitive design and meaningful features, we created a platform that makes health tracking feel natural and rewarding rather than clinical and burdensome.
        </p>
        <p>
            The project highlighted the importance of bridging consumer and clinical worlds in health tech. While maintaining medical-grade data standards, the user experience must remain accessible and engaging for daily use. This balance between rigor and usability defines the future of patient-centered healthcare technology.
        </p>
    </section>
    
    <!-- Future Vision -->
    <section class="case-section">
        <h2>Future Vision</h2>
        <p>
            The roadmap for Vitalog includes expanded AI capabilities for predictive health insights, integration with wearable devices for automatic data capture, and partnerships with healthcare systems for bi-directional data flow. We're exploring telehealth integration that would allow users to share their Vitalog data in real-time during virtual consultations.
        </p>
        <p>
            As healthcare continues its digital transformation, Vitalog is positioned to become the bridge between personal health awareness and professional medical care, empowering users to become active participants in their health journey while providing clinicians with richer, more accurate patient data.
        </p>
    </section>
    
    <!-- Key Takeaways -->
    <section class="case-section" style="background: var(--surface); margin: 0 -60px; padding: 80px 120px;">
        <h2 style="text-align: center; margin-bottom: 50px;">Key Takeaways</h2>
        <div class="feature-list">
            <div class="feature-item" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 20px;">🎯</div>
                <h3>User-Centered Design</h3>
                <p>By prioritizing daily usability over feature complexity, we achieved 87% daily active users - exceptional for a health tracking app.</p>
            </div>
            <div class="feature-item" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 20px;">🔗</div>
                <h3>Bridging Two Worlds</h3>
                <p>Successfully connected consumer-friendly design with medical-grade data standards, proving that clinical rigor doesn't require complexity.</p>
            </div>
            <div class="feature-item" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 20px;">💡</div>
                <h3>Innovation Through Simplicity</h3>
                <p>The multi-journal system and quick entry features show how thoughtful UX can make complex health tracking feel effortless.</p>
            </div>
        </div>
    </section>
    
    <!-- Call to Action -->
    <section class="case-section" style="text-align: center; padding-bottom: 120px;">
        <h2>Let's Create Something Amazing Together</h2>
        <p style="max-width: 600px; margin: 0 auto 40px; font-size: 1.2rem;">
            This case study demonstrates my approach to designing complex healthcare platforms that users love. I'm passionate about creating digital experiences that make a real difference in people's lives.
        </p>
        
        <!-- Contact Form Section -->
        <div style="max-width: 600px; margin: 0 auto;">
            <div style="background: var(--surface); border-radius: 20px; padding: 50px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);">
                <h3 style="font-size: 1.8rem; margin-bottom: 10px; color: var(--primary);">Get In Touch</h3>
                <p style="color: var(--secondary); margin-bottom: 30px;">Ready to work together? Send me a message!</p>
                
                <form action="mailto:info@jamesecoleman.com" method="post" enctype="text/plain" style="text-align: left;">
                    <div style="margin-bottom: 20px;">
                        <label style="display: block; font-size: 0.9rem; color: var(--secondary); margin-bottom: 8px; font-weight: 500;">Your Name</label>
                        <input type="text" name="name" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        <label style="display: block; font-size: 0.9rem; color: var(--secondary); margin-bottom: 8px; font-weight: 500;">Email Address</label>
                        <input type="email" name="email" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        <label style="display: block; font-size: 0.9rem; color: var(--secondary); margin-bottom: 8px; font-weight: 500;">Company (Optional)</label>
                        <input type="text" name="company" style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; transition: all 0.3s ease;">
                    </div>
                    
                    <div style="margin-bottom: 30px;">
                        <label style="display: block; font-size: 0.9rem; color: var(--secondary); margin-bottom: 8px; font-weight: 500;">Message</label>
                        <textarea name="message" rows="5" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; resize: vertical; transition: all 0.3s ease;"></textarea>
                    </div>
                    
                    <div style="display: flex; gap: 15px;">
                        <button type="submit" style="flex: 1; padding: 14px 30px; background: var(--vitalog-teal); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease;">
                            Send Message
                        </button>
                        <a href="mailto:info@jamesecoleman.com" style="flex: 1; padding: 14px 30px; background: white; color: var(--primary); text-decoration: none; border-radius: 8px; font-weight: 500; border: 2px solid var(--border); transition: all 0.3s ease; text-align: center; display: flex; align-items: center; justify-content: center;">
                            Email Directly
                        </a>
                    </div>
                </form>
                
                <p style="margin-top: 20px; font-size: 0.85rem; color: var(--secondary);">
                    Or email directly at <a href="mailto:info@jamesecoleman.com" style="color: var(--vitalog-teal); text-decoration: none;">info@jamesecoleman.com</a>
                </p>
            </div>
        </div>
        
        <div style="margin-top: 40px;">
            <a href="index.html#work" style="display: inline-block; padding: 15px 40px; background: white; color: var(--primary); text-decoration: none; border-radius: 8px; font-weight: 500; border: 2px solid var(--border); transition: all 0.3s ease;">
                View More Work
            </a>
        </div>
    </section>
    
    <!-- Footer -->
    <footer style="background: linear-gradient(135deg, #0a2540 0%, #1a3a52 100%); color: white; padding: 80px 60px 40px; position: relative; overflow: hidden;">
        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 300\"><defs><pattern id=\"grid-footer\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\"><path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"rgba(255,255,255,0.05)\" stroke-width=\"1\"/></pattern></defs><rect width=\"100%\" height=\"100%\" fill=\"url(%23grid-footer)\"/></svg>') repeat; opacity: 0.4;"></div>
        
        <div style="position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;">
            <div style="text-align: center; margin-bottom: 50px;">
                <h3 style="font-size: 2rem; font-weight: 300; margin-bottom: 20px;">James E. Coleman</h3>
                <p style="font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto;">
                    Crafting digital experiences that inspire, engage, and deliver results.
                </p>
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px;">
                <div>
                    <h4 style="font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9;">Contact</h4>
                    <p style="opacity: 0.8; line-height: 1.8;">
                        <a href="mailto:info@jamesecoleman.com" style="color: white; text-decoration: none; transition: opacity 0.3s;">info@jamesecoleman.com</a><br>
                        Phoenix, Arizona
                    </p>
                </div>
                
                <div>
                    <h4 style="font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9;">Services</h4>
                    <p style="opacity: 0.8; line-height: 1.8;">
                        UX/UI Design<br>
                        Brand Strategy<br>
                        Product Design<br>
                        Design Systems
                    </p>
                </div>
                
                <div>
                    <h4 style="font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9;">Connect</h4>
                    <div style="display: flex; gap: 15px;">
                        <a href="#" style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s ease;">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                                <rect x="2" y="9" width="4" height="12"></rect>
                                <circle cx="4" cy="4" r="2"></circle>
                            </svg>
                        </a>
                        <a href="#" style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s ease;">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="4"></circle>
                                <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
                            </svg>
                        </a>
                        <a href="#" style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s ease;">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            
            <div style="text-align: center; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1);">
                <p style="opacity: 0.6; font-size: 0.9rem;">© 2024 James E. Coleman. All rights reserved. | Designed with ❤️ in Phoenix</p>
            </div>
        </div>
    </footer>
    
    <script>
        function showScreen(screenName) {
            // Remove active class from all screens
            document.querySelectorAll('.app-screen').forEach(screen => {
                screen.classList.remove('active');
            });
            
            // Remove active class from all tabs
            document.querySelectorAll('.demo-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Remove active class from all nav items
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // Show selected screen with animation
            setTimeout(() => {
                const screen = document.getElementById('screen-' + screenName);
                if (screen) {
                    screen.classList.add('active');
                } else {
                    // If screen doesn't exist, show a placeholder message
                    alert(`The ${screenName.charAt(0).toUpperCase() + screenName.slice(1)} screen is coming soon!`);
                    // Show dashboard as fallback
                    const dashboard = document.getElementById('screen-dashboard');
                    if (dashboard) {
                        dashboard.classList.add('active');
                    }
                    screenName = 'dashboard';
                }
            }, 50);
            
            // Activate corresponding tab
            const activeTab = document.querySelector(`.demo-tab[onclick="showScreen('${screenName}')"]`);
            if (activeTab) {
                activeTab.classList.add('active');
            }
            
            // Update nav active state based on screen
            if (screenName === 'dashboard') {
                document.querySelectorAll('.icon-home').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'entries' || screenName === 'entry') {
                document.querySelectorAll('.icon-quick-entry').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'journals') {
                document.querySelectorAll('.icon-smart-journals').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'goals') {
                document.querySelectorAll('.icon-goals').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'circles') {
                document.querySelectorAll('.icon-community-feed').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'conditions') {
                document.querySelectorAll('.icon-conditions').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'medications') {
                document.querySelectorAll('.icon-health-tracking').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            } else if (screenName === 'settings') {
                document.querySelectorAll('.icon-settings').forEach(icon => {
                    icon.closest('.nav-item').classList.add('active');
                });
            }
        }
        
        function showMobileScreen(screenName) {
            // Remove active class from all mobile screens
            document.querySelectorAll('.mobile-screen-wrapper').forEach(screen => {
                screen.classList.remove('active');
            });
            
            // Remove active class from all mobile tabs
            document.querySelectorAll('.mobile-demo-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show selected screen
            const mobileScreen = document.getElementById('mobile-screen-' + screenName);
            if (mobileScreen) {
                mobileScreen.classList.add('active');
            }
            
            // Activate corresponding tab
            if (event && event.target) {
                event.target.classList.add('active');
            }
        }
        
        // Add hover effects to entry cards
        document.addEventListener('DOMContentLoaded', function() {
            // Animate step counter
            function animateStepCounter() {
                const stepCounter = document.querySelector('.metric-number-animated');
                if (stepCounter) {
                    let currentSteps = 0;
                    const targetSteps = 42847;
                    const increment = targetSteps / 100;
                    const timer = setInterval(() => {
                        currentSteps += increment;
                        if (currentSteps >= targetSteps) {
                            currentSteps = targetSteps;
                            clearInterval(timer);
                        }
                        stepCounter.textContent = Math.floor(currentSteps).toLocaleString();
                    }, 20);
                }
            }
            
            // Start step counter animation after a delay
            setTimeout(animateStepCounter, 1500);
            
            // Re-animate notifications periodically
            setInterval(() => {
                const notifications = document.querySelectorAll('.notification-popup');
                notifications.forEach(notification => {
                    notification.style.animation = 'none';
                    setTimeout(() => {
                        notification.style.animation = '';
                    }, 100);
                });
            }, 10000);
            
            const entryCards = document.querySelectorAll('.entry-card');
            entryCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-3px) scale(1.02)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
            
            // Add click handlers for journal cards
            document.querySelectorAll('.journal-card:not(.add-journal)').forEach(card => {
                card.addEventListener('click', function() {
                    showScreen('entries');
                });
            });
            
            // Add click handler for add journal
            const addJournalCard = document.querySelector('.add-journal');
            if (addJournalCard) {
                addJournalCard.addEventListener('click', function() {
                    alert('Create New Journal feature coming soon!');
                });
            }
            
            // Mobile navigation enhancement
            document.querySelectorAll('.mobile-nav-bar .nav-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelectorAll('.mobile-nav-bar .nav-item').forEach(nav => {
                        nav.classList.remove('active');
                    });
                    this.classList.add('active');
                });
            });
            
            // Quick entry functionality
            const quickEntryInput = document.querySelector('.quick-entry-input');
            if (quickEntryInput) {
                quickEntryInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        this.value = '';
                        showNotification('Entry saved!');
                    }
                });
            }
            
            // Tag removal
            document.querySelectorAll('.tag-chip button').forEach(btn => {
                btn.addEventListener('click', function() {
                    this.parentElement.style.opacity = '0';
                    setTimeout(() => this.parentElement.remove(), 300);
                });
            });
            
            // Mood selection
            document.querySelectorAll('.mood-option').forEach(mood => {
                mood.addEventListener('click', function() {
                    document.querySelectorAll('.mood-option').forEach(m => m.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
            
            // Mobile mood selection
            document.querySelectorAll('.mood-option-mobile').forEach(mood => {
                mood.addEventListener('click', function() {
                    document.querySelectorAll('.mood-option-mobile').forEach(m => m.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
            
            // Journal selection
            document.querySelectorAll('.journal-select-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('.journal-select-item').forEach(j => j.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
            
            // Suggested tags
            document.querySelectorAll('.suggested-tag').forEach(tag => {
                tag.addEventListener('click', function() {
                    const tagText = this.textContent;
                    const tagsContainer = document.querySelector('.selected-tags');
                    const newTag = document.createElement('span');
                    newTag.className = 'tag-chip';
                    newTag.innerHTML = `${tagText} <button>×</button>`;
                    tagsContainer.insertBefore(newTag, tagsContainer.lastElementChild);
                    this.style.display = 'none';
                    
                    // Add remove handler to new tag
                    newTag.querySelector('button').addEventListener('click', function() {
                        newTag.style.opacity = '0';
                        setTimeout(() => {
                            newTag.remove();
                            const suggestedTag = Array.from(document.querySelectorAll('.suggested-tag')).find(t => t.textContent === tagText);
                            if (suggestedTag) {
                                suggestedTag.style.display = 'inline-block';
                            }
                        }, 300);
                    });
                });
            });
            
            // Privacy option selection
            document.querySelectorAll('.privacy-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.privacy-option').forEach(p => {
                        p.style.background = 'var(--surface)';
                        p.style.borderColor = 'transparent';
                    });
                    this.style.background = 'var(--vitalog-light)';
                    this.style.borderColor = 'var(--vitalog-teal)';
                });
            });
            
            // Add smooth scroll behavior
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId && targetId !== '#') {
                        const target = document.querySelector(targetId);
                        if (target) {
                            target.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        }
                    }
                });
            });
            
            // Initialize demo animations
            initializeDemoAnimations();
        });
        
        // Notification system
        function showNotification(message) {
            const notification = document.createElement('div');
            notification.className = 'notification';
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                background: var(--vitalog-teal);
                color: white;
                padding: 15px 30px;
                border-radius: 8px;
                font-weight: 500;
                z-index: 1000;
                animation: slideUp 0.3s ease;
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.animation = 'slideDown 0.3s ease';
                setTimeout(() => notification.remove(), 300);
            }, 2000);
        }
        
        // Demo animations
        function initializeDemoAnimations() {
            // Animate metric cards on scroll
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
                        entry.target.style.opacity = '1';
                    }
                });
            }, { threshold: 0.1 });
            
            document.querySelectorAll('.metric-card').forEach(card => {
                card.style.opacity = '0';
                observer.observe(card);
            });
            
            // Animate timeline entries
            document.querySelectorAll('.timeline-entry').forEach((entry, index) => {
                entry.style.opacity = '0';
                entry.style.transform = 'translateX(-30px)';
                setTimeout(() => {
                    entry.style.transition = 'all 0.5s ease';
                    entry.style.opacity = '1';
                    entry.style.transform = 'translateX(0)';
                }, index * 100);
            });
        }
        
        // Add notification animation keyframes
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideUp {
                from {
                    transform: translate(-50%, 100%);
                    opacity: 0;
                }
                to {
                    transform: translate(-50%, 0);
                    opacity: 1;
                }
            }
            
            @keyframes slideDown {
                from {
                    transform: translate(-50%, 0);
                    opacity: 1;
                }
                to {
                    transform: translate(-50%, 100%);
                    opacity: 0;
                }
            }
            
            /* Enhanced hover states */
            .journal-card {
                position: relative;
                overflow: hidden;
            }
            
            .journal-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: radial-gradient(circle at center, rgba(0, 217, 177, 0.1), transparent);
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            
            .journal-card:hover::before {
                opacity: 1;
            }
            
            /* Mobile tap feedback */
            @media (max-width: 768px) {
                .mobile-nav-bar .nav-item:active {
                    transform: scale(0.95);
                }
                
                .mobile-journal-card:active {
                    transform: scale(0.98);
                }
            }
            
            /* Loading states */
            .loading {
                position: relative;
                pointer-events: none;
            }
            
            .loading::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
            }
            
            /* Pulse animation for live data */
            .live-indicator {
                display: inline-block;
                width: 8px;
                height: 8px;
                background: var(--success);
                border-radius: 50%;
                margin-left: 8px;
                animation: pulse 2s ease-in-out infinite;
            }
            
            /* Enhanced focus states */
            input:focus,
            textarea:focus,
            select:focus {
                outline: none;
                border-color: var(--vitalog-teal);
                box-shadow: 0 0 0 3px rgba(0, 217, 177, 0.1);
            }
            
            button:focus {
                outline: 2px solid var(--vitalog-teal);
                outline-offset: 2px;
            }
            
            /* Form input hover states */
            input:hover,
            textarea:hover,
            select:hover {
                border-color: var(--vitalog-teal);
            }
            
            /* Form button hover states */
            button[type="submit"]:hover {
                background: var(--vitalog-teal-dark) !important;
                transform: translateY(-2px);
                box-shadow: 0 10px 30px rgba(0, 217, 177, 0.3);
            }
            
            /* Call to Action buttons hover effects */
            a[href*="index.html"]:hover,
            a[href*="mailto:"]:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            }
            
            /* Footer link hover */
            footer a:hover {
                opacity: 1 !important;
                background: rgba(255, 255, 255, 0.2) !important;
            }
            
            /* Parallax effect for headers */
            .case-header {
                background-attachment: fixed;
            }
            
            /* Scroll reveal animations */
            .scroll-reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            .scroll-reveal.revealed {
                opacity: 1;
                transform: translateY(0);
            }
            
            /* Case study navigation indicator */
            .progress-indicator {
                position: fixed;
                top: 0;
                left: 0;
                height: 3px;
                background: var(--vitalog-teal);
                z-index: 1001;
                transition: width 0.3s ease;
            }
            
            /* Enhanced mobile experience */
            @media (hover: hover) {
                .touchable:hover {
                    transform: scale(1.02);
                }
            }
            
            /* Print styles */
            @media print {
                .back-to-portfolio,
                .demo-tabs,
                .progress-indicator,
                footer {
                    display: none;
                }
                
                .case-section {
                    page-break-inside: avoid;
                }
            }
        `;
        document.head.appendChild(style);
        
        // Progress indicator
        const progressBar = document.createElement('div');
        progressBar.className = 'progress-indicator';
        progressBar.style.width = '0%';
        document.body.appendChild(progressBar);
        
        // Update progress on scroll
        window.addEventListener('scroll', () => {
            const windowHeight = window.innerHeight;
            const documentHeight = document.documentElement.scrollHeight - windowHeight;
            const scrolled = window.scrollY;
            const progress = (scrolled / documentHeight) * 100;
            progressBar.style.width = progress + '%';
        });
        
        // Scroll reveal for sections
        const revealElements = document.querySelectorAll('.case-section, .feature-item, .result-item, .highlight-item');
        revealElements.forEach(el => {
            el.classList.add('scroll-reveal');
        });
        
        const revealOnScroll = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('revealed');
                }
            });
        }, { threshold: 0.1 });
        
        revealElements.forEach(el => {
            revealOnScroll.observe(el);
        });
        
        // Smooth parallax for header
        let ticking = false;
        function updateParallax() {
            const scrolled = window.scrollY;
            const header = document.querySelector('.case-header');
            if (header) {
                header.style.transform = `translateY(${scrolled * 0.5}px)`;
            }
            ticking = false;
        }
        
        window.addEventListener('scroll', () => {
            if (!ticking) {
                requestAnimationFrame(updateParallax);
                ticking = true;
            }
        });
        
        // Enhanced mobile touch feedback
        if ('ontouchstart' in window) {
            document.querySelectorAll('button, .nav-item, .entry-card, .journal-card').forEach(el => {
                el.classList.add('touchable');
            });
        }
        
        // Analytics event tracking (placeholder)
        function trackEvent(category, action, label) {
            console.log(`Event tracked: ${category} - ${action} - ${label}`);
        }
        
        // Track demo interactions
        document.querySelectorAll('.demo-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                trackEvent('Demo', 'Tab Click', this.textContent);
            });
        });
        
        // Performance optimization - lazy load images
        const images = document.querySelectorAll('img[data-src]');
        const imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                    imageObserver.unobserve(img);
                }
            });
        });
        
        images.forEach(img => imageObserver.observe(img));
        
        // Keyboard navigation for demo
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                const tabs = Array.from(document.querySelectorAll('.demo-tab'));
                const activeIndex = tabs.findIndex(tab => tab.classList.contains('active'));
                let newIndex = activeIndex;
                
                if (e.key === 'ArrowLeft' && activeIndex > 0) {
                    newIndex = activeIndex - 1;
                } else if (e.key === 'ArrowRight' && activeIndex < tabs.length - 1) {
                    newIndex = activeIndex + 1;
                }
                
                if (newIndex !== activeIndex) {
                    tabs[newIndex].click();
                }
            }
        });
        
        // Final initialization complete
        console.log('Vitalog case study loaded successfully!');
    </script>
<script>
  // cursor
  const _cur = document.getElementById("jec-cursor");
  const _dot = _cur?.querySelector(".cur-dot");
  const _ring = _cur?.querySelector(".cur-ring");
  let _mx=0,_my=0,_rx=0,_ry=0;
  document.addEventListener("mousemove",e=>{
    _mx=e.clientX;_my=e.clientY;
    if(_dot){_dot.style.left=_mx+"px";_dot.style.top=_my+"px";}
  });
  (function _mv(){
    _rx+=(_mx-_rx)*.12;_ry+=(_my-_ry)*.12;
    if(_ring){_ring.style.left=_rx+"px";_ring.style.top=_ry+"px";}
    requestAnimationFrame(_mv);
  })();
  document.querySelectorAll("a,button").forEach(el=>{
    el.addEventListener("mouseenter",()=>document.body.classList.add("ch"));
    el.addEventListener("mouseleave",()=>document.body.classList.remove("ch"));
  });
  // theme toggle
  const _html = document.documentElement;
  _html.dataset.theme = "dark";
  const _tog = document.getElementById("jecThemeToggle");
  if(_tog) _tog.addEventListener("click",()=>{
    _html.dataset.theme = _html.dataset.theme==="dark"?"light":"dark";
  });
  // nav scroll
  const _nav = document.getElementById("jec-nav");
  window.addEventListener("scroll",()=>{
    if(_nav) _nav.style.borderBottomColor = window.scrollY>30?"var(--line)":"var(--line)";
  });
</script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl509546'},{'dcenter':'p3'},{'cp_id':'10443352'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vitalog Health Journal Platform - Case Study | James E. Coleman</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #000000;
            --secondary: #666666;
            --accent: #00D9B1;
            --bg: #ffffff;
            --hover: #00C29F;
            --surface: #f8f9fa;
            --border: #e9ecef;
            --vitalog-teal: #00D9B1;
            --vitalog-teal-dark: #00B897;
            --vitalog-light: #E8FAF7;
            --success: #28A745;
            --health-red: #FF5757;
            --health-blue: #4A90E2;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--primary);
            line-height: 1.6;
        }

        /* Back to Portfolio Button */
        .back-to-portfolio {
            position: fixed;
            top: 30px;
            left: 30px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 50px;
            text-decoration: none;
            color: var(--primary);
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .back-to-portfolio:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        /* Header */
        .case-header {
            background: linear-gradient(135deg, #1a3a52 0%, #2d5a7b 35%, #1a4d66 70%, #0a2540 100%);
            color: white;
            padding: 120px 60px 80px;
            position: relative;
            overflow: hidden;
        }
        
        .case-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(74,144,226,0.2)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>') repeat;
            opacity: 0.4;
            animation: slideGrid 20s linear infinite;
        }
        
        .case-header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(74, 144, 226, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(0, 217, 177, 0.2) 0%, transparent 50%);
        }
        
        @keyframes slideGrid {
            from { transform: translate(0, 0); }
            to { transform: translate(40px, 40px); }
        }
        
        .case-header-content {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .case-badge {
            display: inline-block;
            background: rgba(74, 144, 226, 0.2);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(74, 144, 226, 0.3);
        }
        
        .case-header h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 300;
            letter-spacing: -0.02em;
            margin-bottom: 20px;
            animation: fadeInUp 1s ease-out 0.5s both;
        }
        
        .vitalog-logo {
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: fadeInUp 1s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .vitalog-icon {
            width: 50px;
            height: 50px;
            position: relative;
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        .vitalog-diamond {
            width: 35px;
            height: 35px;
            background: var(--surface);
            transform: rotate(45deg);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -17.5px;
            margin-left: -17.5px;
        }
        
        .vitalog-text {
            font-size: 2.5rem;
            font-weight: 400;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            animation: fadeIn 1.2s ease-out 0.3s both;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .case-header p {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 800px;
            line-height: 1.6;
            animation: fadeInUp 1s ease-out 0.7s both;
            margin-bottom: 60px;
        }
        
        /* Header Animated Metrics */
        .header-metrics {
            margin-top: 60px;
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease-out 1s both;
        }
        
        .metric-animation {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 20px 30px;
            display: flex;
            align-items: center;
            gap: 15px;
            animation: slideInLeft 1s ease-out 1.2s both;
        }
        
        .metric-icon-animated {
            width: 48px;
            height: 48px;
            background: rgba(0, 217, 177, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--vitalog-teal);
            animation: pulse 2s ease-in-out infinite;
        }
        
        .metric-details {
            display: flex;
            flex-direction: column;
        }
        
        .metric-label {
            font-size: 0.85rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .metric-number-animated {
            font-size: 1.8rem;
            font-weight: 600;
            color: white;
        }
        
        /* Notification Popups */
        .notification-popup {
            background: var(--surface);
            color: var(--primary);
            border-radius: 12px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .notification-popup::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--vitalog-teal);
        }
        
        .medication-reminder {
            animation: slideInTop 0.8s ease-out 2s both, floatAnimation 3s ease-in-out 2.8s infinite;
        }
        
        .pharmacy-alert {
            animation: slideInTop 0.8s ease-out 2.5s both, floatAnimation 3s ease-in-out 3.3s infinite;
        }
        
        .pharmacy-alert::before {
            background: #FF5757;
        }
        
        .notification-icon {
            width: 40px;
            height: 40px;
            background: var(--vitalog-light);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--vitalog-teal);
        }
        
        .notification-icon.pharmacy {
            background: rgba(255, 87, 87, 0.1);
            color: #FF5757;
        }
        
        .notification-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .notification-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--primary);
        }
        
        .notification-text {
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideInTop {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes floatAnimation {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }
        
        /* Responsive adjustments for header metrics */
        @media (max-width: 768px) {
            .header-metrics {
                flex-direction: column;
                align-items: stretch;
                gap: 15px;
            }
            
            .metric-animation,
            .notification-popup {
                width: 100%;
            }
        }
        
        /* Case Meta */
        .case-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            padding: 60px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .meta-item h3 {
            font-size: 0.9rem;
            color: var(--secondary);
            font-weight: 400;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .meta-item p {
            font-size: 1.1rem;
            color: var(--primary);
        }
        
        /* Content Sections */
        .case-section {
            padding: 80px 60px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .case-section h2 {
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: 30px;
            color: var(--primary);
        }
        
        .case-section h3 {
            font-size: 1.5rem;
            font-weight: 400;
            margin: 40px 0 20px;
            color: var(--primary);
        }
        
        .case-section p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--secondary);
            margin-bottom: 20px;
            max-width: 800px;
        }
        
        /* Feature List */
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin: 40px 0;
        }
        
        .feature-item {
            padding: 30px;
            background: var(--surface);
            border-radius: 8px;
            border: 1px solid var(--border);
            transition: all 0.3s ease;
        }
        
        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 217, 177, 0.1);
            border-color: var(--vitalog-teal);
        }
        
        .feature-item h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--primary);
        }
        
        .feature-item p {
            color: var(--secondary);
            line-height: 1.6;
        }
        
        /* Results Section */
        .results-section {
            background: var(--surface);
            padding: 80px 60px;
        }
        
        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .result-item {
            text-align: center;
        }
        
        .result-number {
            font-size: 3rem;
            font-weight: 200;
            color: var(--vitalog-teal);
            margin-bottom: 10px;
        }
        
        .result-label {
            font-size: 1rem;
            color: var(--secondary);
        }
        
        /* UI Showcase Section */
        .ui-showcase-section {
            background: #1a1a1a;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .ui-showcase-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 50%, rgba(0, 217, 177, 0.2) 0%, transparent 50%),
                        radial-gradient(circle at 70% 50%, rgba(0, 217, 177, 0.1) 0%, transparent 50%);
        }
        
        .showcase-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 60px;
            position: relative;
            z-index: 1;
        }
        
        .showcase-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .showcase-header h2 {
            font-size: 2.5rem;
            font-weight: 300;
            color: white;
            margin-bottom: 20px;
        }
        
        .showcase-header p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Brand Colors */
        .color-palette {
            display: flex;
            gap: 20px;
            margin: 40px 0;
            flex-wrap: wrap;
        }
        
        .color-swatch {
            flex: 1;
            min-width: 150px;
        }
        
        .swatch-color {
            height: 80px;
            border-radius: 8px 8px 0 0;
        }
        
        .swatch-info {
            background: var(--surface);
            padding: 15px;
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
        }
        
        .swatch-info h4 {
            font-size: 0.9rem;
            margin-bottom: 5px;
            color: var(--primary);
        }
        
        .swatch-info p {
            font-size: 0.8rem;
            color: var(--secondary);
            margin: 0;
        }
        
        /* Technology Stack */
        .tech-stack {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin: 30px 0;
        }
        
        .tech-badge {
            padding: 10px 20px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 25px;
            font-size: 0.9rem;
            color: var(--primary);
        }
        
        /* Mobile Showcase Wrapper */
        .mobile-showcase-wrapper {
            text-align: center;
            padding: 40px 0;
        }
        
        .mobile-demo-tabs {
            display: inline-flex;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            padding: 8px;
            border-radius: 12px;
            margin-bottom: 40px;
        }
        
        .mobile-demo-tab {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }
        
        .mobile-demo-tab:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .mobile-demo-tab.active {
            background: var(--vitalog-teal);
            border-color: var(--vitalog-teal);
        }
        
        .mobile-screens-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 850px;
        }
        
        .mobile-screen-wrapper {
            display: none;
        }
        
        .mobile-screen-wrapper.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Mobile Container */
        .mobile-container {
            width: 375px;
            height: 812px;
            background: var(--surface);
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        /* Mobile Status Bar */
        .mobile-status-bar {
            height: 44px;
            background: var(--surface);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
        }
        
        /* Mobile Header */
        .mobile-header {
            background: linear-gradient(135deg, #1a3a52 0%, #2d5a7b 100%);
            padding: 20px;
            color: white;
        }
        
        .mobile-header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .mobile-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .user-avatar-small {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .mobile-user h3 {
            font-size: 1.1rem;
            margin: 0;
            font-weight: 500;
        }
        
        .mobile-user p {
            font-size: 0.85rem;
            margin: 0;
            opacity: 0.9;
        }
        
        .notification-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            font-size: 1.1rem;
        }
        
        .notification-dot {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            background: var(--health-red);
            border-radius: 50%;
        }
        
        /* Mobile Quick Entry */
        .mobile-quick-entry {
            margin: -10px 20px 20px;
            background: var(--surface);
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 10px;
        }
        
        .mobile-entry-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 0.95rem;
            color: var(--primary);
        }
        
        .mobile-entry-input::placeholder {
            color: var(--text-lo);
        }
        
        .mobile-entry-actions {
            display: flex;
            gap: 8px;
        }
        
        .mobile-entry-actions button {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
        }
        
        /* Mobile Content */
        .mobile-content {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px;
        }
        
        .mobile-section {
            padding: 20px;
        }
        
        .mobile-section h4 {
            font-size: 1.1rem;
            color: var(--primary);
            margin: 0 0 15px 0;
            font-weight: 600;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .section-header h4 {
            margin: 0;
        }
        
        .see-all {
            font-size: 0.85rem;
            color: var(--vitalog-teal);
            text-decoration: none;
        }
        
        /* Mobile Stats Grid */
        .mobile-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .mobile-stat-card {
            background: var(--surface);
            padding: 16px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        
        .stat-info {
            display: flex;
            flex-direction: column;
        }
        
        .stat-value {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 0.75rem;
            color: var(--secondary);
        }
        
        /* Mobile Entry List */
        .mobile-entry-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .mobile-entry-item {
            display: flex;
            gap: 12px;
            padding: 16px;
            background: var(--surface);
            border-radius: 12px;
        }
        
        .entry-time {
            font-size: 0.75rem;
            color: var(--secondary);
            min-width: 50px;
        }
        
        .entry-content h5 {
            font-size: 0.95rem;
            margin: 0 0 4px 0;
            color: var(--primary);
        }
        
        .entry-content p {
            font-size: 0.85rem;
            color: var(--secondary);
            margin: 0 0 8px 0;
            line-height: 1.4;
        }
        
        .entry-tags-mobile {
            display: flex;
            gap: 6px;
        }
        
        .entry-tags-mobile span {
            font-size: 0.7rem;
            padding: 3px 8px;
            background: rgba(0, 217, 177, 0.1);
            color: var(--vitalog-teal);
            border-radius: 10px;
            font-weight: 500;
        }
        
        /* Mobile Navigation Bar */
        .mobile-nav-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--surface);
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-around;
            padding: 8px 0 20px;
        }
        
        .mobile-nav-bar .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            text-decoration: none;
            color: var(--secondary);
            font-size: 0.7rem;
            padding: 8px;
            transition: all 0.3s ease;
        }
        
        .mobile-nav-bar .nav-item.active {
            color: var(--vitalog-teal);
        }
        
        .mobile-nav-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .add-entry-btn {
            position: relative;
        }
        
        .add-icon-mobile {
            width: 48px;
            height: 48px;
            background: var(--vitalog-teal);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 300;
            box-shadow: 0 4px 12px rgba(0, 217, 177, 0.3);
        }
        
        /* Navigation Icons */
        .icon-home::before {
            content: '';
            width: 20px;
            height: 20px;
            background: currentColor;
            clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0% 100%, 0% 38%);
        }
        
        .icon-smart-journals {
            width: 24px;
            height: 24px;
            position: relative;
        }
        
        .icon-smart-journals::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 5px;
            background: currentColor;
            top: 4px;
            left: 3px;
            transform: skewY(-3deg);
        }
        
        .icon-smart-journals::after {
            content: '';
            position: absolute;
            width: 18px;
            height: 5px;
            background: currentColor;
            top: 10px;
            left: 3px;
            transform: skewY(-3deg);
            opacity: 0.7;
        }
        
        .icon-smart-journals span {
            position: absolute;
            width: 18px;
            height: 5px;
            background: currentColor;
            top: 16px;
            left: 3px;
            transform: skewY(-3deg);
            opacity: 0.5;
        }
        
        .icon-community-feed::before {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            background: currentColor;
            border-radius: 50%;
            left: 2px;
        }
        
        .icon-community-feed::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            background: currentColor;
            border-radius: 50%;
            right: 2px;
            opacity: 0.6;
        }
        
        .icon-health-tracking {
            width: 24px;
            height: 24px;
            position: relative;
        }
        
        .icon-health-tracking::before {
            content: '';
            position: absolute;
            width: 5px;
            height: 12px;
            background: currentColor;
            left: 2px;
            bottom: 4px;
        }
        
        .icon-health-tracking::after {
            content: '';
            position: absolute;
            width: 5px;
            height: 8px;
            background: currentColor;
            left: 9px;
            bottom: 4px;
            opacity: 0.7;
        }
        
        .icon-health-tracking span:first-child {
            position: absolute;
            width: 5px;
            height: 16px;
            background: currentColor;
            right: 9px;
            bottom: 4px;
        }
        
        .icon-health-tracking span:last-child {
            position: absolute;
            width: 5px;
            height: 10px;
            background: currentColor;
            right: 2px;
            bottom: 4px;
            opacity: 0.7;
        }
        
        /* Mobile Entry Screen Styles */
        .mobile-entry-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .back-btn-mobile {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--primary);
            cursor: pointer;
        }
        
        .mobile-entry-header h2 {
            font-size: 1.1rem;
            font-weight: 500;
            margin: 0;
        }
        
        .save-btn-mobile {
            background: none;
            border: none;
            color: var(--vitalog-teal);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
        }
        
        .mobile-entry-content {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }
        
        .journal-selector-mobile {
            margin-bottom: 20px;
        }
        
        .journal-selector-mobile label {
            display: block;
            font-size: 0.85rem;
            color: var(--secondary);
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .journal-select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.95rem;
            background: var(--surface);
        }
        
        .mobile-title-input {
            width: 100%;
            padding: 12px 0;
            border: none;
            border-bottom: 1px solid var(--border);
            font-size: 1.2rem;
            font-weight: 400;
            margin-bottom: 20px;
        }
        
        .mobile-textarea {
            width: 100%;
            min-height: 150px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.95rem;
            line-height: 1.5;
            resize: none;
            margin-bottom: 20px;
        }
        
        /* Mobile Mood Section */
        .mobile-mood-section {
            margin-bottom: 20px;
        }
        
        .mobile-mood-section label {
            display: block;
            font-size: 0.85rem;
            color: var(--secondary);
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .mobile-mood-options {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }
        
        .mood-option-mobile {
            flex: 1;
            padding: 12px;
            background: var(--surface);
            border: 2px solid transparent;
            border-radius: 12px;
            text-align: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .mood-option-mobile:hover {
            border-color: var(--vitalog-teal);
        }
        
        .mood-option-mobile.selected {
            background: var(--vitalog-light);
            border-color: var(--vitalog-teal);
        }
        
        /* Mobile Tags Section */
        .mobile-tags-section {
            margin-bottom: 20px;
        }
        
        .mobile-tags-section label {
            display: block;
            font-size: 0.85rem;
            color: var(--secondary);
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .mobile-selected-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .tag-mobile {
            padding: 6px 12px;
            background: var(--vitalog-light);
            color: var(--vitalog-teal);
            border-radius: 16px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .add-tag-btn {
            padding: 6px 12px;
            background: var(--surface);
            color: var(--secondary);
            border-radius: 16px;
            font-size: 0.85rem;
            cursor: pointer;
        }
        
        /* Mobile Attachment Section */
        .mobile-attachment-section {
            display: flex;
            gap: 12px;
        }
        
        .attachment-btn-mobile {
            flex: 1;
            padding: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.9rem;
            color: var(--secondary);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .attachment-btn-mobile:hover {
            border-color: var(--vitalog-teal);
            color: var(--vitalog-teal);
        }
        
        /* Mobile Journal Screen */
        .mobile-header-simple {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        
        .mobile-header-simple h2 {
            font-size: 1.3rem;
            font-weight: 600;
            margin: 0;
        }
        
        .add-journal-btn-mobile {
            width: 36px;
            height: 36px;
            background: var(--vitalog-teal);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mobile-journals-list {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            padding-bottom: 100px;
        }
        
        .mobile-journal-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .mobile-journal-card:hover {
            border-color: var(--vitalog-teal);
            transform: translateX(4px);
        }
        
        .journal-color-indicator {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            flex-shrink: 0;
        }
        
        .journal-info {
            flex: 1;
        }
        
        .journal-info h4 {
            font-size: 1rem;
            margin: 0 0 4px 0;
            color: var(--primary);
        }
        
        .journal-info p {
            font-size: 0.85rem;
            color: var(--secondary);
            margin: 0;
        }
        
        .journal-arrow {
            font-size: 1.2rem;
            color: var(--secondary);
        }
        
        /* Feature Highlights */
        .feature-highlights {
            margin-top: 60px;
        }
        
        .highlights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .highlight-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .highlight-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .highlight-item h4 {
            color: white;
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        
        .highlight-item p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }
        
        /* Web Demo Section */
        .web-showcase-section {
            background: #0a2540;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .web-showcase-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 50%, rgba(0, 217, 177, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 70% 50%, rgba(74, 144, 226, 0.1) 0%, transparent 50%);
        }
        
        .demo-frame {
            max-width: 1200px;
            margin: 0 auto 60px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 40px;
            backdrop-filter: blur(10px);
        }
        
        .device-frame {
            background: var(--surface-2);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
        }
        
        .device-screen {
            background: var(--surface);
            min-height: 800px;
        }
        
        /* Tab Navigation */
        .demo-tabs {
            background: #f8f9fa;
            padding: 20px;
            display: flex;
            gap: 10px;
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
        }
        
        .demo-tab {
            padding: 10px 20px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            white-space: nowrap;
        }
        
        .demo-tab:hover {
            background: var(--vitalog-light);
            border-color: var(--vitalog-teal);
        }
        
        .demo-tab.active {
            background: var(--vitalog-teal);
            color: white;
            border-color: var(--vitalog-teal);
        }
        
        /* Screen Container */
        .screen-container {
            position: relative;
            min-height: 700px;
            background: var(--surface);
        }
        
        .app-screen {
            display: none;
            animation: fadeIn 0.5s ease;
            min-height: 700px;
        }
        
        .app-screen.active {
            display: flex;
        }
        
        /* Landing Screen */
        .landing-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px;
            text-align: center;
            background: var(--surface);
        }
        
        .landing-logo {
            margin-bottom: 40px;
        }
        
        .logo-icon-large {
            width: 80px;
            height: 80px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .logo-diamond-large {
            width: 50px;
            height: 50px;
            background: #1a1a1a;
            transform: rotate(45deg);
        }
        
        .logo-text-large {
            font-size: 3rem;
            font-weight: 400;
            letter-spacing: 0.02em;
            color: var(--primary);
        }
        
        .landing-tagline {
            max-width: 500px;
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--secondary);
            margin-bottom: 40px;
        }
        
        .get-started-btn {
            background: var(--vitalog-teal);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .get-started-btn:hover {
            background: var(--vitalog-teal-dark);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 217, 177, 0.3);
        }
        
        .login-link {
            color: var(--secondary);
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        .login-link:hover {
            color: var(--vitalog-teal);
        }
        
        /* Dashboard Screen */
        .app-sidebar {
            width: 240px;
            background: #f8f9fa;
            border-right: 1px solid var(--border);
            min-height: 700px;
            transition: all 0.3s ease;
        }
        
        .user-profile {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            background: var(--vitalog-teal);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .user-name {
            font-weight: 500;
            color: var(--primary);
        }
        
        .sidebar-nav {
            padding: 20px 0;
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: var(--secondary);
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            font-size: 0.95rem;
            overflow: hidden;
            cursor: pointer;
        }
        
        .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--vitalog-teal);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .nav-item:hover {
            background: rgba(0, 217, 177, 0.1);
            color: var(--vitalog-teal);
        }
        
        .nav-item.active {
            background: rgba(0, 217, 177, 0.15);
            color: var(--vitalog-teal);
            font-weight: 500;
        }
        
        .nav-item.active::before {
            transform: translateX(0);
        }
        
        .nav-icon {
            margin-right: 12px;
            width: 24px;
            height: 24px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7A8B9A;
        }
        
        .nav-item.active .nav-icon {
            color: var(--vitalog-teal);
        }
        
        /* Navigation Icons for Desktop */
        .icon-quick-entry {
            width: 24px;
            height: 24px;
            position: relative;
        }
        
        .icon-quick-entry::before {
            content: '';
            width: 16px;
            height: 20px;
            background: currentColor;
            clip-path: polygon(0% 0%, 75% 0%, 100% 25%, 100% 100%, 0% 100%);
        }
        
        .icon-goals::before {
            content: '';
            width: 20px;
            height: 20px;
            border: 3px solid currentColor;
            border-radius: 50%;
            position: relative;
        }
        
        .icon-goals::after {
            content: '';
            width: 8px;
            height: 8px;
            background: currentColor;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .icon-conditions::before {
            content: '';
            width: 20px;
            height: 18px;
            background: currentColor;
            position: relative;
            clip-path: path('M10 3C8.5 0.5 5.5 0 3 2C0.5 4 0.5 7 10 16C19.5 7 19.5 4 17 2C14.5 0 11.5 0.5 10 3Z');
        }
        
        .icon-settings::before {
            content: '';
            width: 16px;
            height: 16px;
            background: currentColor;
            border-radius: 50%;
            position: relative;
            box-shadow: 
                0 -8px 0 -6px currentColor,
                0 8px 0 -6px currentColor,
                -8px 0 0 -6px currentColor,
                8px 0 0 -6px currentColor,
                -5.66px -5.66px 0 -6px currentColor,
                5.66px -5.66px 0 -6px currentColor,
                -5.66px 5.66px 0 -6px currentColor,
                5.66px 5.66px 0 -6px currentColor;
        }
        
        .icon-settings::after {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--surface);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .nav-label {
            flex: 1;
            font-weight: 500;
        }
        
        .nav-count {
            margin-left: auto;
            background: var(--border);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            color: var(--secondary);
            font-weight: 500;
        }
        
        /* Main Content Area */
        .app-main {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background: var(--surface);
        }
        
        /* Quick Entry Bar */
        .quick-entry-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 40px;
            padding: 20px;
            background: var(--surface);
            border-radius: 8px;
        }
        
        .quick-entry-input {
            flex: 1;
            padding: 12px 20px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: var(--surface);
        }
        
        .quick-entry-input:focus {
            outline: none;
            border-color: var(--vitalog-teal);
            box-shadow: 0 0 0 3px rgba(0, 217, 177, 0.1);
        }
        
        .quick-entry-input::placeholder {
            color: var(--text-lo);
        }
        
        .entry-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            background: var(--surface);
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }
        
        .action-btn:hover {
            border-color: var(--vitalog-teal);
            background: var(--vitalog-light);
        }
        
        /* Section Titles */
        .section-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        /* Entries Grid */
        .entries-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .entry-card {
            background: var(--surface);
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--border);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .entry-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(0, 217, 177, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .entry-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border-color: var(--vitalog-teal);
        }
        
        .entry-card:hover::after {
            opacity: 1;
        }
        
        .entry-card h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: var(--primary);
        }
        
        .entry-card p {
            font-size: 0.9rem;
            color: var(--secondary);
            line-height: 1.5;
            margin-bottom: 15px;
        }
        
        .entry-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .entry-comments {
            font-size: 0.8rem;
            color: var(--secondary);
        }
        
        .entry-avatars,
        .entry-author {
            display: flex;
            gap: 5px;
        }
        
        .avatar-mini {
            width: 25px;
            height: 25px;
            background: var(--vitalog-teal);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 600;
            border: 2px solid white;
            margin-left: -8px;
            transition: all 0.3s ease;
        }
        
        .avatar-mini:first-child {
            margin-left: 0;
        }
        
        .entry-card:hover .avatar-mini {
            transform: translateY(-2px);
        }
        
        /* Entry Mood Indicator */
        .entry-mood-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            transition: height 0.3s ease;
        }
        
        .entry-card:hover .entry-mood-indicator {
            height: 6px;
        }
        
        /* Entry Tags */
        .entry-tags {
            display: flex;
            gap: 8px;
            margin: 12px 0;
            flex-wrap: wrap;
        }
        
        .entry-tag {
            display: inline-block;
            padding: 4px 12px;
            background: rgba(0, 217, 177, 0.1);
            color: var(--vitalog-teal);
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .entry-tag:hover {
            background: rgba(0, 217, 177, 0.2);
            transform: scale(1.05);
        }
        
        /* Health Metrics Dashboard */
        .metrics-dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .metric-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: all 0.3s ease;
        }
        
        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .metric-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .metric-content {
            flex: 1;
        }
        
        .metric-content h4 {
            font-size: 0.9rem;
            color: var(--secondary);
            margin: 0 0 8px 0;
            font-weight: 500;
        }
        
        .metric-value {
            font-size: 1.8rem;
            font-weight: 300;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .metric-unit {
            font-size: 0.9rem;
            color: var(--secondary);
            font-weight: 400;
        }
        
        .metric-trend {
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .trend-up {
            color: var(--success);
        }
        
        .trend-down {
            color: var(--health-red);
        }
        
        /* Entries Screen */
        .entries-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .entries-header h1 {
            font-size: 2rem;
            font-weight: 300;
            margin: 0;
        }
        
        /* Timeline Styles */
        .timeline-section {
            margin-bottom: 40px;
        }
        
        .timeline-date {
            font-size: 1.1rem;
            color: var(--text-lo);
            font-weight: 300;
            margin-bottom: 20px;
            position: relative;
            padding-left: 20px;
        }
        
        .timeline-date::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            background: var(--vitalog-teal);
            border-radius: 50%;
        }
        
        .timeline-entries {
            position: relative;
            padding-left: 20px;
        }
        
        .timeline-entries::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 20px;
            bottom: 20px;
            width: 2px;
            background: var(--border);
        }
        
        .timeline-entry {
            position: relative;
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            padding-left: 40px;
        }
        
        .timeline-entry::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 8px;
            height: 8px;
            background: var(--surface);
            border: 2px solid var(--vitalog-teal);
            border-radius: 50%;
            z-index: 1;
        }
        
        .entry-time-badge {
            position: absolute;
            left: -80px;
            top: 5px;
            font-size: 0.85rem;
            color: var(--secondary);
            font-weight: 500;
            white-space: nowrap;
        }
        
        .timeline-entry-content {
            flex: 1;
            background: var(--surface);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .timeline-entry:hover .timeline-entry-content {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .timeline-entry-content h4 {
            font-size: 1.15rem;
            font-weight: 500;
            color: var(--primary);
            margin: 0 0 8px 0;
        }
        
        .timeline-entry-content p {
            font-size: 0.95rem;
            color: var(--secondary);
            line-height: 1.5;
            margin: 0 0 12px 0;
        }
        
        /* Mood Pills */
        .entry-mood-pills {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        
        .mood-pill {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .mood-pill.positive {
            background: rgba(40, 167, 69, 0.1);
            color: var(--success);
        }
        
        .mood-pill.negative {
            background: rgba(255, 87, 87, 0.1);
            color: var(--health-red);
        }
        
        .mood-pill.neutral {
            background: rgba(74, 144, 226, 0.1);
            color: var(--health-blue);
        }
        
        .entry-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
        }
        
        .entry-comments {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .entry-comments svg {
            width: 16px;
            height: 16px;
        }
        
        .timeline-entry.with-image .entry-image {
            margin-top: 15px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .timeline-entry.with-image .entry-image img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        /* Quick Entry Screen */
        .entry-main {
            background: #f9f9f9;
            padding: 0;
        }
        
        .entry-creation-header {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 20px 30px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            color: var(--secondary);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            color: var(--primary);
            transform: translateX(-2px);
        }
        
        .entry-actions-top {
            display: flex;
            gap: 12px;
        }
        
        .save-draft-btn, .publish-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .save-draft-btn {
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--secondary);
        }
        
        .save-draft-btn:hover {
            border-color: var(--vitalog-teal);
            color: var(--vitalog-teal);
        }
        
        .publish-btn {
            background: var(--vitalog-teal);
            border: none;
            color: white;
        }
        
        .publish-btn:hover {
            background: var(--vitalog-teal-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 217, 177, 0.3);
        }
        
        .entry-creation-container {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
        }
        
        .entry-form-section {
            background: var(--surface);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        /* Journal Selector */
        .journal-selector {
            margin-bottom: 30px;
        }
        
        .journal-selector label {
            display: block;
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .journal-select-grid {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .journal-select-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--surface);
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .journal-select-item:hover {
            border-color: var(--vitalog-teal);
        }
        
        .journal-select-item.selected {
            background: var(--vitalog-light);
            border-color: var(--vitalog-teal);
        }
        
        .journal-color-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
        
        /* Entry Title Input */
        .entry-title-input {
            margin-bottom: 24px;
        }
        
        .entry-title-input input {
            width: 100%;
            padding: 16px 0;
            border: none;
            border-bottom: 2px solid var(--border);
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--primary);
            transition: border-color 0.3s ease;
        }
        
        .entry-title-input input:focus {
            outline: none;
            border-color: var(--vitalog-teal);
        }
        
        /* Entry Editor */
        .entry-editor {
            margin-bottom: 30px;
        }
        
        .editor-toolbar {
            display: flex;
            gap: 8px;
            padding: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
        }
        
        .editor-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            color: var(--secondary);
            transition: all 0.3s ease;
        }
        
        .editor-btn:hover {
            border-color: var(--vitalog-teal);
            color: var(--vitalog-teal);
        }
        
        .entry-textarea {
            width: 100%;
            min-height: 200px;
            padding: 20px;
            border: 1px solid var(--border);
            border-radius: 0 0 8px 8px;
            font-size: 1rem;
            line-height: 1.6;
            resize: vertical;
        }
        
        .entry-textarea:focus {
            outline: none;
            border-color: var(--vitalog-teal);
        }
        
        /* Mood Selector */
        .mood-selector {
            margin-bottom: 30px;
        }
        
        .mood-selector label {
            display: block;
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .mood-options {
            display: flex;
            gap: 12px;
        }
        
        .mood-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 12px 16px;
            background: var(--surface);
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .mood-option:hover {
            border-color: var(--vitalog-teal);
            transform: translateY(-2px);
        }
        
        .mood-option.selected {
            background: var(--vitalog-light);
            border-color: var(--vitalog-teal);
        }
        
        .mood-emoji {
            font-size: 1.5rem;
        }
        
        .mood-option span:last-child {
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        /* Tag Selector */
        .tag-selector {
            margin-bottom: 30px;
        }
        
        .tag-selector label {
            display: block;
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .selected-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        
        .tag-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--vitalog-light);
            color: var(--vitalog-teal);
            border-radius: 16px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .tag-chip button {
            background: none;
            border: none;
            color: var(--vitalog-teal);
            font-size: 1rem;
            cursor: pointer;
            padding: 0;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tag-input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.9rem;
            margin-bottom: 12px;
        }
        
        .suggested-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .suggested-tag {
            display: inline-block;
            padding: 6px 12px;
            background: var(--surface);
            color: var(--secondary);
            border-radius: 16px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .suggested-tag:hover {
            background: var(--vitalog-light);
            color: var(--vitalog-teal);
        }
        
        /* Privacy Settings */
        .privacy-settings label:first-child {
            display: block;
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .privacy-options {
            display: flex;
            gap: 12px;
        }
        
        .privacy-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: var(--surface);
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .privacy-option:hover {
            border-color: var(--vitalog-teal);
        }
        
        .privacy-option input[type="radio"] {
            display: none;
        }
        
        .privacy-option input[type="radio"]:checked + .privacy-icon + span {
            color: var(--vitalog-teal);
        }
        
        .privacy-option input[type="radio"]:checked ~ * {
            color: var(--vitalog-teal);
        }
        
        .privacy-option input[type="radio"]:checked ~ .privacy-icon {
            background: var(--vitalog-light);
        }
        
        .privacy-icon {
            font-size: 1.2rem;
        }
        
        /* Entry Sidebar Right */
        .entry-sidebar-right {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        
        .entry-sidebar-right > div {
            background: var(--surface);
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .entry-sidebar-right h4 {
            font-size: 1rem;
            font-weight: 500;
            color: var(--primary);
            margin: 0 0 16px 0;
        }
        
        .detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
        }
        
        .detail-label {
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .detail-value {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        .attachment-preview {
            position: relative;
            margin-bottom: 12px;
        }
        
        .attachment-preview img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 8px;
        }
        
        .remove-attachment {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .add-attachment-btn {
            width: 100%;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--surface);
            border: 1px dashed var(--border);
            border-radius: 8px;
            color: var(--secondary);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .add-attachment-btn:hover {
            border-color: var(--vitalog-teal);
            color: var(--vitalog-teal);
        }
        
        .related-entry {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .related-entry:last-child {
            border-bottom: none;
        }
        
        .related-entry:hover {
            padding-left: 8px;
        }
        
        .related-date {
            font-size: 0.75rem;
            color: var(--secondary);
        }
        
        .related-title {
            font-size: 0.9rem;
            color: var(--primary);
        }
        
        /* Journals Screen */
        .journals-header {
            margin-bottom: 30px;
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .journals-header h1 {
            font-size: 2rem;
            font-weight: 300;
            color: var(--primary);
            margin: 0;
        }
        
        .header-actions {
            display: flex;
            gap: 12px;
        }
        
        .filter-btn, .sort-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.9rem;
            color: var(--secondary);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .filter-btn:hover, .sort-btn:hover {
            border-color: var(--vitalog-teal);
            color: var(--vitalog-teal);
        }
        
        .journals-stats {
            display: flex;
            gap: 40px;
            padding: 20px;
            background: var(--surface);
            border-radius: 12px;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .stat-number {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--secondary);
        }
        
        /* Journal Cards Grid */
        .journals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
        }
        
        .journal-card {
            background: var(--surface);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .journal-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .journal-color-bar {
            height: 12px;
            position: relative;
            overflow: hidden;
        }
        
        .journal-color-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s ease;
        }
        
        .journal-card:hover .journal-color-bar::after {
            left: 100%;
        }
        
        .journal-content {
            padding: 24px;
        }
        
        .journal-icon {
            width: 48px;
            height: 48px;
            background: var(--surface);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            color: var(--secondary);
        }
        
        .journal-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .journal-menu {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            color: var(--secondary);
            transition: all 0.3s ease;
        }
        
        .journal-menu:hover {
            background: var(--surface);
            color: var(--primary);
        }
        
        .journal-content h3 {
            font-size: 1.3rem;
            font-weight: 500;
            color: var(--text-mid);
            margin: 0 0 8px 0;
        }
        
        .journal-description {
            font-size: 0.9rem;
            color: var(--secondary);
            margin: 0 0 16px 0;
            line-height: 1.4;
        }
        
        .journal-tags {
            display: flex;
            gap: 6px;
            margin: 12px 0;
            flex-wrap: wrap;
        }
        
        .journal-tag {
            display: inline-block;
            padding: 3px 10px;
            background: var(--surface);
            color: var(--secondary);
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .journal-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .journal-stats strong {
            color: var(--primary);
            font-weight: 600;
        }
        
        .journal-date {
            font-size: 0.85rem;
            color: var(--text-lo);
        }
        
        .journal-quick-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }
        
        .quick-action-btn, .view-btn {
            flex: 1;
            padding: 8px 16px;
            border: 1px solid var(--border);
            background: var(--surface);
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .quick-action-btn:hover {
            background: var(--vitalog-light);
            border-color: var(--vitalog-teal);
            color: var(--vitalog-teal);
        }
        
        .view-btn {
            background: var(--vitalog-teal);
            color: white;
            border-color: var(--vitalog-teal);
        }
        
        .view-btn:hover {
            background: var(--vitalog-teal-dark);
            transform: translateX(2px);
        }
        
        /* Add Journal Card */
        .add-journal {
            border: 2px dashed var(--border);
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 280px;
        }
        
        .add-journal:hover {
            border-color: var(--vitalog-teal);
            background: rgba(0, 217, 177, 0.05);
        }
        
        .add-journal-content {
            text-align: center;
            color: var(--secondary);
        }
        
        .add-icon {
            font-size: 3rem;
            color: var(--vitalog-teal);
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .add-hint {
            display: block;
            font-size: 0.85rem;
            color: var(--secondary);
            margin-top: 8px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .back-to-portfolio {
                top: 20px;
                left: 20px;
                padding: 10px 16px;
                font-size: 0.85rem;
            }
            
            .case-header {
                padding: 80px 30px 60px;
            }
            
            .case-header h1 {
                font-size: 2rem;
            }
            
            .case-header p {
                font-size: 1.1rem;
            }
            
            .vitalog-text {
                font-size: 2rem;
            }
            
            .case-section {
                padding: 60px 30px;
            }
            
            .case-section h2 {
                font-size: 2rem;
            }
            
            .case-meta {
                padding: 40px 30px;
                gap: 30px;
                grid-template-columns: 1fr;
            }
            
            .ui-showcase-section,
            .web-showcase-section {
                padding: 60px 0;
            }
            
            .showcase-container {
                padding: 0 20px;
            }
            
            .showcase-header h2 {
                font-size: 2rem;
            }
            
            .showcase-header p {
                font-size: 1rem;
            }
            
            .color-palette {
                flex-direction: column;
            }
            
            .color-swatch {
                width: 100%;
            }
            
            .feature-list {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .app-screen {
                flex-direction: column;
            }
            
            .app-sidebar {
                width: 100%;
                min-height: auto;
                border-right: none;
                border-bottom: 1px solid var(--border);
            }
            
            .sidebar-nav {
                display: flex;
                overflow-x: auto;
                padding: 10px 0;
                -webkit-overflow-scrolling: touch;
            }
            
            .nav-item {
                white-space: nowrap;
                padding: 12px 16px;
            }
            
            .nav-icon {
                margin-right: 8px;
            }
            
            .nav-count {
                display: none;
            }
            
            .app-main {
                padding: 20px;
            }
            
            .entries-grid {
                grid-template-columns: 1fr;
            }
            
            .journals-grid {
                grid-template-columns: 1fr;
            }
            
            .journal-card {
                min-height: auto;
            }
            
            .metrics-dashboard {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .entry-creation-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .entry-sidebar-right {
                display: none;
            }
            
            .entry-form-section {
                padding: 20px;
            }
            
            .mobile-container {
                max-width: 90vw;
                height: auto;
                max-height: 80vh;
            }
            
            .demo-frame {
                padding: 20px;
                background: transparent;
            }
            
            .device-frame {
                border-radius: 20px;
            }
            
            .demo-tabs {
                padding: 15px;
                gap: 5px;
                flex-wrap: wrap;
            }
            
            .demo-tab {
                padding: 8px 12px;
                font-size: 0.85rem;
            }
            
            .highlights-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .highlight-item {
                padding: 20px;
            }
            
            .results-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
            
            .result-item {
                padding: 15px;
            }
            
            .result-number {
                font-size: 2rem;
            }
            
            .tech-stack {
                justify-content: center;
            }
            
            .quick-entry-bar {
                flex-direction: column;
                gap: 10px;
            }
            
            .entry-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .header-top-bar {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }
            
            .back-btn {
                justify-content: center;
            }
            
            .entry-actions-top {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
            
            .save-draft-btn,
            .publish-btn {
                width: 100%;
            }
            
            .journal-select-grid {
                flex-direction: column;
            }
            
            .journal-select-item {
                width: 100%;
            }
            
            .mood-options {
                flex-wrap: wrap;
            }
            
            .mood-option {
                flex: 1 1 30%;
                min-width: 80px;
            }
            
            .privacy-options {
                flex-direction: column;
            }
            
            .privacy-option {
                width: 100%;
            }
            
            .timeline-entry {
                padding-left: 20px;
            }
            
            .entry-time-badge {
                position: static;
                margin-bottom: 10px;
                font-size: 0.8rem;
            }
            
            footer div {
                flex-wrap: wrap;
                gap: 15px;
            }
            
            /* Hide desktop-only elements */
            .vitalog-header-icon {
                display: none;
            }
            
            /* Adjust section margins */
            section[style*="margin: 0 -60px"] {
                margin: 0 -30px !important;
                padding: 60px 30px !important;
            }
            
            /* Mobile navigation fixes */
            .mobile-nav-bar {
                padding: 8px 0 25px;
            }
            
            .mobile-nav-bar .nav-item {
                font-size: 0.65rem;
                padding: 6px;
            }
            
            .add-icon-mobile {
                width: 40px;
                height: 40px;
                font-size: 1.5rem;
            }
        }
        
        /* Extra small devices */
        @media (max-width: 480px) {
            .case-header {
                padding: 60px 20px 40px;
            }
            
            .case-header h1 {
                font-size: 1.75rem;
            }
            
            .case-section {
                padding: 40px 20px;
            }
            
            .case-section h2 {
                font-size: 1.75rem;
            }
            
            .mobile-container {
                transform: scale(0.9);
                transform-origin: center top;
            }
            
            .results-grid {
                grid-template-columns: 1fr;
            }
            
            .mobile-demo-tabs {
                flex-direction: column;
                width: 100%;
                max-width: 300px;
            }
            
            .mobile-demo-tab {
                width: 100%;
            }
        }
    </style>
</head>
<body>