/* CSS Document */
      /* Fullscreen Hero */
      .hero {
        position: relative;
        height: 100vh;
        background: url('/tesla/tesla-Oct25-Utz.jpg') no-repeat center center/cover;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
      }
      .hero::after {
        content: "";
        position: absolute;
        top:0; left:0; right:0; bottom:0;
        background: rgba(0,0,0,0.45);
      }
      .hero-content { position: relative; z-index: 2; }
      .section { padding: 70px 0; }

      .tool-card {
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 16px;
        padding: 22px;
        background: #fff;
        box-shadow: 0 8px 30px rgba(0,0,0,.05);
        height: 100%;
      }
      .tool-card h3 { margin: 0 0 8px 0; }
      .tool-card p { margin: 0 0 14px 0; color: rgba(0,0,0,.7); }
      .tool-badge {
        display: inline-block;
        font-size: .85rem;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(13,110,253,.08);
        color: #0d6efd;
        margin-bottom: 12px;
      }

      footer {
        background: #111;
        color: #aaa;
        padding: 20px;
        text-align: center;
      }



    html{scroll-behavior:smooth;}

    h1{margin:0 0 6px 0;}
    .meta{margin:8px 0 14px 0;color:var(--muted)}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    audio{width:100%;}

    /* Top nav */
    .locksounds-nav{
      margin: 10px 0 22px 0;
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:12px;
      background:#fff;
      position: sticky;
      top: 10px;
      z-index: 5;
    }
    .locksounds-nav a{
      padding:4px 8px;
      border-radius:8px;
      background:#f7f9ff;
    }
    .locksounds-nav a:hover{background:#eef3ff;text-decoration:none}

    /* Sets */
    .set{
      margin:28px 0;
      padding:16px;
      border:1px solid var(--border);
      border-radius:14px;
    }
    .sethead{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap:12px;
      margin:0 0 12px 0;
    }
    .sethead h2{margin:0}
    .toplink{font-size:.9rem; opacity:.8}

    .grid{
      display:grid;
      gap:12px;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    }

    .item{
      padding:12px;
      border:1px solid var(--border2);
      border-radius:12px;
      background:#fff;
    }
	.item-row {
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:baseline;
    }
    .title{font-weight:700}
    small{opacity:.75}
    .actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:8px;
    }
    .actions .right a{font-size:.9rem; opacity:.85}

    /* On very small screens, avoid cramped cards */
    @media (max-width: 360px){
      .grid{grid-template-columns:1fr;}
    }


.about-section { background: #fff; } .about-content { max-width: 720px; } .about-text { margin-bottom: 1rem; color: rgba(0, 0, 0, .75); line-height: 1.7; } .about-image { display: block; width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } @media (max-width: 991.98px) { .about-content { max-width: none; } .about-figure { max-width: 720px; margin-right: auto; margin-left: auto; } }