* { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif; line-height:1.6; color:#333; background:#fff; }

    /* ===== Header (3-part: brand | role | nav) ===== */
    .site-header { 
      position:fixed; 
      top:0; 
      left:0;
      right:0;
      z-index:10; 
      background:rgba(255, 255, 255, 0.8); 
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(238, 238, 238, 0.5);
      transform: translateY(0);
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 1;
    }
    
    .site-header.header-hidden {
      transform: translateY(-100%);
      opacity: 0;
    }
    
    .site-header .wrap {
      max-width:800px; margin:0 auto; padding:12px 20px;
      display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
    }
    .site-header nav a[aria-current="page"] {
        border-bottom-color: #111; /* or any style you like for the active page */
      }
    .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#111; justify-self:start; }
    .brand .logo { width:24px; height:24px; border-radius:6px; }
    .brand .name { font-weight:600; letter-spacing:.1px; white-space:nowrap; color:#111; }
    .role { justify-self:center; color:#444; font-size:14px; letter-spacing:.3px; text-transform:uppercase; }
    nav { display:flex; gap:18px; justify-self:end; }
    nav a { text-decoration:none; color:#111; padding:6px 2px; border-bottom:2px solid transparent; }
    nav a:hover, nav a:focus { border-bottom-color:#111; outline:none; }

    /* Mobile-first responsive design - simple stacking */
    @media (max-width: 768px) {
      .site-header .wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 16px;
        padding: 20px;
        text-align: center;
      }
      
      .brand {
        justify-self: center;
      }
      
      .role {
        justify-self: center;
        font-size: 13px;
      }
      
      nav {
        justify-self: center;
        gap: 24px;
      }
      
      nav a {
        padding: 8px 12px;
        border-radius: 6px;
        background: transparent;
        transition: background 0.2s;
      }
      
      nav a:hover,
      nav a:focus {
        background: rgba(0,0,0,0.05);
        border-bottom: none;
      }
    }

    /* Small mobile screens */
    @media (max-width: 480px) {
      .site-header .wrap {
        padding: 16px;
        gap: 14px;
      }
      
      .brand .name {
        font-size: 0.95rem;
      }
      
      .brand .logo {
        width: 20px;
        height: 20px;
      }
      
      .role {
        font-size: 12px;
      }
      
      nav {
        gap: 20px;
      }
      
      nav a {
        padding: 6px 10px;
        font-size: 0.95rem;
      }
    }

    /* Extra small screens */
    @media (max-width: 360px) {
      .site-header .wrap {
        padding: 12px;
        gap: 12px;
      }
      
      .brand .name {
        font-size: 0.9rem;
      }
      
      .brand .logo {
        width: 18px;
        height: 18px;
      }
      
      nav {
        gap: 16px;
      }
      
      nav a {
        padding: 5px 8px;
        font-size: 0.9rem;
      }
    }

    .site-header nav a[aria-current="page"] {
      border-bottom-color: #111; /* or any style you like for the active page */
    }
    ::selection {
      background: #007bff; /* your custom background color */
      color: #fff; /* text color when selected */
    }
    .container { max-width:800px; margin:0 auto; padding:40px 20px; margin-top: 80px; }

    /* Hero (photo removed) */
    .hero { text-align:left; margin-bottom:60px; padding-bottom:40px; border-bottom:1px solid #eee; }
    h1 { font-size:2.5em; font-weight:800; margin-bottom:10px; color:#222; }
    .subtitle { font-size:1.2em; color:#666; margin-bottom:30px; }
    .tagline { font-size:1.1em; color:#555; font-style:italic; }

    .section { margin-bottom:50px; }
    .section h2 { font-size:1.8em; font-weight:500; margin-bottom:30px; color:#222; }
    .apps-grid { display:grid; gap:30px; grid-template-columns:repeat(2, minmax(0,1fr)); }

    .app-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:22px; transition:transform .2s, box-shadow .2s; }
    .app-card:hover { transform:translateY(-2px); box-shadow:0 8px 125px rgba(0,0,0,.1); }
    .app-header { display:flex; align-items:center; margin-bottom:15px; }
    .app-icon { width:48px; height:48px; border-radius:8px; margin-right:12px; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.1); }
    .app-title { font-size:1.3em; font-weight:600; color:#222; }
    .app-description { color:#666; margin-bottom:20px; line-height:1.6; }
    .app-links { display:flex; gap:12px; flex-wrap:wrap; }

    .btn { display:inline-block; padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:500; font-size:.9em; transition:.2s; border:1px solid transparent; }
    .btn-primary { background:#007bff; color:#fff; }
    .btn-primary:hover { background:#0056b3; }
    .btn-secondary { background:transparent; color:#666; border-color:#ddd; }
    .btn-secondary:hover { background:#f8f9fa; border-color:#007bff; color:#007bff; }
    .btn-disabled { opacity:.6; cursor:not-allowed; pointer-events:none; }

    .philosophy { background:#f8f9fa; padding:40px; border-radius:12px; margin:40px 0; }
    .philosophy h3 { font-size:1.4em; margin-bottom:20px; color:#222; }
    .philosophy p { margin-bottom:15px; color:#555; }

    .story p { margin-bottom:20px; color:#555; }

    .cta { text-align:center; padding:40px; border-radius:12px; margin:40px 0; }
    .cta h3 { margin-bottom:15px;}
    .cta p { margin-bottom:25px; }

    .contact { background:#222; color:#fff; padding:40px; border-radius:12px; text-align:center; }
    .contact h3 { color:#fff; margin-bottom:15px; }
    .contact p { color:#ccc; margin-bottom:10px; }
    .contact a { color:#fff; text-decoration:none; font-weight:500; font-size:1.1em; }
    .contact a:hover { text-decoration:underline; }

    .footer { text-align:center; margin-top:60px; padding-top:40px; border-top:1px solid #eee; color:#666; font-size:.9em; }
    .footer p { margin-bottom:10px; }

    @media (max-width:768px){
      .container { padding:30px 15px; margin-top: 120px; }
      h1 { font-size:2em; }
      .app-links { flex-direction:column; }
      .btn { text-align:center; }
      .philosophy,.cta,.contact { padding:30px 20px; }
      .apps-grid { grid-template-columns:1fr; gap:20px; }
      .app-card { padding:18px; }
    }