@charset "utf-8";
/* CSS Document */

	:root{
      --bg: #0b1e35;
      --bg-2:#102c4e;
      --card:#143a66;
      --text:#e8f2ff;
      --muted:#b9d4ff;
      --accent:#ffcc33; /* gold from logo */
      --accent-dark:#e0ae00;
      --ink:#071425;
      --radius:14px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    /* Reset & base */
    *{box-sizing:border-box}
	html,body{height:100%;margin:0;}
	body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; 
		color:var(--text); 
		background: radial-gradient(circle, #3f3119, #31241a);
      	line-height:1.6;
	}
	img{max-width:100%; height:auto; display:block}
    a{color:var(--accent); text-decoration: none}
    a:hover{ text-decoration: underline }
	.container{max-width:1100px; margin-inline:auto; padding:clamp(12px,2vw,24px)}

    /* Top bar */
    .site-header{
      position: sticky; top:0; z-index:1000;
      background: linear-gradient(#7b6e5ee3, #a39987e3); /*linear-gradient(180deg, var(--bg-2), rgba(16,44,78,.8));*/
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav{
      max-width:1100px; margin:auto; padding:.75rem 1rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem; color:var(--text);
      font-weight:700; letter-spacing:.3px;
    }
    .brand img{width:90px; height:90px; object-fit:contain}
    .nav-links{
      display:flex; align-items:center; gap:1rem;
    }
    .nav-links a{
      color:var(--muted); padding:.4rem .7rem; border-radius:8px;
    }
    .nav-links a[aria-current="page"], .nav-links a:hover{
      color:var(--ink); background:var(--accent);
    }
    .burger{display:none; background:none; border:0; color:var(--text); font-size:1.4rem}
/* Contact blocks */
    .contact-methods{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
    @media (max-width: 900px){ .contact-methods{ grid-template-columns: 1fr } }
    .method{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:12px }
    .method h3{ margin:.25rem 0 .25rem; color:#ffe38c }
    .method p{ margin:0 }
    .hl{ color:#fff; font-weight:800 }

    /* Form */
    form{ display:grid; gap: .9rem }
    label{ display:block; color:var(--text) }
    .req{ color:#ffe38c }
    input[type="text"], input[type="email"], input[type="tel"], select, textarea{
      width:100%; padding:.8rem .9rem; border-radius:10px; border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.16); color:#fff; outline: none;
    }
    input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55) }
    textarea{ min-height: 140px; resize: vertical }

	input[type="checkbox"]{
		height: 20px;
		width: 20px;
		vertical-align: middle;
	}

    @media (max-width: 820px){
      .burger{display:block}
      .nav-links{
        position:fixed; inset:64px 0 auto 0; background:var(--bg-2);
        border-bottom:1px solid rgba(255,255,255,.06);
        padding:1rem; display:none; flex-direction:column; gap:.5rem;
      }
      .nav-links.open{display:flex}
    }

    /* Hero */
    .hero{
      max-width:1100px; margin: clamp(1rem, 4vw, 2rem) auto 1rem; padding: 1rem;
      display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center;
    }
    @media (max-width: 900px){ .hero{ grid-template-columns: 1fr } }
    .hero-card{
      background: linear-gradient(180deg, var(--card), #10335a);
      border-radius: var(--radius);
      padding: clamp(1rem, 2vw, 1.5rem); box-shadow: var(--shadow);
      position:relative; overflow:hidden;
    }
    .hero-card::after{
      content:""; position:absolute; inset:-40% -40% auto auto; width:70%; height:200%;
      background: radial-gradient(closest-side, rgba(255,204,51,.16), transparent 65%);
      transform: rotate(25deg);
    }
    .hero h1{
      margin:.25rem 0 0; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height:1.15;
      color:var(--text);
    }
    .hero p.lead{ color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem) }
    .badge{
      display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:999px;
      background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color: var(--muted);
      font-size:.9rem;
    }
    .logo-panel{
      background: linear-gradient(180deg, #0c2748, #071a33);
      border: 1px solid rgba(255,255,255,.06);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      display:grid; place-items:center; padding:1.25rem;
    }
    .logo-panel img{ width:min(100%, 360px); height:auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }

    /* Sections */
    .section{ max-width:1100px; margin: 1rem auto 2rem; padding: 0 1rem; }
    .grid{ display:grid; gap:1.25rem }
    .cols-2{ grid-template-columns: 1fr 1fr }
    @media (max-width: 900px){ .cols-2{ grid-template-columns: 1fr } }

    .card{
      background: linear-gradient(180deg, var(--card), #123b6a);
      border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.06);
    }
    h2{ font-size: clamp(1.4rem, 2.2vw, 2rem); margin:.25rem 0 1rem; color: var(--accent) }
    h3{ margin: .5rem 0; color:#ffe38c }
    .kicker{ text-transform: uppercase; letter-spacing:.2em; font-size:.8rem; color: var(--muted) }
    .lead{ color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem) }

    .values{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
    @media (max-width: 900px){ .values{ grid-template-columns: 1fr } }
    .value{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:12px }
    .value strong{ color:#fff }

    .timeline{ border-left: 3px solid rgba(255,255,255,.15); padding-left:1rem }
    .timeline .t{ margin: .8rem 0 }
    .timeline .t time{ color:#ffe38c; font-weight:700 }

    .team{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem }
    @media (max-width: 900px){ .team{ grid-template-columns: 1fr } }
    .person{
      display:grid; grid-template-columns: 1fr; gap:1rem; align-items:center;
      background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:12px;
    }
    .avatar{
      width:84px; height:84px; border-radius:50%; background: linear-gradient(180deg, #1b4b7b, #0c2a4e);
      display:grid; place-items:center; font-weight:800; color:var(--ink); border:2px solid var(--accent);
    }

    .cta{
      display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:.75rem
    }
    .btn{
      display:inline-flex; align-items:center; gap:.5rem;
      background: var(--accent); color: var(--ink); border:0; padding:.8rem 1rem;
      font-weight:700; border-radius:12px; cursor:pointer; box-shadow: 0 8px 18px rgba(255,204,51,.25);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn:hover{ transform: translateY(-1px); background: var(--accent-dark); box-shadow: 0 10px 22px rgba(255,204,51,.35) }
    .btn.secondary{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.2); box-shadow:none }
    .foot{
      text-align:center; color:var(--muted); padding:2rem 1rem; border-top:1px solid rgba(255,255,255,.06);
      background: var(--bg-2);
    }

	.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:48px; background: linear-gradient(#6b5c4be3, #615242e3);}
	.footer-nav a{margin-right:14px}
    /* Small niceties */
    .sr-only{ position:absolute; left:-9999px }
    .spark{ color:#ffe38c }