h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
 :root{
    --bg:#f5f7f9;
    --accent:#c9a646;
    --dark:#0b3f22;
    --muted:#000;
    --card:#ffffff;
    --glass: rgba(255,255,255,0.6);
    --max:1200px;
  }

  /* Layout */
  html, body {
    margin:0; padding:0; background:var(--bg); color:var(--dark);
  }
  .page {
    min-height:100vh;
    background: linear-gradient(180deg, #f0fbf2 0%, var(--bg) 40%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 20px;
    box-sizing:border-box;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
    color:var(--dark);
  }

  .shell {
    width:100%;
    max-width:var(--max);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 16px 40px rgba(7,20,30,0.08);
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
    border:1px solid rgba(0,0,0,0.04);
  }

  /* HERO */
  .hero {
    display:grid;
    grid-template-columns:1fr 360px;
    gap:28px;
    align-items:center;
    padding:48px;
    background:linear-gradient(135deg,#0b5d2a 0%, #158f3b 100%);
    color:white;
  }
  

  .brand-row { display:flex; gap:14px; align-items:center; }
  .logo {
    width:72px;
    height:72px;
    border-radius:14px;
    background:rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid rgba(255,255,255,0.10);
    box-shadow:0 8px 22px rgba(0,0,0,0.12);
  }
  .logo img{ width:56px; height:56px; object-fit:contain; display:block; }

  .brand { font-weight:800; letter-spacing:0.6px; font-size:28px; }
  .tag { font-size:13px; opacity:0.95; }

  .headline { margin:18px 0 8px; font-size:30px; line-height:1.02; font-weight:800; }
  .lead { margin:0; opacity:0.95; font-size:15px; }

  .kpis { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
  .kpi { background:rgba(255,255,255,0.08); padding:8px 12px; border-radius:10px; font-weight:700; font-size:13px; }

  .cta { margin-top:20px; display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap; }
  .btn {
    display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer; text-decoration:none; border:none;
  }
  .btn-primary { background:var(--accent); color:#082707; box-shadow:0 8px 24px rgba(201,166,70,0.18); }
  .btn-outline { background:transparent; color:white; border:1px solid rgba(255,255,255,0.12); }

  /* hero aside */
  .aside {
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    padding:18px; border-radius:12px; backdrop-filter:blur(6px);
    color:white;
  }
  .products { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
  .prod {
    display:flex; gap:10px; align-items:center; background:var(--accent); padding:8px; border-radius:10px; height:80px;
  }
  .prod img { width:40px; height:40px; flex:0 0 40px; }

  /* Features */
  .features { padding:36px 48px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; background:var(--bg); }
 

  .card {
    background:var(--card); border-radius:12px; padding:18px; box-shadow:0 8px 26px rgba(12,20,30,0.04); transition:transform .28s ease, box-shadow .28s ease;
  }
  .card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(4,14,30,0.09); }

  .card h4{ margin:0 0 8px; font-size:16px; }
  .card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }

  /* Contact section */
  .contact {
    display:flex; gap:28px; padding:36px 48px 48px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
  }
  

  .contact .info { flex:1; }
  .contact .form { width:420px; max-width:100%; }

  .field { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  input[type="text"], input[type="email"], textarea, .input {
    padding:12px 14px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); font-size:15px; background:white; width:100%;
    box-sizing:border-box;
  }
  textarea { min-height:120px; resize:vertical; }

  .small { font-size:13px; color:var(--muted); }

  /* footer */
  .foot { display:flex; justify-content:space-between; padding:14px 48px; align-items:center; border-top:1px solid rgba(3,7,18,0.03); background:transparent; }
  

  /* subtle animations */
  .logo, .card, .prod { will-change:transform; }
  
  .logo { animation:float 6s ease-in-out infinite; }

  /* accessibility helpers */
a:focus, button:focus, input:focus, textarea:focus {
    outline: 3px solid rgba(201,166,70,0.18);
    outline-offset: 3px;
}
  /* Responsive & Mobile Optimisations */
  @media (max-width: 992px) {
    .hero { grid-template-columns:1fr 320px; padding:36px; gap:18px; }
    .headline { font-size:26px; }
    .logo { width:64px; height:64px; }
    .logo img{ width:48px; height:48px; }
    .products { grid-template-columns:repeat(2,1fr); }
    .features { padding:28px; grid-template-columns:repeat(2,1fr); gap:14px; }
    .contact { padding:28px; gap:18px; }
    .foot { padding:12px 28px; }
    .brand {
        font-size: 24px;
    }

  @media (max-width: 768px) {
    .page { padding:20px 14px; }
    .hero {
      display:block;
        
    }
    .hero > div:first-child { margin-bottom:18px; }
    .aside {
      margin-top:12px;
      padding:14px;
      border-radius:12px;
    }
    .headline { font-size:22px; }
    .lead { font-size:14px; }
    .brand { font-size:24px; }
    .brand-row { gap:10px; }
    .logo { width:56px; height:56px; }
    .logo img{ width:44px; height:44px; }

    /* Make CTAs easier to tap on mobile */
    .cta { flex-direction:column; align-items:stretch; gap:12px; margin-top:16px; }
    .btn { width:100%; justify-content:center; padding:14px; font-size:16px; border-radius:12px; }

    /* Stack features */
    .features { display:grid; grid-template-columns:1fr; padding:20px 18px; gap:12px; }

    /* Contact stack */
    .contact { display:block; padding:20px; }
    .contact .form { width:100%; margin-top:14px; }

    /* Larger input targets */
    input[type="text"], input[type="email"], textarea, .input { padding:14px 12px; font-size:16px; }

    /* Disable hover transform on touch devices */
    .card:hover { transform:none; box-shadow:0 8px 26px rgba(12,20,30,0.04); }

    .products { grid-template-columns:repeat(2,1fr); gap:8px; }
    .prod { height:auto; padding:10px; align-items:flex-start; }
    .prod img { width:36px; height:36px; }

    .foot { display:block; text-align:center; gap:8px; }
    .foot > div { margin:6px 0; }
  }

  /* Very small screens */
  @media (max-width: 420px) {
    .kpi { font-size:12px; padding:8px 10px; }
    .headline { font-size:20px; }
    .brand { font-size:18px; }
    .logo { width:52px; height:52px; }
    .logo img{ width:40px; height:40px; }
    .products { grid-template-columns:1fr; }
  }

  /* make images responsive if external or SVGs */
  img { max-width:100%; height:auto; display:block; }