/* ============================
   CommsForce Mobile‑First Base
      ============================ */

      /* Brand palette (unchanged) */
      :root{
      	  --bg:#0c0d0e;      /* near-black */
      	    --fg:#d6d7d8;      /* body text */
      	      --muted:#9da0a3;   /* secondary text */
      	        --accent:#b02a2a;  /* red accent */
      	          --ink:#3c3e41;     /* strokes/borders */

      	            /* Type scale & layout */
      	              --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      	                --max-w: 64rem;             /* 1024px */
      	                  --radius: 12px;
      	                    --shadow: 0 10px 20px rgba(0,0,0,.35);
      	                      --space-1: .5rem;
      	                        --space-2: .875rem;
      	                          --space-3: 1.25rem;
      	                            --space-4: 2rem;
      	                            }

      	                            /* Reset-ish */
      	                            *{box-sizing:border-box}
      	                            html,body{height:100%}
      	                            html{scroll-behavior:smooth}
      	                            body{
      	                            	  margin:0;
      	                            	    background:var(--bg);
      	                            	      color:var(--fg);
      	                            	        font:400 16px/1.6 var(--font-sans);
      	                            	          -webkit-font-smoothing:antialiased;
      	                            	            text-rendering:optimizeLegibility;
      	                            	            }

      	                            	            /* Links */
      	                            	            a{color:var(--fg);text-decoration:none}
      	                            	            a:hover{color:#fff}
      	                            	            a:focus-visible,
      	                            	            button:focus-visible,
      	                            	            input:focus-visible,
      	                            	            textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

      	                            	            /* Layout helpers */
      	                            	            .container{
      	                            	            	  width:100%;
      	                            	            	    max-width:var(--max-w);
      	                            	            	      margin:0 auto;
      	                            	            	        padding:0 var(--space-3);
      	                            	            	        }
      	                            	            	        .section{padding:var(--space-4) 0}
      	                            	            	        .card{
      	                            	            	        	  background:rgba(255,255,255,.02);
      	                            	            	        	    border:1px solid var(--ink);
      	                            	            	        	      border-radius:var(--radius);
      	                            	            	        	        box-shadow:var(--shadow);
      	                            	            	        	          padding:var(--space-4);
      	                            	            	        	          }

      	                            	            	        	          /* Header / hero */
      	                            	            	        	          header{padding:4.5rem 0 3rem;text-align:center}
      	                            	            	        	          .header-logo{display:inline-block;vertical-align:middle}
      	                            	            	        	          .site-title{font-size:2rem;margin:.75rem 0 0}
      	                            	            	        	          .lead{color:var(--muted);font-size:1.05rem;margin:.75rem auto 1.25rem;max-width:40ch}

      	                            	            	        	          /* Headings */
      	                            	            	        	          h1,h2,h3{line-height:1.2;margin:.2em 0 .3em}
      	                            	            	        	          h2{font-size:1.5rem}
      	                            	            	        	          h3{font-size:1.25rem}

      	                            	            	        	          /* Lists */
      	                            	            	        	          ul{margin:.5rem 0 0 0;padding:0;list-style:none}
      	                            	            	        	          ul li{margin:.35rem 0;color:var(--muted)}

      	                            	            	        	          /* Buttons */
      	                            	            	        	          .btn{
      	                            	            	        	          	  display:inline-block;
      	                            	            	        	          	    background:var(--accent);
      	                            	            	        	          	      color:#fff;
      	                            	            	        	          	        border:none;
      	                            	            	        	          	          border-radius:999px;
      	                            	            	        	          	            padding:.85rem 1.25rem;
      	                            	            	        	          	              font-weight:600;
      	                            	            	        	          	                text-align:center;
      	                            	            	        	          	                  cursor:pointer;
      	                            	            	        	          	                    transition:transform .06s ease, filter .2s ease;
      	                            	            	        	          	                    }
      	                            	            	        	          	                    .btn:hover{filter:brightness(1.07)}
      	                            	            	        	          	                    .btn:active{transform:translateY(1px)}
      	                            	            	        	          	                    .btn--ghost{
      	                            	            	        	          	                    	  background:transparent;
      	                            	            	        	          	                    	    border:1px solid var(--ink);
      	                            	            	        	          	                    	      color:var(--fg);
      	                            	            	        	          	                    	      }

      	                            	            	        	          	                    	      /* Forms */
      	                            	            	        	          	                    	      form{width:100%}
      	                            	            	        	          	                    	      input,textarea{
      	                            	            	        	          	                    	      	  width:100%;
      	                            	            	        	          	                    	      	    background:#111315;
      	                            	            	        	          	                    	      	      color:var(--fg);
      	                            	            	        	          	                    	      	        border:1px solid var(--ink);
      	                            	            	        	          	                    	      	          border-radius:10px;
      	                            	            	        	          	                    	      	            padding:0.9rem 0.95rem;
      	                            	            	        	          	                    	      	              font:inherit;
      	                            	            	        	          	                    	      	              }
      	                            	            	        	          	                    	      	              textarea{min-height:140px;resize:vertical}
      	                            	            	        	          	                    	      	              .form-grid{display:grid;gap:var(--space-2)}    /* stacks on mobile */
      	                            	            	        	          	                    	      	              .form-actions{margin-top:.5rem}

      	                            	            	        	          	                    	      	              /* Divider */
      	                            	            	        	          	                    	      	              hr{
      	                            	            	        	          	                    	      	              	  border:0;border-top:1px solid var(--ink);
      	                            	            	        	          	                    	      	              	    margin:var(--space-4) 0;
      	                            	            	        	          	                    	      	              	    }

      	                            	            	        	          	                    	      	              	    /* Footer */
      	                            	            	        	          	                    	      	              	    footer{padding:2rem 0;text-align:center;color:var(--muted);font-size:.92rem}

      	                            	            	        	          	                    	      	              	    /* ==================================
      	                            	            	        	          	                    	      	              	       Responsive upsizing (tablet/desktop)
      	                            	            	        	          	                    	      	              	          ================================== */
      	                            	            	        	          	                    	      	              	          @media (min-width: 640px){
      	                            	            	        	          	                    	      	              	          	  header{padding:6rem 0 4rem}
      	                            	            	        	          	                    	      	              	          	    .site-title{font-size:2.6rem}
      	                            	            	        	          	                    	      	              	          	      .lead{font-size:1.125rem}
      	                            	            	        	          	                    	      	              	          	        h2{font-size:1.75rem}
      	                            	            	        	          	                    	      	              	          	        }

      	                            	            	        	          	                    	      	              	          	        @media (min-width: 900px){
      	                            	            	        	          	                    	      	              	          	        	  /* Two-column option when needed */
      	                            	            	        	          	                    	      	              	          	        	    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
      	                            	            	        	          	                    	      	              	          	        	      /* Wider hero */
      	                            	            	        	          	                    	      	              	          	        	        .site-title{font-size:3rem}
      	                            	            	        	          	                    	      	              	          	        	        }

      	                            	            	        	          	                    	      	              	          	        	        /* ===========================
      	                            	            	        	          	                    	      	              	          	        	           Accessibility & niceties
      	                            	            	        	          	                    	      	              	          	        	              =========================== */
      	                            	            	        	          	                    	      	              	          	        	              ::selection{background:rgba(176,42,42,.35)}
      	                            	            	        	          	                    	      	              	          	        	              img{max-width:100%;height:auto;display:block;margin:0 auto}
      	                            	            	        	          	                    	      	              	          	        	              .hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;}

      	                            	            	        	          	                    	      	              	          	        	              /* Reduced motion */
      	                            	            	        	          	                    	      	              	          	        	              @media (prefers-reduced-motion: reduce){
      	                            	            	        	          	                    	      	              	          	        	              	  html{scroll-behavior:auto}
      	                            	            	        	          	                    	      	              	          	        	              	    .btn{transition:none}
      	                            	            	        	          	                    	      	              	          	        	              	    }
      	                            	            	        	          	                    	      	              	          	        	              }
      	                            	            	        	          	                    	      	              	          	        }
      	                            	            	        	          	                    	      	              	          }
      	                            	            	        	          	                    	      	              }
      	                            	            	        	          	                    	      }
      	                            	            	        	          	                    }
      	                            	            	        	          }
      	                            	            	        }
      	                            	            }
      	                            }
      }
